JavaScriptの実行方法

JavaScriptはブラウザ上で動作するクライアントサイドスクリプト言語であり、ユーザーとのインタラクションを実現します。フロントエンド開発の3要素はHTML（構造）、CSS（スタイル）、JavaScript（振る舞い）です。

1. インラインイベント

<button onclick="displayMessage('こんにちは')">クリック</button>

2. インラインスクリプト

<script>
    console.log('スクリプトがロードされました');
</script>

3. 外部スクリプト

<script src="scripts/core.js"></script>

変数とデータ型

1. 変数宣言

JavaScriptは弱型言語で、変数の型は値によって決定されます。letとconstを使用します。

const totalAmount = 1000;
let userToken = 'abc123';
const [width, height] = [800, 600];

2. コメント

// 単一行コメント
const pi = 3.14;

/* 
   複数行コメント
   1. 計算処理
   2. データ検証
*/
const result = calculate();

3. データ型

• number: 10, 3.14
• string: "text", 'example'
• boolean: true, false
• undefined: 変数初期化未定義
• null: 空参照
• object: 配列、関数、オブジェクト

関数の定義と実行

1. 関数定義

function calculateTotal(price, quantity) {
    return price * quantity;
}

2. 関数呼び出し

const amount = calculateTotal(1500, 3);
console.log(amount); // 4500

変数スコープ

1. ローカル変数

function processItems() {
    const items = [1, 2, 3];
    console.log(items[0]); // 1
}
console.log(items); // エラー

2. グローバル変数

let counter = 0;
function increment() {
    counter++;
}
increment();
console.log(counter); // 1

条件分岐

比較演算子

演算子	説明	例
===	厳密等値	5 === '5' → false
!==	厳密不等値	5 !== '5' → true

論理演算子

const isAvailable = true;
const hasStock = false;
if (isAvailable && !hasStock) {
    console.log('購入可能');
}

DOM操作

要素取得

document.addEventListener('DOMContentLoaded', () => {
    const targetElement = document.getElementById('main-content');
    console.log(targetElement);
});

属性操作

const inputField = document.getElementById('user-input');
inputField.value = '初期値';
inputField.className = 'input-field';

innerHTML操作

const contentArea = document.getElementById('content');
contentArea.innerHTML = '<h2>更新済みコンテンツ</h2>';

配列操作

配列の定義

const colors = ['red', 'green', 'blue'];
const mixedData = [10, 'text', true];

配列メソッド

// 要素追加/削除
colors.push('yellow');
colors.pop(); // 'blue'を削除

// 指定位置操作
colors.splice(1, 0, 'purple'); // [red, purple, green]

ループ処理

forループ

const numbers = [5, 10, 15];
for (let idx = 0; idx < numbers.length; idx++) {
    console.log(numbers[idx]);
}

whileループ

let count = 0;
while (count < 5) {
    console.log(count);
    count++;
}

タイマー処理

単発タイマー

const timerId = setTimeout(() => {
    console.log('5秒後に実行');
}, 5000);

定期タイマー

const intervalId = setInterval(() => {
    console.log('1秒ごとに実行');
}, 1000);

// タイマー停止
clearInterval(intervalId);