JavaScript入門向けチートシート

🔰 基本構文

JavaScriptはウェブページに動きをつけるプログラミング言語です。

                // 変数宣言
                let name = "田中"; // 再代入可能
                const age = 25;    // 再代入不可
                var old = "非推奨"; // 古い宣言方法
                

セミコロン;は各文の終わりに置きます（省略可能な場合もあり）

常にconstで宣言し、必要な場合のみletを使いましょう。varは避けてください。

コメントの書き方:

🧩 データ型

数値: 1, 2.5, -10
文字列: "こんにちは", 'JavaScript'
真偽値: true, false
配列: [1, 2, 3]
オブジェクト: {name: "太郎", age: 30}
null: 値の欠如
undefined: 値が未定義

                // 型の確認
                typeof "文字列"; // "string"
                typeof 42;      // "number"
                typeof true;    // "boolean"
                typeof {};      // "object"
                typeof [];      // "object" (注意！)
                

JavaScriptは動的型付け言語です。変数の型は自動的に決まります。

🧮 演算子

算術演算子:

                5 + 2;  // 足し算: 7
                5 - 2;  // 引き算: 3
                5 * 2;  // 掛け算: 10
                5 / 2;  // 割り算: 2.5
                5 % 2;  // 余り: 1
                5 ** 2; // べき乗: 25
                

比較演算子:

                5 == "5";  // 値の等価性: true
                5 === "5"; // 厳密な等価性: false
                5 != "6";  // 不等価: true
                5 !== "5"; // 厳密な不等価: true
                5 > 2;     // より大きい: true
                5 >= 5;    // 以上: true
                

比較は===（厳密等価）を使うのがベストプラクティスです！

🔀 条件分岐

if文の基本形:

                if (条件式) {
                  // 条件が true の場合の処理
                } else if (別の条件) {
                  // 別の条件が true の場合の処理
                } else {
                  // どの条件も false の場合の処理
                }
                

三項演算子（短縮if）:

                // 条件 ? trueの場合 : falseの場合
                const message = age >= 20 ? "成人" : "未成年";
                

switch文:

                switch (変数) {
                  case 値1:
                    // 処理1
                    break;
                  case 値2:
                    // 処理2
                    break;
                  default:
                    // どの条件にも一致しない場合
                }
                

🔄 ループ

for文:

                for (let i = 0; i < 5; i++) {
                  console.log(i); // 0, 1, 2, 3, 4
                }
                

while文:

                let i = 0;
                while (i < 5) {
                  console.log(i); // 0, 1, 2, 3, 4
                  i++;
                }
                

配列の繰り返し:

                const fruits = ["りんご", "バナナ", "オレンジ"];
                
                // forEach
                fruits.forEach((fruit, index) => {
                  console.log(`${index}: ${fruit}`);
                });
                
                // for...of (値を取得)
                for (const fruit of fruits) {
                  console.log(fruit);
                }
                
                // for...in (インデックスを取得)
                for (const index in fruits) {
                  console.log(index);
                }
                

🛠️ 関数

関数宣言:

                // 基本的な関数
                function greet(name) {
                  return `こんにちは、${name}さん！`;
                }
                
                // 関数呼び出し
                greet("田中"); // "こんにちは、田中さん！"
                

アロー関数:

                // 基本形
                const greet = (name) => {
                  return `こんにちは、${name}さん！`;
                };
                
                // 短縮形 (1行の場合)
                const greet = name => `こんにちは、${name}さん！`;
                

デフォルトパラメータ:

                function greet(name = "ゲスト") {
                  return `こんにちは、${name}さん！`;
                }
                
                greet(); // "こんにちは、ゲストさん！"
                

📚 配列操作

                // 配列の作成
                const fruits = ["りんご", "バナナ", "オレンジ"];
                
                // 要素の追加
                fruits.push("ぶどう");     // 末尾に追加
                fruits.unshift("いちご");  // 先頭に追加
                
                // 要素の削除
                fruits.pop();     // 末尾から削除して返す
                fruits.shift();   // 先頭から削除して返す
                fruits.splice(1, 2); // インデックス1から2つ削除
                

