HP制作のためのJavaScript入門　コラム

2024年10月12日 2024年10月26日

睦松田

サーバー上でも動作するJavaScript

他にもあるVisual Studio Codeの拡張機能

Path Intellisense
- ファイルのパス補完を支援してくれる拡張機能です。import文やrequire文などのパス入力時に補完候補を表示してくれるため、タイピングミスを防ぎ、効率的にコーディングできます。
- インストール方法：
  1. 拡張機能タブを開きます。
  2. 検索バーに「Path Intellisense」と入力し、インストールボタンをクリックします。
Debugger for Chrome
- VS Code上で直接デバッグを行うための拡張機能です。Chromeブラウザで実行されるJavaScriptコードをデバッグでき、ブレークポイントの設定や変数の監視が可能です。
- インストール方法：
  1. 拡張機能タブを開きます。
  2. 検索バーに「Debugger for Chrome」と入力し、インストールボタンをクリックします。

必要なツールの紹介

ウェブブラウザ
- JavaScriptはウェブブラウザ上で動作します。Google ChromeやEdgeなどが便利です。もうすでにお持ちかと思いますが、念のため最新バージョンを使うことをお勧めいたします。
テキストエディタ
- プログラムを書くための道具です。超高機能なメモ帳のようなものです。以下のエディタは無料で機能も充実しています。
  - Visual Studio Code (VS Code)

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

Visual Studio Code

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

拡張機能のインストール

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

Japanese Language Pack
- VS Codeを日本語で使うために、拡張機能「Japanese Language Pack」をインストールします。VSCodeのメニューやメッセージが日本語になり、使いやすくなります。
- インストール方法：
  1. VS Codeの拡張機能タブを開きます（左側の四角いアイコン）。
  2. 検索バーに「Japanese Language Pack」と入力し、インストールボタンをクリックします。
  3. 拡張機能をインストールした後、VS Codeを再起動します。
  4. VS Codeが再起動すると、日本語化のオプションが表示されるので、「日本語」を選択します。
Live Server
- HTMLファイルをローカルサーバーでプレビューできます。リアルタイムで変更を確認できるため、開発がスムーズになります。
- インストール方法：
  1. VS Codeの拡張機能タブを開きます（左側の四角いアイコン）。
  2. 検索バーに「Live Server」と入力し、インストールボタンをクリックします。
ESLint
- JavaScriptプログラムの間違いを自動でチェックしてくれます。バグの早期発見に役立ちます。
- インストール方法：
  1. 拡張機能タブを開きます。
  2. 検索バーに「ESLint」と入力し、インストールボタンをクリックします。
Prettier
- Code Formatter Prettierは、コードの整形を自動で行ってくれます。指定されたルールに基づいて、インデント（後述）や空白の配置を統一し、プログラムを読みやすく整形できます。
- インストール方法：
  1. 拡張機能タブを開きます。
  2. 検索バーに「Prettier - Code Formatter」と入力し、インストールボタンをクリックします。
Bracket Pair Colorizer
- 括弧のペアを色分けして表示してくれる拡張機能です。複雑なプログラムでも対応する括弧を簡単に見つけることができ、読みやすくなります。
- インストール方法：
  1. 拡張機能タブを開きます。
  2. 検索バーに「Bracket Pair Colorizer」と入力し、インストールボタンをクリックします。
Path Intellisense
- ファイルのパス補完を支援してくれる拡張機能です。import文やrequire文などのパス入力時に補完候補を表示してくれるため、タイピングミスを防ぎ、効率的にコーディングできます。
- インストール方法：
  1. 拡張機能タブを開きます。
  2. 検索バーに「Path Intellisense」と入力し、インストールボタンをクリックします。
Debugger for Chrome
- VS Code上で直接デバッグを行うための拡張機能です。Chromeブラウザで実行されるJavaScriptコードをデバッグでき、ブレークポイントの設定や変数の監視が可能です。
- インストール方法：
  1. 拡張機能タブを開きます。
  2. 検索バーに「Debugger for Chrome」と入力し、インストールボタンをクリックします。

エディタの使い方

Visual Studio Code の基本操作

まずはCドライブに、プログラムを入れるフォルダを作りましょう。新しいフォルダを作成し、jsworkという名前にしてください。
次に、ホームページの内容を書き込むHTMLファイルを作成します。VSCodeで[ファイル]→[フォルダを開く]を選択し、先ほど作ったC:\jsworkフォルダを開きます。画面右側のjsworkという文字の上で右クリックし、[新しいファイル]を選択します。ファイル名は、[index.html]としてください。
以下のような基本的な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>
    <script src="script.js"></script>
