【宇宙画像を取得】NASA APIを利用したReactアプリの作り方

2024-04-07
2022-02-08

[ Image Source: NASA ]

Keywords:
[ React ]
[ NASA ]
[ API ]
[ Typescript ]
[ pickup ]
[ Next.js ]

はじめに

API (Application Programming Interface)とは、複数のアプリケーションが互いにコミュニケーションを取るためのルールです。APIは企業のWEBサーバーと、外部アプリケーションの間に入って、二者間でのデータのやり取りを可能にします。

GoogleやFacebookなどのWEB企業は、自社が提供するWEBサービスと、外部の開発者が構築するアプリケーションの間のコミュニケーションのためにAPIを公開していますね。

企業にとっては、外部からWEBサーバーに直接アクセスさせないでデータを提供できるというセキュリティー上のメリットがあります。

開発者にとっても、APIの背景にあるロジックを詳しく知らなくても、APIのルールに従うだけでアプリケーションの構築に必要なデータを取得できるという利点があります。

このように、企業とアプリ開発者の双方にってメリットがあるため、多くのWEBサービス企業がAPIを公開しているわけですね🔥

今回の記事では、NASAが提供するAPIを使って宇宙画像を取得するReactアプリケーションを構築する方法をご紹介したいと思います。

NASA APIについて🚀✨

NASA API は、NASA (アメリカ航空宇宙局) の公式ページで提供されているAPIです。このAPIは、NASAが保有する宇宙に関するデータを利用したアプリケーションの開発するために、アプリ開発者向けに公開されています。

NASA APIで提供されるデータは、NASAの望遠鏡などで撮影された画像のライブラリー(NASA Image and Video Library)や、地球近傍の隕石などの物体についての情報 (NeoWs / Near Earth Object Web Service) など多岐に渡ります。

その中でも、今回の記事で取り上げたいのは、宇宙画像を取得するために用いられる「画像ライブラリーAPI」です。

NASA画像ライブラリーとは？

NASA画像ライブラリーは、NASAが提供する画像・動画・音声などのメディアデータを提供しているデータベースです。ウェブサイトにアクセスすると、利用規約を遵守すれば、誰でも無料で利用できます。

もちろん、NASAの画像ライブラリーの公式サイトにアクセスすれば画像データを閲覧できるのですが、APIを利用することで、自分のウェブサイトやアプリケーションの形式に合わせて取得データを自由にカスタマイズできます。

画像ライブラリーAPIは、NASA画像ライブラリーの各種メディアデータにアクセスするためのREST APIエンドポイントを提供しています。

◉APIルート

https://images-api.nasa.gov/

◉APIエンドポイント

/search
/asset/{nasa_id}
/metadata/{nasa_id}
/captions/{nasa_id}
/album/{album_name}

NASA APIを利用したReactアプリの実装例

手前味噌で恐縮ですが、先日NASA APIを利用したReactアプリケーションを公開しました。

NASAの画像ライブラリーを日本語で検索できるWEBアプリ『Polygonal Space』をリリースしました🚀✨
使用した技術は、React (Next.js) / Node.js (Express) / MongoDB / TypeScript / NASA APIです。Githubでコードを公開しています🌏#宇宙 #プログラミング #NASA https://t.co/na7uFRggWl
— Takeru | WEB Development (@mikey_an0101) December 15, 2021

このアプリケーションの特徴は、宇宙に関する日本語のキーワードを選択してNASAの宇宙画像を取得するという点です。

公式サイトでは英語での検索のみですから、日本語ユーザー向けに利用しやすいようにカスタマイズしました。

アプリケーションの日本語検索ページはこちらです。

ちなみに、このアプリケーションでは、取得した記事のブックマーク機能を実装しており、ブックマークしたアイテムをいつでも閲覧できるように工夫しています。ブックマークは、公式サイトにはない機能です。このように、APIを使うと発想次第で色々な機能を実装できるわけです。

Searchエンドポイントについて

ご紹介したReactアプリケーションでは、画像ライブラリーのSearchエンドポイントを利用しています。

Searchエンドポイントは、HTTP Requestの中で、queryとして文字列(キーワード)を渡すと、Responseとしてそのキーワードを含む記事一覧 (JSONデータ)を返します。Responseデータの中には、記事タイトル、記事本文、サムネイルURL、記事公開日、撮影者、、など様々な情報が含まれています。

上述のReactアプリケーションは、Reactのフロントエンド + Expressサーバーのバックエンドで構成されていて、サーバーからNASA APIにアクセスしています。

今回の記事の目的は、Reactを用いてNASA APIにアクセスする方法のご紹介ですので、フロントからからエンドポイントに直接リクエストするReact単体のアプリケーションを別途用意しました。

サンプルアプリケーション

用意したサンプルアプリケーションのフロントエンドは次の画像のようになります。

◉サンプルアプリケーションの説明

このアプリケーションには「ハッブル宇宙望遠鏡」、「星雲」、「スペースX」という3つのボタンが設置されています。

ちなみに、「ハッブル宇宙望遠鏡」とは、地球上空547kmに浮かぶ宇宙望遠鏡で、1990年に運用開始して以来、たくさんの美しい宇宙画像を撮影し続けています。多くのファンがいて、僕もその一人です🔥

また、星雲は宇宙空間に漂う塵やガスの集まりで雲状の形態を持ち、含まれる物質の種類に応じて独特の色彩を帯びるのが特徴です。

