いまからでも遅くない！コンテナでWebアプリを動かしてみよう入門（2-2）WebAPIハンズオン

© 2024 IBM Corporation 1 いまからでも遅くない！コンテナでWebアプリを動かしてみよう入門（2-2）WebAPIハンズオン TechXchange Dojo 2024年10月22日
17時03分までマイクミュートにしてお待ちください

© 2024 IBM Corporation 2 いまからでも遅くないシリーズ •（1）Gitハンズオン •（2）WebAPIハンズオン •（3）コンテナハンズオン •（4）Reactハンズオン
•（5）データベースハンズオン •（6）コンテナオーケストレーションハンズオンコンテナオーケストレーション（OpenShift） Web サーバー API サーバー DB サーバー Gitサーバー Push Deploy PC

© 2024 IBM Corporation 3 自己紹介村田憲昭北海道北斗市スノーボード、登山、グルメ、猫
カスタマーサクセス DX人材育成/教育(IT全般) スクラムマスター半導体アプリエンジニア某コンビニのエンジニア名前生息地趣味経歴

© 2024 IBM Corporation 4 免責事項本資料に含まれる情報は可能な限り正確を期しておりますが、記載された内容に関して、日本アイ・ビー・エム株式会社が何ら保証するものではありません。従って、本資料の情報の利用は使用者の責任において
為されるものであり、資料の内容によって受けた如何なる被害に関しても一切の補償をするものではありません。アンケートのご協力よろしくおねがいいたします！各セッションに皆さんのご意見を取り入れてアップデートしていきます！ https://app.sli.do/event/pUsRNQvscV3JwpSFXnUyeo

© 2024 IBM Corporation 6 アジェンダ 1. 前回の復習 2. ハンズオンする内容の確認
3. ハンズオン！ 4. まとめ

前回の復習 1

© 2024 IBM Corporation 8 APIとは・Application Programming Interfaceの略・ソフトウェアコンポーネント同士が互いに情報をやりとりするのに使用
するインタフェースの仕様 (Wikipedia.「アプリケーションプログラミングインタフェース」. https://ja.wikipedia.org/wiki/アプリケーションプログラミングインタフェース(参照2023-03-13）) ・インタフェース：2つの異なる機器やシステム、ソフトウェア間で情報のやり取りがなされる際に、その間をつなぐ規格や機能を指す USBケーブル＝インターフェースアプリの画面＝インターフェース

© 2024 IBM Corporation 9 APIとは・さらに､HTTP/HTTPSプロトコルを利用してネットワーク越しに呼び出すものを Web APIと呼びます｡・ソフトウェアコンポーネント同士が互いに情報をやりとりするのに
使用するインタフェースの仕様実行方法と実行されるサービスがわかれば内部の処理の仕組みは知らなくても良い =APIのメリット API利用者プログラム API提供者プログラム API 内部処理リクエストレスポンスショッピングサイト決済するサイト

© 2024 IBM Corporation 10 HTTPリクエストの構造・HTTPプロトコルで定義された、Webサーバーに対してクライアントが要求を行うために使用されるコマンドのことです。・よく使われるものは以下の4つです｡ HTTPメソッド
説明使用例 GET サーバからの情報の取得ブラウザからのWebページの読み込み POST サーバへのデータ送信フォームの入力情報の送信 PUT サーバ上のデータの更新既存データの更新 DELETE サーバ上のデータの削除不要データの削除

© 2024 IBM Corporation 11 HTTPリクエスト/レスポンスの構造（JSON）・JSON（JavaScript Object Notation）は、HTTPリクエスト/レスポンスのボディの要素で使われることが多いデータ形式です｡
{ "name": "John Smith", "address": { "street": "123 Main St", "city": "Anytown” }, "phone_numbers": [ { "type": "home", "number": "555-555-1234” }, { "type": "work", "number": "555-555-5678" } ] } オブジェクト “key”: “value” の集合配列｡この例では2つのオブジェクトが要素｡

© 2024 IBM Corporation 12 ステータスコードの意味 HTTPリクエストが、正常に終了したかどうかを示すコード・情報レスポンス（100-199）・成功レスポンス（200-299）・リダイレクトメッセージ（300-399）
・クライアントエラーレスポンス（400-499）・サーバエラーレスポンス（500-599）代表的なステータスコード： 200：OK リクエストが正常に終了した 404：Not Found リクエストのURLが解釈できなかった

© 2024 IBM Corporation 13 RESTful APIの基本原則・シンプルなWebシステムの設計思想のこと REST（REpresentational State
Transfer） RESTの４原則：・統一インターフェース・アドレス可能性・接続性・ステートレス性

© 2024 IBM Corporation 14 RESTful APIの基本原則 https://xxxx.comへ「/xxx/xx」の情報をリクエストしますリンクを含んだ情報も返せます Webクライアント
統一インターフェース HTTP アドレス可能性 URI 接続性さっきの情報をもう一度欲しいさっきの情報はもう分かりませんステートレス性サービス（プログラム） REST

© 2024 IBM Corporation 15 RESTful APIを利用する・RESTful APIを利用するにあたって 1.
リソースの決定： APIの利用者が、どのようなリソースを必要とするのか 2. リソースの操作法を確認対象のリソースで、どのような操作ができるかリソースに必要な操作を、HTTPメソッドやURIなどで表現し、HTTPリクエストを発行 HTTPメソッド説明使用例 GET サーバからの情報の取得ブラウザからのWebページの読み込み POST サーバへのデータ送信フォームの入力情報の送信 PUT サーバ上のデータの更新既存データの更新 DELETE サーバ上のデータの削除不要データの削除

