Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Chatdealerの高速開発を支えるLaravel

Dd672f13e7e17714700544cb355cbaba?s=47 kyoshimoto
November 27, 2018

 Chatdealerの高速開発を支えるLaravel

Rakus Meetup Osaka #1 の発表資料です。
https://rakus.connpass.com/event/106050/

Dd672f13e7e17714700544cb355cbaba?s=128

kyoshimoto

November 27, 2018
Tweet

Transcript

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

  2. 自己紹介 • 吉元 和仁 • 株式会社ラクス クラウド事業本部 開発統括部 第二開発部 •

    経歴: – 2011 年 ラクス入社 – 2011 年 メールディーラー 開発 – 2017 年 チャットディーラー 開発 – 2018 年 配配メール 開発 1
  3. • ノンフレームワークサービスの課題 • チャットディーラーとは • なぜ Laravel を選択したか? • Laravel

    で良かったこと • Laravel で困ったこと • まとめ 今日話すこと 2
  4. ノンフレームワークサービスの課題 3

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

  6. • 2001 年にサービス提供開始 • 4,000 社以上の導入実績 • メール共有・管理システム市場で 9 年連続

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

    シェア No.1 • PHP でノンフレームワークで開発 6 メールディーラーとは
  8. • 15年以上改修され続けてきたコード • 手続き型モジュール • ビューとロジックが分離されていない 7 ノンフレームワークサービスの課題

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

  10. • 課題への取り組み – テスト自動化(PHPUnit, Jenkins, Selenium) – 静的コード解析ツールで品質可視化 – PHPStorm導入

    – 地道なリファクタリング 脱レガシーの道のりは険しい 9 ノンフレームワークサービスの課題
  11. 10 そんな課題感をもつ開発チームが 新サービス立ち上げにチャレンジ!

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

  13. サービス概要 • Web ページに専用スクリプトを埋め込んで 利用する Web チャットシステム(SaaS) • 本文 12

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

    https://www.chatdealer.jp/products/
  15. 技術スタック • 言語、フレームワーク – PHP、Laravel – Node.js、Express、Socket.IO • 開発環境 –

    PhpStorm、Jenkins、Redmine、GitLab、 Mattermost • インフラ – 仮想基盤(オンプレ)、nginx、Apache、 PostgreSQL、Redis 14
  16. 開発チーム構成 • プロジェクトマネージャー • エンジニア – バックエンド (PHP):3名 – フロントエンド

    (Node.js):3名 15
  17. 開発スケジュール 16 2月 3月 4月 5月 6月 7月 要件定義 2017年

    開発基盤整備 設計 実装・単体テスト システム テスト β版フィード バック改修 β版リリース 本番リリース
  18. なぜ Laravel を選択したか? 17

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

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

  21. 選定条件:長期サポート • シェア率が高い、人気がある • 活発なコミュニティ • 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
  22. 選定条件:機能性 • Webの基本機能がすぐに使える状態 – ルーティング – テンプレートエンジン – バリデーター –

    マイグレーション – ページネーション Etc… 21
  23. 選定条件:機能性 • ミドルウェアやライブラリとの連携 – ミドルウェア – クライアントサイドのライブラリ – ユニットテストライブラリ 22

  24. フレームワーク選定のまとめ • 長期サポート – LTS 対応 – 一番人気で、今なお人気上昇中 – コミュニティも活発

    • 機能性 – フルスタックフレームワーク Laravel を採用することに決定 23
  25. Laravel で良かったこと 24

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

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

    26
  28. オールインワンでスピード開発に向いていた • 準備コストが削減できたので、ロケットス タートを決めることができた – 標準機能が充実 ルーティング、Middleware、DI、バリデーション、 テンプレートエンジン (Blade)、バッチ処理 (Command)、

    マイグレーション、デバッグ、クエリビルダ、ページネーション、 セッション – フロントエンド用ライブラリ標準バンドル Bootstrap、jQuery、Vue.js 27
  29. Laravel で良かったこと • オールインワンでスピード開発に向いていた • 簡単設定でどんなものにも繋がる • 標準ライブラリが使いやすい • ドキュメントが充実していた

    28
  30. 簡単設定でどんなものにも繋がる • チャットディーラーで利用しているミドル ウェアの一例 – PostgreSQL – Redis – Postfix

    いずれも、接続のための仕組みは準備されており、 簡単設定で繋がった 29
  31. Laravel で良かったこと • オールインワンでスピード開発に向いていた • 簡単設定でどんなものにも繋がる • 標準ライブラリが使いやすい • ドキュメントが充実していた

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

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

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

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

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

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

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

    @section ディレクティブ内に 挿入するコンテンツを記述する
  39. • バッチ処理(Command) – ノンフレームワークサービスの場合 標準ライブラリが使いやすい バージョンアップを重ねていく内に cron レコードが増えていく 38

  40. • バッチ処理(Command) – Laravel の場合 • cron は 1 レコードのみ

    • 実行スケジュールを PHP で記述できる 標準ライブラリが使いやすい 39
  41. • マイグレーション – ノンフレームワークサービスの場合 – Laravel の場合 アプリケーションのバージョンより、 新しいバージョンをファイル名に含 むパッチファイルを実行

    コマンドを実行するだけで、マイグ レーションファイルの中から未実行 のファイルのみを自動実行 ロールバックも可能 40 標準ライブラリが使いやすい
  42. 標準ライブラリが使いやすい エラーメッセージ スーパーグローバル、 環境情報など スタックトレース エラー発生箇所 41 • デバッグ

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

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

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

  46. Laravel で困ったこと 45

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

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

    での脆弱性 47
  49. Vue.js は思ったより難しかった 48 • Vue.jsとは – クライアントJavaScript フレームワーク – Laravel

    にバンドルされている
  50. Vue.js は思ったより難しかった 49 • Vue.js 導入を検討 – チームメンバーはみな jQuery に慣れ親しんで

    いる – Laravel との相性は良いはず。 – 「学習コストが低い」という前評判 – 公式のガイドを見てもそんな印象 – 確かに簡単そうだ(と思ってしまった)
  51. Vue.js は思ったより難しかった • そして導入を決断! 50 クライアントサイドは すべてVue.jsで実装してね。 学習コストも低いし。

  52. Vue.js は思ったより難しかった • 導入した結果 51 JSライブラリの入力値が取れないんだけど。 jQuery なら1行で書けるのに! XSS発生しました! jQuery

    じゃないので、間に合いません。 jQuery 使っていいですか?
  53. Vue.js は思ったより難しかった 52 • 「学習コストが低い」とは言え、ちゃんと勉 強しないとダメだった • jQuery 脳からのパラダイムシフトが必要。 •

    他のライブラリと併用するにはノウハウが必 要。(jQuery、Bootstrap、他)
  54. Laravel で困ったこと • Vue.js は思ったより難しかった • Blade (SSR) + Vue.js

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

    での脆弱性 54
  56. Blade (SSR) + Vue.js での脆弱性 • ある日の後輩との会話 55 Blade+Vue.jsでXSSが簡 単に発生させれますよ!

    忙しい時期に、重大バグを 見つけてくれてありがとう。
  57. • SSR と Vue.js の組み合わせで起こる XSS サーバーでの処理 ブラウザでの処理 Blade (SSR)

    + Vue.js での脆弱性 <div id="app"> {{ $name }} </div> sample.blade.php Blade で処理 $name = “{{ alert(‘XSS') }}” <div id="app"> {{ alert(&apos;XSS&apos;) }} </div> <div id="app"> {{ alert(‘XSS’) }} </div> Vue.js が処理 <div id="app"> </div> 56 {{ … }} の中の スクリプトが実行 される! 処理済みのHTMLデータ レスポンス送信 ブラウザが読込
  58. • SSR と Vue.js の組み合わせで起こる XSS サーバーでの処理 ブラウザでの処理 Blade (SSR)

    + Vue.js での脆弱性 <div id="app"> {{ $name }} </div> sample.blade.php Blade で処理 $name = “{{ alert(‘XSS') }}” <div id="app"> {{ alert(&apos;XSS&apos;) }} </div> <div id="app"> {{ alert(‘XSS’) }} </div> Vue.js が処理 <div id="app"> </div> 57 {{ … }} の中の スクリプトが実行 される! 処理済みのHTMLデータ レスポンス送信 ブラウザが読込
  59. • SSR でユーザー入力値を Vue.js 管轄の領域 に埋め込むだけで、簡単にXSSを実装できて しまう • 開発チームでは “mustache

    injection” と呼 んでいる Blade (SSR) + Vue.js での脆弱性 58
  60. Blade (SSR) + Vue.js での脆弱性 • “mustache injection” 対策 –

    Middleware で、すべてのリクエストパラメータ をエスケープ – “{{“ や “}}” の文字間に半角空白を挿入する – 入力値が変わってしまうが、やむなし。。 59
  61. まとめ 60

  62. まとめ • フレームワークがスピード開発に役立った – ミドルウェアとの連携 – MVCの考えに沿ったソース配置 – ビジネスロジックに集中できた! •

    とくに Laravel でよかったこと – 豊富な機能 – 日本語公式ドキュメント 61
  63. まとめ • Vue.js の注意点 – SSRとの連携 – 仮想DOM と リアルDOM

    の連携 – アーキテクチャ・パターンの理解 – プロダクトで使うにはコンポーネント化が必須 – jQuery 熟練者への配慮 62
  64. まとめ • フレームワーク経験がなくても、新サービス が開発できる。Laravel があれば。 63 おわり