1-1. この章のゴール

まず JS を動かし、他人（未来の自分）が読めるコードの書き方を押さえます。

• console.log で値を出力できる
• 変数 let と 定数 const を使い分けられる
• コメント・命名・インデントで読みやすく書ける

1-2. Hello, World!

プログラムの結果を確かめる基本が、コンソールへの出力です。
console.log(値) を使うと、( ) の中に渡した値がコンソールに表示されます。
書いた処理が思ったとおりに動いているかを確認する（デバッグする）ときに、最もよく使う道具です。

// カンマ区切りで複数まとめて出力できる
console.log(値1, 値2, ...);

1-2. やってみよう

新しい言語の第一歩は挨拶から。▶ 実行して、コンソールに文字が出るのを確かめましょう。

console.log('Hello, World!');

確認 下の黒い欄に Hello, World! と出れば成功です。文字を書き換えて再実行してみましょう。

1-3. 変数と定数

値に名前をつけて保存する箱が変数です。let で宣言し、= で値を割り当てます。あとから
別の値に入れ替え（再代入）できます。

一方、定数は入れ替えできない箱。const で宣言し、再代入しようとするとエラーになります。

// 後で入れ替えできる
let 変数名 = 初期値;
// 入れ替え不可
const 定数名 = 値;

1-3. やってみよう

let は入れ替えでき、const はできない——▶ 実行して違いを確かめましょう。

let count = 0;
// let は入れ替えできる
count = count + 1;
console.log('count:', count);

const name = 'じぐ太郎';
console.log('name:', name);
// const は入れ替え不可。次の行のコメントを外すとエラーになる
// name = '別の名前';

記述 最後のコメント行（// name = ...）の // を外して再実行し、どんなエラーが出るか見てみましょう。

1-4. コメント

コメントはコードに書いても実行されない文です。処理の意図を残したり、一時的にコードを
無効化（デバッグ）するのに使います。

• // … その行の末尾までコメント
• /** */ … JSDoc。関数などの説明を書く特別な形（次のスライド）

1-4. やってみよう

コメントの行だけ実行されないことを、▶ 実行して確かめましょう。

console.log('この行は動く');
// console.log('この行はコメントなので動かない');
/* 複数行を
   まとめてコメントにもできる */
console.log('最後の行も動く');

1-5. JSDoc（関数の説明を書く）

/** ... */ で書くコメントを JSDoc と呼び、おもに関数の説明に使います。@param（引数）・@returns（戻り値）などのタグを書くと、多くのエディタが入力補完やヒントを出してくれます。

/**
 * 2 つの数を足す
 * @param {number} a - 1 つ目の数
 * @param {number} b - 2 つ目の数
 * @returns {number} 合計
 */
function add(a, b) {
  return a + b;
}

1-6. 読みやすい名前

コードは書く時間より読まれる時間の方が長いもの。「この名前だけ見て意味が分かるか？」を基準に、中身が伝わる名前を付けます（変数は名詞、関数は動詞から）。

1-7. インデント（字下げ）

インデントは行頭の字下げのこと。{ } で囲まれたブロックの中を 1 段下げます。

JS はインデントが無くても動きますが、処理のかたまりが読み取りやすくなり、ミスにも気づきやすくなります。

function myFunc() {
  let sum = 0;
  for (let i = 0; i < 10; i++) {
    // ブロックの中はさらに 1 段深く
    sum += i;
  }
  return sum;
}

1 章のまとめ

次は、数値や文字列など いろいろな値を扱う 方法へ進みます。

2-1. この章のゴール

数値・文字列・真偽（true/false）といった値を、計算したり比べたりします。

• 四則演算と Math で計算できる
• 文字列を組み立て・加工できる
• 論理演算と比較で「条件のもと」を作れる

2-2. 算術演算

四則演算はほぼ数式どおり。割り算の余りは %（剰余）で求めます。
計算と代入をまとめる代入演算子や、1 ずつ増減するインクリメント／デクリメントもよく使います。

2-2. Math で高度な計算

絶対値・最大最小・べき乗・円周率・三角関数などは、組み込みオブジェクト Math から呼び出します。

2-2. やってみよう

四則・余り・+=・Math を ▶ 実行して確かめましょう。

