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
持続可能な開発のためのVueコンポーネント設計とコーディングガイドラインの策定
Search
gree_tech
PRO
October 25, 2024
Video
Technology
1
490
持続可能な開発のためのVueコンポーネント設計とコーディングガイドラインの策定
GREE Tech Conference 2024で発表された資料です。
https://techcon.gree.jp/2024/session/Short-Session-3
gree_tech
PRO
October 25, 2024
Tweet
Share
Video
More Decks by gree_tech
See All by gree_tech
コミュニケーションに鍵を見いだす、エンジニア1年目の経験談
gree_tech
PRO
0
110
REALITY株式会社における開発生産性向上の取り組み: 失敗と成功から学んだこと
gree_tech
PRO
2
1.7k
『ヘブンバーンズレッド』におけるフィールドギミックの裏側
gree_tech
PRO
2
550
セキュリティインシデント対応の体制・運用の試行錯誤 / greetechcon2024-session-a1
gree_tech
PRO
1
550
『アナザーエデン 時空を超える猫』国内海外同時運営実現への道のり ~別々で開発されたアプリを安定して同時リリースするまでの取り組み~
gree_tech
PRO
1
520
『アサルトリリィ Last Bullet』におけるクラウドストリーミング技術を用いたブラウザゲーム化の紹介
gree_tech
PRO
1
600
UnityによるPCアプリの新しい選択肢。「PC版 Google Play Games」への対応について
gree_tech
PRO
1
960
実機ビルドのエラーによる検証ブロッカーを0に!『ヘブンバーンズレッド』のスモークテスト自動化の取り組み
gree_tech
PRO
1
620
"ゲームQA業界の技術向上を目指す! 会社を超えた研究会の取り組み"
gree_tech
PRO
1
740
Other Decks in Technology
See All in Technology
生成AIで小説を書くためにプロンプトの制約や原則について学ぶ / prompt-engineering-for-ai-fiction
nwiizo
3
820
PostgreSQL 18 cancel request key長の変更とRailsへの関連
yahonda
0
120
AWS テクニカルサポートとエンドカスタマーの中間地点から見えるより良いサポートの活用方法
kazzpapa3
2
510
Node-RED × MCP 勉強会 vol.1
1ftseabass
PRO
0
140
Postman AI エージェントビルダー最新情報
nagix
0
100
Claude Code Actionを使ったコード品質改善の取り組み
potix2
PRO
6
2.2k
【TiDB GAME DAY 2025】Shadowverse: Worlds Beyond にみる TiDB 活用術
cygames
0
1k
プロダクトエンジニアリング組織への歩み、その現在地 / Our journey to becoming a product engineering organization
hiro_torii
0
130
Amazon Bedrockで実現する 新たな学習体験
kzkmaeda
1
510
第9回情シス転職ミートアップ_テックタッチ株式会社
forester3003
0
220
ハノーバーメッセ2025座談会.pdf
iotcomjpadmin
0
160
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
110
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1031
460k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Writing Fast Ruby
sferik
628
61k
The Language of Interfaces
destraynor
158
25k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
Scaling GitHub
holman
459
140k
Making Projects Easy
brettharned
116
6.3k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Speed Design
sergeychernyshev
32
1k
A Tale of Four Properties
chriscoyier
160
23k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Transcript
持続可能な開発のための Vueコンポーネント設計と コーディングガイドラインの策定 REALITY株式会社 ソフトウェアエンジニア 猿田尚輝
2 DevOps チーム所属 REALITY株式会社 ソフトウェアエンジニア 猿田尚輝 #サウナ 🧖/ #日本酒 🍶/
#講談🪭/ #Tarkov🔫 昨年7月より REALITY 社にて内定者アルバイトを開始。今年 4月に グリー株式会社に入社し、 REALITY 株式会社に配属される。 クラウドインフラ周りの改善活動が現在の業務のメイン。
3 本セッションはこちらの Blog 記事の内容をベースとしています https://note.com/reality_eng/n/nbf883a2b62e2
目次 1 REALITY における Web フロントエンド コード改善のための取り組み 4 問題意識の共有とチームでの合意形成 参考実装の作成とコーディングガイドラインの策定
2 b a
1 REALITY における Web フロントエンド 5
「なりたい自分で生きていく 」をコンセプトとした メタバースプラットフォーム 3D アバターを用いたリアルタイムコミュニケーション サー ビスとして iOS / Android
向けアプリとして提供 1 REALITY におけるWebフロントエンド 6
REALITY における Web フロントエンド ユーザー向け画面 (アプリ内WebView) 1 REALITY におけるWebフロントエンド 7
社内向け管理画面
Web フロントエンド開発における 課題 8 1 REALITY におけるWebフロントエンド Web フロントエンド開発を専門とするエンジニアの 不在・
サーバエンジニア による開発 ⇒Web フロントエンド部分の コード品質が担保されていない
2 コード改善のための取り組み 9
コード改善のための取り組み 10 問題意識の共有とチームでの 合意形成 参考実装の作成とコーディングガイドライン の策定 2 コード改善のための取り組み
11 2 コード改善のための取り組み a 問題意識の共有とチームでの合意形成
2 2 コード改善のための取り組み / 問題意識の共有とチームでの合意形成 12 問題意識: 素朴な Vue コンポーネント
2 2 コード改善のための取り組み / 問題意識の共有とチームでの合意形成 13 問題意識: 素朴な Vue コンポーネント
userId を入力
2 2 コード改善のための取り組み / 問題意識の共有とチームでの合意形成 14 問題意識: 素朴な Vue コンポーネント
User を取得
2 2 コード改善のための取り組み / 問題意識の共有とチームでの合意形成 15 問題意識: 素朴な Vue コンポーネント
User を表示
16 持続可能な開発のための Vueコンポーネント? 🤔 2 コード改善のための取り組み / 問題意識の共有とチームでの合意形成
2 UI Infrastructure Application Domain ビジネスルールのレイヤーと、ユーザー‧外 部システムとのインターフェースとなるレイ ヤーとに分離することで、ビジネスルールに 関するコードをそれ以外のコードに対する変 更から守る
ベースとしたい考え方 : Onion Architecture 2 コード改善のための取り組み / 問題意識の共有とチームでの合意形成 17
Webフロントエンドのコードの役割の⼤別 18 a. ユーザーインタラクション b. データの表示への反映 c. 外部へのリクエスト送受信 d. データの加工
2 コード改善のための取り組み / 問題意識の共有とチームでの合意形成
各役割とアーキテクチャとの関係 2 UI Infrastructure Domain Application a.ユーザーインタラクション b.データの表⽰への反映 19 2
コード改善のための取り組み / 問題意識の共有とチームでの合意形成
各役割とアーキテクチャとの関係 2 UI Infrastructure Domain Application c.外部へのリクエスト送受信 20 2 コード改善のための取り組み
/ 問題意識の共有とチームでの合意形成
各役割とアーキテクチャとの関係 2 UI Infrastructure Application d.データの加工 Domain 21 2 コード改善のための取り組み
/ 問題意識の共有とチームでの合意形成
コンポーネントの役割 2 UI Infrastructure Application Domain 22 a.ユーザーインタラクション b.データの表⽰への反映 2
コード改善のための取り組み / 問題意識の共有とチームでの合意形成
それ以外の役割 2 Application Domain UI Infrastructure 23 d.データの加工 c.外部へのリクエスト送受信 2
コード改善のための取り組み / 問題意識の共有とチームでの合意形成
チームに提案(⼊って1ヶ⽉半くらいの頃) 24 2 コード改善のための取り組み / 問題意識の共有とチームでの合意形成 当時作成したドキュメントの冒頭部分。ドキュメント全体のボリュームは 12,000字程度。
25 b 参考実装の作成とコーディングガイドラインの策定 2 コード改善のための取り組み
2 2 コード改善のための取り組み / 参考実装の作成とコーディングガイドラインの策定 26 参考実装: 先ほどのコードに適用するなら
2 2 コード改善のための取り組み / 参考実装の作成とコーディングガイドラインの策定 27 参考実装: 先ほどのコードに適用するなら ユーザーインタラクション のためのメソッド
2 2 28 参考実装: 先ほどのコードに適用するなら データ取得のための関数 コード改善のための取り組み / 参考実装の作成とコーディングガイドラインの策定
コーディングガイドラインの策定 29 2 コード改善のための取り組み / 参考実装の作成とコーディングガイドラインの策定 ・Web フロントエンド開発で最低限守りたいラインを項目として作成 ・Badパターンとそれをどう直すべきかの Goodパターンを並べて記載
実際のガイドラインの項⽬の⼀例 MUST (レビューで⾒つけたら指摘してほしいもの) • 命名規則⼀般 (UpperCamelCase/lowerCamelCase) • 変数宣⾔では var は使わず、
const や let を使う • as の使⽤をできる限り避ける • any の使⽤をできる限り避ける • JS ネイティブの Date オブジェクトを使⽤しない SHOULD (ベストプラクティスとしてなるべく取り⼊れたいもの) • 値が存在しないことを⽰すときには null より undefined を使う • switch ⽂で条件分岐の考慮漏れを防ぐ 30 2 コード改善のための取り組み / 参考実装の作成とコーディングガイドラインの策定
ガイドラインを導⼊することの効果 31 ・Pull Request レビュー時の 指摘ポイントの明確化 ->「ガイドラインにこう書いてあるので 」と指摘できるようになった ->担保できる最低限の品質 を決定することができた
・Web フロントエンドのコードに関する ベースラインの決定と底上げ 2 コード改善のための取り組み / 参考実装の作成とコーディングガイドラインの策定
ガイドライン導⼊についてのチームの声 32 ・コーディングガイドラインができたことで、 Web フロントエントエンドにつ い て最低限満たすべきラインができた ・TypeScript をちゃんと書こうという意識が高まった ・PR
をレビューする際に as や any についての 指摘をしやすくなった 2 コード改善のための取り組み / 参考実装の作成とコーディングガイドラインの策定
まとめ 33 ・参考実装とコーディングガイドラインを作成して実装方針をチームに導入する ・コーディングガイドラインを導入してコード品質のベースラインを定められた ・持続可能な開発のために UIとビジネスロジックを分離する
None