HP制作のためのJavaScript入門② ~ホームページに多彩な機能を追加する~

jQueryの導入

まず、jQueryをHTMLファイルに追加します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>フェードアウトの例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #message {
            width: 300px;
            padding: 10px;
            background-color: #f9f9f9;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div id="message">これはフェードアウトするメッセージです。</div>
    <button id="fadeButton">フェードアウト</button>

    <script>
        $(document).ready(function() {
            $('#fadeButton').click(function() {
                $('#message').fadeOut('slow');
            });
        });
    </script>
</body>
</html>

このコードでは、ボタンをクリックすると、メッセージがゆっくりとフェードアウトします。

郵便番号から住所を検索

次に、JavaScriptを使って、郵便番号から住所を検索する機能を実装します。ここでは、Web APIを使用して、郵便番号から住所を取得します。

郵便番号APIの使用

郵便番号APIを使用して、郵便番号に対応する住所を取得します。以下は、そのための基本的なコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>郵便番号から住所を検索</title>
</head>
<body>
    <h1>郵便番号から住所を検索</h1>
    <input type="text" id="zipcode" placeholder="郵便番号を入力">
    <button id="searchButton">検索</button>
    <div id="address"></div>

    <script>
        document.getElementById('searchButton').addEventListener('click', function() {
            let zipcode = document.getElementById('zipcode').value;
            fetch(`https://api.zipaddress.net/?zipcode=${zipcode}`)
                .then(response => response.json())
                .then(data => {
                    if (data.code === 200) {
                        document.getElementById('address').textContent = data.data.fullAddress;
                    } else {
                        document.getElementById('address').textContent = '住所が見つかりませんでした。';
                    }
                })
                .catch(error => {
                    console.error('エラーが発生しました:', error);
                    document.getElementById('address').textContent = 'エラーが発生しました。';
                });
        });
    </script>
</body>
</html>

このコードでは、ユーザーが郵便番号を入力し、検索ボタンをクリックすると、対応する住所が表示されます。

演習

ここまで学んだ内容を基に、いくつかの演習を行いましょう。

演習1: 確認メッセージ

ユーザーがボタンをクリックすると確認メッセージを表示し、OKをクリックすると特定のメッセージを表示するページを作成します。

演習2: フェードアウト

ページ上の複数の要素をフェードアウトさせる機能を実装します。異なる速度でフェードアウトするように設定してみましょう。

演習3: 郵便番号検索

郵便番号検索機能を拡張し、住所だけでなく、都道府県や市区町村も表示するようにします。

今後に役立つ予備知識

JavaScriptライブラリの紹介

JavaScriptライブラリを使用することで、開発の効率を大幅に向上させることができます。ここでは、代表的なライブラリについて紹介します。

jQuery

jQueryは、DOM操作、イベント処理、アニメーション、Ajaxなどの機能を簡単に実装できるライブラリです。以下は、基本的な使用例です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQueryの基本例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1 id="title">jQueryの例</h1>
    <button id="changeTitle">タイトルを変更</button>

    <script>
        $(document).ready(function() {
            $('#changeTitle').click(function() {
                $('#title').text('タイトルが変更されました');
            });
        });
    </script>
</body>
</html>
Lodash

Lodashは、配列、オブジェクト、文字列などの操作を簡単に行うためのユーティリティライブラリです。以下は、Lodashの使用例です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lodashの基本例</title>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
</head>
<body>
    <h1>Lodashの例</h1>
    <script>
        const array = [1, 2, 3, 4, 5];
        const evens = _.filter(array, function(num) {
            return num % 2 === 0;
        });
        console.log(evens); // [2, 4]
    </script>
</body>
</html>

Web APIの活用

Web APIを使用することで、外部のサービスと連携し、データの取得や送信が可能になります。ここでは、基本的な使用方法を紹介します。

Fetch API

