持続可能な開発のためのVueコンポーネント設計とコーディングガイドラインの策定

GREE Tech Conference 2024で発表された資料です。
https://techcon.gree.jp/2024/session/Short-Session-3

Transcript

1. 持続可能な開発のための Vueコンポーネント設計と コーディングガイドラインの策定 REALITY株式会社 ソフトウェアエンジニア 猿田尚輝
2. 2 DevOps チーム所属 REALITY株式会社 ソフトウェアエンジニア 猿田尚輝 #サウナ 🧖/ #日本酒 🍶/ #講談🪭/ #Tarkov🔫 昨年7月より REALITY 社にて内定者アルバイトを開始。今年 4月に グリー株式会社に入社し、 REALITY 株式会社に配属される。 クラウドインフラ周りの改善活動が現在の業務のメイン。
3. 3 本セッションはこちらの Blog 記事の内容をベースとしています https://note.com/reality_eng/n/nbf883a2b62e2
4. 目次 1 REALITY における Web フロントエンド コード改善のための取り組み 4 問題意識の共有とチームでの合意形成 参考実装の作成とコーディングガイドラインの策定 2 b a
5. 1 REALITY における Web フロントエンド 5
6. 「なりたい自分で生きていく 」をコンセプトとした メタバースプラットフォーム 3D アバターを用いたリアルタイムコミュニケーション サー ビスとして iOS / Android 向けアプリとして提供 1 REALITY におけるWebフロントエンド 6
7. REALITY における Web フロントエンド ユーザー向け画面 (アプリ内WebView) 1 REALITY におけるWebフロントエンド 7 社内向け管理画面
8. Web フロントエンド開発における 課題 8 1 REALITY におけるWebフロントエンド Web フロントエンド開発を専門とするエンジニアの 不在・ サーバエンジニア による開発 ⇒Web フロントエンド部分の コード品質が担保されていない
9. 2 コード改善のための取り組み 9
10. コード改善のための取り組み 10 問題意識の共有とチームでの 合意形成 参考実装の作成とコーディングガイドライン の策定 2 コード改善のための取り組み
11. 11 2 コード改善のための取り組み a 問題意識の共有とチームでの合意形成
12. 2 2 コード改善のための取り組み / 問題意識の共有とチームでの合意形成 12 問題意識: 素朴な Vue コンポーネント
13. 2 2 コード改善のための取り組み / 問題意識の共有とチームでの合意形成 13 問題意識: 素朴な Vue コンポーネント userId を入力
14. 2 2 コード改善のための取り組み / 問題意識の共有とチームでの合意形成 14 問題意識: 素朴な Vue コンポーネント User を取得
15. 2 2 コード改善のための取り組み / 問題意識の共有とチームでの合意形成 15 問題意識: 素朴な Vue コンポーネント User を表示
16. 16 持続可能な開発のための Vueコンポーネント？ 🤔 2 コード改善のための取り組み / 問題意識の共有とチームでの合意形成
17. 2 UI Infrastructure Application Domain ビジネスルールのレイヤーと、ユーザー‧外 部システムとのインターフェースとなるレイ ヤーとに分離することで、ビジネスルールに 関するコードをそれ以外のコードに対する変 更から守る ベースとしたい考え方 : Onion Architecture 2 コード改善のための取り組み / 問題意識の共有とチームでの合意形成 17
18. Webフロントエンドのコードの役割の⼤別 18 a. ユーザーインタラクション b. データの表示への反映 c. 外部へのリクエスト送受信 d. データの加工 2 コード改善のための取り組み / 問題意識の共有とチームでの合意形成
19. 各役割とアーキテクチャとの関係 2 UI Infrastructure Domain Application a.ユーザーインタラクション b.データの表⽰への反映 19 2 コード改善のための取り組み / 問題意識の共有とチームでの合意形成
20. 各役割とアーキテクチャとの関係 2 UI Infrastructure Domain Application c.外部へのリクエスト送受信 20 2 コード改善のための取り組み / 問題意識の共有とチームでの合意形成
21. 各役割とアーキテクチャとの関係 2 UI Infrastructure Application d.データの加工 Domain 21 2 コード改善のための取り組み / 問題意識の共有とチームでの合意形成
22. コンポーネントの役割 2 UI Infrastructure Application Domain 22 a.ユーザーインタラクション b.データの表⽰への反映 2 コード改善のための取り組み / 問題意識の共有とチームでの合意形成
23. それ以外の役割 2 Application Domain UI Infrastructure 23 d.データの加工 c.外部へのリクエスト送受信 2 コード改善のための取り組み / 問題意識の共有とチームでの合意形成
24. チームに提案(⼊って1ヶ⽉半くらいの頃) 24 2 コード改善のための取り組み / 問題意識の共有とチームでの合意形成 当時作成したドキュメントの冒頭部分。ドキュメント全体のボリュームは 12,000字程度。
25. 25 b 参考実装の作成とコーディングガイドラインの策定 2 コード改善のための取り組み
26. 2 2 コード改善のための取り組み / 参考実装の作成とコーディングガイドラインの策定 26 参考実装: 先ほどのコードに適用するなら
27. 2 2 コード改善のための取り組み / 参考実装の作成とコーディングガイドラインの策定 27 参考実装: 先ほどのコードに適用するなら ユーザーインタラクション のためのメソッド
28. 2 2 28 参考実装: 先ほどのコードに適用するなら データ取得のための関数 コード改善のための取り組み / 参考実装の作成とコーディングガイドラインの策定
29. コーディングガイドラインの策定 29 2 コード改善のための取り組み / 参考実装の作成とコーディングガイドラインの策定 ・Web フロントエンド開発で最低限守りたいラインを項目として作成 ・Badパターンとそれをどう直すべきかの Goodパターンを並べて記載
30. 実際のガイドラインの項⽬の⼀例 MUST (レビューで⾒つけたら指摘してほしいもの) • 命名規則⼀般 (UpperCamelCase/lowerCamelCase) • 変数宣⾔では var は使わず、 const や let を使う • as の使⽤をできる限り避ける • any の使⽤をできる限り避ける • JS ネイティブの Date オブジェクトを使⽤しない SHOULD (ベストプラクティスとしてなるべく取り⼊れたいもの) • 値が存在しないことを⽰すときには null より undefined を使う • switch ⽂で条件分岐の考慮漏れを防ぐ 30 2 コード改善のための取り組み / 参考実装の作成とコーディングガイドラインの策定
31. ガイドラインを導⼊することの効果 31 ・Pull Request レビュー時の 指摘ポイントの明確化 ->「ガイドラインにこう書いてあるので 」と指摘できるようになった ->担保できる最低限の品質 を決定することができた ・Web フロントエンドのコードに関する ベースラインの決定と底上げ 2 コード改善のための取り組み / 参考実装の作成とコーディングガイドラインの策定
32. ガイドライン導⼊についてのチームの声 32 ・コーディングガイドラインができたことで、 Web フロントエントエンドにつ 　い て最低限満たすべきラインができた ・TypeScript をちゃんと書こうという意識が高まった ・PR をレビューする際に as や any についての 指摘をしやすくなった 2 コード改善のための取り組み / 参考実装の作成とコーディングガイドラインの策定
33. まとめ 33 ・参考実装とコーディングガイドラインを作成して実装方針をチームに導入する ・コーディングガイドラインを導入してコード品質のベースラインを定められた ・持続可能な開発のために UIとビジネスロジックを分離する