学習記録
メモ投稿機能（フロント側）
メモ投稿機能 ... 非同期通信によりリロードせずにメモを投稿できる機能
【目的】
・非同期通信についてAjaxを理解する
・必要なコード・用語を覚える
【学習概要（実装について大まかに何をしたか）】
①送信ボタンをクリックした際のイベントハンドラーを定義
②クリックした際のリクエスを送信
【実装の手順】
前回の続きから
２．リクエストを送信する
２−４．投稿するメモの入力内容の情報を送信する
投稿するメモの内容はフォームに入力される
sendoを使用して情報を送信する
＜用語・コード＞
FormData ... フォームに入力された値を取得できる
new FormData(フォームの要素)：でオブジェクトを生成して引数にフォー
ムの要素を渡す
２−５．レスポンスがあった場合の処理を記述
①レスポンスを受けてからHTMLにメモの内容を描画する
②メモのレコードデータを取得する
③HTMLを描写する場所を指定する要素を取得
④入力したフォームは投稿後も残る（画面遷移しないため）ので削除する
⑤HTMLにid="content"を追記
＜コード・用語＞
insertAdjacentHTML ... 指定したHTMLなどを特定の要素に描写できるメソッド
要素.insertAdjacentHTML("afterend", HTML)
第一引数に要素のどこに描写するかを指定する
第一引数
値 内容
beforebegin 要素の直前に挿入
afterend 要素の最後に挿入
afterbegin 内部の最初の子要素の前に挿入
beforeend 内部の最後の子要素の後に挿入
第二引数には描写するHTML自体を渡す。HTMLに変数を定義
して変数を渡すことで保守性も上がる
⑥HTMLという変数を定義して、変数をHTMLに描写できるようにする
⑦HTMLのステータスが２００以外の時の処理を記述
＜コード・用語＞
list.insertAdjacentHTML("afterend",HTML) ... 要素listの直後に変数HTMLを挿入
formText.value = ""; ... フォームに入力されたままの文字を空白に上書きする
２−６．コントローラーのcreatアクションとJavaScriptの処理が重複を避ける
重複しているため同じ投稿内容が2回繰り返されるためe.preventDefault();で処理を停止させる
投稿ボタンを押すと非同期でJavaScriptの処理が行われフォーム内容が投稿される
更新するとコントローラーのcreatアクションによってフォーム内容が投稿される
＜用語・コード＞
preventDafalt() ... 標準されている(Defalut)イベントを阻止する(prevent)メソッド
標準設定されているイベント 挙動
submitボタンでclickする 指定先のURLへ画面遷移
データ送信
チェックボックスでClickする チェックが入る
学習記録
メモ投稿機能（フロント側）
メモ投稿機能 ... 非同期通信によりリロードせずにメモを投稿できる機能
【目的】
・非同期通信についてAjaxを理解する
・必要なコード・用語を覚える
【学習概要（実装について大まかに何をしたか）】
①送信ボタンをクリックした際のイベントハンドラーを定義
②クリックした際のリクエスを送信
【実装の手順】
前回の続きから
２．リクエストを送信する
２−１．XMLHttpRequestのオブジェクトを生成
＜用語・コード＞
XMLHttpRequest ... Ajaxを可能にするためのオブジェクトでサーバーにHTTPリクエス
トを非同期で行うことができる。さまざまなメソッドが用意されて
おりサーバーへリクエストを送る。
クリックしたメモがどのメモなのか判断するための情状をリクエス
トに含める必要があり、メモのidをビューファイルに埋め込んで
JavaScriptで取得できるようにする。ビューファイルにidを埋め込む
ためにカスタムデータ属性を用いる
カスタムデータ ... HTMLに対して任意の属性を持たせられる機能。
例<div class="sample" data-id="1">
Ajax(エイジャック) ... JavaScriptを使用して非同期通信を行う処理のプログラム手法
JavaScript ... クライアントサイドで便利なプログラミング言語（ブラウザ上でのアプリ
ケージョンの使いやすさ・リクエストの送り方の工夫など）。使い勝手の
良いアプリケージョンの作成ができ、Ruby on RailsのWebアプリケーショ
ンにJavascriptを適用することができる
HTTPリクエスト ... クライアント側からURLを入力した際にWebサーバー側に送られる
リクエスト
オブジェクト ... 関連のあるプロパティ（データと機能）の集合体
機能はメソッド（変数と関数で構成されている）のこと
プロパティ ... ハッシュ形式（キーとバリューの組み合わせ）
２−２．XMLHttpRequestを初期化する
openメソッドを使用する
＜用語・コード＞
open ... XMLHttpRequestで定義されているメソッドで、リクエストを初期化できる
初期化＝どのようなリクエストをするのか引数によって指定する。
第一引数はHTTPメソッドの指定
第二引数はパスの指定
第三引数は非同期通信であるかどうかの指定
２−３．レスポンス形式を定義
レスポンスをJSONで定義
＜用語・コード＞
JSON ... データ形式の一種。CSV・XMLなどがある。表記形式がRubyのハッシュに似て
いる特徴がある。またJavaScriptにおけるオブジェクトの表記になる。JSONで
HTMLにレスポンスを返却する場合形式が異なるためrenderメソッドを使用す
る。
XML ... データ上の表記形式がHTMLに似ている特徴がある
おわり
学習記録
メモ投稿機能（フロント側）
メモ投稿機能 ... 非同期通信によりリロードせずにメモを投稿できる機能
【目的】
・非同期通信についてAjaxを理解する
・必要なコード・用語を覚える
【学習概要（実装について大まかに何をしたか）】
①送信ボタンをクリックした際のイベントハンドラーを定義
②クリックした際のリクエスを送信
【実装の手順】
１．送信した際のイベントハンドラーを定義
１−１．投稿するボタンをクリックした時のDOMを取得
１−１−１．memo関数を定義
イベントがロード時に実行されるようにaddEventListener("load",memo);を記述
＜コード・用語＞
イベントハンドラー ... イベントが発生した際の実行される処理のこと
addEventListener ... イベント発火の際に実行する関数を定義するためのメソッド
１−１−２．送信ボタン『投稿する』のDOMを取得する処理を記述
送信ボタン『投稿する』にid:"submit"を付与
投稿後のメモを追加する要素として<div id="list"></div>を追記
＜コード・用語＞
DOM ... ドキュメントオブジェクトモデルの略。HTMLを解析しデータを作成する仕組
み。DOMによって解析されたHTMLは階層構造のあるデータ（DOMツリーやド
キュメントツリー）になる
１−１−３．送信ボタン『投稿する』(id:"submit")の情報を取得する
getElementByIdを用いて情報を取得する
＜コード・用語＞
getElementById ... DOMツリーから特定のHTMLの要素を取得するためのメソッド
１−１−４．送信ボタンをクリックした際に実行される関数を定義
addEventListenerを使用してクリックした際に実行される関数を定義
＜コード・用語＞
addEventListener ... イベント発火の際に実行する関数を定義するためのメソッド
２．リクエストを送信する
明日はここから
買おうかな…
学習記録
メモ投稿機能（サーバーサイド側の仕組み）
メモ投稿機能 ... 非同期通信によりリロードせずにメモを投稿できる機能
【目的】
・非同期通信のエンドポイントの流れを理解する
・必要なコード・用語を覚える
【学習概要】
①メモ機能のサーバーサイドを完成させる
②エンドポイントの設定をする
③レスポンスを設定する
【実装の手順】
１．エンドポイントを作成する
〈コード・用語〉
エンドポイント ... Ajaxでやり取りする際のデータ返却のアクションを実行するた
めのURL
Ajax ... JavaScriptを使用して非同期通信を行う処理のプログラム手法のこと
非同期通信 ... リクエスト後にブラウザが再読み込みされることなくブラウザの
一部のみが更新される通信方法
２．データ（JSON）を返却するためのアクションを定義する
〈コード・用語〉
JSON ... ファイル形式
３．JavaScriptでエンドポイントにアクセスする
４．レスポンスデータ（JSON）を受け取る
５．メモをHTMLへ描写する
今日の学習記録
既読機能（非同期通信）の仕組み−２
【目的】
・非同期通信の仕組みを理解する
・必要なコード・用語を覚える
【学習概要】
既読機能を実装して以下のことを学ぶ
・フロント側の処理の流れ
・リロードせずに既読マークがつくために必要なコード
【実装の手順】
前日の続き
３．リクエスト（レスポンス）を受け取る
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
おわり
モンハンライズ欲しい
学習記録（個人的な理解）
既読機能（非同期通信）の仕組み
【目的】
・非同期通信の仕組みを理解する
・必要なコード・用語を覚える
【学習概要】
既読機能を実装して以下のことを学ぶ
・フロント側の処理の流れ
・リロードせずに既読マークがつくために必要なコード
【実装の手順】
１．既読した際にイベント発火させる
メッセージをクリックした際、既読となりクリックがイベント発火になる
〈使用したコード〉
forEach
addEventListener
２．クリックした際にリクエストを送信する
フロント側（HTML）を編集してリクエストを送信できるようにする
〈使用したコード等〉
XMLHttpRequest ... オブジェクト（Ajaxを可能にする）
カスタムデータ ... HTMLに属性を持たすことができる
要素.getAttribute（”属性名”）… 指定した属性の値を戻り値として返すことができる
new XMLHttpRequest ... よく分からなかった
open ... .....
responseType="json"; ... レスポンスの形式を指定できる（この場合はJSON形式）
send ... リクエストを送信できる
↓
これらによってクリックした際にHTMLに属性を持して、
Javascriptで要素を選択可能にできるなど（多分😓....自信なし）
今日はここで終了
続きは明日 . . . . . . . .！
学習内容（個人的な解釈を記録）
Ajaxについて学習中（既読機能）
テキストがあり例題に沿って学習しています
今回はLINEなどに使われる既読機能ついてです
〈概要〉
Ajaxによって非同期通信ができる
非同期通信する際はjsonなどのデータ形式で返却する必要あり
データを取得する際にアクセスするためのURLをエンドポイントという
【URLパラメーター】
URLの文字列のこと
URLパラメーターには二種類ある
１．queryパラメーター
２．pathパラメーター
これらのことにより、画面をリロードせずに既読マークが表示される
↓
非同期通信により画面をリロードしなくて済む！
（非同期通信でないと画面をリロードする必要がある）
〈使用したコード〉
post.cheaked
→既読の判断
既読ならばチェックした状態
既読でないならばチェックを外した状態
if分で条件分岐して既読ならばfalse
既読でないならばtrue
※今回の既読機能はクリックすると色が変わることで判断する
rennder json
終わりー
