HTML+JavaScriptでこれから始める、REST APIを利用したアプリ開発 | デザインってオモシロイ -MdN Design Interactive-

HTML+JavaScriptでこれから始める、REST APIを利用したアプリ開発

2020.5.25 MON

[WebサービスとREST API]

HTML+JavaScriptでこれから始める、REST APIを利用したアプリ開発

2020年1月22日 TEXT:ニック

はじめまして。freee株式会社でDevRelというロールを担当している、ニックと言います。

ネット上でWebサービスを開発する際に、欠かせない技術の一つが「RESTful API」です。

(以下、本稿では便宜上、REST APIと呼称します)

GoogleやAmazonをはじめ、プラットフォームサービスを提供している様々な企業が、APIを通じてデータの提供を行なっています。

しかし、REST API に慣れていない方は、どこから手をつけて良いかわからないことでしょう。

これから数回にわたり、初めてAPIを触る方向けに、覚えておきたい基本的な用語や技術について解説をしていきます。
本稿の前提条件

本稿をはじめとする一連の記事は、以下の動作環境・前提条件を元に記述します。


  • ・HTML5
  • ・JavaScript (ECMAScript2015以降)
  • ・Fetch APIが動作するWebブラウザ
Web APIとは

Web APIという言葉に厳密な定義はありませんが、一般的には「HTTPプロトコル経由で、データをアプリケーション・システムとやりとりするためのインターフェース」を指します。HTTPプロトコル、すなわちブラウザなどを使って、各種データをやり取りできる仕組みとなります。


皆さんに馴染みが深いところでは「Google」の各種サービスが挙げられます。Googleは多種多様なサービスのAPIを提供していて、Googleが管理している様々なデータを、API経由で利用することができます。


Googleが提供するAPIの代表例として、「Google Maps Platform」があります。Google MapsのデータをAPI経由で呼び出すことで、以下のようなアプリケーションを開発することができます。


  • ・ウェブサイトに地図を埋め込む
  • ・レストランや店舗のデータベースを、地図情報とともに提供する
  • ・目的までの最適なルートを探し出す

例えば「食べログ」も、Google Maps Platformの APIを利用したアプリの一つです。食べログでは、店舗の地図情報をGoogle Maps の APIを利用して生成しています。

REST API とは

Web APIには、代表的な規格がいくつかあります。ブログの投稿システムによく使われていたXML-RPCや、XMLデータのやり取りに使われているSOAPなどがその例です。

2010年代から、Web APIの標準的な規格として使われているのが「REST API」です。

REST APIには以下のような特徴があります。(IT用語辞典「e-Words」 より引用)


  • ・セッションなどの状態管理を行わず、やり取りされる情報はそれ自体で完結して解釈することができる
  • ・情報を操作する命令の体系が予め定義・共有されている
  • ・すべての情報は汎用的な構文で一意に識別される
  • ・情報の一部として、別の状態や別の情報への参照を含めることができる

わかりやすく言うと


GETやPOSTなど、決まったリクエストを特定のURI(URL)に送ることで、様々な情報をネット経由で取得・操作ができる


ということです。

REST APIは、URIを利用してデータのやりとりができるため、2020年現在、もっとも普及したWeb APIの規格となっています。

REST API の実際

言葉で説明しても、なかなか理解しづらい部分があるかもしれません。Googleが提供するAPIサービスの一つ、Google Books API を利用して、REST APIによるリクエストを実際に行なってみましょう。


みなさんがお使いのブラウザから、以下のURLにアクセスしてみましょう。


https://www.googleapis.com/books/v1/volumes?q=isbn:9784103060765


すると、こんなデータが表示されます。

{
  "kind": "books#volumes",
  "totalItems": 1,
  "items": [{
    "kind": "books#volume",
    "id": "zHx0rgEACAAJ",
    "etag": "OFx2ZjDJDiI",
    "selfLink": "https://www.googleapis.com/books/v1/volumes/zHx0rgEACAAJ",
    "volumeInfo": {
      "title": "女たち三百人の裏切りの書",
      "authors": ["古川日出男"],
      "publishedDate": "2015-04-25",
      "description": "女人たち、海賊たち、武士たち、蝦夷たち。いくつもの物語がやがて集結して結晶する、瞠目の“古川日出男版”源氏物語。",
      "industryIdentifiers": [{
        "type": "ISBN_10",
        "identifier": "410306076X"
      }, {
        "type": "ISBN_13",
        "identifier": "9784103060765"
      }],
      "readingModes": {
        "text": false,
        "image": false
      },

見慣れないデータが表示されて驚いたでしょうか。これは「JSON(ジェイソン)」というデータフォーマットです。


(表示されない方は、JSONを表示するための拡張機能を有効化・インストールしてみてください。Google Chromeであれば「JSON View」など)


このJSONデータは、古川日出男さんという小説家の書籍データです。よく見ると、データ内に 「古川日出男」「女たち三百人の裏切りの書」など、書籍に関する情報が含まれているのが分かります。


Google Books API経由で取得したデータには、著者名・書籍名・書籍の概要・ISBNコードなど、書籍に関する様々なデータが含まれています。 これが、REST API の大きな特徴です。Web経由で、まるでデータベースを利用するように、多種多様なデータを使うことができるようになります。


書籍用のAPIなら書籍情報、地図用のAPIなら地図情報、天気予報のAPIであれば天候や風速、今後1週間の天気データといったように、天気予報やレシピ、Twitterのつぶやきから翻訳機能まで、様々なウェブシステムの機能やデータを利用できます。


いかがでしょう。ウェブ上の様々なデータ・システムを使えるなんて、ワクワクしませんか?REST API の使い方を覚えると、色々なサービスやアプリを開発することができるようになるのです。


REST APIの多くは、「JSON」というデータフォーマットを利用します。
次回は「JSON」について説明します。

今回のまとめ
  • ・REST API は、現在広く使われている Web API の規格である
  • ・さまざまなWebサービスがAPIを提供している
  • ・APIの使い方を覚えると、便利なアプリやWebサービスが開発できるようになる
告知

freee も REST API を公開しています。

freeeと開発者が共同で運営しているユーザーコミュニティ「freee Open Guild」では会員を募集しています。不定期に開催しており、freee、API、そのほかの技術領域について勉強会を開催しています。

https://freee-platform.connpass.com/


登録は無料ですので、ぜひこの機会にご登録ください!

ニック(Takeshi Nick Osanai)

早稲田大学卒業後、株式会社アスキーでゲーム事業に従事。シックス・アパート株式会社でプロダクトマネージャー、ディベロッパーリレーションを担当後、2019年freeeへ入社。 AWS認定ソリューションアーキテクト(SAA)

twitter facebook このエントリーをはてなブックマークに追加 RSS

こんな記事も読まれています

この連載のすべての記事

アクセスランキング

5.18-5.24

MdN BOOKS|デザインの本

Pick upコンテンツ

現在