Javascript入門｜ロードマップに沿ったJavascript解説

Javascriptとは
Javascriptの特徴
Javascriptの基礎文法
配列・オブジェクト操作
DOM操作の基本
スタイルの変更
イベント処理
非同期処理の基本
まとめ

Javascriptとは

JavaScriptはWeb開発の鍵となるプログラミング言語で、フロントエンド開発では必須の技術です。クリックや入力に応じて画面が変化するなど、Webサイトにインタラクティブな動きを加えることができます。さらに、Webブラウザだけでなく、サーバーサイド（Node.js）やデスクトップアプリでも動作し、柔軟性が高く常に進化しているため、あらゆるWeb開発で人気があります。

Javascriptの特徴

ブラウザ上で直接実行できる
DOM操作やイベント処理に強い
ES6以降の新機能でモダンな書き方が可能
フロントエンドだけでなく、Node.jsでサーバーサイド開発も可能

Javascriptの基礎文法

初心者が最初に学ぶべきは変数・定数、データ型、演算子、条件分岐、ループ、関数です。これらの基礎を押さえることで、応用や実践開発にもスムーズに進めます。

変数と定数

JavaScriptでは、値を保存して後から参照するために「変数」や「定数」を使います。
特によく使うのが let と const です。

let：値を変更できる変数

宣言後に値を上書きできる
値が変化する可能性があるときに使う
再宣言（同じ名前で再び宣言すること）はできない

let count = 1;
count = 2; // OK: 値の上書き
console.log(count); // 2

使いどころ例

カウンターや状態を変化させたいとき
ループ処理で使う変数

const：値を変更できない定数

宣言時に必ず初期値を設定する必要がある
値の再代入はできない
配列やオブジェクトを入れた場合、中身の変更は可能（ただし変数そのものは別の値にできない）

const PI = 3.14;
// PI = 3.1415; // エラー：再代入不可

const fruits = ['apple', 'banana'];
fruits.push('orange'); // OK: 中身の変更
console.log(fruits); // ['apple', 'banana', 'orange']

使いどころ例

変更してはいけない値（定数）を扱うとき
関数やオブジェクトの参照を固定したいとき

使い分けのポイント

基本はconstを使う
→ 値を変える必要がある場合のみletを使う
これにより、意図しない値の変更を防げる

💡 まとめ

letは「変わるかもしれない値」
constは「変わらない値」
チーム開発や大規模プロジェクトでは、const中心に書くのが一般的

データ型（文字列・数値・配列・オブジェクト）

文字列（String）

文字や文章を扱う型です。
文字列は '（シングルクォート）や "（ダブルクォート）、または `（バッククォート）で囲みます。

let name = "Taro";
let message = 'Hello, World!';
let template = `こんにちは、${name}さん！`; // テンプレートリテラル

💡 ポイント

テンプレートリテラル（`...${変数}...`）を使うと、変数や式を埋め込みやすい
文字列は+演算子で連結可能

let fullName = "Taro" + " " + "Yamada";
console.log(fullName); // "Taro Yamada"

数値（Number）

整数や小数を表す型です。JavaScriptでは整数型と小数型の区別はなく、すべてNumber型として扱われます。

let age = 25;
let price = 99.99;

💡 ポイント

四則演算（+ – * /）が可能
NaN（Not a Number）という特殊な値もNumber型

console.log(10 + 5); // 15
console.log("abc" * 3); // NaN

配列（Array）

複数の値を1つにまとめて管理する型です。
配列の要素は角括弧 [ ] で囲み、カンマ区切りで並べます。

let fruits = ["apple", "banana", "orange"];
console.log(fruits[0]); // "apple"

💡 ポイント

インデックス（位置番号）は0から始まる
.push() で要素追加、.length で要素数取得

fruits.push("grape");
console.log(fruits.length); // 4

オブジェクト（Object）

複数のデータを「名前（キー）」と「値」でまとめた型です。
波括弧 { } で囲み、キー: 値 のペアで記述します。

