学習のアウトプット（JavaScript4＋その他）
【プルダウンメニューの表示・非表示（前回の続き）】
〜中略
pullDownButton.addEventLestener('click', function() {
if (pullDownParents.getAttribute("style") == "display:block;") {
pullDownButton.removeAttribute("style", "display:block;")
} else {
pullDownButton.setAtrribute("style", "display:block;")
}
})
※JavaScriptの条件文はendを用いず、条件式を（）、条件文を｛｝で囲む。
---------------------------------------------------------------------------------
【debugger】
コードの処理を止めたいところで記入すると、挙動が一時停止される。
Railsのbinding.pryのようなもの。
処理を止めた状態で、デベロッパーツールのコンソールに入力をして要素の状態を確認したりするのに活用できる。
---------------------------------------------------------------------------------
【プルダウンリストの実装】
「プルダウンリストを選択すると、選択したプルダウンリスト名が表題として表示される」という実装を行なった。
プルダウンリストを取得し、forEachメソッドで1つ1つ取り出す
→取り出した各リストの要素の文字列（開始タグと終了タグで囲まれた中身）を抽出して変数に代入する
→表題部分の文字列に抽出した変数を入れる
という流れ。
プルダウンリストの取得のため、プルダウンリストそれぞれに同じクラス名を与えて、「document.querySelectorAll」を使った。
※document.ElementsByClassNameを用いなかったのは、forEachを使うから。
（両者では戻り値が異なり、それにより使えるメソッドが変わるため）
---------------------------------------------------------------------------------
【innerHTML】
○○.innerHTMLで、開始タグと終了タグに囲まれている「要素の文字列」を取得できる。
また、○○.innerHTML = "△△"とすると、文字列を変えることも可能。
---------------------------------------------------------------------------------
【window.addEventListener('load')】
実装初期においてはJavaScriptコードの冒頭に記述したが、そうすると
中の処理に名前を付けることができないので、切り出してコードの最後に配置を変えた。
→代わりにfunction(関数名）{ を頭に持ってくることで、処理全体に関数名を付与した。
この方式はJavaScriptの記述においてよく採用されているらしい。
---------------------------------------------------------------------------------
【VS CODE豆知識】
・command+/：選択した箇所全てをコメントアウトできる
・command＋O：他のディレクトリを開く
・command+P：作業中のファイルを選択できる
・command+enter：カーソルの下に行を挿入
・command+shift+enter：カーソルの上に行を挿入
・ターミナルでカーソルが有効になっている時に上キーを押すとファイル名がそのまま表示される
【RubyのReturnについて】
Rubyの条件式で用いるreturnは、戻り値を返すだけの役目なので
その戻り値を出力するところまでは行なってくれない。
もし出力まで必要な場合は、returnを使わずに「puts 戻り値」という書き方でメソッドを終了させるか、メソッド自体の呼び出し時にputsを記載しておく必要がある。
---------------------------------------------------------------------------------
【thisメソッド】
イベント発火元となった要素を取得できる。
要素名を何度も書かなくてよいので、記述がシンプルになる。
---------------------------------------------------------------------------------
【getAttributeメソッド】
要素の属性の値を取得するためのメソッド。
要素名.getAttribute("属性名")と記述する。
---------------------------------------------------------------------------------
【JavaScriptのライブラリ】
処理を速くしたり記述をシンプルにしたりなど、様々なライブラリを使用できる。
---------------------------------------------------------------------------------
【Ajax通信】
JavaScriptを用いた非同期通信のこと。
通信を行なった際に、ブラウザの再読み込みをしないのでスピーディーに通信ができる。
GoogleMapなどで活用されている技術。
非同期通信を行うには、JavaScriptがリクエストをコントローラーに送るという処理になる。
そのために、appディレクトリ傘下のJavaScriptフォルダにJavaScriptのファイルを作成し、そこに「送信ボタンが押されたら動作が起こる（イベントが発火する）」ように記述していく。
---------------------------------------------------------------------------------
【隠しディレクトリ】
リポジトリを含むGitの情報は、隠しディレクトリである.gitの中で管理されている。
lsコマンドに-aを付けると、非表示になっている.から始まるディレクトリを確認することができ、 grep ○○と加えるとその文言を含むディレクトリを検索することも可能。
また、rmコマンドで削除ができる。
---------------------------------------------------------------------------------
【ローカルリポジトリの作成】
ターミナルでgit initコマンドで作成することができる。
---------------------------------------------------------------------------------
【JavaScriptファイルの読み込み】
新たに作成したJavaScriptファイルはそのままでは読み込めないため、
application.jsというファイルに、require(../○○）と記述して読み込みをする。
※..は「1つ前のディレクトリ」を意味し、○○はファイル名が入る。
---------------------------------------------------------------------------------
【FormDataオブジェクト】
フォームに入力された値を取得することができるオブジェクト。
new FormData（フォームの要素）と記述する。
引数の「フォームの要素」で指定されているフォームに入力された値を取得することができる。
今回の実装では、一度getElementbyIDでフォームをID名で取得し、その情報をformという変数に代入して、その変数を引数としてnew FormDataに渡した。
（また、それによって取得したフォームの入力値はさらにformDataという変数に代入した）
---------------------------------------------------------------------------------
【XMLHttpRequestオブジェクト】
JavaScriptを使ってサーバーとHTTP通信をする時に使用するオブジェクト。
new XMLHttpRequest（）と記述することでオブジェクトを生成できる。
実装では、XHR = new XMLHttpRequest()
として、生成したオブジェクトを変数に代入した。
---------------------------------------------------------------------------------
【openメソッド】
リクエストの内容を指定するためのメソッド。
（XMLHttpRequestオブジェクトのメソッド）
XHR.open("POST", "/posts", true）のように記述する。
左から「HTTPメソッドの指定」「パス」「非同期通信のON・OFF」の順で第3引数までを指定する。
---------------------------------------------------------------------------------
【responseTypeプロパティ】
受け取るレスポンスのデータフォーマットを指定するプロパティ。
（リクエスト送信時に、レスポンスの形式は指定しておく必要がある）
XHR.responseType = "json"と記述した。
※今回は形式をJSONに指定したが、JSONとは「JavaScript Object Notaion」の略で、JavaScriptを基に構成されたデータフォーマットらしい。
---------------------------------------------------------------------------------
【sendメソッド】
フォームの内容をコントローラーに送信するメソッド。
XMLHttpRequestオブジェクトのメソッドの1つ。
---------------------------------------------------------------------------------
【フォームデータを非同期通信としてリクエスト送信する一連の流れ】
function post () {
const submit = document.getElementById("submit");
submit.addEventListener('click', () => {
const form = document.getElementById("form");
const formData = new FormData("form");
const XHR = XMLHttpRequest();
XHR.open("POST", "/posts", true);
XHR.ResponseType = "json";
XHR.send(formData);
});
}
window.addEventListener('load', post);
