Skip to Content
Lecture第8回：JavaScript基礎

第8回：JavaScript基礎

🎯 学習目標

  • JavaScriptの基本概念を理解する
  • 変数の宣言方法を使い分けられる
  • データ型を理解し操作できる
  • 制御構造を使ってプログラムを作成できる

📚 導入（5分）

CSSからJavaScriptへのステップアップ

これまでHTML（構造）とCSS（装飾）を学習してきました。今回からは「動作」を担うJavaScriptを学習します。

<!-- HTML：構造 -->
<button id="myButton">クリック</button>
 
<!-- CSS：装飾 -->
<style>
#myButton {
    background: blue;
    color: white;
}
</style>
 
<!-- JavaScript：動作 -->
<script>
document.getElementById('myButton').onclick = function() {
    alert('ボタンがクリックされました！');
};
</script>

プログラミング言語としてのJavaScript

JavaScriptは以下の特徴を持つプログラミング言語です：

  • インタープリター言語：コンパイル不要で即実行
  • 動的型付け：変数の型が実行時に決まる
  • オブジェクト指向：オブジェクトベースの設計
  • 関数型：関数を値として扱える
  • イベント駆動：ユーザーの操作に応答

💡 理論学習（30分）

JavaScript基本（15分）

JavaScriptの記述場所

<!DOCTYPE html>
<html>
<head>
    <!-- ヘッダー内（ページ読み込み前に実行） -->
    <script>
        console.log('ヘッダー内のスクリプト');
    </script>
</head>
<body>
    <h1>ページ内容</h1>
    
    <!-- インライン（非推奨） -->
    <button onclick="alert('クリックされました')">クリック</button>
    
    <!-- ボディ内（HTML読み込み後に実行） -->
    <script>
        console.log('ボディ内のスクリプト');
    </script>
    
    <!-- 外部ファイル（推奨） -->
    <script src="script.js"></script>
</body>
</html>

変数の宣言方法の違い

// var：古い書き方（避けるべき）
var name = "太郎";
var name = "次郎"; // 再宣言可能（問題の原因）
console.log(name); // "次郎"
 
// let：変更可能な変数（ES2015以降）
let age = 25;
age = 26; // 値の変更は可能
// let age = 30; // エラー：再宣言不可
 
// const：変更不可な定数（ES2015以降）
const PI = 3.14159;
// PI = 3.14; // エラー：値の変更不可
// const PI = 3.1415; // エラー：再宣言不可
 
const user = { name: "太郎" };
user.name = "次郎"; // オブジェクトの中身は変更可能
user.age = 25; // プロパティの追加も可能

スコープ（変数の有効範囲）

// グローバルスコープ
let globalVar = "どこからでもアクセス可能";
 
function myFunction() {
    // 関数スコープ
    let functionVar = "この関数内でのみアクセス可能";
    
    if (true) {
        // ブロックスコープ
        let blockVar = "このブロック内でのみアクセス可能";
        const blockConst = "定数も同様";
        
        console.log(globalVar);   // アクセス可能
        console.log(functionVar); // アクセス可能
        console.log(blockVar);    // アクセス可能
    }
    
    console.log(globalVar);   // アクセス可能
    console.log(functionVar); // アクセス可能
    // console.log(blockVar); // エラー：アクセス不可
}
 
console.log(globalVar);   // アクセス可能
// console.log(functionVar); // エラー：アクセス不可

データ型の理解

// プリミティブ型（基本データ型）
 
// 1. string（文字列）
let str1 = "ダブルクォート";
let str2 = 'シングルクォート';
let str3 = `テンプレート文字列：${str1}`;
let str4 = "複数行の\n文字列";
let str5 = `複数行の
テンプレート
文字列`;
 
// 2. number（数値）
let integer = 42;           // 整数
let float = 3.14159;       // 小数
let negative = -10;        // 負数
let scientific = 1.23e10;  // 科学的記数法
let infinity = Infinity;   // 無限大
let notANumber = NaN;      // Not a Number
 
// 3. boolean（真偽値）
let isTrue = true;
let isFalse = false;
 
// 4. undefined（未定義）
let undefinedVar;
console.log(undefinedVar); // undefined
 
// 5. null（空の値）
let emptyVar = null;
 
// 6. symbol（シンボル）- ES2015以降
let sym = Symbol("説明");
 
// 7. bigint（大きな整数）- ES2020以降
let bigNumber = 123n;
 
