Chatdealerの高速開発を支えるLaravel

by kyoshimoto

Slide 1

Slide 1 text

の高速開発を支える Laravel 株式会社ラクス吉元和仁ラクスミートアップ大阪

Slide 2

Slide 2 text

自己紹介 • 吉元和仁 • 株式会社ラクスクラウド事業本部開発統括部第二開発部 • 経歴： – 2011 年ラクス入社 – 2011 年メールディーラー開発 – 2017 年チャットディーラー開発 – 2018 年配配メール開発 1

Slide 3

Slide 3 text

• ノンフレームワークサービスの課題 • チャットディーラーとは • なぜ Laravel を選択したか？ • Laravel で良かったこと • Laravel で困ったこと • まとめ今日話すこと 2

Slide 4

Slide 4 text

ノンフレームワークサービスの課題 3

Slide 5

Slide 5 text

4 https://www.maildealer.jp/products/ メールディーラーとは

Slide 6

Slide 6 text

• 2001 年にサービス提供開始 • 4,000 社以上の導入実績 • メール共有・管理システム市場で 9 年連続シェア No.1 5 メールディーラーとは

Slide 7

Slide 7 text

• 2001 年にサービス提供開始 • 4,000 社以上の導入実績 • メール共有・管理システム市場で 9 年連続シェア No.1 • PHP でノンフレームワークで開発 6 メールディーラーとは

Slide 8

Slide 8 text

• 15年以上改修され続けてきたコード • 手続き型モジュール • ビューとロジックが分離されていない 7 ノンフレームワークサービスの課題

Slide 9

Slide 9 text

• グローバル変数が数千個以上 • 何を返すか分からない共通関数 – 値？配列？HTML？Exit？グローバル上書き？ Etc.. 可読性・保守性が著しく低下 8 ノンフレームワークサービスの課題

Slide 10

Slide 10 text

• 課題への取り組み – テスト自動化（PHPUnit, Jenkins, Selenium) – 静的コード解析ツールで品質可視化 – PHPStorm導入 – 地道なリファクタリング脱レガシーの道のりは険しい 9 ノンフレームワークサービスの課題

Slide 11

Slide 11 text

10 そんな課題感をもつ開発チームが新サービス立ち上げにチャレンジ！

Slide 12

Slide 12 text

チャットディーラーとは 11

Slide 13

Slide 13 text

サービス概要 • Web ページに専用スクリプトを埋め込んで利用する Web チャットシステム（SaaS） • 本文 12 https://www.chatdealer.jp/products/

Slide 14

Slide 14 text

サービス概要 • Web ページに専用スクリプトを埋め込んで利用する Web チャットシステム（SaaS） • 本文 13 https://www.chatdealer.jp/products/

Slide 15

Slide 15 text

技術スタック • 言語、フレームワーク – PHP、Laravel – Node.js、Express、Socket.IO • 開発環境 – PhpStorm、Jenkins、Redmine、GitLab、 Mattermost • インフラ – 仮想基盤(オンプレ)、nginx、Apache、 PostgreSQL、Redis 14

Slide 16

Slide 16 text

開発チーム構成 • プロジェクトマネージャー • エンジニア – バックエンド (PHP)：３名 – フロントエンド (Node.js)：３名 15

Slide 17

Slide 17 text

開発スケジュール 16 2月 3月 4月 5月 6月 7月要件定義 2017年開発基盤整備設計実装・単体テストシステムテスト β版ﾌｨｰﾄﾞﾊﾞｯｸ改修 β版リリース本番リリース

Slide 18

Slide 18 text

なぜ Laravel を選択したか？ 17

Slide 19

Slide 19 text

新サービスの立ち上げに際しての課題 • 短納期（実装２ヶ月） • レガシーからの脱却 18

Slide 20

Slide 20 text

フレームワーク選定条件 • 長期サポート • 機能性 19

Slide 21

Slide 21 text

選定条件：長期サポート • シェア率が高い、人気がある • 活発なコミュニティ • 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

Slide 22

Slide 22 text

選定条件：機能性 • Webの基本機能がすぐに使える状態 – ルーティング – テンプレートエンジン – バリデーター – マイグレーション – ページネーション Etc… 21

Slide 23

Slide 23 text

選定条件：機能性 • ミドルウェアやライブラリとの連携 – ミドルウェア – クライアントサイドのライブラリ – ユニットテストライブラリ 22

Slide 24

Slide 24 text