Fetch APIは、HTTPリクエストを行い、レスポンスを処理するためのモダンな方法です。以下は、基本的な使用例です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fetch APIの基本例</title>
</head>
<body>
    <h1>Fetch APIの例</h1>
    <script>
        fetch('https://jsonplaceholder.typicode.com/posts/1')
            .then(response => response.json())
            .then(data => {
                console.log(data);
                document.body.innerHTML += `<p>Title: ${data.title}</p>`;
            })
            .catch(error => console.error('エラー:', error));
    </script>
</body>
</html>

フレームワークの基本知識

JavaScriptフレームワークを使用することで、大規模なアプリケーションを効率的に開発できます。ここでは、代表的なフレームワークを紹介します。

React

Reactは、ユーザーインターフェースを構築するためのJavaScriptライブラリです。コンポーネントベースのアーキテクチャを採用しており、再利用可能なUI部品を作成することができます。

// 簡単なReactコンポーネントの例
import React from 'react';
import ReactDOM from 'react-dom';

function App() {
    return (
        <div>
            <h1>Hello, React!</h1>
        </div>
    );
}

ReactDOM.render(<App />, document.getElementById('root'));
Vue.js

Vue.jsは、シンプルで使いやすいJavaScriptフレームワークです。リアクティブなデータバインディングとコンポーネントベースの構造を提供します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.jsの基本例</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
</head>
<body>
    <div id="app">
        <h1>{{ message }}</h1>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'こんにちは、Vue.js!'
            }
        });
    </script>
</body>
</html>
Angular

Angularは、Googleが開発したJavaScriptフレームワークで、大規模なシングルページアプリケーションの構築に適しています。TypeScriptを使用して開発されており、強力な型システムを提供します。

// 簡単なAngularコンポーネントの例
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    template: `<h1>{{ title }}</h1>`,
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'こんにちは、Angular!';
}

予約語は、変数名や関数名として使用できない

JavaScriptの予約語は、変数名や関数名として使用できないキーワードです。これらのキーワードは、JavaScriptの構文で特別な意味を持つため、プログラム中で別の目的で使用することはできません。以下は、JavaScriptの予約語のリストです。

abstract, boolean, break, byte, case, catch, char, class, const, continue, debugger, default, delete, do, double, else, enum, export, extends, false, final, finally, float, for, function, goto, if, implements, import, in, instanceof, int, interface, let, long, native, new, null, package, private, protected, public, return, short, static, super, switch, synchronized, this, throw, throws, transient, true, try, typeof, var, void, volatile, while, with, yield

変数名やプロパティ名にハイフン(-)を使用することができない

JavaScriptでは、変数名やプロパティ名にハイフン(-)を使用することができません。ハイフンがJavaScriptの文法上、マイナス記号として解釈されるためです。

CSSプロパティ名のようにハイフンを含む名前をJavaScriptで使用する場合、キャメルケース(camelCase)に変換する必要があります。

キャメルケース(camelCase)のルール

  • 最初の単語は全て小文字で始める。
  • それ以降の単語の先頭文字を大文字にする。
  • ハイフンやスペースなどの区切り文字を使わない。

英語の【camel】にはラクダという意味があり、ラクダのコブのように見えることからこの名前があります。

例えば、font-size をキャメルケースに変換すると fontSize になります。
その他の例として、background-colorbackgroundColormargin-leftmarginLeft となります。

addEventListenerメソッドの第二引数はコールバック関数です。

コールバック関数とは、他の関数に引数として渡される関数のことです。この関数は、特定のイベントや条件が発生したときに実行されます。

例えば、addEventListenerを使ってボタンがクリックされたときに実行する関数を設定する場合、この関数がコールバック関数です。コールバック関数は、非同期処理やイベント駆動プログラミングでよく使われます。

関数を変数に代入することができる。

JavaScriptでは、関数を変数に代入することができます。これは、JavaScriptが関数をファーストクラスオブジェクトとして扱うためです。関数を変数に代入することで、その変数を通じて関数を呼び出すことができます。

例: 関数を変数に代入する

