HP制作のためのJavaScript入門

~ホームページに多彩な機能を追加する~

第1章 プログラミングの準備

1.1 環境設定

JavaScriptの学習を始めるためには、適切な開発環境を整えることが重要です。この章では、開発環境の設定方法を説明します。

1.1.1 必要なツールの紹介
  1. ウェブブラウザ
    • JavaScriptはウェブブラウザ上で動作します。最新バージョンのGoogle ChromeやFirefox、Edgeなどを使用することを推奨します。
  2. テキストエディタ
    • プログラムを書くためのテキストエディタが必要です。以下のエディタは無料で利用でき、機能が充実しています。
      • Visual Studio Code (VS Code)
      • Sublime Text
      • Atom
1.1.2 エディタの使い方

Visual Studio Code (VS Code)のインストールと基本操作

  1. 公式サイトからインストーラをダウンロードしてインストールします。
  2. VS Codeを起動し、新しいファイルを作成します。
  3. ファイルを保存する際に拡張子を.htmlにします。例:index.html
  4. 以下のような基本的な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>
</head>
<body>
    <h1>JavaScript入門</h1>
    <script src="script.js"></script>
</body>
</html>
  1. index.htmlと同じフォルダにscript.jsという名前の新しいファイルを作成します。
  2. script.jsに以下のような簡単なJavaScriptコードを入力します。
console.log('Hello, JavaScript!');
  1. index.htmlファイルを右クリックし、「デフォルトのブラウザで開く」を選択します。ブラウザの開発者ツール(F12キー)を開き、「コンソール」タブを確認すると、Hello, JavaScript!というメッセージが表示されます。

1.2 必要なツールのインストール

1.2.1 Visual Studio Codeのインストール
  1. Visual Studio Codeの公式サイトにアクセスし、インストーラをダウンロードします。
  2. ダウンロードが完了したら、インストーラを実行し、画面の指示に従ってインストールを完了させます。
1.2.2 拡張機能のインストール

VS Codeには多くの便利な拡張機能があります。以下の拡張機能をインストールすることをお勧めします。

  1. Live Server
    • HTMLファイルをローカルサーバーでプレビューできます。リアルタイムで変更を確認できるため、開発がスムーズになります。
    • インストール方法:
      1. VS Codeの拡張機能タブを開きます(左側の四角いアイコン)。
      2. 検索バーに「Live Server」と入力し、インストールボタンをクリックします。
  2. ESLint
    • JavaScriptコードのエラーチェックを自動で行ってくれます。コーディングスタイルの統一やバグの早期発見に役立ちます。
    • インストール方法:
      1. 拡張機能タブを開きます。
      2. 検索バーに「ESLint」と入力し、インストールボタンをクリックします。

1.3 環境の確認

インストールが完了したら、以下の手順で環境が正しく設定されていることを確認します。

  1. VS Codeでindex.htmlファイルを開き、Live Serverを使用してファイルをプレビューします。
  2. ブラウザが開き、index.htmlの内容が表示されます。
  3. 開発者ツール(F12キー)を開き、「コンソール」タブを確認します。
  4. Hello, JavaScript!というメッセージが表示されていれば、環境設定は完了です。

第2章 HTML/CSSについて

2.1 HTMLの基本構造

HTML(HyperText Markup Language)は、ウェブページを作成するための基本的な言語です。HTMLはタグと呼ばれる特別なキーワードを使って、ウェブページの構造を定義します。ここでは、基本的なHTMLの構造について学びます。

2.1.1 HTML文書の基本構造

以下は、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>
</head>
<body>
    <h1>JavaScript入門</h1>
    <p>これはサンプルのHTMLページです。</p>
</body>
</html>
  • <!DOCTYPE html>: HTML5文書であることを宣言します。
  • <html lang="ja">: 文書の言語を日本語に設定します。
  • <head>: メタデータ(文字エンコーディング、タイトルなど)を含む部分です。
  • <meta charset="UTF-8">: 文書の文字エンコーディングを指定します。
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: ビューポートの設定を行い、レスポンシブデザインをサポートします。
  • <title>: ウェブページのタイトルを設定します。
  • <body>: 実際のコンテンツを含む部分です。
  • <h1>: 見出し1を設定します。
  • <p>: 段落を表します。

2.2 CSSの基本的なスタイル付け

CSS(Cascading Style Sheets)は、HTML要素のスタイルを定義するための言語です。ここでは、基本的なCSSの使い方について学びます。

2.2.1 CSSの書き方

CSSは、HTMLファイル内に直接記述する方法、<style>タグ内に記述する方法、外部スタイルシートとして記述する方法の3種類があります。ここでは、外部スタイルシートを使う方法を紹介します。

  1. index.htmlファイルと同じフォルダにstyle.cssファイルを作成します。
  2. index.htmlファイルの<head>タグ内に、以下のようにリンクを追加します。
<link rel="stylesheet" href="style.css">

3. style.cssファイルに以下のスタイルを追加します。

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
    background-color: #f4f4f4;
}

h1 {
    color: #333;
}

p {
    color: #666;
}
  • body: ページ全体のフォント、行間、余白、背景色を設定します。
  • h1: 見出し1の色を設定します。
  • p: 段落の色を設定します。

2.3 JavaScriptとの連携

HTMLとCSSを使って基本的なウェブページを作成したら、JavaScriptを使ってページに動的な機能を追加する方法を学びます。

2.3.1 JavaScriptの基本的な埋め込み方法

JavaScriptは、<script>タグを使ってHTMLファイルに埋め込むことができます。ここでは、外部JavaScriptファイルを使う方法を紹介します。

  1. 既に作成したscript.jsファイルに、以下のようなコードを追加します。
