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
640
既存システムのフロントエンド・バックエンド分離 / meetup0706-seki
Rakus_Dev
July 11, 2022
Tweet
Share
More Decks by Rakus_Dev
See All by Rakus_Dev
新サービスのプロジェクト推進に向けた、トライ&エラー / 20221109_kawasaki
rakus_dev
0
360
レガシーになりゆく システムとの向き合い方 / 20221005_inoue
rakus_dev
0
840
PMMやプロダクト関係者と協働するために役割を整理した話 / 20220810_pdmtipslt
rakus_dev
0
230
プロダクトデザイン組織の 新しい取り組み / meetup0706-onoda
rakus_dev
1
560
障害対応を自動化した話 / 20220609_Automation
rakus_dev
0
520
横断部門としての取り組み紹介(研究開発、共通基盤開発) / rakus-meetup-202206
rakus_dev
0
1k
若手が可読性を上げるために気を付けたこと / 20210707_readablelt_nazato
rakus_dev
0
1.3k
リーダブルなPHPDocを目指して / 20210707-readablelt-nishihara
rakus_dev
0
1.3k
インフラエンジニアとしての成長記 / 20220302_Meetup_maekawa
rakus_dev
0
620
Other Decks in Technology
See All in Technology
初めてのデータ移行プロジェクトから得た学び
tjmtmmnk
0
370
Kaggleシミュレーションコンペの動向
nagiss
0
280
SSMパラメーターストアでクロススタック参照の罠を回避する
shuyakinjo
0
7.4k
Multi-Cloud Gatewayでデータを統治せよ!/ Data Federation with MCG
tutsunom
1
310
経営統合をきっかけに会社をエンジニアリングした話 / btconjp-2023
carta_engineering
0
150
OpenShift.Run2023_create-aro-with-terraform
ishiitaiki20fixer
1
310
NGINXENG JP#2 - 2-NGINXの動作の詳細
hiropo20
1
140
Cloudflare Workersで動くOG画像生成器
aiji42
1
500
DNS権威サーバのクラウドサービス向けに行われた攻撃および対策 / DNS Pseudo-Random Subdomain Attack and mitigations
kazeburo
5
1.3k
データベースの発表には RDBMS 以外もありますよ
maroon1st
0
240
NGINXENG JP#2 - 4-NGINX-エンジニアリング勉強会
hiropo20
0
120
SPA・SSGでSSRのようなOGP対応!
simo123
2
160
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
56
2.5k
Done Done
chrislema
178
14k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
657
120k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
236
1.1M
Faster Mobile Websites
deanohume
295
29k
Designing Experiences People Love
moore
130
22k
The Illustrated Children's Guide to Kubernetes
chrisshort
22
43k
Learning to Love Humans: Emotional Interface Design
aarron
263
38k
Bash Introduction
62gerente
601
210k
How STYLIGHT went responsive
nonsquared
89
4.2k
10 Git Anti Patterns You Should be Aware of
lemiorhan
643
54k
Optimizing for Happiness
mojombo
365
64k
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 ご静聴ありがとうございました