JavaScript 初心者向けチートシート

JavaScriptとは？

JavaScriptは、Webブラウザで動作するプログラミング言語です。Webページに動きをつけたり、ユーザーの操作に反応したりするインタラクティブなコンテンツを作成できます。HTMLで作った画面の「見た目」に、JavaScriptで「動き」を加えることができます。

プログラミング言語フロントエンド Web開発

変数の宣言

変数は情報を入れる「箱」のようなもの。箱に名前をつけて、後から中身を取り出したり変更したりできます。

// 変数の宣言（let: 値を変更できる）
let name = "太郎";
let age = 20;

// 定数の宣言（const: 値を変更できない）
const pi = 3.14;

// 変数の値を変更
name = "花子";  // OK
// pi = 3.15;   // エラー！constは変更不可

● let: 後で値を変更する可能性がある変数

● const: 値を変更しない定数（推奨）

● var: 古い書き方（使わない）

データ型

// 文字列（String）
let message = "こんにちは";
let greeting = 'Hello';

// 数値（Number）
let count = 10;
let price = 1980.5;

// 真偽値（Boolean）
let isActive = true;
let isFinished = false;

// 配列（Array）
let fruits = ["りんご", "バナナ", "みかん"];

// オブジェクト（Object）
let person = {
    name: "太郎",
    age: 20
};

// undefined（未定義）
let nothing;

// null（空）
let empty = null;

演算子

算術演算子

let a = 10;
let b = 3;

a + b;  // 13（足し算）
a - b;  // 7（引き算）
a * b;  // 30（掛け算）
a / b;  // 3.333...（割り算）
a % b;  // 1（余り）
a ** b; // 1000（累乗）

比較演算子

let x = 5;

x === 5;  // true（等しい）
x !== 3;  // true（等しくない）
x > 3;    // true（より大きい）
x < 10;   // true（より小さい）
x >= 5;   // true（以上）
x <= 5;   // true（以下）

// 注意: == は使わない
// === を使う（型も比較）

論理演算子

let a = true;
let b = false;

a && b;  // false（かつ/AND）
a || b;  // true（または/OR）
!a;      // false（否定/NOT）

// 複合条件
let age = 25;
let hasLicense = true;

// 20歳以上かつ免許あり
age >= 20 && hasLicense; // true

条件分岐（if文）

基本形

let age = 18;

if (age >= 20) {
    console.log("成人です");
} else if (age >= 13) {
    console.log("中高生です");
} else {
    console.log("子供です");
}

switch文

let day = "月";

switch (day) {
    case "月":
        console.log("Monday");
        break;
    case "火":
        console.log("Tuesday");
        break;
    default:
        console.log("その他");
}

繰り返し処理（ループ）

for文

// 0から4まで繰り返し
for (let i = 0; i < 5; i++) {
    console.log(i);
}
// 出力: 0, 1, 2, 3, 4

// 配列をループ
let fruits = ["りんご", "バナナ"];
for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

while文

// 条件が真の間繰り返し
let count = 0;
while (count < 3) {
    console.log(count);
    count++;
}
// 出力: 0, 1, 2

// 無限ループ注意
// while (true) {
//     // 終わらない
// }

for...of文

// 配列を簡単にループ
let colors = ["赤", "青", "緑"];
for (let color of colors) {
    console.log(color);
}
// 出力: 赤, 青, 緑

// 文字列もループ可能
for (let char of "Hello") {
    console.log(char);
}

関数

関数宣言

// 関数の定義
function greet(name) {
    return "こんにちは、" + name + "さん";
}

// 関数の呼び出し
let message = greet("太郎");
console.log(message);  // こんにちは、太郎さん

// 複数の引数
function add(a, b) {
    return a + b;
}
console.log(add(5, 3));  // 8

アロー関数

// アロー関数（短く書ける）
const greet = (name) => {
    return "こんにちは、" + name + "さん";
};

// さらに短く（1行の場合）
const add = (a, b) => a + b;
console.log(add(5, 3));  // 8

// 引数が1つなら括弧も省略可
const double = x => x * 2;
console.log(double(4));  // 8

配列とオブジェクト

配列（Array）

// 配列の作成
let fruits = ["りんご", "バナナ", "みかん"];

// アクセス（0から始まる）
console.log(fruits[0]);  // りんご

// 要素数
console.log(fruits.length);  // 3

// 追加
fruits.push("ぶどう");  // 末尾に追加
fruits.unshift("いちご");  // 先頭に追加

// 削除
fruits.pop();      // 末尾を削除
fruits.shift();    // 先頭を削除

// 検索
fruits.includes("バナナ");  // true
fruits.indexOf("みかん");   // 2

オブジェクト（Object）

// オブジェクトの作成
let person = {
    name: "太郎",
    age: 20,
    greet: function() {
        console.log("こんにちは");
    }
};

// アクセス
console.log(person.name);  // 太郎
console.log(person["age"]); // 20

// 追加・変更
person.email = "taro@example.com";
person.age = 21;

// メソッド呼び出し
person.greet();  // こんにちは

配列の便利なメソッド

map（変換）

// 全要素を変換
let numbers = [1, 2, 3, 4, 5];
let doubled = numbers.map(n => n * 2);
console.log(doubled);
// [2, 4, 6, 8, 10]

let fruits = ["りんご", "バナナ"];
let upper = fruits.map(f => f + "！");
// ["りんご！", "バナナ！"]

