# JavaScript　応用編２（学習日：9/29　Ajax通信） ## Ajax通信 ### 1. Ajax通信とは Ajax(Asynchronous JavaScript + XML)とは、Webブラウザ上で動作するJavaScriptで、サーバからXMLデータを取得し、取得したデータをコンテンツに動的に反映する通信手法のこと。非同期通信の一つである。 具体的な手順は以下の通りである。 1. HTML形式ではないリクエストをサーバに送信する。 2. サーバからデータを取得する。（ページ遷移は行わない。） 3. 取得したデータとJavaScriptを用いて、ページの一部分だけを更新する。 Ajax通信のメリットとしては * ページ遷移無しで、ページの一部分の変更が可能である。 * 同時にサーバと通信を行える。 ### 2. Ajax通信を用いたユースケースの作成 今回は、GitHubからユーザ情報を取得し、アプリケーション上で表示するプログラムを作成する。 #### 2.1 エントリーポイント アプリケーションで最初に呼び出される部分のこと。 起動時にデフォルトで表示したいページを指定する。 Webアプリケーションでは、常にHTMLドキュメントがエントリーポイントとなる。 HTMLドキュメントの読み取り後、JavaScriptのエントリーポイントの実行に移る。 ##### 2.1.1 ウェブブラウザとDOM HTMLドキュメントをブラウザで読み込むとき、DOM(Document Object Model)が生成される。 DOMでは、HTMLドキュメントのタグの入れ子関係を木構造で表現する。（DOMツリー） documentグローバルオブジェクトを利用すれば、JavaScript上で、HTMLの要素やタグを操作できる。 * DOMで利用する文法 const 変数名 = 型名.形式（操作したいもの）で表す。 * 型名 * node：すべてのオブジェクト * element：すべての要素オブジェクト * document：ブラウザに読み込まれたWebページ**→エントリーポイントとして働く！** * 形式 * getElementById（ID名）：要素のID属性値に合致する要素を参照する。 * getElementsByTagName（タグ名）：要素のタグ名に合致する要素を参照する。 * getElementsByClassName（クラス名）：要素のクラス名に合致する要素を参照する。 * querySelector（セレクタ名）：指定したセレクタに合致する要素を参照する。 * createElement（要素名）：指定した要素を作成する。 * appendChild（要素の変数名）：指定した要素を子要素として追加する。 * textContent：テキストを指定する。 * innerHTMLプロパティ 形式の後ろにくっつけることで、Webページの内容を動的に置き換えられる。 （例）document.getElementById("ID名").innerHTML = "Hello!"; （例）htmlのbody部分 <body> <h1>大阪メトロ</h1> <h2>御堂筋線</h2> <h2>谷町線</h2> <h2>四ツ橋線</h2> </body> ```javascript= //<h1>要素を取得 const header1 = document.querySelector("h1"); //<h1>要素のテキストを取得 const header1Text = header1.textContent; //ボタン要素を作成 const button = document.createElement("button"); //ボタン要素のテキストを指定 button.textCobtent = "乗車する"; //ボタンを<body>要素の子要素として持たせる document.body.appendChild(button); ``` #### 2.2 HTTP通信 * Fetch API HTTP通信を行って、リソースを取得するためのAPI。 ページ全体を再読み込みすることなく指定したURLからデータを取得できる。 FetchAPI登場以前は、XMLHttpRequestのAPIが利用されていた。 * fetchメソッド fetchメソッドでGETのHTMLリクエストを行う。 GitHubにはユーザ情報を取得するAPIとして https://api.github.com/users/GitHubユーザーID　が用意されている。 なお、ユーザID部分は、JavaScript上の特殊文字が含まれるため、特殊な意味を無効化するencodeURIComponentでエスケープする。 * fetchメソッドのレスポンス fetchで送ったリクエストからのレスポンスはPromise形式で返される。これは、responseオブジェクトでresolveされる。.thenの後にresponseオブジェクトを入力しコールバックで呼び出せるようにする。 また、エラーの発生がつきもののため、.catchを設定して例外処理を行う。 リクエストの成否はresponse.okで判断できる。 #### 2.3 データを表示する 取得したデータをページ上に表示するには、JavaScriptでHTML文を組み立てる必要がある。 * テンプレートリテラルでHTML文を組み立てる。 まずはHTML文法に則って、データを表示するHTML文を作成する。 改行可能なテンプレートリテラル（バッククォートで囲む）を用いて、インデントを再現できる。また、変数の埋め込み（${変数名}）も容易である。 * DOMにHTMLを追加する。 HTML文に、resultというIDを持つdiv要素を登録しておき、 document.getElementByIdで参照する。 さらにinnnerHTMLを用いて、先ほど作成したHTML文で置き換える処理を行う。 * HTML文をエスケープする。 特殊文字の効果をそのままにすると、意図しない挙動が起き、セキュリティ面で問題がある。そこで、特殊記号に対するエスケープ処理を宣言する。 * タグ関数でHTMLにエスケープを適用する。 エスケープ処理を明示的に呼び出すこと無く行うには、テンプレートリテラルのタグ付けが効果的である。 タグ関数を利用して、値が文字列型ならエスケープを適用する。 タグ関数は、テンプレートリテラルのバッククォートの直前に記述する。 #### 2.4 Promiseを活用する（リファクタリング） ソースコードを整理し、エラーハンドリングを確実に行う。 1. 関数の分割 大きくなりすぎた関数を整理する。 2. Promiseチェーンで機能をつなぐ。 .thenでつなぐPromiseチェーンを利用して、データ取得、HTML組み立て、表示を一連の処理でつなぐ。 3. AsyncFunctionに変換する。 promiseチェーンを、AsyncFunctionに変更することで、同期処理と同じ見た目で記述できる。 4. 参照するユーザIDを変更できるようにする。 HTMLに<input>タグを追加し、JavaScriptから値を取得できるようにする。 ###### tags: `JavaScript`