今回は、サーバーサイドエンジニアにとって役立つ簡易ツールを紹介します。
API のリクエストを検証するツールは、 Postman や Advanced Rest Client といったアプリケーションが世の中に存在しますね。
(参考)Postman
しかし、会社の規定によってそのようなツールが利用できない場面も多々あるでしょう。
そこで、本記事では、ローカル環境ですぐに利用できる APIリクエストのテストツールの実装を紹介します。
コードはコピペで利用できるので、是非ご利用ください。
使用する技術について
JavaScript(jQuery), HTML, CSS を用いて実装します。
他にライブラリ等も利用しないので、完全にローカルで動作する設計にしています。
実装後の画面イメージ

リクエスト時の情報を設定の上、「送信」を押すとレスポンスが表示される仕組みになっています。
APIリクエストテスターの仕様
APIリクエストテスターは、開発者が簡単にAPIリクエストを送信し、レスポンスを確認できるツールです。
ユーザーはURL、HTTPメソッド、ヘッダー、リクエストボディを入力し、送信ボタンをクリックするだけでAPIリクエストが送信され、結果が表示されます。
このツールは、APIの動作確認やデバッグに役立ちます。

APIのリクエストにおける確認に必要な最低限の項目は用意しているつもりです。
APIリクエストテスターのコード
HTML:index.html
CSS:api-request-tester.css
JavaScript:api-request-tester.js
JavaScript:コードの解説
このJavaScriptコードは、APIリクエストテスターの主要な機能を実現するためのものです。
コードのポイントを簡潔に解説します。
sendApiRequest()
関数: APIリクエストを送信する主要な関数です。フォームから入力値(URL、HTTPメソッド、ヘッダー、リクエストボディ)を取得し、jQueryの$.ajax()
メソッドを使ってAPIリクエストを送信します。- 成功時の処理: APIリクエストが成功した場合、
success
コールバック関数が実行され、レスポンスデータを整形して表示します。 - エラー時の処理: APIリクエストが失敗した場合、
error
コールバック関数が実行され、エラーメッセージが表示されます。 - イベントリスナーの設定:
$(document).ready()
を使って、ページが読み込まれた後にイベントリスナーを設定します。これにより、送信ボタンがクリックされたときにsendApiRequest()
関数が実行されます。
このコードにより、APIリクエストテスターはユーザーが入力した情報を元にAPIリクエストを送信し、結果を表示する機能を提供します。

$.ajax() はよく使うと思うので、コピペ元としてもご利用ください。
使い方
上記の HTML, CSS, JavaScript のファイルを同じディレクトリに配置します。
HTMLをブラウザで開く、もしくはブラウザのタブに Drag & Drop すれば、利用可能です。
おわりに
自由にツールが利用できる環境であれば問題ないのですが、セキュリティが厳しい会社だと苦労しますよね。
そのような時に、ローカルで動かすツールを作成できるスキルは重宝すると思います。
是非、その元ネタとしてご活用いただければと思います。
コメント