// 参照型（オブジェクト型）
 
// 1. object（オブジェクト）
let obj = {
    name: "太郎",
    age: 25,
    "favorite color": "blue" // キーにスペースがある場合
};
 
// 2. array（配列）- オブジェクトの一種
let arr = [1, 2, 3, 4, 5];
let mixedArr = [1, "文字列", true, null, {name: "太郎"}];
 
// 3. function（関数）- オブジェクトの一種
let func = function() {
    return "Hello World";
};

型の確認と変換

// typeof演算子で型を確認
console.log(typeof "hello");     // "string"
console.log(typeof 42);          // "number"
console.log(typeof true);        // "boolean"
console.log(typeof undefined);   // "undefined"
console.log(typeof null);        // "object" (歴史的理由)
console.log(typeof {});          // "object"
console.log(typeof []);          // "object"
console.log(typeof function(){}); // "function"
 
// 型変換（暗黙的）
console.log("5" + 3);      // "53" (文字列結合)
console.log("5" - 3);      // 2 (数値計算)
console.log("5" * "3");    // 15 (数値計算)
console.log("hello" - 1);  // NaN (計算不可)
 
// 型変換（明示的）
let strNum = "123";
let num1 = Number(strNum);      // 123
let num2 = parseInt(strNum);    // 123
let num3 = parseFloat("3.14");  // 3.14
 
let numStr = 123;
let str = String(numStr);       // "123"
let str2 = numStr.toString();   // "123"
 
let bool1 = Boolean(1);         // true
let bool2 = Boolean(0);         // false
let bool3 = Boolean("");        // false
let bool4 = Boolean("hello");   // true

演算子の種類

// 算術演算子
let a = 10, b = 3;
console.log(a + b);    // 13 (加算)
console.log(a - b);    // 7  (減算)
console.log(a * b);    // 30 (乗算)
console.log(a / b);    // 3.333... (除算)
console.log(a % b);    // 1  (余り)
console.log(a ** b);   // 1000 (べき乗)
 
// 代入演算子
let x = 10;
x += 5;  // x = x + 5;  → 15
x -= 3;  // x = x - 3;  → 12
x *= 2;  // x = x * 2;  → 24
x /= 4;  // x = x / 4;  → 6
x %= 5;  // x = x % 5;  → 1
 
// インクリメント・デクリメント
let count = 5;
console.log(count++);  // 5 (後置：使用後にインクリメント)
console.log(count);    // 6
console.log(++count);  // 7 (前置：インクリメント後に使用)
console.log(count--);  // 7 (後置：使用後にデクリメント)
console.log(count);    // 6
 
// 比較演算子
console.log(5 == "5");   // true (値のみ比較、型変換あり)
console.log(5 === "5");  // false (値と型を比較)
console.log(5 != "6");   // true
console.log(5 !== "5");  // true (型も異なる)
console.log(5 > 3);      // true
console.log(5 < 10);     // true
console.log(5 >= 5);     // true
console.log(5 <= 4);     // false
 
// 論理演算子
console.log(true && true);   // true (AND: 両方がtrueの時true)
console.log(true && false);  // false
console.log(true || false);  // true (OR: どちらかがtrueの時true)
console.log(false || false); // false
console.log(!true);          // false (NOT: 真偽値を反転)
console.log(!false);         // true
 
// 短絡評価
let user = null;
let name = user && user.name; // userがfalsy値なので、user.nameは評価されない
let defaultName = name || "ゲスト"; // nameがfalsy値なので"ゲスト"が使用される

制御構造（15分）

条件分岐

// if文の基本形
let age = 20;
 
if (age >= 18) {
    console.log("成人です");
}
 
// if...else文
if (age >= 20) {
    console.log("成人です");
} else {
    console.log("未成年です");
}
 
// if...else if...else文
if (age >= 65) {
    console.log("高齢者です");
} else if (age >= 20) {
    console.log("成人です");
} else if (age >= 13) {
    console.log("未成年です");
} else {
    console.log("子供です");
}
 
// 条件演算子（三項演算子）
let status = age >= 20 ? "成人" : "未成年";
console.log(status);
 
// 複数の条件
let score = 85;
if (score >= 90) {
    console.log("優秀");
} else if (score >= 80) {
    console.log("良好");
} else if (score >= 60) {
    console.log("合格");
} else {
    console.log("不合格");
}
 
