既存システムのフロントエンド・バックエンド分離 / meetup0706-seki

Transcript

1. #RAKUSMeetup ©2022 RAKUS Co., Ltd. 既存システムのフロントエ ンド・バックエンド分離 株式会社ラクス　関 淳志
2. #RAKUSMeetup 自己紹介 関　淳志 ▪経歴 前職にてスマートフォンアプリのバックエンド開発、業務ツール系Webアプリの フロントエンド開発に従事 2021年にラクスに入社し、ChatDealerのフロントエンドの開発業務を担当 ▪趣味 野球観戦 そろそろ球場に行って現地観戦したい
3. #RAKUSMeetup セクション • フロントエンド/バックエンドを分離しようと考えた経緯 • ビジネスサイドへの提案 • ソースコード分離の実施 • ソースコードの分離を行い、見えてきた今後の課題
4. #RAKUSMeetup フロントエンド/バックエンドを 分離しようと考えた経緯
5. #RAKUSMeetup ChatDealerの技術スタック
6. #RAKUSMeetup 分離しようと考えた経緯 HTML/CSS/JavaScript/PHPと さまざまなソースコードがbladeファイル内で混在している 問題
7. #RAKUSMeetup 分離しようと考えた経緯 HTML/CSS/JavaScriptとPHPはファイルが 別ファイルであって欲しい！ 理想
8. #RAKUSMeetup 実装がやりづらい… コードを分離しよう！
9. #RAKUSMeetup ビジネスサイドへの提案
10. #RAKUSMeetup ビジネスサイドへの提案 フロントエンドとバックエン ドのコードを分離したいで す！
11. #RAKUSMeetup 費用対効果はあるの…？ 工数はどれくらいかかる…？ それにどんなメリットがあるの…？
12. #RAKUSMeetup 分離後のメリットをアピール • 分業できることで実装工数が短縮する ◦ 並行作業ができる ◦ それぞれのエンジニアが実装することで効率UP • フロントエンドの実装を巻き取ることで 開発工数が下がる
13. #RAKUSMeetup ソースコード分離の実施
14. #RAKUSMeetup ソースコード分離の方針 • MPAの方針は変えない ◦ MPA：毎回サーバーにリクエストしてレスポンスが返る ◦ SPA：初回リクエストはMPAと同じ。以降Ajaxなどで　　　　 必要なデータを取得し差分更新 • 通常開発と並行して実施
15. #RAKUSMeetup リファクタリング対応 • HTMLはVueをマウントするエレメントのみ • データの受け取り • @includeしているbladeをVueコンポーネント化 • x-templateしているVueコードをVueコンポーネント化
16. #RAKUSMeetup HTMLはVueをマウントする エレメントのみ @section('body') <div class="body"> <h1>タイトル</h1> <p>これはテキストです。</p> </div> @stop 実施前 bladeファイルに直接HTML コードが書いている。
17. #RAKUSMeetup HTMLはVueをマウントする エレメントのみ 実施前 @section('body') <div id="app"></div> @stop 実施後 bladeファイルに記述する HTMLコードはVueをマウン トするタグのみを記述する ルールにしました。
18. #RAKUSMeetup データの受け取り <script> const parameter = { key1: $value1, key2: $value2, key3: $value3 }; </script> Blade データはオブジェクト形式で作 成。 将来的にAPI化した際にコン ポーネント内のロジックを変更 しないで済むため。
19. #RAKUSMeetup @includeしているbladeを コンポーネント化 @include('frame', [ 'title' => 'テキスト', 'description' => 'これはテキストです。', ]) // frame.blade.php <div> <h1>{{ $title }}</h1> <p>{{ $description }}</p> @yield(‘content’) </div> 実施前 includeしているファイル内 でパーツ化を行なっていてい る。
20. #RAKUSMeetup <template> <div> <h1>{{ title }}</h1> <p>{{ description }}</p> <vue-content /> </div> </template> <script> export default { name: "VueFrame", components: { VueContent }, props: ['title', 'description'] }; </script> @includeしているbladeを コンポーネント化 実施後 includeファイル内のパーツ をコンポーネント化。
21. #RAKUSMeetup x-templateしているVueコードを コンポーネント化 <script type="text/x-template" id="template"> <h1>@{{ title }}</h1> </script> <script type="text/javascript"> Vue.component('title-text', { template: '#template', props: ['title'] } }); </script> 実施前 blade内でVueコンポーネ ントコードが記述されてい る。
22. #RAKUSMeetup <template> <h1>{{ title }}</h1> </template> <script> export default { name: "TitleText", props: ['title'] }; </script> x-templateしているVueコードを コンポーネント化 実施後 SFC（単一ファイルコンポー ネント化しました。
23. #RAKUSMeetup ソースコードの分離を行い、 見えてきた今後の課題
24. #RAKUSMeetup 課題①バックエンドのAPI化 現状 グローバル変数にphp変数 を格納しVueに渡している … 理想 API化し基底コンポーネント でパラメーターを受け取るだ けにしたい。
25. #RAKUSMeetup 課題②テストツールの導入 現状 リファクタリング後、手動で 単体テスト、画面の差異がな いか確認している… 理想 単体テストやビジュアルリグ レッションテストの導入をし てテストを楽にしたい。
26. #RAKUSMeetup 課題③ビルドコストの増加 現状 １画面につき１エントリー１ア ウトプットしているのでVue コンポーネント化する度にエ ントリー数が増える… 理想 webpackの最適化をして 少しでもビルドコストを下げ たい。
27. #RAKUSMeetup まとめ • フロントエンド部分のコードが複雑だった • 提案は分離したことによるメリットを強調 • フロントエンドコードはVueに置き換え • 課題についてはこれから要検討
28. #RAKUSMeetup ご静聴ありがとうございました