この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
2023/04/14(金)に開催された【オフライン@福岡】俺たちのフロントエンド”大”自慢大会 に参加してきたので現地の様子をご紹介します！
お客さんとスクラムで並走している話
登壇者： 高橋ゆうきさん/クラスメソッド(@hbsnow)
- 2 年以上続いているプロジェクト
- 長期案件なのでエンジニアの入れ替わりが頻繁にあった
- さまざまなレベルのエンジニアが入れ替わりで入るためソースコードが無秩序に
- ファイル構成、State 管理、Atomic Design の整理ができていない状態
- バグ修正でバグが生まれる
- 3 スプリントかけてバグをなおすが、スプリントポイントは加算されるので進捗が出ているような錯覚に陥る
改善案
- テスト必須にした
- Issue 上での問題の洗い出しを徹底
お客さんとエンジニア全員リモートのチームのためコミュニケーションが不足ぎみに
- 質問しやすい雰囲気作りをする必要があった
- Meet や Slack Huddle があるとはいえいきなり話しかけづらい
- Gather というバーチャルオフィスを導入
- 用事がある時しか会話が発生しない問題を解決したい
- コミュニケーションがうまく行っているときは雑談が生まれやすい
- 集合するタイミングをカレンダー登録で集まるように促したが、それだけでは人が集まらないので高橋さんが常駐するようにした
- ペアプロ導入
- Live Share と Notion を使ってログを残して途中参加の人が追えるように
- 反応がとてもよかった
- お客さんのエンジニアからドメイン知識を共有してもらえたり、仕様の確認が行えるように
CI から始めたフロントエンド改善
登壇者： 主計義高さん/Findy(@nesskazu)
- リリース頻度を上げて価値提供のスピードを上げたかった
- 入った時はフロントエンドのテストがあまりなかった
- 手作業が多く負担が多い問題
- フロントエンド担当が QA が必要かを判断するようにしてリリース担当者の負担を減らすことに成功
失敗例：バックエンドのリリースが必須のリリースが FE を先にマージしてしまった
- 人の目で見てるので見落としがあった
- STG にはデプロイが申されているので本番でしか再現しない不具合だった
- PR をリスト化
CI を改善することで生産性が上がり、リリースの心理的負担や手作業を減らすことで頻繁にリリースすることが可能に
個人開発で妻のデータを吹き飛ばしたが File System Access API で改善した話
登壇者：川端彗さん/Nulab(@kwbtsts)
- 個人開発してる？
- Nulab には部活がある → 個人開発クラブがある
- プレゼン動画作成ツールをフロントエンドのみで作っている
- 一番のヘビーユーザーが妻
ある日 PC がフリーズ → 再起動したらデータが消えた
- 原因：Indexed DB にデータを保存した
- 容量がない場合勝手にデータが削除される
- File Systems API：ローカル領域の読み書きができる
ルール作りから始めるフロントエンド開発改善
登壇者：カシフクトモヤさん/マネーフォワード(@cashfooooou)
ルールの運用を見直して開発向上を図ろう
- 散らかる Atomic Design
- Redux をいろんな層から参照している
- しかしどう直したらいいかわからない ...という不満があった
ルールを簡単に守れるように整備することでストレスを軽減
- ルールを決めた背景を明確にする
- ログに残す（Slack のスレッドなど
- ドキュメントまとめるのはしんどいので簡単に始める
- 例：Morecules, Organisms がどう違うか
- ビジネスロジックからルールを決めたよ、というのを後継の人のために残しておく状態
- 注意しなくても守れるルールにする
- 自動的にルールを守れるように
- 忘れてたけどルールは守れていた、という状態が望ましい
- Lint の導入など
- ルールに対してポジティブになる
- 縛るのではなく、なぜ守ると幸せになれるかを共有する
- 自動化する
- 守れないルールはルールを見直すことも検討する
- 属人化しないようにする（みんなで考える
- 明確なルールがあると何が嬉しいのか
- 意図しない実装が減る
- レビューの負荷が減る
- オンボーディングのコストが下がる
ToB ToC 向けの開発を通じてのフロントエンドの違い
登壇者：奥さん/クラスメソッド
- スクラムで React やってるよ
- 一週間スプリント
- 0-1 の開発が多い
- デザインができてない状態でフロントを作らないといけない
- スプリントを分けた
- 実装を先にしてデザインなどの修正を次にやる
- Bullet Proof React
- 機能単位でディレクトリを分けてる
- 依存するコンポーネントが近い位置にあるようになる
- レビューしやすい
- Next.js の場合は Pages 配下を feature に変えるイメージ
-
Tailwind CSS
- ジュニアレベルのエンジニアがいる場合：お作法を考える必要がなく楽
- デザイナーとの共通認識がなかった：結局ピクセル指定をしなくてはならなくなった
-
Figma のプラグインを使うなども有効
-
toB、 toC で気にする箇所が変わる
最高の開発体験を目指して 〜Findy のフロントエンド設計刷新〜
登壇者：新福宜侑さん/Findy(@puku0x)
- 以前（2 年前）は割とレガシーだった
- テストは、ない
- 設計もない
- // なぜか動く
- モダン、シンプル、高速
- Flow から TS、Class Component を Functional Component へ
- Nx:Lint などの設定をツールに任せられる
-
設計：依存の方向を揃える
- テスト書こうね：ロジックを分離してテストをかきやすくする
- 最低限 Snapshot テスト
- 開発生産性の向上
- 最初は小さくはじめよう
-
Findy はいいぞ
懇親会の様子
オフラインイベントらしくお寿司とピザをつつきながらの懇親会が開催されました。
業務で利用しているフロントエンド技術ボード：Typescriptが多いですね
ご参加いただいた皆様、どうもありがとうございました！
Special Thanks
会場設営やグッズの提供など、本イベントはファインディ株式会社さんの主催で開催することができました。少しでも気になった方は以下のページをご参考いただければと思います。
参加者全員に提供されたグッズたち：
｢Findy｣ハイスキルなエンジニアのプレミアム転職サービス : ハイスキルなエンジニアと企業をマッチングするプレミアム転職サービス。独自に開発した解析方法によりIT/Webエンジニアのスキルと、テック企業がエンジニアにとってどれだけ魅力的なのかを客観的に格付けし、両者をマッチングします。
｢Findy Freelance｣フリーランス・副業エンジニア向け単価保証型の案件紹介サービス : Findyのフリーランス・副業エンジニア向けサービス。IT/Webエンジニアの技術力をスキル偏差値化し、単価保証された案件のみご紹介します。
｢Findy Team+｣エンジニア組織のパフォーマンス最大化サービス : 弊社独自の強みである「スキル偏差値」で培ってきたアルゴリズム・ノウハウを活用して、GitHubを連携いただくだけで、その組織に属するエンジニアのパフォーマンスや活動状況を見える化します。
｢Findy Global｣： 国内外に居住の外国人エンジニアと企業のマッチングサービス。 インドや東南アジアを中心に国内で採用が難しいハイスキルなエンジニアが多数登録。