let person = {
  name: "Taro",
  age: 25,
  hobby: "soccer"
};

console.log(person.name); // "Taro"
console.log(person["hobby"]); // "soccer"

💡 ポイント

配列が「順番でアクセスするデータの集まり」なのに対し、オブジェクトは「名前でアクセスするデータの集まり」
ネスト（入れ子）構造も可能

let user = {
  name: "Hanako",
  address: {
    city: "Tokyo",
    zip: "100-0001"
  }
};
console.log(user.address.city); // "Tokyo"

まとめ

データ型	記述例	特徴
文字列 (String)	`"Hello"`	文章や文字を扱う
数値 (Number)	`100`, `3.14`	整数・小数どちらもNumber型
配列 (Array)	`["a", "b"]`	順番で管理するデータの集まり
オブジェクト (Object)	`{key: value}`	名前で管理するデータの集まり

💡 おすすめの覚え方

文字列 → “文字を包む袋”
数値 → “計算できる値”
配列 → “番号付きの棚”
オブジェクト → “名前付きの引き出し”

演算子の種類と使い方

算術演算子（Arithmetic Operators）

数値や変数の計算に使います。

演算子	意味	例	結果
`+`	足し算	`5 + 3`	`8`
`-`	引き算	`5 - 3`	`2`
`*`	掛け算	`5 * 3`	`15`
`/`	割り算	`6 / 3`	`2`
`%`	余り	`7 % 3`	`1`
`**`	累乗	`2 ** 3`	`8`

💡 ポイント
+ は文字列でも使えます → "Hello" + "World" → "HelloWorld"

代入演算子（Assignment Operators）

変数に値を代入するときに使います。

演算子	意味	例	結果
`=`	値を代入	`let x = 5;`	`x` に 5 が入る
`+=`	足して代入	`x += 3;`	`x = x + 3`
`-=`	引いて代入	`x -= 3;`	`x = x - 3`
`*=`	掛けて代入	`x *= 3;`	`x = x * 3`
`/=`	割って代入	`x /= 3;`	`x = x / 3`

比較演算子（Comparison Operators）

値を比較して、true または false を返します。

演算子	意味	例	結果
`==`	値が等しい（型は無視）	`5 == "5"`	`true`
`===`	値と型が等しい	`5 === "5"`	`false`
`!=`	値が異なる（型は無視）	`5 != "5"`	`false`
`!==`	値または型が異なる	`5 !== "5"`	`true`
`>`	より大きい	`7 > 5`	`true`
`<`	より小さい	`3 < 5`	`true`
`>=`	以上	`5 >= 5`	`true`
`<=`	以下	`4 <= 5`	`true`

💡 ポイント
比較は基本的に === を使うのが安全です（型の違いによるバグ防止）。

論理演算子（Logical Operators）

複数の条件を組み合わせるときに使います。

演算子	意味	例	結果
`&&`	AND（かつ）	`(5 > 3) && (8 > 6)`	`true`
`\|\|`	OR（または）	`(5 > 10) \|\| (8 > 6)`	`true`
`!`	NOT（否定）	`!(5 > 3)`	`false`

その他の演算子

三項演算子（条件式 ? 真の値 : 偽の値）

let age = 20;
let message = (age >= 18) ? "成人です" : "未成年です";
console.log(message); // 成人です

typeof（データ型を調べる）

typeof "Hello" // "string"
typeof 42      // "number"

まとめ

算術演算子 → 計算
代入演算子 → 値の更新
比較演算子 → 条件判断
論理演算子 → 条件の組み合わせ

条件分岐（if / switch）

if文

if 文は「もし〜なら…する」という条件を設定するための最も基本的な書き方です。

if (条件) {
  // 条件がtrueのとき実行される処理
} else if (別の条件) {
  // 上の条件がfalseで、この条件がtrueのとき実行
} else {
  // どの条件も満たさなかったときに実行
}

switch文

switch 文は、1つの変数や値に対して複数の候補から分岐を選ぶ場合に便利です。
特に値が完全一致する場合の分岐で使います。

