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
Chatdealerの高速開発を支えるLaravel
Search
kyoshimoto
November 27, 2018
Technology
0
2.1k
Chatdealerの高速開発を支えるLaravel
Rakus Meetup Osaka #1 の発表資料です。
https://rakus.connpass.com/event/106050/
kyoshimoto
November 27, 2018
Tweet
Share
More Decks by kyoshimoto
See All by kyoshimoto
視座とアジャイル / shiza_and_agile
kyoshimoto
0
400
リリース後21年目になる レガシーサービスにLaravelを導入した話 / PHPTechCafe-2022-01-26
kyoshimoto
0
410
13年続くレガシーサービスを安全にリリースし続けるためのテスト戦略 / rakus-meetup-osaka-vol8-2020-08-05
kyoshimoto
4
1.9k
「始めるのをやめて、終わらせることを始める」ことを始めた開発チームの話 / Rakus Meetup Osaka 2020-02-05
kyoshimoto
17
9k
Other Decks in Technology
See All in Technology
話題のGraphRAG、その可能性と課題を理解する
hide212131
4
1.5k
日経電子版におけるリアルタイムレコメンドシステム開発の事例紹介/nikkei-realtime-recommender-system
yng87
1
500
Apple/Google/Amazonの決済システムの違いを踏まえた定期購読課金システムの構築 / abema-billing-system
cyberagentdevelopers
PRO
1
220
APIテスト自動化の勘所
yokawasa
7
4.1k
Vueで Webコンポーネントを作って Reactで使う / 20241030-cloudsign-vuefes_after_night
bengo4com
4
2.5k
大規模データ基盤チームのオンプレTiDB運用への挑戦 / dpu-tidb
cyberagentdevelopers
PRO
1
110
オニオンアーキテクチャで実現した 本質課題を解決する インフラ移行の実例
hryushm
14
3k
WINTICKETアプリで実現した高可用性と高速リリースを支えるエコシステム / winticket-eco-system
cyberagentdevelopers
PRO
1
190
生成AIと知識グラフの相互利用に基づく文書解析
koujikozaki
1
140
独自ツール開発でスタジオ撮影をDX!「VLS(Virtual LED Studio)」 / dx-studio-vls
cyberagentdevelopers
PRO
1
180
【若手エンジニア応援LT会】AWS Security Hubの活用に苦労した話
kazushi_ohata
0
160
リンクアンドモチベーション ソフトウェアエンジニア向け紹介資料 / Introduction to Link and Motivation for Software Engineers
lmi
4
290k
Featured
See All Featured
Visualization
eitanlees
144
15k
How GitHub (no longer) Works
holman
311
140k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
The Pragmatic Product Professional
lauravandoore
31
6.3k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
9
680
Thoughts on Productivity
jonyablonski
67
4.3k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
Faster Mobile Websites
deanohume
304
30k
Rails Girls Zürich Keynote
gr2m
93
13k
What's new in Ruby 2.0
geeforr
342
31k
Transcript
の高速開発を支える Laravel 株式会社ラクス 吉元和仁 ラクスミートアップ大阪
自己紹介 • 吉元 和仁 • 株式会社ラクス クラウド事業本部 開発統括部 第二開発部 •
経歴: – 2011 年 ラクス入社 – 2011 年 メールディーラー 開発 – 2017 年 チャットディーラー 開発 – 2018 年 配配メール 開発 1
• ノンフレームワークサービスの課題 • チャットディーラーとは • なぜ Laravel を選択したか? • Laravel
で良かったこと • Laravel で困ったこと • まとめ 今日話すこと 2
ノンフレームワークサービスの課題 3
4 https://www.maildealer.jp/products/ メールディーラーとは
• 2001 年にサービス提供開始 • 4,000 社以上の導入実績 • メール共有・管理システム市場で 9 年連続
シェア No.1 5 メールディーラーとは
• 2001 年にサービス提供開始 • 4,000 社以上の導入実績 • メール共有・管理システム市場で 9 年連続
シェア No.1 • PHP でノンフレームワークで開発 6 メールディーラーとは
• 15年以上改修され続けてきたコード • 手続き型モジュール • ビューとロジックが分離されていない 7 ノンフレームワークサービスの課題
• グローバル変数が数千個以上 • 何を返すか分からない共通関数 – 値?配列?HTML?Exit?グローバル上書き? Etc.. 可読性・保守性が著しく低下 8 ノンフレームワークサービスの課題
• 課題への取り組み – テスト自動化(PHPUnit, Jenkins, Selenium) – 静的コード解析ツールで品質可視化 – PHPStorm導入
– 地道なリファクタリング 脱レガシーの道のりは険しい 9 ノンフレームワークサービスの課題
10 そんな課題感をもつ開発チームが 新サービス立ち上げにチャレンジ!
チャットディーラーとは 11
サービス概要 • Web ページに専用スクリプトを埋め込んで 利用する Web チャットシステム(SaaS) • 本文 12
https://www.chatdealer.jp/products/
サービス概要 • Web ページに専用スクリプトを埋め込んで 利用する Web チャットシステム(SaaS) • 本文 13
https://www.chatdealer.jp/products/
技術スタック • 言語、フレームワーク – PHP、Laravel – Node.js、Express、Socket.IO • 開発環境 –
PhpStorm、Jenkins、Redmine、GitLab、 Mattermost • インフラ – 仮想基盤(オンプレ)、nginx、Apache、 PostgreSQL、Redis 14
開発チーム構成 • プロジェクトマネージャー • エンジニア – バックエンド (PHP):3名 – フロントエンド
(Node.js):3名 15
開発スケジュール 16 2月 3月 4月 5月 6月 7月 要件定義 2017年
開発基盤整備 設計 実装・単体テスト システム テスト β版フィード バック改修 β版リリース 本番リリース
なぜ Laravel を選択したか? 17
新サービスの立ち上げに際しての課題 • 短納期(実装2ヶ月) • レガシーからの脱却 18
フレームワーク選定条件 • 長期サポート • 機能性 19
選定条件:長期サポート • シェア率が高い、人気がある • 活発なコミュニティ • LTS (Long-Term Support) を宣言している
20 青色が Laravel https://trends.google.co.jp/trends/explore?date=today%205- y&geo=JP&q=Laravel,CakePHP,Symphony,CodeIgniter,FuelPHP
選定条件:機能性 • Webの基本機能がすぐに使える状態 – ルーティング – テンプレートエンジン – バリデーター –
マイグレーション – ページネーション Etc… 21
選定条件:機能性 • ミドルウェアやライブラリとの連携 – ミドルウェア – クライアントサイドのライブラリ – ユニットテストライブラリ 22
フレームワーク選定のまとめ • 長期サポート – LTS 対応 – 一番人気で、今なお人気上昇中 – コミュニティも活発
• 機能性 – フルスタックフレームワーク Laravel を採用することに決定 23
Laravel で良かったこと 24
Laravel で良かったこと • オールインワンでスピード開発に向いていた • 簡単設定でどんなものにも繋がる • 標準ライブラリが使いやすい • ドキュメントが充実していた
25
Laravel で良かったこと • オールインワンでスピード開発に向いていた • 簡単設定でどんなものにも繋がる • 標準ライブラリが使いやすい • ドキュメントが充実していた
26
オールインワンでスピード開発に向いていた • 準備コストが削減できたので、ロケットス タートを決めることができた – 標準機能が充実 ルーティング、Middleware、DI、バリデーション、 テンプレートエンジン (Blade)、バッチ処理 (Command)、
マイグレーション、デバッグ、クエリビルダ、ページネーション、 セッション – フロントエンド用ライブラリ標準バンドル Bootstrap、jQuery、Vue.js 27
Laravel で良かったこと • オールインワンでスピード開発に向いていた • 簡単設定でどんなものにも繋がる • 標準ライブラリが使いやすい • ドキュメントが充実していた
28
簡単設定でどんなものにも繋がる • チャットディーラーで利用しているミドル ウェアの一例 – PostgreSQL – Redis – Postfix
いずれも、接続のための仕組みは準備されており、 簡単設定で繋がった 29
Laravel で良かったこと • オールインワンでスピード開発に向いていた • 簡単設定でどんなものにも繋がる • 標準ライブラリが使いやすい • ドキュメントが充実していた
30
標準ライブラリが使いやすい • ルーティング – URL とコントローラの紐づけが直観的に書けて わかりやすかった 31
標準ライブラリが使いやすい • Middleware – 事前・事後処理を追加したい ルーティング設定 をgroupメソッドで囲うだけ 32
標準ライブラリが使いやすい • DI – メソッドの引数に、クラス名をタイプヒントす るだけ 33
標準ライブラリが使いやすい • バリデーション – Request クラスに、バリデーションを追加する だけ 34
• バリデーション – バラエティ豊富なバリデーションルール 標準ライブラリが使いやすい 35 https://readouble.com/laravel/5.5/ja/validation.html
標準ライブラリが使いやすい 36 • テンプレートエンジン(Blade) – ノンフレームワークサービスの場合
• テンプレートエンジン(Blade) – Laravel の場合 標準ライブラリが使いやすい 画面ごとに切替えたいコンテンツを @yield ディレクティブで指定する 37
@section ディレクティブ内に 挿入するコンテンツを記述する
• バッチ処理(Command) – ノンフレームワークサービスの場合 標準ライブラリが使いやすい バージョンアップを重ねていく内に cron レコードが増えていく 38
• バッチ処理(Command) – Laravel の場合 • cron は 1 レコードのみ
• 実行スケジュールを PHP で記述できる 標準ライブラリが使いやすい 39
• マイグレーション – ノンフレームワークサービスの場合 – Laravel の場合 アプリケーションのバージョンより、 新しいバージョンをファイル名に含 むパッチファイルを実行
コマンドを実行するだけで、マイグ レーションファイルの中から未実行 のファイルのみを自動実行 ロールバックも可能 40 標準ライブラリが使いやすい
標準ライブラリが使いやすい エラーメッセージ スーパーグローバル、 環境情報など スタックトレース エラー発生箇所 41 • デバッグ
Laravel で良かったこと • オールインワンでスピード開発に向いていた • 簡単設定でどんなものにも繋がる • 標準ライブラリが使いやすい • ドキュメントが充実していた
42
ドキュメントが充実していた • 必要な情報が公式ドキュメントとして準備さ れていた 43 http://laravel.jp/
ドキュメントが充実していた • 公式ドキュメントが日本語化されていた 44 https://readouble.com/laravel/5.5/ja/
Laravel で困ったこと 45
Laravel で困ったこと • Vue.js は思ったより難しかった • Blade (SSR) + Vue.js
での脆弱性 46
Laravel で困ったこと • Vue.js は思ったより難しかった • Blade (SSR) + Vue.js
での脆弱性 47
Vue.js は思ったより難しかった 48 • Vue.jsとは – クライアントJavaScript フレームワーク – Laravel
にバンドルされている
Vue.js は思ったより難しかった 49 • Vue.js 導入を検討 – チームメンバーはみな jQuery に慣れ親しんで
いる – Laravel との相性は良いはず。 – 「学習コストが低い」という前評判 – 公式のガイドを見てもそんな印象 – 確かに簡単そうだ(と思ってしまった)
Vue.js は思ったより難しかった • そして導入を決断! 50 クライアントサイドは すべてVue.jsで実装してね。 学習コストも低いし。
Vue.js は思ったより難しかった • 導入した結果 51 JSライブラリの入力値が取れないんだけど。 jQuery なら1行で書けるのに! XSS発生しました! jQuery
じゃないので、間に合いません。 jQuery 使っていいですか?
Vue.js は思ったより難しかった 52 • 「学習コストが低い」とは言え、ちゃんと勉 強しないとダメだった • jQuery 脳からのパラダイムシフトが必要。 •
他のライブラリと併用するにはノウハウが必 要。(jQuery、Bootstrap、他)
Laravel で困ったこと • Vue.js は思ったより難しかった • Blade (SSR) + Vue.js
での脆弱性 53
Laravel で困ったこと • Vue.js は思ったより難しかった • Blade (SSR) + Vue.js
での脆弱性 54
Blade (SSR) + Vue.js での脆弱性 • ある日の後輩との会話 55 Blade+Vue.jsでXSSが簡 単に発生させれますよ!
忙しい時期に、重大バグを 見つけてくれてありがとう。
• SSR と Vue.js の組み合わせで起こる XSS サーバーでの処理 ブラウザでの処理 Blade (SSR)
+ Vue.js での脆弱性 <div id="app"> {{ $name }} </div> sample.blade.php Blade で処理 $name = “{{ alert(‘XSS') }}” <div id="app"> {{ alert('XSS') }} </div> <div id="app"> {{ alert(‘XSS’) }} </div> Vue.js が処理 <div id="app"> </div> 56 {{ … }} の中の スクリプトが実行 される! 処理済みのHTMLデータ レスポンス送信 ブラウザが読込
• SSR と Vue.js の組み合わせで起こる XSS サーバーでの処理 ブラウザでの処理 Blade (SSR)
+ Vue.js での脆弱性 <div id="app"> {{ $name }} </div> sample.blade.php Blade で処理 $name = “{{ alert(‘XSS') }}” <div id="app"> {{ alert('XSS') }} </div> <div id="app"> {{ alert(‘XSS’) }} </div> Vue.js が処理 <div id="app"> </div> 57 {{ … }} の中の スクリプトが実行 される! 処理済みのHTMLデータ レスポンス送信 ブラウザが読込
• SSR でユーザー入力値を Vue.js 管轄の領域 に埋め込むだけで、簡単にXSSを実装できて しまう • 開発チームでは “mustache
injection” と呼 んでいる Blade (SSR) + Vue.js での脆弱性 58
Blade (SSR) + Vue.js での脆弱性 • “mustache injection” 対策 –
Middleware で、すべてのリクエストパラメータ をエスケープ – “{{“ や “}}” の文字間に半角空白を挿入する – 入力値が変わってしまうが、やむなし。。 59
まとめ 60
まとめ • フレームワークがスピード開発に役立った – ミドルウェアとの連携 – MVCの考えに沿ったソース配置 – ビジネスロジックに集中できた! •
とくに Laravel でよかったこと – 豊富な機能 – 日本語公式ドキュメント 61
まとめ • Vue.js の注意点 – SSRとの連携 – 仮想DOM と リアルDOM
の連携 – アーキテクチャ・パターンの理解 – プロダクトで使うにはコンポーネント化が必須 – jQuery 熟練者への配慮 62
まとめ • フレームワーク経験がなくても、新サービス が開発できる。Laravel があれば。 63 おわり