SPA勉強会

1. Single Page Application勉強会
2017.12.26 IVP神戸

2. 本日のアジェンダ
• SPAとは
• SPAの基本構成
• SPAのメリット・デメリット
• SPAを実現する技術
• ERSにおけるSPA
• 会員登録フォームの例
• APIについて
• セキュリティあれこれ
• TMHのデモ
• Q&A

3. 想定対象者
• SPAの概要を理解したい人
• SPAの検証をやる人

4. SPAとは？

5. ・Single Page Applicationの略

7. DB
サーバー
ユーザー
HTML
CSS・js
画像
①リクエスト
②レスポンス
③HTML内部からAPIをコール
④APIがDB接続して処理
⑤APIレスポンス取得
⑥描画処理
基本構成図
• ①と②は最初の１回のみ
• ③～⑥は処理に応じて何度も発生する
• ページ遷移をした場合でも、③～⑥のみの処理になる

8. ・Single Page Applicationの略

9. • CSSやjsファイルの取得が１回で済む
• サーバー側処理と分離がしやすい
•ページ遷移が早い
•ネイティブアプリに近い動きができる

10. •初期読み込み時のデータ量が多くなる
•ビジネスロジックの一部をフロントエ
ンドで実装しないといけない
•実績が少ない（＝ノウハウが少ない）
•SEO対策が怪しい

11. •チケットの登録先を悩みそう
•APIの動きを理解しないといけないかも
•APIの検証は自動化しやすい気がする
•VEX設定にテクニックがいりそう
※個人の感想です

12. SPAを実現する技術

13. Javascriptフレームワーク

14. DB
サーバー
ユーザー
HTML
CSS・js
画像
①リクエスト
②レスポンス
③HTML内部からAPIをコール
④APIがDB接続して処理
⑤APIレスポンス取得
⑥描画処理
基本構成図
Javascriptフレームワーク担当範囲
API担当範囲

15. ちょっと技術的な話

16. Javascriptフレームワーク

17. MVCとの違い

18. MVCとの違い

19. Viewの構成（コンポーネント）

20. ERSにおけるSPA

21. ERSにおけるSPA
•ERSが提供するのは基本APIだけ
•HTMLは全てVue.jsで作成される
•ERSのルーティングは通る

22. 会員登録の例

23. 入力画面
確認画面
完了画面
HTML サーバー処理
画面表示
Token発行要求
Token返却
入力チェック処理
入力チェック結果返却
「次へ」を押下
「次へ」を押下 Token発行要求
Token返却
入力チェック処理
入力チェック結果返却
完了画面用Token発行要求
完了画面用Token返却
登録処理
登録結果返却
エラーの場合は
同画面でエラー
表示
エラーの場合は
同画面でエラー
表示
エラーの場合は
全画面エラー表
示
画面表示

24. APIについて

25. APIについて（ERS仕様）
•クロスドメインからも呼び出し可能(CORS)
•サイト用のキーをリクエストヘッダに持っている
•パラメータはJSONで渡す
•Methodによって挙動が変わる
•結果によってhttpレスポンスコードが変わる

26. セキュリティのあれこれ
•APIへのDDos攻撃は現時点で対症療法しかない
•CSRF対策はアプリの仕組みで可能
•SQLインジェクションはAPIを防げばOK
•XSSはフロント側の実装方法によって発生する
可能性がある

27. TMHのデモ