switch (値) {
  case 値1:
    // 値が値1と一致したときの処理
    break;
  case 値2:
    // 値が値2と一致したときの処理
    break;
  default:
    // どのcaseにも一致しないときの処理
}

まとめ

if文：
条件式が範囲比較や複雑な論理式になる場合に向いている。
例：if (age >= 18 && age < 65)
switch文：
値が複数の候補の中から完全一致で選ばれる場合に向いている。
例：switch (color) { case "red": ... }

ループ処理（for / while / forEach）

for文

決まった回数の繰り返しに向いているループです。
初期化、条件式、更新の3つを指定して使います。

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

初期化：let i = 0 → カウンタ変数を設定
条件式：i < 5 → 条件がtrueの間、処理を続ける
更新：i++ → 1ずつ増やす

while文

条件がtrueである限り繰り返すループです。
繰り返す回数が決まっていない場合に便利です。

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

条件式はループの先頭で評価されるため、最初にfalseなら1回も実行されません。

forEachメソッド

配列専用のループ処理です。配列の各要素に対して順番に処理を行います。
コードが簡潔になり、可読性が高いのが特徴です。

const fruits = ["apple", "banana", "orange"];

fruits.forEach(function(fruit, index) {
  console.log(index, fruit);
});
// 出力：
// 0 apple
// 1 banana
// 2 orange

第一引数：配列の要素
第二引数：要素のインデックス番号
アロー関数も使えます：fruits.forEach((fruit, i) => console.log(i, fruit));

まとめ

for文：回数が決まっている処理向き
while文：条件がtrueの間繰り返す処理向き
forEach：配列の要素を順番に処理するのに最適

関数の定義と呼び出し

JavaScriptで関数は、特定の処理をまとめて再利用できるようにする仕組みです。
同じ処理を何度も書くのではなく、関数として定義しておくことでコードの効率化・可読性の向上・保守性の改善ができます。

1. 関数の定義方法

関数にはいくつかの書き方がありますが、主に以下の3種類がよく使われます。

① 関数宣言（Function Declaration）

もっとも基本的な定義方法です。

function greet(name) {
  console.log(`こんにちは、${name}さん！`);
}

特徴：定義より前に呼び出しても動作します（ホイスティングされるため）。
使いどころ：シンプルな場面や、コードの上部にまとめて関数を書きたいとき。

② 関数式（Function Expression）

関数を変数に代入して定義します。

const greet = function(name) {
  console.log(`こんにちは、${name}さん！`);
};

特徴：代入より前に呼び出すとエラーになります（ホイスティングされない）。
使いどころ：条件に応じて関数を切り替えるなど、柔軟な書き方が必要なとき。

③ アロー関数（Arrow Function）

短い記法で書けるモダンな関数定義方法です（ES6以降）。

const greet = (name) => {
  console.log(`こんにちは、${name}さん！`);
};

特徴：より簡潔に書けるが、thisの挙動が通常の関数と異なる（クラスやイベントでの使い方に注意）。
使いどころ：短い処理やコールバック関数に最適。

関数の呼び出し

定義した関数は関数名(引数)という形で呼び出します。

greet("太郎"); // 出力: こんにちは、太郎さん！

引数（Arguments）：関数に渡す値。複数ある場合はカンマで区切ります。
戻り値（Return Value）：returnキーワードを使って関数から値を返せます。

戻り値のある関数

function add(a, b) {
  return a + b;
}

const result = add(3, 5);
console.log(result); // 8

returnを使わない場合、関数はundefinedを返します。

引数のデフォルト値

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

greet(); // こんにちは、ゲストさん！

引数を省略したときに自動的に適用される値を設定できます。

まとめ

function宣言：古くからある基本的な方法。ホイスティングされる。
関数式：柔軟な代入形式。ホイスティングされない。
アロー関数：短い記法。thisの挙動に注意。
関数は再利用性と可読性を高める重要な要素なので、目的に応じて書き方を使い分けましょう。

