JavaScript入門

JavaScriptは、Webページをユーザーの操作に反応させる言語です。どのブラウザでも追加のインストールなしに動き、Node.js を使えばサーバーでも動きます。この記事では、変数と関数から始め、配列の扱いを学び、Webページを変更する方法まで説明します。

DOM以外の例はすべて Node.js で実行し、表示した出力は実際のものです。DOMの部分はブラウザでテストしてください。

必要なもの

任意のWebブラウザ（F12キーを押して Console タブでコマンドを試せます）
または、ファイルを実行するための Node.js 18 以上

仕組み

概略図：JavaScript はブラウザでは DOM を通じて、コンピューターでは Node.js を通じて動く

変数

値が変わらないものには `const`、変わるものには `let` を使います。

const schoolName = "โรงเรียนตัวอย่าง";
let count = 0;
count = count + 1;
console.log(schoolName, count);

関数

function grade(score) {
  if (score >= 80) return "A";
  if (score >= 70) return "B";
  if (score >= 50) return "C";
  return "F";
}

関数は入力を受け取り、処理をして、`return` で値を返します。`if` は上から順に判定され、最初に真になった分岐が実行されます。

map、reduce、forEach を使った配列

const students = [
  { name: "สมชาย", score: 85 },
  { name: "สมหญิง", score: 72 },
  { name: "สมศักดิ์", score: 45 },
];

function grade(score) {
  if (score >= 80) return "A";
  if (score >= 70) return "B";
  if (score >= 50) return "C";
  return "F";
}

const grades = students.map(s => `${s.name}: ${grade(s.score)}`);
const average = students.reduce((sum, s) => sum + s.score, 0) / students.length;

console.log("สวัสดี JavaScript");
grades.forEach(line => console.log(line));
console.log("คะแนนเฉลี่ย:", average.toFixed(2));

実際の出力：

สวัสดี JavaScript
สมชาย: A
สมหญิง: B
สมศักดิ์: F
คะแนนเฉลี่ย: 67.33

`map` は各要素を変換して新しい配列を作ります。
`reduce` はすべての要素を一つの値にまとめます。
`forEach` は新しい配列を作らずに各要素へ処理を行います。
`toFixed(2)` は表示用に小数点以下2桁へ丸めます。

ページを操作する（DOM）

ブラウザでは、JavaScript は DOM を通じてページを読み書きします。この例は、ボタンを押すと文字が変わります。

<p id="message">ยังไม่ได้กด</p>
<button id="btn">กดฉัน</button>
<script>
  const message = document.getElementById("message");
  document.getElementById("btn").addEventListener("click", () => {
    message.textContent = "กดแล้ว!";
  });
</script>

`.html` ファイルとして保存してブラウザで開き、ボタンを押すと文字が変わります。

よくあるミス

**`===` の代わりに `=` を使う：** `===` は値と型の両方を比較するので、こちらを使います。
**`const` は再代入できないことを忘れる：** 値を変える必要があれば `let` を使います。
**ページの読み込み前に DOM を使う：** スクリプトを `<body>` の末尾に置くか、`defer` を使います。

次のステップ

DOMの例に、入力欄の点数を打つと成績が即座に表示される機能を追加してみてください。そのあと、サーバーからデータを取得する `fetch` を学びましょう。

まとめ

JavaScriptは変数、関数、配列を基礎とし、DOMとイベントを通じてページを扱います。短く実行できる例で練習するのが、最も早く身につく方法です。