JavaScript

概要（サマリー）

JavaScriptとは、Webブラウザ上やサーバー上で動作するプログラミング言語のことである。HTMLがページの骨格を、CSSがデザインを担うのに対し、JavaScriptはページに「動き」や「インタラクション」を加える役割を担う。ボタンをクリックしたら何かが起きる、フォームの入力をリアルタイムで検証する、APIからデータを取得して画面に表示する、といった処理はすべてJavaScriptで実現されている。現在はNode.jsを通じてサーバーサイドでも動作し、フロントエンドとバックエンドを同じ言語で書けることから、AIコーディング時代に最も需要の高い言語のひとつだ。

詳細解説

JavaScriptでできること

JavaScriptの用途は非常に広い。

• Webページの動的操作: ボタンクリックで要素を表示/非表示にする、テキストを書き換えるなど
• API通信: fetchを使ってサーバーからデータを取得・送信する
• フォームバリデーション: 入力内容をリアルタイムで検証する
• アニメーション: CSSと連携してスムーズな動きを実現する
• サーバーサイド（Node.js）: APIサーバーやバックエンド処理の構築

DOMの操作

ブラウザがHTMLを読み込むと、「DOM（Document Object Model）」というツリー構造のデータを作る。JavaScriptはこのDOMを操作することで、HTMLの内容をリアルタイムに変更できる。

// 要素を取得して内容を変更する
const title = document.getElementById('title');
title.textContent = '変更後のタイトル';

// クラスを付け外しする
const btn = document.querySelector('.btn');
btn.classList.add('active');

// 新しい要素を作って追加する
const newItem = document.createElement('li');
newItem.textContent = '新しいアイテム';
document.querySelector('ul').appendChild(newItem);

イベントとイベントリスナー

JavaScriptは「何かが起きたとき（イベント）に処理を実行する」という書き方が基本だ。クリック・キー入力・ページ読み込み完了などがイベントにあたる。

const btn = document.getElementById('btn');

// ボタンをクリックしたときに実行される
btn.addEventListener('click', function() {
  alert('クリックされました！');
});

// フォームが送信されたときに実行される
document.querySelector('form').addEventListener('submit', function(event) {
  event.preventDefault(); // ページリロードを止める
  console.log('フォームが送信されました');
});

変数とスコープ

JavaScriptには変数のスコープ（有効範囲）の概念がある。const・let はブロックスコープ（{} 内のみ有効）を持つ。var は古い書き方で関数スコープを持つため、現代の開発では原則 const と let を使う。

const name = '田中';      // 再代入不可
let score = 0;            // 再代入可能

if (true) {
  const blockVar = 'ここだけ有効';
  console.log(blockVar); // 使える
}
console.log(blockVar);   // エラー！スコープ外

非同期処理（Promiseとasync/await）

JavaScriptはAPIからデータを取得するなど、時間のかかる処理を「非同期」で扱う。処理が完了するまで待ちつつ、他の処理も止めない仕組みだ。

// 昔ながらの書き方（.then チェーン）
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

// 現代の書き方（async/await）
async function getData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

async/await はPromiseをより読みやすく書ける構文だ。実際には同じ仕組みで動いている。

TypeScriptとの関係

JavaScriptに型の概念を追加したのがTypeScriptだ。TypeScriptはJavaScriptに変換して動作するため、最終的に実行されるのはJavaScriptである。大規模な開発ではTypeScriptが選ばれる傾向にあるが、まずはJavaScriptをしっかり理解することが先決だ。

AIコーディングとJavaScriptの関係

AIはJavaScriptのコード生成を最も得意とする言語のひとつだ。「ボタンをクリックしたらモーダルを表示して」「入力値が空だったらエラーメッセージを出して」といった自然言語の指示から、動作するコードを生成してもらえる。ただし、AIが生成するコードには古い書き方（var・.then 多用）が混じることがあるため、const/let と async/await を使うよう指示に明示するとよい。

よくある勘違い

JavaScriptはJavaと同じもの？

まったく異なる。JavaScriptとJavaは名前が似ているだけで、開発した会社も文法も用途も大きく違う。Javaはサーバーや企業システムで使われることが多く、JavaScriptはWeb特化で生まれた言語だ。混同を避けるため、省略する場合は「JS」と呼ぶことが多い。

JavaScriptとTypeScriptはどちらを先に学ぶべき？

まずJavaScriptを学ぶことを推奨する。TypeScriptはJavaScriptの上に型機能を追加したものであり、JavaScriptの理解なしにTypeScriptを使いこなすのは難しい。TypeScriptのエラーメッセージもJavaScriptの知識があって初めて意味が分かる。

JavaScriptはブラウザでしか使えない？

そうではない。Node.jsを使えばサーバーサイドでもJavaScriptを実行できる。APIサーバーの構築、ファイル操作、自動化スクリプトなどにも使われている。フロントエンドとバックエンドを同じ言語で書けるため、小規模な開発では効率が上がる。

const で宣言したオブジェクトは変更できない？

完全には変更できないわけではない。const は「再代入できない」という意味だが、オブジェクトや配列の中身（プロパティや要素）は変更できる。「変数が指す先を変えられない」というイメージが正確だ。

より詳しくAIに聞いてみよう

• JavaScriptとは何か、プログラミング未経験者でもわかるように説明してください。
• JavaScriptのDOM操作の基本を、具体的なコード例つきで教えてください。
• JavaScriptの非同期処理（Promise・async/await）を初心者向けに整理してください。
• JavaScriptとTypeScriptの違いと、どちらを選ぶべき場面を教えてください。
• AIコーディングでJavaScriptを使ったWebアプリを作るとき、まず覚えるべき基礎を教えてください。