今日の学習記録

既読機能（非同期通信）の仕組み−２

【目的】

・非同期通信の仕組みを理解する

・必要なコード・用語を覚える

【学習概要】

既読機能を実装して以下のことを学ぶ

・フロント側の処理の流れ

・リロードせずに既読マークがつくために必要なコード

【実装の手順】

前日の続き

３．リクエスト（レスポンス）を受け取る

JavaScriptからコントローラーへ情報を渡した後に処理されてレスポンスが返る

レスポンスを受け取った際に既読であれば条件分岐により属性値にtrueをセットする

未読の場合は属性ごと削除

〈登場したコード・用語〉

onload ... レスポンスが成功した場合に呼び出されるイベントハンドラー

イベントハンドラー ... イベント発火した際に実行される処理

イベント発火 ... イベントを認識しているJavaScriptのコードが動き出すこと

イベント ... HTMLnitaisite行われた処理の要求のこと

　　　　　（ユーザーがブラウザ上のボタンをクリック下など）

〈分からなかった点〉

onloadとresponseの違い 

条件分岐

４．レスポンスがエラーの場合、処理を行わないように設定する

statusによって判断する

〈登場したコード・用語〉

status ... ステータスコードを確認できる

ステータスコード ... 100~→処理継続中，200~→処理成功，300~→リダイレクト

　　　　　　　　　　400~→クライアントのエラー，500~→サーバーのエラー

５．既読時にグレーになるようにCSSを編集する

既読かどうか判断できるように見た目が変わるようにする

６．実行のタイミングを調整する

checkは、addEventListenerで呼び出すようにしているため、ページをリロードしないと実行されないので、checkの実行されるタイミングを変更

　　　　　　　　　↓ 

一定時間ごとで自動的にcheckを実行するようにsetIntervalメソッドを使用

〈登場したコード・用語〉

 addEventListener ... イベント発火の際に実行する関数を定義するためのメソッド

　　　　　　　　　　要素.addEventListener('イベント名',関数)

setInterval ... いってい時間ごとに指定した関数を実行できるメソッド

　　　　　　setInterval(check,100); → 単位はms

７．イベント発火の重複を避ける

data-load="true"をイベント発火が起きる要素に追記

→return null;が返り処理が止まる

〈登場したコード・用語〉

 addEventListener ... イベント発火の際に実行する関数を定義するためのメソッド

　　　　　　　　　　要素.addEventListener('イベント名',関数)

setInterval ... いってい時間ごとに指定した関数を実行できるメソッド

　　　　　　setInterval(check,100); → 単位はms

おわり

モンハンライズ欲しい