モダンJavaScriptフレームワークで技術的負債を作らないために

1. モダンJavaScriptフレームワークで
技術的負債を作らないために
株式会社ヤプリ
鬼木悠貴

2. 鬼木悠貴
▸ 2017年2月にヤプリに入社
▸ 入社後はインフラ、バックエンド、フロントエンドを経験
▸ AWS、Ansible、PHP、Laravel、Ruby、Ruby on Rails、JavaScript、
TypeScript、React.js、Vue.js、Golang
▸ 現在は新CMSのサーバーサイド（Golang）実装、フロントエンド
（Vue.js、Nuxt.js）実装、設計
自己紹介

3. 現在やっていること
CMS2
CMS3
新CMS
（実装中）
Replace

4. モダンJavaScriptフレームワークで
難しいと感じていたところ

5. モダンJavaScriptフレームワークで難しいと感じていたところ
▸ 書き方の自由度が高く、設計・チームで統一するのが難しい
▸ コンポーネント指向ゆえに、おおもとのデータや関数の把
握が難しい
▸ デザイナーとの領域が曖昧

6. コンポーネント指向ゆえに、おおもとのデータや関数の把握が難しい

7. モダンJavaScriptフレームワークで難しいと感じていたところ
▸ 書き方の自由度が高く、設計・チームで統一するのが難しい
▸ コンポーネント指向ゆえに、おおもとのデータや関数の把
握が難しい
▸ デザイナーとの領域が曖昧

8. フロントエンドとサーバーサイドのチーム体制
フロントエンド
エンジニア
サーバーエンド
エンジニア
２名（＋２名） ７名
HTML、CSSなど
デザイン以外の
部分を実装する

9. デザイナーとの領域が曖昧
▸ (サーバーサイドエンジニア目線で)実際に処理が動くところ
までやろうとすると、コンポーネントがないと実装できな
い
▸ 上記のような部分が先行後続関係になる
▸ 両チームで使用するライブラリや規約等を柔軟に分けられな
い

10. 対処するために行ったこと

11. 画面上ユースケースの集約

12. 画面上ユースケースの集約
Vue.js
データ
関数
コンポーネント

13. 画面上ユースケースの集約
Vue.js Vuex
コンポーネント
データ
アクション

14. changeFieldTitle
changeFieldTitle
changeFieldTitle
changeFieldTitle
changeFieldTitle
changeFieldTitle
changeFieldTitle
changeFieldBody
addField
changeFavicon
changeField
LinkTitle
changeField
LinkIcon
onFocus
outFocus
save
Vuex

15. 画面上ユースケースの集約
Vue.js Vuex Golang
フロントエンド
エンジニア
サーバーサイド
エンジニア

16. ユースケース集約によって受けた恩恵
▸ フロント開発を行うサーバーサイドエンジニアが実装する部
分がVuexに集約されることで、Vue.jsの事前知識が少なくて
も開発に入ることができる
▸ デザイナーはコンポーネント作成に集中できる
▸ 概要書とVuexのactions（ユースケース）を見れば、画面上
のユースケースとその処理を把握できる
▸ 境界が明確なので適切なスコープで規約決めなどを行える

17. プロダクトを作るチームベースで
設計すること
設計を通して大事だと思ったこと

18. プロダクトを作るチームベースで設計すること
▸ 規約を決めること
▸ 共通言語を決めること
▸ スコープを決めること
▸ 上記をやりやすいような仕組みを作ること

19. ご清聴ありがとうございました