いまからでも遅くない！ コンテナでWebアプリケーションを 動かしてみよう（2-1）WebAPI座学

本資料は以下リンクにある2024年9月30日に開催した資料になります。
https://ibm-developer.connpass.com/event/328932/

Transcript

1. © 2024 IBM Corporation 1 いまからでも遅くない！コンテナでWebアプリケーションを 動かしてみよう入門（2-1）WebAPI座学 TechXchange Dojo 2024年9月30日
2. © 2024 IBM Corporation 2 いまからでも遅くないシリーズ •（1）Gitハンズオン •（2）WebAPIハンズオン •（3）コンテナハンズオン •（4）Reactハンズオン •（5）データベースハンズオン •（6）コンテナオーケストレーションハンズオン コンテナオーケストレーション（OpenShift） Web サーバー API サーバー DB サーバー Gitサーバー Push Deploy PC
3. © 2024 IBM Corporation 3 自己紹介 村田 憲昭 北海道北斗市 スノーボード、登山、グルメ、猫 カスタマーサクセス DX人材育成/教育(IT全般) スクラムマスター 半導体アプリエンジニア 某コンビニのエンジニア 名前 生息地 趣味 経歴
4. © 2024 IBM Corporation 4 免責事項 本資料に含まれる情報は可能な限り正確を期しておりますが、 記載された内容に関して、日本アイ・ビー・エム株式会社が 何ら保証するものではありません。 従って、本資料の情報の利用は使用者の責任において 為されるものであり、資料の内容によって受けた 如何なる被害に関しても一切の補償をするものではありません。
5. © 2024 IBM Corporation 5 対象者と目的 • WebAPIという言葉を聞いたことがあるけど、何かを知らない方 • WebAPIをこれから学んでいきたい方 WebAPIとは何か、またWebAPIに関連する内容も理解でき、これから 自身で学習を進められるようになる 対象者 目的
6. © 2024 IBM Corporation 6 アジェンダ 1. Web APIとは何か 2. HTTPプロトコルの基礎 3. RESTful APIの基礎 4. 次回ハンズオンする内容のデモ 5. まとめ
7. Web APIとは何か 1
8. © 2024 IBM Corporation 8 APIとは ・Application Programming Interfaceの略 ・ソフトウェアコンポーネント同士が互いに情報をやりとりするのに使用 するインタフェースの仕様 (Wikipedia.「アプリケーションプログラミングインタフェース」. https://ja.wikipedia.org/wiki/アプリケーションプログラミングインタフェース(参照2023-03-13）) ・インタフェース：2つの異なる機器やシステム、ソフトウェア間で情報の やり取りがなされる際に、その間をつなぐ規格や機能を指す USBケーブル ＝ インターフェース アプリの画面 ＝ インターフェース
9. © 2024 IBM Corporation 9 APIとは ・さらに､HTTP/HTTPSプロトコルを利用してネットワーク越しに呼び出すものを Web APIと呼びます｡ ・(再掲)ソフトウェアコンポーネント同士が互いに情報をやりとりするのに 使用するインタフェースの仕様 実行方法と実行されるサービスがわかれば 内部の処理の仕組みは知らなくても良い =APIのメリット API利用者 プログラム API提供者 プログラム API 内部処理 リクエスト レスポンス ショッピングサイト 決済するサイト
10. © 2024 IBM Corporation 10 Web APIを利用するメリット・デメリット [メリット] ・自サービスの利便性の向上 ・低コストで機能が追加可能 [デメリット] ・仕様変更や有料化､障害といった提供者側への依存の可能性 (アンドエンジニア.「 Web APIとは？仕組みや使い方、メリットをわかりやすく解説！ 」. https://and-engineer.com/articles/Yw14sRAAACIA5tW0#heading2- 3(参照2023-03-13）)
11. © 2024 IBM Corporation 11 なぜAPIが注目されているか 「APIエコノミー」 Web APIを公開することで外部サービスとの連携を容易にして新たな価値が生まれ､サービスやビ ジネスが発展していくこと (水野貴明.「1.1.3 APIエコノミー」. 『Web API The Good Parts』. オライリー・ジャパン, 2014, p.7) 身近な例：Google Map レストラン評価サイトに、地図が埋め込まれている Programmable Web(世界的なAPIディレクトリのサイト)のファウンダーのJohn Musserは､APIの 公開はさまざまなサービスが相互に連携しつつ形成するサービスのエコシステムの中で”接着剤”の 働きをすると述べたといいます｡ (水野貴明.「1.3.2 APIを公開することで得られるもの」. 『Web API The Good Parts』. オライリー・ジャパン, 2014, p.13) サービスを公開する力を持った開発者にAPIを公開することで､彼らがサービスに付加価値を与え てくれ､コアとなる自分たちのサービスがより発展する力をもらうことができる｡ (水野貴明.「1.1 Web APIの重要性」. 『Web API The Good Parts』. オライリー・ジャパン, 2014, p.4)
12. © 2024 IBM Corporation 12 Web APIの種類 主要なWeb API ・RESTful API ・SOAP API ・GraphQL など
13. HTTPプロトコルの基礎 2
14. © 2024 IBM Corporation 14 HTTPプロトコルの概要 ・HTTP(Hypertext Transfer Protocol)とは、WebサーバとWebブラウザの間で、 Web情報をやり取りするためのプロトコル (通信規則) ・HTTPの特徴：動作がシンプル Webブラウザが要求（HTTPリクエスト）を出し、サーバが応答（HTTPレスポンス） を返します。この1つの要求には、1つの応答を返すルールになっています。 ①Webサーバに要求（HTTPリクエスト）を送る ②要求の処理を実行 ③処理結果の応答（HTTPレスポンス）を返す Webブラウザ Webサーバ
15. © 2024 IBM Corporation 15 POST /api/users HTTP/1.1 Host: example.com Content-Type: application/json Authorization: Bearer abcdefg1234567890 { "name": "John Doe", "email": "johndoe@example.com", "password": "secret" } HTTPリクエストの構造 HTTPリクエストは、クライアントがWebサーバに送信する情報のこと。 「リクエストライン、ヘッダ、ボディ」の要素で構成されています。 [HTTPリクエスト構成のサンプル] リクエストライン：HTTPメソッド､URI､プロトコル ヘッダ：HTTPリクエストのメタデータ ボディ：リクエストのデータ 例はJSON形式(後述)ですが､XMLなどその他形式である場合 もあります｡
16. © 2024 IBM Corporation 16 HTTPリクエストの構造 ・HTTPプロトコルで定義された、Webサーバーに対してクライアントが要求を行 うために使用されるコマンドのことです。 ・よく使われるものは以下の4つです｡ HTTPメソッド 説明 使用例 GET サーバからの情報の取得 ブラウザからのWebページの読み込み POST サーバへのデータ送信 フォームの入力情報の送信 PUT サーバ上のデータの更新 既存データの更新 DELETE サーバ上のデータの削除 不要データの削除
17. © 2024 IBM Corporation 17 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つのオブジェクトが要素｡
18. © 2024 IBM Corporation 18 ステータスコードの意味 HTTPリクエストが、正常に終了したかどうかを示すコード ・情報レスポンス（100-199） ・成功レスポンス（200-299） ・リダイレクトメッセージ（300-399） ・クライアントエラーレスポンス（400-499） ・サーバエラーレスポンス（500-599） 代表的なステータスコード： 200：OK リクエストが正常に終了した 404：Not Found リクエストのURLが解釈できなかった
19. RESTful APIの基礎 3
20. © 2024 IBM Corporation 20 RESTful APIの基本原則 ・シンプルなWebシステムの設計思想のこと REST（REpresentational State Transfer） RESTの４原則： ・統一インターフェース ・アドレス可能性 ・接続性 ・ステートレス性
21. © 2024 IBM Corporation 21 RESTful APIの基本原則 ・統一インターフェース 「あらかじめ定義・共有された方法」で、やりとりすること ・アドレス可能性 「すべての情報が、一意のURI(Uniform Resource Identifier)をもち、 提供する情報もURIで表現できる」こと ・接続性 「接続されているもの同士は、相互にリンク」していること ・ステートレス性 「状態を維持する仕組みを保持」しないこと
22. © 2024 IBM Corporation 22 RESTful APIの基本原則 https://xxxx.comへ「/xxx/xx」の情報をリクエストします リンクを含んだ情報も返せます Webクライアント 統一インターフェース HTTP アドレス可能性 URI 接続性 さっきの情報をもう一度欲しい さっきの情報はもう分かりません ステートレス性 サービス（プログラム） REST
23. © 2024 IBM Corporation 23 RESTful APIを利用する ・RESTful APIを利用するにあたって 1. リソースの決定： APIの利用者が、どのようなリソースを必要とするのか 2. リソースの操作法を確認 対象のリソースで、どのような操作ができるか リソースに必要な操作を、HTTPメソッドやURIなどで表現し、HTTPリクエストを発行 HTTPメソッド 説明 使用例 GET サーバからの情報の取得 ブラウザからのWebページの読み込み POST サーバへのデータ送信 フォームの入力情報の送信 PUT サーバ上のデータの更新 既存データの更新 DELETE サーバ上のデータの削除 不要データの削除
24. 次回ハンズオンする内容のデモ 4
25. © 2024 IBM Corporation 25 開発環境説明 ▼開発環境 • VSCode • TypeScript • Node.js ▼準備 • VSCode • VSCode拡張機能「Postman」 • Node.js（最新版） • 以下コマンドでインストール $ 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
26. © 2024 IBM Corporation 26 ゴール ▼以下APIを作成する GET /helloworld { "message": "hello, world" } GET /testquery?position=Hokkaido { "message": "Hello, world query=Hokkaido" } GET /testparam/Murata { "message": "Hello, world param=Murata" }
27. © 2024 IBM Corporation 27 デモ
28. まとめ 5
29. © 2024 IBM Corporation 29 まとめ ・API(Application Programming Interface) ソフトウェアコンポーネント同士が互いに情報をやり取りするのに使用するインターフェースの仕様 ・WebAPIと種類 WebAPIとは、HTTP/HTTPSプロトコルを介して、ネットワーク越しに呼び出すAPI 種類：RESTful API、SOAP API、GraphQL ・HTTP(Hypertext Transfer Protocol) WebサーバとWebブラウザの間で、Web情報をやり取りするためのプロトコル（通信規則） ・HTTPリクエスト クライアントからWebサーバに送信する情報のこと。「リクエストライン、ヘッダ、ボディ」の要素で構成 WebAPIを呼び出す際に使用
30. © 2024 IBM Corporation 30 まとめ ・REST RESTの４原則に基づき、シンプルにアクセス、連携できる思想 「統一インターフェース、アドレス可能性、接続性、ステートレス性」 ・RESTful API RESTful APIは、RESTの４原則に基づいたWebAPI ・RESTful APIの使用 ①リソースを決定し、②リソースの操作法を確認（APIドキュメント）、 ③リソースの呼び出し（HTTPリクエスト）
31. © 2024 IBM Corporation 31 Q＆A & A
32. © 2024 IBM Corporation 32