20201024_アウトプット
学んだこと 6時間
JavaScriptでスタイルを操作
- インラインスタイル（HTMLにCSSのソースコードを直接記入）に対するJavaScriptの操作には、以下のメソッドを使うよ。
| メソッド | 意味 | 記述 |
|---|---|---|
| setAttribute | 指定した要素に新しい属性を追加、または既存の属性の値を変更 | 要素.setAttribute("属性名","設定したい値") |
| removeAttribute | 指定した要素から、特定の属性を削除 | 要素.removeAttribute("属性名", "削除したい値") |
| getAttribute | 属性の値を戻り値として返す | 要素.getAttribute("属性名") |
setAttributeは、新しい値や変更後の値を格納して、指定した要素自体を塗り替える。
getAttributeは、今ある値自体を取ってきて、その値がこういう状態だったらイベント発火するというような条件定義に使えたりする。
this関数の中で使うとイベント発火元となった要素を取得できる。debugger;処理を一時停止したり、特定の変数の値を確認したり、不具合の原因を探す手伝いをしてくれるメソッド。innerHTMLHTML要素の取得や書き換えができる。forEach関数を使うには、要素の戻り値をNodeListオブジェクトとして返す値でないと使えないので、変数を定義する時に（要素を取得する時に）、querySelectorAllを使う。HTMLCollectionとNodeListの違いは、HTMLCollectionは動的（取得元が更新されると、取得してきた値も更新される）で、NodeListは静的（取得元が更新されても、取得してきた値は更新しない）の違いがある。
ここまでで理解したこと
JavaScriptでホバーしたら色変わったり、メニューリスト表示したい時、どうするの？（ざっくり）
（１）JavaScriptの動きを付けたい要素を取ってきて、変数の箱にいれる。（例：document.getElementByIdやdocument.querySelectorAll）
（２）（１）の変数を使って、どんな時にイベント発火したいか関数を作る。（例：addEventListener+マウスカーソルあてた時・読み込んだ時）
（３）イベントの手法として、innerHTMLや、setAttributeなどを利用する。
JavaScriptの周辺知識
jQuery：DOM操作（HTMLの取得や追加削除など）を短く簡単に書くことができる。
Node.js：サーバーサイドで動くJavaScript。処理速度が非常に早く、大量のデータ処理が可能。
TypeScript：型定義ができるJavaScript。（静的型付け言語）
コンポーネント指向のライブラリ
React：Facebookが開発したライブラリ。仮想DOMの概念により早い高速なアプリケーション。AppleやGoogleストアからアプリをダウンロードして使う「ネイティブアプリケーション」の開発に便利なReactNativeのフレームワークがある。
Angular：Google等が開発したライブラリ。Angular内にも標準で多数のライブラリが用意されている。公式の機能のみで十分な開発を行うことができる。ただし、推奨言語は、TypeScriptとされている。
ここで勉強になったこと
コンポーネント指向とは。コンポーネント自体は部品という意味で、再利用しやすいようにパーツを作ること。ここでいうReactや、Vue.jsに関しては、構造・見た目・振る舞いをセットにしたもの。つまり、HTML・CSS・JavaScriptを３つセットで１つにしたもの。
静的型付け言語とは、プログラマーが予め入ってくるデータはどういうものなのか変数や関数など詳細に宣言・指定してからデータを受け入れる言語のこと。 （あらかじめ詳細に指定することが大変・余分なデータをいれるスペースは作らないので処理速度が早い）
動的型付け言語は、プログラマーが詳細までは宣言・指定せずとも、コンパイラやインタプリタ（人間語を機械語に翻訳する技術）が、おおよその値のデータを想定して受け入れる言語のこと。 （想定外のデータが放り込まれた時にバグになることが大変・想定でデータをいれるスペースを用意するため処理速度は遅くなる）
DOMとは、JavaScriptからHTMLドキュメントを操作するためのAPI。Nodeと呼ばれるオブジェクト一つ一つを、ツリー状にして管理している。
そのツリー状にしたまとまりを「変更前」と「変更後」の２パターンを仮想化したものが仮想DOM。その差分を検知して、差分のみを、元々のDOMに反映する。そうすることで、毎回DOMの中に入っているNodeの変更を順に１から探しに行くのではなく、差分だけ先に出してから反映させるので、一般的に処理が早くなると言われている。