</body>
</html>

index.htmlと同じフォルダにscript.jsという名前の新しいファイルを作成します。（Ctrlキーを押しながら上記「script.js」をクリックすると簡単にファイルが作成できます）
script.jsに以下のような簡単なJavaScriptコードを入力します。

console.log('Hello, JavaScript!');

環境の確認

以下の手順で環境が正しく設定されていることを確認します。

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

JSでCSSデザインを変更する

JSは、CSSで定義したHTML画面部品のスタイルを変更することができます。

ユーザーの操作や特定の条件に応じて、リアルタイムにWebページのデザインを変更できるのです。

以下、基本的な方法を紹介します。

1. `style`プロパティを使う

JSで特定の画面部品のスタイルを変更する最も簡単な方法は、部品のstyleプロパティを使用することです。

＜書式＞

要素.style.CSSのプロパティ名＝値;

例: 要素の背景色を変更する

以下の例では、ボタンをクリックすると、changeColor関数が呼び出され、div要素の背景色が変更されます。(sample)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScriptでスタイルを指定する例</title>
  <style>
    .example {
      width: 200px;
      height: 200px;
      background-color: lightblue;
      margin: 20px;
    }
  </style>
</head>
<body>
  <h1>JavaScriptでスタイルを変更する</h1>
  <div class="example" id="myDiv">このボックスの色を変更します</div>
  <button onclick="changeColor()">色を変える</button>

  <script>
    function changeColor() {
      const div = document.getElementById('myDiv');
      div.style.backgroundColor = 'lightgreen';
    }
  </script>
</body>
</html>

CSSのプロパティ名はキャメルケースになる

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

CSSプロパティ名のようにハイフンを含む名前をJSで使用する場合、キャメルケース（camelCase）に変換する必要があります。キャメルケースとは、変数名などを付ける時のやり方の一種です。

キャメルケース（camelCase）のルール

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

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

例えば、font-size をキャメルケースにすると fontSize になります。
その他の例として、background-color は backgroundColor、margin-left は marginLeft となります。

CSSの復習

CSS（Cascading Style Sheets）は、HTML要素のスタイルを定義するための言語です。皆様は基本的なCSSについてはご存知であるという前提で、CSSの使い方について復習します。

CSSの書き方

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

index.htmlファイルと同じフォルダにstyle.cssファイルを作成します。

index.htmlファイルの<head>タグ内に、以下のようにリンクを追加します。（先に以下を記述してから、ファイル名をCtrlキーを押しながらクリックしてもファイルが作成できます）

<link rel="stylesheet" href="style.css">

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

それぞれのスタイルの詳細はコメントを見て下さい。 (sample)

body {
  font-family: Arial, sans-serif; /* フォントファミリーをArialとサンセリフに設定 */
  line-height: 1.6; /* 行の高さを1.6に設定 */
  margin: 0; /* ページ全体の余白をゼロに設定 */
  padding: 20px; /* ページ全体に20ピクセルの内側余白を設定 */
  background-color: #f4f4f4; /* 背景色を薄いグレーに設定 */
}

h1 {
  color: #333; /* 見出し1の文字色を濃いグレーに設定 */
}

p {
  color: #666; /* 段落の文字色を中間のグレーに設定 */
}

sanitize.cssについて
sanitize.cssは、Webサイトやアプリケーションのスタイルをブラウザ間で一貫させるためのCSSフレームワークです。最新のブラウザ標準に準拠したスタイルの標準化を提供しています。sanitize.cssを使うことで、セキュリティやアクセシビリティのベストプラクティスを取り入れることができるでしょう。

リンク先: sanitize.css (GitHub)

JavaScriptとの連携

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

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

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

外部JavaScriptファイルを複数のHTMLページで共有することで、同じスクリプトを再利用することができます。一度作成したスクリプトを複数のページで使用する場合、各ページに同じコードを記述する必要がなくなるのです。

既に作成したscript.jsファイルに、以下のようなコードを追加します。

document.addEventListener('DOMContentLoaded', function() {
  const heading = document.querySelector('h1');
  heading.textContent = 'JavaScriptで変更された見出し';
});

上書き保存（Ctrl + s）をするとページが読み込まれた後にJavaScriptが実行され、<h1>タグのテキストが「JavaScriptで変更された見出し」に変更されます。

2. `classList`プロパティを使う

