JavaScript入門 Ver.2.4

1) あいさつ

学び：変数 / 文字列操作 / イベント

名前：

ここに結果が出るよ

2) 条件分岐

学び：if文 / 比較演算子 / 数値変換

年齢：判定ルール：

ここに判定が出るよ

3) 繰り返し

学び：for文 / 配列への追加

N（回数）：

ここに出るよ

// for文の書き方
for (let i = 1; i <= N; i++) {
  console.log(i);
}

4) 計算

学び：関数 / 引数 / 入力チェック

結果待ち...

5) class体験

学び：class / constructor / メソッド / インスタンス

classはオブジェクトの設計図。Personクラスで名前と年齢を持つインスタンスを作成してみよう。

状態表示エリア

// クラスの定義（設計図を作る）
class Person {
    // constructor: インスタンス生成時に呼ばれる
    constructor(name, age) {
        // this.xxx でインスタンスのプロパティを設定
        this.name = name;
        this.age = age;
    }
    // メソッド: インスタンスが持つ関数
    greet() {
        return `こんにちは、${this.name}です`;
    }
}

// インスタンスの作成（設計図から実体を作る）
const taro = new Person("太郎", 20);
taro.greet(); // → "こんにちは、太郎です"
taro.name;    // → "太郎"
taro.age;     // → 20

6) 非同期処理

学び：setTimeout / コールバック関数

ボタンを押してね

// 2秒待つ書き方
setTimeout(() => {
  alert("2秒たった！");
}, 2000);

7) メモ帳 (永続化)

学び：localStorageの基本

状態表示エリア

8) Cookie体験

学び：Cookie / 有効期限 / データ保存

Cookieはサーバーに自動送信される小さなデータ。有効期限を設定でき、ブラウザを閉じても保持される。

状態表示エリア

// Cookieの設定（7日間有効）
// max-age: 秒単位で有効期限を指定
document.cookie = "name=value; max-age=" + (7*24*60*60);

// Cookieの取得（全Cookie が文字列で返る）
console.log(document.cookie);
// → "name=value; other=data"

// Cookieの削除（max-age=0 で即期限切れ）
document.cookie = "name=; max-age=0";

9) TODOアプリ

学び：配列操作 / localStorage / Enterキー対応

クリックで完了/未完了

10) 天気予報

学び：fetch API / async/await / 外部API連携

都市：

ボタンを押すと天気情報を取得します

湿度:

風速:

// fetch APIの使い方
const res = await fetch(url);
const data = await res.json();
console.log(data);

11) 応用シャッフル (重複排除・状態保存)

学び：高度な配列操作 / Set(重複削除) / 状態管理

1行1項目。保存すると「マスター」になり、シャッフルすると「今の並び」が保存される。
リストをクリックすると「一時除外」もできるよ。

マスターデータ入力：

現在の並び順 (クリックで除外切替)：

ログ (画面内コンソール)

📚 JavaScript リファレンス

このページで使用しているJavaScriptの用語やメソッドをまとめました。カードをクリックすると詳細が表示されます。

const / let 基本

変数を宣言するキーワード

const: 再代入不可の変数（定数）を宣言

let: 再代入可能な変数を宣言

const name = "太郎";  // 変更不可
let age = 20;         // 変更可能
age = 21;             // OK

詳細を見る ▼

テンプレートリテラル基本

バッククォートで文字列を作成

