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
220
持続可能な開発のための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
REALITY株式会社における開発生産性向上の取り組み: 失敗と成功から学んだこと
gree_tech
PRO
2
530
『ヘブンバーンズレッド』におけるフィールドギミックの裏側
gree_tech
PRO
2
250
セキュリティインシデント対応の体制・運用の試行錯誤 / greetechcon2024-session-a1
gree_tech
PRO
1
250
『アナザーエデン 時空を超える猫』国内海外同時運営実現への道のり ~別々で開発されたアプリを安定して同時リリースするまでの取り組み~
gree_tech
PRO
1
210
『アサルトリリィ Last Bullet』におけるクラウドストリーミング技術を用いたブラウザゲーム化の紹介
gree_tech
PRO
1
270
UnityによるPCアプリの新しい選択肢。「PC版 Google Play Games」への対応について
gree_tech
PRO
1
500
実機ビルドのエラーによる検証ブロッカーを0に!『ヘブンバーンズレッド』のスモークテスト自動化の取り組み
gree_tech
PRO
1
300
"ゲームQA業界の技術向上を目指す! 会社を超えた研究会の取り組み"
gree_tech
PRO
1
360
Jamstack でリニューアルするグリーグループのメディア
gree_tech
PRO
2
520
Other Decks in Technology
See All in Technology
TAMとre:Capセキュリティ編 〜拡張脅威検出デモを添えて〜
fujiihda
1
120
Larkご案内資料
customercloud
PRO
0
650
株式会社EventHub・エンジニア採用資料
eventhub
0
4.2k
AndroidXR 開発ツールごとの できることできないこと
donabe3
0
110
データ資産をシームレスに伝達するためのイベント駆動型アーキテクチャ
kakehashi
PRO
2
340
飲食店予約台帳を支えるインタラクティブ UI 設計と実装
siropaca
7
1.4k
10分で紹介するAmazon Bedrock利用時のセキュリティ対策 / 10-minutes introduction to security measures when using Amazon Bedrock
hideakiaoyagi
0
170
滅・サービスクラス🔥 / Destruction Service Class
sinsoku
6
1.6k
ハッキングの世界に迫る~攻撃者の思考で考えるセキュリティ~
nomizone
13
4.7k
家電アプリ共通PF "Linova" のAPI利用とPostman活用事例ご紹介
yukiogawa
0
130
AndroidデバイスにFTPサーバを建立する
e10dokup
0
240
日経電子版 x AIエージェントの可能性とAgentic RAGによって提案書生成を行う技術
masahiro_nishimi
1
300
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
8
270
Being A Developer After 40
akosma
89
590k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Raft: Consensus for Rubyists
vanstee
137
6.8k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Thoughts on Productivity
jonyablonski
69
4.5k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
540
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