CSSクラスを追加・削除することで、より柔軟にスタイルを変更する方法もあります。classListプロパティを使用します。

例: CSSクラスを追加・削除する

以下の例では、ボタンをクリックすると、toggleClass関数が呼び出され、div要素にactiveクラスが追加され、再度クリックすると削除されます。 (sample)

皆さんはトグルスイッチというものを見たことがありますか？

上記リンクを辿るとお分かりのようにトグルスイッチは、一つの操作を行うことで、2つの状態（オン/オフ）を切り替えることができるものです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScriptでクラスを切り替える例</title>
  <style>
    .example {
      width: 200px;
      height: 200px;
      background-color: lightblue;
      margin: 20px;
    }

    .active {
      background-color: lightsalmon;
      border: 2px solid orange;
    }
  </style>
</head>
<body>
  <h1>JavaScriptでクラスを切り替える</h1>
  <div class="example" id="myDiv">このボックスの色を変更します</div>
  <button onclick="toggleClass()">クラスを切り替える</button>

  <script>
    function toggleClass() {
      const div = document.getElementById('myDiv');
      div.classList.toggle('active');
    }
  </script>
</body>
</html>

3. `setAttribute`メソッドを使う

setAttributeメソッドを使って、スタイルをインラインで追加する方法もあります。

例: インラインスタイルを追加する

以下の例では、ボタンをクリックすると、addInlineStyle関数が呼び出され、div要素にインラインスタイルが追加されます。 (sample)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScriptでインラインスタイルを追加する例</title>
  <style>
    .example {
      width: 200px;
      height: 200px;
      background-color: lightblue;
      margin: 20px;
    }
  </style>
</head>
<body>
  <h1>JavaScriptでインラインスタイルを追加する</h1>
  <div class="example" id="myDiv">このボックスの色を変更します</div>
  <button onclick="addInlineStyle()">インラインスタイルを追加</button>

  <script>
    function addInlineStyle() {
      const div = document.getElementById('myDiv');
      div.setAttribute('style', 'background-color: lightcoral; border: 2px solid red;');
    }
  </script>
</body>
</html>

// アラートダイアログを表示
window.alert("Hello World");

// 新しいウィンドウを開く
window.open("https://www.saycon.co.jp/touchtypeJS/");

// ウィンドウの高さを取得
let height = window.innerHeight;
window.alert(height);

例題

次のコードの空欄を埋めて、ブラウザのアラートダイアログに「Hello World」というメッセージを表示させなさい。

window._______("__________");

答え

window.alert("Hello World");

documentオブジェクト

概要:
documentオブジェクトは、windowオブジェクトのプロパティの一つであり、現在のHTMLドキュメントの内容を保持しています。

このオブジェクトは、前述の通りDOM（Document Object Model）の一部であり、HTMLドキュメントを操作するためのインターフェースを提供します。DOMは、HTMLドキュメントの構造をツリー構造として表現し、その各要素にアクセスして操作するためのAPIを提供します。

特徴:

HTML要素の操作: HTML要素を取得、変更、追加、削除するためのメソッドを提供します。
イベントの処理: ユーザーの操作（クリック、キーボード入力など）に対するイベントハンドラを設定できます。

例:

// タイトルを変更
document.title = "new title";

// 特定のIDを持つ要素を取得
const element = document.querySelector("#example");

// 新しい段落を追加
const newParagraph = document.createElement("p");
newParagraph.textContent = "new paragraph";
document.body.appendChild(newParagraph);

調べてみましょう

講師と一緒に以下のコードを実行してブラウザのディベロッパーツールのコンソールを開いてみましょう。alert()などのメソッドやdocumentなどのプロパティが見えると思います。windowはオブジェクトだということの証拠です。

さらに、documentを展開するとその中にもメソッドやプロパティが見えると思います。オブジェクトが入れ子になっている訳ですね。

<!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>
	<script>
		console.log(window);
	</script>
</body>
</html>

見つけたプロパティやメソッド：

DOM（Document Object Model）要素を選択するためのメソッド

querySelectorとquerySelectorAllは、JavaScriptでDOM（Document Object Model）要素を選択するためのメソッドです。これらのメソッドは、CSSセレクタを使用して要素を選択します。

`querySelector`

querySelectorは、指定されたCSSセレクタに一致する最初の要素を返します。見つからない場合はnullを返します。(sample)

