備忘録3：JavaScript-Ajaxについて

転職のための3月6日から某スクールにでプログラミング学習を始めた32歳のおっさんです。時系列でHTML⇨CSS⇨Rails & JavaScriptを学習中。

学習内容：非同期通信について学ぶ

1：開幕の自問自答

①非同期通信ってなんすか？
　⇨非同期通信とは、非同期通信です。
②は？
　⇨同期通信との違いは、簡単に言うとブラウザの再読み込みの有無です。
③再読み込みが無いとどうなるんすか？
　⇨サーバーとの情報通信量が少なくて済むため非常に軽いです。
　　そのため、非常にストレスフリーなWebページ・アプリが作れます。
④はえ〜…すっごい便利。ところでなんて読むの？アジャックス？
　⇨Ajax(エイジャックス)です。

と、言うわけで今回は非同期通信についてです。
今回は個人的な都合でいつも以上にざっくりです。

2：全体の流れ

①作ったもの　⇨　完成形の説明
②下準備
③実際のコード

3：作ったもの

結論から言うとこんなのです。
フォームからテキストを入力して送信すると
ブラウザの読み込みをせずに、投稿したテキストが更新される仕組み。

また、非同期通信による画面の更新が適用されるのは
テキストを送信した投稿者のみとなる。
他人は、ブラウザのリロードを行うことで新しい情報を取得出来る。

4：下準備

まずは、この様にJavaScriptを使用する。と言うことを記述する。

次に、対象の erbファイル の要素に ID を付与する。要素は以下4つ。
① form_with
② form.text_field
③ form.submit
④ div

正直、JavaScriptを学び始めるまで
「ID機能なんか一生使わないんじゃないか？」
って思ってました。そんなことありませんでした。神でした。

5：実際のコード

こんな感じで記述する。
以下番号順に役割と処理を書いていきます。
補足：addEventListener('条件', 引数);
　　　'条件'を満たすと処理を始める。
　　　これをイベントの”発火”と言う。
　　　ぷよぷよではない。

①全ての元凶
役割：全てはこいつから始まる。始まりの始まり。

処理：このページが読み込まれた時、「関数：test」を特殊召喚する。
　　「window.addEventListener('load', test);」＜おれがヤツを呼んだ
なお、 window は省略出来る。

②犯人(関数：test)
役割：ユーザーの操作を感知し、数々の処理を実行する。
　　　HTMLから要素を取得し、ユーザーの操作に合わせて処理を行う。

処理：送信ボタン要素を取得し、ボタンのクリックをトリガーに発火した。
　　　また、③での二重リクエストを防ぐためクリック操作を無効化した。

③情報屋　兼　運び屋
役割：フォームに入力された情報を抜き取り、まとめる。
　　　コントローラーとのコネクションがあり、情報のやりとりを行う。
　　　ジェイソンとはズッ友。

処理：HTMLの form を取得し、そこから form の入力内容を取得する。
　　　XMLHttpRequest でコントローラーへリクエストを行い
　　　正常にレスポンスが返ってくるかを確認する。

　　　また、コントローラーの以下の一文は彼の希望に応えた結果。
　　　render json:{ test: post }
　　　レコード情報をpostに格納し、json形式で キーであるtest: へ送る。

変数.open("HTTPメソッド",　"パス",　非同期通信のON/OFF)　←初期設定
変数.responseType = "json"　←情報の形式設定。
変数.send(引数)　←引数をコントローラーへ送る。
変数.onload　←コントローラーとの通信が成功したかを確認する。

④実行犯
役割：⑤によって生成されたHTML情報を、本来のwebページに埋め込む。
　　　また、②によるクリック無効化の効果を、無かったかの様に見せる。

処理：生成されたHTML情報を埋め込む先の目安として list要素 を取得し
　　　form のテキストが入力されている箇所 content も取得する。
　　　その後、指定のHTMLを指定の箇所に埋め込み
　　　また、form に残っているテキストを抹消した。

変数.insertAdjacentHTML("位置指定の指定",　挿入するHTMLの指定(引数))
　　今回はafterendにより、list要素の直後にHTMLを挿入している。

⑤工作員
役割：④の依頼を受けて、HTML情報を生成する。

処理：④(34行目)で呼び出され、受け取った引数(XHR)を使い
　　　巧妙な手口で本物そっくりのHTML情報を 変数html に格納した。
　　　XHR.response.test のtestとはコントローラーに記述された
　　　render json:{ test: post } の test: のことである。
　　　このキーを使うことにより、 post の中身を利用した。

　　　特にこれと言って目新しいメソッドは無い。

6：余談

イベントの発火を確認する際は、こんな感じにすると発火の確認が出来る。
毎回やるのは面倒だが、要所要所で確認すると良いかもしれない。

7：終わり

前職は砕けた感じの資料を作ることが多かったので今回は砕きました。
どういう仕事だよって思われるかもしれませんが
そういう需要もあるんですねぇ。
本音を言えばもっと砕きたいところですが、時間かかるので我慢。

堅苦しい資料なんて、書く側も、読む側も、面白く無いからね。
仕方ないね。

JavaScriptは結構読み易い印象があります。
今のところは、ですが。
テストコード書いてる感覚に似ているかもしれません。
今のところは、ですが。

終わり！！！！！！！！！！！！！！！！！！！！！