最後に、スペースXは、世界有数の宇宙開発企業で、イーロン・マスクがCEOを務める会社として有名ですね。

。。。少し脱線しましたので、話を元に戻しましょう😅

このアプリケーションは、ボタンをクリックすると、NASA APIのエンドポイントにアクセスして、キーワードに対応する文字列を渡すように構成されています。

アプリケーションは、Reactに加えて、Next.js(Reactのフレームワーク) + Typescript + tailwindcss(スタイリング)を使って構築しています。以下の説明では、ソースコードを見ながら解説しますが、簡略化のためこの3点を省略しています。

Next.js + Typescript + tailwindcssの完成版のソースコードもGithubで公開しています。

興味がある方はこちらをご覧ください。

1. 表示アイテムのStateを定義

初めに、表示する記事アイテム(配列)のstate (searchItems)を、React HooksのuseStateを使って定義します。searchItemsは、このアプリケーションの主役となる変数です。

const [searchItems, setSearchItems] = useState()

2. データ取得する関数を定義

次に、エンドポイントにアクセスするための関数 "handleSearch"を定義します。

const nasaUrl = `https://images-api.nasa.gov/search?q=` 
		  //エンドポイント
      const handleSearch = async ({query}) =>{
          const url = `${nasaUrl}${escape(query)}`
          //検索クエリを追加
          const response = 
          await axios({
              method: 'GET',
              url: url,
          })
          const items = await response.data.collection.items 
          //ResponseのJSONデータから記事データ(配列)を抽出
          const sliced = items.slice(0, 3) 
          //配列の1番目〜3番目の記事を取り出す。
          sliced && setSearchItems(sliced)
          //取得したデータでstateをアップデート
      }

データ取得のHTTPクライアントとして、axiosを利用しています。GETメソッドでデータをRequestします。

エンドポイントのURLは"https://images-api.nasa.gov/search"です。このURLにパラメーターの"?q=キーワード"を付けたURLにアクセスします。

このasync関数はPromiseを返しますので、awaitで受けてResponseデータを取得しています。

ちなみに、ResponseのJSONデータはやや複雑な入れ子構造になっており、少し注意が必要です。ここでは、"response.data.collection.items"のようにして、必要な記事データを抽出しています。

3. ボタンを実装

ボタンの実装は次のようになります。クリックをトリガーにして関数が発動するように設定しています。

<button onClick={() => handleSearch({query: "hubble galaxy"})}>
 ハッブル宇宙望遠鏡
 </button>

注目ポイントは、handleSeaerch関数のargumentに指定している"query"プロパティーです。queryとしてstring (文字列)を渡すことで、その文字列をキーワードとして検索を実行します。上記の例では、"hubble galaxy"という文字列をqueryプロパティーとして渡しています。

この文字列を変更することで、様々なキーワードを使った検索を実行できるわけです。

4. 記事一覧を表示する

ここまでの部分で、検索のRequest → JSONデータのResponse → 記事データをstateに格納するの一連のプロセスが終わりました。

最後に、stateに保存した記事データを表示させましょう。

Responseのデータ配列には最大100個のアイテムが格納されています。このアプリケーションでは、１〜3番目のアイテムだけを表示します。

<ul>
{searchItems && searchItems.map((item, index) => {
return (<li key={index} >
    <p>{item.data[0].title}</p>    
    <img 
    src={item.links[0].href} alt={item.data[0].title} />
    </li>)
})}
</ul>

5. コードの全体像

全体のコードは以下のようになります。

import axios from 'axios'
import { useState } from 'react'

const Home = () => {
      const [searchItems, setSearchItems] = useState()
      const nasaUrl = `https://images-api.nasa.gov/search?q=`
      const handleSearch = async ({query}) =>{
          const url = `${nasaUrl}${escape(query)}`
          const response = 
          await axios({
              method: 'GET',
              url: url,
          })
          const items = await response.data.collection.items
          const sliced = items.slice(0, 3)
          sliced && setSearchItems(sliced)   
      }

  return (
    <div>
      <main>
        <h1>NASA API APP 🚀✨</h1>
        <div>
          <div>
            <h2><p>クリックすると、</p>
            <p>NASA APIから取得したデータが表示されます。</p></h2>
          </div>
          <ul>
            <li>
              <button onClick={() => handleSearch({query: "hubble galaxy"})}>
                ハッブル宇宙望遠鏡
              </button>
            </li>
            <li>
              <button onClick={() => handleSearch({query: "hubble nebula"})}>
                星雲
              </button>
            </li>
            <li>
              <button onClick={() => handleSearch({query: "falcon 9 launch"})}>
                スペースX
              </button>
            </li>
          </ul>
        </div>
        <div>
          <ul>
            {searchItems && searchItems.map((item, index) => {
            return (<li key={index}>
              <p>{item.data[0].title}</p>
              <div>
                <img src={item.links[0].href} alt={item.data[0].title} />
              </div>
              </li>)
            })}
          </ul>
        </div>
      </main>
    </div>
  )
}

export default Home

最後に

今回の記事では、NASA APIを利用して宇宙画像を取得する方法を、Reactアプリの実装例を使ってご紹介しました。

NASAの画像ライブラリーAPIは、多くの宇宙画像に手軽にアクセスできる素晴らしいAPIです。「NASA APIを利用してアプリケーションを作りたい！」というモチベーションがあると、プログラミングの学習も捗るかもしれませんね😉✨