ハンズオンする内容の確認 2

© 2024 IBM Corporation 17 開発環境説明 ▼開発環境 • VSCode •
TypeScript • Node.js ▼準備 • VSCode • VSCode拡張機能「Postman」 • Node.js（最新版） • 以下コマンドでインストール $ mkdir sample-api $ cd sample-api $ npm install express –save $ npm install helmet --save $ npm install cors --save $ npm install body-parser --save $ npm install moment --save $ npm install -D typescript @types/node $ npm install -D @types/express @types/helmet @types/cors $ npm install -D ts-node ts-node-dev

© 2024 IBM Corporation 18 ゴール ▼以下APIを作成する GET /helloworld {
"message": "hello, world" } GET /testquery?position=Hokkaido { "message": "Hello, world query=Hokkaido" } GET /testparam/Murata { "message": "Hello, world param=Murata" }

ハンズオン 3

© 2024 IBM Corporation 20 ハンズオンでやらないこと細かい仕様の説明はしません（特にライブラリの説明） ↓ 今回はWebAPIの基本的な
動きを学ぶため

© 2024 IBM Corporation 22 システム全体図 API利用者プログラム API提供者プログラム
API 内部処理 /helloworld レスポンス GET

© 2024 IBM Corporation 23 ハンズオン $ cd sample-api $
npx tsc --init // TypeScript準備 $ code . // エディタ起動ここからはVSCodeでの作業になります。

© 2024 IBM Corporation 25 ハンズオン ▼「Hello World」という文字が返ってくるWebAPIを作成 ➀ファイルの作成（app.ts） ➁ソースコードを貼り付け
import express from 'express'; import helmet from 'helmet'; import cors from 'cors'; const app = express(); app.use(helmet()); app.use(cors()); const bodyParser = require('body-parser'); app.use(bodyParser.urlencoded({ extended: true })); app.use(bodyParser.json()); const port = process.env.PORT || 3000; app.get('/helloworld', (req, res) => { res.status(200).send({ message: ‘hello, world ＜好きな文字＞' }); }); app.listen(port); console.log('listen on port ' + port); 自分の好きな文字に変更してください

© 2024 IBM Corporation 26 ハンズオン import express from 'express';
import helmet from 'helmet'; import cors from 'cors’; const app = express(); app.use(helmet()); app.use(cors()); const bodyParser = require('body-parser'); app.use(bodyParser.urlencoded({ extended: true })); app.use(bodyParser.json()); const port = process.env.PORT || 3000; app.get('/helloworld', (req, res) => { res.status(200).send({ message: 'hello, world murata' }); }); app.listen(port); console.log('listen on port ' + port); プログラムの中で使用する機能（ライブラリ）を呼び出す上記で呼び出した機能を使用するための準備 API本体の処理を記述プログラムを起動するための処理 ➂解説 1 2 3 4

© 2024 IBM Corporation 27 ハンズオン ➃ターミナルを表示 ⑤ターミナルで以下コマンドを実行＄ npx
ts-node-dev app.ts ⑥「listen on port 3000」となればOK ▼実際に動かしてみよう

© 2024 IBM Corporation 28 ハンズオン ⑦postmanを起動 ⑧New HTTP Requstボタンをクリック
⑨「GET」の横の記入欄に localhost:3000/helloworld

© 2024 IBM Corporation 29 ハンズオン ⑩「SEND」をクリック ⑪以下のような表示になればOK！私の場合は「”message”:”hello,
world murata”」となる

© 2024 IBM Corporation 31 パラメーターとは？クライアント → サーバーに対して、データを渡すやり方種類としては・・・
・クエリーパラメーター・パスパラメーター・ボディパラメーター・ヘッダーパラメーターがある

API 内部処理 /testquery?position=Hokkaido レスポンスクエリーパラメーター「Hokkaido」 GET

© 2024 IBM Corporation 33 ハンズオン ➀app.tsを開く ➁メイン処理とサーバー起動の間に以下コードを追記 // クエリーパラメーター
app.get('/testquery', (req, res) => { console.log(req.query.position) res.status(200).send({ message: 'Hello, world query=' + req.query.position }); });

© 2024 IBM Corporation 35 ハンズオン ⑤ターミナルを表示 ⑥ターミナルで以下コマンドを実行＄ npx
ts-node-dev app.ts ⑦「listen on port 3000」となればOK ▼実際に動かしてみよう再掲

© 2024 IBM Corporation 36 ハンズオン ⑧postmanを起動 ⑨New HTTP Requstボタンをクリック
⑩「GET」の横の記入欄に localhost:3000/testquery? position=Tokyo

API 内部処理 /testparam/Murata レスポンスパスパラメーター「Murata」 GET

© 2024 IBM Corporation 40 ハンズオン ➀app.tsを開く ➁クエリーパラーメーターとサーバー起動の間に以下コードを追記 // パスパラメーター
app.get('/testparam/:name', (req, res) => { console.log(req.params.name) res.status(200).send({ message: 'Hello, world param=' + req.params.name }); });

© 2024 IBM Corporation 42 ハンズオン ⑤ターミナルを表示 ⑥ターミナルで以下コマンドを実行＄ npx
ts-node-dev app.ts ⑦「listen on port 3000」となればOK ▼実際に動かしてみよう再掲

まとめ 4

次回予告！！

いまからでも遅くない！コンテナでWebアプリを動かしてみよう入門（2-2）WebAPIハンズオン

いまからでも遅くない！コンテナでWebアプリを動かしてみよう入門（2-2）WebAPIハンズオン

More Decks by NoMu

Other Decks in Technology

Featured

Transcript