スコープとクロージャ

これらは「変数がどこまで使えるか」「関数が変数をどう保持するか」と深く関わっています。

スコープ（Scope）とは

スコープとは、変数や関数が有効となる範囲のことです。
JavaScriptでは主に次の種類のスコープがあります。

① グローバルスコープ

プログラム全体からアクセスできる変数。

const globalVar = "グローバル";

function show() {
  console.log(globalVar); // どこからでも参照できる
}

show(); // "グローバル"

注意点：グローバル変数はどこからでも書き換えられるため、予期せぬバグの原因になることがあります。

② ローカルスコープ（関数スコープ）

関数の中で定義された変数は、その関数の外からは使えません。

function test() {
  const localVar = "ローカル";
  console.log(localVar); // OK
}

test();
console.log(localVar); // エラー: localVar is not defined

③ ブロックスコープ（`let` / `const`）

letやconstで宣言した変数は{}（ブロック）内だけ有効です。

if (true) {
  let x = 10;
  const y = 20;
  console.log(x, y); // 10 20
}

console.log(x); // エラー: x is not defined

一方で、varはブロックスコープを無視して関数スコープになるため、予期しない挙動を引き起こすことがあります。

2. クロージャ（Closure）とは

クロージャとは、「関数が定義されたときのスコープを保持し続ける仕組み」のことです。

クロージャの基本

function createCounter() {
  let count = 0; // 外から直接アクセスできない「プライベート変数」

  return function() {
    count++;
    return count;
  };
}

const counter = createCounter();

console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3

createCounterの中のcountは本来スコープの外から見えません。
しかし、returnした関数がcountを「閉じ込めて」保持しているため、呼び出すたびにcountが増えます。

クロージャが役立つ場面

データのカプセル化（プライベート変数の実現）
- グローバル変数を使わずに、内部だけで変数を管理できる。
状態の保持
- 関数を呼び出すたびに前回の値を記録しておける。
関数の部分適用・カスタマイズ

function createMultiplier(multiplier) {
  return function(num) {
    return num * multiplier;
  };
}

const double = createMultiplier(2);
console.log(double(5)); // 10

const triple = createMultiplier(3);
console.log(triple(5)); // 15

➡️ multiplierを保持した関数を作れるため、柔軟な関数生成が可能。

まとめ

スコープ
- グローバル：全体で有効
- 関数スコープ：関数内のみ有効
- ブロックスコープ：letやconstでブロック単位で有効
クロージャ
- 関数が定義されたスコープを保持し続ける仕組み
- プライベート変数や状態管理、関数生成に役立つ

配列・オブジェクト操作

JavaScriptでよく使うデータ型に配列と オブジェクト があります。これらを効率的に操作することで、複雑な処理をシンプルに書けるようになります。

配列操作の基本メソッド

map

配列の 各要素を変換して新しい配列を作る
元の配列は変更されない

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);

console.log(doubled); // [2, 4, 6, 8]

👉 「配列を加工して新しい配列を作りたい」ときに使います。

filter

条件に合う要素だけを抽出して 新しい配列を作る

const numbers = [1, 2, 3, 4, 5];
const even = numbers.filter(num => num % 2 === 0);

console.log(even); // [2, 4]

👉 「条件に合うものだけ取り出したい」ときに使います。

reduce

配列の要素を ひとつの値にまとめる
例：合計値、最大値、オブジェクト作成など

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, current) => acc + current, 0);

console.log(sum); // 15

👉 「配列を集約して一つの結果にしたい」ときに使います。

オブジェクト操作の基本

オブジェクトは「キーと値」の組み合わせでデータを管理します。

const user = {
  name: "Taro",
  age: 25,
  job: "Engineer"
};

console.log(user.name); // "Taro"
console.log(user["age"]); // 25

オブジェクトの展開（スプレッド構文）

新しいオブジェクトを作るときに便利

const user = { name: "Taro", age: 25 };
const newUser = { ...user, job: "Engineer" };

