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