JavaScriptとは
JavaScriptは、ウェブページを動的にするためのプログラミング言語です。
JavaScriptは基本的にHTML、CSS、JavaScriptを使ってプログラムします。
HTMLがウェブページの骨組みを作り、CSSが見た目を整えます。
そしてJavaScriptは動的な部分を担当します。
テンプレートにCSSやJavaScriptを入れれば動的なウェブページを作る事が出来ます。
もちろんゲームも作れます！
変数
データを保存し、参照するためのものです。
var, let, constを使って変数を宣言します。
| var | 再代入可能 初期化なしでも宣言可能 ブロックスコープ（{}で囲まれた部分）を持たない （ifやforのブロック内で宣言されても、ブロック外からアクセスできます） |
| let | 再代入可能 初期化なしでも宣言可能 （同じスコープ内での再宣言は不可） ブロックスコープを持つ |
| const | 再代入不可 （オブジェクトや配列の内容は変更可能） 宣言時に初期化必須 ブロックスコープを持つ |
varはバグの原因になる要素があるのでletやconstが推奨されています。
基本データ型（プリミティブ型）
JavaScriptの基本的なデータ型で、それ以上分解できない単一の値を表します。
| Number | ・整数と浮動小数点数を表す |
| String |
・テキストデータを表す ・シングルクォート、ダブルクォート、バッククォートで囲む |
| Boolean |
・論理値を表す ・trueまたはfalseのみ |
| Undefined |
・値が割り当てられていない変数の初期値 ・関数が値を返さない場合の戻り値 |
| Null | ・意図的に「値がない」ことを表す |
| Symbol |
・一意で不変のプリミティブ値 ・主にオブジェクトのプロパティキーとして使用 |
| BigInt | ・任意精度の整数を表す |
複合データ型（参照型）
複数の値やデータ構造を含むことができる、より複雑なデータ型です。
| Object |
・キーと値のペアの集合 ・プロパティへのアクセス |
| Array |
・順序付きの値の集合 ・インデックスは0から始まる ・lengthプロパティで配列の長さを取得可能 |
| Function |
・実行可能なオブジェクト ・第一級オブジェクトとして扱われる （変数に代入可能、他の関数の引数や戻り値として使用可能） |
| Date | ・日付と時刻を表すオブジェクト |
| RegExp |
・正規表現オブジェクト ・パターンマッチングや文字列操作に使用 |
制御構造
プログラムの実行フローを制御するための構文です。
| if…else |
・条件に基づいて処理を分岐させる if (条件) { // 条件が真の場合の処理 } else if (別の条件) { // 別の条件が真の場合の処理 } else { // それ以外の場合の処理 } |
| switch |
・式の値に基づいて複数の分岐を行う switch(式) { case 値1: // 値1の場合の処理 break; case 値2: // 値2の場合の処理 break; default: // どの case にも一致しない場合の処理 } ・break を忘れると次の case に処理が続く |
| for |
・指定回数または条件が真の間、処理を繰り返す for (初期化; 条件; 更新) { // 繰り返し実行する処理 } |
| while |
・条件が真の間、処理を繰り返す while (条件) { // 繰り返し実行する処理 } ・条件を最初にチェックするので、条件が最初から偽の場合は一度も実行されない |
| do…while |
・処理を最低1回実行し、その後条件が真の間繰り返す do { // 繰り返し実行する処理 } while (条件); ・条件を最後にチェックするので、必ず1回は実行される |
| for…in |
・オブジェクトのプロパティを列挙する for (変数 in オブジェクト) { // 各プロパティに対する処理 } ・主にオブジェクトのプロパティ操作に使用 |
| for…of |
・イテラブルオブジェクト（配列など）の要素を反復処理する for (変数 of イテラブル) { // 各要素に対する処理 } ・配列の要素を直接操作する場合に便利 |
算術演算子
| + | 加算 |
| – | 減算 |
| * | 乗算 |
| / | 除算 |
| % | 剰余 |
| ** | べき乗 |
代入演算子
| = | 代入 |
| += | 加算代入 |
| -= | 減算代入 |
| *= | 乗算代入 |
| /= | 除算代入 |
| %= | 剰余代入 |
| **= | べき乗代入 |
比較演算子
| == | 等価 |
| === | 厳密等価 |
| != | 不等価 |
| !== | 厳密不等価 |
| > | より大きい |
| < | より小さい |
| >= | 以上 |
| <= | 以下 |
論理演算子
| && | 論理積（AND） |
| || | 論理和（OR） |
| ! | 論理否定（NOT） |
ビット演算子
| & | ビット積（AND） |
| | | ビット和（OR） |
| ^ | 排他的ビット和（XOR） |
| ~ | ビット否定（NOT） |
| << | 左シフト |
| >> | 符号付き右シフト |
| >>> | 符号なし右シフト |
その他の演算子
| ?: | 条件（三項）演算子 |
| , | カンマ演算子 |
| delete | プロパティ削除 |
| typeof | 型判定 |
| void | 未定義値を生成 |
| in | プロパティ存在確認 |
| instanceof | オブジェクトの型確認 |
関数
再利用可能なコードブロックを定義し、必要に応じて呼び出すことができます。
| 関数宣言 |
function 関数名(パラメータ1, パラメータ2, …) { // 関数の本体 return 戻り値; // 省略可能 } ・宣言前に呼び出し可能 |
| 関数式 |
const 変数名 = function(パラメータ1, パラメータ2, …) { // 関数の本体 return 戻り値; // 省略可能 }; ・宣言前に呼び出すとエラーになる |
| アロー関数 |
(パラメータ1, パラメータ2, …) => { // 関数の本体 return 戻り値; // 省略可能 } ・this のバインディングが通常の関数と異なる |
| パラメータと引数 |
・パラメータ：関数定義時の仮引数 ・引数：関数呼び出し時に渡す実際の値 |
| 関数の戻り値 |
・return 文で値を返す ・return がない場合や、値を指定しない場合は undefined を返す ・関数の実行を即座に終了させる |
| スコープとクロージャ |
・関数は独自のスコープを作成する ・外部スコープの変数にアクセス可能 ・クロージャ：外部スコープの変数を「記憶」する関数 |
数学関連の関数（Math オブジェクト）
数学的な操作を行うための関数群です。
| Math.random() | ・0以上1未満の乱数を生成する |
| Math.round() | ・数値を最も近い整数に丸める（四捨五入） |
| Math.floor() | ・数値を切り下げて整数にする |
| Math.ceil() | ・数値を切り上げて整数にする |
| Math.max() | ・引数の中で最大の数を返す |
| Math.min() | ・引数の中で最小の数を返す |
DOM操作
Document Object Model（DOM）を通じてHTMLやXML文書を操作するための方法です。
| 要素の取得 |
・document.getElementById(“ID”) ・document.getElementsByClassName(“class”) ・document.getElementsByTagName(“tag”) ・document.querySelector(“selector”) ・document.querySelectorAll(“selector”) |
| 要素の作成と追加 |
・document.createElement(“tag”) ・appendChild() ・insertBefore() |
| 要素の変更 |
・innerHTML ・textContent ・setAttribute() ・style |
| 要素の削除 |
・removeChild() ・remove() |
イベントハンドリング
ユーザーのアクションや特定の状況に応じて実行される処理を定義する方法です。
| イベントリスナーの追加 | ・addEventListener() |
| イベントリスナーの削除 | ・removeEventListener() |
| イベントオブジェクト |
・イベントハンドラの第一引数として自動的に渡される ・event.target: イベントが発生した要素を参照 ・event.preventDefault(): デフォルトの動作を阻止 ・event.stopPropagation(): イベントの伝播を停止 |
| よく使用されるイベント |
・click: クリック時 ・submit: フォーム送信時 ・keydown, keyup: キー操作時 ・load: 読み込み完了時 ・change: 値の変更時 |
配列操作メソッド
配列を効率的に操作するための組み込みメソッドです。
| 要素の追加・削除 |
・push(): 末尾に要素を追加 ・pop(): 末尾の要素を削除して返す ・unshift(): 先頭に要素を追加 ・shift(): 先頭の要素を削除して返す ・splice(): 要素の追加・削除・置換 |
| 配列の変換 |
・map(): 各要素に関数を適用し、新しい配列を作成 ・filter(): 条件に合う要素で新しい配列を作成 ・reduce(): 配列の要素を単一の値に縮小 ・slice(): 配列の一部を抽出して新しい配列を作成 |
| 配列の探索 |
・find(): 条件に合う最初の要素を返す ・findIndex(): 条件に合う最初の要素のインデックスを返す ・indexOf(): 指定した要素のインデックスを返す ・includes(): 指定した要素が含まれているかをチェック |
| 配列の反復処理 |
・forEach(): 各要素に対して関数を実行 ・every(): すべての要素が条件を満たすかチェック ・some(): いずれかの要素が条件を満たすかチェック |
文字列操作メソッド
文字列を操作するためのメソッド群です。
| length | ・文字列の長さ（文字数）を返す |
| toLowerCase() | ・文字列をすべて小文字に変換する |
| toUpperCase() | ・文字列をすべて大文字に変換する |
| trim() | ・文字列の両端の空白を削除する |
| split() | ・文字列を指定した区切り文字で分割し、配列にする |
| indexOf() | ・指定した部分文字列の最初の出現位置を返す |
その他よく使うメソッド
| alert() |
・メッセージボックスを表示する ・ユーザーに情報を通知する際に使用 |
| prompt() | ・ユーザーからの入力を受け付けるダイアログを表示する |
| confirm() | ・OK/キャンセルの選択ダイアログを表示する |
| click() | ・要素のクリックイベントを発生させる |
| join() | ・配列の要素を指定した区切り文字で連結し、文字列にする |
| Object.keys() | ・オブジェクトのプロパティ名を配列として取得する |
| Object.values() | ・オブジェクトの値を配列として取得する |
| Object.entries() | ・オブジェクトのキーと値のペアを配列として取得する |
| JSON.parse() | ・JSON文字列をJavaScriptオブジェクトに変換する |
| JSON.stringify() | ・JavaScriptオブジェクトをJSON文字列に変換する |
| fetch() | ・ネットワークリクエストを行い、レスポンスを取得する |