console.log(newUser); // { name: "Taro", age: 25, job: "Engineer" }

分割代入

オブジェクトのプロパティを変数に取り出す

const user = { name: "Taro", age: 25 };

const { name, age } = user;
console.log(name); // "Taro"
console.log(age);  // 25

配列とオブジェクトを組み合わせて操作する

現実の開発では、配列の中にオブジェクトが入っているデータ構造を扱うことが多いです。

const users = [
  { name: "Taro", age: 25 },
  { name: "Hanako", age: 30 },
  { name: "Jiro", age: 20 }
];

// 30歳以上のユーザーだけ抽出
const adults = users.filter(user => user.age >= 30);
console.log(adults); // [{ name: "Hanako", age: 30 }]

// 名前のリストを作成
const names = users.map(user => user.name);
console.log(names); // ["Taro", "Hanako", "Jiro"]

// 年齢の合計
const totalAge = users.reduce((sum, user) => sum + user.age, 0);
console.log(totalAge); // 75

まとめ

map → 要素を変換して新しい配列を作る
filter → 条件に合う要素だけ抽出
reduce → 配列をひとつの値にまとめる
オブジェクト操作 → スプレッド構文・分割代入で効率的に扱える

DOM操作の基本

JavaScriptを使うと、DOM（Document Object Model）を操作して、HTML要素を取得・変更・追加・削除することができます。DOMとは、Webページをツリー構造として表現したものです。ページ内のHTML要素をオブジェクトとして扱えるため、JavaScriptで自由に操作できます。

要素の取得

HTML内の要素を取得するには、以下のようなメソッドを使います。

// idで取得
const title = document.getElementById("main-title");

// クラス名で取得（複数の場合は配列風オブジェクトで返る）
const items = document.getElementsByClassName("list-item");

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

// CSSセレクタで取得（最初の1つだけ）
const firstItem = document.querySelector(".list-item");

// CSSセレクタで取得（すべて）
const allItems = document.querySelectorAll(".list-item");

✅ おすすめは querySelector と querySelectorAll
CSSセレクタをそのまま使えるので柔軟性が高く、モダンな開発では主流です。

要素の内容を変更

取得した要素のテキストやHTMLを変更できます。

const title = document.getElementById("main-title");

// テキストを変更
title.textContent = "こんにちは、JavaScript！";

// HTMLを変更（タグを含めて反映）
title.innerHTML = "<span style='color:red'>赤文字</span>";

textContent → テキストのみを扱う（安全）
innerHTML → HTMLタグも解釈する（便利だがXSSリスクあり）

属性の操作

HTML要素の属性（id, src, href など）を変更できます。

const link = document.querySelector("a");

// 属性を取得
console.log(link.getAttribute("href"));

// 属性を変更
link.setAttribute("href", "https://example.com");

// 直接プロパティを変更する方法もある
link.href = "https://example.org";

スタイルの変更

CSSをJavaScriptから操作できます。

const box = document.querySelector(".box");

// インラインスタイルを変更
box.style.color = "blue";
box.style.backgroundColor = "yellow";

// クラスを付け替えてスタイルを変更するのが一般的
box.classList.add("active");   // クラスを追加
box.classList.remove("hidden"); // クラスを削除
box.classList.toggle("dark");  // ON/OFF切り替え

✅ classList を使うのがベストプラクティスです。
スタイルを直接書き込むより、CSSクラスを切り替える方が保守性が高くなります。

要素の追加・削除

新しい要素を作って追加したり、既存の要素を削除したりできます。

// 新しい要素を作成
const newItem = document.createElement("li");
newItem.textContent = "新しい項目";

// 親要素に追加
const list = document.querySelector("ul");
list.appendChild(newItem);

// 先頭に追加
list.prepend(newItem);

// 要素を削除
list.removeChild(list.firstElementChild);

// 直接削除する方法（モダン）
newItem.remove();

まとめ