使い方の例

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>querySelectorの例</title>
</head>
<body>
    <div class="example">最初のdiv</div>
    <div class="example">2番目のdiv</div>

    <script>
        // 最初のdiv.exampleを選択
        const firstDiv = document.querySelector('.example');
        console.log(firstDiv.textContent); // "最初のdiv"が出力されます
    </script>
</body>
</html>

`querySelectorAll`

querySelectorAllは、指定されたCSSセレクタに一致するすべての要素を返します。(sample)

返されるのはNodeListオブジェクトで、これには複数の要素が含まれます。NodeListは配列のように扱うことができますが、実際には配列ではありません。

使い方の例

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>querySelectorAllの例</title>
</head>
<body>
    <div class="example">最初のdiv</div>
    <div class="example">2番目のdiv</div>
    <div class="example">3番目のdiv</div>

    <script>
        // 全てのdiv.exampleを選択
        const allDivs = document.querySelectorAll('.example');
        allDivs.forEach((div, index) => {
            console.log(`Div ${index + 1}: ${div.textContent}`);
        });
    </script>
</body>
</html>

<比較>

`querySelector`()	最初に一致する要素を一つだけ返す。見つからない場合は`null`を返す。
`querySelectorAll`()	一致するすべての要素をNodeListとして返す。NodeListは配列のようにループ処理が可能。

CSSの復習

CSS（Cascading Style Sheets）は、HTML要素のスタイルを定義するための言語です。皆様は基本的なCSSについてはご存知であるという前提で、CSSの使い方について復習します。

CSSの書き方

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

index.htmlファイルと同じフォルダにstyle.cssファイルを作成します。
index.htmlファイルの<head>タグ内に、以下のようにリンクを追加します。（先に以下を記述してから、ファイル名をCtrlキーを押しながらクリックしてもファイルが作成できます）

<link rel="stylesheet" href="style.css">

3. style.cssファイルに以下のスタイルを追加します。それぞれのスタイルの詳細はコメントを見て下さい。 (sample)

body {
    font-family: Arial, sans-serif; /* フォントファミリーをArialとサンセリフに設定 */
    line-height: 1.6; /* 行の高さを1.6に設定 */
    margin: 0; /* ページ全体の余白をゼロに設定 */
    padding: 20px; /* ページ全体に20ピクセルの内側余白を設定 */
    background-color: #f4f4f4; /* 背景色を薄いグレーに設定 */
}

h1 {
    color: #333; /* 見出し1の文字色を濃いグレーに設定 */
}

p {
    color: #666; /* 段落の文字色を中間のグレーに設定 */
}

JavaScriptとの連携

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

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

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

外部JavaScriptファイルを複数のHTMLページで共有することで、同じスクリプトを再利用することができます。一度作成したスクリプトを複数のページで使用する場合、各ページに同じコードを記述する必要がなくなるのです。

既に作成したscript.jsファイルに、以下のようなコードを追加します。

document.addEventListener('DOMContentLoaded', function() {
    const heading = document.querySelector('h1');
    heading.textContent = 'JavaScriptで変更された見出し';
});

上書き保存（Ctrl + s）をするとページが読み込まれた後にJavaScriptが実行され、<h1>タグのテキストが「JavaScriptで変更された見出し」に変更されます。

`本研修では、querySelector`や`querySelectorAll`を使います

インターネットで検索するとgetElementByIdとgetElementsByClassNameなどの記述を目にすることがあると思います。これらは関数と呼ばれるものです。しかし、querySelectorやquerySelectorAllの方がより柔軟で、多くの場合便利です。本テキストでは、これらを推奨しています。ただし、特定の要素をIDで取得する場合など、シンプルな操作ではgetElementByIdがパフォーマンスの面で優れていることがあります。

イベントハンドラ

イベントハンドラとは、ユーザーの操作やシステムの動作（イベント）が発生した際に実行される処理を制御する（ハンドラ）仕組みのことです。

HTML内で設定する場合、属性として記述され、特定のイベントに対して関数やコードを割り当てます。

例えば、onclick属性は、要素がクリックされたときに実行される関数を指定します。イベントハンドラは、ユーザーインターフェースを動的にし、インタラクティブな操作を実現するために不可欠です。

主なイベントには、クリック、キーボード入力、フォーム送信、ページ読み込みなどがあります。ユーザーのアクションに応じた反応をプログラムできます。

イベントハンドラ属性の中で、特に頻繁に使用される主要なものを以下に紹介します。

マウスイベント

onclick：要素がクリックされたときに実行されます。

<アウトプット例>

<ソースコード>

<button onclick="alert('ボタンがクリックされました')">クリック</button>

