Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Cdf97a1b1b132c56582773c3ba09a3a6?s=128

Rakus_Dev

July 11, 2022
Tweet

More Decks by Rakus_Dev

Other Decks in Technology

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 課題③ビルドコストの増加 現状 1画面につき1エントリー1ア ウトプットしているのでVue コンポーネント化する度にエ ントリー数が増える… 理想 webpackの最適化をして 少しでもビルドコストを下げ

    たい。
  27. #RAKUSMeetup まとめ • フロントエンド部分のコードが複雑だった • 提案は分離したことによるメリットを強調 • フロントエンドコードはVueに置き換え • 課題についてはこれから要検討

  28. #RAKUSMeetup ご静聴ありがとうございました