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
2k
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
400
13年続くレガシーサービスを安全にリリースし続けるためのテスト戦略 / rakus-meetup-osaka-vol8-2020-08-05
kyoshimoto
4
1.9k
「始めるのをやめて、終わらせることを始める」ことを始めた開発チームの話 / Rakus Meetup Osaka 2020-02-05
kyoshimoto
17
8.9k
Other Decks in Technology
See All in Technology
AWS Lambdaで実現するスケーラブルで低コストなWebサービス構築/YAPC::Hakodate2024
fujiwara3
5
910
【shownet.conf_】AI技術とUX監視の応用でShowNetの基盤を支えるモニタリングシステム
shownet
PRO
0
270
【shownet.conf_】トポロジ図の歩き方
shownet
PRO
0
360
ITエンジニアとして知っておいてほしい、電子メールという大きな穴
logica0419
2
310
Tracking down sources of kernel errors with retsnoop
ennael
PRO
0
140
エムスリーマネジメントチーム紹介資料 / Introduction of M3 Management Team
m3_engineering
0
250
FastAPIでのasync defとdefの使い分け
takashi1029
6
1.8k
LINEヤフー新卒採用 コーディングテスト解説 アルゴリズム問題編
lycorp_recruit_jp
0
13k
Rubyはなぜ「たのしい」のか? / Why is Ruby a programmers' best friend? #tqrk15
expajp
4
1.7k
「ばん・さく・つき・たー!」にならないためにSHIROBAKOから 学んだこと
ysknsid25
3
260
Oracle GoldenGate 23ai 導入Tips
oracle4engineer
PRO
1
200
【shownet.conf_】革新と伝統を融合したファシリティ
shownet
PRO
0
240
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.8k
Navigating Team Friction
lara
183
14k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
29
1.7k
Why Our Code Smells
bkeepers
PRO
334
57k
A better future with KSS
kneath
235
17k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
37
1.7k
Design by the Numbers
sachag
278
19k
Agile that works and the tools we love
rasmusluckow
327
21k
Side Projects
sachag
452
42k
Done Done
chrislema
181
16k
Into the Great Unknown - MozCon
thekraken
30
1.4k
Automating Front-end Workflow
addyosmani
1365
200k
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 おわり