onmouseover：マウスが要素の上に乗ったときに実行されます。

<アウトプット例>

マウスオーバーで色が変わります

<ソースコード>

<div onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor=''">
    マウスオーバーで色が変わります
</div>

キーボードイベント

onkeydown：キーが押されたときに実行されます。

<input type="text" onkeydown="console.log('キーが押されました')">

onkeyup：キーが放されたときに実行されます。

<input type="text" onkeyup="console.log('キーが放されました')">

フォームイベント

onsubmit：フォームが送信されたときに実行されます。

<アウトプット例>

<ソースコード>

<form onsubmit="alert('フォームが送信されました'); return false;"> <input type="submit" value="送信"> </form>

onchange：入力フィールドの内容が変わったときに実行されます。

<アウトプット例>

<ソースコード>

<input type="text" onchange="console.log('入力が変更されました')">

ウィンドウイベント

onload：ページが読み込まれたときに実行されます。

<body onload="alert('ページが読み込まれました')">

onresize：ウィンドウのサイズが変更されたときに実行されます。

<body onresize="console.log('ウィンドウのサイズが変更されました')">

属性とは？

HTMLの属性（attribute）は、HTML要素に追加情報を提供するために使用されるものです。属性は、要素の開始タグ内に記述され、属性名と属性値のペアで構成されます。属性を使うことで、要素にさまざまな設定やプロパティを適用することができます。属性値はダブルクオーテーションで囲みます。ここではJavaScriptとなじみが深いid属性とclass属性を紹介します。

基本構文

<要素名 属性名="属性値">コンテンツ</要素名>

id属性

id属性は、要素に一意の識別子を指定します。

<div id="header">これはヘッダーです</div>

class属性

class属性は、要素にクラス名を指定します。複数の要素に同じクラスを適用できます。

<p class="text-primary">これは段落です</p>

JavaScriptの基礎

JavaScriptとは

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

変数

変数は、データを保存した場所にニックネームを付けたものです。JavaScriptでは、let、const、varの3種類のキーワードを使って変数を宣言します。

変数の宣言と代入

let message = 'こんにちは、JavaScript!';
console.log(message);

let：ブロックスコープの変数を宣言します。変数はその名の通り値を書き換えることができます。
const：定数を宣言します。定数はその名の通り一度値を設定すると変更できません。
var：関数スコープの変数を宣言します。古い書き方ですが、まだ使われることがあります。

const pi = 3.14;
let name = '松田';
console.log(pi);
console.log(name);

ローカル変数とグローバル変数

JavaScriptにはローカル変数とグローバル変数があります。これらは変数のスコープ（有効範囲）によって区別されます。

グローバル変数: 関数の外で宣言され、スクリプト全体で有効。複数のファイルで競合することもある。
ローカル変数: 関数の内で宣言され、その関数内でのみ有効。

例

以下は、グローバル変数とローカル変数の具体例です。

let globalVar = "I am a global variable"; // グローバル変数

function exampleFunction() {
    let localVar = "I am a local variable"; // ローカル変数

    console.log(globalVar); // グローバル変数にアクセス可能
    console.log(localVar);  // ローカル変数にアクセス可能
}

exampleFunction();

console.log(globalVar); // グローバル変数にアクセス可能
console.log(localVar); // ReferenceError: ローカル変数にアクセス不可能

＜実行結果＞

I am a global variable
I am a local variable
I am a global variable
(中略)
console.log(localVar); // ReferenceError: ローカル変数にアクセス不可能

varは使わない

JavaScriptのvarキーワードは、古い変数宣言の方法として広く使われていましたが、現在は推奨されていません。

varで宣言された変数は、関数スコープを持ち、ブロックスコープを無視します。これは、forループやifブロック内で宣言された変数が、ブロック外からもアクセスできることを意味します。

また、varは同じ名前の変数を再宣言できるため、予期しないバグの原因となることがあります。

このような理由から、最新のJavaScriptコードでは、ブロックスコープを持ち、再宣言を防ぐletや、定数宣言のためのconstの使用が推奨されています。varの使用は避け、より安全で予測可能なコードを書くためにletやconstを使うべきです。

データ型

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

数値（Number）
文字列（String）
論理値（Boolean）
配列（Array）
オブジェクト（Object）
nullとundefined

数値と文字列

let age = 30; // 数値
let greeting = 'こんにちは'; // 文字列

console.log(age);
console.log(greeting);

文字列はシングルクォーテーションで囲むことをまず覚える

