qiita.comフロントエンドエンジニアの亀田です。気が付けばあっという間に年末ですね。自分がLCLに入社してからは、約半年でコロナ禍になり、色々と失われた期間があるので、そんなに長く在籍している感覚はありませんが、今年の10月で丸3年経ったみたいです。時の流れが早すぎて、時に焦りや残酷さすら覚えますが、今年は会社としてもチームとしても大きな変化があり、結果的にとても充実した1年でした。毎年恒例ではありますが、「フロントエンドチームの2022年振り返り」と題して、今年の出来事を振り返っていきます。上述の通り、2022年は全社としても、技術開発部としても、フロントエンドチームとしても、大きな変化があった1年となりました。4月に社長が変わり、10月には組織が変わり、内部的なフォーメーションも変わり、新たなメンバーが加わり、長年活躍してきたメンバーの退職もありと、ここ数年で最もメンバーが入れ替わった年になったと思います。退職された方々がいなくなってしまった寂しさはありますが、新たにパワフルなメンバーも加わり、会社として1つの時代が幕を閉じ、新たな時代が始まった印象で、個人的にはポジティブな印象を持っています。社会情勢としても、コロナ禍から明けたとは到底言えない状況は続いていますが、以前に比べて徐々に人の動きも活発になり、有り難いことに当社のサービスも多くのユーザーに利用していただいています。同時に社員のモチベーションも大きく回復した1年だったと思います。フロントエンドチームの現状2020年春から、フロントエンドチームは3名体制で運営してきましたが、今年新たなメンバーが加わり、現在は4名体制になりました。昨年から、各サービス単位で職種をミックスしたサービスカット体制を敷いているため、フロントエンドエンジニアも担当サービスを持ち、普段は自分が担当しているサービスのアプリケーション開発を行っています。サービスで開発対象が分かれているため、フロントエンドのメンバー同士で共同開発を行うことは少ない状態にはなっていますが、週次のMTGで積極的にコミュニケーションを取ったり、普段から困ったことや相談したいことがあれば、気軽に相談し合える関係性があります。フロントエンドチームが所属している技術開発部としても、組織・体制として大きな変化がありましたが、フロントエンドチームがこれまで築き上げてきた関係性や雰囲気の良さは健在で、今後より良くなっていく期待感すら漂っている状態です。今年の春、現在の4名体制になる前に、1名のメンバーがジョインし、その後退職してしまう出来事がありました。フロントエンドチームとしては、昨年から新メンバーの採用活動を継続的に行ってきて、チームにとって念願のメンバー加入でしたが、結果的に退職してしまったことは、とても残念なことであり、素直に悲しい出来事でした。ブログに書くことなのかは分かりませんが、自分達にとっては忘れてはならない出来事だと思っているので、この記事に刻んでおこうと思います。前述でのメンバーの退職で、正直なところ大きなショックを受けましたが、下ばかり向いているわけにはいかないと、メンバー同士で奮い立たせて前を向いて引続き採用活動に挑みました。コミュニケーションの取り方、オンボーディングと見直しを行いました。この部分はかなりメンバー間で根気強く会話して、現時点で妥協のないものを考えていきました。その後、採用活動を再開して、新たなメンバーを迎え入れることが出来ました。新たに加入してくれたメンバーは、上手くチームや組織に馴染むことが出来て、今では毎日楽しそうにバリバリと開発しています。性格的にも明るいメンバーで、チームの雰囲気としても一段と良くなった効果までもたらしてくれていると感じています。レスポンシブ対応ここからは各サービスでの、フロントエンド開発が絡む話題をピックアップします。当社の中で、最も多くのユーザー数を持つサービスであるバス比較なびですが、リリースから十数年経ちました。www.bushikaku.net十数年経つと、当然ですが技術的負債も多くなり、これまで適切に対策を行ってこなかったことや歴史的な経緯でかなり負債が肥大化した状態になっています。実はこの状況は、自分が入社した3年前から大きな課題となっており、自分の入社前から何度もリファクタの計画と実施を行ったものの、上手く突破口が見つけられていない状態にありました。昨年、当社の別のサービスである海外航空券の立ち上げで、LCLとしては初めてNext.jsを採用しました。Next.jsで実際に1つのサービスを開発する中で、開発体験の良さ、カスタマイズ性、現代のフロントエンドに必要な観点において、好感触が得られたこともあり、バス比較なびも小手先のリファクタではなく、思い切ってNext.jsを採用した新環境にリプレイスする判断を行いました。レスポンシブ対応」という名目でプロジェクトを計画しました。年内としては、第1フェーズとして、既存アプリケーションとの共存を実現するための、アーキテクチャやインフラの検討と実装、フロントエンド環境の整備を行い、画面としては1画面のリリースを目指して、ディレクター、デザイナー、バックエンド・インフラエンジニアとも協力しながらプロジェクトを進行し、先日どうにかリリースにこぎ着けました。画面の変更としては1ページの変更ですが、リプレイス環境の運用を開始出来たことや、同時にレスポンシブ対応も加えてユーザビリティ的にも改善が期待出来るプロジェクトの第1フェーズが完了したことは、とてもとても大きな一歩だと感じています。ちなみにリリースした1画面はこちらの「ご利用規約」です。ヘッダー・フッターのデザインもとてもすっきり見やすくなりつつ、簡単なテキストだけのページにはなりますが、レスポンシブ対応されてます。来年以降も、課題にぶつかりながら、エンジニア含めメンバーがわくわくしながら、より一層スピードアップして取り組んでいきたいと思います。特集コンテンツバスツアーもリリースしてから3年が過ぎましたが、どんどん機能がアップデートされているサービスです。tour.bushikaku.net今年もいくつも機能やコンテンツを追加していますが、中でもインパクトの強いのは特集コンテンツの追加です。コンテンツの内容としては、その時期におすすめしたい、特定のテーマのバスツアーの情報が1つのページにまとめられているコンテンツです。このページを見れば、そのテーマのツアー情報、おすすめツアー、新着ツアーが確認できます。CMSを導入しており、季節や時期で訴求内容が変わる特集コンテンツを、ディレクター等企画職のメンバーが、簡単に管理画面から作成、カスタマイズできるようになっている等、運用面での工夫もされた開発案件でした。12月のこの時期は、寒い時期にぴったりのイルミネーションバスツアー特集、年末詣や初詣をまとめた年末年始特集、シンプルにただただ美味しそうなカニ特集等、ユニークな特集がいくつもあるので是非見てみてください。※特集コンテンツは時期によって特集が入れ替わるため、閲覧タイミングによってはリンクからページが見られないかもしれません。トップページから閲覧ください。UIUXアップデート昨年、格安移動の姉妹サービスである海外航空券の立ち上げを行い、サービス全体として見ると、国内・海外の移動をカバーするサービスになりました。idou.meair.idou.me格安移動全体としてやるべきことはたくさんありますが、今年はサービスとしてのブランディングの再整理、ユーザビリティの再検討に力を入れてきました。格安移動も、かれこれ10年弱の歴史があるサービスで、立ち上げ当時から大きなデザインのアップデートもなく、今では一昔前を彷彿とさせるレガシーなものになっています。昨年リリースした姉妹サービスの海外航空券も、当時は既存の格安移動のデザインに合わせるという方針で進められたため、同じくレガシーなデザインをベースに構築された経緯があります。デザインが作り出す世界観、時代に合ったUI、心地の良いUXは、プロダクトの価値そのものに繋がるとても重要な要素です。我々フロントエンジニアもデザインやUIUXに対しては特に責任を持つ領域です。エンジニア自身が仕様に対しての納得感があるかどうかは開発のモチベーションを大きく左右します。今後ユーザーにとってより良い体験や価値を提供するために、今年はUIUXをアップデートするプロジェクトを立ち上げ、継続的に進めてきました。手の加えやすい海外航空券から随時変更している状況で、既に共通ヘッダーや、検索フォーム等、以前と比べて間違いなくより使いやすくなってきている実感があります。来年の3月にかけて、随時アップデートを続けていき、最終的に全ページの体裁が新デザインに統一される予定です。その後は、国内の格安移動のデザインやUIUXをアップデートして、サービス全体として更なる飛躍を目指していきます。フロントエンドチームとしても、新たなフォーメーションで新たな挑戦が始まった印象です。社会情勢としても、会社全体としても、とても良い風が吹き始めていると感じるので、来年は各サービスも会社もより良く変えていければと思いますし、既に来年が楽しみです。今後のLCLに乞うご期待ください。早いですが良いお年を。