Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
既存システムのフロントエンド・バックエンド分離 / meetup0706-seki
Search
Rakus_Dev
July 11, 2022
Technology
0
1.9k
既存システムのフロントエンド・バックエンド分離 / meetup0706-seki
Rakus_Dev
July 11, 2022
Tweet
Share
More Decks by Rakus_Dev
See All by Rakus_Dev
AIへの再指示を抑える要件、設計、デザイン等のモバイル開発コンテキストの渡し方
rakus_dev
0
120
モバイルアプリ向けに開発したAPIをMCP化したら便利そうだった / mobiletechcafe20250902-2
rakus_dev
0
110
AIによるAndroidアプリのモダン化 / mobiletechcafe20250902-3
rakus_dev
0
110
iOSアプリからMCPツールを使う / mobiletechcafe20250902-4
rakus_dev
0
110
Claude Code × FastAPI-MCP モバイル技術記事の自動作成 / mobiletechcafe20250902-5
rakus_dev
0
110
AI時代にPdMとPMMはどう連携すべきか / PdM–PMM-collaboration-in-AI-era
rakus_dev
0
310
【TECH PLAY Product Management Conference】AI時代にどんなPdMが求められているのか? 〜私たちが見てきたリアルから考える〜 / techplay-pdmconf-ai
rakus_dev
0
300
『楽楽電子保存』開発チームが挑む「AI駆動開発」の全貌 / rakustechcon2025-rakurakudenshihozon
rakus_dev
2
800
数字と感情で語るスクラム導入効果。『楽楽勤怠』開発チームの変革の軌跡 / rakustechcon2025-rakurakukintai
rakus_dev
1
780
Other Decks in Technology
See All in Technology
slog.Handlerのよくある実装ミス
sakiengineer
4
450
職種の壁を溶かして開発サイクルを高速に回す~情報透明性と職種越境から考えるAIフレンドリーな職種間連携~
daitasu
0
170
人工衛星のファームウェアをRustで書く理由
koba789
15
8.2k
品質視点から考える組織デザイン/Organizational Design from Quality
mii3king
0
210
スマートファクトリーの第一歩 〜AWSマネージドサービスで 実現する予知保全と生成AI活用まで
ganota
2
300
テストを軸にした生き残り術
kworkdev
PRO
0
210
AI時代を生き抜くエンジニアキャリアの築き方 (AI-Native 時代、エンジニアという道は 「最大の挑戦の場」となる) / Building an Engineering Career to Thrive in the Age of AI (In the AI-Native Era, the Path of Engineering Becomes the Ultimate Arena of Challenge)
jeongjaesoon
0
230
Evolución del razonamiento matemático de GPT-4.1 a GPT-5 - Data Aventura Summit 2025 & VSCode DevDays
lauchacarro
0
210
下手な強制、ダメ!絶対! 「ガードレール」を「檻」にさせない"ガバナンス"の取り方とは?
tsukaman
2
450
なぜスクラムはこうなったのか?歴史が教えてくれたこと/Shall we explore the roots of Scrum
sanogemaru
5
1.7k
自作JSエンジンに推しプロポーザルを実装したい!
sajikix
1
190
AWSを利用する上で知っておきたい名前解決のはなし(10分版)
nagisa53
10
3.2k
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Unsuck your backbone
ammeep
671
58k
A Modern Web Designer's Workflow
chriscoyier
696
190k
Navigating Team Friction
lara
189
15k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Practical Orchestrator
shlominoach
190
11k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Making Projects Easy
brettharned
117
6.4k
GitHub's CSS Performance
jonrohan
1032
460k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
It's Worth the Effort
3n
187
28k
The Pragmatic Product Professional
lauravandoore
36
6.9k
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 ご静聴ありがとうございました