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
410
リリース後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
AWS Lambdaと歩んだ“サーバーレス”と今後 #lambda_10years
yoshidashingo
1
170
OCI Network Firewall 概要
oracle4engineer
PRO
0
4.1k
AGIについてChatGPTに聞いてみた
blueb
0
130
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
2
3.2k
マルチプロダクトな開発組織で 「開発生産性」に向き合うために試みたこと / Improving Multi-Product Dev Productivity
sugamasao
1
300
Why does continuous profiling matter to developers? #appdevelopercon
salaboy
0
190
Taming you application's environments
salaboy
0
180
10XにおけるData Contractの導入について: Data Contract事例共有会
10xinc
5
610
個人でもIAM Identity Centerを使おう!(アクセス管理編)
ryder472
3
200
マルチモーダル / AI Agent / LLMOps 3つの技術トレンドで理解するLLMの今後の展望
hirosatogamo
37
12k
これまでの計測・開発・デプロイ方法全部見せます! / Findy ISUCON 2024-11-14
tohutohu
3
370
The Rise of LLMOps
asei
7
1.4k
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
A better future with KSS
kneath
238
17k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
860
4 Signs Your Business is Dying
shpigford
180
21k
Building Your Own Lightsaber
phodgson
103
6.1k
Done Done
chrislema
181
16k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
Facilitating Awesome Meetings
lara
50
6.1k
Why Our Code Smells
bkeepers
PRO
334
57k
Automating Front-end Workflow
addyosmani
1366
200k
The Invisible Side of Design
smashingmag
298
50k
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 おわり