Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
6年前のコードベースを TS + React + Recoil でリニューアルしてみて / r...
Search
Naoto Ikuno
March 17, 2021
Programming
0
2k
6年前のコードベースを TS + React + Recoil でリニューアルしてみて / renewal codebase with TypeScript, React and Recoil
UIT meetup vol.12『リニューアル戦略発表会(一部から全部まで)』 にて使用したスライドです。
Naoto Ikuno
March 17, 2021
Tweet
Share
More Decks by Naoto Ikuno
See All by Naoto Ikuno
Readable test code
pandanoir
0
74
Other Decks in Programming
See All in Programming
Cline指示通りに動かない? AI小説エージェントで学ぶ指示書の書き方と自動アップデートの仕組み
kamomeashizawa
1
590
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
1
540
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
0
210
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
4
1k
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
1
590
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.7k
GoのGenericsによるslice操作との付き合い方
syumai
3
700
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
330
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.4k
童醫院敏捷轉型的實踐經驗
cclai999
0
200
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
150
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
410
Featured
See All Featured
Scaling GitHub
holman
459
140k
It's Worth the Effort
3n
185
28k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
Why Our Code Smells
bkeepers
PRO
337
57k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
A designer walks into a library…
pauljervisheath
207
24k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Transcript
6年前のコードベースを TS + React + Recoil でリニューアルしてみて 幾野 直人
LINE フロントエンド開発センター Dev1室 新卒1年目 自己紹介 幾野 直人 Twitter: @le_panda_noir 趣味:
鬼滅の刃、合気道、ルービック キューブ
1. LINE Schedule とは?リニューアルの理由 2. リニューアル後の構成・いいところ 3. 成功したところ 4. してみた感想
5. まとめ アウトライン
1. LINE Schedule とは?リニューアルの理由 2. リニューアル後の構成・いいところ 3. 成功したところ 4. してみた感想
5. まとめ アウトライン
LINE 内の日程調整サービス 候補日に投票して決定 LINE Schedule とは?
LINE Schedule とは?
LINE Schedule について このくらいの規模感 • メインの機能 ◦ イベントを作成 ◦ 参加できる日程を回答
• 中規模 SPA
イベント作成の流れ 1. イベントの情報を入力
2. イベントに招待する メンバーを選択 イベント作成の流れ
3. メッセージを送信 イベント作成の流れ
イベント作成の流れ
日程回答ページ 都合が良いか悪いか 各日程について選ぶ
• LIFF という Webプラットフォームへの移行 • 6年前のものがベース、かなりレガシーだった なぜリニューアルすることにしたのか? LINE Front-end Framework
LINE Scheduleを
以前の LINE Schedule の構成 Vue 0.10.0 zepto(jQuery) Grunt ES2015 以前
以前の問題点 • モジュール化されていない →どこがどこに影響しているのかわかりづらい • 静的型がない →とてもつらい • 補完、ナビゲーションが効かない •
ライブラリが古くて情報が少ない →コードが読みづらい、修正に自信を持てない
リニューアルの目標 LINE Schedule は継続的な開発の予定はない 次メンテナンスを初見の人が担当する可能性大 そもそも 逆に言えば 初見の人でもすぐ開発できるコードベースにする
リニューアルにあたって 目標: 初見の人でもすぐ開発できるようにする • TypeScript の導入 • ドキュメントなど情報の整備 • ビルド・デプロイの自動化
1. LINE Schedule とは?リニューアルの理由 2. リニューアル後の構成・いいところ 3. 成功したところ 4. してみた感想
5. まとめ アウトライン
スタイル ライブラリ テスト リンター・バンドラ 各種構成 + enzyme Sass + sasslai(社内ライブラリ)
その他 Storybook, XLT, license-webpack-plugin, CircleCI
1. LINE Schedule とは?リニューアルの理由 2. リニューアル後の構成・いいところ 3. 成功したところ 4. してみた感想
5. まとめ アウトライン
• 情報をしっかり整備 • CircleCI を活用 ◦ リント・テストを自動実行 ◦ デプロイフローを自動化 リニューアルに際して
目標: 初見の人でもすぐ開発できるようにする
リニューアルに際して • 情報をしっかり整備 • CircleCI を活用 ◦ リント・テストを自動実行 ◦ デプロイフローを自動化
目標: 初見の人でもすぐ開発できるようにする
• 以前のコードベースはドキュメント不足 ◦ 画面図が実際のものと異なる ◦ 仕様変更がドキュメントに反映されていない ◦ ローカルデバッグの方法がよくわからない リニューアル時の壁
• 以前のコードベースはドキュメント不足 ◦ 画面図が実際のものと異なる ◦ 仕様変更がドキュメントに反映されていない ◦ ローカルデバッグの方法がよくわからない ➡ 情報の整備が必須
リニューアル時の壁
• README・wiki • 単体テスト・静的型付け ◦ コードリーディングのヒント • Storybook ◦ コンポーネントのドキュメント
情報を整備
テストは関数の入出力パターンを表現 単体テスト・ 静的型付け テストパターンから動作がわかる
静的型は一種のドキュメント 入出力の型を見るだけで関数の動作がある程度わかる 型から動作がわかる 単体テスト・ 静的型付け
Storybook の使用例
Storybook の使用例 各 props を変えると 上のコンポーネントが変化
Storybook の使用例 createdOn が変化
リニューアルに際して • 情報をしっかり整備 • CircleCI を活用 ◦ リント・テストを自動実行 ◦ デプロイフローを自動化
CI で Lint、テストを自動チェック
CircleCI で自動デプロイ
1. LINE Schedule とは?リニューアルの理由 2. リニューアル後の構成・いいところ 3. 成功したところ 4. してみた感想
5. まとめ アウトライン
• Storybook ◦ リリース後、まとまった時間を取って修正 ◦ 継続的に運用していくのは困難 • Recoil ◦ API管理とページ間での情報の受け渡しで使用
◦ グローバルステートで自由度が高い ◦ 管理方法をしっかりしないとディレクトリ構成が複雑化 してみた感想
1. LINE Schedule とは?リニューアルの理由 2. リニューアル後の構成・いいところ 3. 成功したところ 4. してみた感想
5. まとめ アウトライン
裁量があって環境構築から自由にできて良い構成を取れ、 当初のゴールをしっかり達成できた まとめ