要素追加・削除 → createElement, appendChild, remove
要素を取得 → querySelector / querySelectorAll
テキスト変更 → textContent
属性操作 → getAttribute / setAttribute
スタイル変更 → classList

イベント処理

JavaScriptでは、ユーザーの操作（クリック・入力・スクロールなど）やブラウザの動作に応じてイベントが発生します。
このイベントに対して処理を実行する仕組みを イベント処理（イベントハンドリング） といいます。

よく使われるイベントの種類

マウス関連
- click（クリック）
- dblclick（ダブルクリック）
- mouseover（マウスが乗った）
- mouseout（マウスが離れた）
キーボード関連
- keydown（キーを押した瞬間）
- keyup（キーを離した瞬間）
- keypress（キーを押している間）
フォーム関連
- input（入力があった）
- change（値が変更された）
- submit（フォーム送信）
その他
- scroll（スクロール）
- resize（ウィンドウサイズ変更）
- load（ページ読み込み完了）

イベントの登録方法

方法①：HTMLに直接書く（非推奨）

<button onclick="alert('クリックされました！')">クリック</button>

👉 学習用としては分かりやすいですが、コードの分離ができず保守性が低いので実務ではほとんど使いません。

方法②：プロパティに代入

const btn = document.querySelector("#myBtn");

btn.onclick = function() {
  alert("ボタンがクリックされました！");
};

👉 簡単ですが、1つのイベントにつき1つの処理しか登録できないという制約があります。

方法③：`addEventListener`（推奨）

const btn = document.querySelector("#myBtn");

btn.addEventListener("click", () => {
  alert("クリックイベント1");
});

btn.addEventListener("click", () => {
  alert("クリックイベント2");
});

✅ 複数の処理を登録でき、最もよく使われる方法です。

イベントオブジェクト

イベント発生時には「どの要素で」「どんな操作があったのか」を表す イベントオブジェクト が渡されます。

const input = document.querySelector("#username");

input.addEventListener("input", (event) => {
  console.log("入力された文字:", event.target.value);
});

event.target → イベントが起きた要素
event.type → イベントの種類（例: “click”）
event.key → キー入力時に押されたキー

イベントの伝播（バブリングとキャプチャリング）

イベントはツリー構造を持つDOMの中を 伝播（伝わる） します。

バブリング（初期設定）：子要素 → 親要素へ伝わる
キャプチャリング：親要素 → 子要素へ伝わる

document.querySelector("#parent").addEventListener("click", () => {
  console.log("親がクリックされた");
});

document.querySelector("#child").addEventListener("click", () => {
  console.log("子がクリックされた");
});

👉 子要素をクリックすると、子 → 親の順に処理されます（バブリング）。

デフォルト動作のキャンセル

フォーム送信やリンククリックなどにはブラウザの標準動作があります。それを止めたい場合は preventDefault() を使います。

const form = document.querySelector("form");

form.addEventListener("submit", (event) => {
  event.preventDefault(); // ページリロードを防ぐ
  console.log("フォーム送信がキャンセルされました");
});

まとめ

バブリング・キャプチャリングを理解すると複雑なUIも作れる
イベントは ユーザーの操作やブラウザ動作を検知する仕組み
基本は addEventListener を使うのがベスト
event オブジェクトを活用するとより高度な処理が可能

非同期処理の基本

JavaScriptは シングルスレッド（1つの処理しか同時に実行できない）です。
例えば以下のようなケースでは非同期処理が必要になります。

サーバーからデータを取得（API通信）
画像やファイルの読み込み
タイマー処理（setTimeoutなど）

もし非同期処理がなければ、重い処理が終わるまで他の処理が止まってしまい、ブラウザがフリーズしてしまいます。

コールバック関数（古い方法）

昔は非同期処理に「コールバック関数」を使っていました。ですがこれだと読み込み速度等の影響で処理がうまくいかなくなることが多かったです。

setTimeout(() => {
  console.log("1秒後に実行されます");
}, 1000);

console.log("先にこちらが実行されます");