フレームワーク選定のまとめ • 長期サポート – LTS 対応 – 一番人気で、今なお人気上昇中 – コミュニティも活発 • 機能性 – フルスタックフレームワーク Laravel を採用することに決定 23

Slide 25

Slide 25 text

Laravel で良かったこと 24

Slide 26

Slide 26 text

Laravel で良かったこと • オールインワンでスピード開発に向いていた • 簡単設定でどんなものにも繋がる • 標準ライブラリが使いやすい • ドキュメントが充実していた 25

Slide 27

Slide 27 text

Laravel で良かったこと • オールインワンでスピード開発に向いていた • 簡単設定でどんなものにも繋がる • 標準ライブラリが使いやすい • ドキュメントが充実していた 26

Slide 28

Slide 28 text

オールインワンでスピード開発に向いていた • 準備コストが削減できたので、ロケットスタートを決めることができた – 標準機能が充実ルーティング、Middleware、DI、バリデーション、テンプレートエンジン (Blade)、バッチ処理 (Command)、マイグレーション、デバッグ、クエリビルダ、ページネーション、セッション – フロントエンド用ライブラリ標準バンドル Bootstrap、jQuery、Vue.js 27

Slide 29

Slide 29 text

Laravel で良かったこと • オールインワンでスピード開発に向いていた • 簡単設定でどんなものにも繋がる • 標準ライブラリが使いやすい • ドキュメントが充実していた 28

Slide 30

Slide 30 text

簡単設定でどんなものにも繋がる • チャットディーラーで利用しているミドルウェアの一例 – PostgreSQL – Redis – Postfix いずれも、接続のための仕組みは準備されており、簡単設定で繋がった 29

Slide 31

Slide 31 text

Laravel で良かったこと • オールインワンでスピード開発に向いていた • 簡単設定でどんなものにも繋がる • 標準ライブラリが使いやすい • ドキュメントが充実していた 30

Slide 32

Slide 32 text

標準ライブラリが使いやすい • ルーティング – URL とコントローラの紐づけが直観的に書けてわかりやすかった 31

Slide 33

Slide 33 text

標準ライブラリが使いやすい • Middleware – 事前・事後処理を追加したいルーティング設定をgroupメソッドで囲うだけ 32

Slide 34

Slide 34 text

標準ライブラリが使いやすい • DI – メソッドの引数に、クラス名をタイプヒントするだけ 33

Slide 35

Slide 35 text

標準ライブラリが使いやすい • バリデーション – Request クラスに、バリデーションを追加するだけ 34

Slide 36

Slide 36 text

• バリデーション – バラエティ豊富なバリデーションルール標準ライブラリが使いやすい 35 https://readouble.com/laravel/5.5/ja/validation.html

Slide 37

Slide 37 text

標準ライブラリが使いやすい 36 • テンプレートエンジン（Blade） – ノンフレームワークサービスの場合

Slide 38

Slide 38 text

• テンプレートエンジン（Blade） – Laravel の場合標準ライブラリが使いやすい画面ごとに切替えたいコンテンツを @yield ディレクティブで指定する 37 @section ディレクティブ内に挿入するコンテンツを記述する

Slide 39

Slide 39 text

• バッチ処理（Command） – ノンフレームワークサービスの場合標準ライブラリが使いやすいバージョンアップを重ねていく内に cron レコードが増えていく 38

Slide 40

Slide 40 text

• バッチ処理（Command） – Laravel の場合 • cron は 1 レコードのみ • 実行スケジュールを PHP で記述できる標準ライブラリが使いやすい 39

Slide 41

Slide 41 text

• マイグレーション – ノンフレームワークサービスの場合 – Laravel の場合アプリケーションのバージョンより、新しいバージョンをファイル名に含むパッチファイルを実行コマンドを実行するだけで、マイグレーションファイルの中から未実行のファイルのみを自動実行ロールバックも可能 40 標準ライブラリが使いやすい

Slide 42

Slide 42 text

標準ライブラリが使いやすいエラーメッセージスーパーグローバル、環境情報などスタックトレースエラー発生箇所 41 • デバッグ

Slide 43

Slide 43 text

Laravel で良かったこと • オールインワンでスピード開発に向いていた • 簡単設定でどんなものにも繋がる • 標準ライブラリが使いやすい • ドキュメントが充実していた 42

Slide 44

Slide 44 text

ドキュメントが充実していた • 必要な情報が公式ドキュメントとして準備されていた 43 http://laravel.jp/

Slide 45

Slide 45 text

ドキュメントが充実していた • 公式ドキュメントが日本語化されていた 44 https://readouble.com/laravel/5.5/ja/