以下に、具体的なコード例を示します。

// 関数を定義
function greet() {
    console.log("Hello, world!");
}

// 関数を変数に代入
const greeting = greet;

// 変数を通じて関数を呼び出す
greeting();  // "Hello, world!" と表示される

この例では、greetという関数を定義し、その関数をgreetingという変数に代入しています。その後、greetingを使って関数を呼び出しています。

無名関数 (匿名関数) を変数に代入する

無名関数 (匿名関数) も直接変数に代入することができます。

// 無名関数を変数に代入
const sayHello = function() {
  console.log("Hello!");
};

// 変数を通じて関数を呼び出す
sayHello();  // "Hello!" と表示される


アロー関数を変数に代入する

アロー関数も変数に代入することができます。

// アロー関数を変数に代入
const add = (a, b) => {
    return a + b;
};

// 変数を通じて関数を呼び出す
console.log(add(2, 3));  // 5 と表示される

実用例: 高階関数

関数を変数に代入できる特性を利用して、高階関数を作成することができます。高階関数とは、関数を引数として受け取ったり、関数を戻り値として返す関数のことです。

// 関数を引数として受け取る高階関数
function repeat(operation, num) {
    for (let i = 0; i < num; i++) {
        operation();
    }
}

// 実行したい関数を定義
const sayHi = () => {
    console.log("Hi!");
};

// 高階関数を呼び出す
repeat(sayHi, 3);  // "Hi!" が3回表示される


この例では、repeatという高階関数がoperationという関数を引数として受け取り、指定された回数だけその関数を実行します。

JavaScriptでは、関数を変数に代入することができます。変数に関数を代入することによりコードの柔軟性と再利用性が向上します。無名関数やアロー関数も同様に変数に代入でき、高階関数を使って関数を引数として渡したり、戻り値として返したりすることも可能です。

イベントのeについて。

イベントオブジェクト(通常 e と略される)は、イベントハンドラーの引数として使われるイベントオブジェクトを指します。このイベントオブジェクトは、ユーザーがウェブページ上で何らかのアクション(クリック、キー押下、マウス移動など)を行ったときに、関連する情報を提供します。

イベントオブジェクトの役割

イベントオブジェクトには、イベントが発生した要素や、そのイベントに関連する詳細な情報が含まれます。例えば、マウスイベントの場合はマウスの位置や押されたボタンの情報、キーボードイベントの場合は押されたキーの情報などが含まれます。

イベントオブジェクトの使用例

  1. クリックイベントの例
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>クリックイベントの例</title>
</head>
<body>
    <button id="clickButton">クリックして下さい</button>

    <script>
        const button = document.getElementById('clickButton');
        button.addEventListener('click', function(e) {
            console.log('クリックされました');
            console.log('イベントオブジェクト:', e);
            console.log('クリックされた要素:', e.target);
        });
    </script>
</body>
</html>

  1. キーボードイベントの例
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>キーボードイベントの例</title>
</head>
<body>
    <input type="text" id="inputField" placeholder="キーを押して下さい">

    <script>
        const inputField = document.getElementById('inputField');
        inputField.addEventListener('keydown', function(e) {
            console.log('キーが押されました');
            console.log('押されたキー:', e.key);
        });
    </script>
</body>
</html>

主なプロパティ

イベントオブジェクトには多くのプロパティがありますが、主なものをいくつか紹介します。

  • type: イベントの種類を表します(例: "click", "keydown")。
  • target: イベントが発生した要素を指します。
  • currentTarget: 現在イベントを処理している要素を指します。
  • preventDefault(): イベントのデフォルトの動作をキャンセルします。
  • stopPropagation(): イベントの伝播を停止します。

例:preventDefaultstopPropagation

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>イベントの制御</title>
</head>
<body>
    <a href="https://example.com" id="link">リンク</a>

    <script>
        const link = document.getElementById('link');
        link.addEventListener('click', function(e) {
            e.preventDefault(); // リンクのデフォルトの動作(ページ遷移)をキャンセル
            console.log('リンクがクリックされましたが、ページ遷移はキャンセルされました');
        });
    </script>