配列の便利なメソッド:

                // map: 各要素を変換した新しい配列を返す
                const numbers = [1, 2, 3];
                const doubled = numbers.map(num => num * 2);
                // [2, 4, 6]
                
                // filter: 条件に合う要素だけの新しい配列を返す
                const filtered = numbers.filter(num => num > 1);
                // [2, 3]
                
                // find: 条件に合う最初の要素を返す
                const found = numbers.find(num => num > 1);
                // 2
                

🧿 オブジェクト

                // オブジェクトの作成
                const person = {
                  name: "田中太郎",
                  age: 30,
                  greet: function() {
                    return `こんにちは、${this.name}です！`;
                  }
                };
                
                // プロパティへのアクセス
                person.name;  // "田中太郎"
                person["age"]; // 30
                
                // メソッドの呼び出し
                person.greet(); // "こんにちは、田中太郎です！"
                

オブジェクトの操作:

                // プロパティの追加
                person.job = "エンジニア";
                
                // プロパティの削除
                delete person.age;
                
                // オブジェクトのマージ
                const info = { height: 175, weight: 70 };
                const fullProfile = { ...person, ...info };
                

分割代入を使うと簡潔に書けます：

                    const { name, age } = person;
                    // name = "田中太郎", age = 30
                    

🖥️ DOM操作

要素の取得:

                // ID で要素を取得
                const el = document.getElementById("myId");
                
                // クラスで要素を取得 (複数)
                const elements = document.getElementsByClassName("myClass");
                
                // セレクタで要素を取得 (最初の1つ)
                const element = document.querySelector(".myClass");
                
                // セレクタで要素を取得 (すべて)
                const allElements = document.querySelectorAll("div");
                

要素の操作:

                // テキスト内容の変更
                element.textContent = "新しいテキスト";
                
                // HTML内容の変更
                element.innerHTML = "太字テキスト";
                
                // CSSの変更
                element.style.color = "red";
                element.style.fontSize = "16px";
                
                // クラスの追加/削除
                element.classList.add("active");
                element.classList.remove("hidden");
                element.classList.toggle("selected");
                

👆 イベント処理

                // イベントリスナーの追加
                element.addEventListener("click", function(e) {
                  console.log("クリックされました！");
                  e.preventDefault(); // デフォルト動作を防ぐ
                });
                
                // アロー関数でも可能
                element.addEventListener("mouseover", (e) => {
                  console.log("マウスオーバー！");
                });
                
                // イベントリスナーの削除
                element.removeEventListener("click", handlerFunction);
                

よく使うイベント:

click: クリック時
submit: フォーム送信時
keydown/keyup: キー押下/解放時
mouseover/mouseout: マウスイン/アウト時
load: ページ読み込み完了時

⏱️ 非同期処理

コールバック関数:

                setTimeout(() => {
                  console.log("3秒後に実行");
                }, 3000); // 3000ミリ秒 = 3秒
                

Promiseの使用:

                // Promiseの作成
                const myPromise = new Promise((resolve, reject) => {
                  // 非同期処理
                  if (/* 成功条件 */) {
                    resolve("成功データ");
                  } else {
                    reject("エラーメッセージ");
                  }
                });
                
                // Promiseの使用
                myPromise
                  .then(data => {
                    console.log(data); // "成功データ"
                  })
                  .catch(error => {
                    console.error(error); // "エラーメッセージ"
                  });
                

Async/Await構文:

                // async関数の定義
                async function fetchData() {
                  try {
                    // awaitでPromiseの完了を待つ
                    const response = await fetch('https://api.example.com/data');
                    const data = await response.json();
                    return data;
                  } catch (error) {
                    console.error('エラー:', error);
                  }
                }
                
                // 使用方法
                fetchData().then(data => {
                  console.log(data);
                });
                

📦 モジュール

モジュールのエクスポート (module.js):

                // 名前付きエクスポート
                export const name = "田中";
                export function greet() {
                  return "こんにちは";
                }
                
                // デフォルトエクスポート
                export default function() {
                  return "デフォルト関数";
                }
                

モジュールのインポート:

                // 名前付きインポート
                import { name, greet } from './module.js';
                
                // デフォルトインポート
                import defaultFunction from './module.js';
                
                // 名前変更
                import { name as userName } from './module.js';
                
                // すべてインポート
                import * as myModule from './module.js';
                // myModule.name, myModule.greet() で使用
                

モジュールを使うにはscriptタグにtype="module"属性を追加します：