Single Page Application勉強会
2017.12.26 IVP神戸
本日のアジェンダ
• SPAとは
• SPAの基本構成
• SPAのメリット・デメリット
• SPAを実現する技術
• ERSにおけるSPA
• 会員登録フォームの例
• APIについて
• セキュリティあれこれ
• TMHのデモ
• Q&A
想定対象者
• SPAの概要を理解したい人
• SPAの検証をやる人
SPAとは?
・Single Page Applicationの略
DB
サーバー
ユーザー
HTML
CSS・js
画像
①リクエスト
②レスポンス
③HTML内部からAPIをコール
④APIがDB接続して処理
⑤APIレスポンス取得
⑥描画処理
基本構成図
• ①と②は最初の1回のみ
• ③~⑥は処理に応じて何度も発生する
• ページ遷移をした場合でも、③~⑥のみの処理になる
・Single Page Applicationの略
• CSSやjsファイルの取得が1回で済む
• サーバー側処理と分離がしやすい
•ページ遷移が早い
•ネイティブアプリに近い動きができる
•初期読み込み時のデータ量が多くなる
•ビジネスロジックの一部をフロントエ
ンドで実装しないといけない
•実績が少ない(=ノウハウが少ない)
•SEO対策が怪しい
•チケットの登録先を悩みそう
•APIの動きを理解しないといけないかも
•APIの検証は自動化しやすい気がする
•VEX設定にテクニックがいりそう
※個人の感想です
SPAを実現する技術
Javascriptフレームワーク
DB
サーバー
ユーザー
HTML
CSS・js
画像
①リクエスト
②レスポンス
③HTML内部からAPIをコール
④APIがDB接続して処理
⑤APIレスポンス取得
⑥描画処理
基本構成図
Javascriptフレームワーク担当範囲
API担当範囲
ちょっと技術的な話
Javascriptフレームワーク
MVCとの違い
MVCとの違い
Viewの構成(コンポーネント)
ERSにおけるSPA
ERSにおけるSPA
•ERSが提供するのは基本APIだけ
•HTMLは全てVue.jsで作成される
•ERSのルーティングは通る
会員登録の例
入力画面
確認画面
完了画面
HTML サーバー処理
画面表示
Token発行要求
Token返却
入力チェック処理
入力チェック結果返却
「次へ」を押下
「次へ」を押下 Token発行要求
Token返却
入力チェック処理
入力チェック結果返却
完了画面用Token発行要求
完了画面用Token返却
登録処理
登録結果返却
エラーの場合は
同画面でエラー
表示
エラーの場合は
同画面でエラー
表示
エラーの場合は
全画面エラー表
示
画面表示
APIについて
APIについて(ERS仕様)
•クロスドメインからも呼び出し可能(CORS)
•サイト用のキーをリクエストヘッダに持っている
•パラメータはJSONで渡す
•Methodによって挙動が変わる
•結果によってhttpレスポンスコードが変わる
セキュリティのあれこれ
•APIへのDDos攻撃は現時点で対症療法しかない
•CSRF対策はアプリの仕組みで可能
•SQLインジェクションはAPIを防げばOK
•XSSはフロント側の実装方法によって発生する
可能性がある
TMHのデモ

SPA勉強会