Chapter 1: JavaScript の基本

JavaScript はブラウザ上で動作するスクリプト言語です。
この章では，文法の基礎を学びながら，ブラウザと Node.js の両方でコードを実行する方法を確認します。

JavaScript を実行する 2 つの方法

ブラウザの開発者ツール
F12（macOS は ⌘⌥I）で開き，「Console」タブでコードを試せます。
Node.js
ターミナルで .js ファイルを実行できます。例：node main.js

Tip

ブラウザでは document や window にアクセスできますが，Node.js には存在しません。環境ごとの違いを意識しましょう。

変数とデータ型

JavaScript の変数は let（再代入可能），const（再代入不可）を使って宣言します。

const festivalName = "Chibafes";
let visitorCount = 0;

visitorCount += 120;
console.log(`${festivalName} の来場者数: ${visitorCount}人`);

文字列はダブルクォーテーション " "，シングル ' ', またはテンプレートリテラル ` ` を使います。
配列やオブジェクトもよく使います。

const events = ["ライブ", "展示", "フード"];
const teamMember = {
  name: "山田 太郎",
  role: "システム部門",
  skills: ["HTML", "CSS", "JavaScript"],
};

条件分岐とループ

const isRaining = true;

if (isRaining) {
  console.log("屋内で楽しめる企画を案内します。");
} else {
  console.log("屋外ステージへご案内します。");
}

for (const eventName of events) {
  console.log(`おすすめ: ${eventName}`);
}

switch 文や while ループもありますが，まずは if / for に慣れましょう。

関数

function greet(name) {
  return `ようこそ、${name} さん！`;
}

const greetMember = (name, role) => {
  return `${name} さんは ${role} を担当しています。`;
};

console.log(greet("実行委員"));
console.log(greetMember("山田", "デザイン"));

function で宣言する従来の書き方と，=> を使うアロー関数があります。
アロー関数は短く書けるため，コールバック関数に多用されます。

ハンズオン：簡易カウンターを作る

fes-training/javascript フォルダに counter.js を作成。
来場者数やスタッフ数を管理する簡単なスクリプトを書きます。

let visitor = 0;
let staff = 12;

function addVisitor(count) {
  visitor += count;
  return visitor;
}

function totalPeople() {
  return visitor + staff;
}

addVisitor(35);
addVisitor(18);

console.log(`現在の来場者: ${visitor}`);
console.log(`会場内の合計人数: ${totalPeople()}`);

ターミナルで node counter.js を実行し，結果を確認します。

練習課題

スタッフの役割をオブジェクトで管理し，「システム部門」のメンバーだけを配列で取り出す関数を作ってみましょう。
企画の投票数を配列で管理し，合計と平均を計算する関数を書いてみましょう。
setInterval を使い，10 秒ごとに現在時刻を表示するスクリプトを作ってみましょう。

次へ進む

文法の基礎が理解できたら，Chapter 2: DOM 操作とイベントへ進み，ブラウザ上でインタラクティブなページを作ってみましょう。