NASAのAPIを使用して、Webアプリを作ってみよう
API（Application Programming Interface）は、アプリケーション同士が情報をやり取りするための「窓口」や「約束ごと」です。Webサービスが提供するデータや機能を、他のアプリやWebページからリクエスト（要求）して利用することができます。
-
リクエストの送信
Webアプリやプログラムから、APIのURL（エンドポイント）に特定の形式でリクエスト（要求）を送ります。
例：NASAの今日の宇宙画像を取得したい場合、https://api.nasa.gov/planetary/apod?api_key=あなたのAPIキー -
サーバーがデータを用意
NASAのサーバーは、そのリクエスト内容をもとにデータ（画像や説明文など）を用意します。 -
レスポンスとして返す
準備したデータを「レスポンス」として、リクエスト元（あなたのWebアプリなど）に返します。
データは多くの場合、JSON形式で届きます。 -
アプリ側でデータを使う
受け取ったデータをもとに、画像を表示したり、説明文を画面に出したりします。
- 新しいデータや機能を簡単に追加できる
- 最新の情報をリアルタイムで取得できる
- 難しい処理やデータ管理を自分でしなくて済む
Webアプリを作成するために、以下の環境を整えましょう。
- パソコン（Windows, MacどちらでもOK）
- インターネット接続
- ブラウザ（Google Chromeなど）
- エディタ（Visual Studio Codeなど推奨）
特別なソフトウェアのインストールは不要ですが、HTMLファイルを編集できるエディタがあると便利です。
このチュートリアルのサンプルコードはGitHubで公開されています。リポジトリを自分のパソコンにダウンロード（クローン）しましょう。
- GitHubのリポジトリページ（https://github.com/meo0/nasaapi-webtutorial）を開く
- 「Code」ボタンをクリックし、「HTTPS」を選択
- 表示されたURLをコピー
- ターミナル（コマンドプロンプト）で、保存したいフォルダに移動して以下を実行
git clone https://github.com/meo0/nasaapi-webtutorial.git- クローンが完了したら、エディタでフォルダを開きましょう。
NASAのAPIを利用するためには、APIキーが必要です。以下の手順で取得しましょう。
- NASA APIの公式サイト（https://api.nasa.gov/）にアクセス
- 「Sign Up」をクリックして必要事項を入力
- メールアドレスにAPIキーが届くので、コピーして
home.htmlの該当する部分をおきかえる。
このAPIキーを使って、NASAのデータを取得できるようになります。
クローンしたプロジェクトには、NASAのAPIを使用するサンプルコードが含まれています。ここでは主なポイントを説明します。
-
HTMLファイル
ブラウザで表示される画面やボタン、画像表示エリアなどのレイアウトが記述されています。 -
JavaScript部分
<script>タグで囲まれた部分がJAVASCRIPTで書かれたコードです。 NASA APIへリクエストを送り、取得したデータ（画像や説明文）をHTMLに反映させています。
例えば、fetch()という関数を使ってAPIにアクセスし、レスポンスの内容を画像として表示しています。 -
APIキーの入力箇所
プロジェクト内でYOUR_API_KEYなどの形で記載されている部分に、自分の取得したAPIキーを入力してください。 -
エラー処理
APIキーが間違っていたり、通信に失敗した場合のエラーメッセージ表示も確認できます。
コードの詳細は各ファイルのコメントや、実際に編集しながら動作を確認すると理解が深まります。
クローンしたプロジェクトの中にあるHTMLファイルをエディタで開き、APIキーを入力する部分や、APIから取得したデータを表示する部分を自分なりにカスタマイズしてみましょう。
例えば、
- フォントの色を変えてみる
- 自動で日本語訳して表示させてみる
など、いろいろと試してみてください！