JavaScript

Webページに動的な機能を追加するプログラミング言語

JavaScriptとは？

日常での例え：Webページの「脳」

HTML = 骨格

ページの構造・内容

CSS = 外見

見た目・デザイン

JavaScript = 脳

動き・判断・処理

なぜJavaScriptが必要？

HTMLとCSSだけでは：

ボタンを押しても何も起きない（見た目が変わるだけ）
入力内容のチェックができない
サーバーと通信できない（データの取得・送信）

JavaScriptがあると：ユーザーの操作に反応して、ページの内容を動的に変えられる！

JavaScriptでできること

📦

変数・定数

基本

データを保存して再利用

🔢

データ型

基本

文字列、数値、配列、オブジェクト

⚙️

関数

重要

処理をまとめて再利用可能に

🔄

ループ

基本

繰り返し処理を自動化

🎯

DOM操作

重要

HTMLを動的に変更

🌐

非同期処理

応用

API通信やファイル読み込み

コード例とプレビュー

変数の宣言

let、const、varの違い

javascript

// 変更可能な変数
let count = 0;
count = 10;

// 変更不可の定数
const PI = 3.14159;

// 古い書き方（非推奨）
var oldStyle = "使わない";

console.log(count);  // 10
console.log(PI);     // 3.14159

プレビュー

count = 10
PI = 3.14159

データ型

JavaScriptの基本的な型

javascript

// 文字列
const name = "田中太郎";

// 数値
const age = 25;
const price = 1980.5;

// 真偽値
const isStudent = true;

// 配列
const fruits = ["りんご", "バナナ", "オレンジ"];

// オブジェクト
const user = {
  name: "田中",
  age: 25,
  email: "tanaka@example.com"
};

プレビュー

"田中太郎" → 文字列
25 → 数値
true → 真偽値
["りんご", ...] → 配列
{name: ...} → オブジェクト

関数

処理をまとめる

javascript

// 関数宣言
function greet(name) {
  return "こんにちは、" + name + "さん！";
}

// アロー関数（モダンな書き方）
const add = (a, b) => a + b;

// 使用例
console.log(greet("田中"));  // こんにちは、田中さん！
console.log(add(5, 3));      // 8

プレビュー

greet("田中") → "こんにちは、田中さん！"
add(5, 3) → 8

条件分岐

if文で処理を分ける

javascript

const score = 85;

if (score >= 90) {
  console.log("優秀！");
} else if (score >= 70) {
  console.log("合格！");
} else {
  console.log("もう少し頑張ろう");
}

// 三項演算子
const result = score >= 70 ? "合格" : "不合格";

プレビュー

score = 85 の場合:
// → "合格！"
result = "合格"

ループ

繰り返し処理

javascript

const fruits = ["りんご", "バナナ", "オレンジ"];

// for...of（配列向け）
for (const fruit of fruits) {
  console.log(fruit);
}

// forEach（メソッド形式）
fruits.forEach((fruit, index) => {
  console.log(index + ": " + fruit);
});

// map（変換して新配列を作成）
const upperFruits = fruits.map(f => f.toUpperCase());

プレビュー

for...of 出力:
りんご
バナナ
オレンジ

DOM操作

HTMLを動的に変更

javascript

// 要素を取得
const button = document.querySelector("#myButton");
const title = document.getElementById("title");

// 内容を変更
title.textContent = "新しいタイトル";

// クリックイベント
button.addEventListener("click", () => {
  alert("クリックされました！");
});

// 要素を追加
const newDiv = document.createElement("div");
newDiv.textContent = "新しい要素";
document.body.appendChild(newDiv);

プレビュー

非同期処理

async/awaitでAPI通信

javascript

// 非同期関数
async function fetchData() {
  try {
    const response = await fetch("https://api.example.com/data");
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("エラー:", error);
  }
}

// 呼び出し
fetchData();

プレビュー

// API通信は非同期で実行
// 完了を待ってからデータを処理

前へ：CSS 次へ：関数