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 AI Meetup-1
rakus_dev
0
630
メールディーラーにおけるAI活用事例 ~クレーム検知機能リリースの舞台裏~ / RAKUS AI Meetup-2
rakus_dev
0
620
ラクス開発本部のAI駆動開発推進事例 / RAKUS AI Meetup-3
rakus_dev
0
630
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.7k
PdM採用とAIの製品活用を同時に頑張ってみた話 / EM oasis 20250418
rakus_dev
0
190
多様なマネジメント経験から導き出した、事業成長を支えるEMの4つのコンピテンシー / 4 Key EM Competencies for Growth
rakus_dev
2
2.3k
圧倒的な『顧客志向』の文化の創り方 / Product Engineer Night 20250221
rakus_dev
0
380
読書シェア会 vol.2 / Yumemi.grow 20250225
rakus_dev
0
160
ラクスCTOが語る顧客視点を重視したプロダクト開発 / RAKUSTechCon2024_Kude
rakus_dev
0
3.2k
Other Decks in Technology
See All in Technology
CSPヘッダー導入で実現するWebサイトの多層防御:今すぐ試せる設定例と運用知見
llamakko
1
270
From Live Coding to Vibe Coding with Firebase Studio
firebasethailand
1
320
[TechNight #91] Oracle Database 最新パフォーマンス分析手法
oracle4engineer
PRO
3
160
Datasets for Critical Operations by Dataform
kimujun
0
120
The Madness of Multiple Gemini CLIs Developing Simultaneously with Jujutsu
gunta
1
2.8k
メモ整理が苦手な者による頑張らないObsidian活用術
optim
0
150
Step Functions First - サーバーレスアーキテクチャの新しいパラダイム
taikis
1
280
Kiroから考える AIコーディングツールの潮流
s4yuba
1
400
隙間時間で爆速開発! Claude Code × Vibe Coding で作るマニュアル自動生成サービス
akitomonam
2
200
増え続ける脆弱性に立ち向かう: 事前対策と優先度づけによる 持続可能な脆弱性管理 / Confronting the Rise of Vulnerabilities: Sustainable Management Through Proactive Measures and Prioritization
nttcom
1
220
DatabricksのOLTPデータベース『Lakebase』に詳しくなろう!
inoutk
0
160
完璧を目指さない小さく始める信頼性向上
kakehashi
PRO
0
110
Featured
See All Featured
Statistics for Hackers
jakevdp
799
220k
Git: the NoSQL Database
bkeepers
PRO
431
65k
RailsConf 2023
tenderlove
30
1.2k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Automating Front-end Workflow
addyosmani
1370
200k
It's Worth the Effort
3n
185
28k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Fireside Chat
paigeccino
37
3.5k
A Modern Web Designer's Workflow
chriscoyier
695
190k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
A designer walks into a library…
pauljervisheath
207
24k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.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 ご静聴ありがとうございました