// 和 差 積 商 余り
console.log(1 + 2, 5 - 3, 4 * 2, 10 / 4, 10 % 3);
let v = 1;
// v = v + 5 と同じ
v += 5;
console.log('v =', v);
console.log('max/min:', Math.max(3, 9, 1), Math.min(3, 9, 1));
console.log('floor/round:', Math.floor(3.7), Math.round(3.5));
console.log('2の10乗:', 2 ** 10);

2-3. 文字列（よく使う操作）

文字列（String）には便利な操作がたくさんあります。'jig.jp' を例に見てみましょう。

2-3. 連結とテンプレートリテラル

文字列をつなぐ・組み立てる方法です。

テンプレートリテラル（バッククオート ` で囲む）なら、${ } の中に変数や式を埋め込めます。

const name = 'じぐ太郎';
// こんにちは、じぐ太郎 さん
console.log(`こんにちは、${name} さん`);

2-3. やってみよう

長さ・切り出し・分割・埋め込みを ▶ 実行して確かめましょう。

const s = 'jig.jp';
// 6
console.log('長さ:', s.length);
console.log('大文字:', s.toUpperCase());
// jig
console.log('切り出し:', s.slice(0, 3));
// ['jig','jp']
console.log('分割:', s.split('.'));
// テンプレートリテラル
console.log(`こんにちは、${s} さん`);

2-4. 論理演算

複数の条件を組み合わせて、true / false（真偽値）を作る道具です。

2-4. 比較演算子

2 つの値を比べて true / false を返します。等しいかの判定は、型まで見る ===（厳密等価） を使います。

2-4. やってみよう

論理演算と厳密等価を ▶ 実行して確かめましょう。型が違う比較にも注目。

console.log(true && false, true || false, !true);
const age = 20;
// true
console.log('18以上?', age >= 18);
// true
console.log('厳密等価:', age === 20);
// false（型が違う）
console.log("'5' === 5 :", '5' === 5);

2 章のまとめ

次は、条件分岐と繰り返しで 処理の流れを制御 します。

3-1. この章のゴール

「条件で分ける」「繰り返す」で、プログラムの流れを組み立てます。

• if / 三項演算子で分岐できる
• 配列にデータを並べられる
• for / forEach で繰り返し処理できる

3-2. if で分岐する

評価の結果によって処理を分けるのが if 文です。( ) の条件が真なら直後の { } を実行し、
偽なら else 側へ。else if で条件を足せます。上から順に評価されるので条件の順番が大事です。

例として、時刻（hour）によって挨拶（おはよう／こんにちは／こんばんは）を変えてみます。

if (条件1) {
  条件1が真のときの処理
} else if (条件2) {
  条件2が真のときの処理
} else {
  どちらも偽のときの処理
}

3-2. やってみよう

記述 hour（0〜23）を書き換えて ▶ 実行し、3 つの挨拶すべてを出してみましょう。

// 今の時刻（0〜23）
const hour = 14;
if (hour < 12) {
  console.log('おはよう');
} else if (hour < 18) {
  console.log('こんにちは');
} else {
  console.log('こんばんは');
}

3-3. 三項演算子

条件で値を選びたいだけなら、if より短く 1 行で書ける三項演算子が便利です。

条件 ? 真のときの値 : 偽のときの値 の形。ただし入れ子にしすぎると読みにくいので、複雑なら if に戻します。

const 結果 = 条件 ? 真のときの値 : 偽のときの値;

3-3. やってみよう

点数で合否を分けます。▶ 実行して、score を変えて結果が変わるのを確かめましょう。

const score = 72;
const result = score >= 60 ? '合格' : '不合格';
console.log(result);

3-4. 配列

複数の値を順番に並べる入れ物が配列です。[ ] で作り , で区切ります。

個々の値へは 配列[番号] でアクセス。番号（index）は 0 から始まります（先頭が 0 番）。
.length で個数、.push(値) で末尾に追加できます。

const arr = [10, 20, 30];
// 先頭（10）
arr[0]
// 個数（3）
arr.length
// 末尾に追加
arr.push(40)

3-4. やってみよう

アクセス・個数・追加を ▶ 実行して確かめましょう（先頭は 0 番）。

const fruits = ['りんご', 'みかん', 'ぶどう'];
// りんご（0番）
console.log('先頭:', fruits[0]);
console.log('個数:', fruits.length);
// 末尾に追加
fruits.push('もも');
console.log(fruits);

3-5. for で繰り返す

同じ処理を何度も書くのは大変。for 文でまとめて繰り返します。

for (初期化; 続ける条件; 毎回の更新)。定番は let i = 0; i < n; i++（0 から n 回）。
例として 1 から 10 までの合計を求めます。

for (let i = 0; i < 10; i++) {
  // i = 0,1,...,9 で本体を繰り返す
}

3-5. やってみよう

▶ 実行して 1 から 10 までの合計を求めます。範囲（i <= 10）を変えてみましょう。

let sum = 0;
for (let i = 1; i <= 10; i++) {
  // 1, 2, 3, … を足していく
  sum += i;
}
// 55
console.log('1から10までの合計:', sum);

3-6. forEach で一つずつ

配列の各要素を順に処理したいときは forEach が読みやすいです。

各要素を受け取る関数（コールバック）を渡すと、要素の数だけ順に呼ばれます。
index を気にせず書けるのが利点です。

配列.forEach((要素) => {
  // 各要素に対する処理
});

3-6. やってみよう

各要素が偶数か奇数かを ▶ 実行して判定します。

const nums = [3, 8, 15, 20];
nums.forEach((n) => {
  console.log(n, n % 2 === 0 ? '偶数' : '奇数');
});

3 章のまとめ

次は、処理に名前をつけて まとめて再利用 します。

4-1. この章のゴール

処理やデータに「名前」をつけて、まとめたり再利用したりします。

• 関数で処理をまとめて呼び出せる
• オブジェクトで関連するデータをまとめられる
• クラスで設計図から実体を作れる

4-2. 関数

一連の処理に名前をつけ、何度でも呼び出せるのが関数です。function で定義し、
( ) の引数で値を受け取り、return で返り値を返します。

実は console.log() も関数呼び出しの一種でした。

function 関数名(引数1, 引数2) {
  // 処理
  return 返り値;
}
// 呼び出し
関数名(値1, 値2);

4-2. やってみよう

足し算する関数を ▶ 実行。引数を変えて何度でも呼び出せます。

function add(a, b) {
  return a + b;
}
// 5
console.log(add(2, 3));
// 6
console.log(add(10, -4));

4-3. 無名関数・アロー関数

名前のない関数（無名関数）も書けます。特に短い アロー関数 (引数) => 処理 が頻出です。

JS では関数も「値」。変数に入れたり、他の関数へ引数として渡す（コールバック）ことができます。
forEach や setTimeout に渡していたのが、まさにこれです。

// アロー関数を変数へ
const square = (x) => x * x;
// 関数を引数として渡す
setTimeout(() => { ... }, 1000);

4-3. やってみよう

アロー関数と、関数を渡すコールバックを ▶ 実行して確かめましょう。

// アロー関数を変数へ
const square = (x) => x * x;
// 25
console.log(square(5));

// 関数を引数として渡す（コールバック）
setTimeout(() => console.log('1秒後に実行'), 1000);
console.log('先に進む');

4-4. オブジェクト

関連する値を「キー: 値」の組（プロパティ）でまとめたのがオブジェクト。{ } で作ります。

アクセスは obj.key（ドット記法）または obj['key']（ブラケット記法）。
あとからプロパティを追加することもできます。

const user = { name: 'じぐ太郎', age: 20 };
// アクセス
user.name
user['age']
// 追加
user.hobby = '釣り';

4-4. やってみよう

アクセスと追加を ▶ 実行して確かめましょう。

const user = { name: 'じぐ太郎', age: 20 };
// ドット / ブラケット記法
console.log("user.name: "user.name);
console.log("user[age]: "user['age']);
// 後から追加できる
user.hobby = '釣り';
console.log(user);

4-5. Optional Chaining（?.）

存在しないプロパティは undefined。そのさらに先をたどるとエラーになります。

Optional Chaining ?. を使うと、途中が無ければエラーにせず undefined を返して安全に止まります。
API の応答や、入力が任意のフォームなど「あるか分からない値」を扱うときに重宝します。

// a が無ければ undefined（.b でエラーにしない）
obj.a?.b

4-5. やってみよう

?. の有無で挙動がどう変わるか、▶ 実行して確かめましょう。

const user = { name: 'じぐ太郎' };
// 名前: じぐ太郎
console.log(`名前: ${user.name}`);
// 住所: undefined（存在しない）
console.log(`住所: ${user.address}`);

// console.log(user.address.city);

// 市区町村: undefined（?. なら安全）
console.log(`市区町村: ${user.address?.city}`);

4-6. クラス

同じ構造のデータと操作をまとめる設計図がクラスです。class で定義し、new で
実体（インスタンス）を作ります。

プロパティ（データ）とメソッド（関数）を持ち、メソッド内の this はそのインスタンス自身を指します。

class 名前 {
  プロパティ = 初期値;
  メソッド() { /* this.プロパティ で自分を参照 */ }
}
const 実体 = new 名前();

4-6. やってみよう

カウンターのクラスを ▶ 実行。new で作った実体が状態（count）を持ちます。

class Counter {
  count = 0;
  increment() { this.count++; }
}
const c = new Counter();
c.increment();
c.increment();
// 2
console.log('count:', c.count);

4 章のまとめ

いよいよ最後。時間のかかる処理を扱う 非同期 とブラウザ API です。

5-1. この章のゴール

「時間のかかる処理」を上手に扱う非同期処理と、ブラウザの便利機能に触れます。

• 同期と非同期の違いがわかる
• Promise / async / await で待つ処理を書ける
• localStorage や位置情報などブラウザ API を知る

5-2. 同期と非同期

サーバーへの問い合わせなど時間のかかる処理を待つ間、他を止めないための考え方が非同期です。

5-3. setTimeout

setTimeout(関数, ミリ秒) は「指定ミリ秒後に、この関数を実行して」と予約する仕組みです。

予約したらすぐ次の行に進む（＝非同期）ので、あとに書いた処理が先に動きます。出力の順番に注目。

// 1秒後の実行を予約し、すぐ次へ
setTimeout(() => { ... }, 1000);

5-3. やってみよう

順番が A → B → C になるのを ▶ 実行して体感しましょう。

console.log('A: 開始');
setTimeout(() => console.log('C: 1秒後に実行'), 1000);
// 非同期なので C より先に出る
console.log('B: 待たずに次へ');

5-4. Promise（then / catch）

「あとで結果が返る約束」が Promise。料理を注文して番号札をもらうように、結果は後から届きます。

5-4. やってみよう

0.5 秒後に結果が返る Promise を .then() で受け取ります。▶ 実行すると「先に進む」が先に出ることにも注目。

const wait = (ms) => new Promise((resolve) => {
  setTimeout(() => resolve('完了！'), ms);
});
wait(500).then((msg) => console.log('then:', msg));
console.log('先に進む');

確認 出力は「先に進む」→「then: 完了！」の順。この処理を次のスライドで await に書き直します。

5-5. async / await

async を付けた関数の中では await が使えます。await 式 は、その Promise が解決するまで
その行で待ってから次へ進みます。非同期を同期のように読めるのが利点です。

失敗は try { ... } catch (e) { ... } で受けます（then/catch の catch に相当）。

async function f() {
  // 解決を待ってから次へ
  const v = await 何かのPromise;
  // v を使う
}

5-5. やってみよう

5-4 と同じ処理を await で書き直したもの。▶ 実行して見比べましょう。

const wait = (ms) => new Promise((resolve) => {
  setTimeout(() => resolve('完了！'), ms);
});
async function main() {
  const msg = await wait(500);
  console.log('await:', msg);
}
main();
console.log('先に進む');

確認 .then((msg) => …) が const msg = await wait(500) に変更。

5-6. ブラウザ API

ブラウザ自身が持つ機能（API）も使えます。今日は代表的な 2 つを紹介します。

• localStorage … キーと値をブラウザに保存（ページを閉じても残る）。値は必ず文字列で保存される
• 位置情報（Geolocation） … ユーザーの許可を得て、現在地の緯度・経度を取得できる

5-6. 手元で試す

この 2 つはこのスライドの実行環境では動きません（安全のためストレージ・位置情報を制限）。
手元のブラウザの Console に貼って試してみましょう。

// 保存と取り出し（値は必ず「文字列」で保存される）
localStorage.setItem('name', 'じぐ太郎');
console.log(localStorage.getItem('name'));

// 現在地の取得（ユーザーの許可が必要）
navigator.geolocation.getCurrentPosition((pos) => {
  console.log(pos.coords.latitude, pos.coords.longitude);
});

5 章のまとめ

6-1. この章のゴール

これまでの JS を使って、ページ（HTML）をクリックで動かしてみます。

• ページの要素を取得し、クリックをイベントとして受け取る
• 文字や見た目を書き換える
• transition で変化をなめらかに見せる

6-2. 要素を取得してイベントを受け取る

ページの要素は document.querySelector(セレクタ) で取得します（セレクタは CSS と同じ書き方）。
取得した要素に addEventListener('click', 関数) を付けると、クリックのたびにその関数が呼ばれます。

const btn = document.querySelector('#btn');
btn.addEventListener('click', () => {
  // クリックされたときの処理
});

6-2. やってみよう

ボタンを押すたびにコンソールへ出力します。▶ 実行してボタンを押してみましょう。

<button id="btn">押してね</button>
<script>
  const btn = document.querySelector('#btn');
  btn.addEventListener('click', () => {
    console.log('クリックされました');
  });
</script>

6-3. 表示を変える

取得した要素の textContent を書き換えると、画面の文字が変わります。

const out = document.querySelector('#out');
out.textContent = '新しい文字';

6-3. やってみよう

記述 押した回数を表示します。文言や増え方を書き換えて ▶ 実行 してみましょう。

<button id="btn">カウント</button>
<p id="out"></p>
<script>
  let count = 0;
  const out = document.querySelector('#out');
  document.querySelector('#btn').addEventListener('click', () => {
    count++;
    out.textContent = count + ' 回押しました';
  });
</script>

6-4. 見た目を変える

要素.style.プロパティ で CSS も書き換えられます（プロパティ名は backgroundColor のようにキャメルケース）。

out.style.backgroundColor = '#ffcdd2';

6-4. やってみよう

押すたびに背景色が切り替わります。▶ 実行して試しましょう。

<style>
  #out {
    padding: 10px;
    border-radius: 6px;
  }
</style>
<button id="btn">押す</button>
<p id="out">ここが変わる</p>
<script>
  const colors = ['#ffcdd2', '#c8e6c9', '#fff9c4'];
  let n = 0;
  const out = document.querySelector('#out');
  document.querySelector('#btn').addEventListener('click', () => {
    n++;
    out.textContent = n + ' 回';
    out.style.backgroundColor = colors[n % 3];
  });
</script>

6-5. なめらかに動かす（transition）

CSS の transition を付けておくと、style で値を変えたときなめらかに変化します。

#box {
  /* すべての変化を 0.3 秒でなめらかに */
  transition: all 0.3s ease;
}

6-5. やってみよう

ボタンを押すと箱が四隅を移動します。transition のおかげでスッと動きます。▶ 実行。

<style>
  #field {
    position: relative;
    width: 220px;
    height: 220px;
    border: 2px solid #999;
  }
  #box {
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
    background: #f06292;
    color: #fff;
    display: grid;
    place-content: center;
    transition: all 0.3s ease;
  }
</style>
<button id="btn">動かす</button>
<div id="field"><div id="box">0</div></div>
<script>
  let i = 0;
  const box = document.querySelector('#box');
  document.querySelector('#btn').addEventListener('click', () => {
    i++;
    box.textContent = i % 4;
    box.style.top  = [0, 1].includes(i % 4) ? '0' : '140px';
    box.style.left = [0, 3].includes(i % 4) ? '0' : '140px';
  });
</script>

6 章のまとめ

HTML（構造）× CSS（見た目）× JavaScript（動き）で、ページが動くようになりました。

学んだことを振り返る

小さな部品が出そろいました。あとはこれらを組み合わせるだけで、アプリが作れます。

• 値と変数 … 数値・文字列・真偽を変数／定数に持つ
• 制御 … 条件（if・三項）と繰り返し（for・forEach）
• まとめる … 関数・オブジェクト・クラス
• 非同期 … Promise・async/await で「待つ」処理
• DOM 操作 … 要素を取得し、クリックで表示・見た目を変える

お疲れさまでした

今日触れなかった機能もたくさんあります。作りながら調べて足していきましょう。

• MDN Web Docs（JavaScript）: https://developer.mozilla.org/ja/docs/Web/JavaScript
• JS Primer: https://jsprimer.net/