</body>
</html>

以上のように、e は、イベントの発生に関連する情報を提供し、イベントの制御を可能にする非常に重要な要素です。

イベントの種類と発生タイミング。

よく使われるJavaScriptのイベント名と発生するタイミングをまとめました。

イベント名発生するタイミング
click要素がクリックされたとき
dblclick要素がダブルクリックされたとき
mouseover要素の上にマウスポインタが乗ったとき
mouseout要素の上からマウスポインタが外れたとき
mousemoveマウスポインタが要素上で動いたとき
mousedownマウスボタンが押されたとき
mouseupマウスボタンが離されたとき
keydownキーボードのキーが押されたとき
keyupキーボードのキーが離されたとき
keypressキーボードのキーが押されたとき(入力可能なキーのみ)
focus要素がフォーカスを受け取ったとき
blur要素がフォーカスを失ったとき
changeフォームの値が変更されたとき
submitフォームが送信されたとき
resetフォームがリセットされたとき
resizeウィンドウや要素のサイズが変更されたとき
scroll要素がスクロールされたとき
loadページやリソースが読み込まれたとき
unloadページが閉じられるとき
abortリソースの読み込みが中断されたとき
errorエラーが発生したとき
contextmenuコンテキストメニュー(右クリックメニュー)が開かれたとき
inputフォーム要素の値が入力されたとき
touchstartタッチスクリーンでタッチが始まったとき
touchendタッチスクリーンでタッチが終わったとき
touchmoveタッチスクリーンでタッチが動いたとき
touchcancelタッチスクリーンでタッチがキャンセルされたとき

他にも多くのイベントが存在します。

タイマー処理

JavaScriptのタイマー処理には、主にsetTimeoutsetIntervalという2つの関数が使われます。これらの関数は、指定した時間後に関数を実行するために使用されます。

setTimeout

setTimeoutは、一度だけ指定した遅延時間後に関数を実行します。

// 5秒後にメッセージを表示する
setTimeout(() => {
    console.log('5秒が経過しました');
}, 5000);


setInterval

setIntervalは、指定した間隔で繰り返し関数を実行します。

// 1秒ごとにメッセージを表示する
setInterval(() => {
    console.log('1秒経過');
}, 1000);

タイマーを止める

タイマーを止めるためには、setTimeoutsetIntervalの戻り値を使って、clearTimeoutclearIntervalを呼び出します。

// setTimeoutの例
const timeoutId = setTimeout(() => {
    console.log('5秒が経過しました');
}, 5000);

// タイマーを止める
clearTimeout(timeoutId);

// setIntervalの例
const intervalId = setInterval(() => {
    console.log('1秒経過');
}, 1000);

// タイマーを止める
clearInterval(intervalId);

実際の使用例

例えば、10秒間カウントダウンするタイマーを作成する場合、次のようにします。(sample)

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>カウントダウンタイマー</title>
</head>
<body>
    <div id="timer">10</div>
    <script>
        let timeLeft = 10;
        const timerElement = document.querySelector('#timer');

        const countdown = setInterval(() => {
            timeLeft--;
            timerElement.textContent = timeLeft;

            if (timeLeft <= 0) {
                clearInterval(countdown);
                alert('カウントダウン終了');
            }
        }, 1000);
    </script>
</body>
</html>

上記のコードでは、setIntervalを使って1秒ごとにtimeLeftを減少させ、その値をHTML要素に表示します。timeLeftが0になったらclearIntervalを呼び出してタイマーを止め、アラートを表示します。

タイマー処理を使うと、さまざまなインタラクティブな機能を実装することができるので、ぜひ試してみてください。

よくあるエラーメッセージ3選。