JavaScriptでは、文字列リテラルをシングルクオート（' '）、ダブルクォート（" "）、またはバッククォート（）のいずれでも囲むことができます。それぞれに特徴があり、使い分けが推奨されます。

シングルクオート（' '）:

シンプルな文字列に使用されることが多い。
HTMLやJSONの属性値にシングルクオートが含まれることが少ないため、エスケープの必要性が減る。

const singleQuoteString = 'Hello, World!';

ダブルクォート（" "）:

シングルクオート同様にシンプルな文字列に使用される。
シングルクォートを含む文字列をエスケープなしで使いたいときに便利。

const doubleQuoteString = "Hello, 'World!'";

バッククォート（）:

テンプレートリテラルとして使用される。
文字列中に変数や式を埋め込むことができる。

 const doubleQuoteString = "Hello, 'World!'";
 console.log(doubleQuoteString);

複数行の文字列も容易に扱える。

  const multilineString = `
  これは複数行にわたる文字列です。
  バッククォートを使用することで、
  複数行を簡単に記述できます。
`;

console.log(multilineString);

論理値

let isStudent = true;
let isActive = false;

console.log(isStudent);
console.log

演算子

JavaScriptの演算子を以下の表にまとめました。

演算子	説明	例	結果
`+`	足し算、文字列の連結、数値に変換する単項プラス演算子	`5 + 3` `'Hello ' + 'World'` `+'123'`	`8` `'Hello World'` `123`
`-`	引き算、数値に変換する単項マイナス演算子	`5 - 3` `-'123'`	`2` `-123`
`*`	掛け算	`5 * 3`	`15`
`/`	割り算	`6 / 3`	`2`
`%`	剰余（余り）	`5 % 3`	`2`
`++`	インクリメント（値を1増やす）	`let a = 5; a++`	`a` は `6` になる
`--`	デクリメント（値を1減らす）	`let a = 5; a--`	`a` は `4` になる
`=`	代入	`let a = 5`	`a` は `5` になる
`+=`	加算代入	`let a = 5; a += 3`	`a` は `8` になる
`-=`	減算代入	`let a = 5; a -= 3`	`a` は `2` になる
`*=`	乗算代入	`let a = 5; a *= 3`	`a` は `15` になる
`/=`	除算代入	`let a = 6; a /= 3`	`a` は `2` になる
`==`	等価（型を比較しない）	`5 == '5'`	`true`
`===`	厳密等価（型も比較する）	`5 === '5'`	`false`
`!=`	不等価（型を比較しない）	`5 != '5'`	`false`
`!==`	厳密不等価（型も比較する）	`5 !== '5'`	`true`
`<`	より小さい	`5 < 3`	`false`
`<=`	以下	`5 <= 5`	`true`
`>`	より大きい	`5 > 3`	`true`
`>=`	以上	`5 >= 5`	`true`
`&&`	論理積（AND）	`true && false`	`false`
`\|\|`	論理和（OR）	`true \|\| false`	`true`
`!`	否定（NOT）	`!true`	`false`
`? :`	三項演算子（条件式）	`true ? 'Yes' : 'No'`	`'Yes'`

関数

関数は、一連の処理をまとめて部品化し、特定のタスクを実行するためのものです。関数を使うことで、コードの再利用性を高めることができます。

関数の基本構造

function 関数名(引数1, 引数2, ...) {
  // 関数が実行されたときの命令
  return 戻り値; // 任意。戻り値がない場合は省略可
}

関数の定義と呼び出しの例

名前を受け取り挨拶を返す関数

function greet(name) {
    return 'こんにちは、' + name + '!';
}

// 関数の呼び出し
let message = greet('松田');
console.log(message);

二つの数値を加算する関数

// 二つの数値を加算する関数
function add(a, b) {
  return a + b;
}

// 関数の呼び出し
let result = add(3, 5);
console.log(result); // 出力: 8

関数とメソッドの違い

JavaScriptの関数とメソッドはよく似ていますが、厳密には違います。

JavaScriptの関数とメソッドには共通点もありますが、使い方や位置付けにいくつかの重要な違いがあります。

この研修では特に呼び出し方の違いについて理解して下さい。なぜなら、オブジェクトのメソッドを呼び出すことは想定していますが、メソッドを作ることは想定していないからです。（対して関数は作ったり呼び出したりします。）

主な違い

定義場所:
- 関数: 独立して定義され、どのオブジェクトにも属しません。
- メソッド: オブジェクトのプロパティとして定義され、そのオブジェクトに属します。
呼び出し方法:
- 関数: 直接呼び出されます。
- メソッド: 所属するオブジェクトを通して呼び出されます。