filter（絞り込み）

// 条件に合う要素だけ残す
let numbers = [1, 2, 3, 4, 5];
let evens = numbers.filter(n => n % 2 === 0);
console.log(evens);  // [2, 4]

let ages = [15, 25, 18, 30];
let adults = ages.filter(age => age >= 20);
// [25, 30]

reduce（集計）

// 合計を計算
let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((acc, n) => acc + n, 0);
console.log(sum);  // 15

// 最大値
let max = numbers.reduce((acc, n) => Math.max(acc, n));
console.log(max);  // 5

DOM操作（Webページの操作）

要素の取得

// IDで取得
let elem = document.getElementById("myId");

// クラス名で取得（複数）
let elems = document.getElementsByClassName("myClass");

// CSSセレクタで取得（1つ目）
let elem = document.querySelector(".myClass");

// CSSセレクタで取得（全部）
let elems = document.querySelectorAll("div.item");

// タグ名で取得
let ps = document.getElementsByTagName("p");

要素の操作

let elem = document.querySelector("#myDiv");

// テキストの変更
elem.textContent = "新しいテキスト";

// HTMLの変更
elem.innerHTML = "段落";

// スタイルの変更
elem.style.color = "red";
elem.style.fontSize = "20px";

// クラスの追加・削除
elem.classList.add("active");
elem.classList.remove("inactive");
elem.classList.toggle("highlight");

要素の作成・追加

// 新しい要素を作成
let newDiv = document.createElement("div");
newDiv.textContent = "新しい要素";
newDiv.className = "item";

// 親要素に追加
let parent = document.querySelector("#container");
parent.appendChild(newDiv);

// 特定の位置に挿入
parent.insertBefore(newDiv, parent.firstChild);

// 要素の削除
parent.removeChild(newDiv);

イベント処理

// クリックイベント
let btn = document.querySelector("#myButton");
btn.addEventListener("click", () => {
    alert("クリックされました！");
});

// 入力イベント
let input = document.querySelector("#myInput");
input.addEventListener("input", (e) => {
    console.log(e.target.value);
});

// フォーム送信
let form = document.querySelector("#myForm");
form.addEventListener("submit", (e) => {
    e.preventDefault();  // デフォルト動作を防ぐ
    // 処理
});

文字列の操作

基本操作

let str = "Hello World";

// 長さ
str.length;  // 11

// 大文字・小文字変換
str.toLowerCase();  // "hello world"
str.toUpperCase();  // "HELLO WORLD"

// 切り出し
str.slice(0, 5);     // "Hello"
str.substring(6, 11); // "World"

// 検索
str.indexOf("World");  // 6
str.includes("Hello"); // true

分割・結合

let text = "りんご,バナナ,みかん";

// 分割
let arr = text.split(",");
// ["りんご", "バナナ", "みかん"]

// 結合
let joined = arr.join(" - ");
// "りんご - バナナ - みかん"

// 置換
text.replace("りんご", "いちご");
// "いちご,バナナ,みかん"

テンプレート文字列

let name = "太郎";
let age = 20;

// テンプレート文字列（バッククォート）
let message = `私は${name}で、${age}歳です。`;
// "私は太郎で、20歳です。"

// 複数行
let html = `

    ${name}
    年齢: ${age}

`;

よく使うパターン

ボタンクリックで表示切替

// HTML: 
//       内容

let btn = document.querySelector("#btn");
let content = document.querySelector("#content");

btn.addEventListener("click", () => {
    content.classList.toggle("hidden");
});

入力値の取得

// HTML: 
//       

let input = document.querySelector("#name");
let btn = document.querySelector("#submit");

btn.addEventListener("click", () => {
    let value = input.value;
    console.log("入力値:", value);
});

リストの動的追加

// HTML: 
//       

let list = document.querySelector("#list");
let btn = document.querySelector("#add");

btn.addEventListener("click", () => {
    let li = document.createElement("li");
    li.textContent = "新しい項目";
    list.appendChild(li);
});

タイマー処理

// 3秒後に実行（1回のみ）
setTimeout(() => {
    console.log("3秒経過");
}, 3000);

// 1秒ごとに実行（繰り返し）
let intervalId = setInterval(() => {
    console.log("1秒経過");
}, 1000);

// タイマーを停止
clearInterval(intervalId);

実務で役立つTips

デバッグ

console.log()で変数の中身を確認。ブラウザの開発者ツール（F12）のConsoleタブで出力を見る。

エラー対策

===を使う（==は使わない）。constを優先して使う。セミコロン;を忘れずに。

非同期処理

async/awaitを使うとPromiseが読みやすくなる。try-catchでエラーハンドリングを忘れずに。

命名規則

変数名はキャメルケース（myVariableName）。定数は大文字スネークケース（MAX_COUNT）。

デバッグ（console.log）

基本

// 基本的な出力
console.log("Hello");
console.log(123);
console.log(true);

// 複数の値
console.log("名前:", name, "年齢:", age);

// オブジェクト
console.log({name, age});

レベル別

// 情報
console.log("通常のログ");

// 警告
console.warn("警告メッセージ");

// エラー
console.error("エラーメッセージ");

// テーブル表示
console.table([{a:1}, {a:2}]);

計測

// 処理時間計測
console.time("処理");
// 処理...
console.timeEnd("処理");

// グループ化
console.group("グループ");
console.log("項目1");
console.log("項目2");
console.groupEnd();