JavaScriptでディベロッパーツールのコンソールに出るエラーメッセージの種類は、一般的に以下のように分類されます。これらのエラーメッセージは、開発者がコードの問題を特定して修正するのに役立ちます。

  1. シンタックスエラー(SyntaxError)
  • 説明: コードに構文上の誤りがあると発生します。
  • : SyntaxError: Unexpected token '}'
  1. 参照エラー(ReferenceError)
  • 説明: 存在しない変数を参照しようとすると発生します。
  • : ReferenceError: x is not defined
  1. タイプエラー(TypeError)
  • 説明: 変数や値の型が期待されるものと異なる場合に発生します。
  • : TypeError: x is not a function

HTMLに文字列をインサートする方法。

JavaScriptでHTMLに文字列をインサートする方法を紹介します。

1. innerHTML プロパティを使用する方法

innerHTMLプロパティを使用すると、指定したHTML要素の中身を文字列として挿入できます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Insert String Example</title>
</head>
<body>
    <div id="content"></div>

    <script>
        const content = document.querySelector('#content');
        const message = 'Hello, World!';
        content.innerHTML = message;
    </script>
</body>
</html>

2. textContent プロパティを使用する方法

textContentプロパティを使用すると、指定したHTML要素の中身をテキストとして挿入できます。HTMLタグを無視し、文字列をそのまま挿入します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Insert String Example</title>
</head>
<body>
    <div id="content"></div>

    <script>
        const content = document.querySelector('#content');
        const message = 'Hello, World!';
        content.textContent = message;
    </script>
</body>
</html>

3. insertAdjacentHTML メソッドを使用する方法

insertAdjacentHTMLメソッドを使用すると、指定した位置にHTMLを挿入できます。位置はbeforebegin, afterbegin, beforeend, afterendの4つの位置を指定できます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>Insert String Example</title>
  </head>
  <body>

    <div id="content">
      <p>赤福</p>
      <p>ぴよりん</p>
      <p>うなぎパイ</p>
    </div>

    <script>
      const content = document.querySelector("#content");
      const message1 = "<p>お土産リスト</p>";
      content.insertAdjacentHTML("beforebegin", message1);
      const message2 = "<p>へんばもち</p>";
      content.insertAdjacentHTML("afterbegin", message2);
      const message3 = "<p>東京バナナ</p>";
      content.insertAdjacentHTML("beforeend", message3);
      const message4 = "<p>以上</p>";
      content.insertAdjacentHTML("afterend", message4);
    </script>
  </body>
</html>

以下の図と照らし合わせて理解して下さい。

insertAdjacentHTMLメソッドの4つの位置

4. appendChild メソッドを使用する方法

appendChildメソッドを使用して、テキストノードやHTML要素を挿入することもできます。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>appendChild メソッドの例</title>
</head>

<body>
    <div id="container">
        <!-- 新しい要素がここに追加されます -->
    </div>

    <script>
        // 親要素を取得
        const container = document.getElementById('container');

        // 新しい要素を作成
        const newParagraph = document.createElement('p');
        newParagraph.textContent = 'これは新しい段落です。';

        // 親要素の最後の子要素として新しい要素を追加
        container.appendChild(newParagraph);
    </script>
</body>

</html>

JavaScriptの配列。

JavaScriptの配列は、複数の値を一つの変数にまとめて格納するためのデータ構造です。

配列の作成方法

  1. リテラル表記
const fruits = ["Apple", "Banana", "Cherry"];

  1. Arrayコンストラクタを使用
const fruits = new Array("Apple", "Banana", "Cherry");

配列の要素には、異なる型の値(数値、文字列、オブジェクト、他の配列など)を混在させることができる点が一般的な静的型付け言語(JavaやCなど)とは違います。


配列のアクセスと操作

  1. 要素へのアクセス

配列の要素は、インデックス(0から始まる)を使ってアクセスします。

console.log(fruits[0]); // Apple
console.log(fruits[1]); // Banana
console.log(fruits[2]); // Cherry

  1. 要素の変更
fruits[1] = "Blueberry";
console.log(fruits[1]); // Blueberry

  1. 配列の長さ

