ランサーズでフロントエンドエンジニアとして従事している谷（@high_g_engineer）です。
2021年9月に入社しました。
最近は、年明けからAWSの学習を少しずつ積み上げており、今年はAWSができるフロントエンドエンジニアを目指して日々頑張っております。
今回、自分がエンジニアブログ初投稿ということで、入社してからフロントエンド周りで取り組んでいることの現状報告をしようと思います。
取り組みは、以下になります。
- フロントエンド定例
- デザインシステムの構築
- Reactでの機能開発
フロントエンド定例
フロントエンドチームでは、毎週金曜にフロントエンド定例を行っています。
フロントエンド領域の最近気になっている技術や社内での取り組み等のトピックを持ち寄って発表し、それぞれのトピックに対して気になったことがあれば、掘り下げて議論するという場になっています。
2021年9月半ば頃から活動を行っており、半年程運用できております。
以下の様な形で話す内容を毎週記載しており、議事録として知見を半年分残すことが出来ています。
↓議事録の内容
↓フロントエンド定例の様子
デザインシステムの構築
ランサーズのフロントエンドは、大部分がjQuery+Sass（BEM）で作られており、その仕組に対応したHTMLベースのデザインシステムは既にあります。
しかし、社内で利用しているデザインツールのFigmaと既存デザインシステムとの間に差分が生じており、その差分から元のデザインとは似て非なるUIデザインがFigma上でも実装上でも少しずつ発生してしまうという現象が起こってきています。
また、徐々に導入しつつあるReactと既存デザインシステムの相性が悪く、HTML, Sass（BEM）で作成されたデータを元に、Reactコンポーネントを作成するという状態になっています。
この現状を打破する為に、まずはデザイナーさんがFigmaを中心にしたUIカタログを作成し、フロントエンドエンジニアの方で、Storybookを使用したデザインシステムを作成する取り組みを行っています。
Storybookの環境を整え、2つ程Reactコンポーネントを作成した状態で、まだまだですが、
yarn add lancers-design-systemでインストールし、
ソースコード上で、import { Button } from lancers-design-system を記述することで、
デザインシステムで作成したReactコンポーネントを利用できる様な仕組みにしていきたいと思っています。
Reactでの機能開発
ランサーズの大部分は、jQuery + Sassで作られているのですが、Reactを利用して一部機能を置換したり、新機能の作成を行ったりしています。
去年リリースされたパッケージという機能がReactで作成されており、unstated-nextでグローバルステートを管理し、Fomikでフォーム実装、styled-components（利用しているCSS in JSはemotion）といった技術が採用されています。
最近は、新機能開発でグローバルステート管理にRecoil、データ取得にSWR、CSS in JSにemotionを利用したcss={◯◯}の記述、ディレクトリ管理をAtomic Designではない構成に工夫する等してReact開発が捗っています。
ランサーズのフロントエンド環境は、まだまだ課題が多く、これからどんどん改善していかないといけないというステータスです。
↓詳しくは、昨年末のアドベントカレンダーで書いた記事が参考になりそうです。
CakePHP+jQuery製UIをReactでシンプルにした件
現状報告は以上です。
これから定期的にフロントエンド関連の情報を発信していこうと思うので、応援よろしくお願いいたします。