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

2024年7月10日 2024年7月28日山崎講師

山崎講師

JavaScriptのライブラリを使うということについて

JavaScriptのライブラリを使うことは、初学者にとっても非常に有用です。ライブラリとは、特定の目的を達成するために便利な機能やツールを集めたコードのセットです。これにより、ゼロからすべてをコーディングする必要がなくなり、時間を節約しつつ、高品質なコードを書くことができます。

なぜライブラリを使うのか？

時間の節約: ライブラリを使うことで、一般的な機能や操作を簡単に実装できます。例えば、アニメーションの作成やDOM操作（HTML要素の操作）など、複雑なコードを書く必要がありません。
コードの簡潔化: ライブラリは、頻繁に使われる機能をシンプルなAPI（アプリケーションプログラミングインターフェース）として提供します。これにより、コードが短く読みやすくなります。
信頼性: 多くのライブラリはコミュニティや企業によって開発・メンテナンスされており、バグが少なく、安心して使うことができます。

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

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

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

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

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

クリックイベントの例

<!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>

キーボードイベントの例

<!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(): イベントの伝播を停止します。

例：`preventDefault`と`stopPropagation`

<!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のタイマー処理には、主にsetTimeoutとsetIntervalという2つの関数が使われます。これらの関数は、指定した時間後に関数を実行するために使用されます。

`setTimeout`

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

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

`setInterval`

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

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

タイマーを止める

タイマーを止めるためには、setTimeoutやsetIntervalの戻り値を使って、clearTimeoutやclearIntervalを呼び出します。

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

シンタックスエラー（SyntaxError）

説明: コードに構文上の誤りがあると発生します。
例: SyntaxError: Unexpected token '}'

参照エラー（ReferenceError）

説明: 存在しない変数を参照しようとすると発生します。
例: ReferenceError: x is not defined

タイプエラー（TypeError）

説明: 変数や値の型が期待されるものと異なる場合に発生します。
例: TypeError: x is not a function

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

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

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

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

<!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 = '<p>Hello, World!</p>';
        content.textContent = message;
    </script>
</body>
</html>

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

innerHTMLプロパティを使用すると、指定したHTML要素の中身を文字列として挿入できます。先のtextContentプロパティとの違いは、HTMLのタグも指定できる点です。 (sample)

<!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 = '<p>Hello, World!</p>';
        content.innerHTML = message;
    </script>
</body>
</html>

3. `appendChild`() メソッドを使用する方法

appendChild()メソッドを使用して、テキストノードやHTML要素を挿入することができます。要素は、親要素の最後に追加されます。 (sample)

<!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>

4. `insertAdjacentHTML`() メソッドを使用する方法

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

<!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>

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

HP制作のためのJavaScript入門②　～ホームページに多彩な機能を追加する～ - — `insertAdjacentHTML`メソッドの4つの位置

JavaScriptの配列。

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

配列の作成方法

リテラル表記

const fruits = ["Apple", "Banana", "Cherry"];

Arrayコンストラクタを使用

const fruits = new Array("Apple", "Banana", "Cherry");

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

配列のアクセスと操作

要素へのアクセス

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

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

要素の変更

fruits[1] = "Blueberry";
console.log(fruits[1]); // Blueberry

配列の長さ

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

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

配列のメソッド

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

追加と削除

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"]

要素の検索とフィルタリング

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"]

変換と集計

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

並び替え

sort(): 配列をソートします。デフォルトでは文字列としてソートします。
reverse(): 配列の順序を逆にします。

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

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

結合とスライス

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

Google ChromeでJavaScriptをデバッグ

Google ChromeでJavaScriptをデバッグする方法を説明します。

ステップ 1: DevToolsを開く

Chromeを開きます。
デバッグしたいウェブページにアクセスします。
右クリックしてコンテキストメニューを開き、「検証」を選択します。または、F12を押してDevToolsを開きます。

ステップ 2: コンソールタブの使用

DevToolsの「Console」タブをクリックします。
ここで、JavaScriptのコードを直接入力して実行したり、エラーメッセージを確認したりできます。

ステップ 3: ソースタブの使用

「Sources」タブをクリックします。
左側のファイルツリーからデバッグしたいJavaScriptファイルを探します。
ファイルをクリックすると、その内容が中央のペインに表示されます。

ステップ 4: ブレークポイントの設定

デバッグしたい行番号をクリックすると、ブレークポイントが設定されます。ブレークポイントが設定された行には青いマーカーが表示されます。
ページを再読み込み（F5）すると、設定したブレークポイントで実行が一時停止します。

ステップ 5: デバッガーのコントロール

一時停止した状態で、上部のコントロールパネルを使用してコードをステップ実行します。

Resume script execution (F8)：スクリプトの実行を再開します。
Step over next function call (F10)：次の関数呼び出しをステップオーバーします。
Step into next function call (F11)：次の関数呼び出しにステップインします。
Step out of current function (Shift+F11)：現在の関数からステップアウトします。

ステップ 6: ウォッチ式とコールスタック

「Watch」セクションを使用して、変数や式の値を監視できます。Add expressionボタンをクリックして監視したい変数や式を入力します。
「Call Stack」セクションには、現在の実行中の関数のスタックトレースが表示されます。

ステップ 7: コンソールからのデバッガー

debugger; ステートメントをコードに追加すると、その行で実行が一時停止します。
コンソールから console.log() を使用して変数の値を出力し、実行の流れを追跡することもできます。

ステップ 8: ネットワークのデバッグ

「Network」タブでネットワークリクエストを監視し、JavaScriptがどのようにサーバーと通信しているかを確認できます。

例

以下は、実際のコードでの使用例です。

以下の例では、debugger;ステートメントを使用して、ボタンがクリックされたときに実行が停止するようにしています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Debug Example</title>
</head>
<body>
    <h1>JavaScriptデバッグの例</h1>
    <button id="testButton">クリックしてテスト</button>
    <script>
        document.getElementById('testButton').addEventListener('click', function() {
            debugger; // ここで実行が停止します
            let message = "ボタンがクリックされました";
            console.log(message); // コンソールにメッセージを表示
            alert(message);
        });
    </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;
            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>