配列の長さは length プロパティで取得できます。

console.log(fruits.length); // 3


配列のメソッド

JavaScriptには配列を操作するための多くのメソッドがあります。以下に主なメソッドを紹介します。

  1. 追加と削除
  • push(): 配列の末尾に要素を追加します。
  • pop(): 配列の末尾から要素を削除します。
  • unshift(): 配列の先頭に要素を追加します。
  • shift(): 配列の先頭から要素を削除します。
fruits.push("Dragonfruit"); // 末尾に追加
console.log(fruits); // ["Apple", "Blueberry", "Cherry", "Dragonfruit"]

fruits.pop(); // 末尾から削除
console.log(fruits); // ["Apple", "Blueberry", "Cherry"]

fruits.unshift("Strawberry"); // 先頭に追加
console.log(fruits); // ["Strawberry", "Apple", "Blueberry", "Cherry"]

fruits.shift(); // 先頭から削除
console.log(fruits); // ["Apple", "Blueberry", "Cherry"]

  1. 要素の検索とフィルタリング
  • indexOf(): 特定の要素の最初のインデックスを返します。存在しない場合は -1 を返します。
  • includes(): 配列に特定の要素が含まれているかどうかをチェックします。
  • find(): 条件に一致する最初の要素を返します。
  • filter(): 条件に一致する全ての要素を配列として返します。
console.log(fruits.indexOf("Banana")); // -1
console.log(fruits.includes("Apple")); // true

const result = fruits.find(fruit => fruit.startsWith("B"));
console.log(result); // Blueberry

const filtered = fruits.filter(fruit => fruit.length > 5);
console.log(filtered); // ["Blueberry", "Cherry"]


  1. 変換と集計
  • map(): 各要素に対して関数を適用し、新しい配列を返します。
  • reduce(): 配列の全要素に対して関数を適用し、一つの値に集約します。
const uppercased = fruits.map(fruit => fruit.toUpperCase());
console.log(uppercased); // ["APPLE", "BLUEBERRY", "CHERRY"]

const totalLength = fruits.reduce((sum, fruit) => sum + fruit.length, 0);
console.log(totalLength); // 19

  1. 並び替え
  • sort(): 配列をソートします。デフォルトでは文字列としてソートします。
  • reverse(): 配列の順序を逆にします。
fruits.sort();
console.log(fruits); // ["Apple", "Blueberry", "Cherry"]

fruits.reverse();
console.log(fruits); // ["Cherry", "Blueberry", "Apple"]

  1. 結合とスライス
  • concat(): 配列を結合します。
  • slice(): 配列の一部を抜き出して新しい配列を作成します。
  • splice(): 配列の要素を追加・削除・置換します。
const moreFruits = ["Dragonfruit", "Elderberry"];
const allFruits = fruits.concat(moreFruits);
console.log(allFruits); // ["Cherry", "Blueberry", "Apple", "Dragonfruit", "Elderberry"]

const someFruits = allFruits.slice(1, 3);
console.log(someFruits); // ["Blueberry", "Apple"]

allFruits.splice(2, 1, "Fig");
console.log(allFruits); // ["Cherry", "Blueberry", "Fig", "Dragonfruit", "Elderberry"]

多次元配列

JavaScriptでは配列の要素として他の配列を持つことができます。これにより多次元配列を作成できます。

const matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

console.log(matrix[1][2]); // 6

配列とループ

配列の各要素に対してループ処理を行うには、for ループや forEach メソッドを使用します。

// forループ
for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

// forEachメソッド
fruits.forEach(fruit => {
    console.log(fruit);
});

まとめ

JavaScriptの配列は非常に強力で柔軟なデータ構造です。配列を利用することで、データの格納、操作、検索、変換が効率的に行えます。配列のメソッドを使いこなすことで、複雑なデータ処理も簡単に実現できます。