関数呼び出しの例

functionName();

メソッド呼び出しの例

objectName.methodName();

ポイントはオブジェクト名が付くか付かないかの違いです。

条件分岐

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

if文

let age = 20;

if (age >= 18) {
    console.log('成人です。');
} else {
    console.log('未成年です。');
}

if (条件) {...} else {...}：条件が真であれば、ifブロック内のコードが実行されます。そうでなければ、elseブロック内のコードが実行されます。

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 (変数) {...}：変数の値に応じて異なるケースを実行します。

繰り返し

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

for文

for (let i = 0; i < 5; i++) {
    console.log('繰り返し回数: ' + i);
}

for (初期化; 条件; 更新) {...}：初期化ステートメントが1回実行され、条件が真である間、更新ステートメントが実行されるたびにループ内のコードが繰り返されます。

while文

let i = 0;

while (i < 5) {
    console.log('繰り返し回数: ' + i);
    i++;
}

while (条件) {...}：条件が真である間、ループ内のコードが繰り返されます。

配列

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

インデックスは1からではなく、0から始まる点は初学者が間違いやすいところです。

配列の作成とアクセス

let fruits = ['りんご', 'バナナ', 'オレンジ'];

console.log(fruits[0]); // りんご
console.log(fruits[1]); // バナナ
console.log(fruits[2]); // オレンジ

配列の操作

fruits.push('ぶどう'); // 配列に新しい要素を追加
console.log(fruits);

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

実践・JavaScript

確認用メッセージを使う

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

alert() 関数

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

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

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

confirm() 関数

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

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

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

windowオブジェクトの記述は省略できる

ちなみに、これらの確認用メッセージはwindowオブジェクトのメソッドです。そのため、本来は以下のようにwindow.に続けてメソッド名を記述します。

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

しかし、windowオブジェクトは唯一省略可能なオブジェクト名なので、ここでは省略しています。

JavaScriptでスタイルを指定する方法

JavaScriptを使って、動的にHTML要素のスタイルを変更することができます。

ユーザーの操作や特定の条件に応じて、リアルタイムにWebページのデザインを変更することが可能です。

以下では、JavaScriptでスタイルを指定する基本的な方法を紹介します。

1. `style`プロパティを使う

JavaScriptで特定の要素のスタイルを変更する最も直接的な方法は、要素のstyleプロパティを使用することです。

＜書式＞

要素.style.CSSのプロパティ名＝値;

例: 要素の背景色を変更する

以下の例では、ボタンをクリックすると、changeColor関数が呼び出され、div要素の背景色が変更されます。(sample)

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScriptでスタイルを指定する例</title>
    <style>
        .example {
            width: 200px;
            height: 200px;
            background-color: lightblue;
            margin: 20px;
        }
    </style>
</head>
<body>
    <h1>JavaScriptでスタイルを変更する</h1>
    <div class="example" id="myDiv">このボックスの色を変更します</div>
    <button onclick="changeColor()">色を変える</button>

    <script>
        function changeColor() {
            const div = document.getElementById('myDiv');
            div.style.backgroundColor = 'lightgreen';
        }
    </script>
</body>
</html>

CSSのプロパティ名はキャメルケースになる

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

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

キャメルケース（camelCase）のルール

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

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

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

2. `classList`プロパティを使う

CSSクラスを追加・削除することで、より柔軟にスタイルを変更する方法もあります。classListプロパティを使用します。

例: CSSクラスを追加・削除する

皆さんはトグルスイッチというものを見たことがありますか？

上記リンクを辿るとお分かりのようにトグルスイッチは、一つの操作を行うことで、2つの状態（オン/オフ）を切り替えることができるものです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScriptでクラスを切り替える例</title>
    <style>
        .example {
            width: 200px;
            height: 200px;
            background-color: lightblue;
            margin: 20px;
        }

        .active {
            background-color: lightsalmon;
            border: 2px solid orange;
        }
    </style>
</head>
<body>
    <h1>JavaScriptでクラスを切り替える</h1>
    <div class="example" id="myDiv">このボックスの色を変更します</div>
    <button onclick="toggleClass()">クラスを切り替える</button>

    <script>
        function toggleClass() {
            const div = document.getElementById('myDiv');
            div.classList.toggle('active');
        }
    </script>
</body>
</html>

3. `setAttribute`メソッドを使う

