# 122 SPA・APIについて

こんばんは、hiroです😃
SPAで構築をしている案件で、本日先輩から「SPAとAPIの関係性について説明出来ますか？」と質問が来ました。一瞬考える頭にはなったものの、「説明出来ないです。。。」と即答しましたw

全てを理解するのは厳しいかもですが、本日調べた内容を投稿しようと思います😁

SPA（Single Page Application）

Webアプリケーションの構成法の一つで、Webブラウザ側でページの移動を行わず、最初に読み込んだWebページ上のスクリプトがサーバとの通信や画面遷移を行う方式。操作の度にページ全体の再読み込みを行う通常の方式に比べ、ページ上の必要な部分だけを更新するため軽快に動作させることができる。
SPA事例：Facebook（メッセンジャー）/Google Map

一方で、ページの切り替えは高速になるものの、JavaScriptのコード量が増えます。加えて、サーバ側で行うHTMLの生成をブラウザで行うため、初期ローディングにかかる時間は増える。Webページの制作スキルに加えて、JavaScript及びその周辺技術に関する幅広い知識と高度な設計スキルが求められる。

API（Application Programming Interface）

あるコンピュータプログラム（ソフトウェア）の機能や管理するデータなどを外部の他のプログラムから呼び出して利用するための手順やデータ形式などを定めた規約のこと。多くのソフトウェアが共通して利用する機能は、OSやミドルウェアなどの形でまとめて提供されている。個々の開発者はAPIに従って機能を呼び出す短いコードを記述するだけで、1から処理内容を記述しなくてもその機能を利用したソフトウェアを作成することができる。

Webの仕組みとしては、
・HTTPという通信の約束に従って
・URLで指定する場所（サーバー）との間で
・ハイパーテキスト（情報）をやりとりする
みたいです。

APIを使いこなすためには、Webが採用しているHTTPを使用する必要がある
APIを使うときは以下の情報を用意する。
①Webサービスに接続するための情報（サービス登録時に手に入る）
　・APIエンドポイント（サービスに接続するためのURL）
　・APIキー（接続に必要なパスワード）
②Webサービスに送信する情報（API仕様書で確認できる）
　・メソッド（主にPOST or GET）
　・クエリパラメータ（使用するAPI・サービスの種類など詳細を指定）
　・ヘッダ（データの種類、APIキーなどの認証情報を入力）
　・ボディ（APIと送受信したい情報を入力）

SPAとAPIがどう関連するかまでは調べる事が出来なかったので、追って投稿をしていこうと思います。実際にコードを確認しながらの方が理解が深まりそうな感じがする。。。

本日も最後まで読んで頂き、ありがとうございました🙇‍♂️