画像の遅延読み込みのサンプル

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>スクロールに合わせて画像を表示</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 0;
        }

        section {
            padding: 50px;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }

        img {
            max-width: 100%;
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }

        img.visible {
            opacity: 1;
        }

        nav {
            position: fixed;
            top: 0;
            width: 100%;
            background: #333;
            color: #fff;
            padding: 10px;
            text-align: center;
        }

        nav a {
            color: #fff;
            margin: 0 15px;
            text-decoration: none;
        }
    </style>
</head>

<body>
    <nav>
        <a href="#section1">セクション1</a>
        <a href="#section2">セクション2</a>
        <a href="#section3">セクション3</a>
        <a href="#section4">セクション4</a>
    </nav>

    <section id="section1" style="background-color: #f4f4f4;">
        <h2>セクション1</h2>
        <img src="https://picsum.photos/id/1011/800/600" alt="ランダム画像1">
    </section>

    <section id="section2" style="background-color: #ccc;">
        <h2>セクション2</h2>
        <img src="https://picsum.photos/id/1012/800/600" alt="ランダム画像2">
    </section>

    <section id="section3" style="background-color: #a4a4a4;">
        <h2>セクション3</h2>
        <img src="https://picsum.photos/id/1013/800/600" alt="ランダム画像3">
    </section>

    <section id="section4" style="background-color: #f4f4f4;">
        <h2>セクション4</h2>
        <img src="https://picsum.photos/id/1014/800/600" alt="ランダム画像4">
    </section>

    <script>
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();

                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });

        // 画像の遅延表示
        function lazyLoad() {
            const images = document.querySelectorAll('img');
            images.forEach(image => {
                const rect = image.getBoundingClientRect();
                if (rect.top < window.innerHeight && rect.bottom >= 0 && !image.classList.contains('visible')) {
                    image.classList.add('visible');
                }
            });
        }

        window.addEventListener('scroll', lazyLoad);
        window.addEventListener('load', lazyLoad); // 初回読み込み時にもチェック
    </script>
</body>

</html>

画像ギャラリーのサンプル

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>画像ギャラリー</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .gallery {
            display: flex;
            flex-wrap: wrap;
        }
        .gallery img {
            width: 150px;
            height: 150px;
            object-fit: cover;
            margin: 5px;
            cursor: pointer;
            transition: transform 0.2s;
        }
        .gallery img:hover {
            transform: scale(1.1);
        }
        #selectedImage {
            width: 100%;
            max-width: 500px;
            margin: 20px auto;
            display: block;
        }
    </style>
</head>
<body>
    <h1>画像ギャラリー</h1>
    <div class="gallery" id="gallery"></div>
    <img id="selectedImage" src="" alt="選択された画像">

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // 画像のURLを格納する配列
            const images = [
                'https://picsum.photos/id/237/200/200',
                'https://picsum.photos/id/238/200/200',
                'https://picsum.photos/id/239/200/200',
                'https://picsum.photos/id/240/200/200',
                'https://picsum.photos/id/241/200/200'
            ];

            const gallery = document.getElementById('gallery');
            const selectedImage = document.getElementById('selectedImage');

            // ギャラリーを生成する関数
            function renderGallery() {
                gallery.innerHTML = ''; // ギャラリーをクリア
                images.forEach((src) => {
                    const img = document.createElement('img');
                    img.src = src;
                    img.addEventListener('click', () => {
                        selectedImage.src = src;
                    });
                    gallery.appendChild(img);
                });
            }

            // 初期のギャラリーをレンダリング
            renderGallery();
        });
    </script>
</body>
</html>

数値のカウントアップのサンプル

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>カウントアップの例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 0;
        }

        section {
            padding: 50px;
            height: 100vh;
        }

        .counter {
            font-size: 48px;
            font-weight: bold;
            text-align: center;
            margin-top: 50px;
        }

        nav {
            position: fixed;
            top: 0;
            width: 100%;
            background: #333;
            color: #fff;
            padding: 10px;
            text-align: center;
        }

        nav a {
            color: #fff;
            margin: 0 15px;
            text-decoration: none;
        }
    </style>