document.addEventListener('DOMContentLoaded', function() {
    const heading = document.querySelector('h1');
    heading.textContent = 'JavaScriptで変更された見出し';
});

2. index.htmlファイルの<body>タグ内に、以下のようにスクリプトをリンクします。

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

これにより、ページが読み込まれた後にJavaScriptが実行され、<h1>タグのテキストが「JavaScriptで変更された見出し」に変更されます。

第3章 JavaScriptの基礎

3.1 JavaScriptとは

JavaScriptは、ウェブページに動的な動作を追加するためのプログラミング言語です。クライアントサイドで実行されるため、ユーザーのブラウザ上で動作します。この章では、JavaScriptの基本的な構文と概念を学びます。

3.2 変数

変数は、データを保存するための名前付きの容器です。JavaScriptでは、varletconstの3種類のキーワードを使って変数を宣言します。

3.2.1 変数の宣言と代入
let message = 'こんにちは、JavaScript!';
console.log(message);
  • let:ブロックスコープの変数を宣言します。
  • const:定数を宣言します。一度値を設定すると変更できません。
  • var:関数スコープの変数を宣言します。古い書き方ですが、まだ使われることがあります。
const pi = 3.14;
var name = '山崎';
console.log(pi);
console.log(name);

3.3 データ型

JavaScriptにはいくつかのデータ型があります。主なデータ型は以下の通りです。

  • 数値(Number)
  • 文字列(String)
  • 論理値(Boolean)
  • 配列(Array)
  • オブジェクト(Object)
  • nullundefined
3.3.1 数値と文字列
let age = 30; // 数値
let greeting = 'こんにちは'; // 文字列

console.log(age);
console.log(greeting);
3.3.2 論理値
let isStudent = true;
let isActive = false;

console.log(isStudent);
console.log

3.4 関数

関数は、一連のステートメントをグループ化して、特定のタスクを実行するためのものです。関数を使うことで、コードの再利用性を高めることができます。

3.4.1 関数の定義と呼び出し
function greet(name) {
    return 'こんにちは、' + name + '!';
}

let message = greet('山崎');
console.log(message);
  • function greet(name) {...}greetという名前の関数を定義します。この関数は引数としてnameを受け取り、こんにちは、name!という文字列を返します。

3.5 条件分岐

条件分岐を使うことで、特定の条件に応じた処理を実行することができます。if文やswitch文が一般的です。

3.5.1 if文
let age = 20;

if (age >= 18) {
    console.log('成人です。');
} else {
    console.log('未成年です。');
}
  • if (条件) {...} else {...}:条件が真であれば、ifブロック内のコードが実行されます。そうでなければ、elseブロック内のコードが実行されます。
3.5.2 switch文
let day = 3;
let dayName;

switch (day) {
    case 1:
        dayName = '月曜日';
        break;
    case 2:
        dayName = '火曜日';
        break;
    case 3:
        dayName = '水曜日';
        break;
    default:
        dayName = '不明';
}

console.log(dayName);
  • switch (変数) {...}:変数の値に応じて異なるケースを実行します。

3.6 繰り返し

繰り返し処理を使うことで、同じ操作を複数回実行することができます。for文やwhile文が一般的です。

3.6.1 for文
for (let i = 0; i < 5; i++) {
    console.log('繰り返し回数: ' + i);
}
  • for (初期化; 条件; 更新) {...}:初期化ステートメントが1回実行され、条件が真である間、更新ステートメントが実行されるたびにループ内のコードが繰り返されます。
3.6.2 while文
let i = 0;

while (i < 5) {
    console.log('繰り返し回数: ' + i);
    i++;
}
  • while (条件) {...}:条件が真である間、ループ内のコードが繰り返されます。

3.7 配列

配列は、複数のデータを一つの変数に格納するためのデータ構造です。配列の各要素には、インデックスを使ってアクセスできます。

3.7.1 配列の作成とアクセス
let fruits = ['りんご', 'バナナ', 'オレンジ'];

console.log(fruits[0]); // りんご
console.log(fruits[1]); // バナナ
console.log(fruits[2]); // オレンジ
3.7.2 配列の操作
fruits.push('ぶどう'); // 配列に新しい要素を追加
console.log(fruits);

fruits.pop(); // 最後の要素を削除
console.log(fruits);

第4章 実践・JavaScript

4.1 確認用メッセージを使う

JavaScriptでは、ユーザーに確認を求めるメッセージを表示することができます。これにより、ユーザーが操作を継続するかどうかを確認できます。

4.1.1 alert() メソッド

alert() メソッドを使って、シンプルなメッセージを表示することができます。

alert('こんにちは、JavaScript!');

このコードを実行すると、ポップアップウィンドウが表示され、メッセージが表示されます。

4.1.2 confirm() メソッド

confirm() メソッドを使って、ユーザーに確認を求めることができます。このメソッドは、ユーザーが「OK」または「キャンセル」をクリックしたかどうかを判定します。

let result = confirm('本当にこの操作を行いますか?');

if (result) {
    console.log('操作が確認されました。');
} else {
    console.log('操作がキャンセルされました。');
}

4.2 文章をフェードアウト表示

JavaScriptとCSSを組み合わせることで、要素をフェードアウトさせることができます。ここでは、jQueryライブラリを使用して、簡単にフェードアウトを実現します。

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

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

4.3 郵便番号から住所を検索

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

4.3.1 郵便番号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>

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

4.4 演習

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

4.4.1 演習1: 確認メッセージ

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

4.4.2 演習2: フェードアウト

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

4.4.3 演習3: 郵便番号検索

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

第5章 今後に役立つ予備知識

5.1 JavaScriptライブラリの紹介

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

5.1.1 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>
5.1.2 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>

5.2 Web APIの活用

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

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

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

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

5.3.1 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'));
5.3.2 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>
5.3.3 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!';
}