バッククォート(`)で囲み、${}で変数を埋め込める

const name = "太郎";
const msg = `こんにちは、${name}さん！`;
// → "こんにちは、太郎さん！"

詳細を見る ▼

アロー関数基本

() => {} 形式の関数定義

従来のfunctionより短く書ける。イベントリスナーでよく使用

// 従来の書き方
function add(a, b) {
  return a + b;
}

// アロー関数
const add = (a, b) => a + b;

詳細を見る ▼

三項演算子基本

条件 ? 真 : 偽の形式

if文を1行で書ける便利な記法

const age = 20;
const status = age >= 18 ? "成人" : "未成年";
// → "成人"

詳細を見る ▼

分割代入基本

配列やオブジェクトから値を取り出す

複数の値を一度に変数に代入できる

// 配列の分割代入
const [a, b] = [1, 2];
// a = 1, b = 2

// オブジェクトの分割代入
const { name, age } = { name: "太郎", age: 20 };
// name = "太郎", age = 20

詳細を見る ▼

スプレッド構文基本

...を使って配列や引数を展開

配列のコピーや結合、関数の可変長引数に使用

const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4];
// → [1, 2, 3, 4]

function sum(...nums) {
  return nums.reduce((a, b) => a + b);
}

詳細を見る ▼

配列 (Array) 配列

複数の値を順序付けて格納

[]で作成。インデックスは0から始まる

const fruits = ["りんご", "みかん", "ぶどう"];
console.log(fruits[0]);  // "りんご"
console.log(fruits.length);  // 3

詳細を見る ▼

forEach 配列

配列の各要素に処理を実行

for文より直感的に書ける。戻り値はない

const nums = [1, 2, 3];
nums.forEach((n, i) => {
  console.log(`${i}: ${n}`);
});
// 0: 1
// 1: 2
// 2: 3

詳細を見る ▼

map 配列

配列を変換して新しい配列を返す

元の配列は変更せず、新しい配列を生成

const nums = [1, 2, 3];
const doubled = nums.map(n => n * 2);
// → [2, 4, 6]

詳細を見る ▼

filter 配列

条件に合う要素だけを抽出

trueを返した要素だけで新しい配列を作成

const nums = [1, 2, 3, 4, 5];
const evens = nums.filter(n => n % 2 === 0);
// → [2, 4]

詳細を見る ▼

Set 配列

重複のない値の集合

配列から重複を削除するのに便利

const arr = [1, 2, 2, 3, 3, 3];
const unique = [...new Set(arr)];
// → [1, 2, 3]

詳細を見る ▼

DOM DOM

Document Object Model

HTMLをJavaScriptで操作するための仕組み。ページの要素を取得・変更できる

// 要素の取得
const el = document.getElementById("myId");

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

詳細を見る ▼

addEventListener DOM

イベントリスナーを登録

クリックやキー入力などのイベントを監視

const btn = document.getElementById("btn");
btn.addEventListener("click", () => {
  alert("クリックされました！");
});

詳細を見る ▼

createElement DOM

新しいHTML要素を動的に作成

JavaScriptでHTML要素を生成する

const div = document.createElement("div");
div.textContent = "動的に作成";
div.className = "my-class";
document.body.appendChild(div);

詳細を見る ▼

textContent vs innerHTML DOM

テキストとHTMLの違い

textContent: 安全（XSS対策）
innerHTML: HTMLとして解釈（危険な場合あり）

// 安全
el.textContent = "<script>alert('!')</script>";
// → そのまま文字として表示

// 危険（ユーザー入力には使わない）
el.innerHTML = "太字";
// → HTMLとして解釈される

詳細を見る ▼

setTimeout 非同期

指定時間後に処理を実行

ミリ秒単位で遅延実行

setTimeout(() => {
  console.log("2秒後に実行");
}, 2000);

console.log("これが先に実行される");

詳細を見る ▼

Promise 非同期

非同期処理の結果を表すオブジェクト

成功(resolve)か失敗(reject)の状態を持つ

const promise = new Promise((resolve, reject) => {
  if (成功) {
    resolve("成功データ");
  } else {
    reject("エラー");
  }
});

promise
  .then(data => console.log(data))
  .catch(err => console.error(err));

詳細を見る ▼

async / await 非同期

Promiseをシンプルに書く

非同期処理を同期的に書けるシンタックスシュガー

async function getData() {
  try {
    const res = await fetch(url);
    const data = await res.json();
    return data;
  } catch (err) {
    console.error(err);
  }
}

詳細を見る ▼

fetch 非同期

HTTPリクエストを送信

Web APIからデータを取得する標準的な方法

const response = await fetch("https://api.example.com/data");
const data = await response.json();

// POSTリクエスト
await fetch(url, {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ key: "value" })
});

詳細を見る ▼

localStorage ストレージ

ブラウザにデータを永続保存

ページを閉じてもデータが残る。文字列のみ保存可能

// 保存
localStorage.setItem("key", "value");

// 取得
const value = localStorage.getItem("key");

// 削除
localStorage.removeItem("key");

// オブジェクトの保存
localStorage.setItem("obj", JSON.stringify({ a: 1 }));
const obj = JSON.parse(localStorage.getItem("obj"));

詳細を見る ▼

JSON ストレージ

JavaScript Object Notation

データ交換フォーマット。文字列とオブジェクトを相互変換

// オブジェクト → 文字列
const str = JSON.stringify({ name: "太郎", age: 20 });
// → '{"name":"太郎","age":20}'

// 文字列 → オブジェクト
const obj = JSON.parse('{"name":"太郎","age":20}');
// → { name: "太郎", age: 20 }

詳細を見る ▼

Cookie ストレージ

サーバーとやり取りする小さなデータ

有効期限を設定可能。HTTPリクエストに自動で送信される。4KB程度の容量制限あり

// Cookieの設定（有効期限7日）
document.cookie = "username=太郎; max-age=" + (7*24*60*60);

// Cookieの取得（全てのCookieが文字列で返る）
console.log(document.cookie);
// → "username=太郎; theme=dark"

// 特定のCookieを取得する関数
function getCookie(name) {
    const cookies = document.cookie.split("; ");
    for (const c of cookies) {
        const [key, value] = c.split("=");
        if (key === name) return value;
    }
    return null;
}

// Cookieの削除（過去の日時を設定）
document.cookie = "username=; max-age=0";

詳細を見る ▼

class 基礎構文

オブジェクトの設計図を定義

ES6で導入。constructorで初期化、メソッドを定義してインスタンスを作成

// クラスの定義
class Person {
    // コンストラクタ（初期化処理）
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    // メソッドの定義
    greet() {
        return `こんにちは、${this.name}です`;
    }

    // 静的メソッド（インスタンス不要）
    static createAnonymous() {
        return new Person("匿名", 0);
    }
}

// インスタンスの作成
const taro = new Person("太郎", 20);
console.log(taro.greet()); // → "こんにちは、太郎です"

// 継承
class Student extends Person {
    constructor(name, age, grade) {
        super(name, age); // 親クラスのコンストラクタを呼び出し
        this.grade = grade;
    }
}

詳細を見る ▼

📝 文字列メソッド ▼

メソッド	説明	例
`trim()`	前後の空白を削除	`" hello ".trim()` → `"hello"`
`split()`	文字列を分割して配列に	`"a,b,c".split(",")` → `["a","b","c"]`
`toLowerCase()`	小文字に変換	`"ABC".toLowerCase()` → `"abc"`
`toUpperCase()`	大文字に変換	`"abc".toUpperCase()` → `"ABC"`
`includes()`	文字列を含むか判定	`"hello".includes("ell")` → `true`
`replace()`	文字列を置換	`"hello".replace("l", "L")` → `"heLlo"`

📦 配列メソッド ▼

メソッド	説明	元配列を変更?
`push()`	末尾に要素を追加	する
`pop()`	末尾の要素を削除して返す	する
`shift()`	先頭の要素を削除して返す	する
`unshift()`	先頭に要素を追加	する
`splice()`	要素の追加/削除	する
`slice()`	部分配列を取得	しない
`map()`	各要素を変換	しない
`filter()`	条件に合う要素を抽出	しない
`forEach()`	各要素に処理を実行	しない
`find()`	条件に合う最初の要素	しない
`findIndex()`	条件に合う最初のインデックス	しない
`reduce()`	配列を1つの値に集約	しない
`join()`	配列を文字列に結合	しない
`includes()`	要素が含まれるか判定	しない

🌐 DOM操作メソッド ▼

メソッド	説明	戻り値
`getElementById()`	IDで要素を取得	Element / null
`querySelector()`	CSSセレクタで要素を取得	Element / null
`querySelectorAll()`	CSSセレクタで全要素を取得	NodeList
`createElement()`	新しい要素を作成	Element
`appendChild()`	子要素を追加	追加した要素
`removeChild()`	子要素を削除	削除した要素
`addEventListener()`	イベントリスナーを登録	undefined
`setAttribute()`	属性を設定	undefined
`getAttribute()`	属性を取得	文字列 / null
`classList.add()`	クラスを追加	undefined
`classList.remove()`	クラスを削除	undefined
`classList.toggle()`	クラスを切り替え	boolean

🔢 数値・Mathメソッド ▼

メソッド	説明	例
`Number()`	数値に変換	`Number("42")` → `42`
`parseInt()`	整数に変換	`parseInt("42.5")` → `42`
`parseFloat()`	小数に変換	`parseFloat("3.14")` → `3.14`
`Number.isFinite()`	有限数か判定	`Number.isFinite(42)` → `true`
`Math.floor()`	切り捨て	`Math.floor(3.7)` → `3`
`Math.ceil()`	切り上げ	`Math.ceil(3.2)` → `4`
`Math.round()`	四捨五入	`Math.round(3.5)` → `4`
`Math.random()`	0以上1未満の乱数	`Math.random()` → `0.xxx`
`Math.min()`	最小値	`Math.min(1, 2, 3)` → `1`
`Math.max()`	最大値	`Math.max(1, 2, 3)` → `3`

🔤 変数宣言

定数（再代入不可） const x = 1

変数（再代入可） let x = 1

非推奨 var x = 1

📊 データ型

文字列 "hello" / 'hello'

数値 42 / 3.14

真偽値 true / false

配列 [1, 2, 3]

オブジェクト {a: 1, b: 2}

null/undefined null / undefined

⚡ 比較演算子

等しい（型も比較） ===

等しくない !==

より大きい >

以上 >=

より小さい <

以下 <=

🔗 論理演算子

AND（かつ） &&

OR（または） ||

NOT（否定） !

Nullish合体 ??

🔁 ループ構文

for文 for(let i=0; i<n; i++)

for...of for(const x of arr)

for...in for(const k in obj)

while while(条件) {...}

📥 関数定義

関数宣言 function f() {}

関数式 const f = function() {}

アロー関数 const f = () => {}

省略形 const f = x => x * 2

🗃️ localStorage

保存 setItem(key, val)

取得 getItem(key)

削除 removeItem(key)

全削除 clear()

🌐 fetch API

GET await fetch(url)

JSON取得 await res.json()

ステータス確認 res.ok / res.status

問題を読み込み中...

1 / 10

スコア履歴

まだクイズを完了していません

JavaScript入門：Ver 2.4

1) あいさつ

2) 条件分岐

3) 繰り返し

4) 計算

5) class体験

6) 非同期処理

7) メモ帳 (永続化)

8) Cookie体験

9) TODOアプリ

10) 天気予報

11) 応用シャッフル (重複排除・状態保存)

ログ (画面内コンソール)

📚 JavaScript リファレンス

スコア履歴

🗺️ おすすめ学習パス