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 でリニューアルしてみて / renewal codebase with TypeScript, React and Recoil
Search
Naoto Ikuno
March 17, 2021
Programming
0
1.7k
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
49
Other Decks in Programming
See All in Programming
クソコード動画『カプセル化 Mk-II』 で考える 上手くカプセル化できない理由 / encapsulation2
minodriven
11
7.1k
PHP で読む楽しいコアダンプ
sji
0
240
決断するための勇気、そのためのBacklog / Courage to make decisions, Backlog for that.
seike460
PRO
4
1.9k
まっちすいっち戦争 / match vs switch
takuyakatsusa
2
660
両面どころかインフラもTSでできるよ ~ 全方位TypeScriptによるプロダクト開発 ~
myfinder
7
2.1k
Migrating to Signals: A Practical Workshop
manfredsteyer
PRO
0
280
ISUCONってなんだか難しそう……!!でも、初めてのISUCONにPHPで挑戦してきました!
kotomin_m
1
300
コミュニティに参加したことで起きた変化
ohmori_yusuke
3
130
OpenAPI を守るのは難しい
ohmori_yusuke
1
140
Docker ハンズオン / docker-hands-on
suzukihoge
51
16k
プロンプトエンジニアリング入門
tomokusaba
2
960
TCA魔法学入門🪄
dazy
0
280
Featured
See All Featured
Designing for Performance
lara
601
67k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
11
1.4k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
19
1.9k
The Power of CSS Pseudo Elements
geoffreycrofte
58
4.9k
How GitHub Uses GitHub to Build GitHub
holman
467
290k
It's Worth the Effort
3n
180
27k
Music & Morning Musume
bryan
39
5.5k
Making the Leap to Tech Lead
cromwellryan
122
8.4k
Build your cross-platform service in a week with App Engine
jlugia
223
17k
VelocityConf: Rendering Performance Case Studies
addyosmani
319
23k
Creatively Recalculating Your Daily Design Routine
revolveconf
209
11k
Statistics for Hackers
jakevdp
789
220k
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. まとめ アウトライン
裁量があって環境構築から自由にできて良い構成を取れ、 当初のゴールをしっかり達成できた まとめ