</head>

<body>
    <nav>
        <a href="#section1">セクション1</a>
        <a href="#section2">セクション2</a>
        <a href="#section3">セクション3</a>
    </nav>

    <section id="section1" style="background-color: #f4f4f4;">
        <h2>セクション1</h2>
        <p>ここにセクション1のコンテンツが入ります。</p>
    </section>

    <section id="section2" style="background-color: #ccc;">
        <h2>セクション2</h2>
        <p>ここにセクション2のコンテンツが入ります。</p>
        <div class="counter" data-target="1000">0</div>
    </section>

    <section id="section3" style="background-color: #a4a4a4;">
        <h2>セクション3</h2>
        <p>ここにセクション3のコンテンツが入ります。</p>
    </section>

    <script>
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();

                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });

        // カウントアップ関数
        function countUp(element) {
            const target = +element.getAttribute('data-target');
            const count = +element.innerText;
            const increment = target / 200; // カウントアップの速度を調整

            if (count < target) {
                element.innerText = Math.ceil(count + increment);
                setTimeout(() => countUp(element), 100);
            } else {
                element.innerText = target;
            }
        }

        // 要素が表示されたときにカウントアップを開始
        function checkScroll() {
            const counters = document.querySelectorAll('.counter');
            counters.forEach(counter => {
                const rect = counter.getBoundingClientRect();
                if (rect.top < window.innerHeight && rect.bottom >= 0) {
                    countUp(counter);
                }
            });
        }

        window.addEventListener('scroll', checkScroll);
        window.addEventListener('load', checkScroll); // 初回読み込み時にもチェック
    </script>
</body>

</html>

文字のタイプライター効果のサンプル

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>タイプライター効果の例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 0;
        }

        section {
            padding: 50px;
            height: 100vh;
        }

        .typewriter {
            font-size: 24px;
            font-weight: bold;
            border-right: 0.15em solid orange;
            white-space: nowrap;
            overflow: hidden;
        }

        nav {
            position: fixed;
            top: 0;
            width: 100%;
            background: #333;
            color: #fff;
            padding: 10px;
            text-align: center;
        }

        nav a {
            color: #fff;
            margin: 0 15px;
            text-decoration: none;
        }
    </style>
</head>

<body>
    <nav>
        <a href="#section1">セクション1</a>
        <a href="#section2">セクション2</a>
        <a href="#section3">セクション3</a>
    </nav>

    <section id="section1" style="background-color: #f4f4f4;">
        <h2>セクション1</h2>
        <p>ここにセクション1のコンテンツが入ります。</p>
    </section>

    <section id="section2" style="background-color: #ccc;">
        <h2>セクション2</h2>
        <p class="typewriter" data-text="ここにタイプライター効果で表示されるテキストが入ります。"></p>
    </section>

    <section id="section3" style="background-color: #a4a4a4;">
        <h2>セクション3</h2>
        <p>ここにセクション3のコンテンツが入ります。</p>
    </section>

    <script>
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();

                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });

        // タイプライター効果関数
        function typeWriter(element, text, i) {
            if (i < text.length) {
                element.innerHTML += text.charAt(i);
                i++;
                setTimeout(() => typeWriter(element, text, i), 100);
            }
        }

        // 要素が表示されたときにタイプライター効果を開始
        function checkScroll() {
            const typewriters = document.querySelectorAll('.typewriter');
            typewriters.forEach(typewriter => {
                const rect = typewriter.getBoundingClientRect();
                if (rect.top < window.innerHeight && rect.bottom >= 0 && typewriter.innerHTML === "") {
                    const text = typewriter.getAttribute('data-text');
                    typeWriter(typewriter, text, 0);
                }
            });
        }

        window.addEventListener('scroll', checkScroll);
        window.addEventListener('load', checkScroll); // 初回読み込み時にもチェック
    </script>
</body>

</html>