⑤ レスポンスを
API Gateway
に渡す⑥ レスポンスを クライアントに返す
⑦ APIのレスポンスを受け取り 画面を再描画
５．Webアプリケーションの開発
処理フロー図
例：研修実績登録時
Lambda
I/F
実績登録ロジック 実績
テーブル DynamoDB
ユーザ ブラウザ
・入力値のバリデーション
・システムプロパティ作成
① 実績を入力し、
登録ボタンをクリック
② APIに対してリクエスト ③対応する
Lambda
関数 が実行される④
DynamoDB
に 実績データを挿入⑤ レスポンスを
API Gateway
に渡す⑥ レスポンスを クライアントに返す
⑦ APIのレスポンスから 非同期で画面を再描画
シンプルな
REST APIを実装 {
statusCode: 200, data: { … }
}
データを
JSON
を返すAPI Gateway
Copyright © 2018 EXA CORPORATION
処理フロー図
例：研修実績登録時
API Gateway
Lambda
I/F
実績登録ロジック 実績
テーブル Dynamo DB
ユーザ ブラウザ
・入力値のバリデーション
・システムプロパティ作成
① 実績を入力し、
登録ボタンをクリック
② APIに対してリクエスト ③対応する
Lambda
関数 が実行される④
DynamoDB
に 実績データを挿入⑤ レスポンスを
API Gateway
に渡す⑥ レスポンスを クライアントに返す
⑦ APIのレスポンスを受け取り 画面を再描画
登録ボタンクリック前
登録ボタンクリック後
５．Webアプリケーションの開発
React.js について
• A JavaScript library for building user interfaces
–
引用：https://facebook.github.io/react/
• コンポーネント単位で実装
• コンポーネントとは、 UI 部品の見た目と振る舞いをセッ トにしたもの
– 例：ボタンとクリック時のイベントハンドラ
• コンポーネントと DOM は 1 ： 1 対応
– DOM の粒度は実装者が決定
Copyright © 2018 EXA CORPORATION
どの粒度でコンポーネントを分割すべき？
React.js で実装してみての気づき ①
資料を作る 追加
部屋の掃除をする 本を買う
✔
メールを返す
UI 部品 (DOM) は全て「コンポーネント」
粒度を小さくすれば再利用性の高いコンポーネントを作れるが、コンポーネント間の包含 関係が複雑になる
最初は大きい粒度で実装した方がやりやすい ( コンポーネント分割は後からでも可能 )
５．Webアプリケーションの開発
React.js で実装してみての気づき ②
値の状態を管理
(React.js
アプリのモデル) ...
this.state = { name: ‘Tomita’
} ...
render(
return(<p>Hello,{this.state.name}</p>);
);
画面上で「
Hello,Tomita
」と表示されるstate
の値に変更があると必要最低限のDOM
のみ再描画されるReact.js は「 state と画面表示を同期してくれるライブラリ」と言える state設計が大切
今後の機能追加・修正も見据えてstateを設計しておくと、
仕様変更に強いコードになる
Copyright © 2018 EXA CORPORATION
テスト手法
テスト種類 テスト内容 使用
lib
自動化UT
(
クライアント側)
●
実装したコンポーネントの動きをテスト●
コンポーネントが問題なく作られるかどうか、コンポーネント中の要素 がクリックされた時の動きを仮想的にシミュレートするEnzyme ○
ITa
● APIにリクエストして期待のレスポンスが返ってくるか、 AWSの結合テ
スト
● Ajax
でAPI
にリクエストを送るコードを書き、テストする- ○
ITb
●
ブラウザ上からのE2E
テスト● Headless Chrome
を自動操作してテストするPuppeteer ○
ST
●
ブラウザ上から手動でテスト●
システムエラーを起こしてみてちゃんとハンドリングできているか確認-
-５．Webアプリケーションの開発
Enzyme
• React.js 用テストユーティリティライブラリ
• React.js コンポーネントの処理を画面に描画せずとも 仮想的にシミュレートできる
– 対象のコンポーネントが生成されたかどうか
– コンポーネント中の要素がクリックされた時に正しくイベント ハンドラが動作するか
– 子コンポーネントが生成されたかどうか 等
Copyright © 2018 EXA CORPORATION
Puppeteer
• Google Chrome を制御するライブラリ
• Headless Chrome も制御可能
• Selenium とは違い Google Chrome 以外は動かせない
• DOM が生成される / 削除されるまで処理を待機させる 事が可能のため Single Page Application と相性が良 い
５．Webアプリケーションの開発
目次
1. はじめに
2. 研修実績管理システムの概要 3. AWS Lambda を利用した開発 4. チャットボットの開発
5. Web アプリケーションの開発 6. アクセス制御と認証
7. CI/CD 実現のためのポイント 8. おわりに
※本資料に記載されているロゴ、システム名称、 企業名称、製品名称は各社の登録商標または商標です。
Copyright © 2018 EXA CORPORATION