2022年上半期の振り返り フロントエンド定例 2022/7/1

こんにちは、フロントエンドチームの谷（@high_g_engineer）です。
今週のフロントエンド定例の内容を記載します。

フロントエンド定例について、以前の記事（ランサーズのフロントエンドチームが取り組んでいること）でお伝えしたのですが、毎週金曜日に開催しており、実際の業務で取り組んでいることや気になった技術情報等をシェアしあう会になっています。

以下、今週の内容です。

2022年上半期の振り返り

本日から7月ということで上半期が終わりました。2022年も半分が終わりです。
光陰矢の如し、時間が過ぎ去るのは早いですね。

2022年も残り半分ということで、良い区切りなので、
今年に入ってから今まで何をやっていたかを振り返ろうと思います。

• 1月
  • 年末年始で新プロジェクトでNext.js導入を行う為、技術調査を行う
  • 調査期間が超短期間だった為、諸々の調整がつかずにNext.jsの導入は見送り
  • CakePHPを中心とした現在のアーキテクトに縛られずに、Next.jsを利用した最善形を考える旅にでることに
  • 新プロジェクトはCakePHP + Reactで作ることになり、構成に関して、出来る限り既存環境を利用し、再開発的なことは行わないような指示があったが、一理あるという気持ちはありつつも本当にそれでいいの？という疑問が浮かぶ
  • 既存プロジェクトで採用されているフロントエンドの技術スタックは、フロントエンドの市場で採用されているものと既にズレが発生しており、そのまま既存プロジェクトをコピペして開発を進めると、負債を加速度的に生み出してしまう・・・2022年はそれを止めようと決意する
  • ディレクトリ構成、グローバルなデータ管理、フォームライブラリ、CSSの書き方、そもそももっと再利用性を高めて効率的に開発出来ないか等を模索する
  • 新プロジェクトに、アトミックデザインを廃止し開発しやすいディレクトリ構造の再考、styled-components的な記述は辞めてemotionのcss={◯◯}の徹底、Recoilの採用、SWRの採用を行った
• 2月
  • 上記で採用したものをベースに新プロジェクトの開発をスタートする
  • 何故かそれだけじゃ駄目だと思い、Twitterでフロントエンドエンジニアの募集を行う
  • なんと約20名以上の方々の募集が集まる
  • 新プロジェクトの開発を行いながら、カジュアル面談マラソンがスタートし、無事に走りきる
  • この頃、新プロジェクトは、form部分の実装をしており、既存はFormikを利用していたが、もう少しシンプルな実装を求めていたのとデータ管理で採用していたRecoilとの相性を考え、react-hook-formを採用する
• 3月
  • 活動がストップしていたデザインシステムの活動を再開する
  • エアプだったStorybookを色々触りだす
  • その頃、デザイナーの長倉さんがFigma上でデザインシステムの進捗を見せだした影響もあり、この勢いに乗っかってコンポーネントをガシガシ作っていこうと熱を入れる
  • yarn add design-systemとimport { Button } from ‘design-system’が出来る様になったら良いなあとぼんやりと考える
  • この頃は思考が色々駆け巡っていたので、その思考を色々アウトプットする場を欲していた
  • ゆるふわな技術会話をするSlackチャンネルを作る
  • Gather上で若手エンジニアを集めて技術的会話をする為の飲み会をする
  • 次の日から勇魚さん（@isanasan_）、翔さん（@syo_igarashi）辺りとGatherに居続ける
• 4月〜6月
  • エンジニアの体制が変わって、フロントエンド開発の刷新がゴリッと進めやすくなる
  • Storybookを利用したデザインシステムがかなり強化される
  • yarn add @lancers/design_guideline と import { Button } from ‘@lancers/design_guideline’ での開発が現実となる
    
  • デザインシステム上で定義したatomレベルのReactコンポーネントの数がプロジェクトで利用できるレベルで揃う
  • 新プロジェクトでデザインシステムを活用し、なおかつStorybook上でUI実装、テストを行うことでスピードを上げて開発を行う
  • デザインシステムの記事を書いたり、Podcastで話したり、開発部会で共有したりする
  • 毎週フロントエンド定例の内容をエンジニアブログとしてアップすることにする
  • 新プロジェクトのリリース目前（いまここ）