JavaScript初心者向け講座

開発環境のセットアップ

1. フォルダの作成

デスクトップに「js-array-object-practice」という名前の新しいフォルダを作成します。

2. VSCodeでフォルダを開く

VSCodeを起動し、[ファイル] → [フォルダを開く] から作成したフォルダを選択します。

3. Live Serverの準備

VSCodeの拡張機能「Live Server」をインストールします。これにより、HTMLファイルの変更がブラウザに自動反映されます。

歴史と必要性

配列とオブジェクトは、1960年代に生まれたプログラミングの重要な概念です。当時、複数のデータを効率的に管理する方法が必要とされ、この2つの構造が考案されました。

なぜこれらが必要なのでしょうか？例えば、クラスの生徒30人分の点数を管理する場合を考えてみましょう。変数を30個作る（score1, score2, ...）のは非効率的です。配列を使えば、一つの変数（scores）ですべての点数を管理できます。

また、生徒一人一人の名前、点数、出席番号などの関連データを管理する場合、オブジェクトを使うことで、データの関係性を明確に保ちながら管理できます。現代のWebアプリケーションでは、これらの構造なしでプログラミングすることは考えられません。

1. 配列の基本

基本概念

配列は、複数のデータを順番に並べて保存できる構造です。例えば、果物の名前をリストとして管理する場合、以下のように書きます：

基本的な書き方（array-basic.html）

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>配列の基本</title>
</head>
<body>
    <h1>配列の基本例</h1>
    <button onclick="showFruits()">果物を表示</button>
    <div id="output"></div>

    <script>
        function showFruits() {
            const fruits = ['りんご', 'バナナ', 'オレンジ'];
            const output = document.getElementById('output');
            output.textContent = fruits.join(', ');
        }
    </script>
</body>
</html>

実行手順：

作成したフォルダ内に「array-basic.html」ファイルを作成します
上記のコードをコピーしてファイルに貼り付けます
ファイルを保存します（Ctrl + S または Command + S）
ファイルを右クリックして「Live Serverで開く」を選択します

演習1: 配列の操作

次の要件を満たすプログラムを作成してください：

好きな食べ物の配列を作成する
新しい食べ物を追加するボタンを作る
配列の内容を表示するボタンを作る

テンプレート（array-foods.html）

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>好きな食べ物リスト</title>
</head>
<body>
    <h1>好きな食べ物リスト</h1>
    <input type="text" id="foodInput" placeholder="食べ物を入力">
    <button onclick="addFood()">追加</button>
    <button onclick="showFoods()">リストを表示</button>
    <div id="output"></div>

    <script>
        // 配列を作成
        const foods = ['カレー', 'ラーメン'];

        function addFood() {
            // ここにコードを書いてください
        }

        function showFoods() {
            // ここにコードを書いてください
        }
    </script>
</body>
</html>

解答例

function addFood() {
    const input = document.getElementById('foodInput');
    const food = input.value;
    
    if (food.trim() !== '') {
        foods.push(food);
        input.value = '';
        showFoods();
    }
}

function showFoods() {
    const output = document.getElementById('output');
    output.textContent = '好きな食べ物: ' + foods.join(', ');
}

このプログラムでは、push()メソッドを使って配列に新しい要素を追加しています。 join()メソッドは配列の要素をカンマで区切った文字列に変換します。また、空の入力を防ぐためにtrim()で空白をチェックしています。

2. オブジェクトの基本

基本概念

オブジェクトは、関連するデータをまとめて管理する構造です。例えば、ユーザーの情報（名前、年齢、趣味）をまとめて管理する場合に便利です。

基本的な書き方（object-basic.html）

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>オブジェクトの基本</title>
</head>
<body>
    <h1>オブジェクトの基本例</h1>
    <button onclick="showUser()">ユーザー情報を表示</button>
    <div id="output"></div>

    <script>
        function showUser() {
            const user = {
                name: '山田太郎',
                age: 25,
                hobby: '読書'
            };
            
            const output = document.getElementById('output');
            output.textContent = `名前: ${user.name}, 年齢: ${user.age}歳, 趣味: ${user.hobby}`;
        }
    </script>
</body>
</html>

演習2: 商品情報の管理

商品の情報（名前、価格、在庫数）を管理するプログラムを作成してください。

テンプレート（product-manager.html）

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>商品管理</title>
</head>
<body>
    <h1>商品管理システム</h1>
    <div>
        <input type="text" id="productName" placeholder="商品名">
        <input type="number" id="price" placeholder="価格">
        <input type="number" id="stock" placeholder="在庫数">
        <button onclick="addProduct()">商品を追加</button>
    </div>
    <button onclick="showProducts()">商品一覧を表示</button>
    <div id="output"></div>

    <script>
        const products = [];

        function addProduct() {
            // ここにコードを書いてください
        }

        function showProducts() {
            // ここにコードを書いてください
        }
    </script>
</body>
</html>

解答例

function addProduct() {
    const name = document.getElementById('productName').value;
    const price = parseInt(document.getElementById('price').value);
    const stock = parseInt(document.getElementById('stock').value);
    
    if (name && !isNaN(price) && !isNaN(stock)) {
        const product = {
            name: name,
            price: price,
            stock: stock
        };
        products.push(product);
        
        // 入力フォームをクリア
        document.getElementById('productName').value = '';
        document.getElementById('price').value = '';
        document.getElementById('stock').value = '';
        
        showProducts();
    }
}

function showProducts() {
    const output = document.getElementById('output');
    let result = '商品一覧:\n';
    
    products.forEach(product => {
        result += `商品名: ${product.name}, 価格: ${product.price}円, 在庫: ${product.stock}個\n`;
    });
    
    output.textContent = result;
}

このプログラムでは、オブジェクトと配列を組み合わせています。各商品の情報をオブジェクトとして作成し、それを配列に追加しています。また、forEach()メソッドを使って配列の各要素（商品）を順番に処理しています。

用語解説

配列: 複数のデータをまとめて管理できる特別な入れ物。箱が連なっているイメージで、それぞれの箱に番号（インデックス）が付いています。
インデックス: 配列の中の位置を示す番号。0から始まります。例えば、最初の要素は0番目、次は1番目となります。
オブジェクト: 関連するデータをまとめて管理できる入れ物。データには名前（キー）を付けて管理します。
プロパティ: オブジェクトの中にある名前（キー）と値のペア。例：name: '太郎'
メソッド: 配列やオブジェクトに用意されている便利な機能（関数）。例：push()は配列の最後にデータを追加します。