JavaScriptの概要と構成要素
JavaScriptは、当初Netscape社が開発したクライアントサイドスクリプト言語であり、現在はECMA-262標準（正式名称：ECMAScript）に基づいて定義されています。この言語は、ブラウザ上で動作し、ユーザーインタラクションへの即時応答や動的なコンテンツ更新を可能にします。
JavaScriptは以下の3つの主要コンポーネントで構成されます：
- ECMAScript：文法・データ型・演算子などのコア仕様
- DOM (Document Object Model)：HTML/XML文書を操作するためのAPI
- BOM (Browser Object Model)：ブラウザウィンドウや履歴、画面情報などを扱うAPI
データ型と変数
JavaScriptは弱い型付け言語であり、var、let、constで変数を宣言できます。主なデータ型は以下の通りです：
number：整数・浮動小数点数を区別しないstring：シングル/ダブルクォートどちらでも可boolean：真偽値。ただし、条件分岐では空文字列や0以外は真と評価されるobject：配列や関数も含む参照型undefined：値が未代入の状態null：意図的に「無効」を示す値（typeof nullは"object"を返すという歴史的バグあり）symbol（ES6以降）bigint（ES2020以降）
演算子と制御構文
比較演算子には==（型変換あり）と===（厳密比較）があります。例：
console.log('5' == 5); // true
console.log('5' === 5); // false制御構文（if、switch、for、while）は他のC系言語と類似していますが、for...inは配列のインデックスを返します：
const colors = ['赤', '青', '緑'];
for (let i in colors) {
console.log(i, colors[i]); // "0 赤", "1 青", "2 緑"
}関数とオブジェクト
関数は第一級オブジェクトとして扱われ、以下のように定義できます：
// 関数宣言
function add(x, y) {
return x + y;
}
// 関数式
const multiply = function(a, b) {
return a * b;
};
// アロー関数（ES6）
const square = n => n * n;オブジェクトはリテラル記法で簡潔に作成可能です：
const user = {
name: '田中',
age: 28,
greet() {
console.log(`こんにちは、${this.name}です`);
}
};JSONとの連携
JSON（JavaScript Object Notation）は軽量なデータ交換フォーマットです。JavaScriptでは以下のメソッドで変換できます：
// オブジェクト → JSON文字列
const jsonStr = JSON.stringify(user);
// JSON文字列 → オブジェクト
const parsed = JSON.parse(jsonStr);イベント処理
イベントはHTML属性またはJavaScriptでバインドできます：
<button id="btn">クリック</button>
<script>
// 方法1: HTML属性
// <button onclick="handleClick()">
// 方法2: DOM経由
document.getElementById('btn').addEventListener('click', function() {
console.log('ボタンが押されました');
});
</script>BOM（Browser Object Model）
windowオブジェクトはブラウザ全体を表し、以下のようなサブオブジェクトを持ちます：
location：URL情報history：閲覧履歴navigator：ブラウザ情報screen：画面サイズlocalStorage/sessionStorage：クライアントストレージ
例：ローカルストレージへの保存
localStorage.setItem('theme', 'dark');
const theme = localStorage.getItem('theme');DOM（Document Object Model）操作
DOMはHTML文書をツリー構造として表現し、以下のように要素を操作できます：
// 要素取得
const elem = document.getElementById('content');
const items = document.querySelectorAll('.item');
// プロパティ操作
elem.textContent = '新しいテキスト';
elem.innerHTML = '<strong>HTML付き</strong>';
// 要素追加
const newItem = document.createElement('li');
newItem.textContent = '追加アイテム';
document.querySelector('ul').appendChild(newItem);
// 要素削除
elem.remove();正規表現
正規表現はパターンマッチングに使用され、以下のように記述できます：
// メールアドレスの検証例
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
console.log(emailPattern.test('user@example.com')); // true
// 文字列置換
const cleaned = ' Hello '.replace(/^\s+|\s+$/g, ''); // "Hello"主なフラグ：
i：大文字小文字を区別しないg：グローバルマッチ（全検索）m：複数行モード
実践例：ログインフォームのバリデーション
<form onsubmit="return validateForm()">
<input type="text" id="username" required>
<span id="userMsg"></span>
<input type="password" id="password" required>
<button type="submit">ログイン</button>
</form>
<script>
function validateForm() {
const user = document.getElementById('username').value;
const pwd = document.getElementById('password').value;
const msg = document.getElementById('userMsg');
if (!/^[a-zA-Z0-9]{5,10}$/.test(user)) {
msg.textContent = 'ユーザー名は5〜10文字の英数字';
return false;
}
if (!/^\d{6}$/.test(pwd)) {
alert('パスワードは6桁の数字');
return false;
}
return true;
}
</script>