6年前のコードベースを TS + React + Recoil でリニューアルしてみて / renewal codebase with TypeScript, React and Recoil

Transcript

1. 6年前のコードベースを TS + React + Recoil でリニューアルしてみて 幾野 直人

2. LINE フロントエンド開発センター Dev1室 新卒1年目 自己紹介 幾野 直人 Twitter: @le_panda_noir 趣味:

   鬼滅の刃、合気道、ルービック キューブ

3. 1. LINE Schedule とは?リニューアルの理由 2. リニューアル後の構成・いいところ 3. 成功したところ 4. してみた感想

   5. まとめ アウトライン

4. 1. LINE Schedule とは?リニューアルの理由 2. リニューアル後の構成・いいところ 3. 成功したところ 4. してみた感想

   5. まとめ アウトライン

5. LINE 内の日程調整サービス 候補日に投票して決定 LINE Schedule とは?

6. LINE Schedule とは?

7. LINE Schedule について このくらいの規模感 • メインの機能 ◦ イベントを作成 ◦ 参加できる日程を回答

   • 中規模 SPA

8. イベント作成の流れ 1. イベントの情報を入力

9. 2. イベントに招待する メンバーを選択 イベント作成の流れ

10. 3. メッセージを送信 イベント作成の流れ

11. イベント作成の流れ

12. 日程回答ページ 都合が良いか悪いか 各日程について選ぶ

13. • LIFF という Webプラットフォームへの移行 • 6年前のものがベース、かなりレガシーだった なぜリニューアルすることにしたのか? LINE Front-end Framework

    LINE Scheduleを

14. 以前の LINE Schedule の構成 Vue 0.10.0 zepto(jQuery) Grunt ES2015 以前

15. 以前の問題点 • モジュール化されていない →どこがどこに影響しているのかわかりづらい • 静的型がない →とてもつらい • 補完、ナビゲーションが効かない •

    ライブラリが古くて情報が少ない →コードが読みづらい、修正に自信を持てない

16. リニューアルの目標 LINE Schedule は継続的な開発の予定はない 次メンテナンスを初見の人が担当する可能性大 そもそも 逆に言えば 初見の人でもすぐ開発できるコードベースにする

17. リニューアルにあたって 目標: 初見の人でもすぐ開発できるようにする • TypeScript の導入 • ドキュメントなど情報の整備 • ビルド・デプロイの自動化

18. 1. LINE Schedule とは?リニューアルの理由 2. リニューアル後の構成・いいところ 3. 成功したところ 4. してみた感想

    5. まとめ アウトライン

19. スタイル ライブラリ テスト リンター・バンドラ 各種構成 + enzyme Sass + sasslai（社内ライブラリ）

    その他 Storybook, XLT, license-webpack-plugin, CircleCI

20. 1. LINE Schedule とは?リニューアルの理由 2. リニューアル後の構成・いいところ 3. 成功したところ 4. してみた感想

    5. まとめ アウトライン

21. • 情報をしっかり整備 • CircleCI を活用 ◦ リント・テストを自動実行 ◦ デプロイフローを自動化 リニューアルに際して

    目標: 初見の人でもすぐ開発できるようにする

22. リニューアルに際して • 情報をしっかり整備 • CircleCI を活用 ◦ リント・テストを自動実行 ◦ デプロイフローを自動化

    目標: 初見の人でもすぐ開発できるようにする

23. • 以前のコードベースはドキュメント不足 ◦ 画面図が実際のものと異なる ◦ 仕様変更がドキュメントに反映されていない ◦ ローカルデバッグの方法がよくわからない リニューアル時の壁

24. • 以前のコードベースはドキュメント不足 ◦ 画面図が実際のものと異なる ◦ 仕様変更がドキュメントに反映されていない ◦ ローカルデバッグの方法がよくわからない ➡ 情報の整備が必須

    リニューアル時の壁

25. • README・wiki • 単体テスト・静的型付け ◦ コードリーディングのヒント • Storybook ◦ コンポーネントのドキュメント

    情報を整備

26. テストは関数の入出力パターンを表現 単体テスト・ 静的型付け テストパターンから動作がわかる

27. 静的型は一種のドキュメント 入出力の型を見るだけで関数の動作がある程度わかる 型から動作がわかる 単体テスト・ 静的型付け

28. Storybook の使用例

29. Storybook の使用例 各 props を変えると 上のコンポーネントが変化

30. Storybook の使用例 createdOn が変化

31. リニューアルに際して • 情報をしっかり整備 • CircleCI を活用 ◦ リント・テストを自動実行 ◦ デプロイフローを自動化

32. CI で Lint、テストを自動チェック

33. CircleCI で自動デプロイ

34. 1. LINE Schedule とは?リニューアルの理由 2. リニューアル後の構成・いいところ 3. 成功したところ 4. してみた感想

    5. まとめ アウトライン

35. • Storybook ◦ リリース後、まとまった時間を取って修正 ◦ 継続的に運用していくのは困難 • Recoil ◦ API管理とページ間での情報の受け渡しで使用

    ◦ グローバルステートで自由度が高い ◦ 管理方法をしっかりしないとディレクトリ構成が複雑化 してみた感想

36. 1. LINE Schedule とは?リニューアルの理由 2. リニューアル後の構成・いいところ 3. 成功したところ 4. してみた感想

    5. まとめ アウトライン

37. 裁量があって環境構築から自由にできて良い構成を取れ、 当初のゴールをしっかり達成できた まとめ