自動テストチュートリアル

Playwright、Seleniumなどの自動テストツールを学ぼう

APIの活用

🍽️ システムの「ウェイターさん」
注文を受け取り、厨房に伝え、料理を届けてくれる窓口

プログラミング基礎編の最後に、少し応用的ですが非常に強力な概念**「API（エーピーアイ）」**について学びましょう。

「API（Application Programming Interface）」という言葉だけ聞くと、難しそうに感じるかもしれません。でも、その役割は身近なものに例えると、とても分かりやすくなります。

APIを一番うまく説明できる例え

👨‍🍳 🍽️ 🧑‍🍳
レストランのウェイターさん
レストランに行ったときのことを想像してください。

このとき、皆さまは厨房の中に入って、料理人に直接「肉をこねて、焼いてください」とは言いませんよね。
メニューを見て、ウェイターさんに「ハンバーグを一つお願いします」と注文するだけのはずです。
このウェイターさんの役割、つまり
「注文（リクエスト）を受け取り、決められたルールに従って
厨房（システム）に伝え、結果（レスポンス）を返してくれる窓口」
これこそが API なのです。

書き方と具体例

この課題では、APIを直接操作する複雑なコードを書く必要はありません。

郵便番号API、天気API、ポケモンAPIとのやり取りは、すべて helpers() という、この教材で特別に用意された「便利な道具箱」の中に整理されています。

この道具箱から目的の道具を取り出して、お願いごとを伝えるだけで、APIを簡単に利用できます。

基本的な使い方

await helpers().[道具の名前].api.[お願いごと]("伝えたい情報")

具体例

// 郵便番号API：郵便番号 "1008606" の住所を取得する
const address = await helpers().zipcode.api.getAddress("1008606");

// ポケモンAPI：ポケモン名 "pikachu" の詳細情報を取得する
const pokemon = await helpers().pokemon.api.getPokemonDetails("pikachu");
このように、APIごとに違う複雑なルールを覚える必要はありません。
私たちは、それぞれの「専用窓口」に、決められた情報を渡すだけで、欲しい結果を受け取ることができるのです。

体験できるAPIの紹介

APIは、企業から個人の開発者まで、世界中の人々が便利な機能を無料で公開・提供しています。

この教材では、その中から3種類のAPIを、簡単な命令で呼び出せるように用意してあります。APIは非常に便利で面白いものなので是非遊んでみてください。

📮 郵便番号API（提供：日本郵便）

郵便番号を渡すと、対応する住所（都道府県や市区町村など）を返してくれます。日本の公的機関が提供している、非常に信頼性の高いAPIの代表例です。

// 郵便番号API：郵便番号 "1008606" の住所を取得する
const address = await helpers().zipcode.api.getAddress("1008606");
console.log("郵便番号から取得した住所:", address);

☀️ 天気予報API（提供：気象庁）

各地域の都市コードを渡すと、最新の天気予報を取得できます。日々のニュースなどでも利用されている、公式データにアクセスできる便利なAPIです。

// 天気API：都市コード "130010" (東京) の天気予報を取得する
const weather = await helpers().weather.api.getWeather("130010");
console.log("東京の天気:", weather);

👾 ポケモンAPI（提供：コミュニティ有志）

APIは企業や公的機関だけのものではありません。世界中のファンや開発者が、楽しみながら作ったユニークなAPIをたくさん公開しています。

その代表例として、ポケモンの名前（英語）を渡すと、その詳細データを返してくれるAPIを試してみましょう。

// ポケモンAPI：ポケモン名 "pikachu" の詳細情報を取得する
const pokemon = await helpers().pokemon.api.getPokemonDetails("pikachu");
console.log("ピカチュウの情報:", pokemon);

自動テストでの使い方

自動テストにおいて、APIは主にテストデータの準備（作成）や後片付けを、高速かつ安定的に行うための「秘密兵器」として使われます。

例えば、「ログイン機能」をテストするために、まず「テスト用ユーザー」を1人作成する場合を比べてみましょう。

👎 UI操作での準備
画面を開き、フォームを入力してボタンをクリック…。

ページの表示を待つため遅く、デザイン変更で壊れやすいのが欠点です。
👍 APIでの準備
システムの裏側に直接「ユーザーを作って」とお願いを送ります。

画面を介さないため一瞬で終わり、見た目の変更にも影響されません。
UI操作が「レストランの正面玄関」なら、APIは「厨房直通の裏口」です。
テストの準備は、この裏口を使った方が圧倒的に効率的で、信頼性の高いテストを実現できます。
おそらくQAエンジニアが作成したものを利用する形になると思うので、ご自身で実装することはないかと思います。ですが簡単に作成できるので興味があればどんどんチャレンジしてください。

やってみよう

「API」が、実際にどのようにデータを返してくれるのかを体験してみましょう。

用意された3つのAPI（郵便番号、天気、ポケモン）に、様々な「注文（リクエスト）」を送り、返ってくる「料理（レスポンス）」がどう変わるのかを観察します。

演習ファイル

tests/document-4/lesson-05.spec.ts

手順動画

進め方

  1. 演習ファイルを開き、まずは何も変更せずにテストを実行してください。3つのAPIから、それぞれどんな情報が返ってくるか、コンソールの console.log の結果を確認しましょう

  2. 次に、コードの中の引数（getAddress("...")やgetPokemonDetails("...")の"..."部分）を、好きな値に変えてみましょう

    • 郵便番号API： 自宅や会社の郵便番号を入れてみましょう
    • ポケモンAPI： "pikachu"を"eevee"や"snorlax"など、他のポケモンの名前に変えてみましょう（※英語で入力）

  3. 再度テストを実行し、コンソールに表示される結果がどのように変わったかを確認してください

APIのパラメータの種類

ちなみに、今回は「この料理を見せてください」という**GET（取得）**の注文をしましたが、他にも様々なお願いの仕方があります。

GET
「この料理を見せてください」（取得）
POST
「新しいメニューを追加してください」（作成）
DELETE
「今日のランチをキャンセルしてください」（削除）
PUT / PATCH
「付け合わせをポテトからサラダに変えてください」（更新）

このタブで覚えておいてほしいこと

ここで押さえてほしいのは「APIとは何か」と「APIの使い方」です
最近ではテストシナリオには関係ない、テストデータ作成をAPIで行うケースが増えています。

実際の現場に入ると「その処理はAPIでやって！」と指示されることがあるかもしれません。

そんなときに「API？なんだか怖い…」ではなく、
「会社がデータ登録を楽にするためにAPIを用意してくれてるんだ！ラッキー！」
と前向きに思えるようになってほしく、このAPIを紹介しました。
目次に戻る