女性向けエンジニアスクール
3秒でわかる
ブラウザの中で動いてページに振る舞いを与えるプログラミング言語。表示の書き換えや通信を担い、今はサーバー側の開発にも使われます。
30秒図解
もう少し詳しく
どういうものか
JavaScript は、Web ページに動きを与えるために生まれたプログラミング言語です。HTML が文書の構造、CSS が見た目を担当するのに対し、JavaScript は「押されたら何が起きるか」を担当します。ブラウザに最初から載っているので、利用者は何も追加せずに実行できます。
言語仕様は ECMAScript という名前で標準化され、毎年更新されます。実行環境はブラウザだけでなく、Node.js を使えばサーバーやコマンドラインでも動きます。同じ言語で画面もサーバーも書けることが、この言語が広く使われる大きな理由です。
なぜ必要か
JavaScript が無い時代の Web は、ボタンを押すたびにページ全体を読み込み直していました。入力の誤りを指摘するにもサーバーへの往復が必要でした。今は、入力欄のその場での検証も、一覧の絞り込みも、地図のドラッグも、ページを再読み込みせずに済みます。この体験の差を作っているのが JavaScript です。
具体例
ボタンが押されたら見出しを書き換える、最小限の例です。
const btn = document.querySelector("#greet");
btn.addEventListener("click", () => {
document.querySelector("h1").textContent = "こんにちは";
});サーバーから一覧を取ってきて表示する処理も、数行で書けます。
const res = await <a href="/glossary/fetch-api" class="text-primary font-medium underline underline-offset-2 hover:text-primary-dark">fetch</a>("/api/items");
const items = await res.json();
document.querySelector("#list").innerHTML =
items.map((i) => `<li>${i.title}</li>`).join("");似た用語との違い
Java と JavaScript は名前が似ているだけで、別の言語です。文法も実行の仕組みも異なります。TypeScript は JavaScript に型の記述を足した言語で、変換すると JavaScript になります。
つまずきやすいところ
DOM の取得が null になる誤りが最初の関門です。script タグを head に書くと、まだ body の要素が作られていない時点で querySelector が走り、null が返ります。script を body の末尾に置くか、defer 属性を付けると解決します。
もうひとつは非同期の扱いです。fetch は結果ではなく Promise を返すので、await を付けずに値を使うと Promise オブジェクトそのものが表示されます。