// switch文
let grade = 'A';
switch (grade) {
    case 'A':
        console.log("優秀");
        break;
    case 'B':
        console.log("良好");
        break;
    case 'C':
        console.log("普通");
        break;
    case 'D':
        console.log("要努力");
        break;
    default:
        console.log("無効な成績");
        break;
}
 
// 複数のcaseを同じ処理にまとめる
let dayOfWeek = 6;
switch (dayOfWeek) {
    case 1:
    case 2:
    case 3:
    case 4:
    case 5:
        console.log("平日");
        break;
    case 6:
    case 7:
        console.log("休日");
        break;
    default:
        console.log("無効な曜日");
}

ループ処理

// for文（カウントアップ）
for (let i = 0; i < 5; i++) {
    console.log(`カウント: ${i}`);
}
// 出力: 0, 1, 2, 3, 4
 
// for文（カウントダウン）
for (let i = 10; i > 0; i--) {
    console.log(`カウントダウン: ${i}`);
}
 
// for文（ステップ指定）
for (let i = 0; i <= 20; i += 5) {
    console.log(i); // 0, 5, 10, 15, 20
}
 
// while文
let count = 0;
while (count < 3) {
    console.log(`while: ${count}`);
    count++;
}
 
// do...while文（最低1回は実行される）
let num = 0;
do {
    console.log(`do-while: ${num}`);
    num++;
} while (num < 3);
 
// 配列のループ
let fruits = ['apple', 'banana', 'orange', 'grape'];
 
// 通常のfor文
for (let i = 0; i < fruits.length; i++) {
    console.log(`${i}: ${fruits[i]}`);
}
 
// for...of文（値を取得）
for (let fruit of fruits) {
    console.log(fruit);
}
 
// for...in文（インデックスを取得）
for (let index in fruits) {
    console.log(`${index}: ${fruits[index]}`);
}
 
// オブジェクトのループ
let person = {
    name: "太郎",
    age: 25,
    city: "東京"
};
 
for (let key in person) {
    console.log(`${key}: ${person[key]}`);
}
 
// break文とcontinue文
for (let i = 0; i < 10; i++) {
    if (i === 3) {
        continue; // 3をスキップ
    }
    if (i === 7) {
        break; // 7で終了
    }
    console.log(i); // 0, 1, 2, 4, 5, 6
}

関数の基礎

// 関数宣言
function greet(name) {
    return `Hello, ${name}!`;
}
 
// 関数呼び出し
let message = greet("太郎");
console.log(message); // "Hello, 太郎!"
 
// 関数式
let greet2 = function(name) {
    return `Hi, ${name}!`;
};
 
// アロー関数（ES2015以降）
let greet3 = (name) => {
    return `Hey, ${name}!`;
};
 
// アロー関数（省略形）
let greet4 = name => `Hello there, ${name}!`;
 
// 複数の引数
function add(a, b) {
    return a + b;
}
 
// デフォルト引数
function greetWithDefault(name = "ゲスト") {
    return `Hello, ${name}!`;
}
 
console.log(greetWithDefault());        // "Hello, ゲスト!"
console.log(greetWithDefault("太郎"));  // "Hello, 太郎!"
 
// 可変長引数
function sum(...numbers) {
    let total = 0;
    for (let num of numbers) {
        total += num;
    }
    return total;
}
 
console.log(sum(1, 2, 3, 4, 5)); // 15

🛠️ 実習（50分）

簡単な計算アプリ作成（45分）

