JavaScript を整える。

そもそも JavaScript とは

ブラウザの中で動く、Web ページに「動き」を付ける言語。

どこで・どんな場面で使うか

• Web ページに動きを付けるとき

  メニューの開閉、フォームの入力チェック、画面の一部だけの更新など、ブラウザ上の動きを作ります。

• Web アプリを作るとき

  React や Vue といった画面づくりの道具は、どれも JavaScript（または TypeScript）で書きます。

• サーバー側の処理を書くとき

  Node.js を使うと、API やバッチ処理も JavaScript で書けます。

• ブラウザ上のゲームやツール

  特別なソフトを入れなくても動くので、手軽なゲームや計算ツールに向いています。

• 求人・仕事での位置づけ

  Web 系の開発では、フロントエンドを中心に幅広い求人で名前が出てくる基本の言語です。

なぜ覚えておくと得か

• ブラウザさえあれば始められる。インストール不要で、書いたらすぐ結果が見えます。初めてのプログラミングにも向いています。
• Web の仕事の土台になる。画面側の開発では避けて通れず、TypeScript や各種の道具を学ぶ際の前提にもなります。
• 画面もサーバーもつなげて考えられる。同じ言語で両方を書けるので、Web サービス全体の流れをつかみやすくなります。

上の練習場でサンプルを選んで実行し、書いたコードの結果がその場で変わる感覚を確かめてみてください。

理由

JavaScript は「実行するまで」間違いが分からない。

型注釈が無いので、書いた瞬間には何もエラーが出ません。上のサンプルボタン ②〜⑤ が、その代表例です。

• ②

  変数と型 — 暗黙の型変換

  "1" + 1 は文字列連結になり "11"。 でも "1" - 1 は数値に変換されて 0。演算子によって挙動が変わることは、実行して初めて確認できます。

• ③

  存在しないプロパティ — 「undefined」が静かに広がる

  タイプミスしたプロパティ名は、エラーにならず 「undefined」 を返すだけ。そのまま計算やテンプレートに混ざり、さらにそれを掘り下げようとした瞬間に TypeError が起きます。

• ④

  引数の数の違い — 足りない分は「undefined」

  関数に渡す引数が足りなくても呼び出しエラーにはならず、足りない仮引数は 「undefined」 になって処理が進みます。呼び出し側の個数チェックは実行時にはありません。

• ⑤

  null の扱い — typeof null は "object"

  typeof null は仕様上のバグで "object" になります。null のプロパティに触れると、その場で例外が発生します。

比較

JavaScript と TypeScript の違い

上の4つの間違いは、TypeScript で書くと「実行する前」「書いた時点」で赤い波線として指摘されます。

同じサンプルコードを TypeScript で書くとどうなるか、 /typescript/ の Playground で確認できます。同じ間違いが「実行する前」に赤くなる様子を見比べてみてください。

このページについて

ここで動くのは QuickJS（WASM） で動く練習用の素の JavaScript です。 ブラウザ本体のエンジンではなく別のエンジンで動かしているため、DOM・fetch・setTimeout は使えません。 無限ループを書いても一定時間で処理を打ち切るので、ページが固まることはありません。

🌐 このページを開いただけでは外部通信は発生しませんが、「実行」を押した最初の1回だけ、 JavaScript の実行環境（QuickJS 0.31.0）を配信元の cdn.jsdelivr.net から取得します（初回のみ約1MB）。 これはプログラムを受け取るだけの通信で、あなたが書いたコードや実行結果が送られることはありません。 ただし通信である以上、配信元にはお使いの回線の IP アドレスが見えます。 「入力は端末から出さない」という当サイトの原則に関わる点なので、隠さずに書いておきます。 送信ゼロ（書いたコードと実行結果はどこにも送信されません）。