Web APIとそのgithub pagesでの利用について調べる

October 15, 2020

概要: Web APIとはどういうもので、github pagesで使えるのか調べる。Web APIとはhttp経由で呼び出せるアプリで、特にクライアントサイドで使えるREST APIは、githubでも使えるらしい。

Web APIとは

厳格な定義はないが、広義にはHTTPプロトコルを用いてネットワーク越しに呼び出すアプリケーション間、システム間のインターフェースのこと。
Web APIとは何なのか

AmazonやTwitterはAPIを公開することで収益を拡大してきたとのこと
では、Web APIにはどんなものがある？

htmlのレンダリング場所（クライアント側 or サーバー側）によって使用可能なAPIが変わりそうなので、分類していく。
参考: 時代はAPIファースト!? イマドキの業務システム開発ことはじめ第3回

ブラウザ上でAPIなどを使い、初期データを取得して、HTML 要素をレンダリングする。
Client Side Rendering（SPA）・SSR・SSG を整理してみた

JavaScriptを用いて実現されることが多くなりそう。最近はREST APIが流行。

ブラウザAPI

Web ブラウザに組込まれていて、ブラウザやコンピュータの環境の情報を取得し、これを使って役に立つややこしい事を行えるようにするもの
Web API の紹介
サードパーティAPI

デフォルトではブラウザに組込まれておらず、普通はコードと情報を Web のどこから読み込まねばなりません。
Web API の紹介
- Twitter API, Google Maps API, YouTube API等

サーバー側でデータ取得、レンダリングまでを行い、HTMLファイルを配信する。
Client Side Rendering（SPA）・SSR・SSG を整理してみた

SSRでは特に制約がないので大抵のAPIは使えるはず。

github pagesでは、サーバーは動的にいじれないが、JavaScriptを組み込んだhtmlは使えるらしい。
なので、クライアントサイドでJavaScriptで扱えるAPIなら使えるはず。
流行りのREST APIはよさそう。
REST APIってどんなもの？

REST(REpresentational State Transfer)はWebサービスの設計モデルです。RESTなWebサービスは、そのサービスのURIにHTTPメソッドでアクセスすることでデータの送受信を行います。
REST入門基礎知識

↑同サイトで紹介されていたREST APIのサンプル（QiitaのREST API

https://qiita.com/api/v2/users/TakahiRoyte
にアクセスするとJSON(JavaScript Object Notation) というフォーマットのデータを返す

更に詳しくREST APIの構造を知るにはこのページがよさそう
0からREST APIについて調べてみた

では、REST APIはgithub pagesで使える？

こんなイメージ

web-api on github

実際にgithub上のwebサイトでJavaScriptを動作させてREST APIを呼び出してみたくなった。
JavaScriptを勉強しながらやってみたい