HTML構造

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript計算アプリ</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <h1>JavaScript計算アプリ</h1>
        
        <!-- 基本計算セクション -->
        <section class="calculator-section">
            <h2>基本計算</h2>
            <div class="input-group">
                <input type="number" id="num1" placeholder="数値1" value="10">
                <select id="operator">
                    <option value="+">+</option>
                    <option value="-">-</option>
                    <option value="*">×</option>
                    <option value="/">/</option>
                </select>
                <input type="number" id="num2" placeholder="数値2" value="5">
                <button id="calculate">計算</button>
            </div>
            <div class="result" id="result">結果: </div>
        </section>
        
        <!-- 変数デモセクション -->
        <section class="demo-section">
            <h2>変数とデータ型デモ</h2>
            <div class="demo-content">
                <button id="variableDemo">変数デモ</button>
                <button id="typeDemo">データ型デモ</button>
                <button id="arrayDemo">配列デモ</button>
                <div class="output" id="demoOutput"></div>
            </div>
        </section>
        
        <!-- 制御構造デモ -->
        <section class="control-section">
            <h2>制御構造デモ</h2>
            <div class="control-content">
                <div class="control-group">
                    <label for="gradeInput">成績を入力 (0-100):</label>
                    <input type="number" id="gradeInput" min="0" max="100" value="85">
                    <button id="gradeCheck">判定</button>
                    <div class="control-result" id="gradeResult"></div>
                </div>
                
                <div class="control-group">
                    <label for="loopCount">ループ回数:</label>
                    <input type="number" id="loopCount" min="1" max="10" value="5">
                    <button id="loopDemo">ループ実行</button>
                    <div class="control-result" id="loopResult"></div>
                </div>
            </div>
        </section>
        
        <!-- 九九表生成 -->
        <section class="table-section">
            <h2>九九表生成</h2>
            <div class="table-controls">
                <label for="tableSize">サイズ:</label>
                <input type="number" id="tableSize" min="1" max="12" value="9">
                <button id="generateTable">九九表生成</button>
            </div>
            <div id="multiplicationTable" class="table-container"></div>
        </section>
    </div>
    
    <script src="js/script.js"></script>
</body>
</html>

CSS（css/style.css）

/* 基本スタイル */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    padding: 20px;
}
 
.container {
    max-width: 800px;
    margin: 0 auto;
    background: white;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    padding: 30px;
}
 
h1 {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
    font-size: 2.5rem;
}
 
h2 {
    color: #667eea;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #eee;
}
 
/* セクション */
section {
    margin-bottom: 40px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 10px;
}
 