setAttributeメソッドを使って、スタイルをインラインで追加する方法もあります。

例: インラインスタイルを追加する

以下の例では、ボタンをクリックすると、addInlineStyle関数が呼び出され、div要素にインラインスタイルが追加されます。 (sample)

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScriptでインラインスタイルを追加する例</title>
    <style>
        .example {
            width: 200px;
            height: 200px;
            background-color: lightblue;
            margin: 20px;
        }
    </style>
</head>
<body>
    <h1>JavaScriptでインラインスタイルを追加する</h1>
    <div class="example" id="myDiv">このボックスの色を変更します</div>
    <button onclick="addInlineStyle()">インラインスタイルを追加</button>

    <script>
        function addInlineStyle() {
            const div = document.getElementById('myDiv');
            div.setAttribute('style', 'background-color: lightcoral; border: 2px solid red;');
        }
    </script>
</body>
</html>

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 で要素に CSS のスタイルを適用する方法について説明します。

単一のスタイルを適用する

特定の要素に単一の CSS プロパティを適用するには、次のようにします。

```html

### 複数の CSS プロパティを適用するためにCSSクラスを追加する

スタイルを適用する別の方法として、CSS クラスを追加する方法があります。これにより、あらかじめ定義したスタイルを適用できます。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSSのスタイルをJavaScriptで適用する</title>
<style>
#myElement {
width: 200px;
height: 200px;
background-color: lightgray;
}
.highlight {
background-color: yellow;
border: 2px solid red;
color: black;
font-size: 20px;
}
</style>
</head>
<body>
<div id="myElement"></div>
<button id="applyStyle">スタイルを適用</button>
<script>
const myElement = document.querySelector('#myElement');
const applyStyleButton = document.querySelector('#applyStyle');

applyStyleButton.addEventListener('click', () => {
myElement.classList.add('highlight');
});
</script>
</body>
</html>
```

これらの方法を使うことで、JavaScript を使用して柔軟に要素のスタイルを操作することができます。具体的な状況に応じて適切な方法を選択してください。

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

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

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

投稿者プロフィール

睦松田

サーバー上でも動作するJavaScript

サーバー上でも動作するJavaScript

サーバー上でも動作するJavaScript

サーバー上でも動作するJavaScript

他にもあるVisual Studio Codeの拡張機能

必要なツールの紹介

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

Visual Studio Code

拡張機能のインストール

エディタの使い方

環境の確認

JSでCSSデザインを変更する

1. styleプロパティを使う

例: 要素の背景色を変更する

CSSのプロパティ名はキャメルケースになる

2. classListプロパティを使う

例: CSSクラスを追加・削除する

3. setAttributeメソッドを使う

例: インラインスタイルを追加する

例題

documentオブジェクト

調べてみましょう

DOM（Document Object Model）要素を選択するためのメソッド

querySelector

使い方の例

querySelectorAll

使い方の例

CSSの復習

CSSの書き方

sanitize.cssについて

JavaScriptとの連携

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

本研修では、querySelectorやquerySelectorAllを使います

イベントハンドラ

マウスイベント

キーボードイベント

フォームイベント

ウィンドウイベント

属性とは？

JavaScriptの基礎

JavaScriptとは

変数

変数の宣言と代入

ローカル変数とグローバル変数

例

varは使わない

データ型

数値と文字列

文字列はシングルクォーテーションで囲むことをまず覚える

論理値

演算子

関数

関数の基本構造

関数の定義と呼び出しの例

関数とメソッドの違い

主な違い

条件分岐

if文

switch文

繰り返し

for文

while文

配列

配列の作成とアクセス

配列の操作

実践・JavaScript

確認用メッセージを使う

alert() 関数

confirm() 関数

windowオブジェクトの記述は省略できる

JavaScriptでスタイルを指定する方法

1. styleプロパティを使う

例: 要素の背景色を変更する

CSSのプロパティ名はキャメルケースになる

2. classListプロパティを使う

例: CSSクラスを追加・削除する

3. setAttributeメソッドを使う

例: インラインスタイルを追加する

jQuery

Lodash

1. `style`プロパティを使う

2. `classList`プロパティを使う

3. `setAttribute`メソッドを使う

`querySelector`

`querySelectorAll`

`本研修では、querySelector`や`querySelectorAll`を使います

1. `style`プロパティを使う

2. `classList`プロパティを使う

3. `setAttribute`メソッドを使う

例：`preventDefault`と`stopPropagation`

`setTimeout`

`setInterval`

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

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

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

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