JavaScript

概要（サマリー）

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

JavaScriptの動作をHTMLやCSSと一緒に試したい場合は、プレビューツールを使うと、クリック処理や表示変更をブラウザ上で確認しながらコードを保存できる。

詳細解説

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からデータを取得するなど、時間のかかる処理を「非同期」で扱う。処理が完了するまで待ちつつ、他の処理も止めない仕組みだ。

// Promiseチェーンの書き方（.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サーバーの構築、ファイル操作、CLIツール、自動化スクリプトなどにも使われている。フロントエンドとバックエンドを同じ言語で書けるため、小規模な開発では効率が上がる。

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

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

情報ソース

• MDN Web Docs: JavaScript
• MDN Web Docs: JavaScript Guide - Introduction
• Node.js GitHub organization overview

AIコーディングとの関係

AIにコード生成や修正を依頼するとき、JavaScriptの意味を理解していると、出力されたコードやエラー内容を判断しやすくなる。
Webブラウザ上やサーバー上で動作するプログラミング言語のこと。

AIへ相談するときは、「何をしたいのか」「どの環境で起きているのか」「どのファイルやエラーを見ているのか」を一緒に伝えるとよい。
用語だけを投げるより、具体的な状況と期待する結果を添えることで、より実用的な回答を得やすくなる。

まとめ

• JavaScriptは、Webブラウザ上やサーバー上で動作するプログラミング言語のこと。
• 関連する用語や実際の作業場面と一緒に理解すると、使いどころを判断しやすい。
• AIコーディングでは、用語の意味を理解しているほど、AIの説明や生成コードを確認しやすくなる。
• 迷ったときは、エラー内容、目的、前提条件を整理してAIに聞くとよい。

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

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