Slide 46

Slide 46 text

Laravel で困ったこと 45

Slide 47

Slide 47 text

Laravel で困ったこと • Vue.js は思ったより難しかった • Blade (SSR) + Vue.js での脆弱性 46

Slide 48

Slide 48 text

Laravel で困ったこと • Vue.js は思ったより難しかった • Blade (SSR) + Vue.js での脆弱性 47

Slide 49

Slide 49 text

Vue.js は思ったより難しかった 48 • Vue.jsとは – クライアントJavaScript フレームワーク – Laravel にバンドルされている

Slide 50

Slide 50 text

Vue.js は思ったより難しかった 49 • Vue.js 導入を検討 – チームメンバーはみな jQuery に慣れ親しんでいる – Laravel との相性は良いはず。 – 「学習コストが低い」という前評判 – 公式のガイドを見てもそんな印象 – 確かに簡単そうだ（と思ってしまった）

Slide 51

Slide 51 text

Vue.js は思ったより難しかった • そして導入を決断！ 50 クライアントサイドはすべてVue.jsで実装してね。学習コストも低いし。

Slide 52

Slide 52 text

Vue.js は思ったより難しかった • 導入した結果 51 JSライブラリの入力値が取れないんだけど。 jQuery なら１行で書けるのに！ XSS発生しました！ jQuery じゃないので、間に合いません。 jQuery 使っていいですか？

Slide 53

Slide 53 text

Vue.js は思ったより難しかった 52 • 「学習コストが低い」とは言え、ちゃんと勉強しないとダメだった • jQuery 脳からのパラダイムシフトが必要。 • 他のライブラリと併用するにはノウハウが必要。（jQuery、Bootstrap、他）

Slide 54

Slide 54 text

Laravel で困ったこと • Vue.js は思ったより難しかった • Blade (SSR) + Vue.js での脆弱性 53

Slide 55

Slide 55 text

Laravel で困ったこと • Vue.js は思ったより難しかった • Blade (SSR) + Vue.js での脆弱性 54

Slide 56

Slide 56 text

Blade (SSR) + Vue.js での脆弱性 • ある日の後輩との会話 55 Blade＋Vue.jsでXSSが簡単に発生させれますよ！忙しい時期に、重大バグを見つけてくれてありがとう。

Slide 57

Slide 57 text

• SSR と Vue.js の組み合わせで起こる XSS サーバーでの処理ブラウザでの処理 Blade (SSR) + Vue.js での脆弱性

sample.blade.php Blade で処理 $name = “{{ alert(‘XSS') }}”

Vue.js が処理

56 {{ … }} の中のスクリプトが実行される！処理済みのHTMLデータレスポンス送信ブラウザが読込

Slide 58

Slide 58 text

• SSR と Vue.js の組み合わせで起こる XSS サーバーでの処理ブラウザでの処理 Blade (SSR) + Vue.js での脆弱性

sample.blade.php Blade で処理 $name = “{{ alert(‘XSS') }}”

Vue.js が処理

57 {{ … }} の中のスクリプトが実行される！処理済みのHTMLデータレスポンス送信ブラウザが読込

Slide 59

Slide 59 text

• SSR でユーザー入力値を Vue.js 管轄の領域に埋め込むだけで、簡単にXSSを実装できてしまう • 開発チームでは “mustache injection” と呼んでいる Blade (SSR) + Vue.js での脆弱性 58

Slide 60

Slide 60 text

Blade (SSR) + Vue.js での脆弱性 • “mustache injection” 対策 – Middleware で、すべてのリクエストパラメータをエスケープ – “{{“ や “}}” の文字間に半角空白を挿入する – 入力値が変わってしまうが、やむなし。。 59

Slide 61

Slide 61 text

まとめ 60

Slide 62

Slide 62 text

まとめ • フレームワークがスピード開発に役立った – ミドルウェアとの連携 – MVCの考えに沿ったソース配置 – ビジネスロジックに集中できた！ • とくに Laravel でよかったこと – 豊富な機能 – 日本語公式ドキュメント 61

Slide 63

Slide 63 text

まとめ • Vue.js の注意点 – SSRとの連携 – 仮想DOM とリアルDOM の連携 – アーキテクチャ・パターンの理解 – プロダクトで使うにはコンポーネント化が必須 – jQuery 熟練者への配慮 62

Slide 64

Slide 64 text

まとめ • フレームワーク経験がなくても、新サービスが開発できる。Laravel があれば。 63 おわり