Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
既存システムのフロントエンド・バックエンド分離 / meetup0706-seki
Rakus_Dev
July 11, 2022
Technology
0
350
既存システムのフロントエンド・バックエンド分離 / meetup0706-seki
Rakus_Dev
July 11, 2022
Tweet
Share
More Decks by Rakus_Dev
See All by Rakus_Dev
PMMやプロダクト関係者と協働するために役割を整理した話 / 20220810_pdmtipslt
rakus_dev
0
94
プロダクトデザイン組織の 新しい取り組み / meetup0706-onoda
rakus_dev
1
340
障害対応を自動化した話 / 20220609_Automation
rakus_dev
0
410
横断部門としての取り組み紹介(研究開発、共通基盤開発) / rakus-meetup-202206
rakus_dev
0
850
若手が可読性を上げるために気を付けたこと / 20210707_readablelt_nazato
rakus_dev
0
970
リーダブルなPHPDocを目指して / 20210707-readablelt-nishihara
rakus_dev
0
970
インフラエンジニアとしての成長記 / 20220302_Meetup_maekawa
rakus_dev
0
440
右も左も分からない1年目が上流工程を理解するまでの話 / 20220302-meetup-nagata
rakus_dev
0
450
入社して3年間で『Rundeck』を使って自動化した「面倒」な作業たち / 20220302-meetup-kanamori
rakus_dev
0
560
Other Decks in Technology
See All in Technology
私のAWS愛を聞け!ここが好きだよAmazon FSx for NetApp ONTAP
non97
0
750
Amplifyで Webアプリケーションの 堅固な土台をサクッと構築する方法
kawasakiteruo
0
220
セキュキャンを卒業してその後
kurochan
0
550
GCCP Creator @ COSCUP 2022
line_developers_tw
PRO
0
1.4k
データをコネコネ!メール配信用データ生成の仕組み
kappezoro
0
120
質の良い”カイゼン”の為の質の良い「振り返り」
shirayanagiryuji
0
120
Red Hat Enterprise Linux 9のリリースノートを読む前に知りたい最近のキーワードをまとめて復習
moriwaka
0
360
psql, my favorite tool!
nuko_yokohama
1
180
疎ベクトル検索と密ベクトル検索: 第68回 Machine Learning 15minutes! Broadcast
keyakkie
1
250
ぼくらが選んだ次のMySQL 8.0 / MySQL80 Which We Choose
line_developers
PRO
7
2.9k
DMMプラットフォーム ゼロから始めるKubernetes運用 課題と改善
pospome
0
400
JAWS-UG 朝会 #36 登壇資料
takakuni
1
550
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
655
120k
Art Directing for the Web. Five minutes with CSS Template Areas
malarkey
196
9.5k
GraphQLの誤解/rethinking-graphql
sonatard
31
6.8k
Clear Off the Table
cherdarchuk
79
290k
The Language of Interfaces
destraynor
148
21k
Scaling GitHub
holman
451
140k
Facilitating Awesome Meetings
lara
29
4.1k
Robots, Beer and Maslow
schacon
152
7.1k
Support Driven Design
roundedbygravity
87
8.6k
Intergalactic Javascript Robots from Outer Space
tanoku
260
25k
Web development in the modern age
philhawksworth
197
9.3k
What the flash - Photography Introduction
edds
62
10k
Transcript
#RAKUSMeetup ©2022 RAKUS Co., Ltd. 既存システムのフロントエ ンド・バックエンド分離 株式会社ラクス 関 淳志
#RAKUSMeetup 自己紹介 関 淳志 ▪経歴 前職にてスマートフォンアプリのバックエンド開発、業務ツール系Webアプリの フロントエンド開発に従事 2021年にラクスに入社し、ChatDealerのフロントエンドの開発業務を担当 ▪趣味 野球観戦 そろそろ球場に行って現地観戦したい
#RAKUSMeetup セクション • フロントエンド/バックエンドを分離しようと考えた経緯 • ビジネスサイドへの提案 • ソースコード分離の実施 • ソースコードの分離を行い、見えてきた今後の課題
#RAKUSMeetup フロントエンド/バックエンドを 分離しようと考えた経緯
#RAKUSMeetup ChatDealerの技術スタック
#RAKUSMeetup 分離しようと考えた経緯 HTML/CSS/JavaScript/PHPと さまざまなソースコードがbladeファイル内で混在している 問題
#RAKUSMeetup 分離しようと考えた経緯 HTML/CSS/JavaScriptとPHPはファイルが 別ファイルであって欲しい! 理想
#RAKUSMeetup 実装がやりづらい… コードを分離しよう!
#RAKUSMeetup ビジネスサイドへの提案
#RAKUSMeetup ビジネスサイドへの提案 フロントエンドとバックエン ドのコードを分離したいで す!
#RAKUSMeetup 費用対効果はあるの…? 工数はどれくらいかかる…? それにどんなメリットがあるの…?
#RAKUSMeetup 分離後のメリットをアピール • 分業できることで実装工数が短縮する ◦ 並行作業ができる ◦ それぞれのエンジニアが実装することで効率UP • フロントエンドの実装を巻き取ることで
開発工数が下がる
#RAKUSMeetup ソースコード分離の実施
#RAKUSMeetup ソースコード分離の方針 • MPAの方針は変えない ◦ MPA:毎回サーバーにリクエストしてレスポンスが返る ◦ SPA:初回リクエストはMPAと同じ。以降Ajaxなどで 必要なデータを取得し差分更新 •
通常開発と並行して実施
#RAKUSMeetup リファクタリング対応 • HTMLはVueをマウントするエレメントのみ • データの受け取り • @includeしているbladeをVueコンポーネント化 • x-templateしているVueコードをVueコンポーネント化
#RAKUSMeetup HTMLはVueをマウントする エレメントのみ @section('body') <div class="body"> <h1>タイトル</h1> <p>これはテキストです。</p> </div> @stop
実施前 bladeファイルに直接HTML コードが書いている。
#RAKUSMeetup HTMLはVueをマウントする エレメントのみ 実施前 @section('body') <div id="app"></div> @stop 実施後 bladeファイルに記述する
HTMLコードはVueをマウン トするタグのみを記述する ルールにしました。
#RAKUSMeetup データの受け取り <script> const parameter = { key1: $value1, key2:
$value2, key3: $value3 }; </script> Blade データはオブジェクト形式で作 成。 将来的にAPI化した際にコン ポーネント内のロジックを変更 しないで済むため。
#RAKUSMeetup @includeしているbladeを コンポーネント化 @include('frame', [ 'title' => 'テキスト', 'description' =>
'これはテキストです。', ]) // frame.blade.php <div> <h1>{{ $title }}</h1> <p>{{ $description }}</p> @yield(‘content’) </div> 実施前 includeしているファイル内 でパーツ化を行なっていてい る。
#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ファイル内のパーツ をコンポーネント化。
#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コンポーネ ントコードが記述されてい る。
#RAKUSMeetup <template> <h1>{{ title }}</h1> </template> <script> export default {
name: "TitleText", props: ['title'] }; </script> x-templateしているVueコードを コンポーネント化 実施後 SFC(単一ファイルコンポー ネント化しました。
#RAKUSMeetup ソースコードの分離を行い、 見えてきた今後の課題
#RAKUSMeetup 課題①バックエンドのAPI化 現状 グローバル変数にphp変数 を格納しVueに渡している … 理想 API化し基底コンポーネント でパラメーターを受け取るだ けにしたい。
#RAKUSMeetup 課題②テストツールの導入 現状 リファクタリング後、手動で 単体テスト、画面の差異がな いか確認している… 理想 単体テストやビジュアルリグ レッションテストの導入をし てテストを楽にしたい。
#RAKUSMeetup 課題③ビルドコストの増加 現状 1画面につき1エントリー1ア ウトプットしているのでVue コンポーネント化する度にエ ントリー数が増える… 理想 webpackの最適化をして 少しでもビルドコストを下げ
たい。
#RAKUSMeetup まとめ • フロントエンド部分のコードが複雑だった • 提案は分離したことによるメリットを強調 • フロントエンドコードはVueに置き換え • 課題についてはこれから要検討
#RAKUSMeetup ご静聴ありがとうございました