はじめに
今回の記事は、これまで学んできたJavaScriptの復習としてまとめていきます。
下記の書籍を参考に、学習内容の理解度を更に深めていきます。
復習内容
①では、chapter1～3を復習していきます。カラーピッカーを元に、HTMLやCSSから値を取得する、DOM操作について学びます。
1. JavaScriptでできること
JavaScriptとは、Webページに色んな機能を追加できるプログラミング言語のことを指します。主に、デザイナーやコーダーでは、Webサイトのアニメーション（フェードイン、スライドイン）などを非表示させる指示をすることができる言語です。
2. 値を習得する
document.querySelector("セレクター");
JavaScriptで、HTML内の要素を取得するには、querySelector()というメソッドを使います。()の中は、CSSで記述する書き方と同じです。
3. テキストを変更する
document.querySelector("セレクター").textContent = "テキスト要素:";
.textContentは、指定したセレクターに該当する要素のテキストコンテンツを取得するためのプロパティです。
4. DOMとは？
DOMとは、HTMLやXMLドキュメントの構造を表すオブジェクトモデルのことです。
JavaScriptを使ってWebページの内容を操作・変更するためのインターフェースを提供します。DOMを通じて、JavaScriptはHTML要素を取得したり、追加・削除したり、スタイルを変更したりできます。
DOMは、HTML文書全体を「ツリー構造」として表現します。ドキュメント全体をdocumentオブジェクトとして扱い、その中に各要素（div, p, imgなど）が親子関係を持つ形で配置されます。
5. 定数のまとめ方
定数（const）とは、一度値を割り当てると、その値を再代入できない変数を指します。constは再代入こそできませんが、オブジェクトや配列のプロパティや要素の変更は可能です。
// エラー
const name = "Taro";
name = "Taro";
// オブジェクトのプロパティは変更可能
const person = { name: "Taro" };
person.name = "Jiro";
6. 関数の使い方
関数とは、一連の処理をまとめた再利用可能なブロックのことを指します。関数を定義することで、同じ処理を何度も呼び出して実行できます。関数は、入力（引数）を受け取り、処理を実行し、結果を返すことができます。
// 関数宣言
function greet(name) {
return "Hello," + name + "!";
}
// 通常の関数式
const greet = function(name) {
return "Hello, " + name + "!";
};
// アロー関数式(変数に関数を代入)
const greet = (name) => {
return "Hello, " + name + "!";
};
場合によっては通常の関数式が良いという場面も出てきます。特に、アロー関数はコールバックやイベントハンドラのように簡潔に書けるケースに便利です。
thisを扱う必要がある場面では、通常の関数式や宣言を使うと良いと思います。
まとめ
今回は、JavaScriptの基本についてまとめました。次回は、イベント操作について復習します。