👉 ただし、コールバックを多用すると「ネストが深くなる問題（コールバック地獄）」が発生しました。

Promise

Promiseは「非同期処理の結果（成功 / 失敗）」をオブジェクトとして扱える仕組みです。

const promise = new Promise((resolve, reject) => {
  let success = true;

  if (success) {
    resolve("成功しました！");
  } else {
    reject("失敗しました…");
  }
});

promise
  .then(result => console.log(result))  // 成功時の処理
  .catch(error => console.error(error)); // 失敗時の処理

👉 then で成功時の処理を、catch でエラー処理を記述します。

async / await（モダンな書き方）

ES2017（ES8）から導入された構文で、非同期処理を 同期処理のように書ける のが特徴です。

function fetchData() {
  return new Promise(resolve => {
    setTimeout(() => resolve("データ取得完了！"), 1000);
  });
}

async function getData() {
  console.log("データ取得中…");
  const result = await fetchData(); // Promiseが解決されるまで待機
  console.log(result);
}

getData();

👉 await を使うことで、コードが読みやすくなり「コールバック地獄」を回避できます。

実用例：API通信

実際の開発では fetch を使ったAPI通信が多いです。

async function fetchUsers() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/users");
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("エラーが発生しました:", error);
  }
}

fetchUsers();

👉 try / catch でエラー処理を行うのがポイントです。

まとめ

実際の開発では fetch や axios と組み合わせて使うことが多い
非同期処理は「待ち時間がある処理」を止めずに実行するために必要
コールバック → 古い方法で可読性が低い
Promise → 成功 / 失敗を扱いやすい
async / await → 最も読みやすくモダンな書き方

まとめ

Javascriptは基礎を理解すれば応用もスムーズに学べる言語です。ロードマップに沿って学習し、小規模アプリを作ることで、フロントエンド開発に必要なスキルを効率的に習得できますので優先的に学習して損はないです。

Javascriptとは

Javascriptの特徴

Javascriptの基礎文法

変数と定数

let：値を変更できる変数

const：値を変更できない定数

使い分けのポイント

データ型（文字列・数値・配列・オブジェクト）

文字列（String）

数値（Number）

配列（Array）

オブジェクト（Object）

まとめ

演算子の種類と使い方

算術演算子（Arithmetic Operators）

代入演算子（Assignment Operators）

比較演算子（Comparison Operators）

論理演算子（Logical Operators）

その他の演算子

まとめ

条件分岐（if / switch）

if文

switch文

まとめ

ループ処理（for / while / forEach）

for文

while文

forEachメソッド

まとめ

関数の定義と呼び出し

1. 関数の定義方法

① 関数宣言（Function Declaration）

② 関数式（Function Expression）

③ アロー関数（Arrow Function）

関数の呼び出し

戻り値のある関数

引数のデフォルト値

まとめ

スコープとクロージャ

スコープ（Scope）とは

① グローバルスコープ

② ローカルスコープ（関数スコープ）

③ ブロックスコープ（let / const）

2. クロージャ（Closure）とは

クロージャの基本

クロージャが役立つ場面

まとめ

配列・オブジェクト操作

配列操作の基本メソッド

map

filter

reduce

オブジェクト操作の基本

オブジェクトの展開（スプレッド構文）

分割代入

配列とオブジェクトを組み合わせて操作する

まとめ

DOM操作の基本

要素の取得

要素の内容を変更

属性の操作

スタイルの変更

要素の追加・削除

まとめ

イベント処理

よく使われるイベントの種類

イベントの登録方法

方法①：HTMLに直接書く（非推奨）

方法②：プロパティに代入

方法③：addEventListener（推奨）

イベントオブジェクト

イベントの伝播（バブリングとキャプチャリング）

デフォルト動作のキャンセル

まとめ

非同期処理の基本

コールバック関数（古い方法）

Promise

async / await（モダンな書き方）

実用例：API通信

まとめ

③ ブロックスコープ（`let` / `const`）

方法③：`addEventListener`（推奨）