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

tanifumiya|2022年07月01日
フロントエンド

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

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

以下、今週の内容です。

2022年上半期の振り返り

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

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

  • 1月
    • 年末年始で新プロジェクトでNext.js導入を行う為、技術調査を行う
    • 調査期間が超短期間だった為、諸々の調整がつかずにNext.jsの導入は見送り
    • CakePHPを中心とした現在のアーキテクトに縛られずに、Next.jsを利用した最善形を考える旅にでることに
    • 新プロジェクトはCakePHP + Reactで作ることになり、構成に関して、出来る限り既存環境を利用し、再開発的なことは行わないような指示があったが、一理あるという気持ちはありつつも本当にそれでいいの?という疑問が浮かぶ
    • 既存プロジェクトで採用されているフロントエンドの技術スタックは、フロントエンドの市場で採用されているものと既にズレが発生しており、そのまま既存プロジェクトをコピペして開発を進めると、負債を加速度的に生み出してしまう・・・2022年はそれを止めようと決意する
    • ディレクトリ構成、グローバルなデータ管理、フォームライブラリ、CSSの書き方、そもそももっと再利用性を高めて効率的に開発出来ないか等を模索する
    • 新プロジェクトに、Recoil、SWR、アトミックデザインを廃止して開発しやすいディレクトリ構造、styled-components的な記述はやめて、emotionのcss={◯◯}の徹底等を採用する
  • 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で話したり、開発部会で共有したりする
    • 毎週フロントエンド定例の内容をエンジニアブログとしてアップすることにする
    • 新プロジェクトのリリース目前(いまここ)

ざっくりとまとめましたが、流れ的に1〜3月で色々な仕込みを行い、4月〜6月に仕込んだものを利用して深めながら一気に作り上げる期間になりました。

ここから半年さらにランサーズのフロントエンドを前進させていきたいと思います!

次回の更新予定は、7/8(金)になります!

前回の定例内容はこちらから確認可能ですのでご興味いただければ下記のリンクから閲覧いただければと思います。

https://engineer.blog.lancers.jp/?s=フロントエンド定例