/* 入力フォーム */
.input-group {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
 
input[type="number"], select {
    padding: 12px;
    border: 2px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
    flex: 1;
    min-width: 120px;
}
 
input[type="number"]:focus, select:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
 
button {
    padding: 12px 20px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: all 0.3s ease;
}
 
button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
 
button:active {
    transform: translateY(0);
}
 
/* 結果表示 */
.result, .output, .control-result {
    background: white;
    padding: 15px;
    border-radius: 5px;
    border-left: 4px solid #667eea;
    font-size: 18px;
    font-weight: bold;
    margin-top: 15px;
    min-height: 50px;
    display: flex;
    align-items: center;
}
 
/* デモセクション */
.demo-content {
    display: flex;
    gap: 10px;
    flex-direction: column;
}
 
.demo-content button {
    margin-bottom: 10px;
}
 
/* 制御構造セクション */
.control-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
 
.control-group {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
 
.control-group label {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
    color: #555;
}
 
.control-group input {
    margin-bottom: 10px;
    margin-right: 10px;
}
 
/* テーブルセクション */
.table-controls {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
 
.table-container {
    background: white;
    padding: 20px;
    border-radius: 8px;
    overflow-x: auto;
}
 
.multiplication-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}
 
.multiplication-table th,
.multiplication-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
    min-width: 40px;
}
 
.multiplication-table th {
    background: #667eea;
    color: white;
    font-weight: bold;
}
 
.multiplication-table td {
    background: #f8f9fa;
    transition: background-color 0.3s ease;
}
 
.multiplication-table td:hover {
    background: #e9ecef;
}
 
/* レスポンシブ */
@media (max-width: 768px) {
    .container {
        margin: 10px;
        padding: 20px;
    }
    
    h1 {
        font-size: 2rem;
    }
    
    .input-group {
        flex-direction: column;
    }
    
    .input-group > * {
        width: 100%;
    }
    
    .demo-content {
        gap: 5px;
    }
    
    .table-controls {
        flex-direction: column;
        align-items: stretch;
    }
}

JavaScript（js/script.js）

// DOM要素の取得
const num1Input = document.getElementById('num1');
const num2Input = document.getElementById('num2');
const operatorSelect = document.getElementById('operator');
const calculateBtn = document.getElementById('calculate');
const resultDiv = document.getElementById('result');
 
const variableDemoBtn = document.getElementById('variableDemo');
const typeDemoBtn = document.getElementById('typeDemo');
const arrayDemoBtn = document.getElementById('arrayDemo');
const demoOutput = document.getElementById('demoOutput');
 
const gradeInput = document.getElementById('gradeInput');
const gradeCheckBtn = document.getElementById('gradeCheck');
const gradeResult = document.getElementById('gradeResult');
 
const loopCountInput = document.getElementById('loopCount');
const loopDemoBtn = document.getElementById('loopDemo');
const loopResult = document.getElementById('loopResult');
 
const tableSizeInput = document.getElementById('tableSize');
const generateTableBtn = document.getElementById('generateTable');
const tableContainer = document.getElementById('multiplicationTable');
 
// 基本計算機能
function calculate() {
    // 入力値を取得
    const num1 = parseFloat(num1Input.value);
    const num2 = parseFloat(num2Input.value);
    const operator = operatorSelect.value;
    
    // 入力値の検証
    if (isNaN(num1) || isNaN(num2)) {
        resultDiv.textContent = "結果: 有効な数値を入力してください";
        resultDiv.style.color = "#dc3545";
        return;
    }
    
    let result;
    
    // 演算子による処理の分岐
    switch (operator) {
        case '+':
            result = num1 + num2;
            break;
        case '-':
            result = num1 - num2;
            break;
        case '*':
            result = num1 * num2;
            break;
        case '/':
            if (num2 === 0) {
                resultDiv.textContent = "結果: ゼロで割ることはできません";
                resultDiv.style.color = "#dc3545";
                return;
            }
            result = num1 / num2;
            break;
        default:
            resultDiv.textContent = "結果: 無効な演算子です";
            resultDiv.style.color = "#dc3545";
            return;
    }
    
    // 結果の表示
    resultDiv.textContent = `結果: ${num1} ${operator} ${num2} = ${result}`;
    resultDiv.style.color = "#28a745";
}
 
// 変数デモ
function variableDemo() {
    let output = "=== 変数デモ ===\n";
    
    // let変数
    let userName = "太郎";
    output += `let userName = "${userName}"\n`;
    
    userName = "花子";
    output += `userName = "${userName}" (値変更可能)\n`;
    
    // const定数
    const PI = 3.14159;
    output += `const PI = ${PI} (変更不可)\n`;
    
    // スコープの例
    let globalVar = "グローバル変数";
    if (true) {
        let blockVar = "ブロック変数";
        output += `ブロック内: ${globalVar}, ${blockVar}\n`;
    }
    output += `ブロック外: ${globalVar}\n`;
    
    demoOutput.innerHTML = `<pre>${output}</pre>`;
}
 
// データ型デモ
function typeDemo() {
    let output = "=== データ型デモ ===\n";
    
    // 各データ型の例
    let str = "Hello World";
    let num = 42;
    let bool = true;
    let undef = undefined;
    let nullVar = null;
    let obj = { name: "太郎", age: 25 };
    let arr = [1, 2, 3, "四", true];
    
    output += `文字列: "${str}" (型: ${typeof str})\n`;
    output += `数値: ${num} (型: ${typeof num})\n`;
    output += `真偽値: ${bool} (型: ${typeof bool})\n`;
    output += `未定義: ${undef} (型: ${typeof undef})\n`;
    output += `null: ${nullVar} (型: ${typeof nullVar})\n`;
    output += `オブジェクト: ${JSON.stringify(obj)} (型: ${typeof obj})\n`;
    output += `配列: ${JSON.stringify(arr)} (型: ${typeof arr})\n`;
    
    // 型変換の例
    output += "\n=== 型変換 ===\n";
    output += `"5" + 3 = ${("5" + 3)} (文字列結合)\n`;
    output += `"5" - 3 = ${("5" - 3)} (数値計算)\n`;
    output += `Number("123") = ${Number("123")}\n`;
    output += `String(456) = "${String(456)}"\n`;
    
    demoOutput.innerHTML = `<pre>${output}</pre>`;
}
 
// 配列デモ
function arrayDemo() {
    let output = "=== 配列デモ ===\n";
    
    // 配列の作成
    let fruits = ["りんご", "バナナ", "オレンジ"];
    output += `配列: ${JSON.stringify(fruits)}\n`;
    output += `長さ: ${fruits.length}\n`;
    
    // 要素の追加
    fruits.push("ぶどう");
    output += `pushで追加: ${JSON.stringify(fruits)}\n`;
    
    // 要素の削除
    let removed = fruits.pop();
    output += `popで削除: "${removed}", 残り: ${JSON.stringify(fruits)}\n`;
    
    // ループ処理
    output += "\n=== 配列のループ ===\n";
    for (let i = 0; i < fruits.length; i++) {
        output += `${i}: ${fruits[i]}\n`;
    }
    
    demoOutput.innerHTML = `<pre>${output}</pre>`;
}
 
// 成績判定
function checkGrade() {
    const score = parseInt(gradeInput.value);
    let grade, comment;
    
    if (isNaN(score) || score < 0 || score > 100) {
        gradeResult.textContent = "0-100の範囲で入力してください";
        gradeResult.style.color = "#dc3545";
        return;
    }
    
    // if...else if文による判定
    if (score >= 90) {
        grade = "A";
        comment = "優秀";
    } else if (score >= 80) {
        grade = "B";
        comment = "良好";
    } else if (score >= 70) {
        grade = "C";
        comment = "普通";
    } else if (score >= 60) {
        grade = "D";
        comment = "要努力";
    } else {
        grade = "F";
        comment = "不合格";
    }
    
    gradeResult.textContent = `点数: ${score}点 → 評価: ${grade} (${comment})`;
    gradeResult.style.color = score >= 60 ? "#28a745" : "#dc3545";
}
 
// ループデモ
function loopDemo() {
    const count = parseInt(loopCountInput.value);
    
    if (isNaN(count) || count < 1 || count > 10) {
        loopResult.textContent = "1-10の範囲で入力してください";
        loopResult.style.color = "#dc3545";
        return;
    }
    
    let output = `${count}回のループ結果:\n`;
    
    for (let i = 1; i <= count; i++) {
        output += `${i}回目: ${i * i} (${i}の二乗)\n`;
    }
    
    loopResult.innerHTML = `<pre>${output}</pre>`;
    loopResult.style.color = "#333";
}
 
// 九九表生成
function generateTable() {
    const size = parseInt(tableSizeInput.value);
    
    if (isNaN(size) || size < 1 || size > 12) {
        tableContainer.innerHTML = "<p>1-12の範囲で入力してください</p>";
        return;
    }
    
    let tableHTML = '<table class="multiplication-table">';
    
    // ヘッダー行
    tableHTML += '<tr><th>×</th>';
    for (let i = 1; i <= size; i++) {
        tableHTML += `<th>${i}</th>`;
    }
    tableHTML += '</tr>';
    
    // データ行
    for (let i = 1; i <= size; i++) {
        tableHTML += `<tr><th>${i}</th>`;
        for (let j = 1; j <= size; j++) {
            tableHTML += `<td>${i * j}</td>`;
        }
        tableHTML += '</tr>';
    }
    
    tableHTML += '</table>';
    tableContainer.innerHTML = tableHTML;
}
 
// イベントリスナーの設定
calculateBtn.addEventListener('click', calculate);
variableDemoBtn.addEventListener('click', variableDemo);
typeDemoBtn.addEventListener('click', typeDemo);
arrayDemoBtn.addEventListener('click', arrayDemo);
gradeCheckBtn.addEventListener('click', checkGrade);
loopDemoBtn.addEventListener('click', loopDemo);
generateTableBtn.addEventListener('click', generateTable);
 
// Enterキーでの実行
num1Input.addEventListener('keypress', function(e) {
    if (e.key === 'Enter') calculate();
});
num2Input.addEventListener('keypress', function(e) {
    if (e.key === 'Enter') calculate();
});
 
// 初期表示
console.log("JavaScript計算アプリが読み込まれました");

📝 まとめ・質疑応答（5分）

JavaScript基本構文の確認

✅ チェックリスト

  • let/constの使い分けを理解した
  • 基本的なデータ型を理解した
  • 演算子を使い分けられる
  • if文とswitch文を書ける
  • for文とwhile文を書ける
  • 関数を定義して呼び出せる

次回予告：DOM操作

次回学習する内容：

  • DOM（Document Object Model）の概念
  • 要素の取得方法
  • 要素の内容・属性の変更
  • イベント処理の基礎

🏠 宿題

  1. じゃんけんゲームの作成

    function janken(playerChoice) {
    const choices = ['グー', 'チョキ', 'パー'];
    const computerChoice = choices[Math.floor(Math.random() * 3)];
    // 勝敗判定のロジックを実装
}

  2. 数当てゲーム

    • 1-100のランダムな数を生成
    • ユーザーの入力と比較
    • 「大きい」「小さい」のヒント表示

  3. BMI計算機

    • 身長・体重から BMI を計算
    • BMI値に応じた判定表示

📚 参考リソース

次回もお楽しみに！ 💻

Last updated on
第7回：CSS装飾とアニメーション第9回：DOM操作とイベント処理