Jekyll リファレンス
Jekyll リファレンス
Jekyll の基本的な使い方と GitHub Pages での運用におけるベストプラクティスとTipsです。
- Jekyll リファレンス
- 基本概念
- インストールと環境設定
- プロジェクト構造
- 設定ファイル(_config.yml)
- GitHub Pages との連携
- テーマとレイアウト
- コンテンツ作成
- プラグインの活用
- GitHub Pages でサポートされているプラグイン
- 1. jekyll-coffeescript
- 2. jekyll-default-layout
- 3. jekyll-gist
- 4. jekyll-github-metadata
- 5. jekyll-paginate
- 6. jekyll-relative-links
- 7. jekyll-optional-front-matter
- 8. jekyll-readme-index
- 9. jekyll-titles-from-headings
- 10. jekyll-feed
- 11. jekyll-redirect-from
- 12. jekyll-seo-tag
- 13. jekyll-sitemap
- 14. jekyll-avatar
- 15. jekyll-mentions
- 16. jekyll-include-cache
- 17. jekyll-theme-primer
- プラグインの組み合わせ例
- プラグイン使用時の注意点
- カスタムプラグインの作成
- GitHub Pages でサポートされているプラグイン
- パフォーマンス最適化
- トラブルシューティング
- ベストプラクティス
- 実用的な例
基本概念
Jekyll とは
Jekyll は静的サイトジェネレーターで、Markdown や HTML ファイルから静的な Web サイトを生成するツールです。GitHub Pages の標準エンジンとしても採用されています。
特徴:
- Markdown からHTMLへの自動変換
- テンプレートエンジンによる統一されたデザイン
- ブログ機能の標準サポート
- GitHub Pages との完全統合
- プラグインによる機能拡張
重要な概念
- サイト(Site): Jekyll で管理される Web サイト全体
- ポスト(Posts): ブログ記事やニュース記事
- ページ(Pages): 固定的なコンテンツページ
- レイアウト(Layouts): ページの基本構造を定義するテンプレート
- インクルード(Includes): 再利用可能なコードスニペット
- フロントマター(Front Matter): ファイルの先頭にあるYAML設定
インストールと環境設定
ローカル開発環境のセットアップ
1. Ruby のインストール
# macOS (Homebrew使用)
brew install ruby
# Ubuntu/Debian
sudo apt-get install ruby-full build-essential zlib1g-dev
# Windows (RubyInstaller)
# https://rubyinstaller.org/ からダウンロード
2. Jekyll のインストール
# Gem として Jekyll をインストール
gem install jekyll bundler
# バージョン確認
jekyll --version
3. 新しい Jekyll サイトの作成
# 新しいサイトの作成
jekyll new my-awesome-site
cd my-awesome-site
# ローカルサーバーの起動
bundle exec jekyll serve
# ブラウザで http://localhost:4000 にアクセス
GitHub Pages 用の設定
Gemfile の設定
# GitHub Pages 用の Gemfile
source "https://rubygems.org"
# GitHub Pages gem(Jekyll のバージョンを自動調整)
gem "github-pages", group: :jekyll_plugins
# テーマ
gem "minima", "~> 2.5"
# プラグイン
group :jekyll_plugins do
gem "jekyll-feed"
gem "jekyll-sitemap"
gem "jekyll-seo-tag"
end
# Windows 用
platforms :mingw, :x64_mingw, :mswin, :jruby do
gem "tzinfo", "~> 1.2"
gem "tzinfo-data"
end
gem "wdm", "~> 0.1.1", :platforms => [:mingw, :x64_mingw, :mswin]
プロジェクト構造
標準的なディレクトリ構造
my-site/
├── _config.yml # サイトの設定ファイル
├── _data/ # データファイル(YAML, JSON, CSV)
│ └── navigation.yml
├── _drafts/ # 下書きの投稿
│ └── draft-post.md
├── _includes/ # 再利用可能なコードスニペット
│ ├── head.html
│ ├── header.html
│ └── footer.html
├── _layouts/ # ページテンプレート
│ ├── default.html
│ ├── page.html
│ └── post.html
├── _posts/ # ブログ記事
│ └── 2023-01-01-welcome.md
├── _sass/ # Sass ファイル
│ └── _variables.scss
├── _site/ # 生成されるサイト(gitignore対象)
├── assets/ # CSS, JS, 画像ファイル
│ ├── css/
│ ├── js/
│ └── images/
├── Gemfile # Ruby gem の依存関係
├── Gemfile.lock # gem のバージョンロック
└── index.md # トップページ
ファイル命名規則
ポストファイル
_posts/YYYY-MM-DD-title.MARKUP
例: _posts/2023-12-01-jekyll-tutorial.md
ページファイル
# ルートディレクトリまたはサブディレクトリ
about.md
contact/index.md
設定ファイル(_config.yml)
基本設定
# サイト基本情報
title: "My Awesome Site"
description: "A fantastic Jekyll site"
baseurl: "" # サブディレクトリがある場合(例: "/blog")
url: "https://username.github.io" # サイトのURL
# ビルド設定
markdown: kramdown
highlighter: rouge
theme: minima
# プラグイン
plugins:
- jekyll-feed
- jekyll-sitemap
- jekyll-seo-tag
# パーマリンク設定
permalink: /:categories/:year/:month/:day/:title:output_ext
# タイムゾーン
timezone: Asia/Tokyo
# デフォルト設定
defaults:
- scope:
path: ""
type: "posts"
values:
layout: "post"
author: "Your Name"
- scope:
path: ""
type: "pages"
values:
layout: "page"
# 除外ファイル
exclude:
- Gemfile
- Gemfile.lock
- node_modules
- vendor/bundle/
- vendor/cache/
- vendor/gems/
- vendor/ruby/
- README.md
GitHub Pages 固有の設定
# GitHub Pages 用設定
repository: username/repository-name
github_username: username
# GitHub Pages でサポートされているプラグインのみ使用
plugins:
- jekyll-coffeescript
- jekyll-default-layout
- jekyll-gist
- jekyll-github-metadata
- jekyll-paginate
- jekyll-relative-links
- jekyll-optional-front-matter
- jekyll-readme-index
- jekyll-titles-from-headings
- jekyll-feed
- jekyll-redirect-from
- jekyll-seo-tag
- jekyll-sitemap
- jekyll-avatar
- jekyll-mentions
- jekyll-include-cache
# セキュリティ設定
safe: true
incremental: false
GitHub Pages との連携
1. リポジトリの設定
新しいリポジトリの場合
# GitHub Pages 用リポジトリの作成
git init
git add .
git commit -m "Initial Jekyll site"
git remote add origin https://github.com/username/username.github.io.git
git push -u origin main
既存リポジトリの場合
# docs ディレクトリを使用する場合
mkdir docs
# Jekyll サイトを docs ディレクトリに作成
2. GitHub Pages の有効化
- リポジトリの Settings タブに移動
- Pages セクションを開く
- Source を選択:
- Deploy from a branch:
main
ブランチの/
または/docs
- GitHub Actions: カスタムワークフローを使用
- Deploy from a branch:
3. カスタムドメインの設定
# _config.yml にカスタムドメインを設定
url: "https://mydomain.com"
enforce_ssl: true
# CNAME ファイルをルートディレクトリに作成
mydomain.com
4. GitHub Actions を使った高度なデプロイ
# .github/workflows/jekyll.yml
name: Build and deploy Jekyll site to GitHub Pages
on:
push:
branches: [ main ]
pull_request:
branches: [ main ]
jobs:
github-pages:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/configure-pages@v4
- uses: actions/jekyll-build-pages@v1
with:
source: ./
destination: ./_site
- uses: actions/upload-pages-artifact@v3
- uses: actions/deploy-pages@v4
テーマとレイアウト
人気の Jekyll テーマ
GitHub Pages でサポートされているテーマ
# _config.yml でテーマを指定
theme: minima
# または
theme: jekyll-theme-cayman
theme: jekyll-theme-minimal
theme: jekyll-theme-architect
Gem ベースのテーマ
# Gemfile
gem "beautiful-jekyll-theme"
gem "tale"
gem "hydeout"
カスタムレイアウトの作成
デフォルトレイアウト(_layouts/default.html)
<!DOCTYPE html>
<html lang="ja"><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- Begin Jekyll SEO tag v2.8.0 -->
<title>Jekyll リファレンス | 技術ドキュメント集</title>
<meta name="generator" content="Jekyll v3.10.0" />
<meta property="og:title" content="Jekyll リファレンス" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="各種技術ドキュメントとリファレンス" />
<meta property="og:description" content="各種技術ドキュメントとリファレンス" />
<link rel="canonical" href="https://toshi0907.github.io/docs/jekyll.html" />
<meta property="og:url" content="https://toshi0907.github.io/docs/jekyll.html" />
<meta property="og:site_name" content="技術ドキュメント集" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="Jekyll リファレンス" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"WebPage","description":"各種技術ドキュメントとリファレンス","headline":"Jekyll リファレンス","url":"https://toshi0907.github.io/docs/jekyll.html"}</script>
<!-- End Jekyll SEO tag -->
<link rel="stylesheet" href="/docs/assets/main.css">
<link rel="stylesheet" href="/docs/assets/css/search.css"><link type="application/atom+xml" rel="alternate" href="https://toshi0907.github.io/docs/feed.xml" title="技術ドキュメント集" /></head><body><header class="site-header" role="banner">
<div class="wrapper"><a class="site-title" rel="author" href="/docs/">技術ドキュメント集</a><nav class="site-nav">
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger">
<span class="menu-icon">
<svg viewBox="0 0 18 15" width="18px" height="15px">
<path d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z"/>
</svg>
</span>
</label>
<div class="trigger"><a class="page-link" href="/docs/api.html">API リファレンス</a><a class="page-link" href="/docs/git.html">Git リファレンス</a><a class="page-link" href="/docs/github.html">GitHub リファレンス</a><a class="page-link" href="/docs/gdb.html">GDB リファレンス</a><a class="page-link" href="/docs/html.html">HTML リファレンス</a><a class="page-link" href="/docs/css.html">CSS リファレンス</a><a class="page-link" href="/docs/javascript.html">JavaScript リファレンス</a><a class="page-link" href="/docs/nodejs.html">Node.js リファレンス</a><a class="page-link" href="/docs/python.html">Python リファレンス</a><a class="page-link" href="/docs/csharp.html">C# リファレンス</a><a class="page-link" href="/docs/regexp.html">正規表現 リファレンス</a><a class="page-link" href="/docs/nginx.html">Nginx リファレンス</a><a class="page-link" href="/docs/shellscript.html">シェルスクリプト リファレンス</a><a class="page-link" href="/docs/bat.html">バッチファイル リファレンス</a><a class="page-link" href="/docs/jekyll.html">Jekyll リファレンス</a><a class="page-link" href="/docs/linux.html">Linux CLI リファレンス</a><a class="page-link" href="/docs/termux.html">Termux リファレンス</a><a class="page-link" href="/docs/vscode.html">Visual Studio Code リファレンス</a><a class="page-link" href="/docs/gas.html">Google Apps Script リファレンス</a><a class="page-link" href="/docs/custom-layout-demo.html">カスタムレイアウトデモ</a></div>
</nav></div>
<!-- 検索機能 -->
<div class="wrapper">
<div id="search-container">
<input type="text" id="search-input" placeholder="ドキュメントを検索..." />
<div id="search-results"></div>
</div>
</div>
</header><main class="page-content" aria-label="Content">
<div class="wrapper">
<article class="page-article">
<header class="page-header">
<h1 class="page-title">JavaScript リファレンス</h1></header>
<div class="page-content-wrapper">
<!-- Table of Contents Sidebar --><aside class="page-toc-sidebar">
<div class="page-toc" style="background: #fff; border: 2px solid #007bff; border-radius: 8px; padding: 20px;">
<h3 style="margin-top: 0; color: #007bff; border-bottom: 1px solid #007bff; padding-bottom: 8px;">📖 目次</h3>
<div id="page-toc-content"></div>
</div>
</aside><div class="page-content">
<!-- Main content -->
<div class="page-main-content">
<h1 id="javascript-リファレンス">JavaScript リファレンス</h1>
<p>JavaScriptの基本的な使い方から応用まで、Webページに動的な機能を追加するために必要な知識を体系的に説明します。モダンなJavaScript(ES6+)の機能も含めて解説します。</p>
<ul id="markdown-toc">
<li><a href="#javascript-リファレンス" id="markdown-toc-javascript-リファレンス">JavaScript リファレンス</a> <ul>
<li><a href="#基本概念" id="markdown-toc-基本概念">基本概念</a> <ul>
<li><a href="#javascript-とは" id="markdown-toc-javascript-とは">JavaScript とは</a></li>
<li><a href="#javascript-の役割" id="markdown-toc-javascript-の役割">JavaScript の役割</a></li>
</ul>
</li>
<li><a href="#基本構文" id="markdown-toc-基本構文">基本構文</a> <ul>
<li><a href="#変数とデータ型" id="markdown-toc-変数とデータ型">変数とデータ型</a></li>
<li><a href="#文字列操作" id="markdown-toc-文字列操作">文字列操作</a></li>
<li><a href="#配列" id="markdown-toc-配列">配列</a></li>
<li><a href="#オブジェクト" id="markdown-toc-オブジェクト">オブジェクト</a></li>
</ul>
</li>
<li><a href="#関数" id="markdown-toc-関数">関数</a> <ul>
<li><a href="#関数の定義" id="markdown-toc-関数の定義">関数の定義</a></li>
<li><a href="#スコープとクロージャ" id="markdown-toc-スコープとクロージャ">スコープとクロージャ</a></li>
</ul>
</li>
<li><a href="#dom操作" id="markdown-toc-dom操作">DOM操作</a> <ul>
<li><a href="#要素の取得" id="markdown-toc-要素の取得">要素の取得</a></li>
<li><a href="#要素の操作" id="markdown-toc-要素の操作">要素の操作</a></li>
<li><a href="#要素の作成と追加" id="markdown-toc-要素の作成と追加">要素の作成と追加</a></li>
</ul>
</li>
<li><a href="#イベント処理" id="markdown-toc-イベント処理">イベント処理</a> <ul>
<li><a href="#イベントリスナーの追加" id="markdown-toc-イベントリスナーの追加">イベントリスナーの追加</a></li>
<li><a href="#よく使用するイベント" id="markdown-toc-よく使用するイベント">よく使用するイベント</a></li>
<li><a href="#イベント委譲" id="markdown-toc-イベント委譲">イベント委譲</a></li>
</ul>
</li>
<li><a href="#非同期処理" id="markdown-toc-非同期処理">非同期処理</a> <ul>
<li><a href="#promise" id="markdown-toc-promise">Promise</a></li>
<li><a href="#asyncawait" id="markdown-toc-asyncawait">async/await</a></li>
<li><a href="#fetch-api" id="markdown-toc-fetch-api">Fetch API</a></li>
</ul>
</li>
<li><a href="#モダンjavascriptes6" id="markdown-toc-モダンjavascriptes6">モダンJavaScript(ES6+)</a> <ul>
<li><a href="#分割代入" id="markdown-toc-分割代入">分割代入</a></li>
<li><a href="#モジュール" id="markdown-toc-モジュール">モジュール</a></li>
<li><a href="#クラス" id="markdown-toc-クラス">クラス</a></li>
</ul>
</li>
<li><a href="#エラーハンドリング" id="markdown-toc-エラーハンドリング">エラーハンドリング</a> <ul>
<li><a href="#try-catch文" id="markdown-toc-try-catch文">try-catch文</a></li>
</ul>
</li>
<li><a href="#ブラウザapi" id="markdown-toc-ブラウザapi">ブラウザAPI</a> <ul>
<li><a href="#local-storage" id="markdown-toc-local-storage">Local Storage</a></li>
<li><a href="#geolocation-api" id="markdown-toc-geolocation-api">Geolocation API</a></li>
<li><a href="#notification-api" id="markdown-toc-notification-api">Notification API</a></li>
</ul>
</li>
<li><a href="#実践的なコード例" id="markdown-toc-実践的なコード例">実践的なコード例</a> <ul>
<li><a href="#フォームバリデーション" id="markdown-toc-フォームバリデーション">フォームバリデーション</a></li>
<li><a href="#シンプルなspasingle-page-application" id="markdown-toc-シンプルなspasingle-page-application">シンプルなSPA(Single Page Application)</a></li>
</ul>
</li>
<li><a href="#デバッグとテスト" id="markdown-toc-デバッグとテスト">デバッグとテスト</a> <ul>
<li><a href="#デバッグ技法" id="markdown-toc-デバッグ技法">デバッグ技法</a></li>
<li><a href="#簡単なテストフレームワーク" id="markdown-toc-簡単なテストフレームワーク">簡単なテストフレームワーク</a></li>
</ul>
</li>
<li><a href="#パフォーマンス最適化" id="markdown-toc-パフォーマンス最適化">パフォーマンス最適化</a> <ul>
<li><a href="#パフォーマンス測定と最適化" id="markdown-toc-パフォーマンス測定と最適化">パフォーマンス測定と最適化</a></li>
</ul>
</li>
<li><a href="#参考資料" id="markdown-toc-参考資料">参考資料</a> <ul>
<li><a href="#公式ドキュメント" id="markdown-toc-公式ドキュメント">公式ドキュメント</a></li>
<li><a href="#学習リソース" id="markdown-toc-学習リソース">学習リソース</a></li>
<li><a href="#ツールとライブラリ" id="markdown-toc-ツールとライブラリ">ツールとライブラリ</a></li>
<li><a href="#フレームワークライブラリ" id="markdown-toc-フレームワークライブラリ">フレームワーク・ライブラリ</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<h2 id="基本概念">基本概念</h2>
<h3 id="javascript-とは">JavaScript とは</h3>
<p><strong>JavaScript</strong> は、Webページに動的な機能を追加するためのプログラミング言語です。1995年にBrendan Eichによって開発され、現在はブラウザだけでなくサーバーサイド(Node.js)でも広く使用されています。</p>
<p><strong>特徴:</strong></p>
<ul>
<li>インタープリター言語(コンパイル不要)</li>
<li>動的型付け言語</li>
<li>プロトタイプベースのオブジェクト指向</li>
<li>関数型プログラミングもサポート</li>
<li>イベント駆動プログラミング</li>
</ul>
<h3 id="javascript-の役割">JavaScript の役割</h3>
<p>JavaScriptは以下の主要な役割を担います:</p>
<ol>
<li><strong>ユーザーインタラクション</strong>: クリック、入力などのイベント処理</li>
<li><strong>DOM操作</strong>: HTMLの動的な変更</li>
<li><strong>非同期処理</strong>: サーバーとの通信(Ajax、Fetch API)</li>
<li><strong>フォーム検証</strong>: 入力データの検証</li>
<li><strong>アニメーション</strong>: 視覚的な効果の実装</li>
</ol>
<h2 id="基本構文">基本構文</h2>
<h3 id="変数とデータ型">変数とデータ型</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 変数の宣言</span>
<span class="kd">let</span> <span class="nx">name</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">田中太郎</span><span class="dl">"</span><span class="p">;</span> <span class="c1">// 文字列(String)</span>
<span class="kd">const</span> <span class="nx">age</span> <span class="o">=</span> <span class="mi">30</span><span class="p">;</span> <span class="c1">// 数値(Number)- 定数</span>
<span class="kd">var</span> <span class="nx">isStudent</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span> <span class="c1">// 真偽値(Boolean)- 非推奨</span>
<span class="c1">// 現代的な変数宣言(ES6+)</span>
<span class="kd">let</span> <span class="nx">message</span><span class="p">;</span> <span class="c1">// 宣言のみ(undefined)</span>
<span class="kd">let</span> <span class="nx">score</span> <span class="o">=</span> <span class="mi">85</span><span class="p">;</span> <span class="c1">// 宣言と初期化</span>
<span class="kd">const</span> <span class="nx">PI</span> <span class="o">=</span> <span class="mf">3.14159</span><span class="p">;</span> <span class="c1">// 定数(再代入不可)</span>
<span class="c1">// データ型の確認</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">name</span><span class="p">);</span> <span class="c1">// "string"</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">age</span><span class="p">);</span> <span class="c1">// "number"</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">isStudent</span><span class="p">);</span> <span class="c1">// "boolean"</span>
<span class="c1">// プリミティブ型</span>
<span class="kd">let</span> <span class="nx">str</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">文字列</span><span class="dl">"</span><span class="p">;</span> <span class="c1">// String</span>
<span class="kd">let</span> <span class="nx">num</span> <span class="o">=</span> <span class="mi">42</span><span class="p">;</span> <span class="c1">// Number</span>
<span class="kd">let</span> <span class="nx">bool</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span> <span class="c1">// Boolean</span>
<span class="kd">let</span> <span class="nx">nothing</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span> <span class="c1">// Null</span>
<span class="kd">let</span> <span class="nx">undef</span> <span class="o">=</span> <span class="kc">undefined</span><span class="p">;</span> <span class="c1">// Undefined</span>
<span class="kd">let</span> <span class="nx">sym</span> <span class="o">=</span> <span class="nb">Symbol</span><span class="p">(</span><span class="dl">"</span><span class="s2">id</span><span class="dl">"</span><span class="p">);</span> <span class="c1">// Symbol(ES6+)</span>
<span class="kd">let</span> <span class="nx">big</span> <span class="o">=</span> <span class="mi">123</span><span class="nx">n</span><span class="p">;</span> <span class="c1">// BigInt(ES2020+)</span>
<span class="c1">// 参照型</span>
<span class="kd">let</span> <span class="nx">arr</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">];</span> <span class="c1">// Array</span>
<span class="kd">let</span> <span class="nx">obj</span> <span class="o">=</span> <span class="p">{</span> <span class="na">name</span><span class="p">:</span> <span class="dl">"</span><span class="s2">太郎</span><span class="dl">"</span> <span class="p">};</span> <span class="c1">// Object</span>
<span class="kd">let</span> <span class="nx">func</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{};</span> <span class="c1">// Function</span>
</code></pre></div></div>
<h3 id="文字列操作">文字列操作</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 文字列の基本操作</span>
<span class="kd">let</span> <span class="nx">firstName</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">太郎</span><span class="dl">"</span><span class="p">;</span>
<span class="kd">let</span> <span class="nx">lastName</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">田中</span><span class="dl">"</span><span class="p">;</span>
<span class="c1">// 文字列結合</span>
<span class="kd">let</span> <span class="nx">fullName1</span> <span class="o">=</span> <span class="nx">firstName</span> <span class="o">+</span> <span class="nx">lastName</span><span class="p">;</span> <span class="c1">// "太郎田中"</span>
<span class="kd">let</span> <span class="nx">fullName2</span> <span class="o">=</span> <span class="s2">`</span><span class="p">${</span><span class="nx">lastName</span><span class="p">}</span><span class="s2"> </span><span class="p">${</span><span class="nx">firstName</span><span class="p">}</span><span class="s2">`</span><span class="p">;</span> <span class="c1">// "田中 太郎" (テンプレートリテラル)</span>
<span class="c1">// 文字列メソッド</span>
<span class="kd">let</span> <span class="nx">text</span> <span class="o">=</span> <span class="dl">"</span><span class="s2"> Hello, World! </span><span class="dl">"</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">text</span><span class="p">.</span><span class="nx">length</span><span class="p">);</span> <span class="c1">// 16 (文字数)</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">text</span><span class="p">.</span><span class="nx">toLowerCase</span><span class="p">());</span> <span class="c1">// " hello, world! "</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">text</span><span class="p">.</span><span class="nx">toUpperCase</span><span class="p">());</span> <span class="c1">// " HELLO, WORLD! "</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">text</span><span class="p">.</span><span class="nx">trim</span><span class="p">());</span> <span class="c1">// "Hello, World!" (前後の空白削除)</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">text</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="dl">"</span><span class="s2">World</span><span class="dl">"</span><span class="p">));</span> <span class="c1">// 9 (文字列の位置)</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">text</span><span class="p">.</span><span class="nx">includes</span><span class="p">(</span><span class="dl">"</span><span class="s2">Hello</span><span class="dl">"</span><span class="p">));</span> <span class="c1">// true (文字列が含まれるか)</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">text</span><span class="p">.</span><span class="nx">slice</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span> <span class="mi">7</span><span class="p">));</span> <span class="c1">// "Hello" (部分文字列)</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">text</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="dl">"</span><span class="s2">World</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">JavaScript</span><span class="dl">"</span><span class="p">));</span> <span class="c1">// " Hello, JavaScript! "</span>
<span class="c1">// 文字列分割と結合</span>
<span class="kd">let</span> <span class="nx">csv</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">apple,banana,orange</span><span class="dl">"</span><span class="p">;</span>
<span class="kd">let</span> <span class="nx">fruits</span> <span class="o">=</span> <span class="nx">csv</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="dl">"</span><span class="s2">,</span><span class="dl">"</span><span class="p">);</span> <span class="c1">// ["apple", "banana", "orange"]</span>
<span class="kd">let</span> <span class="nx">joined</span> <span class="o">=</span> <span class="nx">fruits</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="dl">"</span><span class="s2"> | </span><span class="dl">"</span><span class="p">);</span> <span class="c1">// "apple | banana | orange"</span>
<span class="c1">// マルチライン文字列(テンプレートリテラル)</span>
<span class="kd">let</span> <span class="nx">multiLine</span> <span class="o">=</span> <span class="s2">`
これは
複数行の
文字列です
`</span><span class="p">;</span>
</code></pre></div></div>
<h3 id="配列">配列</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 配列の作成</span>
<span class="kd">let</span> <span class="nx">arr1</span> <span class="o">=</span> <span class="p">[];</span> <span class="c1">// 空の配列</span>
<span class="kd">let</span> <span class="nx">arr2</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">5</span><span class="p">];</span> <span class="c1">// 数値配列</span>
<span class="kd">let</span> <span class="nx">arr3</span> <span class="o">=</span> <span class="p">[</span><span class="dl">"</span><span class="s2">apple</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">banana</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">orange</span><span class="dl">"</span><span class="p">];</span> <span class="c1">// 文字列配列</span>
<span class="kd">let</span> <span class="nx">arr4</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="dl">"</span><span class="s2">text</span><span class="dl">"</span><span class="p">,</span> <span class="kc">true</span><span class="p">,</span> <span class="kc">null</span><span class="p">];</span> <span class="c1">// 混合配列</span>
<span class="c1">// 配列の基本操作</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">arr2</span><span class="p">.</span><span class="nx">length</span><span class="p">);</span> <span class="c1">// 5 (要素数)</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">arr2</span><span class="p">[</span><span class="mi">0</span><span class="p">]);</span> <span class="c1">// 1 (最初の要素)</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">arr2</span><span class="p">[</span><span class="nx">arr2</span><span class="p">.</span><span class="nx">length</span> <span class="o">-</span> <span class="mi">1</span><span class="p">]);</span> <span class="c1">// 5 (最後の要素)</span>
<span class="c1">// 要素の追加・削除</span>
<span class="nx">arr2</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="mi">6</span><span class="p">);</span> <span class="c1">// 末尾に追加: [1,2,3,4,5,6]</span>
<span class="nx">arr2</span><span class="p">.</span><span class="nx">pop</span><span class="p">();</span> <span class="c1">// 末尾を削除: [1,2,3,4,5]</span>
<span class="nx">arr2</span><span class="p">.</span><span class="nx">unshift</span><span class="p">(</span><span class="mi">0</span><span class="p">);</span> <span class="c1">// 先頭に追加: [0,1,2,3,4,5]</span>
<span class="nx">arr2</span><span class="p">.</span><span class="nx">shift</span><span class="p">();</span> <span class="c1">// 先頭を削除: [1,2,3,4,5]</span>
<span class="c1">// 配列メソッド(ES5+)</span>
<span class="kd">let</span> <span class="nx">numbers</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">5</span><span class="p">];</span>
<span class="c1">// map: 各要素を変換</span>
<span class="kd">let</span> <span class="nx">doubled</span> <span class="o">=</span> <span class="nx">numbers</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">x</span> <span class="o">=></span> <span class="nx">x</span> <span class="o">*</span> <span class="mi">2</span><span class="p">);</span> <span class="c1">// [2,4,6,8,10]</span>
<span class="c1">// filter: 条件に合う要素を抽出</span>
<span class="kd">let</span> <span class="nx">evens</span> <span class="o">=</span> <span class="nx">numbers</span><span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="nx">x</span> <span class="o">=></span> <span class="nx">x</span> <span class="o">%</span> <span class="mi">2</span> <span class="o">===</span> <span class="mi">0</span><span class="p">);</span> <span class="c1">// [2,4]</span>
<span class="c1">// reduce: 配列を単一の値に集約</span>
<span class="kd">let</span> <span class="nx">sum</span> <span class="o">=</span> <span class="nx">numbers</span><span class="p">.</span><span class="nx">reduce</span><span class="p">((</span><span class="nx">acc</span><span class="p">,</span> <span class="nx">x</span><span class="p">)</span> <span class="o">=></span> <span class="nx">acc</span> <span class="o">+</span> <span class="nx">x</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span> <span class="c1">// 15</span>
<span class="c1">// find: 条件に合う最初の要素</span>
<span class="kd">let</span> <span class="nx">found</span> <span class="o">=</span> <span class="nx">numbers</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="nx">x</span> <span class="o">=></span> <span class="nx">x</span> <span class="o">></span> <span class="mi">3</span><span class="p">);</span> <span class="c1">// 4</span>
<span class="c1">// forEach: 各要素に対して処理実行</span>
<span class="nx">numbers</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">x</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">x</span><span class="p">));</span>
<span class="c1">// includes: 要素が含まれているか</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">numbers</span><span class="p">.</span><span class="nx">includes</span><span class="p">(</span><span class="mi">3</span><span class="p">));</span> <span class="c1">// true</span>
<span class="c1">// sort: ソート</span>
<span class="kd">let</span> <span class="nx">fruits</span> <span class="o">=</span> <span class="p">[</span><span class="dl">"</span><span class="s2">banana</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">apple</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">orange</span><span class="dl">"</span><span class="p">];</span>
<span class="nx">fruits</span><span class="p">.</span><span class="nx">sort</span><span class="p">();</span> <span class="c1">// ["apple", "banana", "orange"]</span>
<span class="kd">let</span> <span class="nx">nums</span> <span class="o">=</span> <span class="p">[</span><span class="mi">3</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">5</span><span class="p">];</span>
<span class="nx">nums</span><span class="p">.</span><span class="nx">sort</span><span class="p">((</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="o">=></span> <span class="nx">a</span> <span class="o">-</span> <span class="nx">b</span><span class="p">);</span> <span class="c1">// [1,1,3,4,5] (数値ソート)</span>
</code></pre></div></div>
<h3 id="オブジェクト">オブジェクト</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// オブジェクトの作成</span>
<span class="kd">let</span> <span class="nx">person</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">name</span><span class="p">:</span> <span class="dl">"</span><span class="s2">田中太郎</span><span class="dl">"</span><span class="p">,</span>
<span class="na">age</span><span class="p">:</span> <span class="mi">30</span><span class="p">,</span>
<span class="na">city</span><span class="p">:</span> <span class="dl">"</span><span class="s2">東京</span><span class="dl">"</span><span class="p">,</span>
<span class="na">isStudent</span><span class="p">:</span> <span class="kc">false</span>
<span class="p">};</span>
<span class="c1">// プロパティへのアクセス</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">person</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span> <span class="c1">// "田中太郎" (ドット記法)</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">person</span><span class="p">[</span><span class="dl">"</span><span class="s2">age</span><span class="dl">"</span><span class="p">]);</span> <span class="c1">// 30 (ブラケット記法)</span>
<span class="c1">// プロパティの追加・変更</span>
<span class="nx">person</span><span class="p">.</span><span class="nx">email</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">tanaka@example.com</span><span class="dl">"</span><span class="p">;</span> <span class="c1">// 追加</span>
<span class="nx">person</span><span class="p">.</span><span class="nx">age</span> <span class="o">=</span> <span class="mi">31</span><span class="p">;</span> <span class="c1">// 変更</span>
<span class="c1">// プロパティの削除</span>
<span class="k">delete</span> <span class="nx">person</span><span class="p">.</span><span class="nx">isStudent</span><span class="p">;</span>
<span class="c1">// メソッドを含むオブジェクト</span>
<span class="kd">let</span> <span class="nx">calculator</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">value</span><span class="p">:</span> <span class="mi">0</span><span class="p">,</span>
<span class="na">add</span><span class="p">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">x</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">value</span> <span class="o">+=</span> <span class="nx">x</span><span class="p">;</span>
<span class="k">return</span> <span class="k">this</span><span class="p">;</span> <span class="c1">// チェーンメソッド用</span>
<span class="p">},</span>
<span class="na">multiply</span><span class="p">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">x</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">value</span> <span class="o">*=</span> <span class="nx">x</span><span class="p">;</span>
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
<span class="p">},</span>
<span class="na">getValue</span><span class="p">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">value</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="c1">// 使用例</span>
<span class="nx">calculator</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="mi">5</span><span class="p">).</span><span class="nx">multiply</span><span class="p">(</span><span class="mi">2</span><span class="p">).</span><span class="nx">getValue</span><span class="p">();</span> <span class="c1">// 10</span>
<span class="c1">// オブジェクトの反復処理</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">key</span> <span class="k">in</span> <span class="nx">person</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`</span><span class="p">${</span><span class="nx">key</span><span class="p">}</span><span class="s2">: </span><span class="p">${</span><span class="nx">person</span><span class="p">[</span><span class="nx">key</span><span class="p">]}</span><span class="s2">`</span><span class="p">);</span>
<span class="p">}</span>
<span class="c1">// ES6+ のオブジェクト機能</span>
<span class="kd">let</span> <span class="nx">name</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">太郎</span><span class="dl">"</span><span class="p">;</span>
<span class="kd">let</span> <span class="nx">age</span> <span class="o">=</span> <span class="mi">25</span><span class="p">;</span>
<span class="c1">// プロパティ名の短縮記法</span>
<span class="kd">let</span> <span class="nx">user</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">name</span><span class="p">,</span> <span class="nx">age</span> <span class="p">};</span> <span class="c1">// { name: "太郎", age: 25 }</span>
<span class="c1">// 計算されたプロパティ名</span>
<span class="kd">let</span> <span class="nx">prop</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">color</span><span class="dl">"</span><span class="p">;</span>
<span class="kd">let</span> <span class="nx">car</span> <span class="o">=</span> <span class="p">{</span>
<span class="p">[</span><span class="nx">prop</span><span class="p">]:</span> <span class="dl">"</span><span class="s2">red</span><span class="dl">"</span> <span class="c1">// { color: "red" }</span>
<span class="p">};</span>
<span class="c1">// デストラクチャリング代入</span>
<span class="kd">let</span> <span class="p">{</span> <span class="na">name</span><span class="p">:</span> <span class="nx">userName</span><span class="p">,</span> <span class="na">age</span><span class="p">:</span> <span class="nx">userAge</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">user</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">userName</span><span class="p">,</span> <span class="nx">userAge</span><span class="p">);</span> <span class="c1">// "太郎" 25</span>
</code></pre></div></div>
<h2 id="関数">関数</h2>
<h3 id="関数の定義">関数の定義</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 関数宣言</span>
<span class="kd">function</span> <span class="nx">greet</span><span class="p">(</span><span class="nx">name</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="s2">`こんにちは、</span><span class="p">${</span><span class="nx">name</span><span class="p">}</span><span class="s2">さん!`</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// 関数式</span>
<span class="kd">const</span> <span class="nx">greet2</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">name</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="s2">`こんにちは、</span><span class="p">${</span><span class="nx">name</span><span class="p">}</span><span class="s2">さん!`</span><span class="p">;</span>
<span class="p">};</span>
<span class="c1">// アロー関数(ES6+)</span>
<span class="kd">const</span> <span class="nx">greet3</span> <span class="o">=</span> <span class="p">(</span><span class="nx">name</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">return</span> <span class="s2">`こんにちは、</span><span class="p">${</span><span class="nx">name</span><span class="p">}</span><span class="s2">さん!`</span><span class="p">;</span>
<span class="p">};</span>
<span class="c1">// アロー関数(短縮形)</span>
<span class="kd">const</span> <span class="nx">greet4</span> <span class="o">=</span> <span class="nx">name</span> <span class="o">=></span> <span class="s2">`こんにちは、</span><span class="p">${</span><span class="nx">name</span><span class="p">}</span><span class="s2">さん!`</span><span class="p">;</span>
<span class="c1">// 複数パラメータのアロー関数</span>
<span class="kd">const</span> <span class="nx">add</span> <span class="o">=</span> <span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="o">=></span> <span class="nx">a</span> <span class="o">+</span> <span class="nx">b</span><span class="p">;</span>
<span class="c1">// 関数の呼び出し</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">greet</span><span class="p">(</span><span class="dl">"</span><span class="s2">太郎</span><span class="dl">"</span><span class="p">));</span> <span class="c1">// "こんにちは、太郎さん!"</span>
<span class="c1">// デフォルトパラメータ(ES6+)</span>
<span class="kd">function</span> <span class="nx">createUser</span><span class="p">(</span><span class="nx">name</span><span class="p">,</span> <span class="nx">age</span> <span class="o">=</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">city</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">未設定</span><span class="dl">"</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">{</span> <span class="nx">name</span><span class="p">,</span> <span class="nx">age</span><span class="p">,</span> <span class="nx">city</span> <span class="p">};</span>
<span class="p">}</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">createUser</span><span class="p">(</span><span class="dl">"</span><span class="s2">太郎</span><span class="dl">"</span><span class="p">));</span> <span class="c1">// { name: "太郎", age: 0, city: "未設定" }</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">createUser</span><span class="p">(</span><span class="dl">"</span><span class="s2">花子</span><span class="dl">"</span><span class="p">,</span> <span class="mi">25</span><span class="p">));</span> <span class="c1">// { name: "花子", age: 25, city: "未設定" }</span>
<span class="c1">// 可変長引数(Rest Parameters)</span>
<span class="kd">function</span> <span class="nx">sum</span><span class="p">(...</span><span class="nx">numbers</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">numbers</span><span class="p">.</span><span class="nx">reduce</span><span class="p">((</span><span class="nx">total</span><span class="p">,</span> <span class="nx">num</span><span class="p">)</span> <span class="o">=></span> <span class="nx">total</span> <span class="o">+</span> <span class="nx">num</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">sum</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">5</span><span class="p">));</span> <span class="c1">// 15</span>
<span class="c1">// スプレッド演算子</span>
<span class="kd">const</span> <span class="nx">arr1</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">];</span>
<span class="kd">const</span> <span class="nx">arr2</span> <span class="o">=</span> <span class="p">[</span><span class="mi">4</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">6</span><span class="p">];</span>
<span class="kd">const</span> <span class="nx">combined</span> <span class="o">=</span> <span class="p">[...</span><span class="nx">arr1</span><span class="p">,</span> <span class="p">...</span><span class="nx">arr2</span><span class="p">];</span> <span class="c1">// [1,2,3,4,5,6]</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">max</span><span class="p">(...</span><span class="nx">arr1</span><span class="p">));</span> <span class="c1">// 3</span>
</code></pre></div></div>
<h3 id="スコープとクロージャ">スコープとクロージャ</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// グローバルスコープ</span>
<span class="kd">let</span> <span class="nx">globalVar</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">グローバル</span><span class="dl">"</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">outerFunction</span><span class="p">()</span> <span class="p">{</span>
<span class="c1">// 関数スコープ</span>
<span class="kd">let</span> <span class="nx">outerVar</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">外側</span><span class="dl">"</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">innerFunction</span><span class="p">()</span> <span class="p">{</span>
<span class="c1">// クロージャ</span>
<span class="kd">let</span> <span class="nx">innerVar</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">内側</span><span class="dl">"</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">globalVar</span><span class="p">);</span> <span class="c1">// アクセス可能</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">outerVar</span><span class="p">);</span> <span class="c1">// アクセス可能</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">innerVar</span><span class="p">);</span> <span class="c1">// アクセス可能</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">innerFunction</span><span class="p">;</span>
<span class="p">}</span>
<span class="kd">const</span> <span class="nx">closure</span> <span class="o">=</span> <span class="nx">outerFunction</span><span class="p">();</span>
<span class="nx">closure</span><span class="p">();</span> <span class="c1">// クロージャが実行される</span>
<span class="c1">// 実用的なクロージャの例</span>
<span class="kd">function</span> <span class="nx">createCounter</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">count</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
<span class="k">return</span> <span class="p">{</span>
<span class="na">increment</span><span class="p">:</span> <span class="p">()</span> <span class="o">=></span> <span class="o">++</span><span class="nx">count</span><span class="p">,</span>
<span class="na">decrement</span><span class="p">:</span> <span class="p">()</span> <span class="o">=></span> <span class="o">--</span><span class="nx">count</span><span class="p">,</span>
<span class="na">getCount</span><span class="p">:</span> <span class="p">()</span> <span class="o">=></span> <span class="nx">count</span>
<span class="p">};</span>
<span class="p">}</span>
<span class="kd">const</span> <span class="nx">counter</span> <span class="o">=</span> <span class="nx">createCounter</span><span class="p">();</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">counter</span><span class="p">.</span><span class="nx">increment</span><span class="p">());</span> <span class="c1">// 1</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">counter</span><span class="p">.</span><span class="nx">increment</span><span class="p">());</span> <span class="c1">// 2</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">counter</span><span class="p">.</span><span class="nx">getCount</span><span class="p">());</span> <span class="c1">// 2</span>
<span class="c1">// ブロックスコープ(let, const)</span>
<span class="p">{</span>
<span class="kd">let</span> <span class="nx">blockVar</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">ブロック内</span><span class="dl">"</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">blockConst</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">定数</span><span class="dl">"</span><span class="p">;</span>
<span class="c1">// これらはブロック外からアクセス不可</span>
<span class="p">}</span>
<span class="c1">// var は関数スコープ</span>
<span class="kd">function</span> <span class="nx">varExample</span><span class="p">()</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="kc">true</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">varVariable</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">var変数</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">varVariable</span><span class="p">);</span> <span class="c1">// アクセス可能(ホイスティング)</span>
<span class="p">}</span>
</code></pre></div></div>
<h2 id="dom操作">DOM操作</h2>
<h3 id="要素の取得">要素の取得</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// ID で取得</span>
<span class="kd">const</span> <span class="nx">element</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">myId</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// クラス名で取得</span>
<span class="kd">const</span> <span class="nx">elements</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="dl">"</span><span class="s2">myClass</span><span class="dl">"</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">firstElement</span> <span class="o">=</span> <span class="nx">elements</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
<span class="c1">// タグ名で取得</span>
<span class="kd">const</span> <span class="nx">paragraphs</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="dl">"</span><span class="s2">p</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// CSSセレクタで取得(推奨)</span>
<span class="kd">const</span> <span class="nx">element2</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#myId</span><span class="dl">"</span><span class="p">);</span> <span class="c1">// 最初の要素</span>
<span class="kd">const</span> <span class="nx">elements2</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="dl">"</span><span class="s2">.myClass</span><span class="dl">"</span><span class="p">);</span> <span class="c1">// 全ての要素</span>
<span class="c1">// 複雑なセレクタの例</span>
<span class="kd">const</span> <span class="nx">navLinks</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="dl">"</span><span class="s2">nav ul li a</span><span class="dl">"</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">firstParagraph</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">article p:first-child</span><span class="dl">"</span><span class="p">);</span>
</code></pre></div></div>
<h3 id="要素の操作">要素の操作</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// テキストコンテンツの操作</span>
<span class="kd">const</span> <span class="nx">title</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">h1</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">title</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">新しいタイトル</span><span class="dl">"</span><span class="p">;</span> <span class="c1">// HTMLタグは文字列として表示</span>
<span class="nx">title</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="dl">"</span><span class="s2"><strong>太字タイトル</strong></span><span class="dl">"</span><span class="p">;</span> <span class="c1">// HTMLタグも解釈</span>
<span class="c1">// 属性の操作</span>
<span class="kd">const</span> <span class="nx">link</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">a</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">link</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="dl">"</span><span class="s2">href</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">https://example.com</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">link</span><span class="p">.</span><span class="nx">getAttribute</span><span class="p">(</span><span class="dl">"</span><span class="s2">href</span><span class="dl">"</span><span class="p">);</span> <span class="c1">// "https://example.com"</span>
<span class="nx">link</span><span class="p">.</span><span class="nx">removeAttribute</span><span class="p">(</span><span class="dl">"</span><span class="s2">target</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// より簡単な属性アクセス</span>
<span class="nx">link</span><span class="p">.</span><span class="nx">href</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">https://google.com</span><span class="dl">"</span><span class="p">;</span>
<span class="nx">link</span><span class="p">.</span><span class="nx">target</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">_blank</span><span class="dl">"</span><span class="p">;</span>
<span class="c1">// クラスの操作</span>
<span class="kd">const</span> <span class="nx">button</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">button</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="dl">"</span><span class="s2">active</span><span class="dl">"</span><span class="p">);</span> <span class="c1">// クラス追加</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">remove</span><span class="p">(</span><span class="dl">"</span><span class="s2">disabled</span><span class="dl">"</span><span class="p">);</span> <span class="c1">// クラス削除</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">toggle</span><span class="p">(</span><span class="dl">"</span><span class="s2">highlighted</span><span class="dl">"</span><span class="p">);</span> <span class="c1">// クラスの切り替え</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">contains</span><span class="p">(</span><span class="dl">"</span><span class="s2">active</span><span class="dl">"</span><span class="p">);</span> <span class="c1">// クラスの存在確認</span>
<span class="c1">// スタイルの操作</span>
<span class="kd">const</span> <span class="nx">box</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">.box</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">box</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">backgroundColor</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">red</span><span class="dl">"</span><span class="p">;</span>
<span class="nx">box</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">fontSize</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">20px</span><span class="dl">"</span><span class="p">;</span>
<span class="nx">box</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">none</span><span class="dl">"</span><span class="p">;</span>
<span class="c1">// 複数スタイルの設定</span>
<span class="nb">Object</span><span class="p">.</span><span class="nx">assign</span><span class="p">(</span><span class="nx">box</span><span class="p">.</span><span class="nx">style</span><span class="p">,</span> <span class="p">{</span>
<span class="na">width</span><span class="p">:</span> <span class="dl">"</span><span class="s2">200px</span><span class="dl">"</span><span class="p">,</span>
<span class="na">height</span><span class="p">:</span> <span class="dl">"</span><span class="s2">200px</span><span class="dl">"</span><span class="p">,</span>
<span class="na">border</span><span class="p">:</span> <span class="dl">"</span><span class="s2">2px solid black</span><span class="dl">"</span>
<span class="p">});</span>
</code></pre></div></div>
<h3 id="要素の作成と追加">要素の作成と追加</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 新しい要素の作成</span>
<span class="kd">const</span> <span class="nx">newParagraph</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="dl">"</span><span class="s2">p</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">newParagraph</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">新しい段落です</span><span class="dl">"</span><span class="p">;</span>
<span class="nx">newParagraph</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">new-content</span><span class="dl">"</span><span class="p">;</span>
<span class="c1">// 要素の追加</span>
<span class="kd">const</span> <span class="nx">container</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#container</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">newParagraph</span><span class="p">);</span> <span class="c1">// 末尾に追加</span>
<span class="c1">// より柔軟な挿入</span>
<span class="kd">const</span> <span class="nx">referenceElement</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">.reference</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">insertBefore</span><span class="p">(</span><span class="nx">newParagraph</span><span class="p">,</span> <span class="nx">referenceElement</span><span class="p">);</span> <span class="c1">// 指定要素の前に挿入</span>
<span class="c1">// 新しいAPI(より便利)</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">insertAdjacentElement</span><span class="p">(</span><span class="dl">"</span><span class="s2">beforeend</span><span class="dl">"</span><span class="p">,</span> <span class="nx">newParagraph</span><span class="p">);</span> <span class="c1">// 末尾に追加</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">insertAdjacentElement</span><span class="p">(</span><span class="dl">"</span><span class="s2">afterbegin</span><span class="dl">"</span><span class="p">,</span> <span class="nx">newParagraph</span><span class="p">);</span> <span class="c1">// 先頭に追加</span>
<span class="c1">// HTMLを直接挿入</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">insertAdjacentHTML</span><span class="p">(</span><span class="dl">"</span><span class="s2">beforeend</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2"><p>HTMLで追加</p></span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// 要素の削除</span>
<span class="kd">const</span> <span class="nx">elementToRemove</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">.remove-me</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">elementToRemove</span><span class="p">.</span><span class="nx">remove</span><span class="p">();</span> <span class="c1">// 新しい方法</span>
<span class="c1">// elementToRemove.parentNode.removeChild(elementToRemove); // 古い方法</span>
<span class="c1">// 要素の置換</span>
<span class="kd">const</span> <span class="nx">oldElement</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">.old</span><span class="dl">"</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">newElement</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="dl">"</span><span class="s2">div</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">newElement</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">新しい要素</span><span class="dl">"</span><span class="p">;</span>
<span class="nx">oldElement</span><span class="p">.</span><span class="nx">replaceWith</span><span class="p">(</span><span class="nx">newElement</span><span class="p">);</span>
</code></pre></div></div>
<h2 id="イベント処理">イベント処理</h2>
<h3 id="イベントリスナーの追加">イベントリスナーの追加</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 基本的なイベントリスナー</span>
<span class="kd">const</span> <span class="nx">button</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#myButton</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ボタンがクリックされました</span><span class="dl">"</span><span class="p">);</span>
<span class="p">});</span>
<span class="c1">// アロー関数を使用</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ボタンがクリックされました</span><span class="dl">"</span><span class="p">);</span>
<span class="p">});</span>
<span class="c1">// 名前付き関数を使用</span>
<span class="kd">function</span> <span class="nx">handleClick</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ボタンがクリックされました</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="nx">handleClick</span><span class="p">);</span>
<span class="c1">// イベントオブジェクトの使用</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">イベントタイプ:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">event</span><span class="p">.</span><span class="nx">type</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ターゲット要素:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">event</span><span class="p">.</span><span class="nx">target</span><span class="p">);</span>
<span class="nx">event</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span> <span class="c1">// デフォルト動作を阻止</span>
<span class="p">});</span>
<span class="c1">// 一度だけ実行するイベント</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="nx">handleClick</span><span class="p">,</span> <span class="p">{</span> <span class="na">once</span><span class="p">:</span> <span class="kc">true</span> <span class="p">});</span>
<span class="c1">// イベントリスナーの削除</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">removeEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="nx">handleClick</span><span class="p">);</span>
</code></pre></div></div>
<h3 id="よく使用するイベント">よく使用するイベント</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// マウスイベント</span>
<span class="nx">element</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">クリック</span><span class="dl">"</span><span class="p">));</span>
<span class="nx">element</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">dblclick</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ダブルクリック</span><span class="dl">"</span><span class="p">));</span>
<span class="nx">element</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">mousedown</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">マウスボタン押下</span><span class="dl">"</span><span class="p">));</span>
<span class="nx">element</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">mouseup</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">マウスボタン離上</span><span class="dl">"</span><span class="p">));</span>
<span class="nx">element</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">mouseover</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">マウスオーバー</span><span class="dl">"</span><span class="p">));</span>
<span class="nx">element</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">mouseout</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">マウスアウト</span><span class="dl">"</span><span class="p">));</span>
<span class="nx">element</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">mousemove</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`マウス位置: (</span><span class="p">${</span><span class="nx">e</span><span class="p">.</span><span class="nx">clientX</span><span class="p">}</span><span class="s2">, </span><span class="p">${</span><span class="nx">e</span><span class="p">.</span><span class="nx">clientY</span><span class="p">}</span><span class="s2">)`</span><span class="p">);</span>
<span class="p">});</span>
<span class="c1">// キーボードイベント</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">keydown</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`キー押下: </span><span class="p">${</span><span class="nx">e</span><span class="p">.</span><span class="nx">key</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">key</span> <span class="o">===</span> <span class="dl">"</span><span class="s2">Enter</span><span class="dl">"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">Enterキーが押されました</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">keyup</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`キー離上: </span><span class="p">${</span><span class="nx">e</span><span class="p">.</span><span class="nx">key</span><span class="p">}</span><span class="s2">`</span><span class="p">));</span>
<span class="c1">// フォームイベント</span>
<span class="kd">const</span> <span class="nx">form</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#myForm</span><span class="dl">"</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">input</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#myInput</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">form</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">submit</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span> <span class="c1">// フォーム送信を阻止</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">フォーム送信</span><span class="dl">"</span><span class="p">);</span>
<span class="p">});</span>
<span class="nx">input</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">input</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`入力値: </span><span class="p">${</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="p">});</span>
<span class="nx">input</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">focus</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">フォーカス</span><span class="dl">"</span><span class="p">));</span>
<span class="nx">input</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">blur</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">フォーカス失う</span><span class="dl">"</span><span class="p">));</span>
<span class="c1">// ウィンドウイベント</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">load</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ページ読み込み完了</span><span class="dl">"</span><span class="p">));</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">resize</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`ウィンドウサイズ: </span><span class="p">${</span><span class="nb">window</span><span class="p">.</span><span class="nx">innerWidth</span><span class="p">}</span><span class="s2">x</span><span class="p">${</span><span class="nb">window</span><span class="p">.</span><span class="nx">innerHeight</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="p">});</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">scroll</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`スクロール位置: </span><span class="p">${</span><span class="nb">window</span><span class="p">.</span><span class="nx">scrollY</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="p">});</span>
<span class="c1">// DOMコンテンツ読み込み完了(推奨)</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">DOMContentLoaded</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">DOM読み込み完了</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// ここに初期化コードを記述</span>
<span class="p">});</span>
</code></pre></div></div>
<h3 id="イベント委譲">イベント委譲</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 動的に追加される要素に対するイベント処理</span>
<span class="kd">const</span> <span class="nx">container</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#container</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// 子要素(ボタン)に対するクリックイベントを親要素で処理</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">matches</span><span class="p">(</span><span class="dl">"</span><span class="s2">button</span><span class="dl">"</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ボタンがクリックされました:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">textContent</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="c1">// 新しいボタンを動的に追加</span>
<span class="kd">function</span> <span class="nx">addButton</span><span class="p">(</span><span class="nx">text</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">button</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="dl">"</span><span class="s2">button</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="nx">text</span><span class="p">;</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">button</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">addButton</span><span class="p">(</span><span class="dl">"</span><span class="s2">新しいボタン1</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">addButton</span><span class="p">(</span><span class="dl">"</span><span class="s2">新しいボタン2</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// これらのボタンも自動的にイベントが適用される</span>
</code></pre></div></div>
<h2 id="非同期処理">非同期処理</h2>
<h3 id="promise">Promise</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// Promiseの基本</span>
<span class="kd">const</span> <span class="nx">myPromise</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Promise</span><span class="p">((</span><span class="nx">resolve</span><span class="p">,</span> <span class="nx">reject</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="c1">// 非同期処理のシミュレーション</span>
<span class="nx">setTimeout</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">success</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span> <span class="o">></span> <span class="mf">0.5</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">success</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">resolve</span><span class="p">(</span><span class="dl">"</span><span class="s2">成功しました!</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">reject</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラーが発生しました</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">},</span> <span class="mi">1000</span><span class="p">);</span>
<span class="p">});</span>
<span class="c1">// Promiseの使用</span>
<span class="nx">myPromise</span>
<span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="nx">result</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">成功:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">result</span><span class="p">);</span>
<span class="p">})</span>
<span class="p">.</span><span class="k">catch</span><span class="p">(</span><span class="nx">error</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
<span class="p">})</span>
<span class="p">.</span><span class="k">finally</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">処理完了</span><span class="dl">"</span><span class="p">);</span>
<span class="p">});</span>
<span class="c1">// Promiseチェーン</span>
<span class="kd">function</span> <span class="nx">fetchUser</span><span class="p">(</span><span class="nx">id</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="k">new</span> <span class="nb">Promise</span><span class="p">(</span><span class="nx">resolve</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">setTimeout</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">resolve</span><span class="p">({</span> <span class="nx">id</span><span class="p">,</span> <span class="na">name</span><span class="p">:</span> <span class="s2">`ユーザー</span><span class="p">${</span><span class="nx">id</span><span class="p">}</span><span class="s2">`</span> <span class="p">});</span>
<span class="p">},</span> <span class="mi">500</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">fetchUserPosts</span><span class="p">(</span><span class="nx">userId</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="k">new</span> <span class="nb">Promise</span><span class="p">(</span><span class="nx">resolve</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">setTimeout</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">resolve</span><span class="p">([</span>
<span class="p">{</span> <span class="na">id</span><span class="p">:</span> <span class="mi">1</span><span class="p">,</span> <span class="na">title</span><span class="p">:</span> <span class="dl">"</span><span class="s2">投稿1</span><span class="dl">"</span><span class="p">,</span> <span class="nx">userId</span> <span class="p">},</span>
<span class="p">{</span> <span class="na">id</span><span class="p">:</span> <span class="mi">2</span><span class="p">,</span> <span class="na">title</span><span class="p">:</span> <span class="dl">"</span><span class="s2">投稿2</span><span class="dl">"</span><span class="p">,</span> <span class="nx">userId</span> <span class="p">}</span>
<span class="p">]);</span>
<span class="p">},</span> <span class="mi">500</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="c1">// チェーンの実行</span>
<span class="nx">fetchUser</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span>
<span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="nx">user</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ユーザー取得:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">user</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">fetchUserPosts</span><span class="p">(</span><span class="nx">user</span><span class="p">.</span><span class="nx">id</span><span class="p">);</span>
<span class="p">})</span>
<span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="nx">posts</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">投稿取得:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">posts</span><span class="p">);</span>
<span class="p">})</span>
<span class="p">.</span><span class="k">catch</span><span class="p">(</span><span class="nx">error</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
<span class="p">});</span>
</code></pre></div></div>
<h3 id="asyncawait">async/await</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// async/awaitを使用した非同期処理</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">getUserData</span><span class="p">(</span><span class="nx">id</span><span class="p">)</span> <span class="p">{</span>
<span class="k">try</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">user</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">fetchUser</span><span class="p">(</span><span class="nx">id</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ユーザー取得:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">user</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">posts</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">fetchUserPosts</span><span class="p">(</span><span class="nx">user</span><span class="p">.</span><span class="nx">id</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">投稿取得:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">posts</span><span class="p">);</span>
<span class="k">return</span> <span class="p">{</span> <span class="nx">user</span><span class="p">,</span> <span class="nx">posts</span> <span class="p">};</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
<span class="k">throw</span> <span class="nx">error</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// async関数の呼び出し</span>
<span class="nx">getUserData</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span>
<span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="nx">data</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">完了:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">data</span><span class="p">))</span>
<span class="p">.</span><span class="k">catch</span><span class="p">(</span><span class="nx">error</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">処理失敗:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">));</span>
<span class="c1">// 複数の非同期処理を並行実行</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">fetchMultipleUsers</span><span class="p">()</span> <span class="p">{</span>
<span class="k">try</span> <span class="p">{</span>
<span class="c1">// 並行実行(高速)</span>
<span class="kd">const</span> <span class="p">[</span><span class="nx">user1</span><span class="p">,</span> <span class="nx">user2</span><span class="p">,</span> <span class="nx">user3</span><span class="p">]</span> <span class="o">=</span> <span class="k">await</span> <span class="nb">Promise</span><span class="p">.</span><span class="nx">all</span><span class="p">([</span>
<span class="nx">fetchUser</span><span class="p">(</span><span class="mi">1</span><span class="p">),</span>
<span class="nx">fetchUser</span><span class="p">(</span><span class="mi">2</span><span class="p">),</span>
<span class="nx">fetchUser</span><span class="p">(</span><span class="mi">3</span><span class="p">)</span>
<span class="p">]);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">全ユーザー取得完了:</span><span class="dl">"</span><span class="p">,</span> <span class="p">{</span> <span class="nx">user1</span><span class="p">,</span> <span class="nx">user2</span><span class="p">,</span> <span class="nx">user3</span> <span class="p">});</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">いずれかでエラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// Promise.allSettled(エラーがあっても全て実行)</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">fetchWithErrors</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">results</span> <span class="o">=</span> <span class="k">await</span> <span class="nb">Promise</span><span class="p">.</span><span class="nx">allSettled</span><span class="p">([</span>
<span class="nx">fetchUser</span><span class="p">(</span><span class="mi">1</span><span class="p">),</span>
<span class="nb">Promise</span><span class="p">.</span><span class="nx">reject</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラーのテスト</span><span class="dl">"</span><span class="p">),</span>
<span class="nx">fetchUser</span><span class="p">(</span><span class="mi">3</span><span class="p">)</span>
<span class="p">]);</span>
<span class="nx">results</span><span class="p">.</span><span class="nx">forEach</span><span class="p">((</span><span class="nx">result</span><span class="p">,</span> <span class="nx">index</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">result</span><span class="p">.</span><span class="nx">status</span> <span class="o">===</span> <span class="dl">"</span><span class="s2">fulfilled</span><span class="dl">"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`結果</span><span class="p">${</span><span class="nx">index</span><span class="p">}</span><span class="s2">:`</span><span class="p">,</span> <span class="nx">result</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`エラー</span><span class="p">${</span><span class="nx">index</span><span class="p">}</span><span class="s2">:`</span><span class="p">,</span> <span class="nx">result</span><span class="p">.</span><span class="nx">reason</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="p">}</span>
</code></pre></div></div>
<h3 id="fetch-api">Fetch API</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 基本的なGET リクエスト</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">fetchData</span><span class="p">()</span> <span class="p">{</span>
<span class="k">try</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">response</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">fetch</span><span class="p">(</span><span class="dl">"</span><span class="s2">https://jsonplaceholder.typicode.com/posts/1</span><span class="dl">"</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">response</span><span class="p">.</span><span class="nx">ok</span><span class="p">)</span> <span class="p">{</span>
<span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="s2">`HTTP error! status: </span><span class="p">${</span><span class="nx">response</span><span class="p">.</span><span class="nx">status</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="p">}</span>
<span class="kd">const</span> <span class="nx">data</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">response</span><span class="p">.</span><span class="nx">json</span><span class="p">();</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">取得データ:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">data</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">data</span><span class="p">;</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">取得エラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// POST リクエスト</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">createPost</span><span class="p">(</span><span class="nx">postData</span><span class="p">)</span> <span class="p">{</span>
<span class="k">try</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">response</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">fetch</span><span class="p">(</span><span class="dl">"</span><span class="s2">https://jsonplaceholder.typicode.com/posts</span><span class="dl">"</span><span class="p">,</span> <span class="p">{</span>
<span class="na">method</span><span class="p">:</span> <span class="dl">"</span><span class="s2">POST</span><span class="dl">"</span><span class="p">,</span>
<span class="na">headers</span><span class="p">:</span> <span class="p">{</span>
<span class="dl">"</span><span class="s2">Content-Type</span><span class="dl">"</span><span class="p">:</span> <span class="dl">"</span><span class="s2">application/json</span><span class="dl">"</span><span class="p">,</span>
<span class="p">},</span>
<span class="na">body</span><span class="p">:</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">postData</span><span class="p">)</span>
<span class="p">});</span>
<span class="kd">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">response</span><span class="p">.</span><span class="nx">json</span><span class="p">();</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">作成結果:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">result</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">result</span><span class="p">;</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">作成エラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// 使用例</span>
<span class="nx">createPost</span><span class="p">({</span>
<span class="na">title</span><span class="p">:</span> <span class="dl">"</span><span class="s2">新しい投稿</span><span class="dl">"</span><span class="p">,</span>
<span class="na">body</span><span class="p">:</span> <span class="dl">"</span><span class="s2">投稿内容</span><span class="dl">"</span><span class="p">,</span>
<span class="na">userId</span><span class="p">:</span> <span class="mi">1</span>
<span class="p">});</span>
<span class="c1">// ファイルアップロード</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">uploadFile</span><span class="p">(</span><span class="nx">file</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">formData</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">FormData</span><span class="p">();</span>
<span class="nx">formData</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="dl">"</span><span class="s2">file</span><span class="dl">"</span><span class="p">,</span> <span class="nx">file</span><span class="p">);</span>
<span class="k">try</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">response</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">fetch</span><span class="p">(</span><span class="dl">"</span><span class="s2">/upload</span><span class="dl">"</span><span class="p">,</span> <span class="p">{</span>
<span class="na">method</span><span class="p">:</span> <span class="dl">"</span><span class="s2">POST</span><span class="dl">"</span><span class="p">,</span>
<span class="na">body</span><span class="p">:</span> <span class="nx">formData</span>
<span class="p">});</span>
<span class="kd">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">response</span><span class="p">.</span><span class="nx">json</span><span class="p">();</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">アップロード完了:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">result</span><span class="p">);</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">アップロードエラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// AbortController でリクエストをキャンセル</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">cancellableRequest</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">controller</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">AbortController</span><span class="p">();</span>
<span class="c1">// 5秒後にキャンセル</span>
<span class="nx">setTimeout</span><span class="p">(()</span> <span class="o">=></span> <span class="nx">controller</span><span class="p">.</span><span class="nx">abort</span><span class="p">(),</span> <span class="mi">5000</span><span class="p">);</span>
<span class="k">try</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">response</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">fetch</span><span class="p">(</span><span class="dl">"</span><span class="s2">https://httpbin.org/delay/10</span><span class="dl">"</span><span class="p">,</span> <span class="p">{</span>
<span class="na">signal</span><span class="p">:</span> <span class="nx">controller</span><span class="p">.</span><span class="nx">signal</span>
<span class="p">});</span>
<span class="kd">const</span> <span class="nx">data</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">response</span><span class="p">.</span><span class="nx">json</span><span class="p">();</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">データ:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">data</span><span class="p">);</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">error</span><span class="p">.</span><span class="nx">name</span> <span class="o">===</span> <span class="dl">"</span><span class="s2">AbortError</span><span class="dl">"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">リクエストがキャンセルされました</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>
<h2 id="モダンjavascriptes6">モダンJavaScript(ES6+)</h2>
<h3 id="分割代入">分割代入</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 配列の分割代入</span>
<span class="kd">const</span> <span class="nx">colors</span> <span class="o">=</span> <span class="p">[</span><span class="dl">"</span><span class="s2">red</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">green</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">blue</span><span class="dl">"</span><span class="p">];</span>
<span class="kd">const</span> <span class="p">[</span><span class="nx">first</span><span class="p">,</span> <span class="nx">second</span><span class="p">,</span> <span class="nx">third</span><span class="p">]</span> <span class="o">=</span> <span class="nx">colors</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">first</span><span class="p">);</span> <span class="c1">// "red"</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">second</span><span class="p">);</span> <span class="c1">// "green"</span>
<span class="c1">// デフォルト値</span>
<span class="kd">const</span> <span class="p">[</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">,</span> <span class="nx">c</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">yellow</span><span class="dl">"</span><span class="p">]</span> <span class="o">=</span> <span class="p">[</span><span class="dl">"</span><span class="s2">red</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">green</span><span class="dl">"</span><span class="p">];</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">c</span><span class="p">);</span> <span class="c1">// "yellow"</span>
<span class="c1">// 値の交換</span>
<span class="kd">let</span> <span class="nx">x</span> <span class="o">=</span> <span class="mi">1</span><span class="p">,</span> <span class="nx">y</span> <span class="o">=</span> <span class="mi">2</span><span class="p">;</span>
<span class="p">[</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">]</span> <span class="o">=</span> <span class="p">[</span><span class="nx">y</span><span class="p">,</span> <span class="nx">x</span><span class="p">];</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">);</span> <span class="c1">// 2, 1</span>
<span class="c1">// オブジェクトの分割代入</span>
<span class="kd">const</span> <span class="nx">person</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">name</span><span class="p">:</span> <span class="dl">"</span><span class="s2">田中太郎</span><span class="dl">"</span><span class="p">,</span>
<span class="na">age</span><span class="p">:</span> <span class="mi">30</span><span class="p">,</span>
<span class="na">city</span><span class="p">:</span> <span class="dl">"</span><span class="s2">東京</span><span class="dl">"</span>
<span class="p">};</span>
<span class="kd">const</span> <span class="p">{</span> <span class="nx">name</span><span class="p">,</span> <span class="nx">age</span><span class="p">,</span> <span class="nx">city</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">person</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">name</span><span class="p">);</span> <span class="c1">// "田中太郎"</span>
<span class="c1">// プロパティ名を変更</span>
<span class="kd">const</span> <span class="p">{</span> <span class="na">name</span><span class="p">:</span> <span class="nx">fullName</span><span class="p">,</span> <span class="na">age</span><span class="p">:</span> <span class="nx">years</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">person</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">fullName</span><span class="p">);</span> <span class="c1">// "田中太郎"</span>
<span class="c1">// ネストした分割代入</span>
<span class="kd">const</span> <span class="nx">user</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">id</span><span class="p">:</span> <span class="mi">1</span><span class="p">,</span>
<span class="na">info</span><span class="p">:</span> <span class="p">{</span>
<span class="na">name</span><span class="p">:</span> <span class="dl">"</span><span class="s2">太郎</span><span class="dl">"</span><span class="p">,</span>
<span class="na">contact</span><span class="p">:</span> <span class="p">{</span>
<span class="na">email</span><span class="p">:</span> <span class="dl">"</span><span class="s2">taro@example.com</span><span class="dl">"</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="kd">const</span> <span class="p">{</span> <span class="na">info</span><span class="p">:</span> <span class="p">{</span> <span class="na">name</span><span class="p">:</span> <span class="nx">userName</span><span class="p">,</span> <span class="na">contact</span><span class="p">:</span> <span class="p">{</span> <span class="nx">email</span> <span class="p">}</span> <span class="p">}</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">user</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">userName</span><span class="p">);</span> <span class="c1">// "太郎"</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">email</span><span class="p">);</span> <span class="c1">// "taro@example.com"</span>
<span class="c1">// 関数の引数での分割代入</span>
<span class="kd">function</span> <span class="nx">greetUser</span><span class="p">({</span> <span class="nx">name</span><span class="p">,</span> <span class="nx">age</span> <span class="o">=</span> <span class="mi">0</span> <span class="p">})</span> <span class="p">{</span>
<span class="k">return</span> <span class="s2">`こんにちは、</span><span class="p">${</span><span class="nx">name</span><span class="p">}</span><span class="s2">さん(</span><span class="p">${</span><span class="nx">age</span><span class="p">}</span><span class="s2">歳)`</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">greetUser</span><span class="p">({</span> <span class="na">name</span><span class="p">:</span> <span class="dl">"</span><span class="s2">花子</span><span class="dl">"</span><span class="p">,</span> <span class="na">age</span><span class="p">:</span> <span class="mi">25</span> <span class="p">}));</span> <span class="c1">// "こんにちは、花子さん(25歳)"</span>
</code></pre></div></div>
<h3 id="モジュール">モジュール</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// math.js(エクスポート)</span>
<span class="k">export</span> <span class="kd">const</span> <span class="nx">PI</span> <span class="o">=</span> <span class="mf">3.14159</span><span class="p">;</span>
<span class="k">export</span> <span class="kd">function</span> <span class="nx">add</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">a</span> <span class="o">+</span> <span class="nx">b</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">export</span> <span class="kd">function</span> <span class="nx">multiply</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">a</span> <span class="o">*</span> <span class="nx">b</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// デフォルトエクスポート</span>
<span class="k">export</span> <span class="k">default</span> <span class="kd">function</span> <span class="nx">subtract</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">a</span> <span class="o">-</span> <span class="nx">b</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// main.js(インポート)</span>
<span class="k">import</span> <span class="nx">subtract</span><span class="p">,</span> <span class="p">{</span> <span class="nx">PI</span><span class="p">,</span> <span class="nx">add</span><span class="p">,</span> <span class="nx">multiply</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">./math.js</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">PI</span><span class="p">);</span> <span class="c1">// 3.14159</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">add</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">));</span> <span class="c1">// 5</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">multiply</span><span class="p">(</span><span class="mi">4</span><span class="p">,</span> <span class="mi">5</span><span class="p">));</span> <span class="c1">// 20</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">subtract</span><span class="p">(</span><span class="mi">10</span><span class="p">,</span> <span class="mi">3</span><span class="p">));</span> <span class="c1">// 7</span>
<span class="c1">// 名前を変更してインポート</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">add</span> <span class="k">as</span> <span class="nx">sum</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">./math.js</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">sum</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">));</span> <span class="c1">// 3</span>
<span class="c1">// 全てインポート</span>
<span class="k">import</span> <span class="o">*</span> <span class="k">as</span> <span class="nx">MathUtils</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">./math.js</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">MathUtils</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">));</span> <span class="c1">// 3</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">MathUtils</span><span class="p">.</span><span class="nx">PI</span><span class="p">);</span> <span class="c1">// 3.14159</span>
<span class="c1">// 動的インポート(非同期)</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">loadMathModule</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">mathModule</span> <span class="o">=</span> <span class="k">await</span> <span class="k">import</span><span class="p">(</span><span class="dl">'</span><span class="s1">./math.js</span><span class="dl">'</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">mathModule</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">));</span> <span class="c1">// 3</span>
<span class="p">}</span>
</code></pre></div></div>
<h3 id="クラス">クラス</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// ES6 クラス</span>
<span class="kd">class</span> <span class="nx">Person</span> <span class="p">{</span>
<span class="c1">// コンストラクタ</span>
<span class="kd">constructor</span><span class="p">(</span><span class="nx">name</span><span class="p">,</span> <span class="nx">age</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">name</span> <span class="o">=</span> <span class="nx">name</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">age</span> <span class="o">=</span> <span class="nx">age</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// メソッド</span>
<span class="nx">greet</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="s2">`こんにちは、私は</span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">name</span><span class="p">}</span><span class="s2">です`</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// ゲッター</span>
<span class="kd">get</span> <span class="nx">info</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="s2">`</span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">name</span><span class="p">}</span><span class="s2">(</span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">age</span><span class="p">}</span><span class="s2">歳)`</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// セッター</span>
<span class="kd">set</span> <span class="nx">age</span><span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">value</span> <span class="o"><</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
<span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="dl">"</span><span class="s2">年齢は0以上である必要があります</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">_age</span> <span class="o">=</span> <span class="nx">value</span><span class="p">;</span>
<span class="p">}</span>
<span class="kd">get</span> <span class="nx">age</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">_age</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// 静的メソッド</span>
<span class="kd">static</span> <span class="nx">createAdult</span><span class="p">(</span><span class="nx">name</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">(</span><span class="nx">name</span><span class="p">,</span> <span class="mi">20</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// クラスの使用</span>
<span class="kd">const</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">(</span><span class="dl">"</span><span class="s2">太郎</span><span class="dl">"</span><span class="p">,</span> <span class="mi">25</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">person</span><span class="p">.</span><span class="nx">greet</span><span class="p">());</span> <span class="c1">// "こんにちは、私は太郎です"</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">person</span><span class="p">.</span><span class="nx">info</span><span class="p">);</span> <span class="c1">// "太郎(25歳)"</span>
<span class="c1">// 静的メソッドの使用</span>
<span class="kd">const</span> <span class="nx">adult</span> <span class="o">=</span> <span class="nx">Person</span><span class="p">.</span><span class="nx">createAdult</span><span class="p">(</span><span class="dl">"</span><span class="s2">花子</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// 継承</span>
<span class="kd">class</span> <span class="nx">Student</span> <span class="kd">extends</span> <span class="nx">Person</span> <span class="p">{</span>
<span class="kd">constructor</span><span class="p">(</span><span class="nx">name</span><span class="p">,</span> <span class="nx">age</span><span class="p">,</span> <span class="nx">school</span><span class="p">)</span> <span class="p">{</span>
<span class="k">super</span><span class="p">(</span><span class="nx">name</span><span class="p">,</span> <span class="nx">age</span><span class="p">);</span> <span class="c1">// 親クラスのコンストラクタを呼び出し</span>
<span class="k">this</span><span class="p">.</span><span class="nx">school</span> <span class="o">=</span> <span class="nx">school</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">greet</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="s2">`</span><span class="p">${</span><span class="k">super</span><span class="p">.</span><span class="nx">greet</span><span class="p">()}</span><span class="s2">、</span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">school</span><span class="p">}</span><span class="s2">の学生です`</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">study</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="s2">`</span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">name</span><span class="p">}</span><span class="s2">は勉強しています`</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">const</span> <span class="nx">student</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Student</span><span class="p">(</span><span class="dl">"</span><span class="s2">次郎</span><span class="dl">"</span><span class="p">,</span> <span class="mi">18</span><span class="p">,</span> <span class="dl">"</span><span class="s2">東京大学</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">student</span><span class="p">.</span><span class="nx">greet</span><span class="p">());</span> <span class="c1">// "こんにちは、私は次郎です、東京大学の学生です"</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">student</span><span class="p">.</span><span class="nx">study</span><span class="p">());</span> <span class="c1">// "次郎は勉強しています"</span>
<span class="c1">// プライベートフィールド(ES2022+)</span>
<span class="kd">class</span> <span class="nx">BankAccount</span> <span class="p">{</span>
<span class="err">#</span><span class="nx">balance</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="c1">// プライベートフィールド</span>
<span class="kd">constructor</span><span class="p">(</span><span class="nx">initialBalance</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="err">#</span><span class="nx">balance</span> <span class="o">=</span> <span class="nx">initialBalance</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">deposit</span><span class="p">(</span><span class="nx">amount</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="err">#</span><span class="nx">balance</span> <span class="o">+=</span> <span class="nx">amount</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">getBalance</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="err">#</span><span class="nx">balance</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// プライベートメソッド</span>
<span class="err">#</span><span class="nx">calculateInterest</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="err">#</span><span class="nx">balance</span> <span class="o">*</span> <span class="mf">0.01</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">const</span> <span class="nx">account</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">BankAccount</span><span class="p">(</span><span class="mi">1000</span><span class="p">);</span>
<span class="nx">account</span><span class="p">.</span><span class="nx">deposit</span><span class="p">(</span><span class="mi">500</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">account</span><span class="p">.</span><span class="nx">getBalance</span><span class="p">());</span> <span class="c1">// 1500</span>
<span class="c1">// console.log(account.#balance); // エラー: プライベートフィールドにはアクセス不可</span>
</code></pre></div></div>
<h2 id="エラーハンドリング">エラーハンドリング</h2>
<h3 id="try-catch文">try-catch文</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 基本的なエラーハンドリング</span>
<span class="k">try</span> <span class="p">{</span>
<span class="c1">// エラーが発生する可能性のあるコード</span>
<span class="kd">let</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">riskyOperation</span><span class="p">();</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">成功:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">result</span><span class="p">);</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="c1">// エラーが発生した場合の処理</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラーが発生しました:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
<span class="p">}</span> <span class="k">finally</span> <span class="p">{</span>
<span class="c1">// 必ず実行される処理</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">処理完了</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="c1">// 異なるタイプのエラーの処理</span>
<span class="kd">function</span> <span class="nx">parseJSON</span><span class="p">(</span><span class="nx">jsonString</span><span class="p">)</span> <span class="p">{</span>
<span class="k">try</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="nx">jsonString</span><span class="p">);</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">error</span> <span class="k">instanceof</span> <span class="nx">SyntaxError</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">JSON形式が正しくありません:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">予期しないエラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">return</span> <span class="kc">null</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// カスタムエラー</span>
<span class="kd">class</span> <span class="nx">ValidationError</span> <span class="kd">extends</span> <span class="nb">Error</span> <span class="p">{</span>
<span class="kd">constructor</span><span class="p">(</span><span class="nx">message</span><span class="p">,</span> <span class="nx">field</span><span class="p">)</span> <span class="p">{</span>
<span class="k">super</span><span class="p">(</span><span class="nx">message</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">name</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">ValidationError</span><span class="dl">"</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">field</span> <span class="o">=</span> <span class="nx">field</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">validateEmail</span><span class="p">(</span><span class="nx">email</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">email</span><span class="p">.</span><span class="nx">includes</span><span class="p">(</span><span class="dl">"</span><span class="s2">@</span><span class="dl">"</span><span class="p">))</span> <span class="p">{</span>
<span class="k">throw</span> <span class="k">new</span> <span class="nx">ValidationError</span><span class="p">(</span><span class="dl">"</span><span class="s2">有効なメールアドレスではありません</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">email</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// カスタムエラーの使用</span>
<span class="k">try</span> <span class="p">{</span>
<span class="nx">validateEmail</span><span class="p">(</span><span class="dl">"</span><span class="s2">invalid-email</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">error</span> <span class="k">instanceof</span> <span class="nx">ValidationError</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`検証エラー(</span><span class="p">${</span><span class="nx">error</span><span class="p">.</span><span class="nx">field</span><span class="p">}</span><span class="s2">): </span><span class="p">${</span><span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">予期しないエラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// async/await でのエラーハンドリング</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">fetchUserData</span><span class="p">(</span><span class="nx">id</span><span class="p">)</span> <span class="p">{</span>
<span class="k">try</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">response</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">fetch</span><span class="p">(</span><span class="s2">`/api/users/</span><span class="p">${</span><span class="nx">id</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">response</span><span class="p">.</span><span class="nx">ok</span><span class="p">)</span> <span class="p">{</span>
<span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="s2">`ユーザー取得失敗: </span><span class="p">${</span><span class="nx">response</span><span class="p">.</span><span class="nx">status</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="p">}</span>
<span class="kd">const</span> <span class="nx">userData</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">response</span><span class="p">.</span><span class="nx">json</span><span class="p">();</span>
<span class="k">return</span> <span class="nx">userData</span><span class="p">;</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ユーザーデータ取得エラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
<span class="k">throw</span> <span class="nx">error</span><span class="p">;</span> <span class="c1">// エラーを再度投げる</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// エラーのロギング</span>
<span class="kd">function</span> <span class="nx">logError</span><span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="dl">"</span><span class="s2">Error:</span><span class="dl">"</span><span class="p">,</span> <span class="p">{</span>
<span class="na">message</span><span class="p">:</span> <span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">,</span>
<span class="na">stack</span><span class="p">:</span> <span class="nx">error</span><span class="p">.</span><span class="nx">stack</span><span class="p">,</span>
<span class="na">timestamp</span><span class="p">:</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">().</span><span class="nx">toISOString</span><span class="p">()</span>
<span class="p">});</span>
<span class="p">}</span>
</code></pre></div></div>
<h2 id="ブラウザapi">ブラウザAPI</h2>
<h3 id="local-storage">Local Storage</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// データの保存</span>
<span class="nx">localStorage</span><span class="p">.</span><span class="nx">setItem</span><span class="p">(</span><span class="dl">"</span><span class="s2">username</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">田中太郎</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">localStorage</span><span class="p">.</span><span class="nx">setItem</span><span class="p">(</span><span class="dl">"</span><span class="s2">settings</span><span class="dl">"</span><span class="p">,</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">({</span>
<span class="na">theme</span><span class="p">:</span> <span class="dl">"</span><span class="s2">dark</span><span class="dl">"</span><span class="p">,</span>
<span class="na">language</span><span class="p">:</span> <span class="dl">"</span><span class="s2">ja</span><span class="dl">"</span>
<span class="p">}));</span>
<span class="c1">// データの取得</span>
<span class="kd">const</span> <span class="nx">username</span> <span class="o">=</span> <span class="nx">localStorage</span><span class="p">.</span><span class="nx">getItem</span><span class="p">(</span><span class="dl">"</span><span class="s2">username</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">username</span><span class="p">);</span> <span class="c1">// "田中太郎"</span>
<span class="kd">const</span> <span class="nx">settings</span> <span class="o">=</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="nx">localStorage</span><span class="p">.</span><span class="nx">getItem</span><span class="p">(</span><span class="dl">"</span><span class="s2">settings</span><span class="dl">"</span><span class="p">));</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">settings</span><span class="p">);</span> <span class="c1">// { theme: "dark", language: "ja" }</span>
<span class="c1">// データの削除</span>
<span class="nx">localStorage</span><span class="p">.</span><span class="nx">removeItem</span><span class="p">(</span><span class="dl">"</span><span class="s2">username</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// 全データの削除</span>
<span class="nx">localStorage</span><span class="p">.</span><span class="nx">clear</span><span class="p">();</span>
<span class="c1">// ストレージの変更を監視</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">storage</span><span class="dl">"</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ストレージが変更されました:</span><span class="dl">"</span><span class="p">,</span> <span class="p">{</span>
<span class="na">key</span><span class="p">:</span> <span class="nx">e</span><span class="p">.</span><span class="nx">key</span><span class="p">,</span>
<span class="na">oldValue</span><span class="p">:</span> <span class="nx">e</span><span class="p">.</span><span class="nx">oldValue</span><span class="p">,</span>
<span class="na">newValue</span><span class="p">:</span> <span class="nx">e</span><span class="p">.</span><span class="nx">newValue</span>
<span class="p">});</span>
<span class="p">});</span>
<span class="c1">// セッションストレージ(タブを閉じると削除される)</span>
<span class="nx">sessionStorage</span><span class="p">.</span><span class="nx">setItem</span><span class="p">(</span><span class="dl">"</span><span class="s2">temporary</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">一時的なデータ</span><span class="dl">"</span><span class="p">);</span>
</code></pre></div></div>
<h3 id="geolocation-api">Geolocation API</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 現在位置の取得</span>
<span class="k">if</span> <span class="p">(</span><span class="dl">"</span><span class="s2">geolocation</span><span class="dl">"</span> <span class="k">in</span> <span class="nb">navigator</span><span class="p">)</span> <span class="p">{</span>
<span class="nb">navigator</span><span class="p">.</span><span class="nx">geolocation</span><span class="p">.</span><span class="nx">getCurrentPosition</span><span class="p">(</span>
<span class="kd">function</span><span class="p">(</span><span class="nx">position</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">latitude</span> <span class="o">=</span> <span class="nx">position</span><span class="p">.</span><span class="nx">coords</span><span class="p">.</span><span class="nx">latitude</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">longitude</span> <span class="o">=</span> <span class="nx">position</span><span class="p">.</span><span class="nx">coords</span><span class="p">.</span><span class="nx">longitude</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`現在位置: </span><span class="p">${</span><span class="nx">latitude</span><span class="p">}</span><span class="s2">, </span><span class="p">${</span><span class="nx">longitude</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="p">},</span>
<span class="kd">function</span><span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">位置取得エラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
<span class="p">},</span>
<span class="p">{</span>
<span class="na">enableHighAccuracy</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> <span class="c1">// 高精度</span>
<span class="na">timeout</span><span class="p">:</span> <span class="mi">10000</span><span class="p">,</span> <span class="c1">// タイムアウト(10秒)</span>
<span class="na">maximumAge</span><span class="p">:</span> <span class="mi">60000</span> <span class="c1">// キャッシュ有効期間(1分)</span>
<span class="p">}</span>
<span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">Geolocation APIはサポートされていません</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="c1">// 位置の監視</span>
<span class="kd">const</span> <span class="nx">watchId</span> <span class="o">=</span> <span class="nb">navigator</span><span class="p">.</span><span class="nx">geolocation</span><span class="p">.</span><span class="nx">watchPosition</span><span class="p">(</span>
<span class="kd">function</span><span class="p">(</span><span class="nx">position</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">位置が変更されました:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">position</span><span class="p">.</span><span class="nx">coords</span><span class="p">);</span>
<span class="p">},</span>
<span class="kd">function</span><span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">監視エラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">);</span>
<span class="c1">// 監視の停止</span>
<span class="c1">// navigator.geolocation.clearWatch(watchId);</span>
</code></pre></div></div>
<h3 id="notification-api">Notification API</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 通知の許可を要求</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">requestNotificationPermission</span><span class="p">()</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="dl">"</span><span class="s2">Notification</span><span class="dl">"</span> <span class="k">in</span> <span class="nb">window</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">permission</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">Notification</span><span class="p">.</span><span class="nx">requestPermission</span><span class="p">();</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">通知許可:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">permission</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">permission</span> <span class="o">===</span> <span class="dl">"</span><span class="s2">granted</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// 通知の表示</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">showNotification</span><span class="p">(</span><span class="nx">title</span><span class="p">,</span> <span class="nx">options</span> <span class="o">=</span> <span class="p">{})</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">hasPermission</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">requestNotificationPermission</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">hasPermission</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">notification</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Notification</span><span class="p">(</span><span class="nx">title</span><span class="p">,</span> <span class="p">{</span>
<span class="na">body</span><span class="p">:</span> <span class="nx">options</span><span class="p">.</span><span class="nx">body</span> <span class="o">||</span> <span class="dl">""</span><span class="p">,</span>
<span class="na">icon</span><span class="p">:</span> <span class="nx">options</span><span class="p">.</span><span class="nx">icon</span> <span class="o">||</span> <span class="dl">"</span><span class="s2">/default-icon.png</span><span class="dl">"</span><span class="p">,</span>
<span class="na">tag</span><span class="p">:</span> <span class="nx">options</span><span class="p">.</span><span class="nx">tag</span> <span class="o">||</span> <span class="dl">"</span><span class="s2">default</span><span class="dl">"</span><span class="p">,</span>
<span class="p">...</span><span class="nx">options</span>
<span class="p">});</span>
<span class="nx">notification</span><span class="p">.</span><span class="nx">onclick</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">通知がクリックされました</span><span class="dl">"</span><span class="p">);</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">focus</span><span class="p">();</span>
<span class="k">this</span><span class="p">.</span><span class="nx">close</span><span class="p">();</span>
<span class="p">};</span>
<span class="c1">// 自動で閉じる</span>
<span class="nx">setTimeout</span><span class="p">(()</span> <span class="o">=></span> <span class="nx">notification</span><span class="p">.</span><span class="nx">close</span><span class="p">(),</span> <span class="mi">5000</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// 使用例</span>
<span class="nx">showNotification</span><span class="p">(</span><span class="dl">"</span><span class="s2">新しいメッセージ</span><span class="dl">"</span><span class="p">,</span> <span class="p">{</span>
<span class="na">body</span><span class="p">:</span> <span class="dl">"</span><span class="s2">太郎さんからメッセージが届きました</span><span class="dl">"</span><span class="p">,</span>
<span class="na">icon</span><span class="p">:</span> <span class="dl">"</span><span class="s2">/message-icon.png</span><span class="dl">"</span><span class="p">,</span>
<span class="na">tag</span><span class="p">:</span> <span class="dl">"</span><span class="s2">message</span><span class="dl">"</span>
<span class="p">});</span>
</code></pre></div></div>
<h2 id="実践的なコード例">実践的なコード例</h2>
<h3 id="フォームバリデーション">フォームバリデーション</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">class</span> <span class="nx">FormValidator</span> <span class="p">{</span>
<span class="kd">constructor</span><span class="p">(</span><span class="nx">form</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">form</span> <span class="o">=</span> <span class="nx">form</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">errors</span> <span class="o">=</span> <span class="p">{};</span>
<span class="k">this</span><span class="p">.</span><span class="nx">rules</span> <span class="o">=</span> <span class="p">{};</span>
<span class="k">this</span><span class="p">.</span><span class="nx">init</span><span class="p">();</span>
<span class="p">}</span>
<span class="nx">init</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">form</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">submit</span><span class="dl">"</span><span class="p">,</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
<span class="k">this</span><span class="p">.</span><span class="nx">validate</span><span class="p">();</span>
<span class="p">});</span>
<span class="c1">// リアルタイムバリデーション</span>
<span class="k">this</span><span class="p">.</span><span class="nx">form</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">input</span><span class="dl">"</span><span class="p">,</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">validateField</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="nx">addRule</span><span class="p">(</span><span class="nx">fieldName</span><span class="p">,</span> <span class="nx">rule</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">rules</span><span class="p">[</span><span class="nx">fieldName</span><span class="p">])</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">rules</span><span class="p">[</span><span class="nx">fieldName</span><span class="p">]</span> <span class="o">=</span> <span class="p">[];</span>
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">rules</span><span class="p">[</span><span class="nx">fieldName</span><span class="p">].</span><span class="nx">push</span><span class="p">(</span><span class="nx">rule</span><span class="p">);</span>
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">validateField</span><span class="p">(</span><span class="nx">field</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">rules</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">rules</span><span class="p">[</span><span class="nx">field</span><span class="p">.</span><span class="nx">name</span><span class="p">];</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">rules</span><span class="p">)</span> <span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">clearError</span><span class="p">(</span><span class="nx">field</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">const</span> <span class="nx">rule</span> <span class="k">of</span> <span class="nx">rules</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">rule</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="nx">field</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">result</span><span class="p">.</span><span class="nx">valid</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">addError</span><span class="p">(</span><span class="nx">field</span><span class="p">.</span><span class="nx">name</span><span class="p">,</span> <span class="nx">result</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">showError</span><span class="p">(</span><span class="nx">field</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span>
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">showSuccess</span><span class="p">(</span><span class="nx">field</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span>
<span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">validate</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">errors</span> <span class="o">=</span> <span class="p">{};</span>
<span class="kd">let</span> <span class="nx">isValid</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">fields</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">form</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="dl">"</span><span class="s2">[name]</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">fields</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">field</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">validateField</span><span class="p">(</span><span class="nx">field</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">isValid</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">isValid</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">onSuccess</span><span class="p">();</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">onError</span><span class="p">();</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">isValid</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">addError</span><span class="p">(</span><span class="nx">fieldName</span><span class="p">,</span> <span class="nx">message</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">errors</span><span class="p">[</span><span class="nx">fieldName</span><span class="p">])</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">errors</span><span class="p">[</span><span class="nx">fieldName</span><span class="p">]</span> <span class="o">=</span> <span class="p">[];</span>
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">errors</span><span class="p">[</span><span class="nx">fieldName</span><span class="p">].</span><span class="nx">push</span><span class="p">(</span><span class="nx">message</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">clearError</span><span class="p">(</span><span class="nx">fieldName</span><span class="p">)</span> <span class="p">{</span>
<span class="k">delete</span> <span class="k">this</span><span class="p">.</span><span class="nx">errors</span><span class="p">[</span><span class="nx">fieldName</span><span class="p">];</span>
<span class="k">this</span><span class="p">.</span><span class="nx">hideError</span><span class="p">(</span><span class="nx">fieldName</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">showError</span><span class="p">(</span><span class="nx">fieldName</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">field</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">form</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s2">`[name="</span><span class="p">${</span><span class="nx">fieldName</span><span class="p">}</span><span class="s2">"]`</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">errorContainer</span> <span class="o">=</span> <span class="nx">field</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">.error-message</span><span class="dl">"</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">errorContainer</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">errorContainer</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">errors</span><span class="p">[</span><span class="nx">fieldName</span><span class="p">][</span><span class="mi">0</span><span class="p">];</span>
<span class="nx">errorContainer</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">block</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">field</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="dl">"</span><span class="s2">error</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">field</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">remove</span><span class="p">(</span><span class="dl">"</span><span class="s2">success</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">hideError</span><span class="p">(</span><span class="nx">fieldName</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">field</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">form</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s2">`[name="</span><span class="p">${</span><span class="nx">fieldName</span><span class="p">}</span><span class="s2">"]`</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">errorContainer</span> <span class="o">=</span> <span class="nx">field</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">.error-message</span><span class="dl">"</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">errorContainer</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">errorContainer</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">none</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">field</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">remove</span><span class="p">(</span><span class="dl">"</span><span class="s2">error</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">showSuccess</span><span class="p">(</span><span class="nx">fieldName</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">field</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">form</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s2">`[name="</span><span class="p">${</span><span class="nx">fieldName</span><span class="p">}</span><span class="s2">"]`</span><span class="p">);</span>
<span class="nx">field</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="dl">"</span><span class="s2">success</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">field</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">remove</span><span class="p">(</span><span class="dl">"</span><span class="s2">error</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">onSuccess</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">フォームバリデーション成功</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// フォーム送信処理</span>
<span class="p">}</span>
<span class="nx">onError</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">フォームバリデーションエラー:</span><span class="dl">"</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">errors</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// バリデーションルール</span>
<span class="kd">const</span> <span class="nx">rules</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">required</span><span class="p">:</span> <span class="p">(</span><span class="nx">message</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">この項目は必須です</span><span class="dl">"</span><span class="p">)</span> <span class="o">=></span> <span class="p">({</span>
<span class="na">test</span><span class="p">:</span> <span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="o">=></span> <span class="p">({</span>
<span class="na">valid</span><span class="p">:</span> <span class="nx">value</span><span class="p">.</span><span class="nx">trim</span><span class="p">().</span><span class="nx">length</span> <span class="o">></span> <span class="mi">0</span><span class="p">,</span>
<span class="nx">message</span>
<span class="p">})</span>
<span class="p">}),</span>
<span class="na">email</span><span class="p">:</span> <span class="p">(</span><span class="nx">message</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">有効なメールアドレスを入力してください</span><span class="dl">"</span><span class="p">)</span> <span class="o">=></span> <span class="p">({</span>
<span class="na">test</span><span class="p">:</span> <span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="o">=></span> <span class="p">({</span>
<span class="na">valid</span><span class="p">:</span> <span class="sr">/^</span><span class="se">[^\s</span><span class="sr">@</span><span class="se">]</span><span class="sr">+@</span><span class="se">[^\s</span><span class="sr">@</span><span class="se">]</span><span class="sr">+</span><span class="se">\.[^\s</span><span class="sr">@</span><span class="se">]</span><span class="sr">+$/</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="nx">value</span><span class="p">),</span>
<span class="nx">message</span>
<span class="p">})</span>
<span class="p">}),</span>
<span class="na">minLength</span><span class="p">:</span> <span class="p">(</span><span class="nx">min</span><span class="p">,</span> <span class="nx">message</span><span class="p">)</span> <span class="o">=></span> <span class="p">({</span>
<span class="na">test</span><span class="p">:</span> <span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="o">=></span> <span class="p">({</span>
<span class="na">valid</span><span class="p">:</span> <span class="nx">value</span><span class="p">.</span><span class="nx">length</span> <span class="o">>=</span> <span class="nx">min</span><span class="p">,</span>
<span class="na">message</span><span class="p">:</span> <span class="nx">message</span> <span class="o">||</span> <span class="s2">`</span><span class="p">${</span><span class="nx">min</span><span class="p">}</span><span class="s2">文字以上で入力してください`</span>
<span class="p">})</span>
<span class="p">}),</span>
<span class="na">phone</span><span class="p">:</span> <span class="p">(</span><span class="nx">message</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">有効な電話番号を入力してください</span><span class="dl">"</span><span class="p">)</span> <span class="o">=></span> <span class="p">({</span>
<span class="na">test</span><span class="p">:</span> <span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="o">=></span> <span class="p">({</span>
<span class="na">valid</span><span class="p">:</span> <span class="sr">/^</span><span class="se">[\d</span><span class="sr">-</span><span class="se">]</span><span class="sr">+$/</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="nx">value</span><span class="p">),</span>
<span class="nx">message</span>
<span class="p">})</span>
<span class="p">})</span>
<span class="p">};</span>
<span class="c1">// 使用例</span>
<span class="kd">const</span> <span class="nx">form</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#contactForm</span><span class="dl">"</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">validator</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">FormValidator</span><span class="p">(</span><span class="nx">form</span><span class="p">);</span>
<span class="nx">validator</span>
<span class="p">.</span><span class="nx">addRule</span><span class="p">(</span><span class="dl">"</span><span class="s2">name</span><span class="dl">"</span><span class="p">,</span> <span class="nx">rules</span><span class="p">.</span><span class="nx">required</span><span class="p">())</span>
<span class="p">.</span><span class="nx">addRule</span><span class="p">(</span><span class="dl">"</span><span class="s2">email</span><span class="dl">"</span><span class="p">,</span> <span class="nx">rules</span><span class="p">.</span><span class="nx">required</span><span class="p">())</span>
<span class="p">.</span><span class="nx">addRule</span><span class="p">(</span><span class="dl">"</span><span class="s2">email</span><span class="dl">"</span><span class="p">,</span> <span class="nx">rules</span><span class="p">.</span><span class="nx">email</span><span class="p">())</span>
<span class="p">.</span><span class="nx">addRule</span><span class="p">(</span><span class="dl">"</span><span class="s2">phone</span><span class="dl">"</span><span class="p">,</span> <span class="nx">rules</span><span class="p">.</span><span class="nx">phone</span><span class="p">())</span>
<span class="p">.</span><span class="nx">addRule</span><span class="p">(</span><span class="dl">"</span><span class="s2">message</span><span class="dl">"</span><span class="p">,</span> <span class="nx">rules</span><span class="p">.</span><span class="nx">required</span><span class="p">())</span>
<span class="p">.</span><span class="nx">addRule</span><span class="p">(</span><span class="dl">"</span><span class="s2">message</span><span class="dl">"</span><span class="p">,</span> <span class="nx">rules</span><span class="p">.</span><span class="nx">minLength</span><span class="p">(</span><span class="mi">10</span><span class="p">));</span>
</code></pre></div></div>
<h3 id="シンプルなspasingle-page-application">シンプルなSPA(Single Page Application)</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">class</span> <span class="nx">SimpleRouter</span> <span class="p">{</span>
<span class="kd">constructor</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">routes</span> <span class="o">=</span> <span class="p">{};</span>
<span class="k">this</span><span class="p">.</span><span class="nx">currentRoute</span> <span class="o">=</span> <span class="dl">""</span><span class="p">;</span>
<span class="c1">// ブラウザの戻る/進むボタン対応</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">popstate</span><span class="dl">"</span><span class="p">,</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">handleRoute</span><span class="p">();</span>
<span class="p">});</span>
<span class="c1">// リンククリック時の処理</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">matches</span><span class="p">(</span><span class="dl">"</span><span class="s2">[data-route]</span><span class="dl">"</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
<span class="kd">const</span> <span class="nx">route</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">getAttribute</span><span class="p">(</span><span class="dl">"</span><span class="s2">data-route</span><span class="dl">"</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">navigate</span><span class="p">(</span><span class="nx">route</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="c1">// 初期ルート処理</span>
<span class="k">this</span><span class="p">.</span><span class="nx">handleRoute</span><span class="p">();</span>
<span class="p">}</span>
<span class="nx">addRoute</span><span class="p">(</span><span class="nx">path</span><span class="p">,</span> <span class="nx">handler</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">routes</span><span class="p">[</span><span class="nx">path</span><span class="p">]</span> <span class="o">=</span> <span class="nx">handler</span><span class="p">;</span>
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">navigate</span><span class="p">(</span><span class="nx">path</span><span class="p">)</span> <span class="p">{</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">history</span><span class="p">.</span><span class="nx">pushState</span><span class="p">({},</span> <span class="dl">""</span><span class="p">,</span> <span class="nx">path</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">handleRoute</span><span class="p">();</span>
<span class="p">}</span>
<span class="nx">handleRoute</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">path</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">pathname</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">currentRoute</span> <span class="o">=</span> <span class="nx">path</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">handler</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">routes</span><span class="p">[</span><span class="nx">path</span><span class="p">]</span> <span class="o">||</span> <span class="k">this</span><span class="p">.</span><span class="nx">routes</span><span class="p">[</span><span class="dl">"</span><span class="s2">*</span><span class="dl">"</span><span class="p">];</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">handler</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">handler</span><span class="p">();</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">show404</span><span class="p">();</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nx">show404</span><span class="p">()</span> <span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#app</span><span class="dl">"</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="s2">`
<h1>404 - ページが見つかりません</h1>
<p><a href="/" data-route="/">ホームに戻る</a></p>
`</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// ページコンポーネント</span>
<span class="kd">const</span> <span class="nx">pages</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">home</span><span class="p">:</span> <span class="p">()</span> <span class="o">=></span> <span class="s2">`
<h1>ホームページ</h1>
<nav>
<a href="/about" data-route="/about">会社概要</a> |
<a href="/contact" data-route="/contact">お問い合わせ</a>
</nav>
<p>ようこそ、私たちのサイトへ!</p>
`</span><span class="p">,</span>
<span class="na">about</span><span class="p">:</span> <span class="p">()</span> <span class="o">=></span> <span class="s2">`
<h1>会社概要</h1>
<nav>
<a href="/" data-route="/">ホーム</a> |
<a href="/contact" data-route="/contact">お問い合わせ</a>
</nav>
<p>私たちは革新的なソリューションを提供する会社です。</p>
`</span><span class="p">,</span>
<span class="na">contact</span><span class="p">:</span> <span class="p">()</span> <span class="o">=></span> <span class="s2">`
<h1>お問い合わせ</h1>
<nav>
<a href="/" data-route="/">ホーム</a> |
<a href="/about" data-route="/about">会社概要</a>
</nav>
<form id="contactForm">
<div>
<label>お名前: <input type="text" name="name" required></label>
</div>
<div>
<label>メール: <input type="email" name="email" required></label>
</div>
<div>
<label>メッセージ: <textarea name="message" required></textarea></label>
</div>
<button type="submit">送信</button>
</form>
`</span>
<span class="p">};</span>
<span class="c1">// ルーター初期化</span>
<span class="kd">const</span> <span class="nx">router</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">SimpleRouter</span><span class="p">();</span>
<span class="nx">router</span>
<span class="p">.</span><span class="nx">addRoute</span><span class="p">(</span><span class="dl">"</span><span class="s2">/</span><span class="dl">"</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#app</span><span class="dl">"</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">pages</span><span class="p">.</span><span class="nx">home</span><span class="p">();</span>
<span class="p">})</span>
<span class="p">.</span><span class="nx">addRoute</span><span class="p">(</span><span class="dl">"</span><span class="s2">/about</span><span class="dl">"</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#app</span><span class="dl">"</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">pages</span><span class="p">.</span><span class="nx">about</span><span class="p">();</span>
<span class="p">})</span>
<span class="p">.</span><span class="nx">addRoute</span><span class="p">(</span><span class="dl">"</span><span class="s2">/contact</span><span class="dl">"</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#app</span><span class="dl">"</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">pages</span><span class="p">.</span><span class="nx">contact</span><span class="p">();</span>
<span class="c1">// お問い合わせフォームのイベント設定</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#contactForm</span><span class="dl">"</span><span class="p">).</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">submit</span><span class="dl">"</span><span class="p">,</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
<span class="nx">alert</span><span class="p">(</span><span class="dl">"</span><span class="s2">お問い合わせありがとうございます!</span><span class="dl">"</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">});</span>
</code></pre></div></div>
<h2 id="デバッグとテスト">デバッグとテスト</h2>
<h3 id="デバッグ技法">デバッグ技法</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// コンソール出力</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">基本的なログ</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">info</span><span class="p">(</span><span class="dl">"</span><span class="s2">情報メッセージ</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">warn</span><span class="p">(</span><span class="dl">"</span><span class="s2">警告メッセージ</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラーメッセージ</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// オブジェクトの詳細表示</span>
<span class="kd">const</span> <span class="nx">user</span> <span class="o">=</span> <span class="p">{</span> <span class="na">name</span><span class="p">:</span> <span class="dl">"</span><span class="s2">太郎</span><span class="dl">"</span><span class="p">,</span> <span class="na">age</span><span class="p">:</span> <span class="mi">30</span> <span class="p">};</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">table</span><span class="p">(</span><span class="nx">user</span><span class="p">);</span> <span class="c1">// テーブル形式で表示</span>
<span class="c1">// 実行時間の測定</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">time</span><span class="p">(</span><span class="dl">"</span><span class="s2">処理時間</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// 時間のかかる処理</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o"><</span> <span class="mi">1000000</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="c1">// 何らかの処理</span>
<span class="p">}</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">timeEnd</span><span class="p">(</span><span class="dl">"</span><span class="s2">処理時間</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// グループ化</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">group</span><span class="p">(</span><span class="dl">"</span><span class="s2">ユーザー情報</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">名前:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">user</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">年齢:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">user</span><span class="p">.</span><span class="nx">age</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">groupEnd</span><span class="p">();</span>
<span class="c1">// 条件付きログ</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">assert</span><span class="p">(</span><span class="nx">user</span><span class="p">.</span><span class="nx">age</span> <span class="o">>=</span> <span class="mi">18</span><span class="p">,</span> <span class="dl">"</span><span class="s2">ユーザーは18歳以上である必要があります</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// スタックトレース</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">trace</span><span class="p">(</span><span class="dl">"</span><span class="s2">スタックトレースを表示</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// ブレークポイント</span>
<span class="kd">function</span> <span class="nx">debugFunction</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">x</span> <span class="o">=</span> <span class="mi">10</span><span class="p">;</span>
<span class="k">debugger</span><span class="p">;</span> <span class="c1">// ブラウザの開発者ツールでここで停止</span>
<span class="nx">x</span> <span class="o">*=</span> <span class="mi">2</span><span class="p">;</span>
<span class="k">return</span> <span class="nx">x</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// エラーの詳細表示</span>
<span class="k">try</span> <span class="p">{</span>
<span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="dl">"</span><span class="s2">テストエラー</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラー名:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラーメッセージ:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">スタックトレース:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">.</span><span class="nx">stack</span><span class="p">);</span>
<span class="p">}</span>
</code></pre></div></div>
<h3 id="簡単なテストフレームワーク">簡単なテストフレームワーク</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 簡単なテストフレームワーク</span>
<span class="kd">class</span> <span class="nx">SimpleTest</span> <span class="p">{</span>
<span class="kd">constructor</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">tests</span> <span class="o">=</span> <span class="p">[];</span>
<span class="k">this</span><span class="p">.</span><span class="nx">passed</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">failed</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">test</span><span class="p">(</span><span class="nx">description</span><span class="p">,</span> <span class="nx">testFunction</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">tests</span><span class="p">.</span><span class="nx">push</span><span class="p">({</span> <span class="nx">description</span><span class="p">,</span> <span class="nx">testFunction</span> <span class="p">});</span>
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">assertEqual</span><span class="p">(</span><span class="nx">actual</span><span class="p">,</span> <span class="nx">expected</span><span class="p">,</span> <span class="nx">message</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">actual</span> <span class="o">===</span> <span class="nx">expected</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`✅ </span><span class="p">${</span><span class="nx">message</span> <span class="o">||</span> <span class="dl">'</span><span class="s1">Test passed</span><span class="dl">'</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">passed</span><span class="o">++</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`❌ </span><span class="p">${</span><span class="nx">message</span> <span class="o">||</span> <span class="dl">'</span><span class="s1">Test failed</span><span class="dl">'</span><span class="p">}</span><span class="s2">: expected </span><span class="p">${</span><span class="nx">expected</span><span class="p">}</span><span class="s2">, got </span><span class="p">${</span><span class="nx">actual</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">failed</span><span class="o">++</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nx">assertTrue</span><span class="p">(</span><span class="nx">value</span><span class="p">,</span> <span class="nx">message</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">assertEqual</span><span class="p">(</span><span class="nx">value</span><span class="p">,</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">message</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">assertFalse</span><span class="p">(</span><span class="nx">value</span><span class="p">,</span> <span class="nx">message</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">assertEqual</span><span class="p">(</span><span class="nx">value</span><span class="p">,</span> <span class="kc">false</span><span class="p">,</span> <span class="nx">message</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">run</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">🚀 テスト開始</span><span class="dl">"</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">tests</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(({</span> <span class="nx">description</span><span class="p">,</span> <span class="nx">testFunction</span> <span class="p">})</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`\n📝 </span><span class="p">${</span><span class="nx">description</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="k">try</span> <span class="p">{</span>
<span class="nx">testFunction</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`❌ エラー: </span><span class="p">${</span><span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">failed</span><span class="o">++</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`\n📊 結果: </span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">passed</span><span class="p">}</span><span class="s2"> passed, </span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">failed</span><span class="p">}</span><span class="s2"> failed`</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// テスト例</span>
<span class="kd">function</span> <span class="nx">add</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">a</span> <span class="o">+</span> <span class="nx">b</span><span class="p">;</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">multiply</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">a</span> <span class="o">*</span> <span class="nx">b</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// テストの実行</span>
<span class="kd">const</span> <span class="nx">test</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">SimpleTest</span><span class="p">();</span>
<span class="nx">test</span>
<span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="dl">"</span><span class="s2">add関数のテスト</span><span class="dl">"</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">assertEqual</span><span class="p">(</span><span class="nx">add</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">),</span> <span class="mi">5</span><span class="p">,</span> <span class="dl">"</span><span class="s2">2 + 3 = 5</span><span class="dl">"</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">assertEqual</span><span class="p">(</span><span class="nx">add</span><span class="p">(</span><span class="o">-</span><span class="mi">1</span><span class="p">,</span> <span class="mi">1</span><span class="p">),</span> <span class="mi">0</span><span class="p">,</span> <span class="dl">"</span><span class="s2">-1 + 1 = 0</span><span class="dl">"</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">assertEqual</span><span class="p">(</span><span class="nx">add</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">),</span> <span class="mi">0</span><span class="p">,</span> <span class="dl">"</span><span class="s2">0 + 0 = 0</span><span class="dl">"</span><span class="p">);</span>
<span class="p">})</span>
<span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="dl">"</span><span class="s2">multiply関数のテスト</span><span class="dl">"</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">assertEqual</span><span class="p">(</span><span class="nx">multiply</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">),</span> <span class="mi">6</span><span class="p">,</span> <span class="dl">"</span><span class="s2">2 * 3 = 6</span><span class="dl">"</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">assertEqual</span><span class="p">(</span><span class="nx">multiply</span><span class="p">(</span><span class="o">-</span><span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">),</span> <span class="o">-</span><span class="mi">6</span><span class="p">,</span> <span class="dl">"</span><span class="s2">-2 * 3 = -6</span><span class="dl">"</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">assertEqual</span><span class="p">(</span><span class="nx">multiply</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">5</span><span class="p">),</span> <span class="mi">0</span><span class="p">,</span> <span class="dl">"</span><span class="s2">0 * 5 = 0</span><span class="dl">"</span><span class="p">);</span>
<span class="p">})</span>
<span class="p">.</span><span class="nx">run</span><span class="p">();</span>
</code></pre></div></div>
<h2 id="パフォーマンス最適化">パフォーマンス最適化</h2>
<h3 id="パフォーマンス測定と最適化">パフォーマンス測定と最適化</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// パフォーマンス測定</span>
<span class="kd">function</span> <span class="nx">measurePerformance</span><span class="p">(</span><span class="nx">fn</span><span class="p">,</span> <span class="nx">label</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">start</span> <span class="o">=</span> <span class="nx">performance</span><span class="p">.</span><span class="nx">now</span><span class="p">();</span>
<span class="nx">fn</span><span class="p">();</span>
<span class="kd">const</span> <span class="nx">end</span> <span class="o">=</span> <span class="nx">performance</span><span class="p">.</span><span class="nx">now</span><span class="p">();</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`</span><span class="p">${</span><span class="nx">label</span><span class="p">}</span><span class="s2">: </span><span class="p">${</span><span class="nx">end</span> <span class="o">-</span> <span class="nx">start</span><span class="p">}</span><span class="s2">ms`</span><span class="p">);</span>
<span class="p">}</span>
<span class="c1">// 配列処理の最適化例</span>
<span class="kd">const</span> <span class="nx">largeArray</span> <span class="o">=</span> <span class="nb">Array</span><span class="p">.</span><span class="k">from</span><span class="p">({</span> <span class="na">length</span><span class="p">:</span> <span class="mi">100000</span> <span class="p">},</span> <span class="p">(</span><span class="nx">_</span><span class="p">,</span> <span class="nx">i</span><span class="p">)</span> <span class="o">=></span> <span class="nx">i</span><span class="p">);</span>
<span class="c1">// 非効率な方法</span>
<span class="nx">measurePerformance</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">result</span> <span class="o">=</span> <span class="p">[];</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o"><</span> <span class="nx">largeArray</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">largeArray</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">%</span> <span class="mi">2</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">result</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">largeArray</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">*</span> <span class="mi">2</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">},</span> <span class="dl">"</span><span class="s2">forループ</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// 効率的な方法</span>
<span class="nx">measurePerformance</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">largeArray</span>
<span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="nx">x</span> <span class="o">=></span> <span class="nx">x</span> <span class="o">%</span> <span class="mi">2</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span>
<span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">x</span> <span class="o">=></span> <span class="nx">x</span> <span class="o">*</span> <span class="mi">2</span><span class="p">);</span>
<span class="p">},</span> <span class="dl">"</span><span class="s2">filter + map</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// より効率的な方法(1回のループ)</span>
<span class="nx">measurePerformance</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">largeArray</span><span class="p">.</span><span class="nx">reduce</span><span class="p">((</span><span class="nx">acc</span><span class="p">,</span> <span class="nx">x</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">x</span> <span class="o">%</span> <span class="mi">2</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">acc</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">x</span> <span class="o">*</span> <span class="mi">2</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">acc</span><span class="p">;</span>
<span class="p">},</span> <span class="p">[]);</span>
<span class="p">},</span> <span class="dl">"</span><span class="s2">reduce</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// イベントリスナーの最適化(デバウンス)</span>
<span class="kd">function</span> <span class="nx">debounce</span><span class="p">(</span><span class="nx">func</span><span class="p">,</span> <span class="nx">wait</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">timeout</span><span class="p">;</span>
<span class="k">return</span> <span class="kd">function</span> <span class="nx">executedFunction</span><span class="p">(...</span><span class="nx">args</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">later</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">clearTimeout</span><span class="p">(</span><span class="nx">timeout</span><span class="p">);</span>
<span class="nx">func</span><span class="p">(...</span><span class="nx">args</span><span class="p">);</span>
<span class="p">};</span>
<span class="nx">clearTimeout</span><span class="p">(</span><span class="nx">timeout</span><span class="p">);</span>
<span class="nx">timeout</span> <span class="o">=</span> <span class="nx">setTimeout</span><span class="p">(</span><span class="nx">later</span><span class="p">,</span> <span class="nx">wait</span><span class="p">);</span>
<span class="p">};</span>
<span class="p">}</span>
<span class="c1">// スクロールイベントの最適化</span>
<span class="kd">const</span> <span class="nx">handleScroll</span> <span class="o">=</span> <span class="nx">debounce</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">スクロール処理</span><span class="dl">"</span><span class="p">);</span>
<span class="p">},</span> <span class="mi">100</span><span class="p">);</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">scroll</span><span class="dl">"</span><span class="p">,</span> <span class="nx">handleScroll</span><span class="p">);</span>
<span class="c1">// スロットル(一定間隔で実行)</span>
<span class="kd">function</span> <span class="nx">throttle</span><span class="p">(</span><span class="nx">func</span><span class="p">,</span> <span class="nx">limit</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">lastFunc</span><span class="p">;</span>
<span class="kd">let</span> <span class="nx">lastRan</span><span class="p">;</span>
<span class="k">return</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">context</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">args</span> <span class="o">=</span> <span class="nx">arguments</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">lastRan</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">func</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="nx">context</span><span class="p">,</span> <span class="nx">args</span><span class="p">);</span>
<span class="nx">lastRan</span> <span class="o">=</span> <span class="nb">Date</span><span class="p">.</span><span class="nx">now</span><span class="p">();</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">clearTimeout</span><span class="p">(</span><span class="nx">lastFunc</span><span class="p">);</span>
<span class="nx">lastFunc</span> <span class="o">=</span> <span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">((</span><span class="nb">Date</span><span class="p">.</span><span class="nx">now</span><span class="p">()</span> <span class="o">-</span> <span class="nx">lastRan</span><span class="p">)</span> <span class="o">>=</span> <span class="nx">limit</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">func</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="nx">context</span><span class="p">,</span> <span class="nx">args</span><span class="p">);</span>
<span class="nx">lastRan</span> <span class="o">=</span> <span class="nb">Date</span><span class="p">.</span><span class="nx">now</span><span class="p">();</span>
<span class="p">}</span>
<span class="p">},</span> <span class="nx">limit</span> <span class="o">-</span> <span class="p">(</span><span class="nb">Date</span><span class="p">.</span><span class="nx">now</span><span class="p">()</span> <span class="o">-</span> <span class="nx">lastRan</span><span class="p">));</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// メモ化(結果をキャッシュ)</span>
<span class="kd">function</span> <span class="nx">memoize</span><span class="p">(</span><span class="nx">fn</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">cache</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Map</span><span class="p">();</span>
<span class="k">return</span> <span class="kd">function</span><span class="p">(...</span><span class="nx">args</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">key</span> <span class="o">=</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">args</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">cache</span><span class="p">.</span><span class="nx">has</span><span class="p">(</span><span class="nx">key</span><span class="p">))</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">cache</span><span class="p">.</span><span class="kd">get</span><span class="p">(</span><span class="nx">key</span><span class="p">);</span>
<span class="p">}</span>
<span class="kd">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">fn</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="nx">args</span><span class="p">);</span>
<span class="nx">cache</span><span class="p">.</span><span class="kd">set</span><span class="p">(</span><span class="nx">key</span><span class="p">,</span> <span class="nx">result</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">result</span><span class="p">;</span>
<span class="p">};</span>
<span class="p">}</span>
<span class="c1">// フィボナッチ数列の最適化例</span>
<span class="kd">const</span> <span class="nx">fibonacci</span> <span class="o">=</span> <span class="nx">memoize</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">n</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">n</span> <span class="o"><</span> <span class="mi">2</span><span class="p">)</span> <span class="k">return</span> <span class="nx">n</span><span class="p">;</span>
<span class="k">return</span> <span class="nx">fibonacci</span><span class="p">(</span><span class="nx">n</span> <span class="o">-</span> <span class="mi">1</span><span class="p">)</span> <span class="o">+</span> <span class="nx">fibonacci</span><span class="p">(</span><span class="nx">n</span> <span class="o">-</span> <span class="mi">2</span><span class="p">);</span>
<span class="p">});</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">fibonacci</span><span class="p">(</span><span class="mi">40</span><span class="p">));</span> <span class="c1">// 大幅に高速化される</span>
</code></pre></div></div>
<h2 id="参考資料">参考資料</h2>
<h3 id="公式ドキュメント">公式ドキュメント</h3>
<ul>
<li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript">MDN Web Docs - JavaScript</a>: Mozilla開発者向けリソース</li>
<li><a href="https://tc39.es/ecma262/">ECMAScript Language Specification</a>: JavaScript仕様書</li>
<li><a href="https://nodejs.org/docs/">Node.js Documentation</a>: サーバーサイドJavaScript</li>
</ul>
<h3 id="学習リソース">学習リソース</h3>
<ul>
<li><a href="https://javascript.info/">JavaScript.info</a>: 現代的なJavaScript学習サイト</li>
<li><a href="https://eloquentjavascript.net/">Eloquent JavaScript</a>: 無料のJavaScript書籍</li>
<li><a href="https://github.com/getify/You-Dont-Know-JS">You Don’t Know JS</a>: 深いJavaScript理解</li>
</ul>
<h3 id="ツールとライブラリ">ツールとライブラリ</h3>
<ul>
<li><a href="https://eslint.org/">ESLint</a>: JavaScriptリンター</li>
<li><a href="https://prettier.io/">Prettier</a>: コードフォーマッター</li>
<li><a href="https://babeljs.io/">Babel</a>: JavaScript変換ツール</li>
<li><a href="https://webpack.js.org/">Webpack</a>: モジュールバンドラー</li>
</ul>
<h3 id="フレームワークライブラリ">フレームワーク・ライブラリ</h3>
<ul>
<li><a href="https://reactjs.org/">React</a>: ユーザーインターフェースライブラリ</li>
<li><a href="https://vuejs.org/">Vue.js</a>: プログレッシブフレームワーク</li>
<li><a href="https://angular.io/">Angular</a>: フルフィーチャーフレームワーク</li>
<li><a href="https://expressjs.com/">Express.js</a>: Node.jsウェブフレームワーク</li>
</ul>
</div></div>
</div>
</article>
<!-- Enhanced Table of Contents JavaScript --><script>
document.addEventListener('DOMContentLoaded', function() {
// Generate enhanced Table of Contents
const headings = document.querySelectorAll('.page-main-content h2, .page-main-content h3, .page-main-content h4');
const tocContainer = document.getElementById('page-toc-content');
if (headings.length > 0 && tocContainer) {
const tocList = document.createElement('ul');
tocList.style.cssText = 'list-style: none; padding-left: 0; margin: 0; line-height: 1.6;';
headings.forEach(function(heading, index) {
// Add ID to heading if it doesn't have one
if (!heading.id) {
heading.id = 'page-heading-' + index;
}
const listItem = document.createElement('li');
const link = document.createElement('a');
link.href = '#' + heading.id;
link.textContent = heading.textContent;
link.style.cssText = 'text-decoration: none; color: #007bff; transition: color 0.2s;';
// Add hover effect
link.addEventListener('mouseenter', function() {
this.style.color = '#0056b3';
});
link.addEventListener('mouseleave', function() {
this.style.color = '#007bff';
});
// Style based on heading level
if (heading.tagName === 'H2') {
listItem.style.cssText = 'margin-bottom: 8px; font-weight: 600;';
link.textContent = '📄 ' + heading.textContent;
} else if (heading.tagName === 'H3') {
listItem.style.cssText = 'margin-bottom: 5px; margin-left: 25px; font-size: 0.95em;';
link.textContent = '▶ ' + heading.textContent;
} else if (heading.tagName === 'H4') {
listItem.style.cssText = 'margin-bottom: 3px; margin-left: 50px; font-size: 0.9em;';
link.textContent = '• ' + heading.textContent;
}
listItem.appendChild(link);
tocList.appendChild(listItem);
});
tocContainer.appendChild(tocList);
} else if (tocContainer) {
// Hide TOC container if no headings found
tocContainer.parentNode.style.display = 'none';
}
});
</script><!-- Additional styling for page layout with sidebar TOC -->
<style>
/* Override minima theme wrapper width restriction for large screens */
@media (min-width: 1441px) {
.wrapper {
max-width: none;
}
}
.page-article {
margin: 0 auto;
}
/* Apply max-width only on smaller screens to maintain readability */
@media (max-width: 1440px) {
.page-article {
max-width: 2000px;
}
}
.page-content-wrapper {
display: flex;
gap: 20px;
position: relative;
}
.page-toc-sidebar {
width: 280px;
position: sticky;
top: 20px;
height: calc(100vh - 40px);
max-height: calc(100vh - 40px);
overflow-y: auto;
order: 2;
flex-shrink: 0;
}
.page-content {
flex: 1;
min-width: 0;
order: 1;
}
/* Responsive behavior */
@media (max-width: 1024px) {
.page-content-wrapper {
flex-direction: column;
}
.page-toc-sidebar {
width: 100%;
position: static;
order: 1;
margin-bottom: 20px;
height: auto;
max-height: none;
overflow-y: visible;
}
.page-content {
order: 2;
}
}
@media (max-width: 768px) {
.page-toc-sidebar {
display: none;
}
}
.page-title {
border-bottom: 3px solid #007bff;
padding-bottom: 10px;
color: #212529;
}
.page-main-content h2 {
color: #007bff;
border-bottom: 2px solid #e9ecef;
padding-bottom: 8px;
margin-top: 40px;
}
.page-main-content h3 {
color: #495057;
margin-top: 30px;
}
.page-main-content code {
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 3px;
padding: 2px 4px;
font-size: 0.9em;
}
.page-main-content pre {
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 5px;
padding: 15px;
overflow-x: auto;
}
.page-main-content blockquote {
border-left: 4px solid #007bff;
background: #f8f9fa;
margin: 20px 0;
padding: 15px 20px;
font-style: italic;
}
.page-main-content table {
border-collapse: collapse;
width: 100%;
margin: 20px 0;
}
.page-main-content th,
.page-main-content td {
border: 1px solid #dee2e6;
padding: 12px;
text-align: left;
}
.page-main-content th {
background: #f8f9fa;
font-weight: 600;
}
</style>
</div>
</main><footer class="site-footer h-card">
<data class="u-url" href="/docs/"></data>
<div class="wrapper">
<h2 class="footer-heading">技術ドキュメント集</h2>
<div class="footer-col-wrapper">
<div class="footer-col footer-col-1">
<ul class="contact-list">
<li class="p-name">技術ドキュメント集</li></ul>
</div>
<div class="footer-col footer-col-2"><ul class="social-media-list"></ul>
</div>
<div class="footer-col footer-col-3">
<p>各種技術ドキュメントとリファレンス</p>
</div>
</div>
</div>
</footer>
</body>
</html>
ページレイアウト(_layouts/page.html)
---
layout: default
---
<article class="post">
<header class="post-header">
<h1 class="post-title">Jekyll リファレンス</h1>
</header>
<div class="post-content">
<article class="page-article">
<header class="page-header">
<h1 class="page-title">JavaScript リファレンス</h1></header>
<div class="page-content-wrapper">
<!-- Table of Contents Sidebar --><aside class="page-toc-sidebar">
<div class="page-toc" style="background: #fff; border: 2px solid #007bff; border-radius: 8px; padding: 20px;">
<h3 style="margin-top: 0; color: #007bff; border-bottom: 1px solid #007bff; padding-bottom: 8px;">📖 目次</h3>
<div id="page-toc-content"></div>
</div>
</aside><div class="page-content">
<!-- Main content -->
<div class="page-main-content">
<h1 id="javascript-リファレンス">JavaScript リファレンス</h1>
<p>JavaScriptの基本的な使い方から応用まで、Webページに動的な機能を追加するために必要な知識を体系的に説明します。モダンなJavaScript(ES6+)の機能も含めて解説します。</p>
<ul id="markdown-toc">
<li><a href="#javascript-リファレンス" id="markdown-toc-javascript-リファレンス">JavaScript リファレンス</a> <ul>
<li><a href="#基本概念" id="markdown-toc-基本概念">基本概念</a> <ul>
<li><a href="#javascript-とは" id="markdown-toc-javascript-とは">JavaScript とは</a></li>
<li><a href="#javascript-の役割" id="markdown-toc-javascript-の役割">JavaScript の役割</a></li>
</ul>
</li>
<li><a href="#基本構文" id="markdown-toc-基本構文">基本構文</a> <ul>
<li><a href="#変数とデータ型" id="markdown-toc-変数とデータ型">変数とデータ型</a></li>
<li><a href="#文字列操作" id="markdown-toc-文字列操作">文字列操作</a></li>
<li><a href="#配列" id="markdown-toc-配列">配列</a></li>
<li><a href="#オブジェクト" id="markdown-toc-オブジェクト">オブジェクト</a></li>
</ul>
</li>
<li><a href="#関数" id="markdown-toc-関数">関数</a> <ul>
<li><a href="#関数の定義" id="markdown-toc-関数の定義">関数の定義</a></li>
<li><a href="#スコープとクロージャ" id="markdown-toc-スコープとクロージャ">スコープとクロージャ</a></li>
</ul>
</li>
<li><a href="#dom操作" id="markdown-toc-dom操作">DOM操作</a> <ul>
<li><a href="#要素の取得" id="markdown-toc-要素の取得">要素の取得</a></li>
<li><a href="#要素の操作" id="markdown-toc-要素の操作">要素の操作</a></li>
<li><a href="#要素の作成と追加" id="markdown-toc-要素の作成と追加">要素の作成と追加</a></li>
</ul>
</li>
<li><a href="#イベント処理" id="markdown-toc-イベント処理">イベント処理</a> <ul>
<li><a href="#イベントリスナーの追加" id="markdown-toc-イベントリスナーの追加">イベントリスナーの追加</a></li>
<li><a href="#よく使用するイベント" id="markdown-toc-よく使用するイベント">よく使用するイベント</a></li>
<li><a href="#イベント委譲" id="markdown-toc-イベント委譲">イベント委譲</a></li>
</ul>
</li>
<li><a href="#非同期処理" id="markdown-toc-非同期処理">非同期処理</a> <ul>
<li><a href="#promise" id="markdown-toc-promise">Promise</a></li>
<li><a href="#asyncawait" id="markdown-toc-asyncawait">async/await</a></li>
<li><a href="#fetch-api" id="markdown-toc-fetch-api">Fetch API</a></li>
</ul>
</li>
<li><a href="#モダンjavascriptes6" id="markdown-toc-モダンjavascriptes6">モダンJavaScript(ES6+)</a> <ul>
<li><a href="#分割代入" id="markdown-toc-分割代入">分割代入</a></li>
<li><a href="#モジュール" id="markdown-toc-モジュール">モジュール</a></li>
<li><a href="#クラス" id="markdown-toc-クラス">クラス</a></li>
</ul>
</li>
<li><a href="#エラーハンドリング" id="markdown-toc-エラーハンドリング">エラーハンドリング</a> <ul>
<li><a href="#try-catch文" id="markdown-toc-try-catch文">try-catch文</a></li>
</ul>
</li>
<li><a href="#ブラウザapi" id="markdown-toc-ブラウザapi">ブラウザAPI</a> <ul>
<li><a href="#local-storage" id="markdown-toc-local-storage">Local Storage</a></li>
<li><a href="#geolocation-api" id="markdown-toc-geolocation-api">Geolocation API</a></li>
<li><a href="#notification-api" id="markdown-toc-notification-api">Notification API</a></li>
</ul>
</li>
<li><a href="#実践的なコード例" id="markdown-toc-実践的なコード例">実践的なコード例</a> <ul>
<li><a href="#フォームバリデーション" id="markdown-toc-フォームバリデーション">フォームバリデーション</a></li>
<li><a href="#シンプルなspasingle-page-application" id="markdown-toc-シンプルなspasingle-page-application">シンプルなSPA(Single Page Application)</a></li>
</ul>
</li>
<li><a href="#デバッグとテスト" id="markdown-toc-デバッグとテスト">デバッグとテスト</a> <ul>
<li><a href="#デバッグ技法" id="markdown-toc-デバッグ技法">デバッグ技法</a></li>
<li><a href="#簡単なテストフレームワーク" id="markdown-toc-簡単なテストフレームワーク">簡単なテストフレームワーク</a></li>
</ul>
</li>
<li><a href="#パフォーマンス最適化" id="markdown-toc-パフォーマンス最適化">パフォーマンス最適化</a> <ul>
<li><a href="#パフォーマンス測定と最適化" id="markdown-toc-パフォーマンス測定と最適化">パフォーマンス測定と最適化</a></li>
</ul>
</li>
<li><a href="#参考資料" id="markdown-toc-参考資料">参考資料</a> <ul>
<li><a href="#公式ドキュメント" id="markdown-toc-公式ドキュメント">公式ドキュメント</a></li>
<li><a href="#学習リソース" id="markdown-toc-学習リソース">学習リソース</a></li>
<li><a href="#ツールとライブラリ" id="markdown-toc-ツールとライブラリ">ツールとライブラリ</a></li>
<li><a href="#フレームワークライブラリ" id="markdown-toc-フレームワークライブラリ">フレームワーク・ライブラリ</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<h2 id="基本概念">基本概念</h2>
<h3 id="javascript-とは">JavaScript とは</h3>
<p><strong>JavaScript</strong> は、Webページに動的な機能を追加するためのプログラミング言語です。1995年にBrendan Eichによって開発され、現在はブラウザだけでなくサーバーサイド(Node.js)でも広く使用されています。</p>
<p><strong>特徴:</strong></p>
<ul>
<li>インタープリター言語(コンパイル不要)</li>
<li>動的型付け言語</li>
<li>プロトタイプベースのオブジェクト指向</li>
<li>関数型プログラミングもサポート</li>
<li>イベント駆動プログラミング</li>
</ul>
<h3 id="javascript-の役割">JavaScript の役割</h3>
<p>JavaScriptは以下の主要な役割を担います:</p>
<ol>
<li><strong>ユーザーインタラクション</strong>: クリック、入力などのイベント処理</li>
<li><strong>DOM操作</strong>: HTMLの動的な変更</li>
<li><strong>非同期処理</strong>: サーバーとの通信(Ajax、Fetch API)</li>
<li><strong>フォーム検証</strong>: 入力データの検証</li>
<li><strong>アニメーション</strong>: 視覚的な効果の実装</li>
</ol>
<h2 id="基本構文">基本構文</h2>
<h3 id="変数とデータ型">変数とデータ型</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 変数の宣言</span>
<span class="kd">let</span> <span class="nx">name</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">田中太郎</span><span class="dl">"</span><span class="p">;</span> <span class="c1">// 文字列(String)</span>
<span class="kd">const</span> <span class="nx">age</span> <span class="o">=</span> <span class="mi">30</span><span class="p">;</span> <span class="c1">// 数値(Number)- 定数</span>
<span class="kd">var</span> <span class="nx">isStudent</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span> <span class="c1">// 真偽値(Boolean)- 非推奨</span>
<span class="c1">// 現代的な変数宣言(ES6+)</span>
<span class="kd">let</span> <span class="nx">message</span><span class="p">;</span> <span class="c1">// 宣言のみ(undefined)</span>
<span class="kd">let</span> <span class="nx">score</span> <span class="o">=</span> <span class="mi">85</span><span class="p">;</span> <span class="c1">// 宣言と初期化</span>
<span class="kd">const</span> <span class="nx">PI</span> <span class="o">=</span> <span class="mf">3.14159</span><span class="p">;</span> <span class="c1">// 定数(再代入不可)</span>
<span class="c1">// データ型の確認</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">name</span><span class="p">);</span> <span class="c1">// "string"</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">age</span><span class="p">);</span> <span class="c1">// "number"</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">isStudent</span><span class="p">);</span> <span class="c1">// "boolean"</span>
<span class="c1">// プリミティブ型</span>
<span class="kd">let</span> <span class="nx">str</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">文字列</span><span class="dl">"</span><span class="p">;</span> <span class="c1">// String</span>
<span class="kd">let</span> <span class="nx">num</span> <span class="o">=</span> <span class="mi">42</span><span class="p">;</span> <span class="c1">// Number</span>
<span class="kd">let</span> <span class="nx">bool</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span> <span class="c1">// Boolean</span>
<span class="kd">let</span> <span class="nx">nothing</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span> <span class="c1">// Null</span>
<span class="kd">let</span> <span class="nx">undef</span> <span class="o">=</span> <span class="kc">undefined</span><span class="p">;</span> <span class="c1">// Undefined</span>
<span class="kd">let</span> <span class="nx">sym</span> <span class="o">=</span> <span class="nb">Symbol</span><span class="p">(</span><span class="dl">"</span><span class="s2">id</span><span class="dl">"</span><span class="p">);</span> <span class="c1">// Symbol(ES6+)</span>
<span class="kd">let</span> <span class="nx">big</span> <span class="o">=</span> <span class="mi">123</span><span class="nx">n</span><span class="p">;</span> <span class="c1">// BigInt(ES2020+)</span>
<span class="c1">// 参照型</span>
<span class="kd">let</span> <span class="nx">arr</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">];</span> <span class="c1">// Array</span>
<span class="kd">let</span> <span class="nx">obj</span> <span class="o">=</span> <span class="p">{</span> <span class="na">name</span><span class="p">:</span> <span class="dl">"</span><span class="s2">太郎</span><span class="dl">"</span> <span class="p">};</span> <span class="c1">// Object</span>
<span class="kd">let</span> <span class="nx">func</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{};</span> <span class="c1">// Function</span>
</code></pre></div></div>
<h3 id="文字列操作">文字列操作</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 文字列の基本操作</span>
<span class="kd">let</span> <span class="nx">firstName</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">太郎</span><span class="dl">"</span><span class="p">;</span>
<span class="kd">let</span> <span class="nx">lastName</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">田中</span><span class="dl">"</span><span class="p">;</span>
<span class="c1">// 文字列結合</span>
<span class="kd">let</span> <span class="nx">fullName1</span> <span class="o">=</span> <span class="nx">firstName</span> <span class="o">+</span> <span class="nx">lastName</span><span class="p">;</span> <span class="c1">// "太郎田中"</span>
<span class="kd">let</span> <span class="nx">fullName2</span> <span class="o">=</span> <span class="s2">`</span><span class="p">${</span><span class="nx">lastName</span><span class="p">}</span><span class="s2"> </span><span class="p">${</span><span class="nx">firstName</span><span class="p">}</span><span class="s2">`</span><span class="p">;</span> <span class="c1">// "田中 太郎" (テンプレートリテラル)</span>
<span class="c1">// 文字列メソッド</span>
<span class="kd">let</span> <span class="nx">text</span> <span class="o">=</span> <span class="dl">"</span><span class="s2"> Hello, World! </span><span class="dl">"</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">text</span><span class="p">.</span><span class="nx">length</span><span class="p">);</span> <span class="c1">// 16 (文字数)</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">text</span><span class="p">.</span><span class="nx">toLowerCase</span><span class="p">());</span> <span class="c1">// " hello, world! "</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">text</span><span class="p">.</span><span class="nx">toUpperCase</span><span class="p">());</span> <span class="c1">// " HELLO, WORLD! "</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">text</span><span class="p">.</span><span class="nx">trim</span><span class="p">());</span> <span class="c1">// "Hello, World!" (前後の空白削除)</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">text</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="dl">"</span><span class="s2">World</span><span class="dl">"</span><span class="p">));</span> <span class="c1">// 9 (文字列の位置)</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">text</span><span class="p">.</span><span class="nx">includes</span><span class="p">(</span><span class="dl">"</span><span class="s2">Hello</span><span class="dl">"</span><span class="p">));</span> <span class="c1">// true (文字列が含まれるか)</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">text</span><span class="p">.</span><span class="nx">slice</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span> <span class="mi">7</span><span class="p">));</span> <span class="c1">// "Hello" (部分文字列)</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">text</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="dl">"</span><span class="s2">World</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">JavaScript</span><span class="dl">"</span><span class="p">));</span> <span class="c1">// " Hello, JavaScript! "</span>
<span class="c1">// 文字列分割と結合</span>
<span class="kd">let</span> <span class="nx">csv</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">apple,banana,orange</span><span class="dl">"</span><span class="p">;</span>
<span class="kd">let</span> <span class="nx">fruits</span> <span class="o">=</span> <span class="nx">csv</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="dl">"</span><span class="s2">,</span><span class="dl">"</span><span class="p">);</span> <span class="c1">// ["apple", "banana", "orange"]</span>
<span class="kd">let</span> <span class="nx">joined</span> <span class="o">=</span> <span class="nx">fruits</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="dl">"</span><span class="s2"> | </span><span class="dl">"</span><span class="p">);</span> <span class="c1">// "apple | banana | orange"</span>
<span class="c1">// マルチライン文字列(テンプレートリテラル)</span>
<span class="kd">let</span> <span class="nx">multiLine</span> <span class="o">=</span> <span class="s2">`
これは
複数行の
文字列です
`</span><span class="p">;</span>
</code></pre></div></div>
<h3 id="配列">配列</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 配列の作成</span>
<span class="kd">let</span> <span class="nx">arr1</span> <span class="o">=</span> <span class="p">[];</span> <span class="c1">// 空の配列</span>
<span class="kd">let</span> <span class="nx">arr2</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">5</span><span class="p">];</span> <span class="c1">// 数値配列</span>
<span class="kd">let</span> <span class="nx">arr3</span> <span class="o">=</span> <span class="p">[</span><span class="dl">"</span><span class="s2">apple</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">banana</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">orange</span><span class="dl">"</span><span class="p">];</span> <span class="c1">// 文字列配列</span>
<span class="kd">let</span> <span class="nx">arr4</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="dl">"</span><span class="s2">text</span><span class="dl">"</span><span class="p">,</span> <span class="kc">true</span><span class="p">,</span> <span class="kc">null</span><span class="p">];</span> <span class="c1">// 混合配列</span>
<span class="c1">// 配列の基本操作</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">arr2</span><span class="p">.</span><span class="nx">length</span><span class="p">);</span> <span class="c1">// 5 (要素数)</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">arr2</span><span class="p">[</span><span class="mi">0</span><span class="p">]);</span> <span class="c1">// 1 (最初の要素)</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">arr2</span><span class="p">[</span><span class="nx">arr2</span><span class="p">.</span><span class="nx">length</span> <span class="o">-</span> <span class="mi">1</span><span class="p">]);</span> <span class="c1">// 5 (最後の要素)</span>
<span class="c1">// 要素の追加・削除</span>
<span class="nx">arr2</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="mi">6</span><span class="p">);</span> <span class="c1">// 末尾に追加: [1,2,3,4,5,6]</span>
<span class="nx">arr2</span><span class="p">.</span><span class="nx">pop</span><span class="p">();</span> <span class="c1">// 末尾を削除: [1,2,3,4,5]</span>
<span class="nx">arr2</span><span class="p">.</span><span class="nx">unshift</span><span class="p">(</span><span class="mi">0</span><span class="p">);</span> <span class="c1">// 先頭に追加: [0,1,2,3,4,5]</span>
<span class="nx">arr2</span><span class="p">.</span><span class="nx">shift</span><span class="p">();</span> <span class="c1">// 先頭を削除: [1,2,3,4,5]</span>
<span class="c1">// 配列メソッド(ES5+)</span>
<span class="kd">let</span> <span class="nx">numbers</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">5</span><span class="p">];</span>
<span class="c1">// map: 各要素を変換</span>
<span class="kd">let</span> <span class="nx">doubled</span> <span class="o">=</span> <span class="nx">numbers</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">x</span> <span class="o">=></span> <span class="nx">x</span> <span class="o">*</span> <span class="mi">2</span><span class="p">);</span> <span class="c1">// [2,4,6,8,10]</span>
<span class="c1">// filter: 条件に合う要素を抽出</span>
<span class="kd">let</span> <span class="nx">evens</span> <span class="o">=</span> <span class="nx">numbers</span><span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="nx">x</span> <span class="o">=></span> <span class="nx">x</span> <span class="o">%</span> <span class="mi">2</span> <span class="o">===</span> <span class="mi">0</span><span class="p">);</span> <span class="c1">// [2,4]</span>
<span class="c1">// reduce: 配列を単一の値に集約</span>
<span class="kd">let</span> <span class="nx">sum</span> <span class="o">=</span> <span class="nx">numbers</span><span class="p">.</span><span class="nx">reduce</span><span class="p">((</span><span class="nx">acc</span><span class="p">,</span> <span class="nx">x</span><span class="p">)</span> <span class="o">=></span> <span class="nx">acc</span> <span class="o">+</span> <span class="nx">x</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span> <span class="c1">// 15</span>
<span class="c1">// find: 条件に合う最初の要素</span>
<span class="kd">let</span> <span class="nx">found</span> <span class="o">=</span> <span class="nx">numbers</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="nx">x</span> <span class="o">=></span> <span class="nx">x</span> <span class="o">></span> <span class="mi">3</span><span class="p">);</span> <span class="c1">// 4</span>
<span class="c1">// forEach: 各要素に対して処理実行</span>
<span class="nx">numbers</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">x</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">x</span><span class="p">));</span>
<span class="c1">// includes: 要素が含まれているか</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">numbers</span><span class="p">.</span><span class="nx">includes</span><span class="p">(</span><span class="mi">3</span><span class="p">));</span> <span class="c1">// true</span>
<span class="c1">// sort: ソート</span>
<span class="kd">let</span> <span class="nx">fruits</span> <span class="o">=</span> <span class="p">[</span><span class="dl">"</span><span class="s2">banana</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">apple</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">orange</span><span class="dl">"</span><span class="p">];</span>
<span class="nx">fruits</span><span class="p">.</span><span class="nx">sort</span><span class="p">();</span> <span class="c1">// ["apple", "banana", "orange"]</span>
<span class="kd">let</span> <span class="nx">nums</span> <span class="o">=</span> <span class="p">[</span><span class="mi">3</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">5</span><span class="p">];</span>
<span class="nx">nums</span><span class="p">.</span><span class="nx">sort</span><span class="p">((</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="o">=></span> <span class="nx">a</span> <span class="o">-</span> <span class="nx">b</span><span class="p">);</span> <span class="c1">// [1,1,3,4,5] (数値ソート)</span>
</code></pre></div></div>
<h3 id="オブジェクト">オブジェクト</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// オブジェクトの作成</span>
<span class="kd">let</span> <span class="nx">person</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">name</span><span class="p">:</span> <span class="dl">"</span><span class="s2">田中太郎</span><span class="dl">"</span><span class="p">,</span>
<span class="na">age</span><span class="p">:</span> <span class="mi">30</span><span class="p">,</span>
<span class="na">city</span><span class="p">:</span> <span class="dl">"</span><span class="s2">東京</span><span class="dl">"</span><span class="p">,</span>
<span class="na">isStudent</span><span class="p">:</span> <span class="kc">false</span>
<span class="p">};</span>
<span class="c1">// プロパティへのアクセス</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">person</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span> <span class="c1">// "田中太郎" (ドット記法)</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">person</span><span class="p">[</span><span class="dl">"</span><span class="s2">age</span><span class="dl">"</span><span class="p">]);</span> <span class="c1">// 30 (ブラケット記法)</span>
<span class="c1">// プロパティの追加・変更</span>
<span class="nx">person</span><span class="p">.</span><span class="nx">email</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">tanaka@example.com</span><span class="dl">"</span><span class="p">;</span> <span class="c1">// 追加</span>
<span class="nx">person</span><span class="p">.</span><span class="nx">age</span> <span class="o">=</span> <span class="mi">31</span><span class="p">;</span> <span class="c1">// 変更</span>
<span class="c1">// プロパティの削除</span>
<span class="k">delete</span> <span class="nx">person</span><span class="p">.</span><span class="nx">isStudent</span><span class="p">;</span>
<span class="c1">// メソッドを含むオブジェクト</span>
<span class="kd">let</span> <span class="nx">calculator</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">value</span><span class="p">:</span> <span class="mi">0</span><span class="p">,</span>
<span class="na">add</span><span class="p">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">x</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">value</span> <span class="o">+=</span> <span class="nx">x</span><span class="p">;</span>
<span class="k">return</span> <span class="k">this</span><span class="p">;</span> <span class="c1">// チェーンメソッド用</span>
<span class="p">},</span>
<span class="na">multiply</span><span class="p">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">x</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">value</span> <span class="o">*=</span> <span class="nx">x</span><span class="p">;</span>
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
<span class="p">},</span>
<span class="na">getValue</span><span class="p">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">value</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="c1">// 使用例</span>
<span class="nx">calculator</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="mi">5</span><span class="p">).</span><span class="nx">multiply</span><span class="p">(</span><span class="mi">2</span><span class="p">).</span><span class="nx">getValue</span><span class="p">();</span> <span class="c1">// 10</span>
<span class="c1">// オブジェクトの反復処理</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">key</span> <span class="k">in</span> <span class="nx">person</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`</span><span class="p">${</span><span class="nx">key</span><span class="p">}</span><span class="s2">: </span><span class="p">${</span><span class="nx">person</span><span class="p">[</span><span class="nx">key</span><span class="p">]}</span><span class="s2">`</span><span class="p">);</span>
<span class="p">}</span>
<span class="c1">// ES6+ のオブジェクト機能</span>
<span class="kd">let</span> <span class="nx">name</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">太郎</span><span class="dl">"</span><span class="p">;</span>
<span class="kd">let</span> <span class="nx">age</span> <span class="o">=</span> <span class="mi">25</span><span class="p">;</span>
<span class="c1">// プロパティ名の短縮記法</span>
<span class="kd">let</span> <span class="nx">user</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">name</span><span class="p">,</span> <span class="nx">age</span> <span class="p">};</span> <span class="c1">// { name: "太郎", age: 25 }</span>
<span class="c1">// 計算されたプロパティ名</span>
<span class="kd">let</span> <span class="nx">prop</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">color</span><span class="dl">"</span><span class="p">;</span>
<span class="kd">let</span> <span class="nx">car</span> <span class="o">=</span> <span class="p">{</span>
<span class="p">[</span><span class="nx">prop</span><span class="p">]:</span> <span class="dl">"</span><span class="s2">red</span><span class="dl">"</span> <span class="c1">// { color: "red" }</span>
<span class="p">};</span>
<span class="c1">// デストラクチャリング代入</span>
<span class="kd">let</span> <span class="p">{</span> <span class="na">name</span><span class="p">:</span> <span class="nx">userName</span><span class="p">,</span> <span class="na">age</span><span class="p">:</span> <span class="nx">userAge</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">user</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">userName</span><span class="p">,</span> <span class="nx">userAge</span><span class="p">);</span> <span class="c1">// "太郎" 25</span>
</code></pre></div></div>
<h2 id="関数">関数</h2>
<h3 id="関数の定義">関数の定義</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 関数宣言</span>
<span class="kd">function</span> <span class="nx">greet</span><span class="p">(</span><span class="nx">name</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="s2">`こんにちは、</span><span class="p">${</span><span class="nx">name</span><span class="p">}</span><span class="s2">さん!`</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// 関数式</span>
<span class="kd">const</span> <span class="nx">greet2</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">name</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="s2">`こんにちは、</span><span class="p">${</span><span class="nx">name</span><span class="p">}</span><span class="s2">さん!`</span><span class="p">;</span>
<span class="p">};</span>
<span class="c1">// アロー関数(ES6+)</span>
<span class="kd">const</span> <span class="nx">greet3</span> <span class="o">=</span> <span class="p">(</span><span class="nx">name</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">return</span> <span class="s2">`こんにちは、</span><span class="p">${</span><span class="nx">name</span><span class="p">}</span><span class="s2">さん!`</span><span class="p">;</span>
<span class="p">};</span>
<span class="c1">// アロー関数(短縮形)</span>
<span class="kd">const</span> <span class="nx">greet4</span> <span class="o">=</span> <span class="nx">name</span> <span class="o">=></span> <span class="s2">`こんにちは、</span><span class="p">${</span><span class="nx">name</span><span class="p">}</span><span class="s2">さん!`</span><span class="p">;</span>
<span class="c1">// 複数パラメータのアロー関数</span>
<span class="kd">const</span> <span class="nx">add</span> <span class="o">=</span> <span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="o">=></span> <span class="nx">a</span> <span class="o">+</span> <span class="nx">b</span><span class="p">;</span>
<span class="c1">// 関数の呼び出し</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">greet</span><span class="p">(</span><span class="dl">"</span><span class="s2">太郎</span><span class="dl">"</span><span class="p">));</span> <span class="c1">// "こんにちは、太郎さん!"</span>
<span class="c1">// デフォルトパラメータ(ES6+)</span>
<span class="kd">function</span> <span class="nx">createUser</span><span class="p">(</span><span class="nx">name</span><span class="p">,</span> <span class="nx">age</span> <span class="o">=</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">city</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">未設定</span><span class="dl">"</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">{</span> <span class="nx">name</span><span class="p">,</span> <span class="nx">age</span><span class="p">,</span> <span class="nx">city</span> <span class="p">};</span>
<span class="p">}</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">createUser</span><span class="p">(</span><span class="dl">"</span><span class="s2">太郎</span><span class="dl">"</span><span class="p">));</span> <span class="c1">// { name: "太郎", age: 0, city: "未設定" }</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">createUser</span><span class="p">(</span><span class="dl">"</span><span class="s2">花子</span><span class="dl">"</span><span class="p">,</span> <span class="mi">25</span><span class="p">));</span> <span class="c1">// { name: "花子", age: 25, city: "未設定" }</span>
<span class="c1">// 可変長引数(Rest Parameters)</span>
<span class="kd">function</span> <span class="nx">sum</span><span class="p">(...</span><span class="nx">numbers</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">numbers</span><span class="p">.</span><span class="nx">reduce</span><span class="p">((</span><span class="nx">total</span><span class="p">,</span> <span class="nx">num</span><span class="p">)</span> <span class="o">=></span> <span class="nx">total</span> <span class="o">+</span> <span class="nx">num</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">sum</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">5</span><span class="p">));</span> <span class="c1">// 15</span>
<span class="c1">// スプレッド演算子</span>
<span class="kd">const</span> <span class="nx">arr1</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">];</span>
<span class="kd">const</span> <span class="nx">arr2</span> <span class="o">=</span> <span class="p">[</span><span class="mi">4</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">6</span><span class="p">];</span>
<span class="kd">const</span> <span class="nx">combined</span> <span class="o">=</span> <span class="p">[...</span><span class="nx">arr1</span><span class="p">,</span> <span class="p">...</span><span class="nx">arr2</span><span class="p">];</span> <span class="c1">// [1,2,3,4,5,6]</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">max</span><span class="p">(...</span><span class="nx">arr1</span><span class="p">));</span> <span class="c1">// 3</span>
</code></pre></div></div>
<h3 id="スコープとクロージャ">スコープとクロージャ</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// グローバルスコープ</span>
<span class="kd">let</span> <span class="nx">globalVar</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">グローバル</span><span class="dl">"</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">outerFunction</span><span class="p">()</span> <span class="p">{</span>
<span class="c1">// 関数スコープ</span>
<span class="kd">let</span> <span class="nx">outerVar</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">外側</span><span class="dl">"</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">innerFunction</span><span class="p">()</span> <span class="p">{</span>
<span class="c1">// クロージャ</span>
<span class="kd">let</span> <span class="nx">innerVar</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">内側</span><span class="dl">"</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">globalVar</span><span class="p">);</span> <span class="c1">// アクセス可能</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">outerVar</span><span class="p">);</span> <span class="c1">// アクセス可能</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">innerVar</span><span class="p">);</span> <span class="c1">// アクセス可能</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">innerFunction</span><span class="p">;</span>
<span class="p">}</span>
<span class="kd">const</span> <span class="nx">closure</span> <span class="o">=</span> <span class="nx">outerFunction</span><span class="p">();</span>
<span class="nx">closure</span><span class="p">();</span> <span class="c1">// クロージャが実行される</span>
<span class="c1">// 実用的なクロージャの例</span>
<span class="kd">function</span> <span class="nx">createCounter</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">count</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
<span class="k">return</span> <span class="p">{</span>
<span class="na">increment</span><span class="p">:</span> <span class="p">()</span> <span class="o">=></span> <span class="o">++</span><span class="nx">count</span><span class="p">,</span>
<span class="na">decrement</span><span class="p">:</span> <span class="p">()</span> <span class="o">=></span> <span class="o">--</span><span class="nx">count</span><span class="p">,</span>
<span class="na">getCount</span><span class="p">:</span> <span class="p">()</span> <span class="o">=></span> <span class="nx">count</span>
<span class="p">};</span>
<span class="p">}</span>
<span class="kd">const</span> <span class="nx">counter</span> <span class="o">=</span> <span class="nx">createCounter</span><span class="p">();</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">counter</span><span class="p">.</span><span class="nx">increment</span><span class="p">());</span> <span class="c1">// 1</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">counter</span><span class="p">.</span><span class="nx">increment</span><span class="p">());</span> <span class="c1">// 2</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">counter</span><span class="p">.</span><span class="nx">getCount</span><span class="p">());</span> <span class="c1">// 2</span>
<span class="c1">// ブロックスコープ(let, const)</span>
<span class="p">{</span>
<span class="kd">let</span> <span class="nx">blockVar</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">ブロック内</span><span class="dl">"</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">blockConst</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">定数</span><span class="dl">"</span><span class="p">;</span>
<span class="c1">// これらはブロック外からアクセス不可</span>
<span class="p">}</span>
<span class="c1">// var は関数スコープ</span>
<span class="kd">function</span> <span class="nx">varExample</span><span class="p">()</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="kc">true</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">varVariable</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">var変数</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">varVariable</span><span class="p">);</span> <span class="c1">// アクセス可能(ホイスティング)</span>
<span class="p">}</span>
</code></pre></div></div>
<h2 id="dom操作">DOM操作</h2>
<h3 id="要素の取得">要素の取得</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// ID で取得</span>
<span class="kd">const</span> <span class="nx">element</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">myId</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// クラス名で取得</span>
<span class="kd">const</span> <span class="nx">elements</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="dl">"</span><span class="s2">myClass</span><span class="dl">"</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">firstElement</span> <span class="o">=</span> <span class="nx">elements</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
<span class="c1">// タグ名で取得</span>
<span class="kd">const</span> <span class="nx">paragraphs</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="dl">"</span><span class="s2">p</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// CSSセレクタで取得(推奨)</span>
<span class="kd">const</span> <span class="nx">element2</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#myId</span><span class="dl">"</span><span class="p">);</span> <span class="c1">// 最初の要素</span>
<span class="kd">const</span> <span class="nx">elements2</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="dl">"</span><span class="s2">.myClass</span><span class="dl">"</span><span class="p">);</span> <span class="c1">// 全ての要素</span>
<span class="c1">// 複雑なセレクタの例</span>
<span class="kd">const</span> <span class="nx">navLinks</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="dl">"</span><span class="s2">nav ul li a</span><span class="dl">"</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">firstParagraph</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">article p:first-child</span><span class="dl">"</span><span class="p">);</span>
</code></pre></div></div>
<h3 id="要素の操作">要素の操作</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// テキストコンテンツの操作</span>
<span class="kd">const</span> <span class="nx">title</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">h1</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">title</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">新しいタイトル</span><span class="dl">"</span><span class="p">;</span> <span class="c1">// HTMLタグは文字列として表示</span>
<span class="nx">title</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="dl">"</span><span class="s2"><strong>太字タイトル</strong></span><span class="dl">"</span><span class="p">;</span> <span class="c1">// HTMLタグも解釈</span>
<span class="c1">// 属性の操作</span>
<span class="kd">const</span> <span class="nx">link</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">a</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">link</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="dl">"</span><span class="s2">href</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">https://example.com</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">link</span><span class="p">.</span><span class="nx">getAttribute</span><span class="p">(</span><span class="dl">"</span><span class="s2">href</span><span class="dl">"</span><span class="p">);</span> <span class="c1">// "https://example.com"</span>
<span class="nx">link</span><span class="p">.</span><span class="nx">removeAttribute</span><span class="p">(</span><span class="dl">"</span><span class="s2">target</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// より簡単な属性アクセス</span>
<span class="nx">link</span><span class="p">.</span><span class="nx">href</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">https://google.com</span><span class="dl">"</span><span class="p">;</span>
<span class="nx">link</span><span class="p">.</span><span class="nx">target</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">_blank</span><span class="dl">"</span><span class="p">;</span>
<span class="c1">// クラスの操作</span>
<span class="kd">const</span> <span class="nx">button</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">button</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="dl">"</span><span class="s2">active</span><span class="dl">"</span><span class="p">);</span> <span class="c1">// クラス追加</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">remove</span><span class="p">(</span><span class="dl">"</span><span class="s2">disabled</span><span class="dl">"</span><span class="p">);</span> <span class="c1">// クラス削除</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">toggle</span><span class="p">(</span><span class="dl">"</span><span class="s2">highlighted</span><span class="dl">"</span><span class="p">);</span> <span class="c1">// クラスの切り替え</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">contains</span><span class="p">(</span><span class="dl">"</span><span class="s2">active</span><span class="dl">"</span><span class="p">);</span> <span class="c1">// クラスの存在確認</span>
<span class="c1">// スタイルの操作</span>
<span class="kd">const</span> <span class="nx">box</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">.box</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">box</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">backgroundColor</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">red</span><span class="dl">"</span><span class="p">;</span>
<span class="nx">box</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">fontSize</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">20px</span><span class="dl">"</span><span class="p">;</span>
<span class="nx">box</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">none</span><span class="dl">"</span><span class="p">;</span>
<span class="c1">// 複数スタイルの設定</span>
<span class="nb">Object</span><span class="p">.</span><span class="nx">assign</span><span class="p">(</span><span class="nx">box</span><span class="p">.</span><span class="nx">style</span><span class="p">,</span> <span class="p">{</span>
<span class="na">width</span><span class="p">:</span> <span class="dl">"</span><span class="s2">200px</span><span class="dl">"</span><span class="p">,</span>
<span class="na">height</span><span class="p">:</span> <span class="dl">"</span><span class="s2">200px</span><span class="dl">"</span><span class="p">,</span>
<span class="na">border</span><span class="p">:</span> <span class="dl">"</span><span class="s2">2px solid black</span><span class="dl">"</span>
<span class="p">});</span>
</code></pre></div></div>
<h3 id="要素の作成と追加">要素の作成と追加</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 新しい要素の作成</span>
<span class="kd">const</span> <span class="nx">newParagraph</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="dl">"</span><span class="s2">p</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">newParagraph</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">新しい段落です</span><span class="dl">"</span><span class="p">;</span>
<span class="nx">newParagraph</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">new-content</span><span class="dl">"</span><span class="p">;</span>
<span class="c1">// 要素の追加</span>
<span class="kd">const</span> <span class="nx">container</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#container</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">newParagraph</span><span class="p">);</span> <span class="c1">// 末尾に追加</span>
<span class="c1">// より柔軟な挿入</span>
<span class="kd">const</span> <span class="nx">referenceElement</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">.reference</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">insertBefore</span><span class="p">(</span><span class="nx">newParagraph</span><span class="p">,</span> <span class="nx">referenceElement</span><span class="p">);</span> <span class="c1">// 指定要素の前に挿入</span>
<span class="c1">// 新しいAPI(より便利)</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">insertAdjacentElement</span><span class="p">(</span><span class="dl">"</span><span class="s2">beforeend</span><span class="dl">"</span><span class="p">,</span> <span class="nx">newParagraph</span><span class="p">);</span> <span class="c1">// 末尾に追加</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">insertAdjacentElement</span><span class="p">(</span><span class="dl">"</span><span class="s2">afterbegin</span><span class="dl">"</span><span class="p">,</span> <span class="nx">newParagraph</span><span class="p">);</span> <span class="c1">// 先頭に追加</span>
<span class="c1">// HTMLを直接挿入</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">insertAdjacentHTML</span><span class="p">(</span><span class="dl">"</span><span class="s2">beforeend</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2"><p>HTMLで追加</p></span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// 要素の削除</span>
<span class="kd">const</span> <span class="nx">elementToRemove</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">.remove-me</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">elementToRemove</span><span class="p">.</span><span class="nx">remove</span><span class="p">();</span> <span class="c1">// 新しい方法</span>
<span class="c1">// elementToRemove.parentNode.removeChild(elementToRemove); // 古い方法</span>
<span class="c1">// 要素の置換</span>
<span class="kd">const</span> <span class="nx">oldElement</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">.old</span><span class="dl">"</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">newElement</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="dl">"</span><span class="s2">div</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">newElement</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">新しい要素</span><span class="dl">"</span><span class="p">;</span>
<span class="nx">oldElement</span><span class="p">.</span><span class="nx">replaceWith</span><span class="p">(</span><span class="nx">newElement</span><span class="p">);</span>
</code></pre></div></div>
<h2 id="イベント処理">イベント処理</h2>
<h3 id="イベントリスナーの追加">イベントリスナーの追加</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 基本的なイベントリスナー</span>
<span class="kd">const</span> <span class="nx">button</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#myButton</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ボタンがクリックされました</span><span class="dl">"</span><span class="p">);</span>
<span class="p">});</span>
<span class="c1">// アロー関数を使用</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ボタンがクリックされました</span><span class="dl">"</span><span class="p">);</span>
<span class="p">});</span>
<span class="c1">// 名前付き関数を使用</span>
<span class="kd">function</span> <span class="nx">handleClick</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ボタンがクリックされました</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="nx">handleClick</span><span class="p">);</span>
<span class="c1">// イベントオブジェクトの使用</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">イベントタイプ:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">event</span><span class="p">.</span><span class="nx">type</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ターゲット要素:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">event</span><span class="p">.</span><span class="nx">target</span><span class="p">);</span>
<span class="nx">event</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span> <span class="c1">// デフォルト動作を阻止</span>
<span class="p">});</span>
<span class="c1">// 一度だけ実行するイベント</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="nx">handleClick</span><span class="p">,</span> <span class="p">{</span> <span class="na">once</span><span class="p">:</span> <span class="kc">true</span> <span class="p">});</span>
<span class="c1">// イベントリスナーの削除</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">removeEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="nx">handleClick</span><span class="p">);</span>
</code></pre></div></div>
<h3 id="よく使用するイベント">よく使用するイベント</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// マウスイベント</span>
<span class="nx">element</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">クリック</span><span class="dl">"</span><span class="p">));</span>
<span class="nx">element</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">dblclick</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ダブルクリック</span><span class="dl">"</span><span class="p">));</span>
<span class="nx">element</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">mousedown</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">マウスボタン押下</span><span class="dl">"</span><span class="p">));</span>
<span class="nx">element</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">mouseup</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">マウスボタン離上</span><span class="dl">"</span><span class="p">));</span>
<span class="nx">element</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">mouseover</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">マウスオーバー</span><span class="dl">"</span><span class="p">));</span>
<span class="nx">element</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">mouseout</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">マウスアウト</span><span class="dl">"</span><span class="p">));</span>
<span class="nx">element</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">mousemove</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`マウス位置: (</span><span class="p">${</span><span class="nx">e</span><span class="p">.</span><span class="nx">clientX</span><span class="p">}</span><span class="s2">, </span><span class="p">${</span><span class="nx">e</span><span class="p">.</span><span class="nx">clientY</span><span class="p">}</span><span class="s2">)`</span><span class="p">);</span>
<span class="p">});</span>
<span class="c1">// キーボードイベント</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">keydown</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`キー押下: </span><span class="p">${</span><span class="nx">e</span><span class="p">.</span><span class="nx">key</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">key</span> <span class="o">===</span> <span class="dl">"</span><span class="s2">Enter</span><span class="dl">"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">Enterキーが押されました</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">keyup</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`キー離上: </span><span class="p">${</span><span class="nx">e</span><span class="p">.</span><span class="nx">key</span><span class="p">}</span><span class="s2">`</span><span class="p">));</span>
<span class="c1">// フォームイベント</span>
<span class="kd">const</span> <span class="nx">form</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#myForm</span><span class="dl">"</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">input</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#myInput</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">form</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">submit</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span> <span class="c1">// フォーム送信を阻止</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">フォーム送信</span><span class="dl">"</span><span class="p">);</span>
<span class="p">});</span>
<span class="nx">input</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">input</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`入力値: </span><span class="p">${</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="p">});</span>
<span class="nx">input</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">focus</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">フォーカス</span><span class="dl">"</span><span class="p">));</span>
<span class="nx">input</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">blur</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">フォーカス失う</span><span class="dl">"</span><span class="p">));</span>
<span class="c1">// ウィンドウイベント</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">load</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ページ読み込み完了</span><span class="dl">"</span><span class="p">));</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">resize</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`ウィンドウサイズ: </span><span class="p">${</span><span class="nb">window</span><span class="p">.</span><span class="nx">innerWidth</span><span class="p">}</span><span class="s2">x</span><span class="p">${</span><span class="nb">window</span><span class="p">.</span><span class="nx">innerHeight</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="p">});</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">scroll</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`スクロール位置: </span><span class="p">${</span><span class="nb">window</span><span class="p">.</span><span class="nx">scrollY</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="p">});</span>
<span class="c1">// DOMコンテンツ読み込み完了(推奨)</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">DOMContentLoaded</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">DOM読み込み完了</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// ここに初期化コードを記述</span>
<span class="p">});</span>
</code></pre></div></div>
<h3 id="イベント委譲">イベント委譲</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 動的に追加される要素に対するイベント処理</span>
<span class="kd">const</span> <span class="nx">container</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#container</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// 子要素(ボタン)に対するクリックイベントを親要素で処理</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">matches</span><span class="p">(</span><span class="dl">"</span><span class="s2">button</span><span class="dl">"</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ボタンがクリックされました:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">textContent</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="c1">// 新しいボタンを動的に追加</span>
<span class="kd">function</span> <span class="nx">addButton</span><span class="p">(</span><span class="nx">text</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">button</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="dl">"</span><span class="s2">button</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="nx">text</span><span class="p">;</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">button</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">addButton</span><span class="p">(</span><span class="dl">"</span><span class="s2">新しいボタン1</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">addButton</span><span class="p">(</span><span class="dl">"</span><span class="s2">新しいボタン2</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// これらのボタンも自動的にイベントが適用される</span>
</code></pre></div></div>
<h2 id="非同期処理">非同期処理</h2>
<h3 id="promise">Promise</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// Promiseの基本</span>
<span class="kd">const</span> <span class="nx">myPromise</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Promise</span><span class="p">((</span><span class="nx">resolve</span><span class="p">,</span> <span class="nx">reject</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="c1">// 非同期処理のシミュレーション</span>
<span class="nx">setTimeout</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">success</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span> <span class="o">></span> <span class="mf">0.5</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">success</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">resolve</span><span class="p">(</span><span class="dl">"</span><span class="s2">成功しました!</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">reject</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラーが発生しました</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">},</span> <span class="mi">1000</span><span class="p">);</span>
<span class="p">});</span>
<span class="c1">// Promiseの使用</span>
<span class="nx">myPromise</span>
<span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="nx">result</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">成功:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">result</span><span class="p">);</span>
<span class="p">})</span>
<span class="p">.</span><span class="k">catch</span><span class="p">(</span><span class="nx">error</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
<span class="p">})</span>
<span class="p">.</span><span class="k">finally</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">処理完了</span><span class="dl">"</span><span class="p">);</span>
<span class="p">});</span>
<span class="c1">// Promiseチェーン</span>
<span class="kd">function</span> <span class="nx">fetchUser</span><span class="p">(</span><span class="nx">id</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="k">new</span> <span class="nb">Promise</span><span class="p">(</span><span class="nx">resolve</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">setTimeout</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">resolve</span><span class="p">({</span> <span class="nx">id</span><span class="p">,</span> <span class="na">name</span><span class="p">:</span> <span class="s2">`ユーザー</span><span class="p">${</span><span class="nx">id</span><span class="p">}</span><span class="s2">`</span> <span class="p">});</span>
<span class="p">},</span> <span class="mi">500</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">fetchUserPosts</span><span class="p">(</span><span class="nx">userId</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="k">new</span> <span class="nb">Promise</span><span class="p">(</span><span class="nx">resolve</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">setTimeout</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">resolve</span><span class="p">([</span>
<span class="p">{</span> <span class="na">id</span><span class="p">:</span> <span class="mi">1</span><span class="p">,</span> <span class="na">title</span><span class="p">:</span> <span class="dl">"</span><span class="s2">投稿1</span><span class="dl">"</span><span class="p">,</span> <span class="nx">userId</span> <span class="p">},</span>
<span class="p">{</span> <span class="na">id</span><span class="p">:</span> <span class="mi">2</span><span class="p">,</span> <span class="na">title</span><span class="p">:</span> <span class="dl">"</span><span class="s2">投稿2</span><span class="dl">"</span><span class="p">,</span> <span class="nx">userId</span> <span class="p">}</span>
<span class="p">]);</span>
<span class="p">},</span> <span class="mi">500</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="c1">// チェーンの実行</span>
<span class="nx">fetchUser</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span>
<span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="nx">user</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ユーザー取得:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">user</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">fetchUserPosts</span><span class="p">(</span><span class="nx">user</span><span class="p">.</span><span class="nx">id</span><span class="p">);</span>
<span class="p">})</span>
<span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="nx">posts</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">投稿取得:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">posts</span><span class="p">);</span>
<span class="p">})</span>
<span class="p">.</span><span class="k">catch</span><span class="p">(</span><span class="nx">error</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
<span class="p">});</span>
</code></pre></div></div>
<h3 id="asyncawait">async/await</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// async/awaitを使用した非同期処理</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">getUserData</span><span class="p">(</span><span class="nx">id</span><span class="p">)</span> <span class="p">{</span>
<span class="k">try</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">user</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">fetchUser</span><span class="p">(</span><span class="nx">id</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ユーザー取得:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">user</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">posts</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">fetchUserPosts</span><span class="p">(</span><span class="nx">user</span><span class="p">.</span><span class="nx">id</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">投稿取得:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">posts</span><span class="p">);</span>
<span class="k">return</span> <span class="p">{</span> <span class="nx">user</span><span class="p">,</span> <span class="nx">posts</span> <span class="p">};</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
<span class="k">throw</span> <span class="nx">error</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// async関数の呼び出し</span>
<span class="nx">getUserData</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span>
<span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="nx">data</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">完了:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">data</span><span class="p">))</span>
<span class="p">.</span><span class="k">catch</span><span class="p">(</span><span class="nx">error</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">処理失敗:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">));</span>
<span class="c1">// 複数の非同期処理を並行実行</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">fetchMultipleUsers</span><span class="p">()</span> <span class="p">{</span>
<span class="k">try</span> <span class="p">{</span>
<span class="c1">// 並行実行(高速)</span>
<span class="kd">const</span> <span class="p">[</span><span class="nx">user1</span><span class="p">,</span> <span class="nx">user2</span><span class="p">,</span> <span class="nx">user3</span><span class="p">]</span> <span class="o">=</span> <span class="k">await</span> <span class="nb">Promise</span><span class="p">.</span><span class="nx">all</span><span class="p">([</span>
<span class="nx">fetchUser</span><span class="p">(</span><span class="mi">1</span><span class="p">),</span>
<span class="nx">fetchUser</span><span class="p">(</span><span class="mi">2</span><span class="p">),</span>
<span class="nx">fetchUser</span><span class="p">(</span><span class="mi">3</span><span class="p">)</span>
<span class="p">]);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">全ユーザー取得完了:</span><span class="dl">"</span><span class="p">,</span> <span class="p">{</span> <span class="nx">user1</span><span class="p">,</span> <span class="nx">user2</span><span class="p">,</span> <span class="nx">user3</span> <span class="p">});</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">いずれかでエラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// Promise.allSettled(エラーがあっても全て実行)</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">fetchWithErrors</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">results</span> <span class="o">=</span> <span class="k">await</span> <span class="nb">Promise</span><span class="p">.</span><span class="nx">allSettled</span><span class="p">([</span>
<span class="nx">fetchUser</span><span class="p">(</span><span class="mi">1</span><span class="p">),</span>
<span class="nb">Promise</span><span class="p">.</span><span class="nx">reject</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラーのテスト</span><span class="dl">"</span><span class="p">),</span>
<span class="nx">fetchUser</span><span class="p">(</span><span class="mi">3</span><span class="p">)</span>
<span class="p">]);</span>
<span class="nx">results</span><span class="p">.</span><span class="nx">forEach</span><span class="p">((</span><span class="nx">result</span><span class="p">,</span> <span class="nx">index</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">result</span><span class="p">.</span><span class="nx">status</span> <span class="o">===</span> <span class="dl">"</span><span class="s2">fulfilled</span><span class="dl">"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`結果</span><span class="p">${</span><span class="nx">index</span><span class="p">}</span><span class="s2">:`</span><span class="p">,</span> <span class="nx">result</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`エラー</span><span class="p">${</span><span class="nx">index</span><span class="p">}</span><span class="s2">:`</span><span class="p">,</span> <span class="nx">result</span><span class="p">.</span><span class="nx">reason</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="p">}</span>
</code></pre></div></div>
<h3 id="fetch-api">Fetch API</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 基本的なGET リクエスト</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">fetchData</span><span class="p">()</span> <span class="p">{</span>
<span class="k">try</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">response</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">fetch</span><span class="p">(</span><span class="dl">"</span><span class="s2">https://jsonplaceholder.typicode.com/posts/1</span><span class="dl">"</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">response</span><span class="p">.</span><span class="nx">ok</span><span class="p">)</span> <span class="p">{</span>
<span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="s2">`HTTP error! status: </span><span class="p">${</span><span class="nx">response</span><span class="p">.</span><span class="nx">status</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="p">}</span>
<span class="kd">const</span> <span class="nx">data</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">response</span><span class="p">.</span><span class="nx">json</span><span class="p">();</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">取得データ:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">data</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">data</span><span class="p">;</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">取得エラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// POST リクエスト</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">createPost</span><span class="p">(</span><span class="nx">postData</span><span class="p">)</span> <span class="p">{</span>
<span class="k">try</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">response</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">fetch</span><span class="p">(</span><span class="dl">"</span><span class="s2">https://jsonplaceholder.typicode.com/posts</span><span class="dl">"</span><span class="p">,</span> <span class="p">{</span>
<span class="na">method</span><span class="p">:</span> <span class="dl">"</span><span class="s2">POST</span><span class="dl">"</span><span class="p">,</span>
<span class="na">headers</span><span class="p">:</span> <span class="p">{</span>
<span class="dl">"</span><span class="s2">Content-Type</span><span class="dl">"</span><span class="p">:</span> <span class="dl">"</span><span class="s2">application/json</span><span class="dl">"</span><span class="p">,</span>
<span class="p">},</span>
<span class="na">body</span><span class="p">:</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">postData</span><span class="p">)</span>
<span class="p">});</span>
<span class="kd">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">response</span><span class="p">.</span><span class="nx">json</span><span class="p">();</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">作成結果:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">result</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">result</span><span class="p">;</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">作成エラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// 使用例</span>
<span class="nx">createPost</span><span class="p">({</span>
<span class="na">title</span><span class="p">:</span> <span class="dl">"</span><span class="s2">新しい投稿</span><span class="dl">"</span><span class="p">,</span>
<span class="na">body</span><span class="p">:</span> <span class="dl">"</span><span class="s2">投稿内容</span><span class="dl">"</span><span class="p">,</span>
<span class="na">userId</span><span class="p">:</span> <span class="mi">1</span>
<span class="p">});</span>
<span class="c1">// ファイルアップロード</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">uploadFile</span><span class="p">(</span><span class="nx">file</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">formData</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">FormData</span><span class="p">();</span>
<span class="nx">formData</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="dl">"</span><span class="s2">file</span><span class="dl">"</span><span class="p">,</span> <span class="nx">file</span><span class="p">);</span>
<span class="k">try</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">response</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">fetch</span><span class="p">(</span><span class="dl">"</span><span class="s2">/upload</span><span class="dl">"</span><span class="p">,</span> <span class="p">{</span>
<span class="na">method</span><span class="p">:</span> <span class="dl">"</span><span class="s2">POST</span><span class="dl">"</span><span class="p">,</span>
<span class="na">body</span><span class="p">:</span> <span class="nx">formData</span>
<span class="p">});</span>
<span class="kd">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">response</span><span class="p">.</span><span class="nx">json</span><span class="p">();</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">アップロード完了:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">result</span><span class="p">);</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">アップロードエラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// AbortController でリクエストをキャンセル</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">cancellableRequest</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">controller</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">AbortController</span><span class="p">();</span>
<span class="c1">// 5秒後にキャンセル</span>
<span class="nx">setTimeout</span><span class="p">(()</span> <span class="o">=></span> <span class="nx">controller</span><span class="p">.</span><span class="nx">abort</span><span class="p">(),</span> <span class="mi">5000</span><span class="p">);</span>
<span class="k">try</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">response</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">fetch</span><span class="p">(</span><span class="dl">"</span><span class="s2">https://httpbin.org/delay/10</span><span class="dl">"</span><span class="p">,</span> <span class="p">{</span>
<span class="na">signal</span><span class="p">:</span> <span class="nx">controller</span><span class="p">.</span><span class="nx">signal</span>
<span class="p">});</span>
<span class="kd">const</span> <span class="nx">data</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">response</span><span class="p">.</span><span class="nx">json</span><span class="p">();</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">データ:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">data</span><span class="p">);</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">error</span><span class="p">.</span><span class="nx">name</span> <span class="o">===</span> <span class="dl">"</span><span class="s2">AbortError</span><span class="dl">"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">リクエストがキャンセルされました</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>
<h2 id="モダンjavascriptes6">モダンJavaScript(ES6+)</h2>
<h3 id="分割代入">分割代入</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 配列の分割代入</span>
<span class="kd">const</span> <span class="nx">colors</span> <span class="o">=</span> <span class="p">[</span><span class="dl">"</span><span class="s2">red</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">green</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">blue</span><span class="dl">"</span><span class="p">];</span>
<span class="kd">const</span> <span class="p">[</span><span class="nx">first</span><span class="p">,</span> <span class="nx">second</span><span class="p">,</span> <span class="nx">third</span><span class="p">]</span> <span class="o">=</span> <span class="nx">colors</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">first</span><span class="p">);</span> <span class="c1">// "red"</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">second</span><span class="p">);</span> <span class="c1">// "green"</span>
<span class="c1">// デフォルト値</span>
<span class="kd">const</span> <span class="p">[</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">,</span> <span class="nx">c</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">yellow</span><span class="dl">"</span><span class="p">]</span> <span class="o">=</span> <span class="p">[</span><span class="dl">"</span><span class="s2">red</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">green</span><span class="dl">"</span><span class="p">];</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">c</span><span class="p">);</span> <span class="c1">// "yellow"</span>
<span class="c1">// 値の交換</span>
<span class="kd">let</span> <span class="nx">x</span> <span class="o">=</span> <span class="mi">1</span><span class="p">,</span> <span class="nx">y</span> <span class="o">=</span> <span class="mi">2</span><span class="p">;</span>
<span class="p">[</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">]</span> <span class="o">=</span> <span class="p">[</span><span class="nx">y</span><span class="p">,</span> <span class="nx">x</span><span class="p">];</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">);</span> <span class="c1">// 2, 1</span>
<span class="c1">// オブジェクトの分割代入</span>
<span class="kd">const</span> <span class="nx">person</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">name</span><span class="p">:</span> <span class="dl">"</span><span class="s2">田中太郎</span><span class="dl">"</span><span class="p">,</span>
<span class="na">age</span><span class="p">:</span> <span class="mi">30</span><span class="p">,</span>
<span class="na">city</span><span class="p">:</span> <span class="dl">"</span><span class="s2">東京</span><span class="dl">"</span>
<span class="p">};</span>
<span class="kd">const</span> <span class="p">{</span> <span class="nx">name</span><span class="p">,</span> <span class="nx">age</span><span class="p">,</span> <span class="nx">city</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">person</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">name</span><span class="p">);</span> <span class="c1">// "田中太郎"</span>
<span class="c1">// プロパティ名を変更</span>
<span class="kd">const</span> <span class="p">{</span> <span class="na">name</span><span class="p">:</span> <span class="nx">fullName</span><span class="p">,</span> <span class="na">age</span><span class="p">:</span> <span class="nx">years</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">person</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">fullName</span><span class="p">);</span> <span class="c1">// "田中太郎"</span>
<span class="c1">// ネストした分割代入</span>
<span class="kd">const</span> <span class="nx">user</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">id</span><span class="p">:</span> <span class="mi">1</span><span class="p">,</span>
<span class="na">info</span><span class="p">:</span> <span class="p">{</span>
<span class="na">name</span><span class="p">:</span> <span class="dl">"</span><span class="s2">太郎</span><span class="dl">"</span><span class="p">,</span>
<span class="na">contact</span><span class="p">:</span> <span class="p">{</span>
<span class="na">email</span><span class="p">:</span> <span class="dl">"</span><span class="s2">taro@example.com</span><span class="dl">"</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="kd">const</span> <span class="p">{</span> <span class="na">info</span><span class="p">:</span> <span class="p">{</span> <span class="na">name</span><span class="p">:</span> <span class="nx">userName</span><span class="p">,</span> <span class="na">contact</span><span class="p">:</span> <span class="p">{</span> <span class="nx">email</span> <span class="p">}</span> <span class="p">}</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">user</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">userName</span><span class="p">);</span> <span class="c1">// "太郎"</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">email</span><span class="p">);</span> <span class="c1">// "taro@example.com"</span>
<span class="c1">// 関数の引数での分割代入</span>
<span class="kd">function</span> <span class="nx">greetUser</span><span class="p">({</span> <span class="nx">name</span><span class="p">,</span> <span class="nx">age</span> <span class="o">=</span> <span class="mi">0</span> <span class="p">})</span> <span class="p">{</span>
<span class="k">return</span> <span class="s2">`こんにちは、</span><span class="p">${</span><span class="nx">name</span><span class="p">}</span><span class="s2">さん(</span><span class="p">${</span><span class="nx">age</span><span class="p">}</span><span class="s2">歳)`</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">greetUser</span><span class="p">({</span> <span class="na">name</span><span class="p">:</span> <span class="dl">"</span><span class="s2">花子</span><span class="dl">"</span><span class="p">,</span> <span class="na">age</span><span class="p">:</span> <span class="mi">25</span> <span class="p">}));</span> <span class="c1">// "こんにちは、花子さん(25歳)"</span>
</code></pre></div></div>
<h3 id="モジュール">モジュール</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// math.js(エクスポート)</span>
<span class="k">export</span> <span class="kd">const</span> <span class="nx">PI</span> <span class="o">=</span> <span class="mf">3.14159</span><span class="p">;</span>
<span class="k">export</span> <span class="kd">function</span> <span class="nx">add</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">a</span> <span class="o">+</span> <span class="nx">b</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">export</span> <span class="kd">function</span> <span class="nx">multiply</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">a</span> <span class="o">*</span> <span class="nx">b</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// デフォルトエクスポート</span>
<span class="k">export</span> <span class="k">default</span> <span class="kd">function</span> <span class="nx">subtract</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">a</span> <span class="o">-</span> <span class="nx">b</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// main.js(インポート)</span>
<span class="k">import</span> <span class="nx">subtract</span><span class="p">,</span> <span class="p">{</span> <span class="nx">PI</span><span class="p">,</span> <span class="nx">add</span><span class="p">,</span> <span class="nx">multiply</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">./math.js</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">PI</span><span class="p">);</span> <span class="c1">// 3.14159</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">add</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">));</span> <span class="c1">// 5</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">multiply</span><span class="p">(</span><span class="mi">4</span><span class="p">,</span> <span class="mi">5</span><span class="p">));</span> <span class="c1">// 20</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">subtract</span><span class="p">(</span><span class="mi">10</span><span class="p">,</span> <span class="mi">3</span><span class="p">));</span> <span class="c1">// 7</span>
<span class="c1">// 名前を変更してインポート</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">add</span> <span class="k">as</span> <span class="nx">sum</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">./math.js</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">sum</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">));</span> <span class="c1">// 3</span>
<span class="c1">// 全てインポート</span>
<span class="k">import</span> <span class="o">*</span> <span class="k">as</span> <span class="nx">MathUtils</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">./math.js</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">MathUtils</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">));</span> <span class="c1">// 3</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">MathUtils</span><span class="p">.</span><span class="nx">PI</span><span class="p">);</span> <span class="c1">// 3.14159</span>
<span class="c1">// 動的インポート(非同期)</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">loadMathModule</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">mathModule</span> <span class="o">=</span> <span class="k">await</span> <span class="k">import</span><span class="p">(</span><span class="dl">'</span><span class="s1">./math.js</span><span class="dl">'</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">mathModule</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">));</span> <span class="c1">// 3</span>
<span class="p">}</span>
</code></pre></div></div>
<h3 id="クラス">クラス</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// ES6 クラス</span>
<span class="kd">class</span> <span class="nx">Person</span> <span class="p">{</span>
<span class="c1">// コンストラクタ</span>
<span class="kd">constructor</span><span class="p">(</span><span class="nx">name</span><span class="p">,</span> <span class="nx">age</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">name</span> <span class="o">=</span> <span class="nx">name</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">age</span> <span class="o">=</span> <span class="nx">age</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// メソッド</span>
<span class="nx">greet</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="s2">`こんにちは、私は</span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">name</span><span class="p">}</span><span class="s2">です`</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// ゲッター</span>
<span class="kd">get</span> <span class="nx">info</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="s2">`</span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">name</span><span class="p">}</span><span class="s2">(</span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">age</span><span class="p">}</span><span class="s2">歳)`</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// セッター</span>
<span class="kd">set</span> <span class="nx">age</span><span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">value</span> <span class="o"><</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
<span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="dl">"</span><span class="s2">年齢は0以上である必要があります</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">_age</span> <span class="o">=</span> <span class="nx">value</span><span class="p">;</span>
<span class="p">}</span>
<span class="kd">get</span> <span class="nx">age</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">_age</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// 静的メソッド</span>
<span class="kd">static</span> <span class="nx">createAdult</span><span class="p">(</span><span class="nx">name</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">(</span><span class="nx">name</span><span class="p">,</span> <span class="mi">20</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// クラスの使用</span>
<span class="kd">const</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">(</span><span class="dl">"</span><span class="s2">太郎</span><span class="dl">"</span><span class="p">,</span> <span class="mi">25</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">person</span><span class="p">.</span><span class="nx">greet</span><span class="p">());</span> <span class="c1">// "こんにちは、私は太郎です"</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">person</span><span class="p">.</span><span class="nx">info</span><span class="p">);</span> <span class="c1">// "太郎(25歳)"</span>
<span class="c1">// 静的メソッドの使用</span>
<span class="kd">const</span> <span class="nx">adult</span> <span class="o">=</span> <span class="nx">Person</span><span class="p">.</span><span class="nx">createAdult</span><span class="p">(</span><span class="dl">"</span><span class="s2">花子</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// 継承</span>
<span class="kd">class</span> <span class="nx">Student</span> <span class="kd">extends</span> <span class="nx">Person</span> <span class="p">{</span>
<span class="kd">constructor</span><span class="p">(</span><span class="nx">name</span><span class="p">,</span> <span class="nx">age</span><span class="p">,</span> <span class="nx">school</span><span class="p">)</span> <span class="p">{</span>
<span class="k">super</span><span class="p">(</span><span class="nx">name</span><span class="p">,</span> <span class="nx">age</span><span class="p">);</span> <span class="c1">// 親クラスのコンストラクタを呼び出し</span>
<span class="k">this</span><span class="p">.</span><span class="nx">school</span> <span class="o">=</span> <span class="nx">school</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">greet</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="s2">`</span><span class="p">${</span><span class="k">super</span><span class="p">.</span><span class="nx">greet</span><span class="p">()}</span><span class="s2">、</span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">school</span><span class="p">}</span><span class="s2">の学生です`</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">study</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="s2">`</span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">name</span><span class="p">}</span><span class="s2">は勉強しています`</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">const</span> <span class="nx">student</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Student</span><span class="p">(</span><span class="dl">"</span><span class="s2">次郎</span><span class="dl">"</span><span class="p">,</span> <span class="mi">18</span><span class="p">,</span> <span class="dl">"</span><span class="s2">東京大学</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">student</span><span class="p">.</span><span class="nx">greet</span><span class="p">());</span> <span class="c1">// "こんにちは、私は次郎です、東京大学の学生です"</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">student</span><span class="p">.</span><span class="nx">study</span><span class="p">());</span> <span class="c1">// "次郎は勉強しています"</span>
<span class="c1">// プライベートフィールド(ES2022+)</span>
<span class="kd">class</span> <span class="nx">BankAccount</span> <span class="p">{</span>
<span class="err">#</span><span class="nx">balance</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="c1">// プライベートフィールド</span>
<span class="kd">constructor</span><span class="p">(</span><span class="nx">initialBalance</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="err">#</span><span class="nx">balance</span> <span class="o">=</span> <span class="nx">initialBalance</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">deposit</span><span class="p">(</span><span class="nx">amount</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="err">#</span><span class="nx">balance</span> <span class="o">+=</span> <span class="nx">amount</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">getBalance</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="err">#</span><span class="nx">balance</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// プライベートメソッド</span>
<span class="err">#</span><span class="nx">calculateInterest</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="err">#</span><span class="nx">balance</span> <span class="o">*</span> <span class="mf">0.01</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">const</span> <span class="nx">account</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">BankAccount</span><span class="p">(</span><span class="mi">1000</span><span class="p">);</span>
<span class="nx">account</span><span class="p">.</span><span class="nx">deposit</span><span class="p">(</span><span class="mi">500</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">account</span><span class="p">.</span><span class="nx">getBalance</span><span class="p">());</span> <span class="c1">// 1500</span>
<span class="c1">// console.log(account.#balance); // エラー: プライベートフィールドにはアクセス不可</span>
</code></pre></div></div>
<h2 id="エラーハンドリング">エラーハンドリング</h2>
<h3 id="try-catch文">try-catch文</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 基本的なエラーハンドリング</span>
<span class="k">try</span> <span class="p">{</span>
<span class="c1">// エラーが発生する可能性のあるコード</span>
<span class="kd">let</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">riskyOperation</span><span class="p">();</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">成功:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">result</span><span class="p">);</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="c1">// エラーが発生した場合の処理</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラーが発生しました:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
<span class="p">}</span> <span class="k">finally</span> <span class="p">{</span>
<span class="c1">// 必ず実行される処理</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">処理完了</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="c1">// 異なるタイプのエラーの処理</span>
<span class="kd">function</span> <span class="nx">parseJSON</span><span class="p">(</span><span class="nx">jsonString</span><span class="p">)</span> <span class="p">{</span>
<span class="k">try</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="nx">jsonString</span><span class="p">);</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">error</span> <span class="k">instanceof</span> <span class="nx">SyntaxError</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">JSON形式が正しくありません:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">予期しないエラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">return</span> <span class="kc">null</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// カスタムエラー</span>
<span class="kd">class</span> <span class="nx">ValidationError</span> <span class="kd">extends</span> <span class="nb">Error</span> <span class="p">{</span>
<span class="kd">constructor</span><span class="p">(</span><span class="nx">message</span><span class="p">,</span> <span class="nx">field</span><span class="p">)</span> <span class="p">{</span>
<span class="k">super</span><span class="p">(</span><span class="nx">message</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">name</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">ValidationError</span><span class="dl">"</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">field</span> <span class="o">=</span> <span class="nx">field</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">validateEmail</span><span class="p">(</span><span class="nx">email</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">email</span><span class="p">.</span><span class="nx">includes</span><span class="p">(</span><span class="dl">"</span><span class="s2">@</span><span class="dl">"</span><span class="p">))</span> <span class="p">{</span>
<span class="k">throw</span> <span class="k">new</span> <span class="nx">ValidationError</span><span class="p">(</span><span class="dl">"</span><span class="s2">有効なメールアドレスではありません</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">email</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// カスタムエラーの使用</span>
<span class="k">try</span> <span class="p">{</span>
<span class="nx">validateEmail</span><span class="p">(</span><span class="dl">"</span><span class="s2">invalid-email</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">error</span> <span class="k">instanceof</span> <span class="nx">ValidationError</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`検証エラー(</span><span class="p">${</span><span class="nx">error</span><span class="p">.</span><span class="nx">field</span><span class="p">}</span><span class="s2">): </span><span class="p">${</span><span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">予期しないエラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// async/await でのエラーハンドリング</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">fetchUserData</span><span class="p">(</span><span class="nx">id</span><span class="p">)</span> <span class="p">{</span>
<span class="k">try</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">response</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">fetch</span><span class="p">(</span><span class="s2">`/api/users/</span><span class="p">${</span><span class="nx">id</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">response</span><span class="p">.</span><span class="nx">ok</span><span class="p">)</span> <span class="p">{</span>
<span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="s2">`ユーザー取得失敗: </span><span class="p">${</span><span class="nx">response</span><span class="p">.</span><span class="nx">status</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="p">}</span>
<span class="kd">const</span> <span class="nx">userData</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">response</span><span class="p">.</span><span class="nx">json</span><span class="p">();</span>
<span class="k">return</span> <span class="nx">userData</span><span class="p">;</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ユーザーデータ取得エラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
<span class="k">throw</span> <span class="nx">error</span><span class="p">;</span> <span class="c1">// エラーを再度投げる</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// エラーのロギング</span>
<span class="kd">function</span> <span class="nx">logError</span><span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="dl">"</span><span class="s2">Error:</span><span class="dl">"</span><span class="p">,</span> <span class="p">{</span>
<span class="na">message</span><span class="p">:</span> <span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">,</span>
<span class="na">stack</span><span class="p">:</span> <span class="nx">error</span><span class="p">.</span><span class="nx">stack</span><span class="p">,</span>
<span class="na">timestamp</span><span class="p">:</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">().</span><span class="nx">toISOString</span><span class="p">()</span>
<span class="p">});</span>
<span class="p">}</span>
</code></pre></div></div>
<h2 id="ブラウザapi">ブラウザAPI</h2>
<h3 id="local-storage">Local Storage</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// データの保存</span>
<span class="nx">localStorage</span><span class="p">.</span><span class="nx">setItem</span><span class="p">(</span><span class="dl">"</span><span class="s2">username</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">田中太郎</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">localStorage</span><span class="p">.</span><span class="nx">setItem</span><span class="p">(</span><span class="dl">"</span><span class="s2">settings</span><span class="dl">"</span><span class="p">,</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">({</span>
<span class="na">theme</span><span class="p">:</span> <span class="dl">"</span><span class="s2">dark</span><span class="dl">"</span><span class="p">,</span>
<span class="na">language</span><span class="p">:</span> <span class="dl">"</span><span class="s2">ja</span><span class="dl">"</span>
<span class="p">}));</span>
<span class="c1">// データの取得</span>
<span class="kd">const</span> <span class="nx">username</span> <span class="o">=</span> <span class="nx">localStorage</span><span class="p">.</span><span class="nx">getItem</span><span class="p">(</span><span class="dl">"</span><span class="s2">username</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">username</span><span class="p">);</span> <span class="c1">// "田中太郎"</span>
<span class="kd">const</span> <span class="nx">settings</span> <span class="o">=</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="nx">localStorage</span><span class="p">.</span><span class="nx">getItem</span><span class="p">(</span><span class="dl">"</span><span class="s2">settings</span><span class="dl">"</span><span class="p">));</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">settings</span><span class="p">);</span> <span class="c1">// { theme: "dark", language: "ja" }</span>
<span class="c1">// データの削除</span>
<span class="nx">localStorage</span><span class="p">.</span><span class="nx">removeItem</span><span class="p">(</span><span class="dl">"</span><span class="s2">username</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// 全データの削除</span>
<span class="nx">localStorage</span><span class="p">.</span><span class="nx">clear</span><span class="p">();</span>
<span class="c1">// ストレージの変更を監視</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">storage</span><span class="dl">"</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ストレージが変更されました:</span><span class="dl">"</span><span class="p">,</span> <span class="p">{</span>
<span class="na">key</span><span class="p">:</span> <span class="nx">e</span><span class="p">.</span><span class="nx">key</span><span class="p">,</span>
<span class="na">oldValue</span><span class="p">:</span> <span class="nx">e</span><span class="p">.</span><span class="nx">oldValue</span><span class="p">,</span>
<span class="na">newValue</span><span class="p">:</span> <span class="nx">e</span><span class="p">.</span><span class="nx">newValue</span>
<span class="p">});</span>
<span class="p">});</span>
<span class="c1">// セッションストレージ(タブを閉じると削除される)</span>
<span class="nx">sessionStorage</span><span class="p">.</span><span class="nx">setItem</span><span class="p">(</span><span class="dl">"</span><span class="s2">temporary</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">一時的なデータ</span><span class="dl">"</span><span class="p">);</span>
</code></pre></div></div>
<h3 id="geolocation-api">Geolocation API</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 現在位置の取得</span>
<span class="k">if</span> <span class="p">(</span><span class="dl">"</span><span class="s2">geolocation</span><span class="dl">"</span> <span class="k">in</span> <span class="nb">navigator</span><span class="p">)</span> <span class="p">{</span>
<span class="nb">navigator</span><span class="p">.</span><span class="nx">geolocation</span><span class="p">.</span><span class="nx">getCurrentPosition</span><span class="p">(</span>
<span class="kd">function</span><span class="p">(</span><span class="nx">position</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">latitude</span> <span class="o">=</span> <span class="nx">position</span><span class="p">.</span><span class="nx">coords</span><span class="p">.</span><span class="nx">latitude</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">longitude</span> <span class="o">=</span> <span class="nx">position</span><span class="p">.</span><span class="nx">coords</span><span class="p">.</span><span class="nx">longitude</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`現在位置: </span><span class="p">${</span><span class="nx">latitude</span><span class="p">}</span><span class="s2">, </span><span class="p">${</span><span class="nx">longitude</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="p">},</span>
<span class="kd">function</span><span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">位置取得エラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
<span class="p">},</span>
<span class="p">{</span>
<span class="na">enableHighAccuracy</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> <span class="c1">// 高精度</span>
<span class="na">timeout</span><span class="p">:</span> <span class="mi">10000</span><span class="p">,</span> <span class="c1">// タイムアウト(10秒)</span>
<span class="na">maximumAge</span><span class="p">:</span> <span class="mi">60000</span> <span class="c1">// キャッシュ有効期間(1分)</span>
<span class="p">}</span>
<span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">Geolocation APIはサポートされていません</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="c1">// 位置の監視</span>
<span class="kd">const</span> <span class="nx">watchId</span> <span class="o">=</span> <span class="nb">navigator</span><span class="p">.</span><span class="nx">geolocation</span><span class="p">.</span><span class="nx">watchPosition</span><span class="p">(</span>
<span class="kd">function</span><span class="p">(</span><span class="nx">position</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">位置が変更されました:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">position</span><span class="p">.</span><span class="nx">coords</span><span class="p">);</span>
<span class="p">},</span>
<span class="kd">function</span><span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">監視エラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">);</span>
<span class="c1">// 監視の停止</span>
<span class="c1">// navigator.geolocation.clearWatch(watchId);</span>
</code></pre></div></div>
<h3 id="notification-api">Notification API</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 通知の許可を要求</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">requestNotificationPermission</span><span class="p">()</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="dl">"</span><span class="s2">Notification</span><span class="dl">"</span> <span class="k">in</span> <span class="nb">window</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">permission</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">Notification</span><span class="p">.</span><span class="nx">requestPermission</span><span class="p">();</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">通知許可:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">permission</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">permission</span> <span class="o">===</span> <span class="dl">"</span><span class="s2">granted</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// 通知の表示</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">showNotification</span><span class="p">(</span><span class="nx">title</span><span class="p">,</span> <span class="nx">options</span> <span class="o">=</span> <span class="p">{})</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">hasPermission</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">requestNotificationPermission</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">hasPermission</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">notification</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Notification</span><span class="p">(</span><span class="nx">title</span><span class="p">,</span> <span class="p">{</span>
<span class="na">body</span><span class="p">:</span> <span class="nx">options</span><span class="p">.</span><span class="nx">body</span> <span class="o">||</span> <span class="dl">""</span><span class="p">,</span>
<span class="na">icon</span><span class="p">:</span> <span class="nx">options</span><span class="p">.</span><span class="nx">icon</span> <span class="o">||</span> <span class="dl">"</span><span class="s2">/default-icon.png</span><span class="dl">"</span><span class="p">,</span>
<span class="na">tag</span><span class="p">:</span> <span class="nx">options</span><span class="p">.</span><span class="nx">tag</span> <span class="o">||</span> <span class="dl">"</span><span class="s2">default</span><span class="dl">"</span><span class="p">,</span>
<span class="p">...</span><span class="nx">options</span>
<span class="p">});</span>
<span class="nx">notification</span><span class="p">.</span><span class="nx">onclick</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">通知がクリックされました</span><span class="dl">"</span><span class="p">);</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">focus</span><span class="p">();</span>
<span class="k">this</span><span class="p">.</span><span class="nx">close</span><span class="p">();</span>
<span class="p">};</span>
<span class="c1">// 自動で閉じる</span>
<span class="nx">setTimeout</span><span class="p">(()</span> <span class="o">=></span> <span class="nx">notification</span><span class="p">.</span><span class="nx">close</span><span class="p">(),</span> <span class="mi">5000</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// 使用例</span>
<span class="nx">showNotification</span><span class="p">(</span><span class="dl">"</span><span class="s2">新しいメッセージ</span><span class="dl">"</span><span class="p">,</span> <span class="p">{</span>
<span class="na">body</span><span class="p">:</span> <span class="dl">"</span><span class="s2">太郎さんからメッセージが届きました</span><span class="dl">"</span><span class="p">,</span>
<span class="na">icon</span><span class="p">:</span> <span class="dl">"</span><span class="s2">/message-icon.png</span><span class="dl">"</span><span class="p">,</span>
<span class="na">tag</span><span class="p">:</span> <span class="dl">"</span><span class="s2">message</span><span class="dl">"</span>
<span class="p">});</span>
</code></pre></div></div>
<h2 id="実践的なコード例">実践的なコード例</h2>
<h3 id="フォームバリデーション">フォームバリデーション</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">class</span> <span class="nx">FormValidator</span> <span class="p">{</span>
<span class="kd">constructor</span><span class="p">(</span><span class="nx">form</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">form</span> <span class="o">=</span> <span class="nx">form</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">errors</span> <span class="o">=</span> <span class="p">{};</span>
<span class="k">this</span><span class="p">.</span><span class="nx">rules</span> <span class="o">=</span> <span class="p">{};</span>
<span class="k">this</span><span class="p">.</span><span class="nx">init</span><span class="p">();</span>
<span class="p">}</span>
<span class="nx">init</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">form</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">submit</span><span class="dl">"</span><span class="p">,</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
<span class="k">this</span><span class="p">.</span><span class="nx">validate</span><span class="p">();</span>
<span class="p">});</span>
<span class="c1">// リアルタイムバリデーション</span>
<span class="k">this</span><span class="p">.</span><span class="nx">form</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">input</span><span class="dl">"</span><span class="p">,</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">validateField</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="nx">addRule</span><span class="p">(</span><span class="nx">fieldName</span><span class="p">,</span> <span class="nx">rule</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">rules</span><span class="p">[</span><span class="nx">fieldName</span><span class="p">])</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">rules</span><span class="p">[</span><span class="nx">fieldName</span><span class="p">]</span> <span class="o">=</span> <span class="p">[];</span>
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">rules</span><span class="p">[</span><span class="nx">fieldName</span><span class="p">].</span><span class="nx">push</span><span class="p">(</span><span class="nx">rule</span><span class="p">);</span>
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">validateField</span><span class="p">(</span><span class="nx">field</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">rules</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">rules</span><span class="p">[</span><span class="nx">field</span><span class="p">.</span><span class="nx">name</span><span class="p">];</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">rules</span><span class="p">)</span> <span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">clearError</span><span class="p">(</span><span class="nx">field</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">const</span> <span class="nx">rule</span> <span class="k">of</span> <span class="nx">rules</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">rule</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="nx">field</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">result</span><span class="p">.</span><span class="nx">valid</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">addError</span><span class="p">(</span><span class="nx">field</span><span class="p">.</span><span class="nx">name</span><span class="p">,</span> <span class="nx">result</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">showError</span><span class="p">(</span><span class="nx">field</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span>
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">showSuccess</span><span class="p">(</span><span class="nx">field</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span>
<span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">validate</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">errors</span> <span class="o">=</span> <span class="p">{};</span>
<span class="kd">let</span> <span class="nx">isValid</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">fields</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">form</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="dl">"</span><span class="s2">[name]</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">fields</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">field</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">validateField</span><span class="p">(</span><span class="nx">field</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">isValid</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">isValid</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">onSuccess</span><span class="p">();</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">onError</span><span class="p">();</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">isValid</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">addError</span><span class="p">(</span><span class="nx">fieldName</span><span class="p">,</span> <span class="nx">message</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">errors</span><span class="p">[</span><span class="nx">fieldName</span><span class="p">])</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">errors</span><span class="p">[</span><span class="nx">fieldName</span><span class="p">]</span> <span class="o">=</span> <span class="p">[];</span>
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">errors</span><span class="p">[</span><span class="nx">fieldName</span><span class="p">].</span><span class="nx">push</span><span class="p">(</span><span class="nx">message</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">clearError</span><span class="p">(</span><span class="nx">fieldName</span><span class="p">)</span> <span class="p">{</span>
<span class="k">delete</span> <span class="k">this</span><span class="p">.</span><span class="nx">errors</span><span class="p">[</span><span class="nx">fieldName</span><span class="p">];</span>
<span class="k">this</span><span class="p">.</span><span class="nx">hideError</span><span class="p">(</span><span class="nx">fieldName</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">showError</span><span class="p">(</span><span class="nx">fieldName</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">field</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">form</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s2">`[name="</span><span class="p">${</span><span class="nx">fieldName</span><span class="p">}</span><span class="s2">"]`</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">errorContainer</span> <span class="o">=</span> <span class="nx">field</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">.error-message</span><span class="dl">"</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">errorContainer</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">errorContainer</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">errors</span><span class="p">[</span><span class="nx">fieldName</span><span class="p">][</span><span class="mi">0</span><span class="p">];</span>
<span class="nx">errorContainer</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">block</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">field</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="dl">"</span><span class="s2">error</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">field</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">remove</span><span class="p">(</span><span class="dl">"</span><span class="s2">success</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">hideError</span><span class="p">(</span><span class="nx">fieldName</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">field</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">form</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s2">`[name="</span><span class="p">${</span><span class="nx">fieldName</span><span class="p">}</span><span class="s2">"]`</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">errorContainer</span> <span class="o">=</span> <span class="nx">field</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">.error-message</span><span class="dl">"</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">errorContainer</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">errorContainer</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">none</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">field</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">remove</span><span class="p">(</span><span class="dl">"</span><span class="s2">error</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">showSuccess</span><span class="p">(</span><span class="nx">fieldName</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">field</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">form</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s2">`[name="</span><span class="p">${</span><span class="nx">fieldName</span><span class="p">}</span><span class="s2">"]`</span><span class="p">);</span>
<span class="nx">field</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="dl">"</span><span class="s2">success</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">field</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">remove</span><span class="p">(</span><span class="dl">"</span><span class="s2">error</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">onSuccess</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">フォームバリデーション成功</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// フォーム送信処理</span>
<span class="p">}</span>
<span class="nx">onError</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">フォームバリデーションエラー:</span><span class="dl">"</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">errors</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// バリデーションルール</span>
<span class="kd">const</span> <span class="nx">rules</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">required</span><span class="p">:</span> <span class="p">(</span><span class="nx">message</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">この項目は必須です</span><span class="dl">"</span><span class="p">)</span> <span class="o">=></span> <span class="p">({</span>
<span class="na">test</span><span class="p">:</span> <span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="o">=></span> <span class="p">({</span>
<span class="na">valid</span><span class="p">:</span> <span class="nx">value</span><span class="p">.</span><span class="nx">trim</span><span class="p">().</span><span class="nx">length</span> <span class="o">></span> <span class="mi">0</span><span class="p">,</span>
<span class="nx">message</span>
<span class="p">})</span>
<span class="p">}),</span>
<span class="na">email</span><span class="p">:</span> <span class="p">(</span><span class="nx">message</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">有効なメールアドレスを入力してください</span><span class="dl">"</span><span class="p">)</span> <span class="o">=></span> <span class="p">({</span>
<span class="na">test</span><span class="p">:</span> <span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="o">=></span> <span class="p">({</span>
<span class="na">valid</span><span class="p">:</span> <span class="sr">/^</span><span class="se">[^\s</span><span class="sr">@</span><span class="se">]</span><span class="sr">+@</span><span class="se">[^\s</span><span class="sr">@</span><span class="se">]</span><span class="sr">+</span><span class="se">\.[^\s</span><span class="sr">@</span><span class="se">]</span><span class="sr">+$/</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="nx">value</span><span class="p">),</span>
<span class="nx">message</span>
<span class="p">})</span>
<span class="p">}),</span>
<span class="na">minLength</span><span class="p">:</span> <span class="p">(</span><span class="nx">min</span><span class="p">,</span> <span class="nx">message</span><span class="p">)</span> <span class="o">=></span> <span class="p">({</span>
<span class="na">test</span><span class="p">:</span> <span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="o">=></span> <span class="p">({</span>
<span class="na">valid</span><span class="p">:</span> <span class="nx">value</span><span class="p">.</span><span class="nx">length</span> <span class="o">>=</span> <span class="nx">min</span><span class="p">,</span>
<span class="na">message</span><span class="p">:</span> <span class="nx">message</span> <span class="o">||</span> <span class="s2">`</span><span class="p">${</span><span class="nx">min</span><span class="p">}</span><span class="s2">文字以上で入力してください`</span>
<span class="p">})</span>
<span class="p">}),</span>
<span class="na">phone</span><span class="p">:</span> <span class="p">(</span><span class="nx">message</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">有効な電話番号を入力してください</span><span class="dl">"</span><span class="p">)</span> <span class="o">=></span> <span class="p">({</span>
<span class="na">test</span><span class="p">:</span> <span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="o">=></span> <span class="p">({</span>
<span class="na">valid</span><span class="p">:</span> <span class="sr">/^</span><span class="se">[\d</span><span class="sr">-</span><span class="se">]</span><span class="sr">+$/</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="nx">value</span><span class="p">),</span>
<span class="nx">message</span>
<span class="p">})</span>
<span class="p">})</span>
<span class="p">};</span>
<span class="c1">// 使用例</span>
<span class="kd">const</span> <span class="nx">form</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#contactForm</span><span class="dl">"</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">validator</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">FormValidator</span><span class="p">(</span><span class="nx">form</span><span class="p">);</span>
<span class="nx">validator</span>
<span class="p">.</span><span class="nx">addRule</span><span class="p">(</span><span class="dl">"</span><span class="s2">name</span><span class="dl">"</span><span class="p">,</span> <span class="nx">rules</span><span class="p">.</span><span class="nx">required</span><span class="p">())</span>
<span class="p">.</span><span class="nx">addRule</span><span class="p">(</span><span class="dl">"</span><span class="s2">email</span><span class="dl">"</span><span class="p">,</span> <span class="nx">rules</span><span class="p">.</span><span class="nx">required</span><span class="p">())</span>
<span class="p">.</span><span class="nx">addRule</span><span class="p">(</span><span class="dl">"</span><span class="s2">email</span><span class="dl">"</span><span class="p">,</span> <span class="nx">rules</span><span class="p">.</span><span class="nx">email</span><span class="p">())</span>
<span class="p">.</span><span class="nx">addRule</span><span class="p">(</span><span class="dl">"</span><span class="s2">phone</span><span class="dl">"</span><span class="p">,</span> <span class="nx">rules</span><span class="p">.</span><span class="nx">phone</span><span class="p">())</span>
<span class="p">.</span><span class="nx">addRule</span><span class="p">(</span><span class="dl">"</span><span class="s2">message</span><span class="dl">"</span><span class="p">,</span> <span class="nx">rules</span><span class="p">.</span><span class="nx">required</span><span class="p">())</span>
<span class="p">.</span><span class="nx">addRule</span><span class="p">(</span><span class="dl">"</span><span class="s2">message</span><span class="dl">"</span><span class="p">,</span> <span class="nx">rules</span><span class="p">.</span><span class="nx">minLength</span><span class="p">(</span><span class="mi">10</span><span class="p">));</span>
</code></pre></div></div>
<h3 id="シンプルなspasingle-page-application">シンプルなSPA(Single Page Application)</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">class</span> <span class="nx">SimpleRouter</span> <span class="p">{</span>
<span class="kd">constructor</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">routes</span> <span class="o">=</span> <span class="p">{};</span>
<span class="k">this</span><span class="p">.</span><span class="nx">currentRoute</span> <span class="o">=</span> <span class="dl">""</span><span class="p">;</span>
<span class="c1">// ブラウザの戻る/進むボタン対応</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">popstate</span><span class="dl">"</span><span class="p">,</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">handleRoute</span><span class="p">();</span>
<span class="p">});</span>
<span class="c1">// リンククリック時の処理</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">matches</span><span class="p">(</span><span class="dl">"</span><span class="s2">[data-route]</span><span class="dl">"</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
<span class="kd">const</span> <span class="nx">route</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">getAttribute</span><span class="p">(</span><span class="dl">"</span><span class="s2">data-route</span><span class="dl">"</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">navigate</span><span class="p">(</span><span class="nx">route</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="c1">// 初期ルート処理</span>
<span class="k">this</span><span class="p">.</span><span class="nx">handleRoute</span><span class="p">();</span>
<span class="p">}</span>
<span class="nx">addRoute</span><span class="p">(</span><span class="nx">path</span><span class="p">,</span> <span class="nx">handler</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">routes</span><span class="p">[</span><span class="nx">path</span><span class="p">]</span> <span class="o">=</span> <span class="nx">handler</span><span class="p">;</span>
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">navigate</span><span class="p">(</span><span class="nx">path</span><span class="p">)</span> <span class="p">{</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">history</span><span class="p">.</span><span class="nx">pushState</span><span class="p">({},</span> <span class="dl">""</span><span class="p">,</span> <span class="nx">path</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">handleRoute</span><span class="p">();</span>
<span class="p">}</span>
<span class="nx">handleRoute</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">path</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">pathname</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">currentRoute</span> <span class="o">=</span> <span class="nx">path</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">handler</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">routes</span><span class="p">[</span><span class="nx">path</span><span class="p">]</span> <span class="o">||</span> <span class="k">this</span><span class="p">.</span><span class="nx">routes</span><span class="p">[</span><span class="dl">"</span><span class="s2">*</span><span class="dl">"</span><span class="p">];</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">handler</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">handler</span><span class="p">();</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">show404</span><span class="p">();</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nx">show404</span><span class="p">()</span> <span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#app</span><span class="dl">"</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="s2">`
<h1>404 - ページが見つかりません</h1>
<p><a href="/" data-route="/">ホームに戻る</a></p>
`</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// ページコンポーネント</span>
<span class="kd">const</span> <span class="nx">pages</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">home</span><span class="p">:</span> <span class="p">()</span> <span class="o">=></span> <span class="s2">`
<h1>ホームページ</h1>
<nav>
<a href="/about" data-route="/about">会社概要</a> |
<a href="/contact" data-route="/contact">お問い合わせ</a>
</nav>
<p>ようこそ、私たちのサイトへ!</p>
`</span><span class="p">,</span>
<span class="na">about</span><span class="p">:</span> <span class="p">()</span> <span class="o">=></span> <span class="s2">`
<h1>会社概要</h1>
<nav>
<a href="/" data-route="/">ホーム</a> |
<a href="/contact" data-route="/contact">お問い合わせ</a>
</nav>
<p>私たちは革新的なソリューションを提供する会社です。</p>
`</span><span class="p">,</span>
<span class="na">contact</span><span class="p">:</span> <span class="p">()</span> <span class="o">=></span> <span class="s2">`
<h1>お問い合わせ</h1>
<nav>
<a href="/" data-route="/">ホーム</a> |
<a href="/about" data-route="/about">会社概要</a>
</nav>
<form id="contactForm">
<div>
<label>お名前: <input type="text" name="name" required></label>
</div>
<div>
<label>メール: <input type="email" name="email" required></label>
</div>
<div>
<label>メッセージ: <textarea name="message" required></textarea></label>
</div>
<button type="submit">送信</button>
</form>
`</span>
<span class="p">};</span>
<span class="c1">// ルーター初期化</span>
<span class="kd">const</span> <span class="nx">router</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">SimpleRouter</span><span class="p">();</span>
<span class="nx">router</span>
<span class="p">.</span><span class="nx">addRoute</span><span class="p">(</span><span class="dl">"</span><span class="s2">/</span><span class="dl">"</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#app</span><span class="dl">"</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">pages</span><span class="p">.</span><span class="nx">home</span><span class="p">();</span>
<span class="p">})</span>
<span class="p">.</span><span class="nx">addRoute</span><span class="p">(</span><span class="dl">"</span><span class="s2">/about</span><span class="dl">"</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#app</span><span class="dl">"</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">pages</span><span class="p">.</span><span class="nx">about</span><span class="p">();</span>
<span class="p">})</span>
<span class="p">.</span><span class="nx">addRoute</span><span class="p">(</span><span class="dl">"</span><span class="s2">/contact</span><span class="dl">"</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#app</span><span class="dl">"</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">pages</span><span class="p">.</span><span class="nx">contact</span><span class="p">();</span>
<span class="c1">// お問い合わせフォームのイベント設定</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#contactForm</span><span class="dl">"</span><span class="p">).</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">submit</span><span class="dl">"</span><span class="p">,</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
<span class="nx">alert</span><span class="p">(</span><span class="dl">"</span><span class="s2">お問い合わせありがとうございます!</span><span class="dl">"</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">});</span>
</code></pre></div></div>
<h2 id="デバッグとテスト">デバッグとテスト</h2>
<h3 id="デバッグ技法">デバッグ技法</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// コンソール出力</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">基本的なログ</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">info</span><span class="p">(</span><span class="dl">"</span><span class="s2">情報メッセージ</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">warn</span><span class="p">(</span><span class="dl">"</span><span class="s2">警告メッセージ</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラーメッセージ</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// オブジェクトの詳細表示</span>
<span class="kd">const</span> <span class="nx">user</span> <span class="o">=</span> <span class="p">{</span> <span class="na">name</span><span class="p">:</span> <span class="dl">"</span><span class="s2">太郎</span><span class="dl">"</span><span class="p">,</span> <span class="na">age</span><span class="p">:</span> <span class="mi">30</span> <span class="p">};</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">table</span><span class="p">(</span><span class="nx">user</span><span class="p">);</span> <span class="c1">// テーブル形式で表示</span>
<span class="c1">// 実行時間の測定</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">time</span><span class="p">(</span><span class="dl">"</span><span class="s2">処理時間</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// 時間のかかる処理</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o"><</span> <span class="mi">1000000</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="c1">// 何らかの処理</span>
<span class="p">}</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">timeEnd</span><span class="p">(</span><span class="dl">"</span><span class="s2">処理時間</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// グループ化</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">group</span><span class="p">(</span><span class="dl">"</span><span class="s2">ユーザー情報</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">名前:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">user</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">年齢:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">user</span><span class="p">.</span><span class="nx">age</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">groupEnd</span><span class="p">();</span>
<span class="c1">// 条件付きログ</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">assert</span><span class="p">(</span><span class="nx">user</span><span class="p">.</span><span class="nx">age</span> <span class="o">>=</span> <span class="mi">18</span><span class="p">,</span> <span class="dl">"</span><span class="s2">ユーザーは18歳以上である必要があります</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// スタックトレース</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">trace</span><span class="p">(</span><span class="dl">"</span><span class="s2">スタックトレースを表示</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// ブレークポイント</span>
<span class="kd">function</span> <span class="nx">debugFunction</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">x</span> <span class="o">=</span> <span class="mi">10</span><span class="p">;</span>
<span class="k">debugger</span><span class="p">;</span> <span class="c1">// ブラウザの開発者ツールでここで停止</span>
<span class="nx">x</span> <span class="o">*=</span> <span class="mi">2</span><span class="p">;</span>
<span class="k">return</span> <span class="nx">x</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// エラーの詳細表示</span>
<span class="k">try</span> <span class="p">{</span>
<span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="dl">"</span><span class="s2">テストエラー</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラー名:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラーメッセージ:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">スタックトレース:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">.</span><span class="nx">stack</span><span class="p">);</span>
<span class="p">}</span>
</code></pre></div></div>
<h3 id="簡単なテストフレームワーク">簡単なテストフレームワーク</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 簡単なテストフレームワーク</span>
<span class="kd">class</span> <span class="nx">SimpleTest</span> <span class="p">{</span>
<span class="kd">constructor</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">tests</span> <span class="o">=</span> <span class="p">[];</span>
<span class="k">this</span><span class="p">.</span><span class="nx">passed</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">failed</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">test</span><span class="p">(</span><span class="nx">description</span><span class="p">,</span> <span class="nx">testFunction</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">tests</span><span class="p">.</span><span class="nx">push</span><span class="p">({</span> <span class="nx">description</span><span class="p">,</span> <span class="nx">testFunction</span> <span class="p">});</span>
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">assertEqual</span><span class="p">(</span><span class="nx">actual</span><span class="p">,</span> <span class="nx">expected</span><span class="p">,</span> <span class="nx">message</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">actual</span> <span class="o">===</span> <span class="nx">expected</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`✅ </span><span class="p">${</span><span class="nx">message</span> <span class="o">||</span> <span class="dl">'</span><span class="s1">Test passed</span><span class="dl">'</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">passed</span><span class="o">++</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`❌ </span><span class="p">${</span><span class="nx">message</span> <span class="o">||</span> <span class="dl">'</span><span class="s1">Test failed</span><span class="dl">'</span><span class="p">}</span><span class="s2">: expected </span><span class="p">${</span><span class="nx">expected</span><span class="p">}</span><span class="s2">, got </span><span class="p">${</span><span class="nx">actual</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">failed</span><span class="o">++</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nx">assertTrue</span><span class="p">(</span><span class="nx">value</span><span class="p">,</span> <span class="nx">message</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">assertEqual</span><span class="p">(</span><span class="nx">value</span><span class="p">,</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">message</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">assertFalse</span><span class="p">(</span><span class="nx">value</span><span class="p">,</span> <span class="nx">message</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">assertEqual</span><span class="p">(</span><span class="nx">value</span><span class="p">,</span> <span class="kc">false</span><span class="p">,</span> <span class="nx">message</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">run</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">🚀 テスト開始</span><span class="dl">"</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">tests</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(({</span> <span class="nx">description</span><span class="p">,</span> <span class="nx">testFunction</span> <span class="p">})</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`\n📝 </span><span class="p">${</span><span class="nx">description</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="k">try</span> <span class="p">{</span>
<span class="nx">testFunction</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`❌ エラー: </span><span class="p">${</span><span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">failed</span><span class="o">++</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`\n📊 結果: </span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">passed</span><span class="p">}</span><span class="s2"> passed, </span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">failed</span><span class="p">}</span><span class="s2"> failed`</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// テスト例</span>
<span class="kd">function</span> <span class="nx">add</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">a</span> <span class="o">+</span> <span class="nx">b</span><span class="p">;</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">multiply</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">a</span> <span class="o">*</span> <span class="nx">b</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// テストの実行</span>
<span class="kd">const</span> <span class="nx">test</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">SimpleTest</span><span class="p">();</span>
<span class="nx">test</span>
<span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="dl">"</span><span class="s2">add関数のテスト</span><span class="dl">"</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">assertEqual</span><span class="p">(</span><span class="nx">add</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">),</span> <span class="mi">5</span><span class="p">,</span> <span class="dl">"</span><span class="s2">2 + 3 = 5</span><span class="dl">"</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">assertEqual</span><span class="p">(</span><span class="nx">add</span><span class="p">(</span><span class="o">-</span><span class="mi">1</span><span class="p">,</span> <span class="mi">1</span><span class="p">),</span> <span class="mi">0</span><span class="p">,</span> <span class="dl">"</span><span class="s2">-1 + 1 = 0</span><span class="dl">"</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">assertEqual</span><span class="p">(</span><span class="nx">add</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">),</span> <span class="mi">0</span><span class="p">,</span> <span class="dl">"</span><span class="s2">0 + 0 = 0</span><span class="dl">"</span><span class="p">);</span>
<span class="p">})</span>
<span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="dl">"</span><span class="s2">multiply関数のテスト</span><span class="dl">"</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">assertEqual</span><span class="p">(</span><span class="nx">multiply</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">),</span> <span class="mi">6</span><span class="p">,</span> <span class="dl">"</span><span class="s2">2 * 3 = 6</span><span class="dl">"</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">assertEqual</span><span class="p">(</span><span class="nx">multiply</span><span class="p">(</span><span class="o">-</span><span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">),</span> <span class="o">-</span><span class="mi">6</span><span class="p">,</span> <span class="dl">"</span><span class="s2">-2 * 3 = -6</span><span class="dl">"</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">assertEqual</span><span class="p">(</span><span class="nx">multiply</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">5</span><span class="p">),</span> <span class="mi">0</span><span class="p">,</span> <span class="dl">"</span><span class="s2">0 * 5 = 0</span><span class="dl">"</span><span class="p">);</span>
<span class="p">})</span>
<span class="p">.</span><span class="nx">run</span><span class="p">();</span>
</code></pre></div></div>
<h2 id="パフォーマンス最適化">パフォーマンス最適化</h2>
<h3 id="パフォーマンス測定と最適化">パフォーマンス測定と最適化</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// パフォーマンス測定</span>
<span class="kd">function</span> <span class="nx">measurePerformance</span><span class="p">(</span><span class="nx">fn</span><span class="p">,</span> <span class="nx">label</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">start</span> <span class="o">=</span> <span class="nx">performance</span><span class="p">.</span><span class="nx">now</span><span class="p">();</span>
<span class="nx">fn</span><span class="p">();</span>
<span class="kd">const</span> <span class="nx">end</span> <span class="o">=</span> <span class="nx">performance</span><span class="p">.</span><span class="nx">now</span><span class="p">();</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`</span><span class="p">${</span><span class="nx">label</span><span class="p">}</span><span class="s2">: </span><span class="p">${</span><span class="nx">end</span> <span class="o">-</span> <span class="nx">start</span><span class="p">}</span><span class="s2">ms`</span><span class="p">);</span>
<span class="p">}</span>
<span class="c1">// 配列処理の最適化例</span>
<span class="kd">const</span> <span class="nx">largeArray</span> <span class="o">=</span> <span class="nb">Array</span><span class="p">.</span><span class="k">from</span><span class="p">({</span> <span class="na">length</span><span class="p">:</span> <span class="mi">100000</span> <span class="p">},</span> <span class="p">(</span><span class="nx">_</span><span class="p">,</span> <span class="nx">i</span><span class="p">)</span> <span class="o">=></span> <span class="nx">i</span><span class="p">);</span>
<span class="c1">// 非効率な方法</span>
<span class="nx">measurePerformance</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">result</span> <span class="o">=</span> <span class="p">[];</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o"><</span> <span class="nx">largeArray</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">largeArray</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">%</span> <span class="mi">2</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">result</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">largeArray</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">*</span> <span class="mi">2</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">},</span> <span class="dl">"</span><span class="s2">forループ</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// 効率的な方法</span>
<span class="nx">measurePerformance</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">largeArray</span>
<span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="nx">x</span> <span class="o">=></span> <span class="nx">x</span> <span class="o">%</span> <span class="mi">2</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span>
<span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">x</span> <span class="o">=></span> <span class="nx">x</span> <span class="o">*</span> <span class="mi">2</span><span class="p">);</span>
<span class="p">},</span> <span class="dl">"</span><span class="s2">filter + map</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// より効率的な方法(1回のループ)</span>
<span class="nx">measurePerformance</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">largeArray</span><span class="p">.</span><span class="nx">reduce</span><span class="p">((</span><span class="nx">acc</span><span class="p">,</span> <span class="nx">x</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">x</span> <span class="o">%</span> <span class="mi">2</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">acc</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">x</span> <span class="o">*</span> <span class="mi">2</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">acc</span><span class="p">;</span>
<span class="p">},</span> <span class="p">[]);</span>
<span class="p">},</span> <span class="dl">"</span><span class="s2">reduce</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// イベントリスナーの最適化(デバウンス)</span>
<span class="kd">function</span> <span class="nx">debounce</span><span class="p">(</span><span class="nx">func</span><span class="p">,</span> <span class="nx">wait</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">timeout</span><span class="p">;</span>
<span class="k">return</span> <span class="kd">function</span> <span class="nx">executedFunction</span><span class="p">(...</span><span class="nx">args</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">later</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">clearTimeout</span><span class="p">(</span><span class="nx">timeout</span><span class="p">);</span>
<span class="nx">func</span><span class="p">(...</span><span class="nx">args</span><span class="p">);</span>
<span class="p">};</span>
<span class="nx">clearTimeout</span><span class="p">(</span><span class="nx">timeout</span><span class="p">);</span>
<span class="nx">timeout</span> <span class="o">=</span> <span class="nx">setTimeout</span><span class="p">(</span><span class="nx">later</span><span class="p">,</span> <span class="nx">wait</span><span class="p">);</span>
<span class="p">};</span>
<span class="p">}</span>
<span class="c1">// スクロールイベントの最適化</span>
<span class="kd">const</span> <span class="nx">handleScroll</span> <span class="o">=</span> <span class="nx">debounce</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">スクロール処理</span><span class="dl">"</span><span class="p">);</span>
<span class="p">},</span> <span class="mi">100</span><span class="p">);</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">scroll</span><span class="dl">"</span><span class="p">,</span> <span class="nx">handleScroll</span><span class="p">);</span>
<span class="c1">// スロットル(一定間隔で実行)</span>
<span class="kd">function</span> <span class="nx">throttle</span><span class="p">(</span><span class="nx">func</span><span class="p">,</span> <span class="nx">limit</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">lastFunc</span><span class="p">;</span>
<span class="kd">let</span> <span class="nx">lastRan</span><span class="p">;</span>
<span class="k">return</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">context</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">args</span> <span class="o">=</span> <span class="nx">arguments</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">lastRan</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">func</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="nx">context</span><span class="p">,</span> <span class="nx">args</span><span class="p">);</span>
<span class="nx">lastRan</span> <span class="o">=</span> <span class="nb">Date</span><span class="p">.</span><span class="nx">now</span><span class="p">();</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">clearTimeout</span><span class="p">(</span><span class="nx">lastFunc</span><span class="p">);</span>
<span class="nx">lastFunc</span> <span class="o">=</span> <span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">((</span><span class="nb">Date</span><span class="p">.</span><span class="nx">now</span><span class="p">()</span> <span class="o">-</span> <span class="nx">lastRan</span><span class="p">)</span> <span class="o">>=</span> <span class="nx">limit</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">func</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="nx">context</span><span class="p">,</span> <span class="nx">args</span><span class="p">);</span>
<span class="nx">lastRan</span> <span class="o">=</span> <span class="nb">Date</span><span class="p">.</span><span class="nx">now</span><span class="p">();</span>
<span class="p">}</span>
<span class="p">},</span> <span class="nx">limit</span> <span class="o">-</span> <span class="p">(</span><span class="nb">Date</span><span class="p">.</span><span class="nx">now</span><span class="p">()</span> <span class="o">-</span> <span class="nx">lastRan</span><span class="p">));</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// メモ化(結果をキャッシュ)</span>
<span class="kd">function</span> <span class="nx">memoize</span><span class="p">(</span><span class="nx">fn</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">cache</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Map</span><span class="p">();</span>
<span class="k">return</span> <span class="kd">function</span><span class="p">(...</span><span class="nx">args</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">key</span> <span class="o">=</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">args</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">cache</span><span class="p">.</span><span class="nx">has</span><span class="p">(</span><span class="nx">key</span><span class="p">))</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">cache</span><span class="p">.</span><span class="kd">get</span><span class="p">(</span><span class="nx">key</span><span class="p">);</span>
<span class="p">}</span>
<span class="kd">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">fn</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="nx">args</span><span class="p">);</span>
<span class="nx">cache</span><span class="p">.</span><span class="kd">set</span><span class="p">(</span><span class="nx">key</span><span class="p">,</span> <span class="nx">result</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">result</span><span class="p">;</span>
<span class="p">};</span>
<span class="p">}</span>
<span class="c1">// フィボナッチ数列の最適化例</span>
<span class="kd">const</span> <span class="nx">fibonacci</span> <span class="o">=</span> <span class="nx">memoize</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">n</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">n</span> <span class="o"><</span> <span class="mi">2</span><span class="p">)</span> <span class="k">return</span> <span class="nx">n</span><span class="p">;</span>
<span class="k">return</span> <span class="nx">fibonacci</span><span class="p">(</span><span class="nx">n</span> <span class="o">-</span> <span class="mi">1</span><span class="p">)</span> <span class="o">+</span> <span class="nx">fibonacci</span><span class="p">(</span><span class="nx">n</span> <span class="o">-</span> <span class="mi">2</span><span class="p">);</span>
<span class="p">});</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">fibonacci</span><span class="p">(</span><span class="mi">40</span><span class="p">));</span> <span class="c1">// 大幅に高速化される</span>
</code></pre></div></div>
<h2 id="参考資料">参考資料</h2>
<h3 id="公式ドキュメント">公式ドキュメント</h3>
<ul>
<li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript">MDN Web Docs - JavaScript</a>: Mozilla開発者向けリソース</li>
<li><a href="https://tc39.es/ecma262/">ECMAScript Language Specification</a>: JavaScript仕様書</li>
<li><a href="https://nodejs.org/docs/">Node.js Documentation</a>: サーバーサイドJavaScript</li>
</ul>
<h3 id="学習リソース">学習リソース</h3>
<ul>
<li><a href="https://javascript.info/">JavaScript.info</a>: 現代的なJavaScript学習サイト</li>
<li><a href="https://eloquentjavascript.net/">Eloquent JavaScript</a>: 無料のJavaScript書籍</li>
<li><a href="https://github.com/getify/You-Dont-Know-JS">You Don’t Know JS</a>: 深いJavaScript理解</li>
</ul>
<h3 id="ツールとライブラリ">ツールとライブラリ</h3>
<ul>
<li><a href="https://eslint.org/">ESLint</a>: JavaScriptリンター</li>
<li><a href="https://prettier.io/">Prettier</a>: コードフォーマッター</li>
<li><a href="https://babeljs.io/">Babel</a>: JavaScript変換ツール</li>
<li><a href="https://webpack.js.org/">Webpack</a>: モジュールバンドラー</li>
</ul>
<h3 id="フレームワークライブラリ">フレームワーク・ライブラリ</h3>
<ul>
<li><a href="https://reactjs.org/">React</a>: ユーザーインターフェースライブラリ</li>
<li><a href="https://vuejs.org/">Vue.js</a>: プログレッシブフレームワーク</li>
<li><a href="https://angular.io/">Angular</a>: フルフィーチャーフレームワーク</li>
<li><a href="https://expressjs.com/">Express.js</a>: Node.jsウェブフレームワーク</li>
</ul>
</div></div>
</div>
</article>
<!-- Enhanced Table of Contents JavaScript --><script>
document.addEventListener('DOMContentLoaded', function() {
// Generate enhanced Table of Contents
const headings = document.querySelectorAll('.page-main-content h2, .page-main-content h3, .page-main-content h4');
const tocContainer = document.getElementById('page-toc-content');
if (headings.length > 0 && tocContainer) {
const tocList = document.createElement('ul');
tocList.style.cssText = 'list-style: none; padding-left: 0; margin: 0; line-height: 1.6;';
headings.forEach(function(heading, index) {
// Add ID to heading if it doesn't have one
if (!heading.id) {
heading.id = 'page-heading-' + index;
}
const listItem = document.createElement('li');
const link = document.createElement('a');
link.href = '#' + heading.id;
link.textContent = heading.textContent;
link.style.cssText = 'text-decoration: none; color: #007bff; transition: color 0.2s;';
// Add hover effect
link.addEventListener('mouseenter', function() {
this.style.color = '#0056b3';
});
link.addEventListener('mouseleave', function() {
this.style.color = '#007bff';
});
// Style based on heading level
if (heading.tagName === 'H2') {
listItem.style.cssText = 'margin-bottom: 8px; font-weight: 600;';
link.textContent = '📄 ' + heading.textContent;
} else if (heading.tagName === 'H3') {
listItem.style.cssText = 'margin-bottom: 5px; margin-left: 25px; font-size: 0.95em;';
link.textContent = '▶ ' + heading.textContent;
} else if (heading.tagName === 'H4') {
listItem.style.cssText = 'margin-bottom: 3px; margin-left: 50px; font-size: 0.9em;';
link.textContent = '• ' + heading.textContent;
}
listItem.appendChild(link);
tocList.appendChild(listItem);
});
tocContainer.appendChild(tocList);
} else if (tocContainer) {
// Hide TOC container if no headings found
tocContainer.parentNode.style.display = 'none';
}
});
</script><!-- Additional styling for page layout with sidebar TOC -->
<style>
/* Override minima theme wrapper width restriction for large screens */
@media (min-width: 1441px) {
.wrapper {
max-width: none;
}
}
.page-article {
margin: 0 auto;
}
/* Apply max-width only on smaller screens to maintain readability */
@media (max-width: 1440px) {
.page-article {
max-width: 2000px;
}
}
.page-content-wrapper {
display: flex;
gap: 20px;
position: relative;
}
.page-toc-sidebar {
width: 280px;
position: sticky;
top: 20px;
height: calc(100vh - 40px);
max-height: calc(100vh - 40px);
overflow-y: auto;
order: 2;
flex-shrink: 0;
}
.page-content {
flex: 1;
min-width: 0;
order: 1;
}
/* Responsive behavior */
@media (max-width: 1024px) {
.page-content-wrapper {
flex-direction: column;
}
.page-toc-sidebar {
width: 100%;
position: static;
order: 1;
margin-bottom: 20px;
height: auto;
max-height: none;
overflow-y: visible;
}
.page-content {
order: 2;
}
}
@media (max-width: 768px) {
.page-toc-sidebar {
display: none;
}
}
.page-title {
border-bottom: 3px solid #007bff;
padding-bottom: 10px;
color: #212529;
}
.page-main-content h2 {
color: #007bff;
border-bottom: 2px solid #e9ecef;
padding-bottom: 8px;
margin-top: 40px;
}
.page-main-content h3 {
color: #495057;
margin-top: 30px;
}
.page-main-content code {
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 3px;
padding: 2px 4px;
font-size: 0.9em;
}
.page-main-content pre {
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 5px;
padding: 15px;
overflow-x: auto;
}
.page-main-content blockquote {
border-left: 4px solid #007bff;
background: #f8f9fa;
margin: 20px 0;
padding: 15px 20px;
font-style: italic;
}
.page-main-content table {
border-collapse: collapse;
width: 100%;
margin: 20px 0;
}
.page-main-content th,
.page-main-content td {
border: 1px solid #dee2e6;
padding: 12px;
text-align: left;
}
.page-main-content th {
background: #f8f9fa;
font-weight: 600;
}
</style>
</div>
</article>
ポストレイアウト(_layouts/post.html)
---
layout: default
---
<article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
<header class="post-header">
<h1 class="post-title p-name" itemprop="name headline">Jekyll リファレンス</h1>
<p class="post-meta">
<time class="dt-published" datetime="" itemprop="datePublished">
</time></p>
</header>
<div class="post-content e-content" itemprop="articleBody">
<article class="page-article">
<header class="page-header">
<h1 class="page-title">JavaScript リファレンス</h1></header>
<div class="page-content-wrapper">
<!-- Table of Contents Sidebar --><aside class="page-toc-sidebar">
<div class="page-toc" style="background: #fff; border: 2px solid #007bff; border-radius: 8px; padding: 20px;">
<h3 style="margin-top: 0; color: #007bff; border-bottom: 1px solid #007bff; padding-bottom: 8px;">📖 目次</h3>
<div id="page-toc-content"></div>
</div>
</aside><div class="page-content">
<!-- Main content -->
<div class="page-main-content">
<h1 id="javascript-リファレンス">JavaScript リファレンス</h1>
<p>JavaScriptの基本的な使い方から応用まで、Webページに動的な機能を追加するために必要な知識を体系的に説明します。モダンなJavaScript(ES6+)の機能も含めて解説します。</p>
<ul id="markdown-toc">
<li><a href="#javascript-リファレンス" id="markdown-toc-javascript-リファレンス">JavaScript リファレンス</a> <ul>
<li><a href="#基本概念" id="markdown-toc-基本概念">基本概念</a> <ul>
<li><a href="#javascript-とは" id="markdown-toc-javascript-とは">JavaScript とは</a></li>
<li><a href="#javascript-の役割" id="markdown-toc-javascript-の役割">JavaScript の役割</a></li>
</ul>
</li>
<li><a href="#基本構文" id="markdown-toc-基本構文">基本構文</a> <ul>
<li><a href="#変数とデータ型" id="markdown-toc-変数とデータ型">変数とデータ型</a></li>
<li><a href="#文字列操作" id="markdown-toc-文字列操作">文字列操作</a></li>
<li><a href="#配列" id="markdown-toc-配列">配列</a></li>
<li><a href="#オブジェクト" id="markdown-toc-オブジェクト">オブジェクト</a></li>
</ul>
</li>
<li><a href="#関数" id="markdown-toc-関数">関数</a> <ul>
<li><a href="#関数の定義" id="markdown-toc-関数の定義">関数の定義</a></li>
<li><a href="#スコープとクロージャ" id="markdown-toc-スコープとクロージャ">スコープとクロージャ</a></li>
</ul>
</li>
<li><a href="#dom操作" id="markdown-toc-dom操作">DOM操作</a> <ul>
<li><a href="#要素の取得" id="markdown-toc-要素の取得">要素の取得</a></li>
<li><a href="#要素の操作" id="markdown-toc-要素の操作">要素の操作</a></li>
<li><a href="#要素の作成と追加" id="markdown-toc-要素の作成と追加">要素の作成と追加</a></li>
</ul>
</li>
<li><a href="#イベント処理" id="markdown-toc-イベント処理">イベント処理</a> <ul>
<li><a href="#イベントリスナーの追加" id="markdown-toc-イベントリスナーの追加">イベントリスナーの追加</a></li>
<li><a href="#よく使用するイベント" id="markdown-toc-よく使用するイベント">よく使用するイベント</a></li>
<li><a href="#イベント委譲" id="markdown-toc-イベント委譲">イベント委譲</a></li>
</ul>
</li>
<li><a href="#非同期処理" id="markdown-toc-非同期処理">非同期処理</a> <ul>
<li><a href="#promise" id="markdown-toc-promise">Promise</a></li>
<li><a href="#asyncawait" id="markdown-toc-asyncawait">async/await</a></li>
<li><a href="#fetch-api" id="markdown-toc-fetch-api">Fetch API</a></li>
</ul>
</li>
<li><a href="#モダンjavascriptes6" id="markdown-toc-モダンjavascriptes6">モダンJavaScript(ES6+)</a> <ul>
<li><a href="#分割代入" id="markdown-toc-分割代入">分割代入</a></li>
<li><a href="#モジュール" id="markdown-toc-モジュール">モジュール</a></li>
<li><a href="#クラス" id="markdown-toc-クラス">クラス</a></li>
</ul>
</li>
<li><a href="#エラーハンドリング" id="markdown-toc-エラーハンドリング">エラーハンドリング</a> <ul>
<li><a href="#try-catch文" id="markdown-toc-try-catch文">try-catch文</a></li>
</ul>
</li>
<li><a href="#ブラウザapi" id="markdown-toc-ブラウザapi">ブラウザAPI</a> <ul>
<li><a href="#local-storage" id="markdown-toc-local-storage">Local Storage</a></li>
<li><a href="#geolocation-api" id="markdown-toc-geolocation-api">Geolocation API</a></li>
<li><a href="#notification-api" id="markdown-toc-notification-api">Notification API</a></li>
</ul>
</li>
<li><a href="#実践的なコード例" id="markdown-toc-実践的なコード例">実践的なコード例</a> <ul>
<li><a href="#フォームバリデーション" id="markdown-toc-フォームバリデーション">フォームバリデーション</a></li>
<li><a href="#シンプルなspasingle-page-application" id="markdown-toc-シンプルなspasingle-page-application">シンプルなSPA(Single Page Application)</a></li>
</ul>
</li>
<li><a href="#デバッグとテスト" id="markdown-toc-デバッグとテスト">デバッグとテスト</a> <ul>
<li><a href="#デバッグ技法" id="markdown-toc-デバッグ技法">デバッグ技法</a></li>
<li><a href="#簡単なテストフレームワーク" id="markdown-toc-簡単なテストフレームワーク">簡単なテストフレームワーク</a></li>
</ul>
</li>
<li><a href="#パフォーマンス最適化" id="markdown-toc-パフォーマンス最適化">パフォーマンス最適化</a> <ul>
<li><a href="#パフォーマンス測定と最適化" id="markdown-toc-パフォーマンス測定と最適化">パフォーマンス測定と最適化</a></li>
</ul>
</li>
<li><a href="#参考資料" id="markdown-toc-参考資料">参考資料</a> <ul>
<li><a href="#公式ドキュメント" id="markdown-toc-公式ドキュメント">公式ドキュメント</a></li>
<li><a href="#学習リソース" id="markdown-toc-学習リソース">学習リソース</a></li>
<li><a href="#ツールとライブラリ" id="markdown-toc-ツールとライブラリ">ツールとライブラリ</a></li>
<li><a href="#フレームワークライブラリ" id="markdown-toc-フレームワークライブラリ">フレームワーク・ライブラリ</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<h2 id="基本概念">基本概念</h2>
<h3 id="javascript-とは">JavaScript とは</h3>
<p><strong>JavaScript</strong> は、Webページに動的な機能を追加するためのプログラミング言語です。1995年にBrendan Eichによって開発され、現在はブラウザだけでなくサーバーサイド(Node.js)でも広く使用されています。</p>
<p><strong>特徴:</strong></p>
<ul>
<li>インタープリター言語(コンパイル不要)</li>
<li>動的型付け言語</li>
<li>プロトタイプベースのオブジェクト指向</li>
<li>関数型プログラミングもサポート</li>
<li>イベント駆動プログラミング</li>
</ul>
<h3 id="javascript-の役割">JavaScript の役割</h3>
<p>JavaScriptは以下の主要な役割を担います:</p>
<ol>
<li><strong>ユーザーインタラクション</strong>: クリック、入力などのイベント処理</li>
<li><strong>DOM操作</strong>: HTMLの動的な変更</li>
<li><strong>非同期処理</strong>: サーバーとの通信(Ajax、Fetch API)</li>
<li><strong>フォーム検証</strong>: 入力データの検証</li>
<li><strong>アニメーション</strong>: 視覚的な効果の実装</li>
</ol>
<h2 id="基本構文">基本構文</h2>
<h3 id="変数とデータ型">変数とデータ型</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 変数の宣言</span>
<span class="kd">let</span> <span class="nx">name</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">田中太郎</span><span class="dl">"</span><span class="p">;</span> <span class="c1">// 文字列(String)</span>
<span class="kd">const</span> <span class="nx">age</span> <span class="o">=</span> <span class="mi">30</span><span class="p">;</span> <span class="c1">// 数値(Number)- 定数</span>
<span class="kd">var</span> <span class="nx">isStudent</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span> <span class="c1">// 真偽値(Boolean)- 非推奨</span>
<span class="c1">// 現代的な変数宣言(ES6+)</span>
<span class="kd">let</span> <span class="nx">message</span><span class="p">;</span> <span class="c1">// 宣言のみ(undefined)</span>
<span class="kd">let</span> <span class="nx">score</span> <span class="o">=</span> <span class="mi">85</span><span class="p">;</span> <span class="c1">// 宣言と初期化</span>
<span class="kd">const</span> <span class="nx">PI</span> <span class="o">=</span> <span class="mf">3.14159</span><span class="p">;</span> <span class="c1">// 定数(再代入不可)</span>
<span class="c1">// データ型の確認</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">name</span><span class="p">);</span> <span class="c1">// "string"</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">age</span><span class="p">);</span> <span class="c1">// "number"</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">isStudent</span><span class="p">);</span> <span class="c1">// "boolean"</span>
<span class="c1">// プリミティブ型</span>
<span class="kd">let</span> <span class="nx">str</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">文字列</span><span class="dl">"</span><span class="p">;</span> <span class="c1">// String</span>
<span class="kd">let</span> <span class="nx">num</span> <span class="o">=</span> <span class="mi">42</span><span class="p">;</span> <span class="c1">// Number</span>
<span class="kd">let</span> <span class="nx">bool</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span> <span class="c1">// Boolean</span>
<span class="kd">let</span> <span class="nx">nothing</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span> <span class="c1">// Null</span>
<span class="kd">let</span> <span class="nx">undef</span> <span class="o">=</span> <span class="kc">undefined</span><span class="p">;</span> <span class="c1">// Undefined</span>
<span class="kd">let</span> <span class="nx">sym</span> <span class="o">=</span> <span class="nb">Symbol</span><span class="p">(</span><span class="dl">"</span><span class="s2">id</span><span class="dl">"</span><span class="p">);</span> <span class="c1">// Symbol(ES6+)</span>
<span class="kd">let</span> <span class="nx">big</span> <span class="o">=</span> <span class="mi">123</span><span class="nx">n</span><span class="p">;</span> <span class="c1">// BigInt(ES2020+)</span>
<span class="c1">// 参照型</span>
<span class="kd">let</span> <span class="nx">arr</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">];</span> <span class="c1">// Array</span>
<span class="kd">let</span> <span class="nx">obj</span> <span class="o">=</span> <span class="p">{</span> <span class="na">name</span><span class="p">:</span> <span class="dl">"</span><span class="s2">太郎</span><span class="dl">"</span> <span class="p">};</span> <span class="c1">// Object</span>
<span class="kd">let</span> <span class="nx">func</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{};</span> <span class="c1">// Function</span>
</code></pre></div></div>
<h3 id="文字列操作">文字列操作</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 文字列の基本操作</span>
<span class="kd">let</span> <span class="nx">firstName</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">太郎</span><span class="dl">"</span><span class="p">;</span>
<span class="kd">let</span> <span class="nx">lastName</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">田中</span><span class="dl">"</span><span class="p">;</span>
<span class="c1">// 文字列結合</span>
<span class="kd">let</span> <span class="nx">fullName1</span> <span class="o">=</span> <span class="nx">firstName</span> <span class="o">+</span> <span class="nx">lastName</span><span class="p">;</span> <span class="c1">// "太郎田中"</span>
<span class="kd">let</span> <span class="nx">fullName2</span> <span class="o">=</span> <span class="s2">`</span><span class="p">${</span><span class="nx">lastName</span><span class="p">}</span><span class="s2"> </span><span class="p">${</span><span class="nx">firstName</span><span class="p">}</span><span class="s2">`</span><span class="p">;</span> <span class="c1">// "田中 太郎" (テンプレートリテラル)</span>
<span class="c1">// 文字列メソッド</span>
<span class="kd">let</span> <span class="nx">text</span> <span class="o">=</span> <span class="dl">"</span><span class="s2"> Hello, World! </span><span class="dl">"</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">text</span><span class="p">.</span><span class="nx">length</span><span class="p">);</span> <span class="c1">// 16 (文字数)</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">text</span><span class="p">.</span><span class="nx">toLowerCase</span><span class="p">());</span> <span class="c1">// " hello, world! "</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">text</span><span class="p">.</span><span class="nx">toUpperCase</span><span class="p">());</span> <span class="c1">// " HELLO, WORLD! "</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">text</span><span class="p">.</span><span class="nx">trim</span><span class="p">());</span> <span class="c1">// "Hello, World!" (前後の空白削除)</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">text</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="dl">"</span><span class="s2">World</span><span class="dl">"</span><span class="p">));</span> <span class="c1">// 9 (文字列の位置)</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">text</span><span class="p">.</span><span class="nx">includes</span><span class="p">(</span><span class="dl">"</span><span class="s2">Hello</span><span class="dl">"</span><span class="p">));</span> <span class="c1">// true (文字列が含まれるか)</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">text</span><span class="p">.</span><span class="nx">slice</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span> <span class="mi">7</span><span class="p">));</span> <span class="c1">// "Hello" (部分文字列)</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">text</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="dl">"</span><span class="s2">World</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">JavaScript</span><span class="dl">"</span><span class="p">));</span> <span class="c1">// " Hello, JavaScript! "</span>
<span class="c1">// 文字列分割と結合</span>
<span class="kd">let</span> <span class="nx">csv</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">apple,banana,orange</span><span class="dl">"</span><span class="p">;</span>
<span class="kd">let</span> <span class="nx">fruits</span> <span class="o">=</span> <span class="nx">csv</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="dl">"</span><span class="s2">,</span><span class="dl">"</span><span class="p">);</span> <span class="c1">// ["apple", "banana", "orange"]</span>
<span class="kd">let</span> <span class="nx">joined</span> <span class="o">=</span> <span class="nx">fruits</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="dl">"</span><span class="s2"> | </span><span class="dl">"</span><span class="p">);</span> <span class="c1">// "apple | banana | orange"</span>
<span class="c1">// マルチライン文字列(テンプレートリテラル)</span>
<span class="kd">let</span> <span class="nx">multiLine</span> <span class="o">=</span> <span class="s2">`
これは
複数行の
文字列です
`</span><span class="p">;</span>
</code></pre></div></div>
<h3 id="配列">配列</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 配列の作成</span>
<span class="kd">let</span> <span class="nx">arr1</span> <span class="o">=</span> <span class="p">[];</span> <span class="c1">// 空の配列</span>
<span class="kd">let</span> <span class="nx">arr2</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">5</span><span class="p">];</span> <span class="c1">// 数値配列</span>
<span class="kd">let</span> <span class="nx">arr3</span> <span class="o">=</span> <span class="p">[</span><span class="dl">"</span><span class="s2">apple</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">banana</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">orange</span><span class="dl">"</span><span class="p">];</span> <span class="c1">// 文字列配列</span>
<span class="kd">let</span> <span class="nx">arr4</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="dl">"</span><span class="s2">text</span><span class="dl">"</span><span class="p">,</span> <span class="kc">true</span><span class="p">,</span> <span class="kc">null</span><span class="p">];</span> <span class="c1">// 混合配列</span>
<span class="c1">// 配列の基本操作</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">arr2</span><span class="p">.</span><span class="nx">length</span><span class="p">);</span> <span class="c1">// 5 (要素数)</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">arr2</span><span class="p">[</span><span class="mi">0</span><span class="p">]);</span> <span class="c1">// 1 (最初の要素)</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">arr2</span><span class="p">[</span><span class="nx">arr2</span><span class="p">.</span><span class="nx">length</span> <span class="o">-</span> <span class="mi">1</span><span class="p">]);</span> <span class="c1">// 5 (最後の要素)</span>
<span class="c1">// 要素の追加・削除</span>
<span class="nx">arr2</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="mi">6</span><span class="p">);</span> <span class="c1">// 末尾に追加: [1,2,3,4,5,6]</span>
<span class="nx">arr2</span><span class="p">.</span><span class="nx">pop</span><span class="p">();</span> <span class="c1">// 末尾を削除: [1,2,3,4,5]</span>
<span class="nx">arr2</span><span class="p">.</span><span class="nx">unshift</span><span class="p">(</span><span class="mi">0</span><span class="p">);</span> <span class="c1">// 先頭に追加: [0,1,2,3,4,5]</span>
<span class="nx">arr2</span><span class="p">.</span><span class="nx">shift</span><span class="p">();</span> <span class="c1">// 先頭を削除: [1,2,3,4,5]</span>
<span class="c1">// 配列メソッド(ES5+)</span>
<span class="kd">let</span> <span class="nx">numbers</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">5</span><span class="p">];</span>
<span class="c1">// map: 各要素を変換</span>
<span class="kd">let</span> <span class="nx">doubled</span> <span class="o">=</span> <span class="nx">numbers</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">x</span> <span class="o">=></span> <span class="nx">x</span> <span class="o">*</span> <span class="mi">2</span><span class="p">);</span> <span class="c1">// [2,4,6,8,10]</span>
<span class="c1">// filter: 条件に合う要素を抽出</span>
<span class="kd">let</span> <span class="nx">evens</span> <span class="o">=</span> <span class="nx">numbers</span><span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="nx">x</span> <span class="o">=></span> <span class="nx">x</span> <span class="o">%</span> <span class="mi">2</span> <span class="o">===</span> <span class="mi">0</span><span class="p">);</span> <span class="c1">// [2,4]</span>
<span class="c1">// reduce: 配列を単一の値に集約</span>
<span class="kd">let</span> <span class="nx">sum</span> <span class="o">=</span> <span class="nx">numbers</span><span class="p">.</span><span class="nx">reduce</span><span class="p">((</span><span class="nx">acc</span><span class="p">,</span> <span class="nx">x</span><span class="p">)</span> <span class="o">=></span> <span class="nx">acc</span> <span class="o">+</span> <span class="nx">x</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span> <span class="c1">// 15</span>
<span class="c1">// find: 条件に合う最初の要素</span>
<span class="kd">let</span> <span class="nx">found</span> <span class="o">=</span> <span class="nx">numbers</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="nx">x</span> <span class="o">=></span> <span class="nx">x</span> <span class="o">></span> <span class="mi">3</span><span class="p">);</span> <span class="c1">// 4</span>
<span class="c1">// forEach: 各要素に対して処理実行</span>
<span class="nx">numbers</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">x</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">x</span><span class="p">));</span>
<span class="c1">// includes: 要素が含まれているか</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">numbers</span><span class="p">.</span><span class="nx">includes</span><span class="p">(</span><span class="mi">3</span><span class="p">));</span> <span class="c1">// true</span>
<span class="c1">// sort: ソート</span>
<span class="kd">let</span> <span class="nx">fruits</span> <span class="o">=</span> <span class="p">[</span><span class="dl">"</span><span class="s2">banana</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">apple</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">orange</span><span class="dl">"</span><span class="p">];</span>
<span class="nx">fruits</span><span class="p">.</span><span class="nx">sort</span><span class="p">();</span> <span class="c1">// ["apple", "banana", "orange"]</span>
<span class="kd">let</span> <span class="nx">nums</span> <span class="o">=</span> <span class="p">[</span><span class="mi">3</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">5</span><span class="p">];</span>
<span class="nx">nums</span><span class="p">.</span><span class="nx">sort</span><span class="p">((</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="o">=></span> <span class="nx">a</span> <span class="o">-</span> <span class="nx">b</span><span class="p">);</span> <span class="c1">// [1,1,3,4,5] (数値ソート)</span>
</code></pre></div></div>
<h3 id="オブジェクト">オブジェクト</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// オブジェクトの作成</span>
<span class="kd">let</span> <span class="nx">person</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">name</span><span class="p">:</span> <span class="dl">"</span><span class="s2">田中太郎</span><span class="dl">"</span><span class="p">,</span>
<span class="na">age</span><span class="p">:</span> <span class="mi">30</span><span class="p">,</span>
<span class="na">city</span><span class="p">:</span> <span class="dl">"</span><span class="s2">東京</span><span class="dl">"</span><span class="p">,</span>
<span class="na">isStudent</span><span class="p">:</span> <span class="kc">false</span>
<span class="p">};</span>
<span class="c1">// プロパティへのアクセス</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">person</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span> <span class="c1">// "田中太郎" (ドット記法)</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">person</span><span class="p">[</span><span class="dl">"</span><span class="s2">age</span><span class="dl">"</span><span class="p">]);</span> <span class="c1">// 30 (ブラケット記法)</span>
<span class="c1">// プロパティの追加・変更</span>
<span class="nx">person</span><span class="p">.</span><span class="nx">email</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">tanaka@example.com</span><span class="dl">"</span><span class="p">;</span> <span class="c1">// 追加</span>
<span class="nx">person</span><span class="p">.</span><span class="nx">age</span> <span class="o">=</span> <span class="mi">31</span><span class="p">;</span> <span class="c1">// 変更</span>
<span class="c1">// プロパティの削除</span>
<span class="k">delete</span> <span class="nx">person</span><span class="p">.</span><span class="nx">isStudent</span><span class="p">;</span>
<span class="c1">// メソッドを含むオブジェクト</span>
<span class="kd">let</span> <span class="nx">calculator</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">value</span><span class="p">:</span> <span class="mi">0</span><span class="p">,</span>
<span class="na">add</span><span class="p">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">x</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">value</span> <span class="o">+=</span> <span class="nx">x</span><span class="p">;</span>
<span class="k">return</span> <span class="k">this</span><span class="p">;</span> <span class="c1">// チェーンメソッド用</span>
<span class="p">},</span>
<span class="na">multiply</span><span class="p">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">x</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">value</span> <span class="o">*=</span> <span class="nx">x</span><span class="p">;</span>
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
<span class="p">},</span>
<span class="na">getValue</span><span class="p">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">value</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="c1">// 使用例</span>
<span class="nx">calculator</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="mi">5</span><span class="p">).</span><span class="nx">multiply</span><span class="p">(</span><span class="mi">2</span><span class="p">).</span><span class="nx">getValue</span><span class="p">();</span> <span class="c1">// 10</span>
<span class="c1">// オブジェクトの反復処理</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">key</span> <span class="k">in</span> <span class="nx">person</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`</span><span class="p">${</span><span class="nx">key</span><span class="p">}</span><span class="s2">: </span><span class="p">${</span><span class="nx">person</span><span class="p">[</span><span class="nx">key</span><span class="p">]}</span><span class="s2">`</span><span class="p">);</span>
<span class="p">}</span>
<span class="c1">// ES6+ のオブジェクト機能</span>
<span class="kd">let</span> <span class="nx">name</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">太郎</span><span class="dl">"</span><span class="p">;</span>
<span class="kd">let</span> <span class="nx">age</span> <span class="o">=</span> <span class="mi">25</span><span class="p">;</span>
<span class="c1">// プロパティ名の短縮記法</span>
<span class="kd">let</span> <span class="nx">user</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">name</span><span class="p">,</span> <span class="nx">age</span> <span class="p">};</span> <span class="c1">// { name: "太郎", age: 25 }</span>
<span class="c1">// 計算されたプロパティ名</span>
<span class="kd">let</span> <span class="nx">prop</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">color</span><span class="dl">"</span><span class="p">;</span>
<span class="kd">let</span> <span class="nx">car</span> <span class="o">=</span> <span class="p">{</span>
<span class="p">[</span><span class="nx">prop</span><span class="p">]:</span> <span class="dl">"</span><span class="s2">red</span><span class="dl">"</span> <span class="c1">// { color: "red" }</span>
<span class="p">};</span>
<span class="c1">// デストラクチャリング代入</span>
<span class="kd">let</span> <span class="p">{</span> <span class="na">name</span><span class="p">:</span> <span class="nx">userName</span><span class="p">,</span> <span class="na">age</span><span class="p">:</span> <span class="nx">userAge</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">user</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">userName</span><span class="p">,</span> <span class="nx">userAge</span><span class="p">);</span> <span class="c1">// "太郎" 25</span>
</code></pre></div></div>
<h2 id="関数">関数</h2>
<h3 id="関数の定義">関数の定義</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 関数宣言</span>
<span class="kd">function</span> <span class="nx">greet</span><span class="p">(</span><span class="nx">name</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="s2">`こんにちは、</span><span class="p">${</span><span class="nx">name</span><span class="p">}</span><span class="s2">さん!`</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// 関数式</span>
<span class="kd">const</span> <span class="nx">greet2</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">name</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="s2">`こんにちは、</span><span class="p">${</span><span class="nx">name</span><span class="p">}</span><span class="s2">さん!`</span><span class="p">;</span>
<span class="p">};</span>
<span class="c1">// アロー関数(ES6+)</span>
<span class="kd">const</span> <span class="nx">greet3</span> <span class="o">=</span> <span class="p">(</span><span class="nx">name</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">return</span> <span class="s2">`こんにちは、</span><span class="p">${</span><span class="nx">name</span><span class="p">}</span><span class="s2">さん!`</span><span class="p">;</span>
<span class="p">};</span>
<span class="c1">// アロー関数(短縮形)</span>
<span class="kd">const</span> <span class="nx">greet4</span> <span class="o">=</span> <span class="nx">name</span> <span class="o">=></span> <span class="s2">`こんにちは、</span><span class="p">${</span><span class="nx">name</span><span class="p">}</span><span class="s2">さん!`</span><span class="p">;</span>
<span class="c1">// 複数パラメータのアロー関数</span>
<span class="kd">const</span> <span class="nx">add</span> <span class="o">=</span> <span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="o">=></span> <span class="nx">a</span> <span class="o">+</span> <span class="nx">b</span><span class="p">;</span>
<span class="c1">// 関数の呼び出し</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">greet</span><span class="p">(</span><span class="dl">"</span><span class="s2">太郎</span><span class="dl">"</span><span class="p">));</span> <span class="c1">// "こんにちは、太郎さん!"</span>
<span class="c1">// デフォルトパラメータ(ES6+)</span>
<span class="kd">function</span> <span class="nx">createUser</span><span class="p">(</span><span class="nx">name</span><span class="p">,</span> <span class="nx">age</span> <span class="o">=</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">city</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">未設定</span><span class="dl">"</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">{</span> <span class="nx">name</span><span class="p">,</span> <span class="nx">age</span><span class="p">,</span> <span class="nx">city</span> <span class="p">};</span>
<span class="p">}</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">createUser</span><span class="p">(</span><span class="dl">"</span><span class="s2">太郎</span><span class="dl">"</span><span class="p">));</span> <span class="c1">// { name: "太郎", age: 0, city: "未設定" }</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">createUser</span><span class="p">(</span><span class="dl">"</span><span class="s2">花子</span><span class="dl">"</span><span class="p">,</span> <span class="mi">25</span><span class="p">));</span> <span class="c1">// { name: "花子", age: 25, city: "未設定" }</span>
<span class="c1">// 可変長引数(Rest Parameters)</span>
<span class="kd">function</span> <span class="nx">sum</span><span class="p">(...</span><span class="nx">numbers</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">numbers</span><span class="p">.</span><span class="nx">reduce</span><span class="p">((</span><span class="nx">total</span><span class="p">,</span> <span class="nx">num</span><span class="p">)</span> <span class="o">=></span> <span class="nx">total</span> <span class="o">+</span> <span class="nx">num</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">sum</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">5</span><span class="p">));</span> <span class="c1">// 15</span>
<span class="c1">// スプレッド演算子</span>
<span class="kd">const</span> <span class="nx">arr1</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">];</span>
<span class="kd">const</span> <span class="nx">arr2</span> <span class="o">=</span> <span class="p">[</span><span class="mi">4</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">6</span><span class="p">];</span>
<span class="kd">const</span> <span class="nx">combined</span> <span class="o">=</span> <span class="p">[...</span><span class="nx">arr1</span><span class="p">,</span> <span class="p">...</span><span class="nx">arr2</span><span class="p">];</span> <span class="c1">// [1,2,3,4,5,6]</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">max</span><span class="p">(...</span><span class="nx">arr1</span><span class="p">));</span> <span class="c1">// 3</span>
</code></pre></div></div>
<h3 id="スコープとクロージャ">スコープとクロージャ</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// グローバルスコープ</span>
<span class="kd">let</span> <span class="nx">globalVar</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">グローバル</span><span class="dl">"</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">outerFunction</span><span class="p">()</span> <span class="p">{</span>
<span class="c1">// 関数スコープ</span>
<span class="kd">let</span> <span class="nx">outerVar</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">外側</span><span class="dl">"</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">innerFunction</span><span class="p">()</span> <span class="p">{</span>
<span class="c1">// クロージャ</span>
<span class="kd">let</span> <span class="nx">innerVar</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">内側</span><span class="dl">"</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">globalVar</span><span class="p">);</span> <span class="c1">// アクセス可能</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">outerVar</span><span class="p">);</span> <span class="c1">// アクセス可能</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">innerVar</span><span class="p">);</span> <span class="c1">// アクセス可能</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">innerFunction</span><span class="p">;</span>
<span class="p">}</span>
<span class="kd">const</span> <span class="nx">closure</span> <span class="o">=</span> <span class="nx">outerFunction</span><span class="p">();</span>
<span class="nx">closure</span><span class="p">();</span> <span class="c1">// クロージャが実行される</span>
<span class="c1">// 実用的なクロージャの例</span>
<span class="kd">function</span> <span class="nx">createCounter</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">count</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
<span class="k">return</span> <span class="p">{</span>
<span class="na">increment</span><span class="p">:</span> <span class="p">()</span> <span class="o">=></span> <span class="o">++</span><span class="nx">count</span><span class="p">,</span>
<span class="na">decrement</span><span class="p">:</span> <span class="p">()</span> <span class="o">=></span> <span class="o">--</span><span class="nx">count</span><span class="p">,</span>
<span class="na">getCount</span><span class="p">:</span> <span class="p">()</span> <span class="o">=></span> <span class="nx">count</span>
<span class="p">};</span>
<span class="p">}</span>
<span class="kd">const</span> <span class="nx">counter</span> <span class="o">=</span> <span class="nx">createCounter</span><span class="p">();</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">counter</span><span class="p">.</span><span class="nx">increment</span><span class="p">());</span> <span class="c1">// 1</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">counter</span><span class="p">.</span><span class="nx">increment</span><span class="p">());</span> <span class="c1">// 2</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">counter</span><span class="p">.</span><span class="nx">getCount</span><span class="p">());</span> <span class="c1">// 2</span>
<span class="c1">// ブロックスコープ(let, const)</span>
<span class="p">{</span>
<span class="kd">let</span> <span class="nx">blockVar</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">ブロック内</span><span class="dl">"</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">blockConst</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">定数</span><span class="dl">"</span><span class="p">;</span>
<span class="c1">// これらはブロック外からアクセス不可</span>
<span class="p">}</span>
<span class="c1">// var は関数スコープ</span>
<span class="kd">function</span> <span class="nx">varExample</span><span class="p">()</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="kc">true</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">varVariable</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">var変数</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">varVariable</span><span class="p">);</span> <span class="c1">// アクセス可能(ホイスティング)</span>
<span class="p">}</span>
</code></pre></div></div>
<h2 id="dom操作">DOM操作</h2>
<h3 id="要素の取得">要素の取得</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// ID で取得</span>
<span class="kd">const</span> <span class="nx">element</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">myId</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// クラス名で取得</span>
<span class="kd">const</span> <span class="nx">elements</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="dl">"</span><span class="s2">myClass</span><span class="dl">"</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">firstElement</span> <span class="o">=</span> <span class="nx">elements</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
<span class="c1">// タグ名で取得</span>
<span class="kd">const</span> <span class="nx">paragraphs</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="dl">"</span><span class="s2">p</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// CSSセレクタで取得(推奨)</span>
<span class="kd">const</span> <span class="nx">element2</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#myId</span><span class="dl">"</span><span class="p">);</span> <span class="c1">// 最初の要素</span>
<span class="kd">const</span> <span class="nx">elements2</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="dl">"</span><span class="s2">.myClass</span><span class="dl">"</span><span class="p">);</span> <span class="c1">// 全ての要素</span>
<span class="c1">// 複雑なセレクタの例</span>
<span class="kd">const</span> <span class="nx">navLinks</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="dl">"</span><span class="s2">nav ul li a</span><span class="dl">"</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">firstParagraph</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">article p:first-child</span><span class="dl">"</span><span class="p">);</span>
</code></pre></div></div>
<h3 id="要素の操作">要素の操作</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// テキストコンテンツの操作</span>
<span class="kd">const</span> <span class="nx">title</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">h1</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">title</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">新しいタイトル</span><span class="dl">"</span><span class="p">;</span> <span class="c1">// HTMLタグは文字列として表示</span>
<span class="nx">title</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="dl">"</span><span class="s2"><strong>太字タイトル</strong></span><span class="dl">"</span><span class="p">;</span> <span class="c1">// HTMLタグも解釈</span>
<span class="c1">// 属性の操作</span>
<span class="kd">const</span> <span class="nx">link</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">a</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">link</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="dl">"</span><span class="s2">href</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">https://example.com</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">link</span><span class="p">.</span><span class="nx">getAttribute</span><span class="p">(</span><span class="dl">"</span><span class="s2">href</span><span class="dl">"</span><span class="p">);</span> <span class="c1">// "https://example.com"</span>
<span class="nx">link</span><span class="p">.</span><span class="nx">removeAttribute</span><span class="p">(</span><span class="dl">"</span><span class="s2">target</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// より簡単な属性アクセス</span>
<span class="nx">link</span><span class="p">.</span><span class="nx">href</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">https://google.com</span><span class="dl">"</span><span class="p">;</span>
<span class="nx">link</span><span class="p">.</span><span class="nx">target</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">_blank</span><span class="dl">"</span><span class="p">;</span>
<span class="c1">// クラスの操作</span>
<span class="kd">const</span> <span class="nx">button</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">button</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="dl">"</span><span class="s2">active</span><span class="dl">"</span><span class="p">);</span> <span class="c1">// クラス追加</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">remove</span><span class="p">(</span><span class="dl">"</span><span class="s2">disabled</span><span class="dl">"</span><span class="p">);</span> <span class="c1">// クラス削除</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">toggle</span><span class="p">(</span><span class="dl">"</span><span class="s2">highlighted</span><span class="dl">"</span><span class="p">);</span> <span class="c1">// クラスの切り替え</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">contains</span><span class="p">(</span><span class="dl">"</span><span class="s2">active</span><span class="dl">"</span><span class="p">);</span> <span class="c1">// クラスの存在確認</span>
<span class="c1">// スタイルの操作</span>
<span class="kd">const</span> <span class="nx">box</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">.box</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">box</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">backgroundColor</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">red</span><span class="dl">"</span><span class="p">;</span>
<span class="nx">box</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">fontSize</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">20px</span><span class="dl">"</span><span class="p">;</span>
<span class="nx">box</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">none</span><span class="dl">"</span><span class="p">;</span>
<span class="c1">// 複数スタイルの設定</span>
<span class="nb">Object</span><span class="p">.</span><span class="nx">assign</span><span class="p">(</span><span class="nx">box</span><span class="p">.</span><span class="nx">style</span><span class="p">,</span> <span class="p">{</span>
<span class="na">width</span><span class="p">:</span> <span class="dl">"</span><span class="s2">200px</span><span class="dl">"</span><span class="p">,</span>
<span class="na">height</span><span class="p">:</span> <span class="dl">"</span><span class="s2">200px</span><span class="dl">"</span><span class="p">,</span>
<span class="na">border</span><span class="p">:</span> <span class="dl">"</span><span class="s2">2px solid black</span><span class="dl">"</span>
<span class="p">});</span>
</code></pre></div></div>
<h3 id="要素の作成と追加">要素の作成と追加</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 新しい要素の作成</span>
<span class="kd">const</span> <span class="nx">newParagraph</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="dl">"</span><span class="s2">p</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">newParagraph</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">新しい段落です</span><span class="dl">"</span><span class="p">;</span>
<span class="nx">newParagraph</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">new-content</span><span class="dl">"</span><span class="p">;</span>
<span class="c1">// 要素の追加</span>
<span class="kd">const</span> <span class="nx">container</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#container</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">newParagraph</span><span class="p">);</span> <span class="c1">// 末尾に追加</span>
<span class="c1">// より柔軟な挿入</span>
<span class="kd">const</span> <span class="nx">referenceElement</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">.reference</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">insertBefore</span><span class="p">(</span><span class="nx">newParagraph</span><span class="p">,</span> <span class="nx">referenceElement</span><span class="p">);</span> <span class="c1">// 指定要素の前に挿入</span>
<span class="c1">// 新しいAPI(より便利)</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">insertAdjacentElement</span><span class="p">(</span><span class="dl">"</span><span class="s2">beforeend</span><span class="dl">"</span><span class="p">,</span> <span class="nx">newParagraph</span><span class="p">);</span> <span class="c1">// 末尾に追加</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">insertAdjacentElement</span><span class="p">(</span><span class="dl">"</span><span class="s2">afterbegin</span><span class="dl">"</span><span class="p">,</span> <span class="nx">newParagraph</span><span class="p">);</span> <span class="c1">// 先頭に追加</span>
<span class="c1">// HTMLを直接挿入</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">insertAdjacentHTML</span><span class="p">(</span><span class="dl">"</span><span class="s2">beforeend</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2"><p>HTMLで追加</p></span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// 要素の削除</span>
<span class="kd">const</span> <span class="nx">elementToRemove</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">.remove-me</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">elementToRemove</span><span class="p">.</span><span class="nx">remove</span><span class="p">();</span> <span class="c1">// 新しい方法</span>
<span class="c1">// elementToRemove.parentNode.removeChild(elementToRemove); // 古い方法</span>
<span class="c1">// 要素の置換</span>
<span class="kd">const</span> <span class="nx">oldElement</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">.old</span><span class="dl">"</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">newElement</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="dl">"</span><span class="s2">div</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">newElement</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">新しい要素</span><span class="dl">"</span><span class="p">;</span>
<span class="nx">oldElement</span><span class="p">.</span><span class="nx">replaceWith</span><span class="p">(</span><span class="nx">newElement</span><span class="p">);</span>
</code></pre></div></div>
<h2 id="イベント処理">イベント処理</h2>
<h3 id="イベントリスナーの追加">イベントリスナーの追加</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 基本的なイベントリスナー</span>
<span class="kd">const</span> <span class="nx">button</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#myButton</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ボタンがクリックされました</span><span class="dl">"</span><span class="p">);</span>
<span class="p">});</span>
<span class="c1">// アロー関数を使用</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ボタンがクリックされました</span><span class="dl">"</span><span class="p">);</span>
<span class="p">});</span>
<span class="c1">// 名前付き関数を使用</span>
<span class="kd">function</span> <span class="nx">handleClick</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ボタンがクリックされました</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="nx">handleClick</span><span class="p">);</span>
<span class="c1">// イベントオブジェクトの使用</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">イベントタイプ:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">event</span><span class="p">.</span><span class="nx">type</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ターゲット要素:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">event</span><span class="p">.</span><span class="nx">target</span><span class="p">);</span>
<span class="nx">event</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span> <span class="c1">// デフォルト動作を阻止</span>
<span class="p">});</span>
<span class="c1">// 一度だけ実行するイベント</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="nx">handleClick</span><span class="p">,</span> <span class="p">{</span> <span class="na">once</span><span class="p">:</span> <span class="kc">true</span> <span class="p">});</span>
<span class="c1">// イベントリスナーの削除</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">removeEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="nx">handleClick</span><span class="p">);</span>
</code></pre></div></div>
<h3 id="よく使用するイベント">よく使用するイベント</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// マウスイベント</span>
<span class="nx">element</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">クリック</span><span class="dl">"</span><span class="p">));</span>
<span class="nx">element</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">dblclick</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ダブルクリック</span><span class="dl">"</span><span class="p">));</span>
<span class="nx">element</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">mousedown</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">マウスボタン押下</span><span class="dl">"</span><span class="p">));</span>
<span class="nx">element</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">mouseup</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">マウスボタン離上</span><span class="dl">"</span><span class="p">));</span>
<span class="nx">element</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">mouseover</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">マウスオーバー</span><span class="dl">"</span><span class="p">));</span>
<span class="nx">element</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">mouseout</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">マウスアウト</span><span class="dl">"</span><span class="p">));</span>
<span class="nx">element</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">mousemove</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`マウス位置: (</span><span class="p">${</span><span class="nx">e</span><span class="p">.</span><span class="nx">clientX</span><span class="p">}</span><span class="s2">, </span><span class="p">${</span><span class="nx">e</span><span class="p">.</span><span class="nx">clientY</span><span class="p">}</span><span class="s2">)`</span><span class="p">);</span>
<span class="p">});</span>
<span class="c1">// キーボードイベント</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">keydown</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`キー押下: </span><span class="p">${</span><span class="nx">e</span><span class="p">.</span><span class="nx">key</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">key</span> <span class="o">===</span> <span class="dl">"</span><span class="s2">Enter</span><span class="dl">"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">Enterキーが押されました</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">keyup</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`キー離上: </span><span class="p">${</span><span class="nx">e</span><span class="p">.</span><span class="nx">key</span><span class="p">}</span><span class="s2">`</span><span class="p">));</span>
<span class="c1">// フォームイベント</span>
<span class="kd">const</span> <span class="nx">form</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#myForm</span><span class="dl">"</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">input</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#myInput</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">form</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">submit</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span> <span class="c1">// フォーム送信を阻止</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">フォーム送信</span><span class="dl">"</span><span class="p">);</span>
<span class="p">});</span>
<span class="nx">input</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">input</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`入力値: </span><span class="p">${</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="p">});</span>
<span class="nx">input</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">focus</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">フォーカス</span><span class="dl">"</span><span class="p">));</span>
<span class="nx">input</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">blur</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">フォーカス失う</span><span class="dl">"</span><span class="p">));</span>
<span class="c1">// ウィンドウイベント</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">load</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ページ読み込み完了</span><span class="dl">"</span><span class="p">));</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">resize</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`ウィンドウサイズ: </span><span class="p">${</span><span class="nb">window</span><span class="p">.</span><span class="nx">innerWidth</span><span class="p">}</span><span class="s2">x</span><span class="p">${</span><span class="nb">window</span><span class="p">.</span><span class="nx">innerHeight</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="p">});</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">scroll</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`スクロール位置: </span><span class="p">${</span><span class="nb">window</span><span class="p">.</span><span class="nx">scrollY</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="p">});</span>
<span class="c1">// DOMコンテンツ読み込み完了(推奨)</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">DOMContentLoaded</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">DOM読み込み完了</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// ここに初期化コードを記述</span>
<span class="p">});</span>
</code></pre></div></div>
<h3 id="イベント委譲">イベント委譲</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 動的に追加される要素に対するイベント処理</span>
<span class="kd">const</span> <span class="nx">container</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#container</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// 子要素(ボタン)に対するクリックイベントを親要素で処理</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">matches</span><span class="p">(</span><span class="dl">"</span><span class="s2">button</span><span class="dl">"</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ボタンがクリックされました:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">textContent</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="c1">// 新しいボタンを動的に追加</span>
<span class="kd">function</span> <span class="nx">addButton</span><span class="p">(</span><span class="nx">text</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">button</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="dl">"</span><span class="s2">button</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="nx">text</span><span class="p">;</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">button</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">addButton</span><span class="p">(</span><span class="dl">"</span><span class="s2">新しいボタン1</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">addButton</span><span class="p">(</span><span class="dl">"</span><span class="s2">新しいボタン2</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// これらのボタンも自動的にイベントが適用される</span>
</code></pre></div></div>
<h2 id="非同期処理">非同期処理</h2>
<h3 id="promise">Promise</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// Promiseの基本</span>
<span class="kd">const</span> <span class="nx">myPromise</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Promise</span><span class="p">((</span><span class="nx">resolve</span><span class="p">,</span> <span class="nx">reject</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="c1">// 非同期処理のシミュレーション</span>
<span class="nx">setTimeout</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">success</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span> <span class="o">></span> <span class="mf">0.5</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">success</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">resolve</span><span class="p">(</span><span class="dl">"</span><span class="s2">成功しました!</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">reject</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラーが発生しました</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">},</span> <span class="mi">1000</span><span class="p">);</span>
<span class="p">});</span>
<span class="c1">// Promiseの使用</span>
<span class="nx">myPromise</span>
<span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="nx">result</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">成功:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">result</span><span class="p">);</span>
<span class="p">})</span>
<span class="p">.</span><span class="k">catch</span><span class="p">(</span><span class="nx">error</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
<span class="p">})</span>
<span class="p">.</span><span class="k">finally</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">処理完了</span><span class="dl">"</span><span class="p">);</span>
<span class="p">});</span>
<span class="c1">// Promiseチェーン</span>
<span class="kd">function</span> <span class="nx">fetchUser</span><span class="p">(</span><span class="nx">id</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="k">new</span> <span class="nb">Promise</span><span class="p">(</span><span class="nx">resolve</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">setTimeout</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">resolve</span><span class="p">({</span> <span class="nx">id</span><span class="p">,</span> <span class="na">name</span><span class="p">:</span> <span class="s2">`ユーザー</span><span class="p">${</span><span class="nx">id</span><span class="p">}</span><span class="s2">`</span> <span class="p">});</span>
<span class="p">},</span> <span class="mi">500</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">fetchUserPosts</span><span class="p">(</span><span class="nx">userId</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="k">new</span> <span class="nb">Promise</span><span class="p">(</span><span class="nx">resolve</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">setTimeout</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">resolve</span><span class="p">([</span>
<span class="p">{</span> <span class="na">id</span><span class="p">:</span> <span class="mi">1</span><span class="p">,</span> <span class="na">title</span><span class="p">:</span> <span class="dl">"</span><span class="s2">投稿1</span><span class="dl">"</span><span class="p">,</span> <span class="nx">userId</span> <span class="p">},</span>
<span class="p">{</span> <span class="na">id</span><span class="p">:</span> <span class="mi">2</span><span class="p">,</span> <span class="na">title</span><span class="p">:</span> <span class="dl">"</span><span class="s2">投稿2</span><span class="dl">"</span><span class="p">,</span> <span class="nx">userId</span> <span class="p">}</span>
<span class="p">]);</span>
<span class="p">},</span> <span class="mi">500</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="c1">// チェーンの実行</span>
<span class="nx">fetchUser</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span>
<span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="nx">user</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ユーザー取得:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">user</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">fetchUserPosts</span><span class="p">(</span><span class="nx">user</span><span class="p">.</span><span class="nx">id</span><span class="p">);</span>
<span class="p">})</span>
<span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="nx">posts</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">投稿取得:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">posts</span><span class="p">);</span>
<span class="p">})</span>
<span class="p">.</span><span class="k">catch</span><span class="p">(</span><span class="nx">error</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
<span class="p">});</span>
</code></pre></div></div>
<h3 id="asyncawait">async/await</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// async/awaitを使用した非同期処理</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">getUserData</span><span class="p">(</span><span class="nx">id</span><span class="p">)</span> <span class="p">{</span>
<span class="k">try</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">user</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">fetchUser</span><span class="p">(</span><span class="nx">id</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ユーザー取得:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">user</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">posts</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">fetchUserPosts</span><span class="p">(</span><span class="nx">user</span><span class="p">.</span><span class="nx">id</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">投稿取得:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">posts</span><span class="p">);</span>
<span class="k">return</span> <span class="p">{</span> <span class="nx">user</span><span class="p">,</span> <span class="nx">posts</span> <span class="p">};</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
<span class="k">throw</span> <span class="nx">error</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// async関数の呼び出し</span>
<span class="nx">getUserData</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span>
<span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="nx">data</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">完了:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">data</span><span class="p">))</span>
<span class="p">.</span><span class="k">catch</span><span class="p">(</span><span class="nx">error</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">処理失敗:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">));</span>
<span class="c1">// 複数の非同期処理を並行実行</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">fetchMultipleUsers</span><span class="p">()</span> <span class="p">{</span>
<span class="k">try</span> <span class="p">{</span>
<span class="c1">// 並行実行(高速)</span>
<span class="kd">const</span> <span class="p">[</span><span class="nx">user1</span><span class="p">,</span> <span class="nx">user2</span><span class="p">,</span> <span class="nx">user3</span><span class="p">]</span> <span class="o">=</span> <span class="k">await</span> <span class="nb">Promise</span><span class="p">.</span><span class="nx">all</span><span class="p">([</span>
<span class="nx">fetchUser</span><span class="p">(</span><span class="mi">1</span><span class="p">),</span>
<span class="nx">fetchUser</span><span class="p">(</span><span class="mi">2</span><span class="p">),</span>
<span class="nx">fetchUser</span><span class="p">(</span><span class="mi">3</span><span class="p">)</span>
<span class="p">]);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">全ユーザー取得完了:</span><span class="dl">"</span><span class="p">,</span> <span class="p">{</span> <span class="nx">user1</span><span class="p">,</span> <span class="nx">user2</span><span class="p">,</span> <span class="nx">user3</span> <span class="p">});</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">いずれかでエラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// Promise.allSettled(エラーがあっても全て実行)</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">fetchWithErrors</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">results</span> <span class="o">=</span> <span class="k">await</span> <span class="nb">Promise</span><span class="p">.</span><span class="nx">allSettled</span><span class="p">([</span>
<span class="nx">fetchUser</span><span class="p">(</span><span class="mi">1</span><span class="p">),</span>
<span class="nb">Promise</span><span class="p">.</span><span class="nx">reject</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラーのテスト</span><span class="dl">"</span><span class="p">),</span>
<span class="nx">fetchUser</span><span class="p">(</span><span class="mi">3</span><span class="p">)</span>
<span class="p">]);</span>
<span class="nx">results</span><span class="p">.</span><span class="nx">forEach</span><span class="p">((</span><span class="nx">result</span><span class="p">,</span> <span class="nx">index</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">result</span><span class="p">.</span><span class="nx">status</span> <span class="o">===</span> <span class="dl">"</span><span class="s2">fulfilled</span><span class="dl">"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`結果</span><span class="p">${</span><span class="nx">index</span><span class="p">}</span><span class="s2">:`</span><span class="p">,</span> <span class="nx">result</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`エラー</span><span class="p">${</span><span class="nx">index</span><span class="p">}</span><span class="s2">:`</span><span class="p">,</span> <span class="nx">result</span><span class="p">.</span><span class="nx">reason</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="p">}</span>
</code></pre></div></div>
<h3 id="fetch-api">Fetch API</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 基本的なGET リクエスト</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">fetchData</span><span class="p">()</span> <span class="p">{</span>
<span class="k">try</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">response</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">fetch</span><span class="p">(</span><span class="dl">"</span><span class="s2">https://jsonplaceholder.typicode.com/posts/1</span><span class="dl">"</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">response</span><span class="p">.</span><span class="nx">ok</span><span class="p">)</span> <span class="p">{</span>
<span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="s2">`HTTP error! status: </span><span class="p">${</span><span class="nx">response</span><span class="p">.</span><span class="nx">status</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="p">}</span>
<span class="kd">const</span> <span class="nx">data</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">response</span><span class="p">.</span><span class="nx">json</span><span class="p">();</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">取得データ:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">data</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">data</span><span class="p">;</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">取得エラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// POST リクエスト</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">createPost</span><span class="p">(</span><span class="nx">postData</span><span class="p">)</span> <span class="p">{</span>
<span class="k">try</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">response</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">fetch</span><span class="p">(</span><span class="dl">"</span><span class="s2">https://jsonplaceholder.typicode.com/posts</span><span class="dl">"</span><span class="p">,</span> <span class="p">{</span>
<span class="na">method</span><span class="p">:</span> <span class="dl">"</span><span class="s2">POST</span><span class="dl">"</span><span class="p">,</span>
<span class="na">headers</span><span class="p">:</span> <span class="p">{</span>
<span class="dl">"</span><span class="s2">Content-Type</span><span class="dl">"</span><span class="p">:</span> <span class="dl">"</span><span class="s2">application/json</span><span class="dl">"</span><span class="p">,</span>
<span class="p">},</span>
<span class="na">body</span><span class="p">:</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">postData</span><span class="p">)</span>
<span class="p">});</span>
<span class="kd">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">response</span><span class="p">.</span><span class="nx">json</span><span class="p">();</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">作成結果:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">result</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">result</span><span class="p">;</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">作成エラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// 使用例</span>
<span class="nx">createPost</span><span class="p">({</span>
<span class="na">title</span><span class="p">:</span> <span class="dl">"</span><span class="s2">新しい投稿</span><span class="dl">"</span><span class="p">,</span>
<span class="na">body</span><span class="p">:</span> <span class="dl">"</span><span class="s2">投稿内容</span><span class="dl">"</span><span class="p">,</span>
<span class="na">userId</span><span class="p">:</span> <span class="mi">1</span>
<span class="p">});</span>
<span class="c1">// ファイルアップロード</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">uploadFile</span><span class="p">(</span><span class="nx">file</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">formData</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">FormData</span><span class="p">();</span>
<span class="nx">formData</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="dl">"</span><span class="s2">file</span><span class="dl">"</span><span class="p">,</span> <span class="nx">file</span><span class="p">);</span>
<span class="k">try</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">response</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">fetch</span><span class="p">(</span><span class="dl">"</span><span class="s2">/upload</span><span class="dl">"</span><span class="p">,</span> <span class="p">{</span>
<span class="na">method</span><span class="p">:</span> <span class="dl">"</span><span class="s2">POST</span><span class="dl">"</span><span class="p">,</span>
<span class="na">body</span><span class="p">:</span> <span class="nx">formData</span>
<span class="p">});</span>
<span class="kd">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">response</span><span class="p">.</span><span class="nx">json</span><span class="p">();</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">アップロード完了:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">result</span><span class="p">);</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">アップロードエラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// AbortController でリクエストをキャンセル</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">cancellableRequest</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">controller</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">AbortController</span><span class="p">();</span>
<span class="c1">// 5秒後にキャンセル</span>
<span class="nx">setTimeout</span><span class="p">(()</span> <span class="o">=></span> <span class="nx">controller</span><span class="p">.</span><span class="nx">abort</span><span class="p">(),</span> <span class="mi">5000</span><span class="p">);</span>
<span class="k">try</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">response</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">fetch</span><span class="p">(</span><span class="dl">"</span><span class="s2">https://httpbin.org/delay/10</span><span class="dl">"</span><span class="p">,</span> <span class="p">{</span>
<span class="na">signal</span><span class="p">:</span> <span class="nx">controller</span><span class="p">.</span><span class="nx">signal</span>
<span class="p">});</span>
<span class="kd">const</span> <span class="nx">data</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">response</span><span class="p">.</span><span class="nx">json</span><span class="p">();</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">データ:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">data</span><span class="p">);</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">error</span><span class="p">.</span><span class="nx">name</span> <span class="o">===</span> <span class="dl">"</span><span class="s2">AbortError</span><span class="dl">"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">リクエストがキャンセルされました</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>
<h2 id="モダンjavascriptes6">モダンJavaScript(ES6+)</h2>
<h3 id="分割代入">分割代入</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 配列の分割代入</span>
<span class="kd">const</span> <span class="nx">colors</span> <span class="o">=</span> <span class="p">[</span><span class="dl">"</span><span class="s2">red</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">green</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">blue</span><span class="dl">"</span><span class="p">];</span>
<span class="kd">const</span> <span class="p">[</span><span class="nx">first</span><span class="p">,</span> <span class="nx">second</span><span class="p">,</span> <span class="nx">third</span><span class="p">]</span> <span class="o">=</span> <span class="nx">colors</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">first</span><span class="p">);</span> <span class="c1">// "red"</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">second</span><span class="p">);</span> <span class="c1">// "green"</span>
<span class="c1">// デフォルト値</span>
<span class="kd">const</span> <span class="p">[</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">,</span> <span class="nx">c</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">yellow</span><span class="dl">"</span><span class="p">]</span> <span class="o">=</span> <span class="p">[</span><span class="dl">"</span><span class="s2">red</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">green</span><span class="dl">"</span><span class="p">];</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">c</span><span class="p">);</span> <span class="c1">// "yellow"</span>
<span class="c1">// 値の交換</span>
<span class="kd">let</span> <span class="nx">x</span> <span class="o">=</span> <span class="mi">1</span><span class="p">,</span> <span class="nx">y</span> <span class="o">=</span> <span class="mi">2</span><span class="p">;</span>
<span class="p">[</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">]</span> <span class="o">=</span> <span class="p">[</span><span class="nx">y</span><span class="p">,</span> <span class="nx">x</span><span class="p">];</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">);</span> <span class="c1">// 2, 1</span>
<span class="c1">// オブジェクトの分割代入</span>
<span class="kd">const</span> <span class="nx">person</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">name</span><span class="p">:</span> <span class="dl">"</span><span class="s2">田中太郎</span><span class="dl">"</span><span class="p">,</span>
<span class="na">age</span><span class="p">:</span> <span class="mi">30</span><span class="p">,</span>
<span class="na">city</span><span class="p">:</span> <span class="dl">"</span><span class="s2">東京</span><span class="dl">"</span>
<span class="p">};</span>
<span class="kd">const</span> <span class="p">{</span> <span class="nx">name</span><span class="p">,</span> <span class="nx">age</span><span class="p">,</span> <span class="nx">city</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">person</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">name</span><span class="p">);</span> <span class="c1">// "田中太郎"</span>
<span class="c1">// プロパティ名を変更</span>
<span class="kd">const</span> <span class="p">{</span> <span class="na">name</span><span class="p">:</span> <span class="nx">fullName</span><span class="p">,</span> <span class="na">age</span><span class="p">:</span> <span class="nx">years</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">person</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">fullName</span><span class="p">);</span> <span class="c1">// "田中太郎"</span>
<span class="c1">// ネストした分割代入</span>
<span class="kd">const</span> <span class="nx">user</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">id</span><span class="p">:</span> <span class="mi">1</span><span class="p">,</span>
<span class="na">info</span><span class="p">:</span> <span class="p">{</span>
<span class="na">name</span><span class="p">:</span> <span class="dl">"</span><span class="s2">太郎</span><span class="dl">"</span><span class="p">,</span>
<span class="na">contact</span><span class="p">:</span> <span class="p">{</span>
<span class="na">email</span><span class="p">:</span> <span class="dl">"</span><span class="s2">taro@example.com</span><span class="dl">"</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="kd">const</span> <span class="p">{</span> <span class="na">info</span><span class="p">:</span> <span class="p">{</span> <span class="na">name</span><span class="p">:</span> <span class="nx">userName</span><span class="p">,</span> <span class="na">contact</span><span class="p">:</span> <span class="p">{</span> <span class="nx">email</span> <span class="p">}</span> <span class="p">}</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">user</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">userName</span><span class="p">);</span> <span class="c1">// "太郎"</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">email</span><span class="p">);</span> <span class="c1">// "taro@example.com"</span>
<span class="c1">// 関数の引数での分割代入</span>
<span class="kd">function</span> <span class="nx">greetUser</span><span class="p">({</span> <span class="nx">name</span><span class="p">,</span> <span class="nx">age</span> <span class="o">=</span> <span class="mi">0</span> <span class="p">})</span> <span class="p">{</span>
<span class="k">return</span> <span class="s2">`こんにちは、</span><span class="p">${</span><span class="nx">name</span><span class="p">}</span><span class="s2">さん(</span><span class="p">${</span><span class="nx">age</span><span class="p">}</span><span class="s2">歳)`</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">greetUser</span><span class="p">({</span> <span class="na">name</span><span class="p">:</span> <span class="dl">"</span><span class="s2">花子</span><span class="dl">"</span><span class="p">,</span> <span class="na">age</span><span class="p">:</span> <span class="mi">25</span> <span class="p">}));</span> <span class="c1">// "こんにちは、花子さん(25歳)"</span>
</code></pre></div></div>
<h3 id="モジュール">モジュール</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// math.js(エクスポート)</span>
<span class="k">export</span> <span class="kd">const</span> <span class="nx">PI</span> <span class="o">=</span> <span class="mf">3.14159</span><span class="p">;</span>
<span class="k">export</span> <span class="kd">function</span> <span class="nx">add</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">a</span> <span class="o">+</span> <span class="nx">b</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">export</span> <span class="kd">function</span> <span class="nx">multiply</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">a</span> <span class="o">*</span> <span class="nx">b</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// デフォルトエクスポート</span>
<span class="k">export</span> <span class="k">default</span> <span class="kd">function</span> <span class="nx">subtract</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">a</span> <span class="o">-</span> <span class="nx">b</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// main.js(インポート)</span>
<span class="k">import</span> <span class="nx">subtract</span><span class="p">,</span> <span class="p">{</span> <span class="nx">PI</span><span class="p">,</span> <span class="nx">add</span><span class="p">,</span> <span class="nx">multiply</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">./math.js</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">PI</span><span class="p">);</span> <span class="c1">// 3.14159</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">add</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">));</span> <span class="c1">// 5</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">multiply</span><span class="p">(</span><span class="mi">4</span><span class="p">,</span> <span class="mi">5</span><span class="p">));</span> <span class="c1">// 20</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">subtract</span><span class="p">(</span><span class="mi">10</span><span class="p">,</span> <span class="mi">3</span><span class="p">));</span> <span class="c1">// 7</span>
<span class="c1">// 名前を変更してインポート</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">add</span> <span class="k">as</span> <span class="nx">sum</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">./math.js</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">sum</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">));</span> <span class="c1">// 3</span>
<span class="c1">// 全てインポート</span>
<span class="k">import</span> <span class="o">*</span> <span class="k">as</span> <span class="nx">MathUtils</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">./math.js</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">MathUtils</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">));</span> <span class="c1">// 3</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">MathUtils</span><span class="p">.</span><span class="nx">PI</span><span class="p">);</span> <span class="c1">// 3.14159</span>
<span class="c1">// 動的インポート(非同期)</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">loadMathModule</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">mathModule</span> <span class="o">=</span> <span class="k">await</span> <span class="k">import</span><span class="p">(</span><span class="dl">'</span><span class="s1">./math.js</span><span class="dl">'</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">mathModule</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">));</span> <span class="c1">// 3</span>
<span class="p">}</span>
</code></pre></div></div>
<h3 id="クラス">クラス</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// ES6 クラス</span>
<span class="kd">class</span> <span class="nx">Person</span> <span class="p">{</span>
<span class="c1">// コンストラクタ</span>
<span class="kd">constructor</span><span class="p">(</span><span class="nx">name</span><span class="p">,</span> <span class="nx">age</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">name</span> <span class="o">=</span> <span class="nx">name</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">age</span> <span class="o">=</span> <span class="nx">age</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// メソッド</span>
<span class="nx">greet</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="s2">`こんにちは、私は</span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">name</span><span class="p">}</span><span class="s2">です`</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// ゲッター</span>
<span class="kd">get</span> <span class="nx">info</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="s2">`</span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">name</span><span class="p">}</span><span class="s2">(</span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">age</span><span class="p">}</span><span class="s2">歳)`</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// セッター</span>
<span class="kd">set</span> <span class="nx">age</span><span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">value</span> <span class="o"><</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
<span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="dl">"</span><span class="s2">年齢は0以上である必要があります</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">_age</span> <span class="o">=</span> <span class="nx">value</span><span class="p">;</span>
<span class="p">}</span>
<span class="kd">get</span> <span class="nx">age</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">_age</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// 静的メソッド</span>
<span class="kd">static</span> <span class="nx">createAdult</span><span class="p">(</span><span class="nx">name</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">(</span><span class="nx">name</span><span class="p">,</span> <span class="mi">20</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// クラスの使用</span>
<span class="kd">const</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">(</span><span class="dl">"</span><span class="s2">太郎</span><span class="dl">"</span><span class="p">,</span> <span class="mi">25</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">person</span><span class="p">.</span><span class="nx">greet</span><span class="p">());</span> <span class="c1">// "こんにちは、私は太郎です"</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">person</span><span class="p">.</span><span class="nx">info</span><span class="p">);</span> <span class="c1">// "太郎(25歳)"</span>
<span class="c1">// 静的メソッドの使用</span>
<span class="kd">const</span> <span class="nx">adult</span> <span class="o">=</span> <span class="nx">Person</span><span class="p">.</span><span class="nx">createAdult</span><span class="p">(</span><span class="dl">"</span><span class="s2">花子</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// 継承</span>
<span class="kd">class</span> <span class="nx">Student</span> <span class="kd">extends</span> <span class="nx">Person</span> <span class="p">{</span>
<span class="kd">constructor</span><span class="p">(</span><span class="nx">name</span><span class="p">,</span> <span class="nx">age</span><span class="p">,</span> <span class="nx">school</span><span class="p">)</span> <span class="p">{</span>
<span class="k">super</span><span class="p">(</span><span class="nx">name</span><span class="p">,</span> <span class="nx">age</span><span class="p">);</span> <span class="c1">// 親クラスのコンストラクタを呼び出し</span>
<span class="k">this</span><span class="p">.</span><span class="nx">school</span> <span class="o">=</span> <span class="nx">school</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">greet</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="s2">`</span><span class="p">${</span><span class="k">super</span><span class="p">.</span><span class="nx">greet</span><span class="p">()}</span><span class="s2">、</span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">school</span><span class="p">}</span><span class="s2">の学生です`</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">study</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="s2">`</span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">name</span><span class="p">}</span><span class="s2">は勉強しています`</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">const</span> <span class="nx">student</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Student</span><span class="p">(</span><span class="dl">"</span><span class="s2">次郎</span><span class="dl">"</span><span class="p">,</span> <span class="mi">18</span><span class="p">,</span> <span class="dl">"</span><span class="s2">東京大学</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">student</span><span class="p">.</span><span class="nx">greet</span><span class="p">());</span> <span class="c1">// "こんにちは、私は次郎です、東京大学の学生です"</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">student</span><span class="p">.</span><span class="nx">study</span><span class="p">());</span> <span class="c1">// "次郎は勉強しています"</span>
<span class="c1">// プライベートフィールド(ES2022+)</span>
<span class="kd">class</span> <span class="nx">BankAccount</span> <span class="p">{</span>
<span class="err">#</span><span class="nx">balance</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="c1">// プライベートフィールド</span>
<span class="kd">constructor</span><span class="p">(</span><span class="nx">initialBalance</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="err">#</span><span class="nx">balance</span> <span class="o">=</span> <span class="nx">initialBalance</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">deposit</span><span class="p">(</span><span class="nx">amount</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="err">#</span><span class="nx">balance</span> <span class="o">+=</span> <span class="nx">amount</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">getBalance</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="err">#</span><span class="nx">balance</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// プライベートメソッド</span>
<span class="err">#</span><span class="nx">calculateInterest</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="err">#</span><span class="nx">balance</span> <span class="o">*</span> <span class="mf">0.01</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">const</span> <span class="nx">account</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">BankAccount</span><span class="p">(</span><span class="mi">1000</span><span class="p">);</span>
<span class="nx">account</span><span class="p">.</span><span class="nx">deposit</span><span class="p">(</span><span class="mi">500</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">account</span><span class="p">.</span><span class="nx">getBalance</span><span class="p">());</span> <span class="c1">// 1500</span>
<span class="c1">// console.log(account.#balance); // エラー: プライベートフィールドにはアクセス不可</span>
</code></pre></div></div>
<h2 id="エラーハンドリング">エラーハンドリング</h2>
<h3 id="try-catch文">try-catch文</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 基本的なエラーハンドリング</span>
<span class="k">try</span> <span class="p">{</span>
<span class="c1">// エラーが発生する可能性のあるコード</span>
<span class="kd">let</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">riskyOperation</span><span class="p">();</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">成功:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">result</span><span class="p">);</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="c1">// エラーが発生した場合の処理</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラーが発生しました:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
<span class="p">}</span> <span class="k">finally</span> <span class="p">{</span>
<span class="c1">// 必ず実行される処理</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">処理完了</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="c1">// 異なるタイプのエラーの処理</span>
<span class="kd">function</span> <span class="nx">parseJSON</span><span class="p">(</span><span class="nx">jsonString</span><span class="p">)</span> <span class="p">{</span>
<span class="k">try</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="nx">jsonString</span><span class="p">);</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">error</span> <span class="k">instanceof</span> <span class="nx">SyntaxError</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">JSON形式が正しくありません:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">予期しないエラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">return</span> <span class="kc">null</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// カスタムエラー</span>
<span class="kd">class</span> <span class="nx">ValidationError</span> <span class="kd">extends</span> <span class="nb">Error</span> <span class="p">{</span>
<span class="kd">constructor</span><span class="p">(</span><span class="nx">message</span><span class="p">,</span> <span class="nx">field</span><span class="p">)</span> <span class="p">{</span>
<span class="k">super</span><span class="p">(</span><span class="nx">message</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">name</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">ValidationError</span><span class="dl">"</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">field</span> <span class="o">=</span> <span class="nx">field</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">validateEmail</span><span class="p">(</span><span class="nx">email</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">email</span><span class="p">.</span><span class="nx">includes</span><span class="p">(</span><span class="dl">"</span><span class="s2">@</span><span class="dl">"</span><span class="p">))</span> <span class="p">{</span>
<span class="k">throw</span> <span class="k">new</span> <span class="nx">ValidationError</span><span class="p">(</span><span class="dl">"</span><span class="s2">有効なメールアドレスではありません</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">email</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// カスタムエラーの使用</span>
<span class="k">try</span> <span class="p">{</span>
<span class="nx">validateEmail</span><span class="p">(</span><span class="dl">"</span><span class="s2">invalid-email</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">error</span> <span class="k">instanceof</span> <span class="nx">ValidationError</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`検証エラー(</span><span class="p">${</span><span class="nx">error</span><span class="p">.</span><span class="nx">field</span><span class="p">}</span><span class="s2">): </span><span class="p">${</span><span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">予期しないエラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// async/await でのエラーハンドリング</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">fetchUserData</span><span class="p">(</span><span class="nx">id</span><span class="p">)</span> <span class="p">{</span>
<span class="k">try</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">response</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">fetch</span><span class="p">(</span><span class="s2">`/api/users/</span><span class="p">${</span><span class="nx">id</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">response</span><span class="p">.</span><span class="nx">ok</span><span class="p">)</span> <span class="p">{</span>
<span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="s2">`ユーザー取得失敗: </span><span class="p">${</span><span class="nx">response</span><span class="p">.</span><span class="nx">status</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="p">}</span>
<span class="kd">const</span> <span class="nx">userData</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">response</span><span class="p">.</span><span class="nx">json</span><span class="p">();</span>
<span class="k">return</span> <span class="nx">userData</span><span class="p">;</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ユーザーデータ取得エラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
<span class="k">throw</span> <span class="nx">error</span><span class="p">;</span> <span class="c1">// エラーを再度投げる</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// エラーのロギング</span>
<span class="kd">function</span> <span class="nx">logError</span><span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="dl">"</span><span class="s2">Error:</span><span class="dl">"</span><span class="p">,</span> <span class="p">{</span>
<span class="na">message</span><span class="p">:</span> <span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">,</span>
<span class="na">stack</span><span class="p">:</span> <span class="nx">error</span><span class="p">.</span><span class="nx">stack</span><span class="p">,</span>
<span class="na">timestamp</span><span class="p">:</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">().</span><span class="nx">toISOString</span><span class="p">()</span>
<span class="p">});</span>
<span class="p">}</span>
</code></pre></div></div>
<h2 id="ブラウザapi">ブラウザAPI</h2>
<h3 id="local-storage">Local Storage</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// データの保存</span>
<span class="nx">localStorage</span><span class="p">.</span><span class="nx">setItem</span><span class="p">(</span><span class="dl">"</span><span class="s2">username</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">田中太郎</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">localStorage</span><span class="p">.</span><span class="nx">setItem</span><span class="p">(</span><span class="dl">"</span><span class="s2">settings</span><span class="dl">"</span><span class="p">,</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">({</span>
<span class="na">theme</span><span class="p">:</span> <span class="dl">"</span><span class="s2">dark</span><span class="dl">"</span><span class="p">,</span>
<span class="na">language</span><span class="p">:</span> <span class="dl">"</span><span class="s2">ja</span><span class="dl">"</span>
<span class="p">}));</span>
<span class="c1">// データの取得</span>
<span class="kd">const</span> <span class="nx">username</span> <span class="o">=</span> <span class="nx">localStorage</span><span class="p">.</span><span class="nx">getItem</span><span class="p">(</span><span class="dl">"</span><span class="s2">username</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">username</span><span class="p">);</span> <span class="c1">// "田中太郎"</span>
<span class="kd">const</span> <span class="nx">settings</span> <span class="o">=</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="nx">localStorage</span><span class="p">.</span><span class="nx">getItem</span><span class="p">(</span><span class="dl">"</span><span class="s2">settings</span><span class="dl">"</span><span class="p">));</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">settings</span><span class="p">);</span> <span class="c1">// { theme: "dark", language: "ja" }</span>
<span class="c1">// データの削除</span>
<span class="nx">localStorage</span><span class="p">.</span><span class="nx">removeItem</span><span class="p">(</span><span class="dl">"</span><span class="s2">username</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// 全データの削除</span>
<span class="nx">localStorage</span><span class="p">.</span><span class="nx">clear</span><span class="p">();</span>
<span class="c1">// ストレージの変更を監視</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">storage</span><span class="dl">"</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ストレージが変更されました:</span><span class="dl">"</span><span class="p">,</span> <span class="p">{</span>
<span class="na">key</span><span class="p">:</span> <span class="nx">e</span><span class="p">.</span><span class="nx">key</span><span class="p">,</span>
<span class="na">oldValue</span><span class="p">:</span> <span class="nx">e</span><span class="p">.</span><span class="nx">oldValue</span><span class="p">,</span>
<span class="na">newValue</span><span class="p">:</span> <span class="nx">e</span><span class="p">.</span><span class="nx">newValue</span>
<span class="p">});</span>
<span class="p">});</span>
<span class="c1">// セッションストレージ(タブを閉じると削除される)</span>
<span class="nx">sessionStorage</span><span class="p">.</span><span class="nx">setItem</span><span class="p">(</span><span class="dl">"</span><span class="s2">temporary</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">一時的なデータ</span><span class="dl">"</span><span class="p">);</span>
</code></pre></div></div>
<h3 id="geolocation-api">Geolocation API</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 現在位置の取得</span>
<span class="k">if</span> <span class="p">(</span><span class="dl">"</span><span class="s2">geolocation</span><span class="dl">"</span> <span class="k">in</span> <span class="nb">navigator</span><span class="p">)</span> <span class="p">{</span>
<span class="nb">navigator</span><span class="p">.</span><span class="nx">geolocation</span><span class="p">.</span><span class="nx">getCurrentPosition</span><span class="p">(</span>
<span class="kd">function</span><span class="p">(</span><span class="nx">position</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">latitude</span> <span class="o">=</span> <span class="nx">position</span><span class="p">.</span><span class="nx">coords</span><span class="p">.</span><span class="nx">latitude</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">longitude</span> <span class="o">=</span> <span class="nx">position</span><span class="p">.</span><span class="nx">coords</span><span class="p">.</span><span class="nx">longitude</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`現在位置: </span><span class="p">${</span><span class="nx">latitude</span><span class="p">}</span><span class="s2">, </span><span class="p">${</span><span class="nx">longitude</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="p">},</span>
<span class="kd">function</span><span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">位置取得エラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
<span class="p">},</span>
<span class="p">{</span>
<span class="na">enableHighAccuracy</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> <span class="c1">// 高精度</span>
<span class="na">timeout</span><span class="p">:</span> <span class="mi">10000</span><span class="p">,</span> <span class="c1">// タイムアウト(10秒)</span>
<span class="na">maximumAge</span><span class="p">:</span> <span class="mi">60000</span> <span class="c1">// キャッシュ有効期間(1分)</span>
<span class="p">}</span>
<span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">Geolocation APIはサポートされていません</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="c1">// 位置の監視</span>
<span class="kd">const</span> <span class="nx">watchId</span> <span class="o">=</span> <span class="nb">navigator</span><span class="p">.</span><span class="nx">geolocation</span><span class="p">.</span><span class="nx">watchPosition</span><span class="p">(</span>
<span class="kd">function</span><span class="p">(</span><span class="nx">position</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">位置が変更されました:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">position</span><span class="p">.</span><span class="nx">coords</span><span class="p">);</span>
<span class="p">},</span>
<span class="kd">function</span><span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">監視エラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">);</span>
<span class="c1">// 監視の停止</span>
<span class="c1">// navigator.geolocation.clearWatch(watchId);</span>
</code></pre></div></div>
<h3 id="notification-api">Notification API</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 通知の許可を要求</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">requestNotificationPermission</span><span class="p">()</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="dl">"</span><span class="s2">Notification</span><span class="dl">"</span> <span class="k">in</span> <span class="nb">window</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">permission</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">Notification</span><span class="p">.</span><span class="nx">requestPermission</span><span class="p">();</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">通知許可:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">permission</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">permission</span> <span class="o">===</span> <span class="dl">"</span><span class="s2">granted</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// 通知の表示</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">showNotification</span><span class="p">(</span><span class="nx">title</span><span class="p">,</span> <span class="nx">options</span> <span class="o">=</span> <span class="p">{})</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">hasPermission</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">requestNotificationPermission</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">hasPermission</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">notification</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Notification</span><span class="p">(</span><span class="nx">title</span><span class="p">,</span> <span class="p">{</span>
<span class="na">body</span><span class="p">:</span> <span class="nx">options</span><span class="p">.</span><span class="nx">body</span> <span class="o">||</span> <span class="dl">""</span><span class="p">,</span>
<span class="na">icon</span><span class="p">:</span> <span class="nx">options</span><span class="p">.</span><span class="nx">icon</span> <span class="o">||</span> <span class="dl">"</span><span class="s2">/default-icon.png</span><span class="dl">"</span><span class="p">,</span>
<span class="na">tag</span><span class="p">:</span> <span class="nx">options</span><span class="p">.</span><span class="nx">tag</span> <span class="o">||</span> <span class="dl">"</span><span class="s2">default</span><span class="dl">"</span><span class="p">,</span>
<span class="p">...</span><span class="nx">options</span>
<span class="p">});</span>
<span class="nx">notification</span><span class="p">.</span><span class="nx">onclick</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">通知がクリックされました</span><span class="dl">"</span><span class="p">);</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">focus</span><span class="p">();</span>
<span class="k">this</span><span class="p">.</span><span class="nx">close</span><span class="p">();</span>
<span class="p">};</span>
<span class="c1">// 自動で閉じる</span>
<span class="nx">setTimeout</span><span class="p">(()</span> <span class="o">=></span> <span class="nx">notification</span><span class="p">.</span><span class="nx">close</span><span class="p">(),</span> <span class="mi">5000</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// 使用例</span>
<span class="nx">showNotification</span><span class="p">(</span><span class="dl">"</span><span class="s2">新しいメッセージ</span><span class="dl">"</span><span class="p">,</span> <span class="p">{</span>
<span class="na">body</span><span class="p">:</span> <span class="dl">"</span><span class="s2">太郎さんからメッセージが届きました</span><span class="dl">"</span><span class="p">,</span>
<span class="na">icon</span><span class="p">:</span> <span class="dl">"</span><span class="s2">/message-icon.png</span><span class="dl">"</span><span class="p">,</span>
<span class="na">tag</span><span class="p">:</span> <span class="dl">"</span><span class="s2">message</span><span class="dl">"</span>
<span class="p">});</span>
</code></pre></div></div>
<h2 id="実践的なコード例">実践的なコード例</h2>
<h3 id="フォームバリデーション">フォームバリデーション</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">class</span> <span class="nx">FormValidator</span> <span class="p">{</span>
<span class="kd">constructor</span><span class="p">(</span><span class="nx">form</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">form</span> <span class="o">=</span> <span class="nx">form</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">errors</span> <span class="o">=</span> <span class="p">{};</span>
<span class="k">this</span><span class="p">.</span><span class="nx">rules</span> <span class="o">=</span> <span class="p">{};</span>
<span class="k">this</span><span class="p">.</span><span class="nx">init</span><span class="p">();</span>
<span class="p">}</span>
<span class="nx">init</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">form</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">submit</span><span class="dl">"</span><span class="p">,</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
<span class="k">this</span><span class="p">.</span><span class="nx">validate</span><span class="p">();</span>
<span class="p">});</span>
<span class="c1">// リアルタイムバリデーション</span>
<span class="k">this</span><span class="p">.</span><span class="nx">form</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">input</span><span class="dl">"</span><span class="p">,</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">validateField</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="nx">addRule</span><span class="p">(</span><span class="nx">fieldName</span><span class="p">,</span> <span class="nx">rule</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">rules</span><span class="p">[</span><span class="nx">fieldName</span><span class="p">])</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">rules</span><span class="p">[</span><span class="nx">fieldName</span><span class="p">]</span> <span class="o">=</span> <span class="p">[];</span>
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">rules</span><span class="p">[</span><span class="nx">fieldName</span><span class="p">].</span><span class="nx">push</span><span class="p">(</span><span class="nx">rule</span><span class="p">);</span>
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">validateField</span><span class="p">(</span><span class="nx">field</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">rules</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">rules</span><span class="p">[</span><span class="nx">field</span><span class="p">.</span><span class="nx">name</span><span class="p">];</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">rules</span><span class="p">)</span> <span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">clearError</span><span class="p">(</span><span class="nx">field</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">const</span> <span class="nx">rule</span> <span class="k">of</span> <span class="nx">rules</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">rule</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="nx">field</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">result</span><span class="p">.</span><span class="nx">valid</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">addError</span><span class="p">(</span><span class="nx">field</span><span class="p">.</span><span class="nx">name</span><span class="p">,</span> <span class="nx">result</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">showError</span><span class="p">(</span><span class="nx">field</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span>
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">showSuccess</span><span class="p">(</span><span class="nx">field</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span>
<span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">validate</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">errors</span> <span class="o">=</span> <span class="p">{};</span>
<span class="kd">let</span> <span class="nx">isValid</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">fields</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">form</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="dl">"</span><span class="s2">[name]</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">fields</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">field</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">validateField</span><span class="p">(</span><span class="nx">field</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">isValid</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">isValid</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">onSuccess</span><span class="p">();</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">onError</span><span class="p">();</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">isValid</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">addError</span><span class="p">(</span><span class="nx">fieldName</span><span class="p">,</span> <span class="nx">message</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">errors</span><span class="p">[</span><span class="nx">fieldName</span><span class="p">])</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">errors</span><span class="p">[</span><span class="nx">fieldName</span><span class="p">]</span> <span class="o">=</span> <span class="p">[];</span>
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">errors</span><span class="p">[</span><span class="nx">fieldName</span><span class="p">].</span><span class="nx">push</span><span class="p">(</span><span class="nx">message</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">clearError</span><span class="p">(</span><span class="nx">fieldName</span><span class="p">)</span> <span class="p">{</span>
<span class="k">delete</span> <span class="k">this</span><span class="p">.</span><span class="nx">errors</span><span class="p">[</span><span class="nx">fieldName</span><span class="p">];</span>
<span class="k">this</span><span class="p">.</span><span class="nx">hideError</span><span class="p">(</span><span class="nx">fieldName</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">showError</span><span class="p">(</span><span class="nx">fieldName</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">field</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">form</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s2">`[name="</span><span class="p">${</span><span class="nx">fieldName</span><span class="p">}</span><span class="s2">"]`</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">errorContainer</span> <span class="o">=</span> <span class="nx">field</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">.error-message</span><span class="dl">"</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">errorContainer</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">errorContainer</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">errors</span><span class="p">[</span><span class="nx">fieldName</span><span class="p">][</span><span class="mi">0</span><span class="p">];</span>
<span class="nx">errorContainer</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">block</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">field</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="dl">"</span><span class="s2">error</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">field</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">remove</span><span class="p">(</span><span class="dl">"</span><span class="s2">success</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">hideError</span><span class="p">(</span><span class="nx">fieldName</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">field</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">form</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s2">`[name="</span><span class="p">${</span><span class="nx">fieldName</span><span class="p">}</span><span class="s2">"]`</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">errorContainer</span> <span class="o">=</span> <span class="nx">field</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">.error-message</span><span class="dl">"</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">errorContainer</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">errorContainer</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">none</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">field</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">remove</span><span class="p">(</span><span class="dl">"</span><span class="s2">error</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">showSuccess</span><span class="p">(</span><span class="nx">fieldName</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">field</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">form</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s2">`[name="</span><span class="p">${</span><span class="nx">fieldName</span><span class="p">}</span><span class="s2">"]`</span><span class="p">);</span>
<span class="nx">field</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="dl">"</span><span class="s2">success</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">field</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">remove</span><span class="p">(</span><span class="dl">"</span><span class="s2">error</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">onSuccess</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">フォームバリデーション成功</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// フォーム送信処理</span>
<span class="p">}</span>
<span class="nx">onError</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">フォームバリデーションエラー:</span><span class="dl">"</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">errors</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// バリデーションルール</span>
<span class="kd">const</span> <span class="nx">rules</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">required</span><span class="p">:</span> <span class="p">(</span><span class="nx">message</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">この項目は必須です</span><span class="dl">"</span><span class="p">)</span> <span class="o">=></span> <span class="p">({</span>
<span class="na">test</span><span class="p">:</span> <span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="o">=></span> <span class="p">({</span>
<span class="na">valid</span><span class="p">:</span> <span class="nx">value</span><span class="p">.</span><span class="nx">trim</span><span class="p">().</span><span class="nx">length</span> <span class="o">></span> <span class="mi">0</span><span class="p">,</span>
<span class="nx">message</span>
<span class="p">})</span>
<span class="p">}),</span>
<span class="na">email</span><span class="p">:</span> <span class="p">(</span><span class="nx">message</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">有効なメールアドレスを入力してください</span><span class="dl">"</span><span class="p">)</span> <span class="o">=></span> <span class="p">({</span>
<span class="na">test</span><span class="p">:</span> <span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="o">=></span> <span class="p">({</span>
<span class="na">valid</span><span class="p">:</span> <span class="sr">/^</span><span class="se">[^\s</span><span class="sr">@</span><span class="se">]</span><span class="sr">+@</span><span class="se">[^\s</span><span class="sr">@</span><span class="se">]</span><span class="sr">+</span><span class="se">\.[^\s</span><span class="sr">@</span><span class="se">]</span><span class="sr">+$/</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="nx">value</span><span class="p">),</span>
<span class="nx">message</span>
<span class="p">})</span>
<span class="p">}),</span>
<span class="na">minLength</span><span class="p">:</span> <span class="p">(</span><span class="nx">min</span><span class="p">,</span> <span class="nx">message</span><span class="p">)</span> <span class="o">=></span> <span class="p">({</span>
<span class="na">test</span><span class="p">:</span> <span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="o">=></span> <span class="p">({</span>
<span class="na">valid</span><span class="p">:</span> <span class="nx">value</span><span class="p">.</span><span class="nx">length</span> <span class="o">>=</span> <span class="nx">min</span><span class="p">,</span>
<span class="na">message</span><span class="p">:</span> <span class="nx">message</span> <span class="o">||</span> <span class="s2">`</span><span class="p">${</span><span class="nx">min</span><span class="p">}</span><span class="s2">文字以上で入力してください`</span>
<span class="p">})</span>
<span class="p">}),</span>
<span class="na">phone</span><span class="p">:</span> <span class="p">(</span><span class="nx">message</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">有効な電話番号を入力してください</span><span class="dl">"</span><span class="p">)</span> <span class="o">=></span> <span class="p">({</span>
<span class="na">test</span><span class="p">:</span> <span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="o">=></span> <span class="p">({</span>
<span class="na">valid</span><span class="p">:</span> <span class="sr">/^</span><span class="se">[\d</span><span class="sr">-</span><span class="se">]</span><span class="sr">+$/</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="nx">value</span><span class="p">),</span>
<span class="nx">message</span>
<span class="p">})</span>
<span class="p">})</span>
<span class="p">};</span>
<span class="c1">// 使用例</span>
<span class="kd">const</span> <span class="nx">form</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#contactForm</span><span class="dl">"</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">validator</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">FormValidator</span><span class="p">(</span><span class="nx">form</span><span class="p">);</span>
<span class="nx">validator</span>
<span class="p">.</span><span class="nx">addRule</span><span class="p">(</span><span class="dl">"</span><span class="s2">name</span><span class="dl">"</span><span class="p">,</span> <span class="nx">rules</span><span class="p">.</span><span class="nx">required</span><span class="p">())</span>
<span class="p">.</span><span class="nx">addRule</span><span class="p">(</span><span class="dl">"</span><span class="s2">email</span><span class="dl">"</span><span class="p">,</span> <span class="nx">rules</span><span class="p">.</span><span class="nx">required</span><span class="p">())</span>
<span class="p">.</span><span class="nx">addRule</span><span class="p">(</span><span class="dl">"</span><span class="s2">email</span><span class="dl">"</span><span class="p">,</span> <span class="nx">rules</span><span class="p">.</span><span class="nx">email</span><span class="p">())</span>
<span class="p">.</span><span class="nx">addRule</span><span class="p">(</span><span class="dl">"</span><span class="s2">phone</span><span class="dl">"</span><span class="p">,</span> <span class="nx">rules</span><span class="p">.</span><span class="nx">phone</span><span class="p">())</span>
<span class="p">.</span><span class="nx">addRule</span><span class="p">(</span><span class="dl">"</span><span class="s2">message</span><span class="dl">"</span><span class="p">,</span> <span class="nx">rules</span><span class="p">.</span><span class="nx">required</span><span class="p">())</span>
<span class="p">.</span><span class="nx">addRule</span><span class="p">(</span><span class="dl">"</span><span class="s2">message</span><span class="dl">"</span><span class="p">,</span> <span class="nx">rules</span><span class="p">.</span><span class="nx">minLength</span><span class="p">(</span><span class="mi">10</span><span class="p">));</span>
</code></pre></div></div>
<h3 id="シンプルなspasingle-page-application">シンプルなSPA(Single Page Application)</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">class</span> <span class="nx">SimpleRouter</span> <span class="p">{</span>
<span class="kd">constructor</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">routes</span> <span class="o">=</span> <span class="p">{};</span>
<span class="k">this</span><span class="p">.</span><span class="nx">currentRoute</span> <span class="o">=</span> <span class="dl">""</span><span class="p">;</span>
<span class="c1">// ブラウザの戻る/進むボタン対応</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">popstate</span><span class="dl">"</span><span class="p">,</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">handleRoute</span><span class="p">();</span>
<span class="p">});</span>
<span class="c1">// リンククリック時の処理</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">matches</span><span class="p">(</span><span class="dl">"</span><span class="s2">[data-route]</span><span class="dl">"</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
<span class="kd">const</span> <span class="nx">route</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">getAttribute</span><span class="p">(</span><span class="dl">"</span><span class="s2">data-route</span><span class="dl">"</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">navigate</span><span class="p">(</span><span class="nx">route</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="c1">// 初期ルート処理</span>
<span class="k">this</span><span class="p">.</span><span class="nx">handleRoute</span><span class="p">();</span>
<span class="p">}</span>
<span class="nx">addRoute</span><span class="p">(</span><span class="nx">path</span><span class="p">,</span> <span class="nx">handler</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">routes</span><span class="p">[</span><span class="nx">path</span><span class="p">]</span> <span class="o">=</span> <span class="nx">handler</span><span class="p">;</span>
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">navigate</span><span class="p">(</span><span class="nx">path</span><span class="p">)</span> <span class="p">{</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">history</span><span class="p">.</span><span class="nx">pushState</span><span class="p">({},</span> <span class="dl">""</span><span class="p">,</span> <span class="nx">path</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">handleRoute</span><span class="p">();</span>
<span class="p">}</span>
<span class="nx">handleRoute</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">path</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">pathname</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">currentRoute</span> <span class="o">=</span> <span class="nx">path</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">handler</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">routes</span><span class="p">[</span><span class="nx">path</span><span class="p">]</span> <span class="o">||</span> <span class="k">this</span><span class="p">.</span><span class="nx">routes</span><span class="p">[</span><span class="dl">"</span><span class="s2">*</span><span class="dl">"</span><span class="p">];</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">handler</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">handler</span><span class="p">();</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">show404</span><span class="p">();</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nx">show404</span><span class="p">()</span> <span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#app</span><span class="dl">"</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="s2">`
<h1>404 - ページが見つかりません</h1>
<p><a href="/" data-route="/">ホームに戻る</a></p>
`</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// ページコンポーネント</span>
<span class="kd">const</span> <span class="nx">pages</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">home</span><span class="p">:</span> <span class="p">()</span> <span class="o">=></span> <span class="s2">`
<h1>ホームページ</h1>
<nav>
<a href="/about" data-route="/about">会社概要</a> |
<a href="/contact" data-route="/contact">お問い合わせ</a>
</nav>
<p>ようこそ、私たちのサイトへ!</p>
`</span><span class="p">,</span>
<span class="na">about</span><span class="p">:</span> <span class="p">()</span> <span class="o">=></span> <span class="s2">`
<h1>会社概要</h1>
<nav>
<a href="/" data-route="/">ホーム</a> |
<a href="/contact" data-route="/contact">お問い合わせ</a>
</nav>
<p>私たちは革新的なソリューションを提供する会社です。</p>
`</span><span class="p">,</span>
<span class="na">contact</span><span class="p">:</span> <span class="p">()</span> <span class="o">=></span> <span class="s2">`
<h1>お問い合わせ</h1>
<nav>
<a href="/" data-route="/">ホーム</a> |
<a href="/about" data-route="/about">会社概要</a>
</nav>
<form id="contactForm">
<div>
<label>お名前: <input type="text" name="name" required></label>
</div>
<div>
<label>メール: <input type="email" name="email" required></label>
</div>
<div>
<label>メッセージ: <textarea name="message" required></textarea></label>
</div>
<button type="submit">送信</button>
</form>
`</span>
<span class="p">};</span>
<span class="c1">// ルーター初期化</span>
<span class="kd">const</span> <span class="nx">router</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">SimpleRouter</span><span class="p">();</span>
<span class="nx">router</span>
<span class="p">.</span><span class="nx">addRoute</span><span class="p">(</span><span class="dl">"</span><span class="s2">/</span><span class="dl">"</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#app</span><span class="dl">"</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">pages</span><span class="p">.</span><span class="nx">home</span><span class="p">();</span>
<span class="p">})</span>
<span class="p">.</span><span class="nx">addRoute</span><span class="p">(</span><span class="dl">"</span><span class="s2">/about</span><span class="dl">"</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#app</span><span class="dl">"</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">pages</span><span class="p">.</span><span class="nx">about</span><span class="p">();</span>
<span class="p">})</span>
<span class="p">.</span><span class="nx">addRoute</span><span class="p">(</span><span class="dl">"</span><span class="s2">/contact</span><span class="dl">"</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#app</span><span class="dl">"</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">pages</span><span class="p">.</span><span class="nx">contact</span><span class="p">();</span>
<span class="c1">// お問い合わせフォームのイベント設定</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#contactForm</span><span class="dl">"</span><span class="p">).</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">submit</span><span class="dl">"</span><span class="p">,</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
<span class="nx">alert</span><span class="p">(</span><span class="dl">"</span><span class="s2">お問い合わせありがとうございます!</span><span class="dl">"</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">});</span>
</code></pre></div></div>
<h2 id="デバッグとテスト">デバッグとテスト</h2>
<h3 id="デバッグ技法">デバッグ技法</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// コンソール出力</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">基本的なログ</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">info</span><span class="p">(</span><span class="dl">"</span><span class="s2">情報メッセージ</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">warn</span><span class="p">(</span><span class="dl">"</span><span class="s2">警告メッセージ</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラーメッセージ</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// オブジェクトの詳細表示</span>
<span class="kd">const</span> <span class="nx">user</span> <span class="o">=</span> <span class="p">{</span> <span class="na">name</span><span class="p">:</span> <span class="dl">"</span><span class="s2">太郎</span><span class="dl">"</span><span class="p">,</span> <span class="na">age</span><span class="p">:</span> <span class="mi">30</span> <span class="p">};</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">table</span><span class="p">(</span><span class="nx">user</span><span class="p">);</span> <span class="c1">// テーブル形式で表示</span>
<span class="c1">// 実行時間の測定</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">time</span><span class="p">(</span><span class="dl">"</span><span class="s2">処理時間</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// 時間のかかる処理</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o"><</span> <span class="mi">1000000</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="c1">// 何らかの処理</span>
<span class="p">}</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">timeEnd</span><span class="p">(</span><span class="dl">"</span><span class="s2">処理時間</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// グループ化</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">group</span><span class="p">(</span><span class="dl">"</span><span class="s2">ユーザー情報</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">名前:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">user</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">年齢:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">user</span><span class="p">.</span><span class="nx">age</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">groupEnd</span><span class="p">();</span>
<span class="c1">// 条件付きログ</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">assert</span><span class="p">(</span><span class="nx">user</span><span class="p">.</span><span class="nx">age</span> <span class="o">>=</span> <span class="mi">18</span><span class="p">,</span> <span class="dl">"</span><span class="s2">ユーザーは18歳以上である必要があります</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// スタックトレース</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">trace</span><span class="p">(</span><span class="dl">"</span><span class="s2">スタックトレースを表示</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// ブレークポイント</span>
<span class="kd">function</span> <span class="nx">debugFunction</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">x</span> <span class="o">=</span> <span class="mi">10</span><span class="p">;</span>
<span class="k">debugger</span><span class="p">;</span> <span class="c1">// ブラウザの開発者ツールでここで停止</span>
<span class="nx">x</span> <span class="o">*=</span> <span class="mi">2</span><span class="p">;</span>
<span class="k">return</span> <span class="nx">x</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// エラーの詳細表示</span>
<span class="k">try</span> <span class="p">{</span>
<span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="dl">"</span><span class="s2">テストエラー</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラー名:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラーメッセージ:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">スタックトレース:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">.</span><span class="nx">stack</span><span class="p">);</span>
<span class="p">}</span>
</code></pre></div></div>
<h3 id="簡単なテストフレームワーク">簡単なテストフレームワーク</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 簡単なテストフレームワーク</span>
<span class="kd">class</span> <span class="nx">SimpleTest</span> <span class="p">{</span>
<span class="kd">constructor</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">tests</span> <span class="o">=</span> <span class="p">[];</span>
<span class="k">this</span><span class="p">.</span><span class="nx">passed</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">failed</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">test</span><span class="p">(</span><span class="nx">description</span><span class="p">,</span> <span class="nx">testFunction</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">tests</span><span class="p">.</span><span class="nx">push</span><span class="p">({</span> <span class="nx">description</span><span class="p">,</span> <span class="nx">testFunction</span> <span class="p">});</span>
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">assertEqual</span><span class="p">(</span><span class="nx">actual</span><span class="p">,</span> <span class="nx">expected</span><span class="p">,</span> <span class="nx">message</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">actual</span> <span class="o">===</span> <span class="nx">expected</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`✅ </span><span class="p">${</span><span class="nx">message</span> <span class="o">||</span> <span class="dl">'</span><span class="s1">Test passed</span><span class="dl">'</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">passed</span><span class="o">++</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`❌ </span><span class="p">${</span><span class="nx">message</span> <span class="o">||</span> <span class="dl">'</span><span class="s1">Test failed</span><span class="dl">'</span><span class="p">}</span><span class="s2">: expected </span><span class="p">${</span><span class="nx">expected</span><span class="p">}</span><span class="s2">, got </span><span class="p">${</span><span class="nx">actual</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">failed</span><span class="o">++</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nx">assertTrue</span><span class="p">(</span><span class="nx">value</span><span class="p">,</span> <span class="nx">message</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">assertEqual</span><span class="p">(</span><span class="nx">value</span><span class="p">,</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">message</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">assertFalse</span><span class="p">(</span><span class="nx">value</span><span class="p">,</span> <span class="nx">message</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">assertEqual</span><span class="p">(</span><span class="nx">value</span><span class="p">,</span> <span class="kc">false</span><span class="p">,</span> <span class="nx">message</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">run</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">🚀 テスト開始</span><span class="dl">"</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">tests</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(({</span> <span class="nx">description</span><span class="p">,</span> <span class="nx">testFunction</span> <span class="p">})</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`\n📝 </span><span class="p">${</span><span class="nx">description</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="k">try</span> <span class="p">{</span>
<span class="nx">testFunction</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`❌ エラー: </span><span class="p">${</span><span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">failed</span><span class="o">++</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`\n📊 結果: </span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">passed</span><span class="p">}</span><span class="s2"> passed, </span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">failed</span><span class="p">}</span><span class="s2"> failed`</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// テスト例</span>
<span class="kd">function</span> <span class="nx">add</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">a</span> <span class="o">+</span> <span class="nx">b</span><span class="p">;</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">multiply</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">a</span> <span class="o">*</span> <span class="nx">b</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// テストの実行</span>
<span class="kd">const</span> <span class="nx">test</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">SimpleTest</span><span class="p">();</span>
<span class="nx">test</span>
<span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="dl">"</span><span class="s2">add関数のテスト</span><span class="dl">"</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">assertEqual</span><span class="p">(</span><span class="nx">add</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">),</span> <span class="mi">5</span><span class="p">,</span> <span class="dl">"</span><span class="s2">2 + 3 = 5</span><span class="dl">"</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">assertEqual</span><span class="p">(</span><span class="nx">add</span><span class="p">(</span><span class="o">-</span><span class="mi">1</span><span class="p">,</span> <span class="mi">1</span><span class="p">),</span> <span class="mi">0</span><span class="p">,</span> <span class="dl">"</span><span class="s2">-1 + 1 = 0</span><span class="dl">"</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">assertEqual</span><span class="p">(</span><span class="nx">add</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">),</span> <span class="mi">0</span><span class="p">,</span> <span class="dl">"</span><span class="s2">0 + 0 = 0</span><span class="dl">"</span><span class="p">);</span>
<span class="p">})</span>
<span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="dl">"</span><span class="s2">multiply関数のテスト</span><span class="dl">"</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">assertEqual</span><span class="p">(</span><span class="nx">multiply</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">),</span> <span class="mi">6</span><span class="p">,</span> <span class="dl">"</span><span class="s2">2 * 3 = 6</span><span class="dl">"</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">assertEqual</span><span class="p">(</span><span class="nx">multiply</span><span class="p">(</span><span class="o">-</span><span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">),</span> <span class="o">-</span><span class="mi">6</span><span class="p">,</span> <span class="dl">"</span><span class="s2">-2 * 3 = -6</span><span class="dl">"</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">assertEqual</span><span class="p">(</span><span class="nx">multiply</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">5</span><span class="p">),</span> <span class="mi">0</span><span class="p">,</span> <span class="dl">"</span><span class="s2">0 * 5 = 0</span><span class="dl">"</span><span class="p">);</span>
<span class="p">})</span>
<span class="p">.</span><span class="nx">run</span><span class="p">();</span>
</code></pre></div></div>
<h2 id="パフォーマンス最適化">パフォーマンス最適化</h2>
<h3 id="パフォーマンス測定と最適化">パフォーマンス測定と最適化</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// パフォーマンス測定</span>
<span class="kd">function</span> <span class="nx">measurePerformance</span><span class="p">(</span><span class="nx">fn</span><span class="p">,</span> <span class="nx">label</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">start</span> <span class="o">=</span> <span class="nx">performance</span><span class="p">.</span><span class="nx">now</span><span class="p">();</span>
<span class="nx">fn</span><span class="p">();</span>
<span class="kd">const</span> <span class="nx">end</span> <span class="o">=</span> <span class="nx">performance</span><span class="p">.</span><span class="nx">now</span><span class="p">();</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`</span><span class="p">${</span><span class="nx">label</span><span class="p">}</span><span class="s2">: </span><span class="p">${</span><span class="nx">end</span> <span class="o">-</span> <span class="nx">start</span><span class="p">}</span><span class="s2">ms`</span><span class="p">);</span>
<span class="p">}</span>
<span class="c1">// 配列処理の最適化例</span>
<span class="kd">const</span> <span class="nx">largeArray</span> <span class="o">=</span> <span class="nb">Array</span><span class="p">.</span><span class="k">from</span><span class="p">({</span> <span class="na">length</span><span class="p">:</span> <span class="mi">100000</span> <span class="p">},</span> <span class="p">(</span><span class="nx">_</span><span class="p">,</span> <span class="nx">i</span><span class="p">)</span> <span class="o">=></span> <span class="nx">i</span><span class="p">);</span>
<span class="c1">// 非効率な方法</span>
<span class="nx">measurePerformance</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">result</span> <span class="o">=</span> <span class="p">[];</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o"><</span> <span class="nx">largeArray</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">largeArray</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">%</span> <span class="mi">2</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">result</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">largeArray</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">*</span> <span class="mi">2</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">},</span> <span class="dl">"</span><span class="s2">forループ</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// 効率的な方法</span>
<span class="nx">measurePerformance</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">largeArray</span>
<span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="nx">x</span> <span class="o">=></span> <span class="nx">x</span> <span class="o">%</span> <span class="mi">2</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span>
<span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">x</span> <span class="o">=></span> <span class="nx">x</span> <span class="o">*</span> <span class="mi">2</span><span class="p">);</span>
<span class="p">},</span> <span class="dl">"</span><span class="s2">filter + map</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// より効率的な方法(1回のループ)</span>
<span class="nx">measurePerformance</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">largeArray</span><span class="p">.</span><span class="nx">reduce</span><span class="p">((</span><span class="nx">acc</span><span class="p">,</span> <span class="nx">x</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">x</span> <span class="o">%</span> <span class="mi">2</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">acc</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">x</span> <span class="o">*</span> <span class="mi">2</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">acc</span><span class="p">;</span>
<span class="p">},</span> <span class="p">[]);</span>
<span class="p">},</span> <span class="dl">"</span><span class="s2">reduce</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// イベントリスナーの最適化(デバウンス)</span>
<span class="kd">function</span> <span class="nx">debounce</span><span class="p">(</span><span class="nx">func</span><span class="p">,</span> <span class="nx">wait</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">timeout</span><span class="p">;</span>
<span class="k">return</span> <span class="kd">function</span> <span class="nx">executedFunction</span><span class="p">(...</span><span class="nx">args</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">later</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">clearTimeout</span><span class="p">(</span><span class="nx">timeout</span><span class="p">);</span>
<span class="nx">func</span><span class="p">(...</span><span class="nx">args</span><span class="p">);</span>
<span class="p">};</span>
<span class="nx">clearTimeout</span><span class="p">(</span><span class="nx">timeout</span><span class="p">);</span>
<span class="nx">timeout</span> <span class="o">=</span> <span class="nx">setTimeout</span><span class="p">(</span><span class="nx">later</span><span class="p">,</span> <span class="nx">wait</span><span class="p">);</span>
<span class="p">};</span>
<span class="p">}</span>
<span class="c1">// スクロールイベントの最適化</span>
<span class="kd">const</span> <span class="nx">handleScroll</span> <span class="o">=</span> <span class="nx">debounce</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">スクロール処理</span><span class="dl">"</span><span class="p">);</span>
<span class="p">},</span> <span class="mi">100</span><span class="p">);</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">scroll</span><span class="dl">"</span><span class="p">,</span> <span class="nx">handleScroll</span><span class="p">);</span>
<span class="c1">// スロットル(一定間隔で実行)</span>
<span class="kd">function</span> <span class="nx">throttle</span><span class="p">(</span><span class="nx">func</span><span class="p">,</span> <span class="nx">limit</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">lastFunc</span><span class="p">;</span>
<span class="kd">let</span> <span class="nx">lastRan</span><span class="p">;</span>
<span class="k">return</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">context</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">args</span> <span class="o">=</span> <span class="nx">arguments</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">lastRan</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">func</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="nx">context</span><span class="p">,</span> <span class="nx">args</span><span class="p">);</span>
<span class="nx">lastRan</span> <span class="o">=</span> <span class="nb">Date</span><span class="p">.</span><span class="nx">now</span><span class="p">();</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">clearTimeout</span><span class="p">(</span><span class="nx">lastFunc</span><span class="p">);</span>
<span class="nx">lastFunc</span> <span class="o">=</span> <span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">((</span><span class="nb">Date</span><span class="p">.</span><span class="nx">now</span><span class="p">()</span> <span class="o">-</span> <span class="nx">lastRan</span><span class="p">)</span> <span class="o">>=</span> <span class="nx">limit</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">func</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="nx">context</span><span class="p">,</span> <span class="nx">args</span><span class="p">);</span>
<span class="nx">lastRan</span> <span class="o">=</span> <span class="nb">Date</span><span class="p">.</span><span class="nx">now</span><span class="p">();</span>
<span class="p">}</span>
<span class="p">},</span> <span class="nx">limit</span> <span class="o">-</span> <span class="p">(</span><span class="nb">Date</span><span class="p">.</span><span class="nx">now</span><span class="p">()</span> <span class="o">-</span> <span class="nx">lastRan</span><span class="p">));</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// メモ化(結果をキャッシュ)</span>
<span class="kd">function</span> <span class="nx">memoize</span><span class="p">(</span><span class="nx">fn</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">cache</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Map</span><span class="p">();</span>
<span class="k">return</span> <span class="kd">function</span><span class="p">(...</span><span class="nx">args</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">key</span> <span class="o">=</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">args</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">cache</span><span class="p">.</span><span class="nx">has</span><span class="p">(</span><span class="nx">key</span><span class="p">))</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">cache</span><span class="p">.</span><span class="kd">get</span><span class="p">(</span><span class="nx">key</span><span class="p">);</span>
<span class="p">}</span>
<span class="kd">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">fn</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="nx">args</span><span class="p">);</span>
<span class="nx">cache</span><span class="p">.</span><span class="kd">set</span><span class="p">(</span><span class="nx">key</span><span class="p">,</span> <span class="nx">result</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">result</span><span class="p">;</span>
<span class="p">};</span>
<span class="p">}</span>
<span class="c1">// フィボナッチ数列の最適化例</span>
<span class="kd">const</span> <span class="nx">fibonacci</span> <span class="o">=</span> <span class="nx">memoize</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">n</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">n</span> <span class="o"><</span> <span class="mi">2</span><span class="p">)</span> <span class="k">return</span> <span class="nx">n</span><span class="p">;</span>
<span class="k">return</span> <span class="nx">fibonacci</span><span class="p">(</span><span class="nx">n</span> <span class="o">-</span> <span class="mi">1</span><span class="p">)</span> <span class="o">+</span> <span class="nx">fibonacci</span><span class="p">(</span><span class="nx">n</span> <span class="o">-</span> <span class="mi">2</span><span class="p">);</span>
<span class="p">});</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">fibonacci</span><span class="p">(</span><span class="mi">40</span><span class="p">));</span> <span class="c1">// 大幅に高速化される</span>
</code></pre></div></div>
<h2 id="参考資料">参考資料</h2>
<h3 id="公式ドキュメント">公式ドキュメント</h3>
<ul>
<li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript">MDN Web Docs - JavaScript</a>: Mozilla開発者向けリソース</li>
<li><a href="https://tc39.es/ecma262/">ECMAScript Language Specification</a>: JavaScript仕様書</li>
<li><a href="https://nodejs.org/docs/">Node.js Documentation</a>: サーバーサイドJavaScript</li>
</ul>
<h3 id="学習リソース">学習リソース</h3>
<ul>
<li><a href="https://javascript.info/">JavaScript.info</a>: 現代的なJavaScript学習サイト</li>
<li><a href="https://eloquentjavascript.net/">Eloquent JavaScript</a>: 無料のJavaScript書籍</li>
<li><a href="https://github.com/getify/You-Dont-Know-JS">You Don’t Know JS</a>: 深いJavaScript理解</li>
</ul>
<h3 id="ツールとライブラリ">ツールとライブラリ</h3>
<ul>
<li><a href="https://eslint.org/">ESLint</a>: JavaScriptリンター</li>
<li><a href="https://prettier.io/">Prettier</a>: コードフォーマッター</li>
<li><a href="https://babeljs.io/">Babel</a>: JavaScript変換ツール</li>
<li><a href="https://webpack.js.org/">Webpack</a>: モジュールバンドラー</li>
</ul>
<h3 id="フレームワークライブラリ">フレームワーク・ライブラリ</h3>
<ul>
<li><a href="https://reactjs.org/">React</a>: ユーザーインターフェースライブラリ</li>
<li><a href="https://vuejs.org/">Vue.js</a>: プログレッシブフレームワーク</li>
<li><a href="https://angular.io/">Angular</a>: フルフィーチャーフレームワーク</li>
<li><a href="https://expressjs.com/">Express.js</a>: Node.jsウェブフレームワーク</li>
</ul>
</div></div>
</div>
</article>
<!-- Enhanced Table of Contents JavaScript --><script>
document.addEventListener('DOMContentLoaded', function() {
// Generate enhanced Table of Contents
const headings = document.querySelectorAll('.page-main-content h2, .page-main-content h3, .page-main-content h4');
const tocContainer = document.getElementById('page-toc-content');
if (headings.length > 0 && tocContainer) {
const tocList = document.createElement('ul');
tocList.style.cssText = 'list-style: none; padding-left: 0; margin: 0; line-height: 1.6;';
headings.forEach(function(heading, index) {
// Add ID to heading if it doesn't have one
if (!heading.id) {
heading.id = 'page-heading-' + index;
}
const listItem = document.createElement('li');
const link = document.createElement('a');
link.href = '#' + heading.id;
link.textContent = heading.textContent;
link.style.cssText = 'text-decoration: none; color: #007bff; transition: color 0.2s;';
// Add hover effect
link.addEventListener('mouseenter', function() {
this.style.color = '#0056b3';
});
link.addEventListener('mouseleave', function() {
this.style.color = '#007bff';
});
// Style based on heading level
if (heading.tagName === 'H2') {
listItem.style.cssText = 'margin-bottom: 8px; font-weight: 600;';
link.textContent = '📄 ' + heading.textContent;
} else if (heading.tagName === 'H3') {
listItem.style.cssText = 'margin-bottom: 5px; margin-left: 25px; font-size: 0.95em;';
link.textContent = '▶ ' + heading.textContent;
} else if (heading.tagName === 'H4') {
listItem.style.cssText = 'margin-bottom: 3px; margin-left: 50px; font-size: 0.9em;';
link.textContent = '• ' + heading.textContent;
}
listItem.appendChild(link);
tocList.appendChild(listItem);
});
tocContainer.appendChild(tocList);
} else if (tocContainer) {
// Hide TOC container if no headings found
tocContainer.parentNode.style.display = 'none';
}
});
</script><!-- Additional styling for page layout with sidebar TOC -->
<style>
/* Override minima theme wrapper width restriction for large screens */
@media (min-width: 1441px) {
.wrapper {
max-width: none;
}
}
.page-article {
margin: 0 auto;
}
/* Apply max-width only on smaller screens to maintain readability */
@media (max-width: 1440px) {
.page-article {
max-width: 2000px;
}
}
.page-content-wrapper {
display: flex;
gap: 20px;
position: relative;
}
.page-toc-sidebar {
width: 280px;
position: sticky;
top: 20px;
height: calc(100vh - 40px);
max-height: calc(100vh - 40px);
overflow-y: auto;
order: 2;
flex-shrink: 0;
}
.page-content {
flex: 1;
min-width: 0;
order: 1;
}
/* Responsive behavior */
@media (max-width: 1024px) {
.page-content-wrapper {
flex-direction: column;
}
.page-toc-sidebar {
width: 100%;
position: static;
order: 1;
margin-bottom: 20px;
height: auto;
max-height: none;
overflow-y: visible;
}
.page-content {
order: 2;
}
}
@media (max-width: 768px) {
.page-toc-sidebar {
display: none;
}
}
.page-title {
border-bottom: 3px solid #007bff;
padding-bottom: 10px;
color: #212529;
}
.page-main-content h2 {
color: #007bff;
border-bottom: 2px solid #e9ecef;
padding-bottom: 8px;
margin-top: 40px;
}
.page-main-content h3 {
color: #495057;
margin-top: 30px;
}
.page-main-content code {
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 3px;
padding: 2px 4px;
font-size: 0.9em;
}
.page-main-content pre {
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 5px;
padding: 15px;
overflow-x: auto;
}
.page-main-content blockquote {
border-left: 4px solid #007bff;
background: #f8f9fa;
margin: 20px 0;
padding: 15px 20px;
font-style: italic;
}
.page-main-content table {
border-collapse: collapse;
width: 100%;
margin: 20px 0;
}
.page-main-content th,
.page-main-content td {
border: 1px solid #dee2e6;
padding: 12px;
text-align: left;
}
.page-main-content th {
background: #f8f9fa;
font-weight: 600;
}
</style>
</div>
</article>
コンテンツ作成
フロントマターの活用
ポストのフロントマター
---
layout: post
title: "Jekyll 入門ガイド"
date: 2023-12-01 10:00:00 +0900
categories: tutorial web
tags: [jekyll, github-pages, static-site]
author: "Taro Yamada"
excerpt: "Jekyll の基本的な使い方を学びましょう"
image: /assets/images/jekyll-logo.png
published: true
---
ページのフロントマター
---
layout: page
title: "About"
permalink: /about/
order: 1
nav: true
---
Liquid テンプレート言語
基本的な変数出力
技術ドキュメント集
Jekyll リファレンス
<article class="page-article">
<header class="page-header">
<h1 class="page-title">JavaScript リファレンス</h1></header>
<div class="page-content-wrapper">
<!-- Table of Contents Sidebar --><aside class="page-toc-sidebar">
<div class="page-toc" style="background: #fff; border: 2px solid #007bff; border-radius: 8px; padding: 20px;">
<h3 style="margin-top: 0; color: #007bff; border-bottom: 1px solid #007bff; padding-bottom: 8px;">📖 目次</h3>
<div id="page-toc-content"></div>
</div>
</aside><div class="page-content">
<!-- Main content -->
<div class="page-main-content">
<h1 id="javascript-リファレンス">JavaScript リファレンス</h1>
<p>JavaScriptの基本的な使い方から応用まで、Webページに動的な機能を追加するために必要な知識を体系的に説明します。モダンなJavaScript(ES6+)の機能も含めて解説します。</p>
<ul id="markdown-toc">
<li><a href="#javascript-リファレンス" id="markdown-toc-javascript-リファレンス">JavaScript リファレンス</a> <ul>
<li><a href="#基本概念" id="markdown-toc-基本概念">基本概念</a> <ul>
<li><a href="#javascript-とは" id="markdown-toc-javascript-とは">JavaScript とは</a></li>
<li><a href="#javascript-の役割" id="markdown-toc-javascript-の役割">JavaScript の役割</a></li>
</ul>
</li>
<li><a href="#基本構文" id="markdown-toc-基本構文">基本構文</a> <ul>
<li><a href="#変数とデータ型" id="markdown-toc-変数とデータ型">変数とデータ型</a></li>
<li><a href="#文字列操作" id="markdown-toc-文字列操作">文字列操作</a></li>
<li><a href="#配列" id="markdown-toc-配列">配列</a></li>
<li><a href="#オブジェクト" id="markdown-toc-オブジェクト">オブジェクト</a></li>
</ul>
</li>
<li><a href="#関数" id="markdown-toc-関数">関数</a> <ul>
<li><a href="#関数の定義" id="markdown-toc-関数の定義">関数の定義</a></li>
<li><a href="#スコープとクロージャ" id="markdown-toc-スコープとクロージャ">スコープとクロージャ</a></li>
</ul>
</li>
<li><a href="#dom操作" id="markdown-toc-dom操作">DOM操作</a> <ul>
<li><a href="#要素の取得" id="markdown-toc-要素の取得">要素の取得</a></li>
<li><a href="#要素の操作" id="markdown-toc-要素の操作">要素の操作</a></li>
<li><a href="#要素の作成と追加" id="markdown-toc-要素の作成と追加">要素の作成と追加</a></li>
</ul>
</li>
<li><a href="#イベント処理" id="markdown-toc-イベント処理">イベント処理</a> <ul>
<li><a href="#イベントリスナーの追加" id="markdown-toc-イベントリスナーの追加">イベントリスナーの追加</a></li>
<li><a href="#よく使用するイベント" id="markdown-toc-よく使用するイベント">よく使用するイベント</a></li>
<li><a href="#イベント委譲" id="markdown-toc-イベント委譲">イベント委譲</a></li>
</ul>
</li>
<li><a href="#非同期処理" id="markdown-toc-非同期処理">非同期処理</a> <ul>
<li><a href="#promise" id="markdown-toc-promise">Promise</a></li>
<li><a href="#asyncawait" id="markdown-toc-asyncawait">async/await</a></li>
<li><a href="#fetch-api" id="markdown-toc-fetch-api">Fetch API</a></li>
</ul>
</li>
<li><a href="#モダンjavascriptes6" id="markdown-toc-モダンjavascriptes6">モダンJavaScript(ES6+)</a> <ul>
<li><a href="#分割代入" id="markdown-toc-分割代入">分割代入</a></li>
<li><a href="#モジュール" id="markdown-toc-モジュール">モジュール</a></li>
<li><a href="#クラス" id="markdown-toc-クラス">クラス</a></li>
</ul>
</li>
<li><a href="#エラーハンドリング" id="markdown-toc-エラーハンドリング">エラーハンドリング</a> <ul>
<li><a href="#try-catch文" id="markdown-toc-try-catch文">try-catch文</a></li>
</ul>
</li>
<li><a href="#ブラウザapi" id="markdown-toc-ブラウザapi">ブラウザAPI</a> <ul>
<li><a href="#local-storage" id="markdown-toc-local-storage">Local Storage</a></li>
<li><a href="#geolocation-api" id="markdown-toc-geolocation-api">Geolocation API</a></li>
<li><a href="#notification-api" id="markdown-toc-notification-api">Notification API</a></li>
</ul>
</li>
<li><a href="#実践的なコード例" id="markdown-toc-実践的なコード例">実践的なコード例</a> <ul>
<li><a href="#フォームバリデーション" id="markdown-toc-フォームバリデーション">フォームバリデーション</a></li>
<li><a href="#シンプルなspasingle-page-application" id="markdown-toc-シンプルなspasingle-page-application">シンプルなSPA(Single Page Application)</a></li>
</ul>
</li>
<li><a href="#デバッグとテスト" id="markdown-toc-デバッグとテスト">デバッグとテスト</a> <ul>
<li><a href="#デバッグ技法" id="markdown-toc-デバッグ技法">デバッグ技法</a></li>
<li><a href="#簡単なテストフレームワーク" id="markdown-toc-簡単なテストフレームワーク">簡単なテストフレームワーク</a></li>
</ul>
</li>
<li><a href="#パフォーマンス最適化" id="markdown-toc-パフォーマンス最適化">パフォーマンス最適化</a> <ul>
<li><a href="#パフォーマンス測定と最適化" id="markdown-toc-パフォーマンス測定と最適化">パフォーマンス測定と最適化</a></li>
</ul>
</li>
<li><a href="#参考資料" id="markdown-toc-参考資料">参考資料</a> <ul>
<li><a href="#公式ドキュメント" id="markdown-toc-公式ドキュメント">公式ドキュメント</a></li>
<li><a href="#学習リソース" id="markdown-toc-学習リソース">学習リソース</a></li>
<li><a href="#ツールとライブラリ" id="markdown-toc-ツールとライブラリ">ツールとライブラリ</a></li>
<li><a href="#フレームワークライブラリ" id="markdown-toc-フレームワークライブラリ">フレームワーク・ライブラリ</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<h2 id="基本概念">基本概念</h2>
<h3 id="javascript-とは">JavaScript とは</h3>
<p><strong>JavaScript</strong> は、Webページに動的な機能を追加するためのプログラミング言語です。1995年にBrendan Eichによって開発され、現在はブラウザだけでなくサーバーサイド(Node.js)でも広く使用されています。</p>
<p><strong>特徴:</strong></p>
<ul>
<li>インタープリター言語(コンパイル不要)</li>
<li>動的型付け言語</li>
<li>プロトタイプベースのオブジェクト指向</li>
<li>関数型プログラミングもサポート</li>
<li>イベント駆動プログラミング</li>
</ul>
<h3 id="javascript-の役割">JavaScript の役割</h3>
<p>JavaScriptは以下の主要な役割を担います:</p>
<ol>
<li><strong>ユーザーインタラクション</strong>: クリック、入力などのイベント処理</li>
<li><strong>DOM操作</strong>: HTMLの動的な変更</li>
<li><strong>非同期処理</strong>: サーバーとの通信(Ajax、Fetch API)</li>
<li><strong>フォーム検証</strong>: 入力データの検証</li>
<li><strong>アニメーション</strong>: 視覚的な効果の実装</li>
</ol>
<h2 id="基本構文">基本構文</h2>
<h3 id="変数とデータ型">変数とデータ型</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 変数の宣言</span>
<span class="kd">let</span> <span class="nx">name</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">田中太郎</span><span class="dl">"</span><span class="p">;</span> <span class="c1">// 文字列(String)</span>
<span class="kd">const</span> <span class="nx">age</span> <span class="o">=</span> <span class="mi">30</span><span class="p">;</span> <span class="c1">// 数値(Number)- 定数</span>
<span class="kd">var</span> <span class="nx">isStudent</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span> <span class="c1">// 真偽値(Boolean)- 非推奨</span>
<span class="c1">// 現代的な変数宣言(ES6+)</span>
<span class="kd">let</span> <span class="nx">message</span><span class="p">;</span> <span class="c1">// 宣言のみ(undefined)</span>
<span class="kd">let</span> <span class="nx">score</span> <span class="o">=</span> <span class="mi">85</span><span class="p">;</span> <span class="c1">// 宣言と初期化</span>
<span class="kd">const</span> <span class="nx">PI</span> <span class="o">=</span> <span class="mf">3.14159</span><span class="p">;</span> <span class="c1">// 定数(再代入不可)</span>
<span class="c1">// データ型の確認</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">name</span><span class="p">);</span> <span class="c1">// "string"</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">age</span><span class="p">);</span> <span class="c1">// "number"</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">isStudent</span><span class="p">);</span> <span class="c1">// "boolean"</span>
<span class="c1">// プリミティブ型</span>
<span class="kd">let</span> <span class="nx">str</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">文字列</span><span class="dl">"</span><span class="p">;</span> <span class="c1">// String</span>
<span class="kd">let</span> <span class="nx">num</span> <span class="o">=</span> <span class="mi">42</span><span class="p">;</span> <span class="c1">// Number</span>
<span class="kd">let</span> <span class="nx">bool</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span> <span class="c1">// Boolean</span>
<span class="kd">let</span> <span class="nx">nothing</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span> <span class="c1">// Null</span>
<span class="kd">let</span> <span class="nx">undef</span> <span class="o">=</span> <span class="kc">undefined</span><span class="p">;</span> <span class="c1">// Undefined</span>
<span class="kd">let</span> <span class="nx">sym</span> <span class="o">=</span> <span class="nb">Symbol</span><span class="p">(</span><span class="dl">"</span><span class="s2">id</span><span class="dl">"</span><span class="p">);</span> <span class="c1">// Symbol(ES6+)</span>
<span class="kd">let</span> <span class="nx">big</span> <span class="o">=</span> <span class="mi">123</span><span class="nx">n</span><span class="p">;</span> <span class="c1">// BigInt(ES2020+)</span>
<span class="c1">// 参照型</span>
<span class="kd">let</span> <span class="nx">arr</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">];</span> <span class="c1">// Array</span>
<span class="kd">let</span> <span class="nx">obj</span> <span class="o">=</span> <span class="p">{</span> <span class="na">name</span><span class="p">:</span> <span class="dl">"</span><span class="s2">太郎</span><span class="dl">"</span> <span class="p">};</span> <span class="c1">// Object</span>
<span class="kd">let</span> <span class="nx">func</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{};</span> <span class="c1">// Function</span>
</code></pre></div></div>
<h3 id="文字列操作">文字列操作</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 文字列の基本操作</span>
<span class="kd">let</span> <span class="nx">firstName</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">太郎</span><span class="dl">"</span><span class="p">;</span>
<span class="kd">let</span> <span class="nx">lastName</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">田中</span><span class="dl">"</span><span class="p">;</span>
<span class="c1">// 文字列結合</span>
<span class="kd">let</span> <span class="nx">fullName1</span> <span class="o">=</span> <span class="nx">firstName</span> <span class="o">+</span> <span class="nx">lastName</span><span class="p">;</span> <span class="c1">// "太郎田中"</span>
<span class="kd">let</span> <span class="nx">fullName2</span> <span class="o">=</span> <span class="s2">`</span><span class="p">${</span><span class="nx">lastName</span><span class="p">}</span><span class="s2"> </span><span class="p">${</span><span class="nx">firstName</span><span class="p">}</span><span class="s2">`</span><span class="p">;</span> <span class="c1">// "田中 太郎" (テンプレートリテラル)</span>
<span class="c1">// 文字列メソッド</span>
<span class="kd">let</span> <span class="nx">text</span> <span class="o">=</span> <span class="dl">"</span><span class="s2"> Hello, World! </span><span class="dl">"</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">text</span><span class="p">.</span><span class="nx">length</span><span class="p">);</span> <span class="c1">// 16 (文字数)</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">text</span><span class="p">.</span><span class="nx">toLowerCase</span><span class="p">());</span> <span class="c1">// " hello, world! "</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">text</span><span class="p">.</span><span class="nx">toUpperCase</span><span class="p">());</span> <span class="c1">// " HELLO, WORLD! "</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">text</span><span class="p">.</span><span class="nx">trim</span><span class="p">());</span> <span class="c1">// "Hello, World!" (前後の空白削除)</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">text</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="dl">"</span><span class="s2">World</span><span class="dl">"</span><span class="p">));</span> <span class="c1">// 9 (文字列の位置)</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">text</span><span class="p">.</span><span class="nx">includes</span><span class="p">(</span><span class="dl">"</span><span class="s2">Hello</span><span class="dl">"</span><span class="p">));</span> <span class="c1">// true (文字列が含まれるか)</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">text</span><span class="p">.</span><span class="nx">slice</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span> <span class="mi">7</span><span class="p">));</span> <span class="c1">// "Hello" (部分文字列)</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">text</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="dl">"</span><span class="s2">World</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">JavaScript</span><span class="dl">"</span><span class="p">));</span> <span class="c1">// " Hello, JavaScript! "</span>
<span class="c1">// 文字列分割と結合</span>
<span class="kd">let</span> <span class="nx">csv</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">apple,banana,orange</span><span class="dl">"</span><span class="p">;</span>
<span class="kd">let</span> <span class="nx">fruits</span> <span class="o">=</span> <span class="nx">csv</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="dl">"</span><span class="s2">,</span><span class="dl">"</span><span class="p">);</span> <span class="c1">// ["apple", "banana", "orange"]</span>
<span class="kd">let</span> <span class="nx">joined</span> <span class="o">=</span> <span class="nx">fruits</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="dl">"</span><span class="s2"> | </span><span class="dl">"</span><span class="p">);</span> <span class="c1">// "apple | banana | orange"</span>
<span class="c1">// マルチライン文字列(テンプレートリテラル)</span>
<span class="kd">let</span> <span class="nx">multiLine</span> <span class="o">=</span> <span class="s2">`
これは
複数行の
文字列です
`</span><span class="p">;</span>
</code></pre></div></div>
<h3 id="配列">配列</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 配列の作成</span>
<span class="kd">let</span> <span class="nx">arr1</span> <span class="o">=</span> <span class="p">[];</span> <span class="c1">// 空の配列</span>
<span class="kd">let</span> <span class="nx">arr2</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">5</span><span class="p">];</span> <span class="c1">// 数値配列</span>
<span class="kd">let</span> <span class="nx">arr3</span> <span class="o">=</span> <span class="p">[</span><span class="dl">"</span><span class="s2">apple</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">banana</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">orange</span><span class="dl">"</span><span class="p">];</span> <span class="c1">// 文字列配列</span>
<span class="kd">let</span> <span class="nx">arr4</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="dl">"</span><span class="s2">text</span><span class="dl">"</span><span class="p">,</span> <span class="kc">true</span><span class="p">,</span> <span class="kc">null</span><span class="p">];</span> <span class="c1">// 混合配列</span>
<span class="c1">// 配列の基本操作</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">arr2</span><span class="p">.</span><span class="nx">length</span><span class="p">);</span> <span class="c1">// 5 (要素数)</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">arr2</span><span class="p">[</span><span class="mi">0</span><span class="p">]);</span> <span class="c1">// 1 (最初の要素)</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">arr2</span><span class="p">[</span><span class="nx">arr2</span><span class="p">.</span><span class="nx">length</span> <span class="o">-</span> <span class="mi">1</span><span class="p">]);</span> <span class="c1">// 5 (最後の要素)</span>
<span class="c1">// 要素の追加・削除</span>
<span class="nx">arr2</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="mi">6</span><span class="p">);</span> <span class="c1">// 末尾に追加: [1,2,3,4,5,6]</span>
<span class="nx">arr2</span><span class="p">.</span><span class="nx">pop</span><span class="p">();</span> <span class="c1">// 末尾を削除: [1,2,3,4,5]</span>
<span class="nx">arr2</span><span class="p">.</span><span class="nx">unshift</span><span class="p">(</span><span class="mi">0</span><span class="p">);</span> <span class="c1">// 先頭に追加: [0,1,2,3,4,5]</span>
<span class="nx">arr2</span><span class="p">.</span><span class="nx">shift</span><span class="p">();</span> <span class="c1">// 先頭を削除: [1,2,3,4,5]</span>
<span class="c1">// 配列メソッド(ES5+)</span>
<span class="kd">let</span> <span class="nx">numbers</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">5</span><span class="p">];</span>
<span class="c1">// map: 各要素を変換</span>
<span class="kd">let</span> <span class="nx">doubled</span> <span class="o">=</span> <span class="nx">numbers</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">x</span> <span class="o">=></span> <span class="nx">x</span> <span class="o">*</span> <span class="mi">2</span><span class="p">);</span> <span class="c1">// [2,4,6,8,10]</span>
<span class="c1">// filter: 条件に合う要素を抽出</span>
<span class="kd">let</span> <span class="nx">evens</span> <span class="o">=</span> <span class="nx">numbers</span><span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="nx">x</span> <span class="o">=></span> <span class="nx">x</span> <span class="o">%</span> <span class="mi">2</span> <span class="o">===</span> <span class="mi">0</span><span class="p">);</span> <span class="c1">// [2,4]</span>
<span class="c1">// reduce: 配列を単一の値に集約</span>
<span class="kd">let</span> <span class="nx">sum</span> <span class="o">=</span> <span class="nx">numbers</span><span class="p">.</span><span class="nx">reduce</span><span class="p">((</span><span class="nx">acc</span><span class="p">,</span> <span class="nx">x</span><span class="p">)</span> <span class="o">=></span> <span class="nx">acc</span> <span class="o">+</span> <span class="nx">x</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span> <span class="c1">// 15</span>
<span class="c1">// find: 条件に合う最初の要素</span>
<span class="kd">let</span> <span class="nx">found</span> <span class="o">=</span> <span class="nx">numbers</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="nx">x</span> <span class="o">=></span> <span class="nx">x</span> <span class="o">></span> <span class="mi">3</span><span class="p">);</span> <span class="c1">// 4</span>
<span class="c1">// forEach: 各要素に対して処理実行</span>
<span class="nx">numbers</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">x</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">x</span><span class="p">));</span>
<span class="c1">// includes: 要素が含まれているか</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">numbers</span><span class="p">.</span><span class="nx">includes</span><span class="p">(</span><span class="mi">3</span><span class="p">));</span> <span class="c1">// true</span>
<span class="c1">// sort: ソート</span>
<span class="kd">let</span> <span class="nx">fruits</span> <span class="o">=</span> <span class="p">[</span><span class="dl">"</span><span class="s2">banana</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">apple</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">orange</span><span class="dl">"</span><span class="p">];</span>
<span class="nx">fruits</span><span class="p">.</span><span class="nx">sort</span><span class="p">();</span> <span class="c1">// ["apple", "banana", "orange"]</span>
<span class="kd">let</span> <span class="nx">nums</span> <span class="o">=</span> <span class="p">[</span><span class="mi">3</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">5</span><span class="p">];</span>
<span class="nx">nums</span><span class="p">.</span><span class="nx">sort</span><span class="p">((</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="o">=></span> <span class="nx">a</span> <span class="o">-</span> <span class="nx">b</span><span class="p">);</span> <span class="c1">// [1,1,3,4,5] (数値ソート)</span>
</code></pre></div></div>
<h3 id="オブジェクト">オブジェクト</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// オブジェクトの作成</span>
<span class="kd">let</span> <span class="nx">person</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">name</span><span class="p">:</span> <span class="dl">"</span><span class="s2">田中太郎</span><span class="dl">"</span><span class="p">,</span>
<span class="na">age</span><span class="p">:</span> <span class="mi">30</span><span class="p">,</span>
<span class="na">city</span><span class="p">:</span> <span class="dl">"</span><span class="s2">東京</span><span class="dl">"</span><span class="p">,</span>
<span class="na">isStudent</span><span class="p">:</span> <span class="kc">false</span>
<span class="p">};</span>
<span class="c1">// プロパティへのアクセス</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">person</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span> <span class="c1">// "田中太郎" (ドット記法)</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">person</span><span class="p">[</span><span class="dl">"</span><span class="s2">age</span><span class="dl">"</span><span class="p">]);</span> <span class="c1">// 30 (ブラケット記法)</span>
<span class="c1">// プロパティの追加・変更</span>
<span class="nx">person</span><span class="p">.</span><span class="nx">email</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">tanaka@example.com</span><span class="dl">"</span><span class="p">;</span> <span class="c1">// 追加</span>
<span class="nx">person</span><span class="p">.</span><span class="nx">age</span> <span class="o">=</span> <span class="mi">31</span><span class="p">;</span> <span class="c1">// 変更</span>
<span class="c1">// プロパティの削除</span>
<span class="k">delete</span> <span class="nx">person</span><span class="p">.</span><span class="nx">isStudent</span><span class="p">;</span>
<span class="c1">// メソッドを含むオブジェクト</span>
<span class="kd">let</span> <span class="nx">calculator</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">value</span><span class="p">:</span> <span class="mi">0</span><span class="p">,</span>
<span class="na">add</span><span class="p">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">x</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">value</span> <span class="o">+=</span> <span class="nx">x</span><span class="p">;</span>
<span class="k">return</span> <span class="k">this</span><span class="p">;</span> <span class="c1">// チェーンメソッド用</span>
<span class="p">},</span>
<span class="na">multiply</span><span class="p">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">x</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">value</span> <span class="o">*=</span> <span class="nx">x</span><span class="p">;</span>
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
<span class="p">},</span>
<span class="na">getValue</span><span class="p">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">value</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="c1">// 使用例</span>
<span class="nx">calculator</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="mi">5</span><span class="p">).</span><span class="nx">multiply</span><span class="p">(</span><span class="mi">2</span><span class="p">).</span><span class="nx">getValue</span><span class="p">();</span> <span class="c1">// 10</span>
<span class="c1">// オブジェクトの反復処理</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">key</span> <span class="k">in</span> <span class="nx">person</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`</span><span class="p">${</span><span class="nx">key</span><span class="p">}</span><span class="s2">: </span><span class="p">${</span><span class="nx">person</span><span class="p">[</span><span class="nx">key</span><span class="p">]}</span><span class="s2">`</span><span class="p">);</span>
<span class="p">}</span>
<span class="c1">// ES6+ のオブジェクト機能</span>
<span class="kd">let</span> <span class="nx">name</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">太郎</span><span class="dl">"</span><span class="p">;</span>
<span class="kd">let</span> <span class="nx">age</span> <span class="o">=</span> <span class="mi">25</span><span class="p">;</span>
<span class="c1">// プロパティ名の短縮記法</span>
<span class="kd">let</span> <span class="nx">user</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">name</span><span class="p">,</span> <span class="nx">age</span> <span class="p">};</span> <span class="c1">// { name: "太郎", age: 25 }</span>
<span class="c1">// 計算されたプロパティ名</span>
<span class="kd">let</span> <span class="nx">prop</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">color</span><span class="dl">"</span><span class="p">;</span>
<span class="kd">let</span> <span class="nx">car</span> <span class="o">=</span> <span class="p">{</span>
<span class="p">[</span><span class="nx">prop</span><span class="p">]:</span> <span class="dl">"</span><span class="s2">red</span><span class="dl">"</span> <span class="c1">// { color: "red" }</span>
<span class="p">};</span>
<span class="c1">// デストラクチャリング代入</span>
<span class="kd">let</span> <span class="p">{</span> <span class="na">name</span><span class="p">:</span> <span class="nx">userName</span><span class="p">,</span> <span class="na">age</span><span class="p">:</span> <span class="nx">userAge</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">user</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">userName</span><span class="p">,</span> <span class="nx">userAge</span><span class="p">);</span> <span class="c1">// "太郎" 25</span>
</code></pre></div></div>
<h2 id="関数">関数</h2>
<h3 id="関数の定義">関数の定義</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 関数宣言</span>
<span class="kd">function</span> <span class="nx">greet</span><span class="p">(</span><span class="nx">name</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="s2">`こんにちは、</span><span class="p">${</span><span class="nx">name</span><span class="p">}</span><span class="s2">さん!`</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// 関数式</span>
<span class="kd">const</span> <span class="nx">greet2</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">name</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="s2">`こんにちは、</span><span class="p">${</span><span class="nx">name</span><span class="p">}</span><span class="s2">さん!`</span><span class="p">;</span>
<span class="p">};</span>
<span class="c1">// アロー関数(ES6+)</span>
<span class="kd">const</span> <span class="nx">greet3</span> <span class="o">=</span> <span class="p">(</span><span class="nx">name</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">return</span> <span class="s2">`こんにちは、</span><span class="p">${</span><span class="nx">name</span><span class="p">}</span><span class="s2">さん!`</span><span class="p">;</span>
<span class="p">};</span>
<span class="c1">// アロー関数(短縮形)</span>
<span class="kd">const</span> <span class="nx">greet4</span> <span class="o">=</span> <span class="nx">name</span> <span class="o">=></span> <span class="s2">`こんにちは、</span><span class="p">${</span><span class="nx">name</span><span class="p">}</span><span class="s2">さん!`</span><span class="p">;</span>
<span class="c1">// 複数パラメータのアロー関数</span>
<span class="kd">const</span> <span class="nx">add</span> <span class="o">=</span> <span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="o">=></span> <span class="nx">a</span> <span class="o">+</span> <span class="nx">b</span><span class="p">;</span>
<span class="c1">// 関数の呼び出し</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">greet</span><span class="p">(</span><span class="dl">"</span><span class="s2">太郎</span><span class="dl">"</span><span class="p">));</span> <span class="c1">// "こんにちは、太郎さん!"</span>
<span class="c1">// デフォルトパラメータ(ES6+)</span>
<span class="kd">function</span> <span class="nx">createUser</span><span class="p">(</span><span class="nx">name</span><span class="p">,</span> <span class="nx">age</span> <span class="o">=</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">city</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">未設定</span><span class="dl">"</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">{</span> <span class="nx">name</span><span class="p">,</span> <span class="nx">age</span><span class="p">,</span> <span class="nx">city</span> <span class="p">};</span>
<span class="p">}</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">createUser</span><span class="p">(</span><span class="dl">"</span><span class="s2">太郎</span><span class="dl">"</span><span class="p">));</span> <span class="c1">// { name: "太郎", age: 0, city: "未設定" }</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">createUser</span><span class="p">(</span><span class="dl">"</span><span class="s2">花子</span><span class="dl">"</span><span class="p">,</span> <span class="mi">25</span><span class="p">));</span> <span class="c1">// { name: "花子", age: 25, city: "未設定" }</span>
<span class="c1">// 可変長引数(Rest Parameters)</span>
<span class="kd">function</span> <span class="nx">sum</span><span class="p">(...</span><span class="nx">numbers</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">numbers</span><span class="p">.</span><span class="nx">reduce</span><span class="p">((</span><span class="nx">total</span><span class="p">,</span> <span class="nx">num</span><span class="p">)</span> <span class="o">=></span> <span class="nx">total</span> <span class="o">+</span> <span class="nx">num</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">sum</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">5</span><span class="p">));</span> <span class="c1">// 15</span>
<span class="c1">// スプレッド演算子</span>
<span class="kd">const</span> <span class="nx">arr1</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">];</span>
<span class="kd">const</span> <span class="nx">arr2</span> <span class="o">=</span> <span class="p">[</span><span class="mi">4</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">6</span><span class="p">];</span>
<span class="kd">const</span> <span class="nx">combined</span> <span class="o">=</span> <span class="p">[...</span><span class="nx">arr1</span><span class="p">,</span> <span class="p">...</span><span class="nx">arr2</span><span class="p">];</span> <span class="c1">// [1,2,3,4,5,6]</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">max</span><span class="p">(...</span><span class="nx">arr1</span><span class="p">));</span> <span class="c1">// 3</span>
</code></pre></div></div>
<h3 id="スコープとクロージャ">スコープとクロージャ</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// グローバルスコープ</span>
<span class="kd">let</span> <span class="nx">globalVar</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">グローバル</span><span class="dl">"</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">outerFunction</span><span class="p">()</span> <span class="p">{</span>
<span class="c1">// 関数スコープ</span>
<span class="kd">let</span> <span class="nx">outerVar</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">外側</span><span class="dl">"</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">innerFunction</span><span class="p">()</span> <span class="p">{</span>
<span class="c1">// クロージャ</span>
<span class="kd">let</span> <span class="nx">innerVar</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">内側</span><span class="dl">"</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">globalVar</span><span class="p">);</span> <span class="c1">// アクセス可能</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">outerVar</span><span class="p">);</span> <span class="c1">// アクセス可能</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">innerVar</span><span class="p">);</span> <span class="c1">// アクセス可能</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">innerFunction</span><span class="p">;</span>
<span class="p">}</span>
<span class="kd">const</span> <span class="nx">closure</span> <span class="o">=</span> <span class="nx">outerFunction</span><span class="p">();</span>
<span class="nx">closure</span><span class="p">();</span> <span class="c1">// クロージャが実行される</span>
<span class="c1">// 実用的なクロージャの例</span>
<span class="kd">function</span> <span class="nx">createCounter</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">count</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
<span class="k">return</span> <span class="p">{</span>
<span class="na">increment</span><span class="p">:</span> <span class="p">()</span> <span class="o">=></span> <span class="o">++</span><span class="nx">count</span><span class="p">,</span>
<span class="na">decrement</span><span class="p">:</span> <span class="p">()</span> <span class="o">=></span> <span class="o">--</span><span class="nx">count</span><span class="p">,</span>
<span class="na">getCount</span><span class="p">:</span> <span class="p">()</span> <span class="o">=></span> <span class="nx">count</span>
<span class="p">};</span>
<span class="p">}</span>
<span class="kd">const</span> <span class="nx">counter</span> <span class="o">=</span> <span class="nx">createCounter</span><span class="p">();</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">counter</span><span class="p">.</span><span class="nx">increment</span><span class="p">());</span> <span class="c1">// 1</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">counter</span><span class="p">.</span><span class="nx">increment</span><span class="p">());</span> <span class="c1">// 2</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">counter</span><span class="p">.</span><span class="nx">getCount</span><span class="p">());</span> <span class="c1">// 2</span>
<span class="c1">// ブロックスコープ(let, const)</span>
<span class="p">{</span>
<span class="kd">let</span> <span class="nx">blockVar</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">ブロック内</span><span class="dl">"</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">blockConst</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">定数</span><span class="dl">"</span><span class="p">;</span>
<span class="c1">// これらはブロック外からアクセス不可</span>
<span class="p">}</span>
<span class="c1">// var は関数スコープ</span>
<span class="kd">function</span> <span class="nx">varExample</span><span class="p">()</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="kc">true</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">varVariable</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">var変数</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">varVariable</span><span class="p">);</span> <span class="c1">// アクセス可能(ホイスティング)</span>
<span class="p">}</span>
</code></pre></div></div>
<h2 id="dom操作">DOM操作</h2>
<h3 id="要素の取得">要素の取得</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// ID で取得</span>
<span class="kd">const</span> <span class="nx">element</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">myId</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// クラス名で取得</span>
<span class="kd">const</span> <span class="nx">elements</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="dl">"</span><span class="s2">myClass</span><span class="dl">"</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">firstElement</span> <span class="o">=</span> <span class="nx">elements</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
<span class="c1">// タグ名で取得</span>
<span class="kd">const</span> <span class="nx">paragraphs</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="dl">"</span><span class="s2">p</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// CSSセレクタで取得(推奨)</span>
<span class="kd">const</span> <span class="nx">element2</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#myId</span><span class="dl">"</span><span class="p">);</span> <span class="c1">// 最初の要素</span>
<span class="kd">const</span> <span class="nx">elements2</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="dl">"</span><span class="s2">.myClass</span><span class="dl">"</span><span class="p">);</span> <span class="c1">// 全ての要素</span>
<span class="c1">// 複雑なセレクタの例</span>
<span class="kd">const</span> <span class="nx">navLinks</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="dl">"</span><span class="s2">nav ul li a</span><span class="dl">"</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">firstParagraph</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">article p:first-child</span><span class="dl">"</span><span class="p">);</span>
</code></pre></div></div>
<h3 id="要素の操作">要素の操作</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// テキストコンテンツの操作</span>
<span class="kd">const</span> <span class="nx">title</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">h1</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">title</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">新しいタイトル</span><span class="dl">"</span><span class="p">;</span> <span class="c1">// HTMLタグは文字列として表示</span>
<span class="nx">title</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="dl">"</span><span class="s2"><strong>太字タイトル</strong></span><span class="dl">"</span><span class="p">;</span> <span class="c1">// HTMLタグも解釈</span>
<span class="c1">// 属性の操作</span>
<span class="kd">const</span> <span class="nx">link</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">a</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">link</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="dl">"</span><span class="s2">href</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">https://example.com</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">link</span><span class="p">.</span><span class="nx">getAttribute</span><span class="p">(</span><span class="dl">"</span><span class="s2">href</span><span class="dl">"</span><span class="p">);</span> <span class="c1">// "https://example.com"</span>
<span class="nx">link</span><span class="p">.</span><span class="nx">removeAttribute</span><span class="p">(</span><span class="dl">"</span><span class="s2">target</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// より簡単な属性アクセス</span>
<span class="nx">link</span><span class="p">.</span><span class="nx">href</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">https://google.com</span><span class="dl">"</span><span class="p">;</span>
<span class="nx">link</span><span class="p">.</span><span class="nx">target</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">_blank</span><span class="dl">"</span><span class="p">;</span>
<span class="c1">// クラスの操作</span>
<span class="kd">const</span> <span class="nx">button</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">button</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="dl">"</span><span class="s2">active</span><span class="dl">"</span><span class="p">);</span> <span class="c1">// クラス追加</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">remove</span><span class="p">(</span><span class="dl">"</span><span class="s2">disabled</span><span class="dl">"</span><span class="p">);</span> <span class="c1">// クラス削除</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">toggle</span><span class="p">(</span><span class="dl">"</span><span class="s2">highlighted</span><span class="dl">"</span><span class="p">);</span> <span class="c1">// クラスの切り替え</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">contains</span><span class="p">(</span><span class="dl">"</span><span class="s2">active</span><span class="dl">"</span><span class="p">);</span> <span class="c1">// クラスの存在確認</span>
<span class="c1">// スタイルの操作</span>
<span class="kd">const</span> <span class="nx">box</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">.box</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">box</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">backgroundColor</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">red</span><span class="dl">"</span><span class="p">;</span>
<span class="nx">box</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">fontSize</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">20px</span><span class="dl">"</span><span class="p">;</span>
<span class="nx">box</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">none</span><span class="dl">"</span><span class="p">;</span>
<span class="c1">// 複数スタイルの設定</span>
<span class="nb">Object</span><span class="p">.</span><span class="nx">assign</span><span class="p">(</span><span class="nx">box</span><span class="p">.</span><span class="nx">style</span><span class="p">,</span> <span class="p">{</span>
<span class="na">width</span><span class="p">:</span> <span class="dl">"</span><span class="s2">200px</span><span class="dl">"</span><span class="p">,</span>
<span class="na">height</span><span class="p">:</span> <span class="dl">"</span><span class="s2">200px</span><span class="dl">"</span><span class="p">,</span>
<span class="na">border</span><span class="p">:</span> <span class="dl">"</span><span class="s2">2px solid black</span><span class="dl">"</span>
<span class="p">});</span>
</code></pre></div></div>
<h3 id="要素の作成と追加">要素の作成と追加</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 新しい要素の作成</span>
<span class="kd">const</span> <span class="nx">newParagraph</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="dl">"</span><span class="s2">p</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">newParagraph</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">新しい段落です</span><span class="dl">"</span><span class="p">;</span>
<span class="nx">newParagraph</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">new-content</span><span class="dl">"</span><span class="p">;</span>
<span class="c1">// 要素の追加</span>
<span class="kd">const</span> <span class="nx">container</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#container</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">newParagraph</span><span class="p">);</span> <span class="c1">// 末尾に追加</span>
<span class="c1">// より柔軟な挿入</span>
<span class="kd">const</span> <span class="nx">referenceElement</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">.reference</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">insertBefore</span><span class="p">(</span><span class="nx">newParagraph</span><span class="p">,</span> <span class="nx">referenceElement</span><span class="p">);</span> <span class="c1">// 指定要素の前に挿入</span>
<span class="c1">// 新しいAPI(より便利)</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">insertAdjacentElement</span><span class="p">(</span><span class="dl">"</span><span class="s2">beforeend</span><span class="dl">"</span><span class="p">,</span> <span class="nx">newParagraph</span><span class="p">);</span> <span class="c1">// 末尾に追加</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">insertAdjacentElement</span><span class="p">(</span><span class="dl">"</span><span class="s2">afterbegin</span><span class="dl">"</span><span class="p">,</span> <span class="nx">newParagraph</span><span class="p">);</span> <span class="c1">// 先頭に追加</span>
<span class="c1">// HTMLを直接挿入</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">insertAdjacentHTML</span><span class="p">(</span><span class="dl">"</span><span class="s2">beforeend</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2"><p>HTMLで追加</p></span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// 要素の削除</span>
<span class="kd">const</span> <span class="nx">elementToRemove</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">.remove-me</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">elementToRemove</span><span class="p">.</span><span class="nx">remove</span><span class="p">();</span> <span class="c1">// 新しい方法</span>
<span class="c1">// elementToRemove.parentNode.removeChild(elementToRemove); // 古い方法</span>
<span class="c1">// 要素の置換</span>
<span class="kd">const</span> <span class="nx">oldElement</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">.old</span><span class="dl">"</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">newElement</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="dl">"</span><span class="s2">div</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">newElement</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">新しい要素</span><span class="dl">"</span><span class="p">;</span>
<span class="nx">oldElement</span><span class="p">.</span><span class="nx">replaceWith</span><span class="p">(</span><span class="nx">newElement</span><span class="p">);</span>
</code></pre></div></div>
<h2 id="イベント処理">イベント処理</h2>
<h3 id="イベントリスナーの追加">イベントリスナーの追加</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 基本的なイベントリスナー</span>
<span class="kd">const</span> <span class="nx">button</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#myButton</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ボタンがクリックされました</span><span class="dl">"</span><span class="p">);</span>
<span class="p">});</span>
<span class="c1">// アロー関数を使用</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ボタンがクリックされました</span><span class="dl">"</span><span class="p">);</span>
<span class="p">});</span>
<span class="c1">// 名前付き関数を使用</span>
<span class="kd">function</span> <span class="nx">handleClick</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ボタンがクリックされました</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="nx">handleClick</span><span class="p">);</span>
<span class="c1">// イベントオブジェクトの使用</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">イベントタイプ:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">event</span><span class="p">.</span><span class="nx">type</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ターゲット要素:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">event</span><span class="p">.</span><span class="nx">target</span><span class="p">);</span>
<span class="nx">event</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span> <span class="c1">// デフォルト動作を阻止</span>
<span class="p">});</span>
<span class="c1">// 一度だけ実行するイベント</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="nx">handleClick</span><span class="p">,</span> <span class="p">{</span> <span class="na">once</span><span class="p">:</span> <span class="kc">true</span> <span class="p">});</span>
<span class="c1">// イベントリスナーの削除</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">removeEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="nx">handleClick</span><span class="p">);</span>
</code></pre></div></div>
<h3 id="よく使用するイベント">よく使用するイベント</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// マウスイベント</span>
<span class="nx">element</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">クリック</span><span class="dl">"</span><span class="p">));</span>
<span class="nx">element</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">dblclick</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ダブルクリック</span><span class="dl">"</span><span class="p">));</span>
<span class="nx">element</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">mousedown</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">マウスボタン押下</span><span class="dl">"</span><span class="p">));</span>
<span class="nx">element</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">mouseup</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">マウスボタン離上</span><span class="dl">"</span><span class="p">));</span>
<span class="nx">element</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">mouseover</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">マウスオーバー</span><span class="dl">"</span><span class="p">));</span>
<span class="nx">element</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">mouseout</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">マウスアウト</span><span class="dl">"</span><span class="p">));</span>
<span class="nx">element</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">mousemove</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`マウス位置: (</span><span class="p">${</span><span class="nx">e</span><span class="p">.</span><span class="nx">clientX</span><span class="p">}</span><span class="s2">, </span><span class="p">${</span><span class="nx">e</span><span class="p">.</span><span class="nx">clientY</span><span class="p">}</span><span class="s2">)`</span><span class="p">);</span>
<span class="p">});</span>
<span class="c1">// キーボードイベント</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">keydown</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`キー押下: </span><span class="p">${</span><span class="nx">e</span><span class="p">.</span><span class="nx">key</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">key</span> <span class="o">===</span> <span class="dl">"</span><span class="s2">Enter</span><span class="dl">"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">Enterキーが押されました</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">keyup</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`キー離上: </span><span class="p">${</span><span class="nx">e</span><span class="p">.</span><span class="nx">key</span><span class="p">}</span><span class="s2">`</span><span class="p">));</span>
<span class="c1">// フォームイベント</span>
<span class="kd">const</span> <span class="nx">form</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#myForm</span><span class="dl">"</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">input</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#myInput</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">form</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">submit</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span> <span class="c1">// フォーム送信を阻止</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">フォーム送信</span><span class="dl">"</span><span class="p">);</span>
<span class="p">});</span>
<span class="nx">input</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">input</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`入力値: </span><span class="p">${</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="p">});</span>
<span class="nx">input</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">focus</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">フォーカス</span><span class="dl">"</span><span class="p">));</span>
<span class="nx">input</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">blur</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">フォーカス失う</span><span class="dl">"</span><span class="p">));</span>
<span class="c1">// ウィンドウイベント</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">load</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ページ読み込み完了</span><span class="dl">"</span><span class="p">));</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">resize</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`ウィンドウサイズ: </span><span class="p">${</span><span class="nb">window</span><span class="p">.</span><span class="nx">innerWidth</span><span class="p">}</span><span class="s2">x</span><span class="p">${</span><span class="nb">window</span><span class="p">.</span><span class="nx">innerHeight</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="p">});</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">scroll</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`スクロール位置: </span><span class="p">${</span><span class="nb">window</span><span class="p">.</span><span class="nx">scrollY</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="p">});</span>
<span class="c1">// DOMコンテンツ読み込み完了(推奨)</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">DOMContentLoaded</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">DOM読み込み完了</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// ここに初期化コードを記述</span>
<span class="p">});</span>
</code></pre></div></div>
<h3 id="イベント委譲">イベント委譲</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 動的に追加される要素に対するイベント処理</span>
<span class="kd">const</span> <span class="nx">container</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#container</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// 子要素(ボタン)に対するクリックイベントを親要素で処理</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">matches</span><span class="p">(</span><span class="dl">"</span><span class="s2">button</span><span class="dl">"</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ボタンがクリックされました:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">textContent</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="c1">// 新しいボタンを動的に追加</span>
<span class="kd">function</span> <span class="nx">addButton</span><span class="p">(</span><span class="nx">text</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">button</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="dl">"</span><span class="s2">button</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="nx">text</span><span class="p">;</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">button</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">addButton</span><span class="p">(</span><span class="dl">"</span><span class="s2">新しいボタン1</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">addButton</span><span class="p">(</span><span class="dl">"</span><span class="s2">新しいボタン2</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// これらのボタンも自動的にイベントが適用される</span>
</code></pre></div></div>
<h2 id="非同期処理">非同期処理</h2>
<h3 id="promise">Promise</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// Promiseの基本</span>
<span class="kd">const</span> <span class="nx">myPromise</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Promise</span><span class="p">((</span><span class="nx">resolve</span><span class="p">,</span> <span class="nx">reject</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="c1">// 非同期処理のシミュレーション</span>
<span class="nx">setTimeout</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">success</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span> <span class="o">></span> <span class="mf">0.5</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">success</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">resolve</span><span class="p">(</span><span class="dl">"</span><span class="s2">成功しました!</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">reject</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラーが発生しました</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">},</span> <span class="mi">1000</span><span class="p">);</span>
<span class="p">});</span>
<span class="c1">// Promiseの使用</span>
<span class="nx">myPromise</span>
<span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="nx">result</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">成功:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">result</span><span class="p">);</span>
<span class="p">})</span>
<span class="p">.</span><span class="k">catch</span><span class="p">(</span><span class="nx">error</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
<span class="p">})</span>
<span class="p">.</span><span class="k">finally</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">処理完了</span><span class="dl">"</span><span class="p">);</span>
<span class="p">});</span>
<span class="c1">// Promiseチェーン</span>
<span class="kd">function</span> <span class="nx">fetchUser</span><span class="p">(</span><span class="nx">id</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="k">new</span> <span class="nb">Promise</span><span class="p">(</span><span class="nx">resolve</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">setTimeout</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">resolve</span><span class="p">({</span> <span class="nx">id</span><span class="p">,</span> <span class="na">name</span><span class="p">:</span> <span class="s2">`ユーザー</span><span class="p">${</span><span class="nx">id</span><span class="p">}</span><span class="s2">`</span> <span class="p">});</span>
<span class="p">},</span> <span class="mi">500</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">fetchUserPosts</span><span class="p">(</span><span class="nx">userId</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="k">new</span> <span class="nb">Promise</span><span class="p">(</span><span class="nx">resolve</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">setTimeout</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">resolve</span><span class="p">([</span>
<span class="p">{</span> <span class="na">id</span><span class="p">:</span> <span class="mi">1</span><span class="p">,</span> <span class="na">title</span><span class="p">:</span> <span class="dl">"</span><span class="s2">投稿1</span><span class="dl">"</span><span class="p">,</span> <span class="nx">userId</span> <span class="p">},</span>
<span class="p">{</span> <span class="na">id</span><span class="p">:</span> <span class="mi">2</span><span class="p">,</span> <span class="na">title</span><span class="p">:</span> <span class="dl">"</span><span class="s2">投稿2</span><span class="dl">"</span><span class="p">,</span> <span class="nx">userId</span> <span class="p">}</span>
<span class="p">]);</span>
<span class="p">},</span> <span class="mi">500</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="c1">// チェーンの実行</span>
<span class="nx">fetchUser</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span>
<span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="nx">user</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ユーザー取得:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">user</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">fetchUserPosts</span><span class="p">(</span><span class="nx">user</span><span class="p">.</span><span class="nx">id</span><span class="p">);</span>
<span class="p">})</span>
<span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="nx">posts</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">投稿取得:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">posts</span><span class="p">);</span>
<span class="p">})</span>
<span class="p">.</span><span class="k">catch</span><span class="p">(</span><span class="nx">error</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
<span class="p">});</span>
</code></pre></div></div>
<h3 id="asyncawait">async/await</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// async/awaitを使用した非同期処理</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">getUserData</span><span class="p">(</span><span class="nx">id</span><span class="p">)</span> <span class="p">{</span>
<span class="k">try</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">user</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">fetchUser</span><span class="p">(</span><span class="nx">id</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ユーザー取得:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">user</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">posts</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">fetchUserPosts</span><span class="p">(</span><span class="nx">user</span><span class="p">.</span><span class="nx">id</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">投稿取得:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">posts</span><span class="p">);</span>
<span class="k">return</span> <span class="p">{</span> <span class="nx">user</span><span class="p">,</span> <span class="nx">posts</span> <span class="p">};</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
<span class="k">throw</span> <span class="nx">error</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// async関数の呼び出し</span>
<span class="nx">getUserData</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span>
<span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="nx">data</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">完了:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">data</span><span class="p">))</span>
<span class="p">.</span><span class="k">catch</span><span class="p">(</span><span class="nx">error</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">処理失敗:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">));</span>
<span class="c1">// 複数の非同期処理を並行実行</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">fetchMultipleUsers</span><span class="p">()</span> <span class="p">{</span>
<span class="k">try</span> <span class="p">{</span>
<span class="c1">// 並行実行(高速)</span>
<span class="kd">const</span> <span class="p">[</span><span class="nx">user1</span><span class="p">,</span> <span class="nx">user2</span><span class="p">,</span> <span class="nx">user3</span><span class="p">]</span> <span class="o">=</span> <span class="k">await</span> <span class="nb">Promise</span><span class="p">.</span><span class="nx">all</span><span class="p">([</span>
<span class="nx">fetchUser</span><span class="p">(</span><span class="mi">1</span><span class="p">),</span>
<span class="nx">fetchUser</span><span class="p">(</span><span class="mi">2</span><span class="p">),</span>
<span class="nx">fetchUser</span><span class="p">(</span><span class="mi">3</span><span class="p">)</span>
<span class="p">]);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">全ユーザー取得完了:</span><span class="dl">"</span><span class="p">,</span> <span class="p">{</span> <span class="nx">user1</span><span class="p">,</span> <span class="nx">user2</span><span class="p">,</span> <span class="nx">user3</span> <span class="p">});</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">いずれかでエラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// Promise.allSettled(エラーがあっても全て実行)</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">fetchWithErrors</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">results</span> <span class="o">=</span> <span class="k">await</span> <span class="nb">Promise</span><span class="p">.</span><span class="nx">allSettled</span><span class="p">([</span>
<span class="nx">fetchUser</span><span class="p">(</span><span class="mi">1</span><span class="p">),</span>
<span class="nb">Promise</span><span class="p">.</span><span class="nx">reject</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラーのテスト</span><span class="dl">"</span><span class="p">),</span>
<span class="nx">fetchUser</span><span class="p">(</span><span class="mi">3</span><span class="p">)</span>
<span class="p">]);</span>
<span class="nx">results</span><span class="p">.</span><span class="nx">forEach</span><span class="p">((</span><span class="nx">result</span><span class="p">,</span> <span class="nx">index</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">result</span><span class="p">.</span><span class="nx">status</span> <span class="o">===</span> <span class="dl">"</span><span class="s2">fulfilled</span><span class="dl">"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`結果</span><span class="p">${</span><span class="nx">index</span><span class="p">}</span><span class="s2">:`</span><span class="p">,</span> <span class="nx">result</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`エラー</span><span class="p">${</span><span class="nx">index</span><span class="p">}</span><span class="s2">:`</span><span class="p">,</span> <span class="nx">result</span><span class="p">.</span><span class="nx">reason</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="p">}</span>
</code></pre></div></div>
<h3 id="fetch-api">Fetch API</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 基本的なGET リクエスト</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">fetchData</span><span class="p">()</span> <span class="p">{</span>
<span class="k">try</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">response</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">fetch</span><span class="p">(</span><span class="dl">"</span><span class="s2">https://jsonplaceholder.typicode.com/posts/1</span><span class="dl">"</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">response</span><span class="p">.</span><span class="nx">ok</span><span class="p">)</span> <span class="p">{</span>
<span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="s2">`HTTP error! status: </span><span class="p">${</span><span class="nx">response</span><span class="p">.</span><span class="nx">status</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="p">}</span>
<span class="kd">const</span> <span class="nx">data</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">response</span><span class="p">.</span><span class="nx">json</span><span class="p">();</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">取得データ:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">data</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">data</span><span class="p">;</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">取得エラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// POST リクエスト</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">createPost</span><span class="p">(</span><span class="nx">postData</span><span class="p">)</span> <span class="p">{</span>
<span class="k">try</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">response</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">fetch</span><span class="p">(</span><span class="dl">"</span><span class="s2">https://jsonplaceholder.typicode.com/posts</span><span class="dl">"</span><span class="p">,</span> <span class="p">{</span>
<span class="na">method</span><span class="p">:</span> <span class="dl">"</span><span class="s2">POST</span><span class="dl">"</span><span class="p">,</span>
<span class="na">headers</span><span class="p">:</span> <span class="p">{</span>
<span class="dl">"</span><span class="s2">Content-Type</span><span class="dl">"</span><span class="p">:</span> <span class="dl">"</span><span class="s2">application/json</span><span class="dl">"</span><span class="p">,</span>
<span class="p">},</span>
<span class="na">body</span><span class="p">:</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">postData</span><span class="p">)</span>
<span class="p">});</span>
<span class="kd">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">response</span><span class="p">.</span><span class="nx">json</span><span class="p">();</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">作成結果:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">result</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">result</span><span class="p">;</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">作成エラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// 使用例</span>
<span class="nx">createPost</span><span class="p">({</span>
<span class="na">title</span><span class="p">:</span> <span class="dl">"</span><span class="s2">新しい投稿</span><span class="dl">"</span><span class="p">,</span>
<span class="na">body</span><span class="p">:</span> <span class="dl">"</span><span class="s2">投稿内容</span><span class="dl">"</span><span class="p">,</span>
<span class="na">userId</span><span class="p">:</span> <span class="mi">1</span>
<span class="p">});</span>
<span class="c1">// ファイルアップロード</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">uploadFile</span><span class="p">(</span><span class="nx">file</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">formData</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">FormData</span><span class="p">();</span>
<span class="nx">formData</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="dl">"</span><span class="s2">file</span><span class="dl">"</span><span class="p">,</span> <span class="nx">file</span><span class="p">);</span>
<span class="k">try</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">response</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">fetch</span><span class="p">(</span><span class="dl">"</span><span class="s2">/upload</span><span class="dl">"</span><span class="p">,</span> <span class="p">{</span>
<span class="na">method</span><span class="p">:</span> <span class="dl">"</span><span class="s2">POST</span><span class="dl">"</span><span class="p">,</span>
<span class="na">body</span><span class="p">:</span> <span class="nx">formData</span>
<span class="p">});</span>
<span class="kd">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">response</span><span class="p">.</span><span class="nx">json</span><span class="p">();</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">アップロード完了:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">result</span><span class="p">);</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">アップロードエラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// AbortController でリクエストをキャンセル</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">cancellableRequest</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">controller</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">AbortController</span><span class="p">();</span>
<span class="c1">// 5秒後にキャンセル</span>
<span class="nx">setTimeout</span><span class="p">(()</span> <span class="o">=></span> <span class="nx">controller</span><span class="p">.</span><span class="nx">abort</span><span class="p">(),</span> <span class="mi">5000</span><span class="p">);</span>
<span class="k">try</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">response</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">fetch</span><span class="p">(</span><span class="dl">"</span><span class="s2">https://httpbin.org/delay/10</span><span class="dl">"</span><span class="p">,</span> <span class="p">{</span>
<span class="na">signal</span><span class="p">:</span> <span class="nx">controller</span><span class="p">.</span><span class="nx">signal</span>
<span class="p">});</span>
<span class="kd">const</span> <span class="nx">data</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">response</span><span class="p">.</span><span class="nx">json</span><span class="p">();</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">データ:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">data</span><span class="p">);</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">error</span><span class="p">.</span><span class="nx">name</span> <span class="o">===</span> <span class="dl">"</span><span class="s2">AbortError</span><span class="dl">"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">リクエストがキャンセルされました</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>
<h2 id="モダンjavascriptes6">モダンJavaScript(ES6+)</h2>
<h3 id="分割代入">分割代入</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 配列の分割代入</span>
<span class="kd">const</span> <span class="nx">colors</span> <span class="o">=</span> <span class="p">[</span><span class="dl">"</span><span class="s2">red</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">green</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">blue</span><span class="dl">"</span><span class="p">];</span>
<span class="kd">const</span> <span class="p">[</span><span class="nx">first</span><span class="p">,</span> <span class="nx">second</span><span class="p">,</span> <span class="nx">third</span><span class="p">]</span> <span class="o">=</span> <span class="nx">colors</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">first</span><span class="p">);</span> <span class="c1">// "red"</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">second</span><span class="p">);</span> <span class="c1">// "green"</span>
<span class="c1">// デフォルト値</span>
<span class="kd">const</span> <span class="p">[</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">,</span> <span class="nx">c</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">yellow</span><span class="dl">"</span><span class="p">]</span> <span class="o">=</span> <span class="p">[</span><span class="dl">"</span><span class="s2">red</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">green</span><span class="dl">"</span><span class="p">];</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">c</span><span class="p">);</span> <span class="c1">// "yellow"</span>
<span class="c1">// 値の交換</span>
<span class="kd">let</span> <span class="nx">x</span> <span class="o">=</span> <span class="mi">1</span><span class="p">,</span> <span class="nx">y</span> <span class="o">=</span> <span class="mi">2</span><span class="p">;</span>
<span class="p">[</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">]</span> <span class="o">=</span> <span class="p">[</span><span class="nx">y</span><span class="p">,</span> <span class="nx">x</span><span class="p">];</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">);</span> <span class="c1">// 2, 1</span>
<span class="c1">// オブジェクトの分割代入</span>
<span class="kd">const</span> <span class="nx">person</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">name</span><span class="p">:</span> <span class="dl">"</span><span class="s2">田中太郎</span><span class="dl">"</span><span class="p">,</span>
<span class="na">age</span><span class="p">:</span> <span class="mi">30</span><span class="p">,</span>
<span class="na">city</span><span class="p">:</span> <span class="dl">"</span><span class="s2">東京</span><span class="dl">"</span>
<span class="p">};</span>
<span class="kd">const</span> <span class="p">{</span> <span class="nx">name</span><span class="p">,</span> <span class="nx">age</span><span class="p">,</span> <span class="nx">city</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">person</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">name</span><span class="p">);</span> <span class="c1">// "田中太郎"</span>
<span class="c1">// プロパティ名を変更</span>
<span class="kd">const</span> <span class="p">{</span> <span class="na">name</span><span class="p">:</span> <span class="nx">fullName</span><span class="p">,</span> <span class="na">age</span><span class="p">:</span> <span class="nx">years</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">person</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">fullName</span><span class="p">);</span> <span class="c1">// "田中太郎"</span>
<span class="c1">// ネストした分割代入</span>
<span class="kd">const</span> <span class="nx">user</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">id</span><span class="p">:</span> <span class="mi">1</span><span class="p">,</span>
<span class="na">info</span><span class="p">:</span> <span class="p">{</span>
<span class="na">name</span><span class="p">:</span> <span class="dl">"</span><span class="s2">太郎</span><span class="dl">"</span><span class="p">,</span>
<span class="na">contact</span><span class="p">:</span> <span class="p">{</span>
<span class="na">email</span><span class="p">:</span> <span class="dl">"</span><span class="s2">taro@example.com</span><span class="dl">"</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="kd">const</span> <span class="p">{</span> <span class="na">info</span><span class="p">:</span> <span class="p">{</span> <span class="na">name</span><span class="p">:</span> <span class="nx">userName</span><span class="p">,</span> <span class="na">contact</span><span class="p">:</span> <span class="p">{</span> <span class="nx">email</span> <span class="p">}</span> <span class="p">}</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">user</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">userName</span><span class="p">);</span> <span class="c1">// "太郎"</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">email</span><span class="p">);</span> <span class="c1">// "taro@example.com"</span>
<span class="c1">// 関数の引数での分割代入</span>
<span class="kd">function</span> <span class="nx">greetUser</span><span class="p">({</span> <span class="nx">name</span><span class="p">,</span> <span class="nx">age</span> <span class="o">=</span> <span class="mi">0</span> <span class="p">})</span> <span class="p">{</span>
<span class="k">return</span> <span class="s2">`こんにちは、</span><span class="p">${</span><span class="nx">name</span><span class="p">}</span><span class="s2">さん(</span><span class="p">${</span><span class="nx">age</span><span class="p">}</span><span class="s2">歳)`</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">greetUser</span><span class="p">({</span> <span class="na">name</span><span class="p">:</span> <span class="dl">"</span><span class="s2">花子</span><span class="dl">"</span><span class="p">,</span> <span class="na">age</span><span class="p">:</span> <span class="mi">25</span> <span class="p">}));</span> <span class="c1">// "こんにちは、花子さん(25歳)"</span>
</code></pre></div></div>
<h3 id="モジュール">モジュール</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// math.js(エクスポート)</span>
<span class="k">export</span> <span class="kd">const</span> <span class="nx">PI</span> <span class="o">=</span> <span class="mf">3.14159</span><span class="p">;</span>
<span class="k">export</span> <span class="kd">function</span> <span class="nx">add</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">a</span> <span class="o">+</span> <span class="nx">b</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">export</span> <span class="kd">function</span> <span class="nx">multiply</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">a</span> <span class="o">*</span> <span class="nx">b</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// デフォルトエクスポート</span>
<span class="k">export</span> <span class="k">default</span> <span class="kd">function</span> <span class="nx">subtract</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">a</span> <span class="o">-</span> <span class="nx">b</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// main.js(インポート)</span>
<span class="k">import</span> <span class="nx">subtract</span><span class="p">,</span> <span class="p">{</span> <span class="nx">PI</span><span class="p">,</span> <span class="nx">add</span><span class="p">,</span> <span class="nx">multiply</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">./math.js</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">PI</span><span class="p">);</span> <span class="c1">// 3.14159</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">add</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">));</span> <span class="c1">// 5</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">multiply</span><span class="p">(</span><span class="mi">4</span><span class="p">,</span> <span class="mi">5</span><span class="p">));</span> <span class="c1">// 20</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">subtract</span><span class="p">(</span><span class="mi">10</span><span class="p">,</span> <span class="mi">3</span><span class="p">));</span> <span class="c1">// 7</span>
<span class="c1">// 名前を変更してインポート</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">add</span> <span class="k">as</span> <span class="nx">sum</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">./math.js</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">sum</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">));</span> <span class="c1">// 3</span>
<span class="c1">// 全てインポート</span>
<span class="k">import</span> <span class="o">*</span> <span class="k">as</span> <span class="nx">MathUtils</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">./math.js</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">MathUtils</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">));</span> <span class="c1">// 3</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">MathUtils</span><span class="p">.</span><span class="nx">PI</span><span class="p">);</span> <span class="c1">// 3.14159</span>
<span class="c1">// 動的インポート(非同期)</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">loadMathModule</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">mathModule</span> <span class="o">=</span> <span class="k">await</span> <span class="k">import</span><span class="p">(</span><span class="dl">'</span><span class="s1">./math.js</span><span class="dl">'</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">mathModule</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">));</span> <span class="c1">// 3</span>
<span class="p">}</span>
</code></pre></div></div>
<h3 id="クラス">クラス</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// ES6 クラス</span>
<span class="kd">class</span> <span class="nx">Person</span> <span class="p">{</span>
<span class="c1">// コンストラクタ</span>
<span class="kd">constructor</span><span class="p">(</span><span class="nx">name</span><span class="p">,</span> <span class="nx">age</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">name</span> <span class="o">=</span> <span class="nx">name</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">age</span> <span class="o">=</span> <span class="nx">age</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// メソッド</span>
<span class="nx">greet</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="s2">`こんにちは、私は</span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">name</span><span class="p">}</span><span class="s2">です`</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// ゲッター</span>
<span class="kd">get</span> <span class="nx">info</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="s2">`</span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">name</span><span class="p">}</span><span class="s2">(</span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">age</span><span class="p">}</span><span class="s2">歳)`</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// セッター</span>
<span class="kd">set</span> <span class="nx">age</span><span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">value</span> <span class="o"><</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
<span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="dl">"</span><span class="s2">年齢は0以上である必要があります</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">_age</span> <span class="o">=</span> <span class="nx">value</span><span class="p">;</span>
<span class="p">}</span>
<span class="kd">get</span> <span class="nx">age</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">_age</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// 静的メソッド</span>
<span class="kd">static</span> <span class="nx">createAdult</span><span class="p">(</span><span class="nx">name</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">(</span><span class="nx">name</span><span class="p">,</span> <span class="mi">20</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// クラスの使用</span>
<span class="kd">const</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">(</span><span class="dl">"</span><span class="s2">太郎</span><span class="dl">"</span><span class="p">,</span> <span class="mi">25</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">person</span><span class="p">.</span><span class="nx">greet</span><span class="p">());</span> <span class="c1">// "こんにちは、私は太郎です"</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">person</span><span class="p">.</span><span class="nx">info</span><span class="p">);</span> <span class="c1">// "太郎(25歳)"</span>
<span class="c1">// 静的メソッドの使用</span>
<span class="kd">const</span> <span class="nx">adult</span> <span class="o">=</span> <span class="nx">Person</span><span class="p">.</span><span class="nx">createAdult</span><span class="p">(</span><span class="dl">"</span><span class="s2">花子</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// 継承</span>
<span class="kd">class</span> <span class="nx">Student</span> <span class="kd">extends</span> <span class="nx">Person</span> <span class="p">{</span>
<span class="kd">constructor</span><span class="p">(</span><span class="nx">name</span><span class="p">,</span> <span class="nx">age</span><span class="p">,</span> <span class="nx">school</span><span class="p">)</span> <span class="p">{</span>
<span class="k">super</span><span class="p">(</span><span class="nx">name</span><span class="p">,</span> <span class="nx">age</span><span class="p">);</span> <span class="c1">// 親クラスのコンストラクタを呼び出し</span>
<span class="k">this</span><span class="p">.</span><span class="nx">school</span> <span class="o">=</span> <span class="nx">school</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">greet</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="s2">`</span><span class="p">${</span><span class="k">super</span><span class="p">.</span><span class="nx">greet</span><span class="p">()}</span><span class="s2">、</span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">school</span><span class="p">}</span><span class="s2">の学生です`</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">study</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="s2">`</span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">name</span><span class="p">}</span><span class="s2">は勉強しています`</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">const</span> <span class="nx">student</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Student</span><span class="p">(</span><span class="dl">"</span><span class="s2">次郎</span><span class="dl">"</span><span class="p">,</span> <span class="mi">18</span><span class="p">,</span> <span class="dl">"</span><span class="s2">東京大学</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">student</span><span class="p">.</span><span class="nx">greet</span><span class="p">());</span> <span class="c1">// "こんにちは、私は次郎です、東京大学の学生です"</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">student</span><span class="p">.</span><span class="nx">study</span><span class="p">());</span> <span class="c1">// "次郎は勉強しています"</span>
<span class="c1">// プライベートフィールド(ES2022+)</span>
<span class="kd">class</span> <span class="nx">BankAccount</span> <span class="p">{</span>
<span class="err">#</span><span class="nx">balance</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="c1">// プライベートフィールド</span>
<span class="kd">constructor</span><span class="p">(</span><span class="nx">initialBalance</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="err">#</span><span class="nx">balance</span> <span class="o">=</span> <span class="nx">initialBalance</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">deposit</span><span class="p">(</span><span class="nx">amount</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="err">#</span><span class="nx">balance</span> <span class="o">+=</span> <span class="nx">amount</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">getBalance</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="err">#</span><span class="nx">balance</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// プライベートメソッド</span>
<span class="err">#</span><span class="nx">calculateInterest</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="err">#</span><span class="nx">balance</span> <span class="o">*</span> <span class="mf">0.01</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">const</span> <span class="nx">account</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">BankAccount</span><span class="p">(</span><span class="mi">1000</span><span class="p">);</span>
<span class="nx">account</span><span class="p">.</span><span class="nx">deposit</span><span class="p">(</span><span class="mi">500</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">account</span><span class="p">.</span><span class="nx">getBalance</span><span class="p">());</span> <span class="c1">// 1500</span>
<span class="c1">// console.log(account.#balance); // エラー: プライベートフィールドにはアクセス不可</span>
</code></pre></div></div>
<h2 id="エラーハンドリング">エラーハンドリング</h2>
<h3 id="try-catch文">try-catch文</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 基本的なエラーハンドリング</span>
<span class="k">try</span> <span class="p">{</span>
<span class="c1">// エラーが発生する可能性のあるコード</span>
<span class="kd">let</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">riskyOperation</span><span class="p">();</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">成功:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">result</span><span class="p">);</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="c1">// エラーが発生した場合の処理</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラーが発生しました:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
<span class="p">}</span> <span class="k">finally</span> <span class="p">{</span>
<span class="c1">// 必ず実行される処理</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">処理完了</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="c1">// 異なるタイプのエラーの処理</span>
<span class="kd">function</span> <span class="nx">parseJSON</span><span class="p">(</span><span class="nx">jsonString</span><span class="p">)</span> <span class="p">{</span>
<span class="k">try</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="nx">jsonString</span><span class="p">);</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">error</span> <span class="k">instanceof</span> <span class="nx">SyntaxError</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">JSON形式が正しくありません:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">予期しないエラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">return</span> <span class="kc">null</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// カスタムエラー</span>
<span class="kd">class</span> <span class="nx">ValidationError</span> <span class="kd">extends</span> <span class="nb">Error</span> <span class="p">{</span>
<span class="kd">constructor</span><span class="p">(</span><span class="nx">message</span><span class="p">,</span> <span class="nx">field</span><span class="p">)</span> <span class="p">{</span>
<span class="k">super</span><span class="p">(</span><span class="nx">message</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">name</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">ValidationError</span><span class="dl">"</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">field</span> <span class="o">=</span> <span class="nx">field</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">validateEmail</span><span class="p">(</span><span class="nx">email</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">email</span><span class="p">.</span><span class="nx">includes</span><span class="p">(</span><span class="dl">"</span><span class="s2">@</span><span class="dl">"</span><span class="p">))</span> <span class="p">{</span>
<span class="k">throw</span> <span class="k">new</span> <span class="nx">ValidationError</span><span class="p">(</span><span class="dl">"</span><span class="s2">有効なメールアドレスではありません</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">email</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// カスタムエラーの使用</span>
<span class="k">try</span> <span class="p">{</span>
<span class="nx">validateEmail</span><span class="p">(</span><span class="dl">"</span><span class="s2">invalid-email</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">error</span> <span class="k">instanceof</span> <span class="nx">ValidationError</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`検証エラー(</span><span class="p">${</span><span class="nx">error</span><span class="p">.</span><span class="nx">field</span><span class="p">}</span><span class="s2">): </span><span class="p">${</span><span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">予期しないエラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// async/await でのエラーハンドリング</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">fetchUserData</span><span class="p">(</span><span class="nx">id</span><span class="p">)</span> <span class="p">{</span>
<span class="k">try</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">response</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">fetch</span><span class="p">(</span><span class="s2">`/api/users/</span><span class="p">${</span><span class="nx">id</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">response</span><span class="p">.</span><span class="nx">ok</span><span class="p">)</span> <span class="p">{</span>
<span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="s2">`ユーザー取得失敗: </span><span class="p">${</span><span class="nx">response</span><span class="p">.</span><span class="nx">status</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="p">}</span>
<span class="kd">const</span> <span class="nx">userData</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">response</span><span class="p">.</span><span class="nx">json</span><span class="p">();</span>
<span class="k">return</span> <span class="nx">userData</span><span class="p">;</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ユーザーデータ取得エラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
<span class="k">throw</span> <span class="nx">error</span><span class="p">;</span> <span class="c1">// エラーを再度投げる</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// エラーのロギング</span>
<span class="kd">function</span> <span class="nx">logError</span><span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="dl">"</span><span class="s2">Error:</span><span class="dl">"</span><span class="p">,</span> <span class="p">{</span>
<span class="na">message</span><span class="p">:</span> <span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">,</span>
<span class="na">stack</span><span class="p">:</span> <span class="nx">error</span><span class="p">.</span><span class="nx">stack</span><span class="p">,</span>
<span class="na">timestamp</span><span class="p">:</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">().</span><span class="nx">toISOString</span><span class="p">()</span>
<span class="p">});</span>
<span class="p">}</span>
</code></pre></div></div>
<h2 id="ブラウザapi">ブラウザAPI</h2>
<h3 id="local-storage">Local Storage</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// データの保存</span>
<span class="nx">localStorage</span><span class="p">.</span><span class="nx">setItem</span><span class="p">(</span><span class="dl">"</span><span class="s2">username</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">田中太郎</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">localStorage</span><span class="p">.</span><span class="nx">setItem</span><span class="p">(</span><span class="dl">"</span><span class="s2">settings</span><span class="dl">"</span><span class="p">,</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">({</span>
<span class="na">theme</span><span class="p">:</span> <span class="dl">"</span><span class="s2">dark</span><span class="dl">"</span><span class="p">,</span>
<span class="na">language</span><span class="p">:</span> <span class="dl">"</span><span class="s2">ja</span><span class="dl">"</span>
<span class="p">}));</span>
<span class="c1">// データの取得</span>
<span class="kd">const</span> <span class="nx">username</span> <span class="o">=</span> <span class="nx">localStorage</span><span class="p">.</span><span class="nx">getItem</span><span class="p">(</span><span class="dl">"</span><span class="s2">username</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">username</span><span class="p">);</span> <span class="c1">// "田中太郎"</span>
<span class="kd">const</span> <span class="nx">settings</span> <span class="o">=</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="nx">localStorage</span><span class="p">.</span><span class="nx">getItem</span><span class="p">(</span><span class="dl">"</span><span class="s2">settings</span><span class="dl">"</span><span class="p">));</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">settings</span><span class="p">);</span> <span class="c1">// { theme: "dark", language: "ja" }</span>
<span class="c1">// データの削除</span>
<span class="nx">localStorage</span><span class="p">.</span><span class="nx">removeItem</span><span class="p">(</span><span class="dl">"</span><span class="s2">username</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// 全データの削除</span>
<span class="nx">localStorage</span><span class="p">.</span><span class="nx">clear</span><span class="p">();</span>
<span class="c1">// ストレージの変更を監視</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">storage</span><span class="dl">"</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ストレージが変更されました:</span><span class="dl">"</span><span class="p">,</span> <span class="p">{</span>
<span class="na">key</span><span class="p">:</span> <span class="nx">e</span><span class="p">.</span><span class="nx">key</span><span class="p">,</span>
<span class="na">oldValue</span><span class="p">:</span> <span class="nx">e</span><span class="p">.</span><span class="nx">oldValue</span><span class="p">,</span>
<span class="na">newValue</span><span class="p">:</span> <span class="nx">e</span><span class="p">.</span><span class="nx">newValue</span>
<span class="p">});</span>
<span class="p">});</span>
<span class="c1">// セッションストレージ(タブを閉じると削除される)</span>
<span class="nx">sessionStorage</span><span class="p">.</span><span class="nx">setItem</span><span class="p">(</span><span class="dl">"</span><span class="s2">temporary</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">一時的なデータ</span><span class="dl">"</span><span class="p">);</span>
</code></pre></div></div>
<h3 id="geolocation-api">Geolocation API</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 現在位置の取得</span>
<span class="k">if</span> <span class="p">(</span><span class="dl">"</span><span class="s2">geolocation</span><span class="dl">"</span> <span class="k">in</span> <span class="nb">navigator</span><span class="p">)</span> <span class="p">{</span>
<span class="nb">navigator</span><span class="p">.</span><span class="nx">geolocation</span><span class="p">.</span><span class="nx">getCurrentPosition</span><span class="p">(</span>
<span class="kd">function</span><span class="p">(</span><span class="nx">position</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">latitude</span> <span class="o">=</span> <span class="nx">position</span><span class="p">.</span><span class="nx">coords</span><span class="p">.</span><span class="nx">latitude</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">longitude</span> <span class="o">=</span> <span class="nx">position</span><span class="p">.</span><span class="nx">coords</span><span class="p">.</span><span class="nx">longitude</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`現在位置: </span><span class="p">${</span><span class="nx">latitude</span><span class="p">}</span><span class="s2">, </span><span class="p">${</span><span class="nx">longitude</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="p">},</span>
<span class="kd">function</span><span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">位置取得エラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
<span class="p">},</span>
<span class="p">{</span>
<span class="na">enableHighAccuracy</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> <span class="c1">// 高精度</span>
<span class="na">timeout</span><span class="p">:</span> <span class="mi">10000</span><span class="p">,</span> <span class="c1">// タイムアウト(10秒)</span>
<span class="na">maximumAge</span><span class="p">:</span> <span class="mi">60000</span> <span class="c1">// キャッシュ有効期間(1分)</span>
<span class="p">}</span>
<span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">Geolocation APIはサポートされていません</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="c1">// 位置の監視</span>
<span class="kd">const</span> <span class="nx">watchId</span> <span class="o">=</span> <span class="nb">navigator</span><span class="p">.</span><span class="nx">geolocation</span><span class="p">.</span><span class="nx">watchPosition</span><span class="p">(</span>
<span class="kd">function</span><span class="p">(</span><span class="nx">position</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">位置が変更されました:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">position</span><span class="p">.</span><span class="nx">coords</span><span class="p">);</span>
<span class="p">},</span>
<span class="kd">function</span><span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">監視エラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">);</span>
<span class="c1">// 監視の停止</span>
<span class="c1">// navigator.geolocation.clearWatch(watchId);</span>
</code></pre></div></div>
<h3 id="notification-api">Notification API</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 通知の許可を要求</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">requestNotificationPermission</span><span class="p">()</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="dl">"</span><span class="s2">Notification</span><span class="dl">"</span> <span class="k">in</span> <span class="nb">window</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">permission</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">Notification</span><span class="p">.</span><span class="nx">requestPermission</span><span class="p">();</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">通知許可:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">permission</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">permission</span> <span class="o">===</span> <span class="dl">"</span><span class="s2">granted</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// 通知の表示</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">showNotification</span><span class="p">(</span><span class="nx">title</span><span class="p">,</span> <span class="nx">options</span> <span class="o">=</span> <span class="p">{})</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">hasPermission</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">requestNotificationPermission</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">hasPermission</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">notification</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Notification</span><span class="p">(</span><span class="nx">title</span><span class="p">,</span> <span class="p">{</span>
<span class="na">body</span><span class="p">:</span> <span class="nx">options</span><span class="p">.</span><span class="nx">body</span> <span class="o">||</span> <span class="dl">""</span><span class="p">,</span>
<span class="na">icon</span><span class="p">:</span> <span class="nx">options</span><span class="p">.</span><span class="nx">icon</span> <span class="o">||</span> <span class="dl">"</span><span class="s2">/default-icon.png</span><span class="dl">"</span><span class="p">,</span>
<span class="na">tag</span><span class="p">:</span> <span class="nx">options</span><span class="p">.</span><span class="nx">tag</span> <span class="o">||</span> <span class="dl">"</span><span class="s2">default</span><span class="dl">"</span><span class="p">,</span>
<span class="p">...</span><span class="nx">options</span>
<span class="p">});</span>
<span class="nx">notification</span><span class="p">.</span><span class="nx">onclick</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">通知がクリックされました</span><span class="dl">"</span><span class="p">);</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">focus</span><span class="p">();</span>
<span class="k">this</span><span class="p">.</span><span class="nx">close</span><span class="p">();</span>
<span class="p">};</span>
<span class="c1">// 自動で閉じる</span>
<span class="nx">setTimeout</span><span class="p">(()</span> <span class="o">=></span> <span class="nx">notification</span><span class="p">.</span><span class="nx">close</span><span class="p">(),</span> <span class="mi">5000</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// 使用例</span>
<span class="nx">showNotification</span><span class="p">(</span><span class="dl">"</span><span class="s2">新しいメッセージ</span><span class="dl">"</span><span class="p">,</span> <span class="p">{</span>
<span class="na">body</span><span class="p">:</span> <span class="dl">"</span><span class="s2">太郎さんからメッセージが届きました</span><span class="dl">"</span><span class="p">,</span>
<span class="na">icon</span><span class="p">:</span> <span class="dl">"</span><span class="s2">/message-icon.png</span><span class="dl">"</span><span class="p">,</span>
<span class="na">tag</span><span class="p">:</span> <span class="dl">"</span><span class="s2">message</span><span class="dl">"</span>
<span class="p">});</span>
</code></pre></div></div>
<h2 id="実践的なコード例">実践的なコード例</h2>
<h3 id="フォームバリデーション">フォームバリデーション</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">class</span> <span class="nx">FormValidator</span> <span class="p">{</span>
<span class="kd">constructor</span><span class="p">(</span><span class="nx">form</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">form</span> <span class="o">=</span> <span class="nx">form</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">errors</span> <span class="o">=</span> <span class="p">{};</span>
<span class="k">this</span><span class="p">.</span><span class="nx">rules</span> <span class="o">=</span> <span class="p">{};</span>
<span class="k">this</span><span class="p">.</span><span class="nx">init</span><span class="p">();</span>
<span class="p">}</span>
<span class="nx">init</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">form</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">submit</span><span class="dl">"</span><span class="p">,</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
<span class="k">this</span><span class="p">.</span><span class="nx">validate</span><span class="p">();</span>
<span class="p">});</span>
<span class="c1">// リアルタイムバリデーション</span>
<span class="k">this</span><span class="p">.</span><span class="nx">form</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">input</span><span class="dl">"</span><span class="p">,</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">validateField</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="nx">addRule</span><span class="p">(</span><span class="nx">fieldName</span><span class="p">,</span> <span class="nx">rule</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">rules</span><span class="p">[</span><span class="nx">fieldName</span><span class="p">])</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">rules</span><span class="p">[</span><span class="nx">fieldName</span><span class="p">]</span> <span class="o">=</span> <span class="p">[];</span>
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">rules</span><span class="p">[</span><span class="nx">fieldName</span><span class="p">].</span><span class="nx">push</span><span class="p">(</span><span class="nx">rule</span><span class="p">);</span>
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">validateField</span><span class="p">(</span><span class="nx">field</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">rules</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">rules</span><span class="p">[</span><span class="nx">field</span><span class="p">.</span><span class="nx">name</span><span class="p">];</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">rules</span><span class="p">)</span> <span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">clearError</span><span class="p">(</span><span class="nx">field</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">const</span> <span class="nx">rule</span> <span class="k">of</span> <span class="nx">rules</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">rule</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="nx">field</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">result</span><span class="p">.</span><span class="nx">valid</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">addError</span><span class="p">(</span><span class="nx">field</span><span class="p">.</span><span class="nx">name</span><span class="p">,</span> <span class="nx">result</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">showError</span><span class="p">(</span><span class="nx">field</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span>
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">showSuccess</span><span class="p">(</span><span class="nx">field</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span>
<span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">validate</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">errors</span> <span class="o">=</span> <span class="p">{};</span>
<span class="kd">let</span> <span class="nx">isValid</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">fields</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">form</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="dl">"</span><span class="s2">[name]</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">fields</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">field</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">validateField</span><span class="p">(</span><span class="nx">field</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">isValid</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">isValid</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">onSuccess</span><span class="p">();</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">onError</span><span class="p">();</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">isValid</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">addError</span><span class="p">(</span><span class="nx">fieldName</span><span class="p">,</span> <span class="nx">message</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">errors</span><span class="p">[</span><span class="nx">fieldName</span><span class="p">])</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">errors</span><span class="p">[</span><span class="nx">fieldName</span><span class="p">]</span> <span class="o">=</span> <span class="p">[];</span>
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">errors</span><span class="p">[</span><span class="nx">fieldName</span><span class="p">].</span><span class="nx">push</span><span class="p">(</span><span class="nx">message</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">clearError</span><span class="p">(</span><span class="nx">fieldName</span><span class="p">)</span> <span class="p">{</span>
<span class="k">delete</span> <span class="k">this</span><span class="p">.</span><span class="nx">errors</span><span class="p">[</span><span class="nx">fieldName</span><span class="p">];</span>
<span class="k">this</span><span class="p">.</span><span class="nx">hideError</span><span class="p">(</span><span class="nx">fieldName</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">showError</span><span class="p">(</span><span class="nx">fieldName</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">field</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">form</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s2">`[name="</span><span class="p">${</span><span class="nx">fieldName</span><span class="p">}</span><span class="s2">"]`</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">errorContainer</span> <span class="o">=</span> <span class="nx">field</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">.error-message</span><span class="dl">"</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">errorContainer</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">errorContainer</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">errors</span><span class="p">[</span><span class="nx">fieldName</span><span class="p">][</span><span class="mi">0</span><span class="p">];</span>
<span class="nx">errorContainer</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">block</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">field</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="dl">"</span><span class="s2">error</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">field</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">remove</span><span class="p">(</span><span class="dl">"</span><span class="s2">success</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">hideError</span><span class="p">(</span><span class="nx">fieldName</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">field</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">form</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s2">`[name="</span><span class="p">${</span><span class="nx">fieldName</span><span class="p">}</span><span class="s2">"]`</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">errorContainer</span> <span class="o">=</span> <span class="nx">field</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">.error-message</span><span class="dl">"</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">errorContainer</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">errorContainer</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">none</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">field</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">remove</span><span class="p">(</span><span class="dl">"</span><span class="s2">error</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">showSuccess</span><span class="p">(</span><span class="nx">fieldName</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">field</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">form</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s2">`[name="</span><span class="p">${</span><span class="nx">fieldName</span><span class="p">}</span><span class="s2">"]`</span><span class="p">);</span>
<span class="nx">field</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="dl">"</span><span class="s2">success</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">field</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">remove</span><span class="p">(</span><span class="dl">"</span><span class="s2">error</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">onSuccess</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">フォームバリデーション成功</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// フォーム送信処理</span>
<span class="p">}</span>
<span class="nx">onError</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">フォームバリデーションエラー:</span><span class="dl">"</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">errors</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// バリデーションルール</span>
<span class="kd">const</span> <span class="nx">rules</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">required</span><span class="p">:</span> <span class="p">(</span><span class="nx">message</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">この項目は必須です</span><span class="dl">"</span><span class="p">)</span> <span class="o">=></span> <span class="p">({</span>
<span class="na">test</span><span class="p">:</span> <span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="o">=></span> <span class="p">({</span>
<span class="na">valid</span><span class="p">:</span> <span class="nx">value</span><span class="p">.</span><span class="nx">trim</span><span class="p">().</span><span class="nx">length</span> <span class="o">></span> <span class="mi">0</span><span class="p">,</span>
<span class="nx">message</span>
<span class="p">})</span>
<span class="p">}),</span>
<span class="na">email</span><span class="p">:</span> <span class="p">(</span><span class="nx">message</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">有効なメールアドレスを入力してください</span><span class="dl">"</span><span class="p">)</span> <span class="o">=></span> <span class="p">({</span>
<span class="na">test</span><span class="p">:</span> <span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="o">=></span> <span class="p">({</span>
<span class="na">valid</span><span class="p">:</span> <span class="sr">/^</span><span class="se">[^\s</span><span class="sr">@</span><span class="se">]</span><span class="sr">+@</span><span class="se">[^\s</span><span class="sr">@</span><span class="se">]</span><span class="sr">+</span><span class="se">\.[^\s</span><span class="sr">@</span><span class="se">]</span><span class="sr">+$/</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="nx">value</span><span class="p">),</span>
<span class="nx">message</span>
<span class="p">})</span>
<span class="p">}),</span>
<span class="na">minLength</span><span class="p">:</span> <span class="p">(</span><span class="nx">min</span><span class="p">,</span> <span class="nx">message</span><span class="p">)</span> <span class="o">=></span> <span class="p">({</span>
<span class="na">test</span><span class="p">:</span> <span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="o">=></span> <span class="p">({</span>
<span class="na">valid</span><span class="p">:</span> <span class="nx">value</span><span class="p">.</span><span class="nx">length</span> <span class="o">>=</span> <span class="nx">min</span><span class="p">,</span>
<span class="na">message</span><span class="p">:</span> <span class="nx">message</span> <span class="o">||</span> <span class="s2">`</span><span class="p">${</span><span class="nx">min</span><span class="p">}</span><span class="s2">文字以上で入力してください`</span>
<span class="p">})</span>
<span class="p">}),</span>
<span class="na">phone</span><span class="p">:</span> <span class="p">(</span><span class="nx">message</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">有効な電話番号を入力してください</span><span class="dl">"</span><span class="p">)</span> <span class="o">=></span> <span class="p">({</span>
<span class="na">test</span><span class="p">:</span> <span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="o">=></span> <span class="p">({</span>
<span class="na">valid</span><span class="p">:</span> <span class="sr">/^</span><span class="se">[\d</span><span class="sr">-</span><span class="se">]</span><span class="sr">+$/</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="nx">value</span><span class="p">),</span>
<span class="nx">message</span>
<span class="p">})</span>
<span class="p">})</span>
<span class="p">};</span>
<span class="c1">// 使用例</span>
<span class="kd">const</span> <span class="nx">form</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#contactForm</span><span class="dl">"</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">validator</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">FormValidator</span><span class="p">(</span><span class="nx">form</span><span class="p">);</span>
<span class="nx">validator</span>
<span class="p">.</span><span class="nx">addRule</span><span class="p">(</span><span class="dl">"</span><span class="s2">name</span><span class="dl">"</span><span class="p">,</span> <span class="nx">rules</span><span class="p">.</span><span class="nx">required</span><span class="p">())</span>
<span class="p">.</span><span class="nx">addRule</span><span class="p">(</span><span class="dl">"</span><span class="s2">email</span><span class="dl">"</span><span class="p">,</span> <span class="nx">rules</span><span class="p">.</span><span class="nx">required</span><span class="p">())</span>
<span class="p">.</span><span class="nx">addRule</span><span class="p">(</span><span class="dl">"</span><span class="s2">email</span><span class="dl">"</span><span class="p">,</span> <span class="nx">rules</span><span class="p">.</span><span class="nx">email</span><span class="p">())</span>
<span class="p">.</span><span class="nx">addRule</span><span class="p">(</span><span class="dl">"</span><span class="s2">phone</span><span class="dl">"</span><span class="p">,</span> <span class="nx">rules</span><span class="p">.</span><span class="nx">phone</span><span class="p">())</span>
<span class="p">.</span><span class="nx">addRule</span><span class="p">(</span><span class="dl">"</span><span class="s2">message</span><span class="dl">"</span><span class="p">,</span> <span class="nx">rules</span><span class="p">.</span><span class="nx">required</span><span class="p">())</span>
<span class="p">.</span><span class="nx">addRule</span><span class="p">(</span><span class="dl">"</span><span class="s2">message</span><span class="dl">"</span><span class="p">,</span> <span class="nx">rules</span><span class="p">.</span><span class="nx">minLength</span><span class="p">(</span><span class="mi">10</span><span class="p">));</span>
</code></pre></div></div>
<h3 id="シンプルなspasingle-page-application">シンプルなSPA(Single Page Application)</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">class</span> <span class="nx">SimpleRouter</span> <span class="p">{</span>
<span class="kd">constructor</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">routes</span> <span class="o">=</span> <span class="p">{};</span>
<span class="k">this</span><span class="p">.</span><span class="nx">currentRoute</span> <span class="o">=</span> <span class="dl">""</span><span class="p">;</span>
<span class="c1">// ブラウザの戻る/進むボタン対応</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">popstate</span><span class="dl">"</span><span class="p">,</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">handleRoute</span><span class="p">();</span>
<span class="p">});</span>
<span class="c1">// リンククリック時の処理</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">matches</span><span class="p">(</span><span class="dl">"</span><span class="s2">[data-route]</span><span class="dl">"</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
<span class="kd">const</span> <span class="nx">route</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">getAttribute</span><span class="p">(</span><span class="dl">"</span><span class="s2">data-route</span><span class="dl">"</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">navigate</span><span class="p">(</span><span class="nx">route</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="c1">// 初期ルート処理</span>
<span class="k">this</span><span class="p">.</span><span class="nx">handleRoute</span><span class="p">();</span>
<span class="p">}</span>
<span class="nx">addRoute</span><span class="p">(</span><span class="nx">path</span><span class="p">,</span> <span class="nx">handler</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">routes</span><span class="p">[</span><span class="nx">path</span><span class="p">]</span> <span class="o">=</span> <span class="nx">handler</span><span class="p">;</span>
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">navigate</span><span class="p">(</span><span class="nx">path</span><span class="p">)</span> <span class="p">{</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">history</span><span class="p">.</span><span class="nx">pushState</span><span class="p">({},</span> <span class="dl">""</span><span class="p">,</span> <span class="nx">path</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">handleRoute</span><span class="p">();</span>
<span class="p">}</span>
<span class="nx">handleRoute</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">path</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">pathname</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">currentRoute</span> <span class="o">=</span> <span class="nx">path</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">handler</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">routes</span><span class="p">[</span><span class="nx">path</span><span class="p">]</span> <span class="o">||</span> <span class="k">this</span><span class="p">.</span><span class="nx">routes</span><span class="p">[</span><span class="dl">"</span><span class="s2">*</span><span class="dl">"</span><span class="p">];</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">handler</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">handler</span><span class="p">();</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">show404</span><span class="p">();</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nx">show404</span><span class="p">()</span> <span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#app</span><span class="dl">"</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="s2">`
<h1>404 - ページが見つかりません</h1>
<p><a href="/" data-route="/">ホームに戻る</a></p>
`</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// ページコンポーネント</span>
<span class="kd">const</span> <span class="nx">pages</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">home</span><span class="p">:</span> <span class="p">()</span> <span class="o">=></span> <span class="s2">`
<h1>ホームページ</h1>
<nav>
<a href="/about" data-route="/about">会社概要</a> |
<a href="/contact" data-route="/contact">お問い合わせ</a>
</nav>
<p>ようこそ、私たちのサイトへ!</p>
`</span><span class="p">,</span>
<span class="na">about</span><span class="p">:</span> <span class="p">()</span> <span class="o">=></span> <span class="s2">`
<h1>会社概要</h1>
<nav>
<a href="/" data-route="/">ホーム</a> |
<a href="/contact" data-route="/contact">お問い合わせ</a>
</nav>
<p>私たちは革新的なソリューションを提供する会社です。</p>
`</span><span class="p">,</span>
<span class="na">contact</span><span class="p">:</span> <span class="p">()</span> <span class="o">=></span> <span class="s2">`
<h1>お問い合わせ</h1>
<nav>
<a href="/" data-route="/">ホーム</a> |
<a href="/about" data-route="/about">会社概要</a>
</nav>
<form id="contactForm">
<div>
<label>お名前: <input type="text" name="name" required></label>
</div>
<div>
<label>メール: <input type="email" name="email" required></label>
</div>
<div>
<label>メッセージ: <textarea name="message" required></textarea></label>
</div>
<button type="submit">送信</button>
</form>
`</span>
<span class="p">};</span>
<span class="c1">// ルーター初期化</span>
<span class="kd">const</span> <span class="nx">router</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">SimpleRouter</span><span class="p">();</span>
<span class="nx">router</span>
<span class="p">.</span><span class="nx">addRoute</span><span class="p">(</span><span class="dl">"</span><span class="s2">/</span><span class="dl">"</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#app</span><span class="dl">"</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">pages</span><span class="p">.</span><span class="nx">home</span><span class="p">();</span>
<span class="p">})</span>
<span class="p">.</span><span class="nx">addRoute</span><span class="p">(</span><span class="dl">"</span><span class="s2">/about</span><span class="dl">"</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#app</span><span class="dl">"</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">pages</span><span class="p">.</span><span class="nx">about</span><span class="p">();</span>
<span class="p">})</span>
<span class="p">.</span><span class="nx">addRoute</span><span class="p">(</span><span class="dl">"</span><span class="s2">/contact</span><span class="dl">"</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#app</span><span class="dl">"</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">pages</span><span class="p">.</span><span class="nx">contact</span><span class="p">();</span>
<span class="c1">// お問い合わせフォームのイベント設定</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#contactForm</span><span class="dl">"</span><span class="p">).</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">submit</span><span class="dl">"</span><span class="p">,</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
<span class="nx">alert</span><span class="p">(</span><span class="dl">"</span><span class="s2">お問い合わせありがとうございます!</span><span class="dl">"</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">});</span>
</code></pre></div></div>
<h2 id="デバッグとテスト">デバッグとテスト</h2>
<h3 id="デバッグ技法">デバッグ技法</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// コンソール出力</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">基本的なログ</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">info</span><span class="p">(</span><span class="dl">"</span><span class="s2">情報メッセージ</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">warn</span><span class="p">(</span><span class="dl">"</span><span class="s2">警告メッセージ</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラーメッセージ</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// オブジェクトの詳細表示</span>
<span class="kd">const</span> <span class="nx">user</span> <span class="o">=</span> <span class="p">{</span> <span class="na">name</span><span class="p">:</span> <span class="dl">"</span><span class="s2">太郎</span><span class="dl">"</span><span class="p">,</span> <span class="na">age</span><span class="p">:</span> <span class="mi">30</span> <span class="p">};</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">table</span><span class="p">(</span><span class="nx">user</span><span class="p">);</span> <span class="c1">// テーブル形式で表示</span>
<span class="c1">// 実行時間の測定</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">time</span><span class="p">(</span><span class="dl">"</span><span class="s2">処理時間</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// 時間のかかる処理</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o"><</span> <span class="mi">1000000</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="c1">// 何らかの処理</span>
<span class="p">}</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">timeEnd</span><span class="p">(</span><span class="dl">"</span><span class="s2">処理時間</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// グループ化</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">group</span><span class="p">(</span><span class="dl">"</span><span class="s2">ユーザー情報</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">名前:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">user</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">年齢:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">user</span><span class="p">.</span><span class="nx">age</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">groupEnd</span><span class="p">();</span>
<span class="c1">// 条件付きログ</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">assert</span><span class="p">(</span><span class="nx">user</span><span class="p">.</span><span class="nx">age</span> <span class="o">>=</span> <span class="mi">18</span><span class="p">,</span> <span class="dl">"</span><span class="s2">ユーザーは18歳以上である必要があります</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// スタックトレース</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">trace</span><span class="p">(</span><span class="dl">"</span><span class="s2">スタックトレースを表示</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// ブレークポイント</span>
<span class="kd">function</span> <span class="nx">debugFunction</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">x</span> <span class="o">=</span> <span class="mi">10</span><span class="p">;</span>
<span class="k">debugger</span><span class="p">;</span> <span class="c1">// ブラウザの開発者ツールでここで停止</span>
<span class="nx">x</span> <span class="o">*=</span> <span class="mi">2</span><span class="p">;</span>
<span class="k">return</span> <span class="nx">x</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// エラーの詳細表示</span>
<span class="k">try</span> <span class="p">{</span>
<span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="dl">"</span><span class="s2">テストエラー</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラー名:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラーメッセージ:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">スタックトレース:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">.</span><span class="nx">stack</span><span class="p">);</span>
<span class="p">}</span>
</code></pre></div></div>
<h3 id="簡単なテストフレームワーク">簡単なテストフレームワーク</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 簡単なテストフレームワーク</span>
<span class="kd">class</span> <span class="nx">SimpleTest</span> <span class="p">{</span>
<span class="kd">constructor</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">tests</span> <span class="o">=</span> <span class="p">[];</span>
<span class="k">this</span><span class="p">.</span><span class="nx">passed</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">failed</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">test</span><span class="p">(</span><span class="nx">description</span><span class="p">,</span> <span class="nx">testFunction</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">tests</span><span class="p">.</span><span class="nx">push</span><span class="p">({</span> <span class="nx">description</span><span class="p">,</span> <span class="nx">testFunction</span> <span class="p">});</span>
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">assertEqual</span><span class="p">(</span><span class="nx">actual</span><span class="p">,</span> <span class="nx">expected</span><span class="p">,</span> <span class="nx">message</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">actual</span> <span class="o">===</span> <span class="nx">expected</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`✅ </span><span class="p">${</span><span class="nx">message</span> <span class="o">||</span> <span class="dl">'</span><span class="s1">Test passed</span><span class="dl">'</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">passed</span><span class="o">++</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`❌ </span><span class="p">${</span><span class="nx">message</span> <span class="o">||</span> <span class="dl">'</span><span class="s1">Test failed</span><span class="dl">'</span><span class="p">}</span><span class="s2">: expected </span><span class="p">${</span><span class="nx">expected</span><span class="p">}</span><span class="s2">, got </span><span class="p">${</span><span class="nx">actual</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">failed</span><span class="o">++</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nx">assertTrue</span><span class="p">(</span><span class="nx">value</span><span class="p">,</span> <span class="nx">message</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">assertEqual</span><span class="p">(</span><span class="nx">value</span><span class="p">,</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">message</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">assertFalse</span><span class="p">(</span><span class="nx">value</span><span class="p">,</span> <span class="nx">message</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">assertEqual</span><span class="p">(</span><span class="nx">value</span><span class="p">,</span> <span class="kc">false</span><span class="p">,</span> <span class="nx">message</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">run</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">🚀 テスト開始</span><span class="dl">"</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">tests</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(({</span> <span class="nx">description</span><span class="p">,</span> <span class="nx">testFunction</span> <span class="p">})</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`\n📝 </span><span class="p">${</span><span class="nx">description</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="k">try</span> <span class="p">{</span>
<span class="nx">testFunction</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`❌ エラー: </span><span class="p">${</span><span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">failed</span><span class="o">++</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`\n📊 結果: </span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">passed</span><span class="p">}</span><span class="s2"> passed, </span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">failed</span><span class="p">}</span><span class="s2"> failed`</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// テスト例</span>
<span class="kd">function</span> <span class="nx">add</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">a</span> <span class="o">+</span> <span class="nx">b</span><span class="p">;</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">multiply</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">a</span> <span class="o">*</span> <span class="nx">b</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// テストの実行</span>
<span class="kd">const</span> <span class="nx">test</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">SimpleTest</span><span class="p">();</span>
<span class="nx">test</span>
<span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="dl">"</span><span class="s2">add関数のテスト</span><span class="dl">"</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">assertEqual</span><span class="p">(</span><span class="nx">add</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">),</span> <span class="mi">5</span><span class="p">,</span> <span class="dl">"</span><span class="s2">2 + 3 = 5</span><span class="dl">"</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">assertEqual</span><span class="p">(</span><span class="nx">add</span><span class="p">(</span><span class="o">-</span><span class="mi">1</span><span class="p">,</span> <span class="mi">1</span><span class="p">),</span> <span class="mi">0</span><span class="p">,</span> <span class="dl">"</span><span class="s2">-1 + 1 = 0</span><span class="dl">"</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">assertEqual</span><span class="p">(</span><span class="nx">add</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">),</span> <span class="mi">0</span><span class="p">,</span> <span class="dl">"</span><span class="s2">0 + 0 = 0</span><span class="dl">"</span><span class="p">);</span>
<span class="p">})</span>
<span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="dl">"</span><span class="s2">multiply関数のテスト</span><span class="dl">"</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">assertEqual</span><span class="p">(</span><span class="nx">multiply</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">),</span> <span class="mi">6</span><span class="p">,</span> <span class="dl">"</span><span class="s2">2 * 3 = 6</span><span class="dl">"</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">assertEqual</span><span class="p">(</span><span class="nx">multiply</span><span class="p">(</span><span class="o">-</span><span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">),</span> <span class="o">-</span><span class="mi">6</span><span class="p">,</span> <span class="dl">"</span><span class="s2">-2 * 3 = -6</span><span class="dl">"</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">assertEqual</span><span class="p">(</span><span class="nx">multiply</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">5</span><span class="p">),</span> <span class="mi">0</span><span class="p">,</span> <span class="dl">"</span><span class="s2">0 * 5 = 0</span><span class="dl">"</span><span class="p">);</span>
<span class="p">})</span>
<span class="p">.</span><span class="nx">run</span><span class="p">();</span>
</code></pre></div></div>
<h2 id="パフォーマンス最適化">パフォーマンス最適化</h2>
<h3 id="パフォーマンス測定と最適化">パフォーマンス測定と最適化</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// パフォーマンス測定</span>
<span class="kd">function</span> <span class="nx">measurePerformance</span><span class="p">(</span><span class="nx">fn</span><span class="p">,</span> <span class="nx">label</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">start</span> <span class="o">=</span> <span class="nx">performance</span><span class="p">.</span><span class="nx">now</span><span class="p">();</span>
<span class="nx">fn</span><span class="p">();</span>
<span class="kd">const</span> <span class="nx">end</span> <span class="o">=</span> <span class="nx">performance</span><span class="p">.</span><span class="nx">now</span><span class="p">();</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`</span><span class="p">${</span><span class="nx">label</span><span class="p">}</span><span class="s2">: </span><span class="p">${</span><span class="nx">end</span> <span class="o">-</span> <span class="nx">start</span><span class="p">}</span><span class="s2">ms`</span><span class="p">);</span>
<span class="p">}</span>
<span class="c1">// 配列処理の最適化例</span>
<span class="kd">const</span> <span class="nx">largeArray</span> <span class="o">=</span> <span class="nb">Array</span><span class="p">.</span><span class="k">from</span><span class="p">({</span> <span class="na">length</span><span class="p">:</span> <span class="mi">100000</span> <span class="p">},</span> <span class="p">(</span><span class="nx">_</span><span class="p">,</span> <span class="nx">i</span><span class="p">)</span> <span class="o">=></span> <span class="nx">i</span><span class="p">);</span>
<span class="c1">// 非効率な方法</span>
<span class="nx">measurePerformance</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">result</span> <span class="o">=</span> <span class="p">[];</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o"><</span> <span class="nx">largeArray</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">largeArray</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">%</span> <span class="mi">2</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">result</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">largeArray</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">*</span> <span class="mi">2</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">},</span> <span class="dl">"</span><span class="s2">forループ</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// 効率的な方法</span>
<span class="nx">measurePerformance</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">largeArray</span>
<span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="nx">x</span> <span class="o">=></span> <span class="nx">x</span> <span class="o">%</span> <span class="mi">2</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span>
<span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">x</span> <span class="o">=></span> <span class="nx">x</span> <span class="o">*</span> <span class="mi">2</span><span class="p">);</span>
<span class="p">},</span> <span class="dl">"</span><span class="s2">filter + map</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// より効率的な方法(1回のループ)</span>
<span class="nx">measurePerformance</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">largeArray</span><span class="p">.</span><span class="nx">reduce</span><span class="p">((</span><span class="nx">acc</span><span class="p">,</span> <span class="nx">x</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">x</span> <span class="o">%</span> <span class="mi">2</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">acc</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">x</span> <span class="o">*</span> <span class="mi">2</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">acc</span><span class="p">;</span>
<span class="p">},</span> <span class="p">[]);</span>
<span class="p">},</span> <span class="dl">"</span><span class="s2">reduce</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// イベントリスナーの最適化(デバウンス)</span>
<span class="kd">function</span> <span class="nx">debounce</span><span class="p">(</span><span class="nx">func</span><span class="p">,</span> <span class="nx">wait</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">timeout</span><span class="p">;</span>
<span class="k">return</span> <span class="kd">function</span> <span class="nx">executedFunction</span><span class="p">(...</span><span class="nx">args</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">later</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">clearTimeout</span><span class="p">(</span><span class="nx">timeout</span><span class="p">);</span>
<span class="nx">func</span><span class="p">(...</span><span class="nx">args</span><span class="p">);</span>
<span class="p">};</span>
<span class="nx">clearTimeout</span><span class="p">(</span><span class="nx">timeout</span><span class="p">);</span>
<span class="nx">timeout</span> <span class="o">=</span> <span class="nx">setTimeout</span><span class="p">(</span><span class="nx">later</span><span class="p">,</span> <span class="nx">wait</span><span class="p">);</span>
<span class="p">};</span>
<span class="p">}</span>
<span class="c1">// スクロールイベントの最適化</span>
<span class="kd">const</span> <span class="nx">handleScroll</span> <span class="o">=</span> <span class="nx">debounce</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">スクロール処理</span><span class="dl">"</span><span class="p">);</span>
<span class="p">},</span> <span class="mi">100</span><span class="p">);</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">scroll</span><span class="dl">"</span><span class="p">,</span> <span class="nx">handleScroll</span><span class="p">);</span>
<span class="c1">// スロットル(一定間隔で実行)</span>
<span class="kd">function</span> <span class="nx">throttle</span><span class="p">(</span><span class="nx">func</span><span class="p">,</span> <span class="nx">limit</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">lastFunc</span><span class="p">;</span>
<span class="kd">let</span> <span class="nx">lastRan</span><span class="p">;</span>
<span class="k">return</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">context</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">args</span> <span class="o">=</span> <span class="nx">arguments</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">lastRan</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">func</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="nx">context</span><span class="p">,</span> <span class="nx">args</span><span class="p">);</span>
<span class="nx">lastRan</span> <span class="o">=</span> <span class="nb">Date</span><span class="p">.</span><span class="nx">now</span><span class="p">();</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">clearTimeout</span><span class="p">(</span><span class="nx">lastFunc</span><span class="p">);</span>
<span class="nx">lastFunc</span> <span class="o">=</span> <span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">((</span><span class="nb">Date</span><span class="p">.</span><span class="nx">now</span><span class="p">()</span> <span class="o">-</span> <span class="nx">lastRan</span><span class="p">)</span> <span class="o">>=</span> <span class="nx">limit</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">func</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="nx">context</span><span class="p">,</span> <span class="nx">args</span><span class="p">);</span>
<span class="nx">lastRan</span> <span class="o">=</span> <span class="nb">Date</span><span class="p">.</span><span class="nx">now</span><span class="p">();</span>
<span class="p">}</span>
<span class="p">},</span> <span class="nx">limit</span> <span class="o">-</span> <span class="p">(</span><span class="nb">Date</span><span class="p">.</span><span class="nx">now</span><span class="p">()</span> <span class="o">-</span> <span class="nx">lastRan</span><span class="p">));</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// メモ化(結果をキャッシュ)</span>
<span class="kd">function</span> <span class="nx">memoize</span><span class="p">(</span><span class="nx">fn</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">cache</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Map</span><span class="p">();</span>
<span class="k">return</span> <span class="kd">function</span><span class="p">(...</span><span class="nx">args</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">key</span> <span class="o">=</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">args</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">cache</span><span class="p">.</span><span class="nx">has</span><span class="p">(</span><span class="nx">key</span><span class="p">))</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">cache</span><span class="p">.</span><span class="kd">get</span><span class="p">(</span><span class="nx">key</span><span class="p">);</span>
<span class="p">}</span>
<span class="kd">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">fn</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="nx">args</span><span class="p">);</span>
<span class="nx">cache</span><span class="p">.</span><span class="kd">set</span><span class="p">(</span><span class="nx">key</span><span class="p">,</span> <span class="nx">result</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">result</span><span class="p">;</span>
<span class="p">};</span>
<span class="p">}</span>
<span class="c1">// フィボナッチ数列の最適化例</span>
<span class="kd">const</span> <span class="nx">fibonacci</span> <span class="o">=</span> <span class="nx">memoize</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">n</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">n</span> <span class="o"><</span> <span class="mi">2</span><span class="p">)</span> <span class="k">return</span> <span class="nx">n</span><span class="p">;</span>
<span class="k">return</span> <span class="nx">fibonacci</span><span class="p">(</span><span class="nx">n</span> <span class="o">-</span> <span class="mi">1</span><span class="p">)</span> <span class="o">+</span> <span class="nx">fibonacci</span><span class="p">(</span><span class="nx">n</span> <span class="o">-</span> <span class="mi">2</span><span class="p">);</span>
<span class="p">});</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">fibonacci</span><span class="p">(</span><span class="mi">40</span><span class="p">));</span> <span class="c1">// 大幅に高速化される</span>
</code></pre></div></div>
<h2 id="参考資料">参考資料</h2>
<h3 id="公式ドキュメント">公式ドキュメント</h3>
<ul>
<li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript">MDN Web Docs - JavaScript</a>: Mozilla開発者向けリソース</li>
<li><a href="https://tc39.es/ecma262/">ECMAScript Language Specification</a>: JavaScript仕様書</li>
<li><a href="https://nodejs.org/docs/">Node.js Documentation</a>: サーバーサイドJavaScript</li>
</ul>
<h3 id="学習リソース">学習リソース</h3>
<ul>
<li><a href="https://javascript.info/">JavaScript.info</a>: 現代的なJavaScript学習サイト</li>
<li><a href="https://eloquentjavascript.net/">Eloquent JavaScript</a>: 無料のJavaScript書籍</li>
<li><a href="https://github.com/getify/You-Dont-Know-JS">You Don’t Know JS</a>: 深いJavaScript理解</li>
</ul>
<h3 id="ツールとライブラリ">ツールとライブラリ</h3>
<ul>
<li><a href="https://eslint.org/">ESLint</a>: JavaScriptリンター</li>
<li><a href="https://prettier.io/">Prettier</a>: コードフォーマッター</li>
<li><a href="https://babeljs.io/">Babel</a>: JavaScript変換ツール</li>
<li><a href="https://webpack.js.org/">Webpack</a>: モジュールバンドラー</li>
</ul>
<h3 id="フレームワークライブラリ">フレームワーク・ライブラリ</h3>
<ul>
<li><a href="https://reactjs.org/">React</a>: ユーザーインターフェースライブラリ</li>
<li><a href="https://vuejs.org/">Vue.js</a>: プログレッシブフレームワーク</li>
<li><a href="https://angular.io/">Angular</a>: フルフィーチャーフレームワーク</li>
<li><a href="https://expressjs.com/">Express.js</a>: Node.jsウェブフレームワーク</li>
</ul>
</div></div>
</div>
</article>
<!-- Enhanced Table of Contents JavaScript --><script>
document.addEventListener('DOMContentLoaded', function() {
// Generate enhanced Table of Contents
const headings = document.querySelectorAll('.page-main-content h2, .page-main-content h3, .page-main-content h4');
const tocContainer = document.getElementById('page-toc-content');
if (headings.length > 0 && tocContainer) {
const tocList = document.createElement('ul');
tocList.style.cssText = 'list-style: none; padding-left: 0; margin: 0; line-height: 1.6;';
headings.forEach(function(heading, index) {
// Add ID to heading if it doesn't have one
if (!heading.id) {
heading.id = 'page-heading-' + index;
}
const listItem = document.createElement('li');
const link = document.createElement('a');
link.href = '#' + heading.id;
link.textContent = heading.textContent;
link.style.cssText = 'text-decoration: none; color: #007bff; transition: color 0.2s;';
// Add hover effect
link.addEventListener('mouseenter', function() {
this.style.color = '#0056b3';
});
link.addEventListener('mouseleave', function() {
this.style.color = '#007bff';
});
// Style based on heading level
if (heading.tagName === 'H2') {
listItem.style.cssText = 'margin-bottom: 8px; font-weight: 600;';
link.textContent = '📄 ' + heading.textContent;
} else if (heading.tagName === 'H3') {
listItem.style.cssText = 'margin-bottom: 5px; margin-left: 25px; font-size: 0.95em;';
link.textContent = '▶ ' + heading.textContent;
} else if (heading.tagName === 'H4') {
listItem.style.cssText = 'margin-bottom: 3px; margin-left: 50px; font-size: 0.9em;';
link.textContent = '• ' + heading.textContent;
}
listItem.appendChild(link);
tocList.appendChild(listItem);
});
tocContainer.appendChild(tocList);
} else if (tocContainer) {
// Hide TOC container if no headings found
tocContainer.parentNode.style.display = 'none';
}
});
</script><!-- Additional styling for page layout with sidebar TOC -->
<style>
/* Override minima theme wrapper width restriction for large screens */
@media (min-width: 1441px) {
.wrapper {
max-width: none;
}
}
.page-article {
margin: 0 auto;
}
/* Apply max-width only on smaller screens to maintain readability */
@media (max-width: 1440px) {
.page-article {
max-width: 2000px;
}
}
.page-content-wrapper {
display: flex;
gap: 20px;
position: relative;
}
.page-toc-sidebar {
width: 280px;
position: sticky;
top: 20px;
height: calc(100vh - 40px);
max-height: calc(100vh - 40px);
overflow-y: auto;
order: 2;
flex-shrink: 0;
}
.page-content {
flex: 1;
min-width: 0;
order: 1;
}
/* Responsive behavior */
@media (max-width: 1024px) {
.page-content-wrapper {
flex-direction: column;
}
.page-toc-sidebar {
width: 100%;
position: static;
order: 1;
margin-bottom: 20px;
height: auto;
max-height: none;
overflow-y: visible;
}
.page-content {
order: 2;
}
}
@media (max-width: 768px) {
.page-toc-sidebar {
display: none;
}
}
.page-title {
border-bottom: 3px solid #007bff;
padding-bottom: 10px;
color: #212529;
}
.page-main-content h2 {
color: #007bff;
border-bottom: 2px solid #e9ecef;
padding-bottom: 8px;
margin-top: 40px;
}
.page-main-content h3 {
color: #495057;
margin-top: 30px;
}
.page-main-content code {
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 3px;
padding: 2px 4px;
font-size: 0.9em;
}
.page-main-content pre {
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 5px;
padding: 15px;
overflow-x: auto;
}
.page-main-content blockquote {
border-left: 4px solid #007bff;
background: #f8f9fa;
margin: 20px 0;
padding: 15px 20px;
font-style: italic;
}
.page-main-content table {
border-collapse: collapse;
width: 100%;
margin: 20px 0;
}
.page-main-content th,
.page-main-content td {
border: 1px solid #dee2e6;
padding: 12px;
text-align: left;
}
.page-main-content th {
background: #f8f9fa;
font-weight: 600;
}
</style>
条件分岐
<p></p>
ループ処理
フィルター
JEKYLL リファレンス
JavaScript リファレンス 📖 目次 JavaScript リファレンス JavaScriptの基本的な使い方から応用まで、Webページに動的な機能を追加するために必要な知識を体系的に説明します。モダンなJavaScript(ES6+)の機能も含めて解説します。 JavaScript リファレンス 基本概念 JavaScript とは JavaScript の役割 基本構文 変数とデータ型 文字列操作 配列 オブジェクト 関数 関数の定義 スコープとクロージャ DOM操作 要素の取得 要素の操作 要素の作成と追加 イベント処理 イベントリスナーの追加 よく使用するイベント イベント委譲...
コレクションの活用
_config.yml でコレクションを定義
collections:
tutorials:
output: true
permalink: /:collection/:name/
team:
output: false
コレクションファイルの作成
_tutorials/
├── basic-setup.md
├── advanced-config.md
└── deployment.md
コレクションの表示
プラグインの活用
GitHub Pages でサポートされているプラグイン
GitHub Pages では、セキュリティ上の理由から使用できるプラグインが制限されています。以下は公式にサポートされているプラグインの完全なリストです。
1. jekyll-coffeescript
概要: CoffeeScriptファイルをJavaScriptに変換します。
設定方法:
# _config.yml
plugins:
- jekyll-coffeescript
使用方法:
# assets/js/script.coffee
square = (x) -> x * x
console.log square(5)
2. jekyll-default-layout
概要: フロントマターでレイアウトが指定されていないページに自動的にデフォルトレイアウトを適用します。
設定方法:
# _config.yml
plugins:
- jekyll-default-layout
jekyll-default-layout:
path: "_layouts/default.html"
使用方法: ファイルにフロントマターがない場合でも、自動的にデフォルトレイアウトが適用されます。
3. jekyll-gist
概要: GitHub Gistを埋め込むための{% gist %}
タグを提供します。
設定方法:
# _config.yml
plugins:
- jekyll-gist
gist:
noscript: false
使用方法:
{% gist gist_id %}
{% gist gist_id filename %}
4. jekyll-github-metadata
概要: GitHubリポジトリのメタデータにアクセスできるようにします。
設定方法:
# _config.yml
plugins:
- jekyll-github-metadata
repository: username/repository-name
使用方法:
{{ site.github.repository_name }}
{{ site.github.owner_name }}
{{ site.github.repository_url }}
5. jekyll-paginate
概要: ポストの一覧をページ分割する機能を提供します。
設定方法:
# _config.yml
plugins:
- jekyll-paginate
paginate: 5
paginate_path: "/blog/page:num/"
使用方法:
<!-- index.html -->
{% for post in paginator.posts %}
<h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
{% endfor %}
<!-- ページネーション -->
{% if paginator.total_pages > 1 %}
{% if paginator.previous_page %}
<a href="{{ paginator.previous_page_path }}">前のページ</a>
{% endif %}
{% if paginator.next_page %}
<a href="{{ paginator.next_page_path }}">次のページ</a>
{% endif %}
{% endif %}
6. jekyll-relative-links
概要: Markdownファイル内の相対リンクを自動的に適切なURLに変換します。
設定方法:
# _config.yml
plugins:
- jekyll-relative-links
relative_links:
enabled: true
collections: false
使用方法:
[リンクテキスト](other-page.md)
[フォルダ内のページ](folder/page.md)
7. jekyll-optional-front-matter
概要: Markdownファイルにフロントマターがなくても処理できるようにします。
設定方法:
# _config.yml
plugins:
- jekyll-optional-front-matter
optional_front_matter:
remove_originals: true
8. jekyll-readme-index
概要: README.mdファイルをディレクトリのindex.htmlとして使用できるようにします。
設定方法:
# _config.yml
plugins:
- jekyll-readme-index
readme_index:
enabled: true
remove_originals: false
9. jekyll-titles-from-headings
概要: Markdownファイルの最初の見出しをページタイトルとして自動的に使用します。
設定方法:
# _config.yml
plugins:
- jekyll-titles-from-headings
titles_from_headings:
enabled: true
strip_title: true
collections: false
10. jekyll-feed
概要: サイトのポスト用のAtom(RSS)フィードを自動生成します。
設定方法:
# _config.yml
plugins:
- jekyll-feed
feed:
path: atom.xml
excerpt_only: false
使用方法:
<!-- _layouts/default.html の head セクション -->
{% feed_meta %}
11. jekyll-redirect-from
概要: 古いURLから新しいURLへのリダイレクトを設定できます。
設定方法:
# _config.yml
plugins:
- jekyll-redirect-from
使用方法:
---
title: 新しいページ
redirect_from:
- /old-page/
- /another-old-page.html
---
12. jekyll-seo-tag
概要: SEO用のメタタグを自動生成します。
設定方法:
# _config.yml
plugins:
- jekyll-seo-tag
twitter:
username: your_twitter_username
card: summary
social:
name: Your Name
links:
- https://twitter.com/your_twitter_username
- https://github.com/your_github_username
使用方法:
<!-- _layouts/default.html の head セクション -->
{% seo %}
13. jekyll-sitemap
概要: サイト全体のサイトマップ(sitemap.xml)を自動生成します。
設定方法:
# _config.yml
plugins:
- jekyll-sitemap
sitemap:
exclude:
- "/secret-page/"
- "/temp/"
使用方法:
自動的に /sitemap.xml
が生成されます。設定は不要です。
14. jekyll-avatar
概要: GitHubユーザーのアバター画像を表示するための{% avatar %}
タグを提供します。
設定方法:
# _config.yml
plugins:
- jekyll-avatar
使用方法:
{% avatar username %}
{% avatar username size=40 %}
15. jekyll-mentions
概要: GitHub風の@mentionを処理し、GitHub プロフィールページへのリンクに変換します。
設定方法:
# _config.yml
plugins:
- jekyll-mentions
jekyll-mentions:
base_url: https://github.com
使用方法:
@username についてのメンション
16. jekyll-include-cache
概要: includeファイルのキャッシュ機能を提供し、ビルド時間を短縮します。
設定方法:
# _config.yml
plugins:
- jekyll-include-cache
使用方法:
{% include_cached header.html %}
{% include_cached sidebar.html param="value" %}
17. jekyll-theme-primer
概要: GitHub Primer CSSフレームワークを使用するテーマです。
設定方法:
# _config.yml
theme: jekyll-theme-primer
plugins:
- jekyll-theme-primer
プラグインの組み合わせ例
完全なSEO最適化構成
# _config.yml
plugins:
- jekyll-seo-tag
- jekyll-sitemap
- jekyll-feed
- jekyll-redirect-from
# SEO設定
title: "サイトタイトル"
description: "サイトの説明"
url: "https://username.github.io"
author: "著者名"
# ソーシャルメディア設定
twitter:
username: your_twitter_username
card: summary_large_image
social:
name: Your Name
links:
- https://twitter.com/your_twitter_username
- https://github.com/your_github_username
ブログサイト向け構成
# _config.yml
plugins:
- jekyll-paginate
- jekyll-feed
- jekyll-seo-tag
- jekyll-sitemap
- jekyll-mentions
- jekyll-gist
# ページネーション設定
paginate: 5
paginate_path: "/page:num/"
# フィード設定
feed:
path: atom.xml
excerpt_only: true
ドキュメントサイト向け構成
# _config.yml
plugins:
- jekyll-default-layout
- jekyll-optional-front-matter
- jekyll-readme-index
- jekyll-titles-from-headings
- jekyll-relative-links
- jekyll-sitemap
- jekyll-seo-tag
# デフォルトレイアウト設定
jekyll-default-layout:
path: "_layouts/page.html"
# 見出しからタイトル生成
titles_from_headings:
enabled: true
strip_title: true
collections: true
プラグイン使用時の注意点
1. GitHub Pages制限事項
- 上記のプラグインのみが使用可能
- カスタムプラグインは使用不可
- プラグインの設定によってはビルドが失敗する場合がある
2. パフォーマンス考慮事項
# 大量のページがある場合のキャッシュ活用
plugins:
- jekyll-include-cache
# サイトマップから除外する不要なページ
sitemap:
exclude:
- "/assets/"
- "/404.html"
3. ローカル開発とGitHub Pagesの差異
# ローカルでGitHub Pages環境を再現
gem "github-pages", group: :jekyll_plugins
# 本番環境でのテスト
JEKYLL_ENV=production bundle exec jekyll build
カスタムプラグインの作成
_plugins/custom_filter.rb
module Jekyll
module CustomFilter
def reading_time(input)
words_per_minute = 200
words = input.split.size
minutes = (words / words_per_minute).ceil
"約#{minutes}分で読めます"
end
end
end
Liquid::Template.register_filter(Jekyll::CustomFilter)
使用例
<article class="page-article">
<header class="page-header">
<h1 class="page-title">JavaScript リファレンス</h1></header>
<div class="page-content-wrapper">
<!-- Table of Contents Sidebar --><aside class="page-toc-sidebar">
<div class="page-toc" style="background: #fff; border: 2px solid #007bff; border-radius: 8px; padding: 20px;">
<h3 style="margin-top: 0; color: #007bff; border-bottom: 1px solid #007bff; padding-bottom: 8px;">📖 目次</h3>
<div id="page-toc-content"></div>
</div>
</aside><div class="page-content">
<!-- Main content -->
<div class="page-main-content">
<h1 id="javascript-リファレンス">JavaScript リファレンス</h1>
<p>JavaScriptの基本的な使い方から応用まで、Webページに動的な機能を追加するために必要な知識を体系的に説明します。モダンなJavaScript(ES6+)の機能も含めて解説します。</p>
<ul id="markdown-toc">
<li><a href="#javascript-リファレンス" id="markdown-toc-javascript-リファレンス">JavaScript リファレンス</a> <ul>
<li><a href="#基本概念" id="markdown-toc-基本概念">基本概念</a> <ul>
<li><a href="#javascript-とは" id="markdown-toc-javascript-とは">JavaScript とは</a></li>
<li><a href="#javascript-の役割" id="markdown-toc-javascript-の役割">JavaScript の役割</a></li>
</ul>
</li>
<li><a href="#基本構文" id="markdown-toc-基本構文">基本構文</a> <ul>
<li><a href="#変数とデータ型" id="markdown-toc-変数とデータ型">変数とデータ型</a></li>
<li><a href="#文字列操作" id="markdown-toc-文字列操作">文字列操作</a></li>
<li><a href="#配列" id="markdown-toc-配列">配列</a></li>
<li><a href="#オブジェクト" id="markdown-toc-オブジェクト">オブジェクト</a></li>
</ul>
</li>
<li><a href="#関数" id="markdown-toc-関数">関数</a> <ul>
<li><a href="#関数の定義" id="markdown-toc-関数の定義">関数の定義</a></li>
<li><a href="#スコープとクロージャ" id="markdown-toc-スコープとクロージャ">スコープとクロージャ</a></li>
</ul>
</li>
<li><a href="#dom操作" id="markdown-toc-dom操作">DOM操作</a> <ul>
<li><a href="#要素の取得" id="markdown-toc-要素の取得">要素の取得</a></li>
<li><a href="#要素の操作" id="markdown-toc-要素の操作">要素の操作</a></li>
<li><a href="#要素の作成と追加" id="markdown-toc-要素の作成と追加">要素の作成と追加</a></li>
</ul>
</li>
<li><a href="#イベント処理" id="markdown-toc-イベント処理">イベント処理</a> <ul>
<li><a href="#イベントリスナーの追加" id="markdown-toc-イベントリスナーの追加">イベントリスナーの追加</a></li>
<li><a href="#よく使用するイベント" id="markdown-toc-よく使用するイベント">よく使用するイベント</a></li>
<li><a href="#イベント委譲" id="markdown-toc-イベント委譲">イベント委譲</a></li>
</ul>
</li>
<li><a href="#非同期処理" id="markdown-toc-非同期処理">非同期処理</a> <ul>
<li><a href="#promise" id="markdown-toc-promise">Promise</a></li>
<li><a href="#asyncawait" id="markdown-toc-asyncawait">async/await</a></li>
<li><a href="#fetch-api" id="markdown-toc-fetch-api">Fetch API</a></li>
</ul>
</li>
<li><a href="#モダンjavascriptes6" id="markdown-toc-モダンjavascriptes6">モダンJavaScript(ES6+)</a> <ul>
<li><a href="#分割代入" id="markdown-toc-分割代入">分割代入</a></li>
<li><a href="#モジュール" id="markdown-toc-モジュール">モジュール</a></li>
<li><a href="#クラス" id="markdown-toc-クラス">クラス</a></li>
</ul>
</li>
<li><a href="#エラーハンドリング" id="markdown-toc-エラーハンドリング">エラーハンドリング</a> <ul>
<li><a href="#try-catch文" id="markdown-toc-try-catch文">try-catch文</a></li>
</ul>
</li>
<li><a href="#ブラウザapi" id="markdown-toc-ブラウザapi">ブラウザAPI</a> <ul>
<li><a href="#local-storage" id="markdown-toc-local-storage">Local Storage</a></li>
<li><a href="#geolocation-api" id="markdown-toc-geolocation-api">Geolocation API</a></li>
<li><a href="#notification-api" id="markdown-toc-notification-api">Notification API</a></li>
</ul>
</li>
<li><a href="#実践的なコード例" id="markdown-toc-実践的なコード例">実践的なコード例</a> <ul>
<li><a href="#フォームバリデーション" id="markdown-toc-フォームバリデーション">フォームバリデーション</a></li>
<li><a href="#シンプルなspasingle-page-application" id="markdown-toc-シンプルなspasingle-page-application">シンプルなSPA(Single Page Application)</a></li>
</ul>
</li>
<li><a href="#デバッグとテスト" id="markdown-toc-デバッグとテスト">デバッグとテスト</a> <ul>
<li><a href="#デバッグ技法" id="markdown-toc-デバッグ技法">デバッグ技法</a></li>
<li><a href="#簡単なテストフレームワーク" id="markdown-toc-簡単なテストフレームワーク">簡単なテストフレームワーク</a></li>
</ul>
</li>
<li><a href="#パフォーマンス最適化" id="markdown-toc-パフォーマンス最適化">パフォーマンス最適化</a> <ul>
<li><a href="#パフォーマンス測定と最適化" id="markdown-toc-パフォーマンス測定と最適化">パフォーマンス測定と最適化</a></li>
</ul>
</li>
<li><a href="#参考資料" id="markdown-toc-参考資料">参考資料</a> <ul>
<li><a href="#公式ドキュメント" id="markdown-toc-公式ドキュメント">公式ドキュメント</a></li>
<li><a href="#学習リソース" id="markdown-toc-学習リソース">学習リソース</a></li>
<li><a href="#ツールとライブラリ" id="markdown-toc-ツールとライブラリ">ツールとライブラリ</a></li>
<li><a href="#フレームワークライブラリ" id="markdown-toc-フレームワークライブラリ">フレームワーク・ライブラリ</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<h2 id="基本概念">基本概念</h2>
<h3 id="javascript-とは">JavaScript とは</h3>
<p><strong>JavaScript</strong> は、Webページに動的な機能を追加するためのプログラミング言語です。1995年にBrendan Eichによって開発され、現在はブラウザだけでなくサーバーサイド(Node.js)でも広く使用されています。</p>
<p><strong>特徴:</strong></p>
<ul>
<li>インタープリター言語(コンパイル不要)</li>
<li>動的型付け言語</li>
<li>プロトタイプベースのオブジェクト指向</li>
<li>関数型プログラミングもサポート</li>
<li>イベント駆動プログラミング</li>
</ul>
<h3 id="javascript-の役割">JavaScript の役割</h3>
<p>JavaScriptは以下の主要な役割を担います:</p>
<ol>
<li><strong>ユーザーインタラクション</strong>: クリック、入力などのイベント処理</li>
<li><strong>DOM操作</strong>: HTMLの動的な変更</li>
<li><strong>非同期処理</strong>: サーバーとの通信(Ajax、Fetch API)</li>
<li><strong>フォーム検証</strong>: 入力データの検証</li>
<li><strong>アニメーション</strong>: 視覚的な効果の実装</li>
</ol>
<h2 id="基本構文">基本構文</h2>
<h3 id="変数とデータ型">変数とデータ型</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 変数の宣言</span>
<span class="kd">let</span> <span class="nx">name</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">田中太郎</span><span class="dl">"</span><span class="p">;</span> <span class="c1">// 文字列(String)</span>
<span class="kd">const</span> <span class="nx">age</span> <span class="o">=</span> <span class="mi">30</span><span class="p">;</span> <span class="c1">// 数値(Number)- 定数</span>
<span class="kd">var</span> <span class="nx">isStudent</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span> <span class="c1">// 真偽値(Boolean)- 非推奨</span>
<span class="c1">// 現代的な変数宣言(ES6+)</span>
<span class="kd">let</span> <span class="nx">message</span><span class="p">;</span> <span class="c1">// 宣言のみ(undefined)</span>
<span class="kd">let</span> <span class="nx">score</span> <span class="o">=</span> <span class="mi">85</span><span class="p">;</span> <span class="c1">// 宣言と初期化</span>
<span class="kd">const</span> <span class="nx">PI</span> <span class="o">=</span> <span class="mf">3.14159</span><span class="p">;</span> <span class="c1">// 定数(再代入不可)</span>
<span class="c1">// データ型の確認</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">name</span><span class="p">);</span> <span class="c1">// "string"</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">age</span><span class="p">);</span> <span class="c1">// "number"</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">isStudent</span><span class="p">);</span> <span class="c1">// "boolean"</span>
<span class="c1">// プリミティブ型</span>
<span class="kd">let</span> <span class="nx">str</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">文字列</span><span class="dl">"</span><span class="p">;</span> <span class="c1">// String</span>
<span class="kd">let</span> <span class="nx">num</span> <span class="o">=</span> <span class="mi">42</span><span class="p">;</span> <span class="c1">// Number</span>
<span class="kd">let</span> <span class="nx">bool</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span> <span class="c1">// Boolean</span>
<span class="kd">let</span> <span class="nx">nothing</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span> <span class="c1">// Null</span>
<span class="kd">let</span> <span class="nx">undef</span> <span class="o">=</span> <span class="kc">undefined</span><span class="p">;</span> <span class="c1">// Undefined</span>
<span class="kd">let</span> <span class="nx">sym</span> <span class="o">=</span> <span class="nb">Symbol</span><span class="p">(</span><span class="dl">"</span><span class="s2">id</span><span class="dl">"</span><span class="p">);</span> <span class="c1">// Symbol(ES6+)</span>
<span class="kd">let</span> <span class="nx">big</span> <span class="o">=</span> <span class="mi">123</span><span class="nx">n</span><span class="p">;</span> <span class="c1">// BigInt(ES2020+)</span>
<span class="c1">// 参照型</span>
<span class="kd">let</span> <span class="nx">arr</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">];</span> <span class="c1">// Array</span>
<span class="kd">let</span> <span class="nx">obj</span> <span class="o">=</span> <span class="p">{</span> <span class="na">name</span><span class="p">:</span> <span class="dl">"</span><span class="s2">太郎</span><span class="dl">"</span> <span class="p">};</span> <span class="c1">// Object</span>
<span class="kd">let</span> <span class="nx">func</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{};</span> <span class="c1">// Function</span>
</code></pre></div></div>
<h3 id="文字列操作">文字列操作</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 文字列の基本操作</span>
<span class="kd">let</span> <span class="nx">firstName</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">太郎</span><span class="dl">"</span><span class="p">;</span>
<span class="kd">let</span> <span class="nx">lastName</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">田中</span><span class="dl">"</span><span class="p">;</span>
<span class="c1">// 文字列結合</span>
<span class="kd">let</span> <span class="nx">fullName1</span> <span class="o">=</span> <span class="nx">firstName</span> <span class="o">+</span> <span class="nx">lastName</span><span class="p">;</span> <span class="c1">// "太郎田中"</span>
<span class="kd">let</span> <span class="nx">fullName2</span> <span class="o">=</span> <span class="s2">`</span><span class="p">${</span><span class="nx">lastName</span><span class="p">}</span><span class="s2"> </span><span class="p">${</span><span class="nx">firstName</span><span class="p">}</span><span class="s2">`</span><span class="p">;</span> <span class="c1">// "田中 太郎" (テンプレートリテラル)</span>
<span class="c1">// 文字列メソッド</span>
<span class="kd">let</span> <span class="nx">text</span> <span class="o">=</span> <span class="dl">"</span><span class="s2"> Hello, World! </span><span class="dl">"</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">text</span><span class="p">.</span><span class="nx">length</span><span class="p">);</span> <span class="c1">// 16 (文字数)</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">text</span><span class="p">.</span><span class="nx">toLowerCase</span><span class="p">());</span> <span class="c1">// " hello, world! "</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">text</span><span class="p">.</span><span class="nx">toUpperCase</span><span class="p">());</span> <span class="c1">// " HELLO, WORLD! "</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">text</span><span class="p">.</span><span class="nx">trim</span><span class="p">());</span> <span class="c1">// "Hello, World!" (前後の空白削除)</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">text</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="dl">"</span><span class="s2">World</span><span class="dl">"</span><span class="p">));</span> <span class="c1">// 9 (文字列の位置)</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">text</span><span class="p">.</span><span class="nx">includes</span><span class="p">(</span><span class="dl">"</span><span class="s2">Hello</span><span class="dl">"</span><span class="p">));</span> <span class="c1">// true (文字列が含まれるか)</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">text</span><span class="p">.</span><span class="nx">slice</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span> <span class="mi">7</span><span class="p">));</span> <span class="c1">// "Hello" (部分文字列)</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">text</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="dl">"</span><span class="s2">World</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">JavaScript</span><span class="dl">"</span><span class="p">));</span> <span class="c1">// " Hello, JavaScript! "</span>
<span class="c1">// 文字列分割と結合</span>
<span class="kd">let</span> <span class="nx">csv</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">apple,banana,orange</span><span class="dl">"</span><span class="p">;</span>
<span class="kd">let</span> <span class="nx">fruits</span> <span class="o">=</span> <span class="nx">csv</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="dl">"</span><span class="s2">,</span><span class="dl">"</span><span class="p">);</span> <span class="c1">// ["apple", "banana", "orange"]</span>
<span class="kd">let</span> <span class="nx">joined</span> <span class="o">=</span> <span class="nx">fruits</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="dl">"</span><span class="s2"> | </span><span class="dl">"</span><span class="p">);</span> <span class="c1">// "apple | banana | orange"</span>
<span class="c1">// マルチライン文字列(テンプレートリテラル)</span>
<span class="kd">let</span> <span class="nx">multiLine</span> <span class="o">=</span> <span class="s2">`
これは
複数行の
文字列です
`</span><span class="p">;</span>
</code></pre></div></div>
<h3 id="配列">配列</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 配列の作成</span>
<span class="kd">let</span> <span class="nx">arr1</span> <span class="o">=</span> <span class="p">[];</span> <span class="c1">// 空の配列</span>
<span class="kd">let</span> <span class="nx">arr2</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">5</span><span class="p">];</span> <span class="c1">// 数値配列</span>
<span class="kd">let</span> <span class="nx">arr3</span> <span class="o">=</span> <span class="p">[</span><span class="dl">"</span><span class="s2">apple</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">banana</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">orange</span><span class="dl">"</span><span class="p">];</span> <span class="c1">// 文字列配列</span>
<span class="kd">let</span> <span class="nx">arr4</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="dl">"</span><span class="s2">text</span><span class="dl">"</span><span class="p">,</span> <span class="kc">true</span><span class="p">,</span> <span class="kc">null</span><span class="p">];</span> <span class="c1">// 混合配列</span>
<span class="c1">// 配列の基本操作</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">arr2</span><span class="p">.</span><span class="nx">length</span><span class="p">);</span> <span class="c1">// 5 (要素数)</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">arr2</span><span class="p">[</span><span class="mi">0</span><span class="p">]);</span> <span class="c1">// 1 (最初の要素)</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">arr2</span><span class="p">[</span><span class="nx">arr2</span><span class="p">.</span><span class="nx">length</span> <span class="o">-</span> <span class="mi">1</span><span class="p">]);</span> <span class="c1">// 5 (最後の要素)</span>
<span class="c1">// 要素の追加・削除</span>
<span class="nx">arr2</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="mi">6</span><span class="p">);</span> <span class="c1">// 末尾に追加: [1,2,3,4,5,6]</span>
<span class="nx">arr2</span><span class="p">.</span><span class="nx">pop</span><span class="p">();</span> <span class="c1">// 末尾を削除: [1,2,3,4,5]</span>
<span class="nx">arr2</span><span class="p">.</span><span class="nx">unshift</span><span class="p">(</span><span class="mi">0</span><span class="p">);</span> <span class="c1">// 先頭に追加: [0,1,2,3,4,5]</span>
<span class="nx">arr2</span><span class="p">.</span><span class="nx">shift</span><span class="p">();</span> <span class="c1">// 先頭を削除: [1,2,3,4,5]</span>
<span class="c1">// 配列メソッド(ES5+)</span>
<span class="kd">let</span> <span class="nx">numbers</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">5</span><span class="p">];</span>
<span class="c1">// map: 各要素を変換</span>
<span class="kd">let</span> <span class="nx">doubled</span> <span class="o">=</span> <span class="nx">numbers</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">x</span> <span class="o">=></span> <span class="nx">x</span> <span class="o">*</span> <span class="mi">2</span><span class="p">);</span> <span class="c1">// [2,4,6,8,10]</span>
<span class="c1">// filter: 条件に合う要素を抽出</span>
<span class="kd">let</span> <span class="nx">evens</span> <span class="o">=</span> <span class="nx">numbers</span><span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="nx">x</span> <span class="o">=></span> <span class="nx">x</span> <span class="o">%</span> <span class="mi">2</span> <span class="o">===</span> <span class="mi">0</span><span class="p">);</span> <span class="c1">// [2,4]</span>
<span class="c1">// reduce: 配列を単一の値に集約</span>
<span class="kd">let</span> <span class="nx">sum</span> <span class="o">=</span> <span class="nx">numbers</span><span class="p">.</span><span class="nx">reduce</span><span class="p">((</span><span class="nx">acc</span><span class="p">,</span> <span class="nx">x</span><span class="p">)</span> <span class="o">=></span> <span class="nx">acc</span> <span class="o">+</span> <span class="nx">x</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span> <span class="c1">// 15</span>
<span class="c1">// find: 条件に合う最初の要素</span>
<span class="kd">let</span> <span class="nx">found</span> <span class="o">=</span> <span class="nx">numbers</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="nx">x</span> <span class="o">=></span> <span class="nx">x</span> <span class="o">></span> <span class="mi">3</span><span class="p">);</span> <span class="c1">// 4</span>
<span class="c1">// forEach: 各要素に対して処理実行</span>
<span class="nx">numbers</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">x</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">x</span><span class="p">));</span>
<span class="c1">// includes: 要素が含まれているか</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">numbers</span><span class="p">.</span><span class="nx">includes</span><span class="p">(</span><span class="mi">3</span><span class="p">));</span> <span class="c1">// true</span>
<span class="c1">// sort: ソート</span>
<span class="kd">let</span> <span class="nx">fruits</span> <span class="o">=</span> <span class="p">[</span><span class="dl">"</span><span class="s2">banana</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">apple</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">orange</span><span class="dl">"</span><span class="p">];</span>
<span class="nx">fruits</span><span class="p">.</span><span class="nx">sort</span><span class="p">();</span> <span class="c1">// ["apple", "banana", "orange"]</span>
<span class="kd">let</span> <span class="nx">nums</span> <span class="o">=</span> <span class="p">[</span><span class="mi">3</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">5</span><span class="p">];</span>
<span class="nx">nums</span><span class="p">.</span><span class="nx">sort</span><span class="p">((</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="o">=></span> <span class="nx">a</span> <span class="o">-</span> <span class="nx">b</span><span class="p">);</span> <span class="c1">// [1,1,3,4,5] (数値ソート)</span>
</code></pre></div></div>
<h3 id="オブジェクト">オブジェクト</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// オブジェクトの作成</span>
<span class="kd">let</span> <span class="nx">person</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">name</span><span class="p">:</span> <span class="dl">"</span><span class="s2">田中太郎</span><span class="dl">"</span><span class="p">,</span>
<span class="na">age</span><span class="p">:</span> <span class="mi">30</span><span class="p">,</span>
<span class="na">city</span><span class="p">:</span> <span class="dl">"</span><span class="s2">東京</span><span class="dl">"</span><span class="p">,</span>
<span class="na">isStudent</span><span class="p">:</span> <span class="kc">false</span>
<span class="p">};</span>
<span class="c1">// プロパティへのアクセス</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">person</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span> <span class="c1">// "田中太郎" (ドット記法)</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">person</span><span class="p">[</span><span class="dl">"</span><span class="s2">age</span><span class="dl">"</span><span class="p">]);</span> <span class="c1">// 30 (ブラケット記法)</span>
<span class="c1">// プロパティの追加・変更</span>
<span class="nx">person</span><span class="p">.</span><span class="nx">email</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">tanaka@example.com</span><span class="dl">"</span><span class="p">;</span> <span class="c1">// 追加</span>
<span class="nx">person</span><span class="p">.</span><span class="nx">age</span> <span class="o">=</span> <span class="mi">31</span><span class="p">;</span> <span class="c1">// 変更</span>
<span class="c1">// プロパティの削除</span>
<span class="k">delete</span> <span class="nx">person</span><span class="p">.</span><span class="nx">isStudent</span><span class="p">;</span>
<span class="c1">// メソッドを含むオブジェクト</span>
<span class="kd">let</span> <span class="nx">calculator</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">value</span><span class="p">:</span> <span class="mi">0</span><span class="p">,</span>
<span class="na">add</span><span class="p">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">x</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">value</span> <span class="o">+=</span> <span class="nx">x</span><span class="p">;</span>
<span class="k">return</span> <span class="k">this</span><span class="p">;</span> <span class="c1">// チェーンメソッド用</span>
<span class="p">},</span>
<span class="na">multiply</span><span class="p">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">x</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">value</span> <span class="o">*=</span> <span class="nx">x</span><span class="p">;</span>
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
<span class="p">},</span>
<span class="na">getValue</span><span class="p">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">value</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="c1">// 使用例</span>
<span class="nx">calculator</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="mi">5</span><span class="p">).</span><span class="nx">multiply</span><span class="p">(</span><span class="mi">2</span><span class="p">).</span><span class="nx">getValue</span><span class="p">();</span> <span class="c1">// 10</span>
<span class="c1">// オブジェクトの反復処理</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">key</span> <span class="k">in</span> <span class="nx">person</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`</span><span class="p">${</span><span class="nx">key</span><span class="p">}</span><span class="s2">: </span><span class="p">${</span><span class="nx">person</span><span class="p">[</span><span class="nx">key</span><span class="p">]}</span><span class="s2">`</span><span class="p">);</span>
<span class="p">}</span>
<span class="c1">// ES6+ のオブジェクト機能</span>
<span class="kd">let</span> <span class="nx">name</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">太郎</span><span class="dl">"</span><span class="p">;</span>
<span class="kd">let</span> <span class="nx">age</span> <span class="o">=</span> <span class="mi">25</span><span class="p">;</span>
<span class="c1">// プロパティ名の短縮記法</span>
<span class="kd">let</span> <span class="nx">user</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">name</span><span class="p">,</span> <span class="nx">age</span> <span class="p">};</span> <span class="c1">// { name: "太郎", age: 25 }</span>
<span class="c1">// 計算されたプロパティ名</span>
<span class="kd">let</span> <span class="nx">prop</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">color</span><span class="dl">"</span><span class="p">;</span>
<span class="kd">let</span> <span class="nx">car</span> <span class="o">=</span> <span class="p">{</span>
<span class="p">[</span><span class="nx">prop</span><span class="p">]:</span> <span class="dl">"</span><span class="s2">red</span><span class="dl">"</span> <span class="c1">// { color: "red" }</span>
<span class="p">};</span>
<span class="c1">// デストラクチャリング代入</span>
<span class="kd">let</span> <span class="p">{</span> <span class="na">name</span><span class="p">:</span> <span class="nx">userName</span><span class="p">,</span> <span class="na">age</span><span class="p">:</span> <span class="nx">userAge</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">user</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">userName</span><span class="p">,</span> <span class="nx">userAge</span><span class="p">);</span> <span class="c1">// "太郎" 25</span>
</code></pre></div></div>
<h2 id="関数">関数</h2>
<h3 id="関数の定義">関数の定義</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 関数宣言</span>
<span class="kd">function</span> <span class="nx">greet</span><span class="p">(</span><span class="nx">name</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="s2">`こんにちは、</span><span class="p">${</span><span class="nx">name</span><span class="p">}</span><span class="s2">さん!`</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// 関数式</span>
<span class="kd">const</span> <span class="nx">greet2</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">name</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="s2">`こんにちは、</span><span class="p">${</span><span class="nx">name</span><span class="p">}</span><span class="s2">さん!`</span><span class="p">;</span>
<span class="p">};</span>
<span class="c1">// アロー関数(ES6+)</span>
<span class="kd">const</span> <span class="nx">greet3</span> <span class="o">=</span> <span class="p">(</span><span class="nx">name</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">return</span> <span class="s2">`こんにちは、</span><span class="p">${</span><span class="nx">name</span><span class="p">}</span><span class="s2">さん!`</span><span class="p">;</span>
<span class="p">};</span>
<span class="c1">// アロー関数(短縮形)</span>
<span class="kd">const</span> <span class="nx">greet4</span> <span class="o">=</span> <span class="nx">name</span> <span class="o">=></span> <span class="s2">`こんにちは、</span><span class="p">${</span><span class="nx">name</span><span class="p">}</span><span class="s2">さん!`</span><span class="p">;</span>
<span class="c1">// 複数パラメータのアロー関数</span>
<span class="kd">const</span> <span class="nx">add</span> <span class="o">=</span> <span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="o">=></span> <span class="nx">a</span> <span class="o">+</span> <span class="nx">b</span><span class="p">;</span>
<span class="c1">// 関数の呼び出し</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">greet</span><span class="p">(</span><span class="dl">"</span><span class="s2">太郎</span><span class="dl">"</span><span class="p">));</span> <span class="c1">// "こんにちは、太郎さん!"</span>
<span class="c1">// デフォルトパラメータ(ES6+)</span>
<span class="kd">function</span> <span class="nx">createUser</span><span class="p">(</span><span class="nx">name</span><span class="p">,</span> <span class="nx">age</span> <span class="o">=</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">city</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">未設定</span><span class="dl">"</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">{</span> <span class="nx">name</span><span class="p">,</span> <span class="nx">age</span><span class="p">,</span> <span class="nx">city</span> <span class="p">};</span>
<span class="p">}</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">createUser</span><span class="p">(</span><span class="dl">"</span><span class="s2">太郎</span><span class="dl">"</span><span class="p">));</span> <span class="c1">// { name: "太郎", age: 0, city: "未設定" }</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">createUser</span><span class="p">(</span><span class="dl">"</span><span class="s2">花子</span><span class="dl">"</span><span class="p">,</span> <span class="mi">25</span><span class="p">));</span> <span class="c1">// { name: "花子", age: 25, city: "未設定" }</span>
<span class="c1">// 可変長引数(Rest Parameters)</span>
<span class="kd">function</span> <span class="nx">sum</span><span class="p">(...</span><span class="nx">numbers</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">numbers</span><span class="p">.</span><span class="nx">reduce</span><span class="p">((</span><span class="nx">total</span><span class="p">,</span> <span class="nx">num</span><span class="p">)</span> <span class="o">=></span> <span class="nx">total</span> <span class="o">+</span> <span class="nx">num</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">sum</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">5</span><span class="p">));</span> <span class="c1">// 15</span>
<span class="c1">// スプレッド演算子</span>
<span class="kd">const</span> <span class="nx">arr1</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">];</span>
<span class="kd">const</span> <span class="nx">arr2</span> <span class="o">=</span> <span class="p">[</span><span class="mi">4</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">6</span><span class="p">];</span>
<span class="kd">const</span> <span class="nx">combined</span> <span class="o">=</span> <span class="p">[...</span><span class="nx">arr1</span><span class="p">,</span> <span class="p">...</span><span class="nx">arr2</span><span class="p">];</span> <span class="c1">// [1,2,3,4,5,6]</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">max</span><span class="p">(...</span><span class="nx">arr1</span><span class="p">));</span> <span class="c1">// 3</span>
</code></pre></div></div>
<h3 id="スコープとクロージャ">スコープとクロージャ</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// グローバルスコープ</span>
<span class="kd">let</span> <span class="nx">globalVar</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">グローバル</span><span class="dl">"</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">outerFunction</span><span class="p">()</span> <span class="p">{</span>
<span class="c1">// 関数スコープ</span>
<span class="kd">let</span> <span class="nx">outerVar</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">外側</span><span class="dl">"</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">innerFunction</span><span class="p">()</span> <span class="p">{</span>
<span class="c1">// クロージャ</span>
<span class="kd">let</span> <span class="nx">innerVar</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">内側</span><span class="dl">"</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">globalVar</span><span class="p">);</span> <span class="c1">// アクセス可能</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">outerVar</span><span class="p">);</span> <span class="c1">// アクセス可能</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">innerVar</span><span class="p">);</span> <span class="c1">// アクセス可能</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">innerFunction</span><span class="p">;</span>
<span class="p">}</span>
<span class="kd">const</span> <span class="nx">closure</span> <span class="o">=</span> <span class="nx">outerFunction</span><span class="p">();</span>
<span class="nx">closure</span><span class="p">();</span> <span class="c1">// クロージャが実行される</span>
<span class="c1">// 実用的なクロージャの例</span>
<span class="kd">function</span> <span class="nx">createCounter</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">count</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
<span class="k">return</span> <span class="p">{</span>
<span class="na">increment</span><span class="p">:</span> <span class="p">()</span> <span class="o">=></span> <span class="o">++</span><span class="nx">count</span><span class="p">,</span>
<span class="na">decrement</span><span class="p">:</span> <span class="p">()</span> <span class="o">=></span> <span class="o">--</span><span class="nx">count</span><span class="p">,</span>
<span class="na">getCount</span><span class="p">:</span> <span class="p">()</span> <span class="o">=></span> <span class="nx">count</span>
<span class="p">};</span>
<span class="p">}</span>
<span class="kd">const</span> <span class="nx">counter</span> <span class="o">=</span> <span class="nx">createCounter</span><span class="p">();</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">counter</span><span class="p">.</span><span class="nx">increment</span><span class="p">());</span> <span class="c1">// 1</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">counter</span><span class="p">.</span><span class="nx">increment</span><span class="p">());</span> <span class="c1">// 2</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">counter</span><span class="p">.</span><span class="nx">getCount</span><span class="p">());</span> <span class="c1">// 2</span>
<span class="c1">// ブロックスコープ(let, const)</span>
<span class="p">{</span>
<span class="kd">let</span> <span class="nx">blockVar</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">ブロック内</span><span class="dl">"</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">blockConst</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">定数</span><span class="dl">"</span><span class="p">;</span>
<span class="c1">// これらはブロック外からアクセス不可</span>
<span class="p">}</span>
<span class="c1">// var は関数スコープ</span>
<span class="kd">function</span> <span class="nx">varExample</span><span class="p">()</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="kc">true</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">varVariable</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">var変数</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">varVariable</span><span class="p">);</span> <span class="c1">// アクセス可能(ホイスティング)</span>
<span class="p">}</span>
</code></pre></div></div>
<h2 id="dom操作">DOM操作</h2>
<h3 id="要素の取得">要素の取得</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// ID で取得</span>
<span class="kd">const</span> <span class="nx">element</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">myId</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// クラス名で取得</span>
<span class="kd">const</span> <span class="nx">elements</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="dl">"</span><span class="s2">myClass</span><span class="dl">"</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">firstElement</span> <span class="o">=</span> <span class="nx">elements</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
<span class="c1">// タグ名で取得</span>
<span class="kd">const</span> <span class="nx">paragraphs</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="dl">"</span><span class="s2">p</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// CSSセレクタで取得(推奨)</span>
<span class="kd">const</span> <span class="nx">element2</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#myId</span><span class="dl">"</span><span class="p">);</span> <span class="c1">// 最初の要素</span>
<span class="kd">const</span> <span class="nx">elements2</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="dl">"</span><span class="s2">.myClass</span><span class="dl">"</span><span class="p">);</span> <span class="c1">// 全ての要素</span>
<span class="c1">// 複雑なセレクタの例</span>
<span class="kd">const</span> <span class="nx">navLinks</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="dl">"</span><span class="s2">nav ul li a</span><span class="dl">"</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">firstParagraph</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">article p:first-child</span><span class="dl">"</span><span class="p">);</span>
</code></pre></div></div>
<h3 id="要素の操作">要素の操作</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// テキストコンテンツの操作</span>
<span class="kd">const</span> <span class="nx">title</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">h1</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">title</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">新しいタイトル</span><span class="dl">"</span><span class="p">;</span> <span class="c1">// HTMLタグは文字列として表示</span>
<span class="nx">title</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="dl">"</span><span class="s2"><strong>太字タイトル</strong></span><span class="dl">"</span><span class="p">;</span> <span class="c1">// HTMLタグも解釈</span>
<span class="c1">// 属性の操作</span>
<span class="kd">const</span> <span class="nx">link</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">a</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">link</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="dl">"</span><span class="s2">href</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">https://example.com</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">link</span><span class="p">.</span><span class="nx">getAttribute</span><span class="p">(</span><span class="dl">"</span><span class="s2">href</span><span class="dl">"</span><span class="p">);</span> <span class="c1">// "https://example.com"</span>
<span class="nx">link</span><span class="p">.</span><span class="nx">removeAttribute</span><span class="p">(</span><span class="dl">"</span><span class="s2">target</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// より簡単な属性アクセス</span>
<span class="nx">link</span><span class="p">.</span><span class="nx">href</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">https://google.com</span><span class="dl">"</span><span class="p">;</span>
<span class="nx">link</span><span class="p">.</span><span class="nx">target</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">_blank</span><span class="dl">"</span><span class="p">;</span>
<span class="c1">// クラスの操作</span>
<span class="kd">const</span> <span class="nx">button</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">button</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="dl">"</span><span class="s2">active</span><span class="dl">"</span><span class="p">);</span> <span class="c1">// クラス追加</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">remove</span><span class="p">(</span><span class="dl">"</span><span class="s2">disabled</span><span class="dl">"</span><span class="p">);</span> <span class="c1">// クラス削除</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">toggle</span><span class="p">(</span><span class="dl">"</span><span class="s2">highlighted</span><span class="dl">"</span><span class="p">);</span> <span class="c1">// クラスの切り替え</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">contains</span><span class="p">(</span><span class="dl">"</span><span class="s2">active</span><span class="dl">"</span><span class="p">);</span> <span class="c1">// クラスの存在確認</span>
<span class="c1">// スタイルの操作</span>
<span class="kd">const</span> <span class="nx">box</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">.box</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">box</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">backgroundColor</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">red</span><span class="dl">"</span><span class="p">;</span>
<span class="nx">box</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">fontSize</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">20px</span><span class="dl">"</span><span class="p">;</span>
<span class="nx">box</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">none</span><span class="dl">"</span><span class="p">;</span>
<span class="c1">// 複数スタイルの設定</span>
<span class="nb">Object</span><span class="p">.</span><span class="nx">assign</span><span class="p">(</span><span class="nx">box</span><span class="p">.</span><span class="nx">style</span><span class="p">,</span> <span class="p">{</span>
<span class="na">width</span><span class="p">:</span> <span class="dl">"</span><span class="s2">200px</span><span class="dl">"</span><span class="p">,</span>
<span class="na">height</span><span class="p">:</span> <span class="dl">"</span><span class="s2">200px</span><span class="dl">"</span><span class="p">,</span>
<span class="na">border</span><span class="p">:</span> <span class="dl">"</span><span class="s2">2px solid black</span><span class="dl">"</span>
<span class="p">});</span>
</code></pre></div></div>
<h3 id="要素の作成と追加">要素の作成と追加</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 新しい要素の作成</span>
<span class="kd">const</span> <span class="nx">newParagraph</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="dl">"</span><span class="s2">p</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">newParagraph</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">新しい段落です</span><span class="dl">"</span><span class="p">;</span>
<span class="nx">newParagraph</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">new-content</span><span class="dl">"</span><span class="p">;</span>
<span class="c1">// 要素の追加</span>
<span class="kd">const</span> <span class="nx">container</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#container</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">newParagraph</span><span class="p">);</span> <span class="c1">// 末尾に追加</span>
<span class="c1">// より柔軟な挿入</span>
<span class="kd">const</span> <span class="nx">referenceElement</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">.reference</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">insertBefore</span><span class="p">(</span><span class="nx">newParagraph</span><span class="p">,</span> <span class="nx">referenceElement</span><span class="p">);</span> <span class="c1">// 指定要素の前に挿入</span>
<span class="c1">// 新しいAPI(より便利)</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">insertAdjacentElement</span><span class="p">(</span><span class="dl">"</span><span class="s2">beforeend</span><span class="dl">"</span><span class="p">,</span> <span class="nx">newParagraph</span><span class="p">);</span> <span class="c1">// 末尾に追加</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">insertAdjacentElement</span><span class="p">(</span><span class="dl">"</span><span class="s2">afterbegin</span><span class="dl">"</span><span class="p">,</span> <span class="nx">newParagraph</span><span class="p">);</span> <span class="c1">// 先頭に追加</span>
<span class="c1">// HTMLを直接挿入</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">insertAdjacentHTML</span><span class="p">(</span><span class="dl">"</span><span class="s2">beforeend</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2"><p>HTMLで追加</p></span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// 要素の削除</span>
<span class="kd">const</span> <span class="nx">elementToRemove</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">.remove-me</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">elementToRemove</span><span class="p">.</span><span class="nx">remove</span><span class="p">();</span> <span class="c1">// 新しい方法</span>
<span class="c1">// elementToRemove.parentNode.removeChild(elementToRemove); // 古い方法</span>
<span class="c1">// 要素の置換</span>
<span class="kd">const</span> <span class="nx">oldElement</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">.old</span><span class="dl">"</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">newElement</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="dl">"</span><span class="s2">div</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">newElement</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">新しい要素</span><span class="dl">"</span><span class="p">;</span>
<span class="nx">oldElement</span><span class="p">.</span><span class="nx">replaceWith</span><span class="p">(</span><span class="nx">newElement</span><span class="p">);</span>
</code></pre></div></div>
<h2 id="イベント処理">イベント処理</h2>
<h3 id="イベントリスナーの追加">イベントリスナーの追加</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 基本的なイベントリスナー</span>
<span class="kd">const</span> <span class="nx">button</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#myButton</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ボタンがクリックされました</span><span class="dl">"</span><span class="p">);</span>
<span class="p">});</span>
<span class="c1">// アロー関数を使用</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ボタンがクリックされました</span><span class="dl">"</span><span class="p">);</span>
<span class="p">});</span>
<span class="c1">// 名前付き関数を使用</span>
<span class="kd">function</span> <span class="nx">handleClick</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ボタンがクリックされました</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="nx">handleClick</span><span class="p">);</span>
<span class="c1">// イベントオブジェクトの使用</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">イベントタイプ:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">event</span><span class="p">.</span><span class="nx">type</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ターゲット要素:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">event</span><span class="p">.</span><span class="nx">target</span><span class="p">);</span>
<span class="nx">event</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span> <span class="c1">// デフォルト動作を阻止</span>
<span class="p">});</span>
<span class="c1">// 一度だけ実行するイベント</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="nx">handleClick</span><span class="p">,</span> <span class="p">{</span> <span class="na">once</span><span class="p">:</span> <span class="kc">true</span> <span class="p">});</span>
<span class="c1">// イベントリスナーの削除</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">removeEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="nx">handleClick</span><span class="p">);</span>
</code></pre></div></div>
<h3 id="よく使用するイベント">よく使用するイベント</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// マウスイベント</span>
<span class="nx">element</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">クリック</span><span class="dl">"</span><span class="p">));</span>
<span class="nx">element</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">dblclick</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ダブルクリック</span><span class="dl">"</span><span class="p">));</span>
<span class="nx">element</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">mousedown</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">マウスボタン押下</span><span class="dl">"</span><span class="p">));</span>
<span class="nx">element</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">mouseup</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">マウスボタン離上</span><span class="dl">"</span><span class="p">));</span>
<span class="nx">element</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">mouseover</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">マウスオーバー</span><span class="dl">"</span><span class="p">));</span>
<span class="nx">element</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">mouseout</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">マウスアウト</span><span class="dl">"</span><span class="p">));</span>
<span class="nx">element</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">mousemove</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`マウス位置: (</span><span class="p">${</span><span class="nx">e</span><span class="p">.</span><span class="nx">clientX</span><span class="p">}</span><span class="s2">, </span><span class="p">${</span><span class="nx">e</span><span class="p">.</span><span class="nx">clientY</span><span class="p">}</span><span class="s2">)`</span><span class="p">);</span>
<span class="p">});</span>
<span class="c1">// キーボードイベント</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">keydown</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`キー押下: </span><span class="p">${</span><span class="nx">e</span><span class="p">.</span><span class="nx">key</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">key</span> <span class="o">===</span> <span class="dl">"</span><span class="s2">Enter</span><span class="dl">"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">Enterキーが押されました</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">keyup</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`キー離上: </span><span class="p">${</span><span class="nx">e</span><span class="p">.</span><span class="nx">key</span><span class="p">}</span><span class="s2">`</span><span class="p">));</span>
<span class="c1">// フォームイベント</span>
<span class="kd">const</span> <span class="nx">form</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#myForm</span><span class="dl">"</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">input</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#myInput</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">form</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">submit</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span> <span class="c1">// フォーム送信を阻止</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">フォーム送信</span><span class="dl">"</span><span class="p">);</span>
<span class="p">});</span>
<span class="nx">input</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">input</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`入力値: </span><span class="p">${</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="p">});</span>
<span class="nx">input</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">focus</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">フォーカス</span><span class="dl">"</span><span class="p">));</span>
<span class="nx">input</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">blur</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">フォーカス失う</span><span class="dl">"</span><span class="p">));</span>
<span class="c1">// ウィンドウイベント</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">load</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ページ読み込み完了</span><span class="dl">"</span><span class="p">));</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">resize</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`ウィンドウサイズ: </span><span class="p">${</span><span class="nb">window</span><span class="p">.</span><span class="nx">innerWidth</span><span class="p">}</span><span class="s2">x</span><span class="p">${</span><span class="nb">window</span><span class="p">.</span><span class="nx">innerHeight</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="p">});</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">scroll</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`スクロール位置: </span><span class="p">${</span><span class="nb">window</span><span class="p">.</span><span class="nx">scrollY</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="p">});</span>
<span class="c1">// DOMコンテンツ読み込み完了(推奨)</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">DOMContentLoaded</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">DOM読み込み完了</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// ここに初期化コードを記述</span>
<span class="p">});</span>
</code></pre></div></div>
<h3 id="イベント委譲">イベント委譲</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 動的に追加される要素に対するイベント処理</span>
<span class="kd">const</span> <span class="nx">container</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#container</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// 子要素(ボタン)に対するクリックイベントを親要素で処理</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">matches</span><span class="p">(</span><span class="dl">"</span><span class="s2">button</span><span class="dl">"</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ボタンがクリックされました:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">textContent</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="c1">// 新しいボタンを動的に追加</span>
<span class="kd">function</span> <span class="nx">addButton</span><span class="p">(</span><span class="nx">text</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">button</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="dl">"</span><span class="s2">button</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="nx">text</span><span class="p">;</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">button</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">addButton</span><span class="p">(</span><span class="dl">"</span><span class="s2">新しいボタン1</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">addButton</span><span class="p">(</span><span class="dl">"</span><span class="s2">新しいボタン2</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// これらのボタンも自動的にイベントが適用される</span>
</code></pre></div></div>
<h2 id="非同期処理">非同期処理</h2>
<h3 id="promise">Promise</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// Promiseの基本</span>
<span class="kd">const</span> <span class="nx">myPromise</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Promise</span><span class="p">((</span><span class="nx">resolve</span><span class="p">,</span> <span class="nx">reject</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="c1">// 非同期処理のシミュレーション</span>
<span class="nx">setTimeout</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">success</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span> <span class="o">></span> <span class="mf">0.5</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">success</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">resolve</span><span class="p">(</span><span class="dl">"</span><span class="s2">成功しました!</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">reject</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラーが発生しました</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">},</span> <span class="mi">1000</span><span class="p">);</span>
<span class="p">});</span>
<span class="c1">// Promiseの使用</span>
<span class="nx">myPromise</span>
<span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="nx">result</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">成功:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">result</span><span class="p">);</span>
<span class="p">})</span>
<span class="p">.</span><span class="k">catch</span><span class="p">(</span><span class="nx">error</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
<span class="p">})</span>
<span class="p">.</span><span class="k">finally</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">処理完了</span><span class="dl">"</span><span class="p">);</span>
<span class="p">});</span>
<span class="c1">// Promiseチェーン</span>
<span class="kd">function</span> <span class="nx">fetchUser</span><span class="p">(</span><span class="nx">id</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="k">new</span> <span class="nb">Promise</span><span class="p">(</span><span class="nx">resolve</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">setTimeout</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">resolve</span><span class="p">({</span> <span class="nx">id</span><span class="p">,</span> <span class="na">name</span><span class="p">:</span> <span class="s2">`ユーザー</span><span class="p">${</span><span class="nx">id</span><span class="p">}</span><span class="s2">`</span> <span class="p">});</span>
<span class="p">},</span> <span class="mi">500</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">fetchUserPosts</span><span class="p">(</span><span class="nx">userId</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="k">new</span> <span class="nb">Promise</span><span class="p">(</span><span class="nx">resolve</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">setTimeout</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">resolve</span><span class="p">([</span>
<span class="p">{</span> <span class="na">id</span><span class="p">:</span> <span class="mi">1</span><span class="p">,</span> <span class="na">title</span><span class="p">:</span> <span class="dl">"</span><span class="s2">投稿1</span><span class="dl">"</span><span class="p">,</span> <span class="nx">userId</span> <span class="p">},</span>
<span class="p">{</span> <span class="na">id</span><span class="p">:</span> <span class="mi">2</span><span class="p">,</span> <span class="na">title</span><span class="p">:</span> <span class="dl">"</span><span class="s2">投稿2</span><span class="dl">"</span><span class="p">,</span> <span class="nx">userId</span> <span class="p">}</span>
<span class="p">]);</span>
<span class="p">},</span> <span class="mi">500</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="c1">// チェーンの実行</span>
<span class="nx">fetchUser</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span>
<span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="nx">user</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ユーザー取得:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">user</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">fetchUserPosts</span><span class="p">(</span><span class="nx">user</span><span class="p">.</span><span class="nx">id</span><span class="p">);</span>
<span class="p">})</span>
<span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="nx">posts</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">投稿取得:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">posts</span><span class="p">);</span>
<span class="p">})</span>
<span class="p">.</span><span class="k">catch</span><span class="p">(</span><span class="nx">error</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
<span class="p">});</span>
</code></pre></div></div>
<h3 id="asyncawait">async/await</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// async/awaitを使用した非同期処理</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">getUserData</span><span class="p">(</span><span class="nx">id</span><span class="p">)</span> <span class="p">{</span>
<span class="k">try</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">user</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">fetchUser</span><span class="p">(</span><span class="nx">id</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ユーザー取得:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">user</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">posts</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">fetchUserPosts</span><span class="p">(</span><span class="nx">user</span><span class="p">.</span><span class="nx">id</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">投稿取得:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">posts</span><span class="p">);</span>
<span class="k">return</span> <span class="p">{</span> <span class="nx">user</span><span class="p">,</span> <span class="nx">posts</span> <span class="p">};</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
<span class="k">throw</span> <span class="nx">error</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// async関数の呼び出し</span>
<span class="nx">getUserData</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span>
<span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="nx">data</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">完了:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">data</span><span class="p">))</span>
<span class="p">.</span><span class="k">catch</span><span class="p">(</span><span class="nx">error</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">処理失敗:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">));</span>
<span class="c1">// 複数の非同期処理を並行実行</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">fetchMultipleUsers</span><span class="p">()</span> <span class="p">{</span>
<span class="k">try</span> <span class="p">{</span>
<span class="c1">// 並行実行(高速)</span>
<span class="kd">const</span> <span class="p">[</span><span class="nx">user1</span><span class="p">,</span> <span class="nx">user2</span><span class="p">,</span> <span class="nx">user3</span><span class="p">]</span> <span class="o">=</span> <span class="k">await</span> <span class="nb">Promise</span><span class="p">.</span><span class="nx">all</span><span class="p">([</span>
<span class="nx">fetchUser</span><span class="p">(</span><span class="mi">1</span><span class="p">),</span>
<span class="nx">fetchUser</span><span class="p">(</span><span class="mi">2</span><span class="p">),</span>
<span class="nx">fetchUser</span><span class="p">(</span><span class="mi">3</span><span class="p">)</span>
<span class="p">]);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">全ユーザー取得完了:</span><span class="dl">"</span><span class="p">,</span> <span class="p">{</span> <span class="nx">user1</span><span class="p">,</span> <span class="nx">user2</span><span class="p">,</span> <span class="nx">user3</span> <span class="p">});</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">いずれかでエラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// Promise.allSettled(エラーがあっても全て実行)</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">fetchWithErrors</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">results</span> <span class="o">=</span> <span class="k">await</span> <span class="nb">Promise</span><span class="p">.</span><span class="nx">allSettled</span><span class="p">([</span>
<span class="nx">fetchUser</span><span class="p">(</span><span class="mi">1</span><span class="p">),</span>
<span class="nb">Promise</span><span class="p">.</span><span class="nx">reject</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラーのテスト</span><span class="dl">"</span><span class="p">),</span>
<span class="nx">fetchUser</span><span class="p">(</span><span class="mi">3</span><span class="p">)</span>
<span class="p">]);</span>
<span class="nx">results</span><span class="p">.</span><span class="nx">forEach</span><span class="p">((</span><span class="nx">result</span><span class="p">,</span> <span class="nx">index</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">result</span><span class="p">.</span><span class="nx">status</span> <span class="o">===</span> <span class="dl">"</span><span class="s2">fulfilled</span><span class="dl">"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`結果</span><span class="p">${</span><span class="nx">index</span><span class="p">}</span><span class="s2">:`</span><span class="p">,</span> <span class="nx">result</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`エラー</span><span class="p">${</span><span class="nx">index</span><span class="p">}</span><span class="s2">:`</span><span class="p">,</span> <span class="nx">result</span><span class="p">.</span><span class="nx">reason</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="p">}</span>
</code></pre></div></div>
<h3 id="fetch-api">Fetch API</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 基本的なGET リクエスト</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">fetchData</span><span class="p">()</span> <span class="p">{</span>
<span class="k">try</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">response</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">fetch</span><span class="p">(</span><span class="dl">"</span><span class="s2">https://jsonplaceholder.typicode.com/posts/1</span><span class="dl">"</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">response</span><span class="p">.</span><span class="nx">ok</span><span class="p">)</span> <span class="p">{</span>
<span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="s2">`HTTP error! status: </span><span class="p">${</span><span class="nx">response</span><span class="p">.</span><span class="nx">status</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="p">}</span>
<span class="kd">const</span> <span class="nx">data</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">response</span><span class="p">.</span><span class="nx">json</span><span class="p">();</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">取得データ:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">data</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">data</span><span class="p">;</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">取得エラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// POST リクエスト</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">createPost</span><span class="p">(</span><span class="nx">postData</span><span class="p">)</span> <span class="p">{</span>
<span class="k">try</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">response</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">fetch</span><span class="p">(</span><span class="dl">"</span><span class="s2">https://jsonplaceholder.typicode.com/posts</span><span class="dl">"</span><span class="p">,</span> <span class="p">{</span>
<span class="na">method</span><span class="p">:</span> <span class="dl">"</span><span class="s2">POST</span><span class="dl">"</span><span class="p">,</span>
<span class="na">headers</span><span class="p">:</span> <span class="p">{</span>
<span class="dl">"</span><span class="s2">Content-Type</span><span class="dl">"</span><span class="p">:</span> <span class="dl">"</span><span class="s2">application/json</span><span class="dl">"</span><span class="p">,</span>
<span class="p">},</span>
<span class="na">body</span><span class="p">:</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">postData</span><span class="p">)</span>
<span class="p">});</span>
<span class="kd">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">response</span><span class="p">.</span><span class="nx">json</span><span class="p">();</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">作成結果:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">result</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">result</span><span class="p">;</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">作成エラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// 使用例</span>
<span class="nx">createPost</span><span class="p">({</span>
<span class="na">title</span><span class="p">:</span> <span class="dl">"</span><span class="s2">新しい投稿</span><span class="dl">"</span><span class="p">,</span>
<span class="na">body</span><span class="p">:</span> <span class="dl">"</span><span class="s2">投稿内容</span><span class="dl">"</span><span class="p">,</span>
<span class="na">userId</span><span class="p">:</span> <span class="mi">1</span>
<span class="p">});</span>
<span class="c1">// ファイルアップロード</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">uploadFile</span><span class="p">(</span><span class="nx">file</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">formData</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">FormData</span><span class="p">();</span>
<span class="nx">formData</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="dl">"</span><span class="s2">file</span><span class="dl">"</span><span class="p">,</span> <span class="nx">file</span><span class="p">);</span>
<span class="k">try</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">response</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">fetch</span><span class="p">(</span><span class="dl">"</span><span class="s2">/upload</span><span class="dl">"</span><span class="p">,</span> <span class="p">{</span>
<span class="na">method</span><span class="p">:</span> <span class="dl">"</span><span class="s2">POST</span><span class="dl">"</span><span class="p">,</span>
<span class="na">body</span><span class="p">:</span> <span class="nx">formData</span>
<span class="p">});</span>
<span class="kd">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">response</span><span class="p">.</span><span class="nx">json</span><span class="p">();</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">アップロード完了:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">result</span><span class="p">);</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">アップロードエラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// AbortController でリクエストをキャンセル</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">cancellableRequest</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">controller</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">AbortController</span><span class="p">();</span>
<span class="c1">// 5秒後にキャンセル</span>
<span class="nx">setTimeout</span><span class="p">(()</span> <span class="o">=></span> <span class="nx">controller</span><span class="p">.</span><span class="nx">abort</span><span class="p">(),</span> <span class="mi">5000</span><span class="p">);</span>
<span class="k">try</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">response</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">fetch</span><span class="p">(</span><span class="dl">"</span><span class="s2">https://httpbin.org/delay/10</span><span class="dl">"</span><span class="p">,</span> <span class="p">{</span>
<span class="na">signal</span><span class="p">:</span> <span class="nx">controller</span><span class="p">.</span><span class="nx">signal</span>
<span class="p">});</span>
<span class="kd">const</span> <span class="nx">data</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">response</span><span class="p">.</span><span class="nx">json</span><span class="p">();</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">データ:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">data</span><span class="p">);</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">error</span><span class="p">.</span><span class="nx">name</span> <span class="o">===</span> <span class="dl">"</span><span class="s2">AbortError</span><span class="dl">"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">リクエストがキャンセルされました</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>
<h2 id="モダンjavascriptes6">モダンJavaScript(ES6+)</h2>
<h3 id="分割代入">分割代入</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 配列の分割代入</span>
<span class="kd">const</span> <span class="nx">colors</span> <span class="o">=</span> <span class="p">[</span><span class="dl">"</span><span class="s2">red</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">green</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">blue</span><span class="dl">"</span><span class="p">];</span>
<span class="kd">const</span> <span class="p">[</span><span class="nx">first</span><span class="p">,</span> <span class="nx">second</span><span class="p">,</span> <span class="nx">third</span><span class="p">]</span> <span class="o">=</span> <span class="nx">colors</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">first</span><span class="p">);</span> <span class="c1">// "red"</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">second</span><span class="p">);</span> <span class="c1">// "green"</span>
<span class="c1">// デフォルト値</span>
<span class="kd">const</span> <span class="p">[</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">,</span> <span class="nx">c</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">yellow</span><span class="dl">"</span><span class="p">]</span> <span class="o">=</span> <span class="p">[</span><span class="dl">"</span><span class="s2">red</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">green</span><span class="dl">"</span><span class="p">];</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">c</span><span class="p">);</span> <span class="c1">// "yellow"</span>
<span class="c1">// 値の交換</span>
<span class="kd">let</span> <span class="nx">x</span> <span class="o">=</span> <span class="mi">1</span><span class="p">,</span> <span class="nx">y</span> <span class="o">=</span> <span class="mi">2</span><span class="p">;</span>
<span class="p">[</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">]</span> <span class="o">=</span> <span class="p">[</span><span class="nx">y</span><span class="p">,</span> <span class="nx">x</span><span class="p">];</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">);</span> <span class="c1">// 2, 1</span>
<span class="c1">// オブジェクトの分割代入</span>
<span class="kd">const</span> <span class="nx">person</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">name</span><span class="p">:</span> <span class="dl">"</span><span class="s2">田中太郎</span><span class="dl">"</span><span class="p">,</span>
<span class="na">age</span><span class="p">:</span> <span class="mi">30</span><span class="p">,</span>
<span class="na">city</span><span class="p">:</span> <span class="dl">"</span><span class="s2">東京</span><span class="dl">"</span>
<span class="p">};</span>
<span class="kd">const</span> <span class="p">{</span> <span class="nx">name</span><span class="p">,</span> <span class="nx">age</span><span class="p">,</span> <span class="nx">city</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">person</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">name</span><span class="p">);</span> <span class="c1">// "田中太郎"</span>
<span class="c1">// プロパティ名を変更</span>
<span class="kd">const</span> <span class="p">{</span> <span class="na">name</span><span class="p">:</span> <span class="nx">fullName</span><span class="p">,</span> <span class="na">age</span><span class="p">:</span> <span class="nx">years</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">person</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">fullName</span><span class="p">);</span> <span class="c1">// "田中太郎"</span>
<span class="c1">// ネストした分割代入</span>
<span class="kd">const</span> <span class="nx">user</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">id</span><span class="p">:</span> <span class="mi">1</span><span class="p">,</span>
<span class="na">info</span><span class="p">:</span> <span class="p">{</span>
<span class="na">name</span><span class="p">:</span> <span class="dl">"</span><span class="s2">太郎</span><span class="dl">"</span><span class="p">,</span>
<span class="na">contact</span><span class="p">:</span> <span class="p">{</span>
<span class="na">email</span><span class="p">:</span> <span class="dl">"</span><span class="s2">taro@example.com</span><span class="dl">"</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="kd">const</span> <span class="p">{</span> <span class="na">info</span><span class="p">:</span> <span class="p">{</span> <span class="na">name</span><span class="p">:</span> <span class="nx">userName</span><span class="p">,</span> <span class="na">contact</span><span class="p">:</span> <span class="p">{</span> <span class="nx">email</span> <span class="p">}</span> <span class="p">}</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">user</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">userName</span><span class="p">);</span> <span class="c1">// "太郎"</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">email</span><span class="p">);</span> <span class="c1">// "taro@example.com"</span>
<span class="c1">// 関数の引数での分割代入</span>
<span class="kd">function</span> <span class="nx">greetUser</span><span class="p">({</span> <span class="nx">name</span><span class="p">,</span> <span class="nx">age</span> <span class="o">=</span> <span class="mi">0</span> <span class="p">})</span> <span class="p">{</span>
<span class="k">return</span> <span class="s2">`こんにちは、</span><span class="p">${</span><span class="nx">name</span><span class="p">}</span><span class="s2">さん(</span><span class="p">${</span><span class="nx">age</span><span class="p">}</span><span class="s2">歳)`</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">greetUser</span><span class="p">({</span> <span class="na">name</span><span class="p">:</span> <span class="dl">"</span><span class="s2">花子</span><span class="dl">"</span><span class="p">,</span> <span class="na">age</span><span class="p">:</span> <span class="mi">25</span> <span class="p">}));</span> <span class="c1">// "こんにちは、花子さん(25歳)"</span>
</code></pre></div></div>
<h3 id="モジュール">モジュール</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// math.js(エクスポート)</span>
<span class="k">export</span> <span class="kd">const</span> <span class="nx">PI</span> <span class="o">=</span> <span class="mf">3.14159</span><span class="p">;</span>
<span class="k">export</span> <span class="kd">function</span> <span class="nx">add</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">a</span> <span class="o">+</span> <span class="nx">b</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">export</span> <span class="kd">function</span> <span class="nx">multiply</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">a</span> <span class="o">*</span> <span class="nx">b</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// デフォルトエクスポート</span>
<span class="k">export</span> <span class="k">default</span> <span class="kd">function</span> <span class="nx">subtract</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">a</span> <span class="o">-</span> <span class="nx">b</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// main.js(インポート)</span>
<span class="k">import</span> <span class="nx">subtract</span><span class="p">,</span> <span class="p">{</span> <span class="nx">PI</span><span class="p">,</span> <span class="nx">add</span><span class="p">,</span> <span class="nx">multiply</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">./math.js</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">PI</span><span class="p">);</span> <span class="c1">// 3.14159</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">add</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">));</span> <span class="c1">// 5</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">multiply</span><span class="p">(</span><span class="mi">4</span><span class="p">,</span> <span class="mi">5</span><span class="p">));</span> <span class="c1">// 20</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">subtract</span><span class="p">(</span><span class="mi">10</span><span class="p">,</span> <span class="mi">3</span><span class="p">));</span> <span class="c1">// 7</span>
<span class="c1">// 名前を変更してインポート</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">add</span> <span class="k">as</span> <span class="nx">sum</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">./math.js</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">sum</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">));</span> <span class="c1">// 3</span>
<span class="c1">// 全てインポート</span>
<span class="k">import</span> <span class="o">*</span> <span class="k">as</span> <span class="nx">MathUtils</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">./math.js</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">MathUtils</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">));</span> <span class="c1">// 3</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">MathUtils</span><span class="p">.</span><span class="nx">PI</span><span class="p">);</span> <span class="c1">// 3.14159</span>
<span class="c1">// 動的インポート(非同期)</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">loadMathModule</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">mathModule</span> <span class="o">=</span> <span class="k">await</span> <span class="k">import</span><span class="p">(</span><span class="dl">'</span><span class="s1">./math.js</span><span class="dl">'</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">mathModule</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">));</span> <span class="c1">// 3</span>
<span class="p">}</span>
</code></pre></div></div>
<h3 id="クラス">クラス</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// ES6 クラス</span>
<span class="kd">class</span> <span class="nx">Person</span> <span class="p">{</span>
<span class="c1">// コンストラクタ</span>
<span class="kd">constructor</span><span class="p">(</span><span class="nx">name</span><span class="p">,</span> <span class="nx">age</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">name</span> <span class="o">=</span> <span class="nx">name</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">age</span> <span class="o">=</span> <span class="nx">age</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// メソッド</span>
<span class="nx">greet</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="s2">`こんにちは、私は</span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">name</span><span class="p">}</span><span class="s2">です`</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// ゲッター</span>
<span class="kd">get</span> <span class="nx">info</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="s2">`</span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">name</span><span class="p">}</span><span class="s2">(</span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">age</span><span class="p">}</span><span class="s2">歳)`</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// セッター</span>
<span class="kd">set</span> <span class="nx">age</span><span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">value</span> <span class="o"><</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
<span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="dl">"</span><span class="s2">年齢は0以上である必要があります</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">_age</span> <span class="o">=</span> <span class="nx">value</span><span class="p">;</span>
<span class="p">}</span>
<span class="kd">get</span> <span class="nx">age</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">_age</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// 静的メソッド</span>
<span class="kd">static</span> <span class="nx">createAdult</span><span class="p">(</span><span class="nx">name</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">(</span><span class="nx">name</span><span class="p">,</span> <span class="mi">20</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// クラスの使用</span>
<span class="kd">const</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">(</span><span class="dl">"</span><span class="s2">太郎</span><span class="dl">"</span><span class="p">,</span> <span class="mi">25</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">person</span><span class="p">.</span><span class="nx">greet</span><span class="p">());</span> <span class="c1">// "こんにちは、私は太郎です"</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">person</span><span class="p">.</span><span class="nx">info</span><span class="p">);</span> <span class="c1">// "太郎(25歳)"</span>
<span class="c1">// 静的メソッドの使用</span>
<span class="kd">const</span> <span class="nx">adult</span> <span class="o">=</span> <span class="nx">Person</span><span class="p">.</span><span class="nx">createAdult</span><span class="p">(</span><span class="dl">"</span><span class="s2">花子</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// 継承</span>
<span class="kd">class</span> <span class="nx">Student</span> <span class="kd">extends</span> <span class="nx">Person</span> <span class="p">{</span>
<span class="kd">constructor</span><span class="p">(</span><span class="nx">name</span><span class="p">,</span> <span class="nx">age</span><span class="p">,</span> <span class="nx">school</span><span class="p">)</span> <span class="p">{</span>
<span class="k">super</span><span class="p">(</span><span class="nx">name</span><span class="p">,</span> <span class="nx">age</span><span class="p">);</span> <span class="c1">// 親クラスのコンストラクタを呼び出し</span>
<span class="k">this</span><span class="p">.</span><span class="nx">school</span> <span class="o">=</span> <span class="nx">school</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">greet</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="s2">`</span><span class="p">${</span><span class="k">super</span><span class="p">.</span><span class="nx">greet</span><span class="p">()}</span><span class="s2">、</span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">school</span><span class="p">}</span><span class="s2">の学生です`</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">study</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="s2">`</span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">name</span><span class="p">}</span><span class="s2">は勉強しています`</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">const</span> <span class="nx">student</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Student</span><span class="p">(</span><span class="dl">"</span><span class="s2">次郎</span><span class="dl">"</span><span class="p">,</span> <span class="mi">18</span><span class="p">,</span> <span class="dl">"</span><span class="s2">東京大学</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">student</span><span class="p">.</span><span class="nx">greet</span><span class="p">());</span> <span class="c1">// "こんにちは、私は次郎です、東京大学の学生です"</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">student</span><span class="p">.</span><span class="nx">study</span><span class="p">());</span> <span class="c1">// "次郎は勉強しています"</span>
<span class="c1">// プライベートフィールド(ES2022+)</span>
<span class="kd">class</span> <span class="nx">BankAccount</span> <span class="p">{</span>
<span class="err">#</span><span class="nx">balance</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="c1">// プライベートフィールド</span>
<span class="kd">constructor</span><span class="p">(</span><span class="nx">initialBalance</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="err">#</span><span class="nx">balance</span> <span class="o">=</span> <span class="nx">initialBalance</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">deposit</span><span class="p">(</span><span class="nx">amount</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="err">#</span><span class="nx">balance</span> <span class="o">+=</span> <span class="nx">amount</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">getBalance</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="err">#</span><span class="nx">balance</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// プライベートメソッド</span>
<span class="err">#</span><span class="nx">calculateInterest</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="err">#</span><span class="nx">balance</span> <span class="o">*</span> <span class="mf">0.01</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">const</span> <span class="nx">account</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">BankAccount</span><span class="p">(</span><span class="mi">1000</span><span class="p">);</span>
<span class="nx">account</span><span class="p">.</span><span class="nx">deposit</span><span class="p">(</span><span class="mi">500</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">account</span><span class="p">.</span><span class="nx">getBalance</span><span class="p">());</span> <span class="c1">// 1500</span>
<span class="c1">// console.log(account.#balance); // エラー: プライベートフィールドにはアクセス不可</span>
</code></pre></div></div>
<h2 id="エラーハンドリング">エラーハンドリング</h2>
<h3 id="try-catch文">try-catch文</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 基本的なエラーハンドリング</span>
<span class="k">try</span> <span class="p">{</span>
<span class="c1">// エラーが発生する可能性のあるコード</span>
<span class="kd">let</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">riskyOperation</span><span class="p">();</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">成功:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">result</span><span class="p">);</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="c1">// エラーが発生した場合の処理</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラーが発生しました:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
<span class="p">}</span> <span class="k">finally</span> <span class="p">{</span>
<span class="c1">// 必ず実行される処理</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">処理完了</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="c1">// 異なるタイプのエラーの処理</span>
<span class="kd">function</span> <span class="nx">parseJSON</span><span class="p">(</span><span class="nx">jsonString</span><span class="p">)</span> <span class="p">{</span>
<span class="k">try</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="nx">jsonString</span><span class="p">);</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">error</span> <span class="k">instanceof</span> <span class="nx">SyntaxError</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">JSON形式が正しくありません:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">予期しないエラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">return</span> <span class="kc">null</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// カスタムエラー</span>
<span class="kd">class</span> <span class="nx">ValidationError</span> <span class="kd">extends</span> <span class="nb">Error</span> <span class="p">{</span>
<span class="kd">constructor</span><span class="p">(</span><span class="nx">message</span><span class="p">,</span> <span class="nx">field</span><span class="p">)</span> <span class="p">{</span>
<span class="k">super</span><span class="p">(</span><span class="nx">message</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">name</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">ValidationError</span><span class="dl">"</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">field</span> <span class="o">=</span> <span class="nx">field</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">validateEmail</span><span class="p">(</span><span class="nx">email</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">email</span><span class="p">.</span><span class="nx">includes</span><span class="p">(</span><span class="dl">"</span><span class="s2">@</span><span class="dl">"</span><span class="p">))</span> <span class="p">{</span>
<span class="k">throw</span> <span class="k">new</span> <span class="nx">ValidationError</span><span class="p">(</span><span class="dl">"</span><span class="s2">有効なメールアドレスではありません</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">email</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// カスタムエラーの使用</span>
<span class="k">try</span> <span class="p">{</span>
<span class="nx">validateEmail</span><span class="p">(</span><span class="dl">"</span><span class="s2">invalid-email</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">error</span> <span class="k">instanceof</span> <span class="nx">ValidationError</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`検証エラー(</span><span class="p">${</span><span class="nx">error</span><span class="p">.</span><span class="nx">field</span><span class="p">}</span><span class="s2">): </span><span class="p">${</span><span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">予期しないエラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// async/await でのエラーハンドリング</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">fetchUserData</span><span class="p">(</span><span class="nx">id</span><span class="p">)</span> <span class="p">{</span>
<span class="k">try</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">response</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">fetch</span><span class="p">(</span><span class="s2">`/api/users/</span><span class="p">${</span><span class="nx">id</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">response</span><span class="p">.</span><span class="nx">ok</span><span class="p">)</span> <span class="p">{</span>
<span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="s2">`ユーザー取得失敗: </span><span class="p">${</span><span class="nx">response</span><span class="p">.</span><span class="nx">status</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="p">}</span>
<span class="kd">const</span> <span class="nx">userData</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">response</span><span class="p">.</span><span class="nx">json</span><span class="p">();</span>
<span class="k">return</span> <span class="nx">userData</span><span class="p">;</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ユーザーデータ取得エラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
<span class="k">throw</span> <span class="nx">error</span><span class="p">;</span> <span class="c1">// エラーを再度投げる</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// エラーのロギング</span>
<span class="kd">function</span> <span class="nx">logError</span><span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="dl">"</span><span class="s2">Error:</span><span class="dl">"</span><span class="p">,</span> <span class="p">{</span>
<span class="na">message</span><span class="p">:</span> <span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">,</span>
<span class="na">stack</span><span class="p">:</span> <span class="nx">error</span><span class="p">.</span><span class="nx">stack</span><span class="p">,</span>
<span class="na">timestamp</span><span class="p">:</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">().</span><span class="nx">toISOString</span><span class="p">()</span>
<span class="p">});</span>
<span class="p">}</span>
</code></pre></div></div>
<h2 id="ブラウザapi">ブラウザAPI</h2>
<h3 id="local-storage">Local Storage</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// データの保存</span>
<span class="nx">localStorage</span><span class="p">.</span><span class="nx">setItem</span><span class="p">(</span><span class="dl">"</span><span class="s2">username</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">田中太郎</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">localStorage</span><span class="p">.</span><span class="nx">setItem</span><span class="p">(</span><span class="dl">"</span><span class="s2">settings</span><span class="dl">"</span><span class="p">,</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">({</span>
<span class="na">theme</span><span class="p">:</span> <span class="dl">"</span><span class="s2">dark</span><span class="dl">"</span><span class="p">,</span>
<span class="na">language</span><span class="p">:</span> <span class="dl">"</span><span class="s2">ja</span><span class="dl">"</span>
<span class="p">}));</span>
<span class="c1">// データの取得</span>
<span class="kd">const</span> <span class="nx">username</span> <span class="o">=</span> <span class="nx">localStorage</span><span class="p">.</span><span class="nx">getItem</span><span class="p">(</span><span class="dl">"</span><span class="s2">username</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">username</span><span class="p">);</span> <span class="c1">// "田中太郎"</span>
<span class="kd">const</span> <span class="nx">settings</span> <span class="o">=</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="nx">localStorage</span><span class="p">.</span><span class="nx">getItem</span><span class="p">(</span><span class="dl">"</span><span class="s2">settings</span><span class="dl">"</span><span class="p">));</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">settings</span><span class="p">);</span> <span class="c1">// { theme: "dark", language: "ja" }</span>
<span class="c1">// データの削除</span>
<span class="nx">localStorage</span><span class="p">.</span><span class="nx">removeItem</span><span class="p">(</span><span class="dl">"</span><span class="s2">username</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// 全データの削除</span>
<span class="nx">localStorage</span><span class="p">.</span><span class="nx">clear</span><span class="p">();</span>
<span class="c1">// ストレージの変更を監視</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">storage</span><span class="dl">"</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ストレージが変更されました:</span><span class="dl">"</span><span class="p">,</span> <span class="p">{</span>
<span class="na">key</span><span class="p">:</span> <span class="nx">e</span><span class="p">.</span><span class="nx">key</span><span class="p">,</span>
<span class="na">oldValue</span><span class="p">:</span> <span class="nx">e</span><span class="p">.</span><span class="nx">oldValue</span><span class="p">,</span>
<span class="na">newValue</span><span class="p">:</span> <span class="nx">e</span><span class="p">.</span><span class="nx">newValue</span>
<span class="p">});</span>
<span class="p">});</span>
<span class="c1">// セッションストレージ(タブを閉じると削除される)</span>
<span class="nx">sessionStorage</span><span class="p">.</span><span class="nx">setItem</span><span class="p">(</span><span class="dl">"</span><span class="s2">temporary</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">一時的なデータ</span><span class="dl">"</span><span class="p">);</span>
</code></pre></div></div>
<h3 id="geolocation-api">Geolocation API</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 現在位置の取得</span>
<span class="k">if</span> <span class="p">(</span><span class="dl">"</span><span class="s2">geolocation</span><span class="dl">"</span> <span class="k">in</span> <span class="nb">navigator</span><span class="p">)</span> <span class="p">{</span>
<span class="nb">navigator</span><span class="p">.</span><span class="nx">geolocation</span><span class="p">.</span><span class="nx">getCurrentPosition</span><span class="p">(</span>
<span class="kd">function</span><span class="p">(</span><span class="nx">position</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">latitude</span> <span class="o">=</span> <span class="nx">position</span><span class="p">.</span><span class="nx">coords</span><span class="p">.</span><span class="nx">latitude</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">longitude</span> <span class="o">=</span> <span class="nx">position</span><span class="p">.</span><span class="nx">coords</span><span class="p">.</span><span class="nx">longitude</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`現在位置: </span><span class="p">${</span><span class="nx">latitude</span><span class="p">}</span><span class="s2">, </span><span class="p">${</span><span class="nx">longitude</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="p">},</span>
<span class="kd">function</span><span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">位置取得エラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
<span class="p">},</span>
<span class="p">{</span>
<span class="na">enableHighAccuracy</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> <span class="c1">// 高精度</span>
<span class="na">timeout</span><span class="p">:</span> <span class="mi">10000</span><span class="p">,</span> <span class="c1">// タイムアウト(10秒)</span>
<span class="na">maximumAge</span><span class="p">:</span> <span class="mi">60000</span> <span class="c1">// キャッシュ有効期間(1分)</span>
<span class="p">}</span>
<span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">Geolocation APIはサポートされていません</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="c1">// 位置の監視</span>
<span class="kd">const</span> <span class="nx">watchId</span> <span class="o">=</span> <span class="nb">navigator</span><span class="p">.</span><span class="nx">geolocation</span><span class="p">.</span><span class="nx">watchPosition</span><span class="p">(</span>
<span class="kd">function</span><span class="p">(</span><span class="nx">position</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">位置が変更されました:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">position</span><span class="p">.</span><span class="nx">coords</span><span class="p">);</span>
<span class="p">},</span>
<span class="kd">function</span><span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">監視エラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">);</span>
<span class="c1">// 監視の停止</span>
<span class="c1">// navigator.geolocation.clearWatch(watchId);</span>
</code></pre></div></div>
<h3 id="notification-api">Notification API</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 通知の許可を要求</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">requestNotificationPermission</span><span class="p">()</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="dl">"</span><span class="s2">Notification</span><span class="dl">"</span> <span class="k">in</span> <span class="nb">window</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">permission</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">Notification</span><span class="p">.</span><span class="nx">requestPermission</span><span class="p">();</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">通知許可:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">permission</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">permission</span> <span class="o">===</span> <span class="dl">"</span><span class="s2">granted</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// 通知の表示</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">showNotification</span><span class="p">(</span><span class="nx">title</span><span class="p">,</span> <span class="nx">options</span> <span class="o">=</span> <span class="p">{})</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">hasPermission</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">requestNotificationPermission</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">hasPermission</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">notification</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Notification</span><span class="p">(</span><span class="nx">title</span><span class="p">,</span> <span class="p">{</span>
<span class="na">body</span><span class="p">:</span> <span class="nx">options</span><span class="p">.</span><span class="nx">body</span> <span class="o">||</span> <span class="dl">""</span><span class="p">,</span>
<span class="na">icon</span><span class="p">:</span> <span class="nx">options</span><span class="p">.</span><span class="nx">icon</span> <span class="o">||</span> <span class="dl">"</span><span class="s2">/default-icon.png</span><span class="dl">"</span><span class="p">,</span>
<span class="na">tag</span><span class="p">:</span> <span class="nx">options</span><span class="p">.</span><span class="nx">tag</span> <span class="o">||</span> <span class="dl">"</span><span class="s2">default</span><span class="dl">"</span><span class="p">,</span>
<span class="p">...</span><span class="nx">options</span>
<span class="p">});</span>
<span class="nx">notification</span><span class="p">.</span><span class="nx">onclick</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">通知がクリックされました</span><span class="dl">"</span><span class="p">);</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">focus</span><span class="p">();</span>
<span class="k">this</span><span class="p">.</span><span class="nx">close</span><span class="p">();</span>
<span class="p">};</span>
<span class="c1">// 自動で閉じる</span>
<span class="nx">setTimeout</span><span class="p">(()</span> <span class="o">=></span> <span class="nx">notification</span><span class="p">.</span><span class="nx">close</span><span class="p">(),</span> <span class="mi">5000</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// 使用例</span>
<span class="nx">showNotification</span><span class="p">(</span><span class="dl">"</span><span class="s2">新しいメッセージ</span><span class="dl">"</span><span class="p">,</span> <span class="p">{</span>
<span class="na">body</span><span class="p">:</span> <span class="dl">"</span><span class="s2">太郎さんからメッセージが届きました</span><span class="dl">"</span><span class="p">,</span>
<span class="na">icon</span><span class="p">:</span> <span class="dl">"</span><span class="s2">/message-icon.png</span><span class="dl">"</span><span class="p">,</span>
<span class="na">tag</span><span class="p">:</span> <span class="dl">"</span><span class="s2">message</span><span class="dl">"</span>
<span class="p">});</span>
</code></pre></div></div>
<h2 id="実践的なコード例">実践的なコード例</h2>
<h3 id="フォームバリデーション">フォームバリデーション</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">class</span> <span class="nx">FormValidator</span> <span class="p">{</span>
<span class="kd">constructor</span><span class="p">(</span><span class="nx">form</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">form</span> <span class="o">=</span> <span class="nx">form</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">errors</span> <span class="o">=</span> <span class="p">{};</span>
<span class="k">this</span><span class="p">.</span><span class="nx">rules</span> <span class="o">=</span> <span class="p">{};</span>
<span class="k">this</span><span class="p">.</span><span class="nx">init</span><span class="p">();</span>
<span class="p">}</span>
<span class="nx">init</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">form</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">submit</span><span class="dl">"</span><span class="p">,</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
<span class="k">this</span><span class="p">.</span><span class="nx">validate</span><span class="p">();</span>
<span class="p">});</span>
<span class="c1">// リアルタイムバリデーション</span>
<span class="k">this</span><span class="p">.</span><span class="nx">form</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">input</span><span class="dl">"</span><span class="p">,</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">validateField</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="nx">addRule</span><span class="p">(</span><span class="nx">fieldName</span><span class="p">,</span> <span class="nx">rule</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">rules</span><span class="p">[</span><span class="nx">fieldName</span><span class="p">])</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">rules</span><span class="p">[</span><span class="nx">fieldName</span><span class="p">]</span> <span class="o">=</span> <span class="p">[];</span>
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">rules</span><span class="p">[</span><span class="nx">fieldName</span><span class="p">].</span><span class="nx">push</span><span class="p">(</span><span class="nx">rule</span><span class="p">);</span>
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">validateField</span><span class="p">(</span><span class="nx">field</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">rules</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">rules</span><span class="p">[</span><span class="nx">field</span><span class="p">.</span><span class="nx">name</span><span class="p">];</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">rules</span><span class="p">)</span> <span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">clearError</span><span class="p">(</span><span class="nx">field</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">const</span> <span class="nx">rule</span> <span class="k">of</span> <span class="nx">rules</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">rule</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="nx">field</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">result</span><span class="p">.</span><span class="nx">valid</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">addError</span><span class="p">(</span><span class="nx">field</span><span class="p">.</span><span class="nx">name</span><span class="p">,</span> <span class="nx">result</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">showError</span><span class="p">(</span><span class="nx">field</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span>
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">showSuccess</span><span class="p">(</span><span class="nx">field</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span>
<span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">validate</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">errors</span> <span class="o">=</span> <span class="p">{};</span>
<span class="kd">let</span> <span class="nx">isValid</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">fields</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">form</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="dl">"</span><span class="s2">[name]</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">fields</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">field</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">validateField</span><span class="p">(</span><span class="nx">field</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">isValid</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">isValid</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">onSuccess</span><span class="p">();</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">onError</span><span class="p">();</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">isValid</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">addError</span><span class="p">(</span><span class="nx">fieldName</span><span class="p">,</span> <span class="nx">message</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">errors</span><span class="p">[</span><span class="nx">fieldName</span><span class="p">])</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">errors</span><span class="p">[</span><span class="nx">fieldName</span><span class="p">]</span> <span class="o">=</span> <span class="p">[];</span>
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">errors</span><span class="p">[</span><span class="nx">fieldName</span><span class="p">].</span><span class="nx">push</span><span class="p">(</span><span class="nx">message</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">clearError</span><span class="p">(</span><span class="nx">fieldName</span><span class="p">)</span> <span class="p">{</span>
<span class="k">delete</span> <span class="k">this</span><span class="p">.</span><span class="nx">errors</span><span class="p">[</span><span class="nx">fieldName</span><span class="p">];</span>
<span class="k">this</span><span class="p">.</span><span class="nx">hideError</span><span class="p">(</span><span class="nx">fieldName</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">showError</span><span class="p">(</span><span class="nx">fieldName</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">field</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">form</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s2">`[name="</span><span class="p">${</span><span class="nx">fieldName</span><span class="p">}</span><span class="s2">"]`</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">errorContainer</span> <span class="o">=</span> <span class="nx">field</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">.error-message</span><span class="dl">"</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">errorContainer</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">errorContainer</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">errors</span><span class="p">[</span><span class="nx">fieldName</span><span class="p">][</span><span class="mi">0</span><span class="p">];</span>
<span class="nx">errorContainer</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">block</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">field</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="dl">"</span><span class="s2">error</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">field</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">remove</span><span class="p">(</span><span class="dl">"</span><span class="s2">success</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">hideError</span><span class="p">(</span><span class="nx">fieldName</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">field</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">form</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s2">`[name="</span><span class="p">${</span><span class="nx">fieldName</span><span class="p">}</span><span class="s2">"]`</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">errorContainer</span> <span class="o">=</span> <span class="nx">field</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">.error-message</span><span class="dl">"</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">errorContainer</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">errorContainer</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">none</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">field</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">remove</span><span class="p">(</span><span class="dl">"</span><span class="s2">error</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">showSuccess</span><span class="p">(</span><span class="nx">fieldName</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">field</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">form</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s2">`[name="</span><span class="p">${</span><span class="nx">fieldName</span><span class="p">}</span><span class="s2">"]`</span><span class="p">);</span>
<span class="nx">field</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="dl">"</span><span class="s2">success</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">field</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">remove</span><span class="p">(</span><span class="dl">"</span><span class="s2">error</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">onSuccess</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">フォームバリデーション成功</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// フォーム送信処理</span>
<span class="p">}</span>
<span class="nx">onError</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">フォームバリデーションエラー:</span><span class="dl">"</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">errors</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// バリデーションルール</span>
<span class="kd">const</span> <span class="nx">rules</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">required</span><span class="p">:</span> <span class="p">(</span><span class="nx">message</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">この項目は必須です</span><span class="dl">"</span><span class="p">)</span> <span class="o">=></span> <span class="p">({</span>
<span class="na">test</span><span class="p">:</span> <span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="o">=></span> <span class="p">({</span>
<span class="na">valid</span><span class="p">:</span> <span class="nx">value</span><span class="p">.</span><span class="nx">trim</span><span class="p">().</span><span class="nx">length</span> <span class="o">></span> <span class="mi">0</span><span class="p">,</span>
<span class="nx">message</span>
<span class="p">})</span>
<span class="p">}),</span>
<span class="na">email</span><span class="p">:</span> <span class="p">(</span><span class="nx">message</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">有効なメールアドレスを入力してください</span><span class="dl">"</span><span class="p">)</span> <span class="o">=></span> <span class="p">({</span>
<span class="na">test</span><span class="p">:</span> <span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="o">=></span> <span class="p">({</span>
<span class="na">valid</span><span class="p">:</span> <span class="sr">/^</span><span class="se">[^\s</span><span class="sr">@</span><span class="se">]</span><span class="sr">+@</span><span class="se">[^\s</span><span class="sr">@</span><span class="se">]</span><span class="sr">+</span><span class="se">\.[^\s</span><span class="sr">@</span><span class="se">]</span><span class="sr">+$/</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="nx">value</span><span class="p">),</span>
<span class="nx">message</span>
<span class="p">})</span>
<span class="p">}),</span>
<span class="na">minLength</span><span class="p">:</span> <span class="p">(</span><span class="nx">min</span><span class="p">,</span> <span class="nx">message</span><span class="p">)</span> <span class="o">=></span> <span class="p">({</span>
<span class="na">test</span><span class="p">:</span> <span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="o">=></span> <span class="p">({</span>
<span class="na">valid</span><span class="p">:</span> <span class="nx">value</span><span class="p">.</span><span class="nx">length</span> <span class="o">>=</span> <span class="nx">min</span><span class="p">,</span>
<span class="na">message</span><span class="p">:</span> <span class="nx">message</span> <span class="o">||</span> <span class="s2">`</span><span class="p">${</span><span class="nx">min</span><span class="p">}</span><span class="s2">文字以上で入力してください`</span>
<span class="p">})</span>
<span class="p">}),</span>
<span class="na">phone</span><span class="p">:</span> <span class="p">(</span><span class="nx">message</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">有効な電話番号を入力してください</span><span class="dl">"</span><span class="p">)</span> <span class="o">=></span> <span class="p">({</span>
<span class="na">test</span><span class="p">:</span> <span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="o">=></span> <span class="p">({</span>
<span class="na">valid</span><span class="p">:</span> <span class="sr">/^</span><span class="se">[\d</span><span class="sr">-</span><span class="se">]</span><span class="sr">+$/</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="nx">value</span><span class="p">),</span>
<span class="nx">message</span>
<span class="p">})</span>
<span class="p">})</span>
<span class="p">};</span>
<span class="c1">// 使用例</span>
<span class="kd">const</span> <span class="nx">form</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#contactForm</span><span class="dl">"</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">validator</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">FormValidator</span><span class="p">(</span><span class="nx">form</span><span class="p">);</span>
<span class="nx">validator</span>
<span class="p">.</span><span class="nx">addRule</span><span class="p">(</span><span class="dl">"</span><span class="s2">name</span><span class="dl">"</span><span class="p">,</span> <span class="nx">rules</span><span class="p">.</span><span class="nx">required</span><span class="p">())</span>
<span class="p">.</span><span class="nx">addRule</span><span class="p">(</span><span class="dl">"</span><span class="s2">email</span><span class="dl">"</span><span class="p">,</span> <span class="nx">rules</span><span class="p">.</span><span class="nx">required</span><span class="p">())</span>
<span class="p">.</span><span class="nx">addRule</span><span class="p">(</span><span class="dl">"</span><span class="s2">email</span><span class="dl">"</span><span class="p">,</span> <span class="nx">rules</span><span class="p">.</span><span class="nx">email</span><span class="p">())</span>
<span class="p">.</span><span class="nx">addRule</span><span class="p">(</span><span class="dl">"</span><span class="s2">phone</span><span class="dl">"</span><span class="p">,</span> <span class="nx">rules</span><span class="p">.</span><span class="nx">phone</span><span class="p">())</span>
<span class="p">.</span><span class="nx">addRule</span><span class="p">(</span><span class="dl">"</span><span class="s2">message</span><span class="dl">"</span><span class="p">,</span> <span class="nx">rules</span><span class="p">.</span><span class="nx">required</span><span class="p">())</span>
<span class="p">.</span><span class="nx">addRule</span><span class="p">(</span><span class="dl">"</span><span class="s2">message</span><span class="dl">"</span><span class="p">,</span> <span class="nx">rules</span><span class="p">.</span><span class="nx">minLength</span><span class="p">(</span><span class="mi">10</span><span class="p">));</span>
</code></pre></div></div>
<h3 id="シンプルなspasingle-page-application">シンプルなSPA(Single Page Application)</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">class</span> <span class="nx">SimpleRouter</span> <span class="p">{</span>
<span class="kd">constructor</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">routes</span> <span class="o">=</span> <span class="p">{};</span>
<span class="k">this</span><span class="p">.</span><span class="nx">currentRoute</span> <span class="o">=</span> <span class="dl">""</span><span class="p">;</span>
<span class="c1">// ブラウザの戻る/進むボタン対応</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">popstate</span><span class="dl">"</span><span class="p">,</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">handleRoute</span><span class="p">();</span>
<span class="p">});</span>
<span class="c1">// リンククリック時の処理</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">matches</span><span class="p">(</span><span class="dl">"</span><span class="s2">[data-route]</span><span class="dl">"</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
<span class="kd">const</span> <span class="nx">route</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">getAttribute</span><span class="p">(</span><span class="dl">"</span><span class="s2">data-route</span><span class="dl">"</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">navigate</span><span class="p">(</span><span class="nx">route</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="c1">// 初期ルート処理</span>
<span class="k">this</span><span class="p">.</span><span class="nx">handleRoute</span><span class="p">();</span>
<span class="p">}</span>
<span class="nx">addRoute</span><span class="p">(</span><span class="nx">path</span><span class="p">,</span> <span class="nx">handler</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">routes</span><span class="p">[</span><span class="nx">path</span><span class="p">]</span> <span class="o">=</span> <span class="nx">handler</span><span class="p">;</span>
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">navigate</span><span class="p">(</span><span class="nx">path</span><span class="p">)</span> <span class="p">{</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">history</span><span class="p">.</span><span class="nx">pushState</span><span class="p">({},</span> <span class="dl">""</span><span class="p">,</span> <span class="nx">path</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">handleRoute</span><span class="p">();</span>
<span class="p">}</span>
<span class="nx">handleRoute</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">path</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">pathname</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">currentRoute</span> <span class="o">=</span> <span class="nx">path</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">handler</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">routes</span><span class="p">[</span><span class="nx">path</span><span class="p">]</span> <span class="o">||</span> <span class="k">this</span><span class="p">.</span><span class="nx">routes</span><span class="p">[</span><span class="dl">"</span><span class="s2">*</span><span class="dl">"</span><span class="p">];</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">handler</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">handler</span><span class="p">();</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">show404</span><span class="p">();</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nx">show404</span><span class="p">()</span> <span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#app</span><span class="dl">"</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="s2">`
<h1>404 - ページが見つかりません</h1>
<p><a href="/" data-route="/">ホームに戻る</a></p>
`</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// ページコンポーネント</span>
<span class="kd">const</span> <span class="nx">pages</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">home</span><span class="p">:</span> <span class="p">()</span> <span class="o">=></span> <span class="s2">`
<h1>ホームページ</h1>
<nav>
<a href="/about" data-route="/about">会社概要</a> |
<a href="/contact" data-route="/contact">お問い合わせ</a>
</nav>
<p>ようこそ、私たちのサイトへ!</p>
`</span><span class="p">,</span>
<span class="na">about</span><span class="p">:</span> <span class="p">()</span> <span class="o">=></span> <span class="s2">`
<h1>会社概要</h1>
<nav>
<a href="/" data-route="/">ホーム</a> |
<a href="/contact" data-route="/contact">お問い合わせ</a>
</nav>
<p>私たちは革新的なソリューションを提供する会社です。</p>
`</span><span class="p">,</span>
<span class="na">contact</span><span class="p">:</span> <span class="p">()</span> <span class="o">=></span> <span class="s2">`
<h1>お問い合わせ</h1>
<nav>
<a href="/" data-route="/">ホーム</a> |
<a href="/about" data-route="/about">会社概要</a>
</nav>
<form id="contactForm">
<div>
<label>お名前: <input type="text" name="name" required></label>
</div>
<div>
<label>メール: <input type="email" name="email" required></label>
</div>
<div>
<label>メッセージ: <textarea name="message" required></textarea></label>
</div>
<button type="submit">送信</button>
</form>
`</span>
<span class="p">};</span>
<span class="c1">// ルーター初期化</span>
<span class="kd">const</span> <span class="nx">router</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">SimpleRouter</span><span class="p">();</span>
<span class="nx">router</span>
<span class="p">.</span><span class="nx">addRoute</span><span class="p">(</span><span class="dl">"</span><span class="s2">/</span><span class="dl">"</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#app</span><span class="dl">"</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">pages</span><span class="p">.</span><span class="nx">home</span><span class="p">();</span>
<span class="p">})</span>
<span class="p">.</span><span class="nx">addRoute</span><span class="p">(</span><span class="dl">"</span><span class="s2">/about</span><span class="dl">"</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#app</span><span class="dl">"</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">pages</span><span class="p">.</span><span class="nx">about</span><span class="p">();</span>
<span class="p">})</span>
<span class="p">.</span><span class="nx">addRoute</span><span class="p">(</span><span class="dl">"</span><span class="s2">/contact</span><span class="dl">"</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#app</span><span class="dl">"</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">pages</span><span class="p">.</span><span class="nx">contact</span><span class="p">();</span>
<span class="c1">// お問い合わせフォームのイベント設定</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#contactForm</span><span class="dl">"</span><span class="p">).</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">submit</span><span class="dl">"</span><span class="p">,</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
<span class="nx">alert</span><span class="p">(</span><span class="dl">"</span><span class="s2">お問い合わせありがとうございます!</span><span class="dl">"</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">});</span>
</code></pre></div></div>
<h2 id="デバッグとテスト">デバッグとテスト</h2>
<h3 id="デバッグ技法">デバッグ技法</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// コンソール出力</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">基本的なログ</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">info</span><span class="p">(</span><span class="dl">"</span><span class="s2">情報メッセージ</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">warn</span><span class="p">(</span><span class="dl">"</span><span class="s2">警告メッセージ</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラーメッセージ</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// オブジェクトの詳細表示</span>
<span class="kd">const</span> <span class="nx">user</span> <span class="o">=</span> <span class="p">{</span> <span class="na">name</span><span class="p">:</span> <span class="dl">"</span><span class="s2">太郎</span><span class="dl">"</span><span class="p">,</span> <span class="na">age</span><span class="p">:</span> <span class="mi">30</span> <span class="p">};</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">table</span><span class="p">(</span><span class="nx">user</span><span class="p">);</span> <span class="c1">// テーブル形式で表示</span>
<span class="c1">// 実行時間の測定</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">time</span><span class="p">(</span><span class="dl">"</span><span class="s2">処理時間</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// 時間のかかる処理</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o"><</span> <span class="mi">1000000</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="c1">// 何らかの処理</span>
<span class="p">}</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">timeEnd</span><span class="p">(</span><span class="dl">"</span><span class="s2">処理時間</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// グループ化</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">group</span><span class="p">(</span><span class="dl">"</span><span class="s2">ユーザー情報</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">名前:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">user</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">年齢:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">user</span><span class="p">.</span><span class="nx">age</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">groupEnd</span><span class="p">();</span>
<span class="c1">// 条件付きログ</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">assert</span><span class="p">(</span><span class="nx">user</span><span class="p">.</span><span class="nx">age</span> <span class="o">>=</span> <span class="mi">18</span><span class="p">,</span> <span class="dl">"</span><span class="s2">ユーザーは18歳以上である必要があります</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// スタックトレース</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">trace</span><span class="p">(</span><span class="dl">"</span><span class="s2">スタックトレースを表示</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// ブレークポイント</span>
<span class="kd">function</span> <span class="nx">debugFunction</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">x</span> <span class="o">=</span> <span class="mi">10</span><span class="p">;</span>
<span class="k">debugger</span><span class="p">;</span> <span class="c1">// ブラウザの開発者ツールでここで停止</span>
<span class="nx">x</span> <span class="o">*=</span> <span class="mi">2</span><span class="p">;</span>
<span class="k">return</span> <span class="nx">x</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// エラーの詳細表示</span>
<span class="k">try</span> <span class="p">{</span>
<span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="dl">"</span><span class="s2">テストエラー</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラー名:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラーメッセージ:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">スタックトレース:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">.</span><span class="nx">stack</span><span class="p">);</span>
<span class="p">}</span>
</code></pre></div></div>
<h3 id="簡単なテストフレームワーク">簡単なテストフレームワーク</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 簡単なテストフレームワーク</span>
<span class="kd">class</span> <span class="nx">SimpleTest</span> <span class="p">{</span>
<span class="kd">constructor</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">tests</span> <span class="o">=</span> <span class="p">[];</span>
<span class="k">this</span><span class="p">.</span><span class="nx">passed</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">failed</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">test</span><span class="p">(</span><span class="nx">description</span><span class="p">,</span> <span class="nx">testFunction</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">tests</span><span class="p">.</span><span class="nx">push</span><span class="p">({</span> <span class="nx">description</span><span class="p">,</span> <span class="nx">testFunction</span> <span class="p">});</span>
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">assertEqual</span><span class="p">(</span><span class="nx">actual</span><span class="p">,</span> <span class="nx">expected</span><span class="p">,</span> <span class="nx">message</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">actual</span> <span class="o">===</span> <span class="nx">expected</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`✅ </span><span class="p">${</span><span class="nx">message</span> <span class="o">||</span> <span class="dl">'</span><span class="s1">Test passed</span><span class="dl">'</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">passed</span><span class="o">++</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`❌ </span><span class="p">${</span><span class="nx">message</span> <span class="o">||</span> <span class="dl">'</span><span class="s1">Test failed</span><span class="dl">'</span><span class="p">}</span><span class="s2">: expected </span><span class="p">${</span><span class="nx">expected</span><span class="p">}</span><span class="s2">, got </span><span class="p">${</span><span class="nx">actual</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">failed</span><span class="o">++</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nx">assertTrue</span><span class="p">(</span><span class="nx">value</span><span class="p">,</span> <span class="nx">message</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">assertEqual</span><span class="p">(</span><span class="nx">value</span><span class="p">,</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">message</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">assertFalse</span><span class="p">(</span><span class="nx">value</span><span class="p">,</span> <span class="nx">message</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">assertEqual</span><span class="p">(</span><span class="nx">value</span><span class="p">,</span> <span class="kc">false</span><span class="p">,</span> <span class="nx">message</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">run</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">🚀 テスト開始</span><span class="dl">"</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">tests</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(({</span> <span class="nx">description</span><span class="p">,</span> <span class="nx">testFunction</span> <span class="p">})</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`\n📝 </span><span class="p">${</span><span class="nx">description</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="k">try</span> <span class="p">{</span>
<span class="nx">testFunction</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`❌ エラー: </span><span class="p">${</span><span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">failed</span><span class="o">++</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`\n📊 結果: </span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">passed</span><span class="p">}</span><span class="s2"> passed, </span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">failed</span><span class="p">}</span><span class="s2"> failed`</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// テスト例</span>
<span class="kd">function</span> <span class="nx">add</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">a</span> <span class="o">+</span> <span class="nx">b</span><span class="p">;</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">multiply</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">a</span> <span class="o">*</span> <span class="nx">b</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// テストの実行</span>
<span class="kd">const</span> <span class="nx">test</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">SimpleTest</span><span class="p">();</span>
<span class="nx">test</span>
<span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="dl">"</span><span class="s2">add関数のテスト</span><span class="dl">"</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">assertEqual</span><span class="p">(</span><span class="nx">add</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">),</span> <span class="mi">5</span><span class="p">,</span> <span class="dl">"</span><span class="s2">2 + 3 = 5</span><span class="dl">"</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">assertEqual</span><span class="p">(</span><span class="nx">add</span><span class="p">(</span><span class="o">-</span><span class="mi">1</span><span class="p">,</span> <span class="mi">1</span><span class="p">),</span> <span class="mi">0</span><span class="p">,</span> <span class="dl">"</span><span class="s2">-1 + 1 = 0</span><span class="dl">"</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">assertEqual</span><span class="p">(</span><span class="nx">add</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">),</span> <span class="mi">0</span><span class="p">,</span> <span class="dl">"</span><span class="s2">0 + 0 = 0</span><span class="dl">"</span><span class="p">);</span>
<span class="p">})</span>
<span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="dl">"</span><span class="s2">multiply関数のテスト</span><span class="dl">"</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">assertEqual</span><span class="p">(</span><span class="nx">multiply</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">),</span> <span class="mi">6</span><span class="p">,</span> <span class="dl">"</span><span class="s2">2 * 3 = 6</span><span class="dl">"</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">assertEqual</span><span class="p">(</span><span class="nx">multiply</span><span class="p">(</span><span class="o">-</span><span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">),</span> <span class="o">-</span><span class="mi">6</span><span class="p">,</span> <span class="dl">"</span><span class="s2">-2 * 3 = -6</span><span class="dl">"</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">assertEqual</span><span class="p">(</span><span class="nx">multiply</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">5</span><span class="p">),</span> <span class="mi">0</span><span class="p">,</span> <span class="dl">"</span><span class="s2">0 * 5 = 0</span><span class="dl">"</span><span class="p">);</span>
<span class="p">})</span>
<span class="p">.</span><span class="nx">run</span><span class="p">();</span>
</code></pre></div></div>
<h2 id="パフォーマンス最適化">パフォーマンス最適化</h2>
<h3 id="パフォーマンス測定と最適化">パフォーマンス測定と最適化</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// パフォーマンス測定</span>
<span class="kd">function</span> <span class="nx">measurePerformance</span><span class="p">(</span><span class="nx">fn</span><span class="p">,</span> <span class="nx">label</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">start</span> <span class="o">=</span> <span class="nx">performance</span><span class="p">.</span><span class="nx">now</span><span class="p">();</span>
<span class="nx">fn</span><span class="p">();</span>
<span class="kd">const</span> <span class="nx">end</span> <span class="o">=</span> <span class="nx">performance</span><span class="p">.</span><span class="nx">now</span><span class="p">();</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`</span><span class="p">${</span><span class="nx">label</span><span class="p">}</span><span class="s2">: </span><span class="p">${</span><span class="nx">end</span> <span class="o">-</span> <span class="nx">start</span><span class="p">}</span><span class="s2">ms`</span><span class="p">);</span>
<span class="p">}</span>
<span class="c1">// 配列処理の最適化例</span>
<span class="kd">const</span> <span class="nx">largeArray</span> <span class="o">=</span> <span class="nb">Array</span><span class="p">.</span><span class="k">from</span><span class="p">({</span> <span class="na">length</span><span class="p">:</span> <span class="mi">100000</span> <span class="p">},</span> <span class="p">(</span><span class="nx">_</span><span class="p">,</span> <span class="nx">i</span><span class="p">)</span> <span class="o">=></span> <span class="nx">i</span><span class="p">);</span>
<span class="c1">// 非効率な方法</span>
<span class="nx">measurePerformance</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">result</span> <span class="o">=</span> <span class="p">[];</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o"><</span> <span class="nx">largeArray</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">largeArray</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">%</span> <span class="mi">2</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">result</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">largeArray</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">*</span> <span class="mi">2</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">},</span> <span class="dl">"</span><span class="s2">forループ</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// 効率的な方法</span>
<span class="nx">measurePerformance</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">largeArray</span>
<span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="nx">x</span> <span class="o">=></span> <span class="nx">x</span> <span class="o">%</span> <span class="mi">2</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span>
<span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">x</span> <span class="o">=></span> <span class="nx">x</span> <span class="o">*</span> <span class="mi">2</span><span class="p">);</span>
<span class="p">},</span> <span class="dl">"</span><span class="s2">filter + map</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// より効率的な方法(1回のループ)</span>
<span class="nx">measurePerformance</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">largeArray</span><span class="p">.</span><span class="nx">reduce</span><span class="p">((</span><span class="nx">acc</span><span class="p">,</span> <span class="nx">x</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">x</span> <span class="o">%</span> <span class="mi">2</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">acc</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">x</span> <span class="o">*</span> <span class="mi">2</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">acc</span><span class="p">;</span>
<span class="p">},</span> <span class="p">[]);</span>
<span class="p">},</span> <span class="dl">"</span><span class="s2">reduce</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// イベントリスナーの最適化(デバウンス)</span>
<span class="kd">function</span> <span class="nx">debounce</span><span class="p">(</span><span class="nx">func</span><span class="p">,</span> <span class="nx">wait</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">timeout</span><span class="p">;</span>
<span class="k">return</span> <span class="kd">function</span> <span class="nx">executedFunction</span><span class="p">(...</span><span class="nx">args</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">later</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">clearTimeout</span><span class="p">(</span><span class="nx">timeout</span><span class="p">);</span>
<span class="nx">func</span><span class="p">(...</span><span class="nx">args</span><span class="p">);</span>
<span class="p">};</span>
<span class="nx">clearTimeout</span><span class="p">(</span><span class="nx">timeout</span><span class="p">);</span>
<span class="nx">timeout</span> <span class="o">=</span> <span class="nx">setTimeout</span><span class="p">(</span><span class="nx">later</span><span class="p">,</span> <span class="nx">wait</span><span class="p">);</span>
<span class="p">};</span>
<span class="p">}</span>
<span class="c1">// スクロールイベントの最適化</span>
<span class="kd">const</span> <span class="nx">handleScroll</span> <span class="o">=</span> <span class="nx">debounce</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">スクロール処理</span><span class="dl">"</span><span class="p">);</span>
<span class="p">},</span> <span class="mi">100</span><span class="p">);</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">scroll</span><span class="dl">"</span><span class="p">,</span> <span class="nx">handleScroll</span><span class="p">);</span>
<span class="c1">// スロットル(一定間隔で実行)</span>
<span class="kd">function</span> <span class="nx">throttle</span><span class="p">(</span><span class="nx">func</span><span class="p">,</span> <span class="nx">limit</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">lastFunc</span><span class="p">;</span>
<span class="kd">let</span> <span class="nx">lastRan</span><span class="p">;</span>
<span class="k">return</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">context</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">args</span> <span class="o">=</span> <span class="nx">arguments</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">lastRan</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">func</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="nx">context</span><span class="p">,</span> <span class="nx">args</span><span class="p">);</span>
<span class="nx">lastRan</span> <span class="o">=</span> <span class="nb">Date</span><span class="p">.</span><span class="nx">now</span><span class="p">();</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">clearTimeout</span><span class="p">(</span><span class="nx">lastFunc</span><span class="p">);</span>
<span class="nx">lastFunc</span> <span class="o">=</span> <span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">((</span><span class="nb">Date</span><span class="p">.</span><span class="nx">now</span><span class="p">()</span> <span class="o">-</span> <span class="nx">lastRan</span><span class="p">)</span> <span class="o">>=</span> <span class="nx">limit</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">func</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="nx">context</span><span class="p">,</span> <span class="nx">args</span><span class="p">);</span>
<span class="nx">lastRan</span> <span class="o">=</span> <span class="nb">Date</span><span class="p">.</span><span class="nx">now</span><span class="p">();</span>
<span class="p">}</span>
<span class="p">},</span> <span class="nx">limit</span> <span class="o">-</span> <span class="p">(</span><span class="nb">Date</span><span class="p">.</span><span class="nx">now</span><span class="p">()</span> <span class="o">-</span> <span class="nx">lastRan</span><span class="p">));</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// メモ化(結果をキャッシュ)</span>
<span class="kd">function</span> <span class="nx">memoize</span><span class="p">(</span><span class="nx">fn</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">cache</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Map</span><span class="p">();</span>
<span class="k">return</span> <span class="kd">function</span><span class="p">(...</span><span class="nx">args</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">key</span> <span class="o">=</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">args</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">cache</span><span class="p">.</span><span class="nx">has</span><span class="p">(</span><span class="nx">key</span><span class="p">))</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">cache</span><span class="p">.</span><span class="kd">get</span><span class="p">(</span><span class="nx">key</span><span class="p">);</span>
<span class="p">}</span>
<span class="kd">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">fn</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="nx">args</span><span class="p">);</span>
<span class="nx">cache</span><span class="p">.</span><span class="kd">set</span><span class="p">(</span><span class="nx">key</span><span class="p">,</span> <span class="nx">result</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">result</span><span class="p">;</span>
<span class="p">};</span>
<span class="p">}</span>
<span class="c1">// フィボナッチ数列の最適化例</span>
<span class="kd">const</span> <span class="nx">fibonacci</span> <span class="o">=</span> <span class="nx">memoize</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">n</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">n</span> <span class="o"><</span> <span class="mi">2</span><span class="p">)</span> <span class="k">return</span> <span class="nx">n</span><span class="p">;</span>
<span class="k">return</span> <span class="nx">fibonacci</span><span class="p">(</span><span class="nx">n</span> <span class="o">-</span> <span class="mi">1</span><span class="p">)</span> <span class="o">+</span> <span class="nx">fibonacci</span><span class="p">(</span><span class="nx">n</span> <span class="o">-</span> <span class="mi">2</span><span class="p">);</span>
<span class="p">});</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">fibonacci</span><span class="p">(</span><span class="mi">40</span><span class="p">));</span> <span class="c1">// 大幅に高速化される</span>
</code></pre></div></div>
<h2 id="参考資料">参考資料</h2>
<h3 id="公式ドキュメント">公式ドキュメント</h3>
<ul>
<li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript">MDN Web Docs - JavaScript</a>: Mozilla開発者向けリソース</li>
<li><a href="https://tc39.es/ecma262/">ECMAScript Language Specification</a>: JavaScript仕様書</li>
<li><a href="https://nodejs.org/docs/">Node.js Documentation</a>: サーバーサイドJavaScript</li>
</ul>
<h3 id="学習リソース">学習リソース</h3>
<ul>
<li><a href="https://javascript.info/">JavaScript.info</a>: 現代的なJavaScript学習サイト</li>
<li><a href="https://eloquentjavascript.net/">Eloquent JavaScript</a>: 無料のJavaScript書籍</li>
<li><a href="https://github.com/getify/You-Dont-Know-JS">You Don’t Know JS</a>: 深いJavaScript理解</li>
</ul>
<h3 id="ツールとライブラリ">ツールとライブラリ</h3>
<ul>
<li><a href="https://eslint.org/">ESLint</a>: JavaScriptリンター</li>
<li><a href="https://prettier.io/">Prettier</a>: コードフォーマッター</li>
<li><a href="https://babeljs.io/">Babel</a>: JavaScript変換ツール</li>
<li><a href="https://webpack.js.org/">Webpack</a>: モジュールバンドラー</li>
</ul>
<h3 id="フレームワークライブラリ">フレームワーク・ライブラリ</h3>
<ul>
<li><a href="https://reactjs.org/">React</a>: ユーザーインターフェースライブラリ</li>
<li><a href="https://vuejs.org/">Vue.js</a>: プログレッシブフレームワーク</li>
<li><a href="https://angular.io/">Angular</a>: フルフィーチャーフレームワーク</li>
<li><a href="https://expressjs.com/">Express.js</a>: Node.jsウェブフレームワーク</li>
</ul>
</div></div>
</div>
</article>
<!-- Enhanced Table of Contents JavaScript --><script>
document.addEventListener('DOMContentLoaded', function() {
// Generate enhanced Table of Contents
const headings = document.querySelectorAll('.page-main-content h2, .page-main-content h3, .page-main-content h4');
const tocContainer = document.getElementById('page-toc-content');
if (headings.length > 0 && tocContainer) {
const tocList = document.createElement('ul');
tocList.style.cssText = 'list-style: none; padding-left: 0; margin: 0; line-height: 1.6;';
headings.forEach(function(heading, index) {
// Add ID to heading if it doesn't have one
if (!heading.id) {
heading.id = 'page-heading-' + index;
}
const listItem = document.createElement('li');
const link = document.createElement('a');
link.href = '#' + heading.id;
link.textContent = heading.textContent;
link.style.cssText = 'text-decoration: none; color: #007bff; transition: color 0.2s;';
// Add hover effect
link.addEventListener('mouseenter', function() {
this.style.color = '#0056b3';
});
link.addEventListener('mouseleave', function() {
this.style.color = '#007bff';
});
// Style based on heading level
if (heading.tagName === 'H2') {
listItem.style.cssText = 'margin-bottom: 8px; font-weight: 600;';
link.textContent = '📄 ' + heading.textContent;
} else if (heading.tagName === 'H3') {
listItem.style.cssText = 'margin-bottom: 5px; margin-left: 25px; font-size: 0.95em;';
link.textContent = '▶ ' + heading.textContent;
} else if (heading.tagName === 'H4') {
listItem.style.cssText = 'margin-bottom: 3px; margin-left: 50px; font-size: 0.9em;';
link.textContent = '• ' + heading.textContent;
}
listItem.appendChild(link);
tocList.appendChild(listItem);
});
tocContainer.appendChild(tocList);
} else if (tocContainer) {
// Hide TOC container if no headings found
tocContainer.parentNode.style.display = 'none';
}
});
</script><!-- Additional styling for page layout with sidebar TOC -->
<style>
/* Override minima theme wrapper width restriction for large screens */
@media (min-width: 1441px) {
.wrapper {
max-width: none;
}
}
.page-article {
margin: 0 auto;
}
/* Apply max-width only on smaller screens to maintain readability */
@media (max-width: 1440px) {
.page-article {
max-width: 2000px;
}
}
.page-content-wrapper {
display: flex;
gap: 20px;
position: relative;
}
.page-toc-sidebar {
width: 280px;
position: sticky;
top: 20px;
height: calc(100vh - 40px);
max-height: calc(100vh - 40px);
overflow-y: auto;
order: 2;
flex-shrink: 0;
}
.page-content {
flex: 1;
min-width: 0;
order: 1;
}
/* Responsive behavior */
@media (max-width: 1024px) {
.page-content-wrapper {
flex-direction: column;
}
.page-toc-sidebar {
width: 100%;
position: static;
order: 1;
margin-bottom: 20px;
height: auto;
max-height: none;
overflow-y: visible;
}
.page-content {
order: 2;
}
}
@media (max-width: 768px) {
.page-toc-sidebar {
display: none;
}
}
.page-title {
border-bottom: 3px solid #007bff;
padding-bottom: 10px;
color: #212529;
}
.page-main-content h2 {
color: #007bff;
border-bottom: 2px solid #e9ecef;
padding-bottom: 8px;
margin-top: 40px;
}
.page-main-content h3 {
color: #495057;
margin-top: 30px;
}
.page-main-content code {
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 3px;
padding: 2px 4px;
font-size: 0.9em;
}
.page-main-content pre {
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 5px;
padding: 15px;
overflow-x: auto;
}
.page-main-content blockquote {
border-left: 4px solid #007bff;
background: #f8f9fa;
margin: 20px 0;
padding: 15px 20px;
font-style: italic;
}
.page-main-content table {
border-collapse: collapse;
width: 100%;
margin: 20px 0;
}
.page-main-content th,
.page-main-content td {
border: 1px solid #dee2e6;
padding: 12px;
text-align: left;
}
.page-main-content th {
background: #f8f9fa;
font-weight: 600;
}
</style>
パフォーマンス最適化
1. 画像最適化
レスポンシブ画像
<picture>
<source media="(max-width: 600px)" srcset="/assets/images/-small.webp">
<source media="(max-width: 1200px)" srcset="/assets/images/-medium.webp">
<img src="/assets/images/" alt="Jekyll リファレンス" loading="lazy">
</picture>
画像の遅延読み込み
<img src="/assets/images/" alt="Jekyll リファレンス" loading="lazy">
2. CSS・JavaScript の最適化
アセットの圧縮
# _config.yml
sass:
style: compressed
# 本番環境でのminify
重要でないリソースの遅延読み込み
<link rel="preload" href="/assets/css/critical.css" as="style">
<link rel="stylesheet" href="/assets/css/non-critical.css" media="print" onload="this.media='all'">
3. ビルド時間の最適化
インクリメンタルビルド
# 開発時のみ使用
bundle exec jekyll serve --incremental
不要ファイルの除外
# _config.yml
exclude:
- node_modules/
- .sass-cache/
- .jekyll-cache/
- gemfiles/
- Gemfile
- Gemfile.lock
- vendor/
トラブルシューティング
よくある問題と解決方法
1. ビルドエラー
問題: Gem の依存関係エラー
# 解決方法
bundle update
bundle install
問題: 文字エンコーディングエラー
# _config.yml に追加
encoding: utf-8
2. GitHub Pages でのビルド失敗
問題: サポートされていないプラグイン
# GitHub Pages でサポートされているプラグインのみ使用
plugins:
- jekyll-feed
- jekyll-sitemap
- jekyll-seo-tag
問題: 相対パスの問題
# _config.yml でベースURLを正しく設定
baseurl: "/repository-name"
url: "https://username.github.io"
3. パフォーマンス問題
問題: ビルド時間が長い
# --profile オプションでボトルネックを特定
bundle exec jekyll build --profile
問題: 大量のファイル
# limit プラグインを使用
デバッグ方法
開発サーバーでのライブリロード
bundle exec jekyll serve --livereload --drafts
ログレベルの設定
bundle exec jekyll build --verbose
設定の確認
bundle exec jekyll doctor
ベストプラクティス
1. コンテンツ管理
ディレクトリ構造のベストプラクティス
content/
├── _posts/ # ブログ記事
├── _pages/ # 固定ページ
├── _drafts/ # 下書き
└── assets/
├── images/ # 画像
├── documents/ # PDF等
└── downloads/ # ダウンロードファイル
ファイル命名規則
# 投稿ファイル
2023-12-01-clear-descriptive-title.md
# ページファイル
about.md
contact.md
privacy-policy.md
# 画像ファイル
2023-12-01-post-thumbnail.jpg
about-hero-image.png
2. SEO最適化
メタタグの設定
<!-- _includes/head.html -->
<meta name="description" content="各種技術ドキュメントとリファレンス">
<meta property="og:title" content="Jekyll リファレンス">
<meta property="og:description" content="各種技術ドキュメントとリファレンス">
<meta property="og:image" content="">
構造化データの追加
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BlogPosting",
"headline": "Jekyll リファレンス",
"datePublished": "",
"author": {
"@type": "Person",
"name": ""
}
}
</script>
3. アクセシビリティ
セマンティックHTML
<article class="post">
<header>
<h1>Jekyll リファレンス</h1>
<time datetime=""></time>
</header>
<main>
<article class="page-article">
<header class="page-header">
<h1 class="page-title">JavaScript リファレンス</h1></header>
<div class="page-content-wrapper">
<!-- Table of Contents Sidebar --><aside class="page-toc-sidebar">
<div class="page-toc" style="background: #fff; border: 2px solid #007bff; border-radius: 8px; padding: 20px;">
<h3 style="margin-top: 0; color: #007bff; border-bottom: 1px solid #007bff; padding-bottom: 8px;">📖 目次</h3>
<div id="page-toc-content"></div>
</div>
</aside><div class="page-content">
<!-- Main content -->
<div class="page-main-content">
<h1 id="javascript-リファレンス">JavaScript リファレンス</h1>
<p>JavaScriptの基本的な使い方から応用まで、Webページに動的な機能を追加するために必要な知識を体系的に説明します。モダンなJavaScript(ES6+)の機能も含めて解説します。</p>
<ul id="markdown-toc">
<li><a href="#javascript-リファレンス" id="markdown-toc-javascript-リファレンス">JavaScript リファレンス</a> <ul>
<li><a href="#基本概念" id="markdown-toc-基本概念">基本概念</a> <ul>
<li><a href="#javascript-とは" id="markdown-toc-javascript-とは">JavaScript とは</a></li>
<li><a href="#javascript-の役割" id="markdown-toc-javascript-の役割">JavaScript の役割</a></li>
</ul>
</li>
<li><a href="#基本構文" id="markdown-toc-基本構文">基本構文</a> <ul>
<li><a href="#変数とデータ型" id="markdown-toc-変数とデータ型">変数とデータ型</a></li>
<li><a href="#文字列操作" id="markdown-toc-文字列操作">文字列操作</a></li>
<li><a href="#配列" id="markdown-toc-配列">配列</a></li>
<li><a href="#オブジェクト" id="markdown-toc-オブジェクト">オブジェクト</a></li>
</ul>
</li>
<li><a href="#関数" id="markdown-toc-関数">関数</a> <ul>
<li><a href="#関数の定義" id="markdown-toc-関数の定義">関数の定義</a></li>
<li><a href="#スコープとクロージャ" id="markdown-toc-スコープとクロージャ">スコープとクロージャ</a></li>
</ul>
</li>
<li><a href="#dom操作" id="markdown-toc-dom操作">DOM操作</a> <ul>
<li><a href="#要素の取得" id="markdown-toc-要素の取得">要素の取得</a></li>
<li><a href="#要素の操作" id="markdown-toc-要素の操作">要素の操作</a></li>
<li><a href="#要素の作成と追加" id="markdown-toc-要素の作成と追加">要素の作成と追加</a></li>
</ul>
</li>
<li><a href="#イベント処理" id="markdown-toc-イベント処理">イベント処理</a> <ul>
<li><a href="#イベントリスナーの追加" id="markdown-toc-イベントリスナーの追加">イベントリスナーの追加</a></li>
<li><a href="#よく使用するイベント" id="markdown-toc-よく使用するイベント">よく使用するイベント</a></li>
<li><a href="#イベント委譲" id="markdown-toc-イベント委譲">イベント委譲</a></li>
</ul>
</li>
<li><a href="#非同期処理" id="markdown-toc-非同期処理">非同期処理</a> <ul>
<li><a href="#promise" id="markdown-toc-promise">Promise</a></li>
<li><a href="#asyncawait" id="markdown-toc-asyncawait">async/await</a></li>
<li><a href="#fetch-api" id="markdown-toc-fetch-api">Fetch API</a></li>
</ul>
</li>
<li><a href="#モダンjavascriptes6" id="markdown-toc-モダンjavascriptes6">モダンJavaScript(ES6+)</a> <ul>
<li><a href="#分割代入" id="markdown-toc-分割代入">分割代入</a></li>
<li><a href="#モジュール" id="markdown-toc-モジュール">モジュール</a></li>
<li><a href="#クラス" id="markdown-toc-クラス">クラス</a></li>
</ul>
</li>
<li><a href="#エラーハンドリング" id="markdown-toc-エラーハンドリング">エラーハンドリング</a> <ul>
<li><a href="#try-catch文" id="markdown-toc-try-catch文">try-catch文</a></li>
</ul>
</li>
<li><a href="#ブラウザapi" id="markdown-toc-ブラウザapi">ブラウザAPI</a> <ul>
<li><a href="#local-storage" id="markdown-toc-local-storage">Local Storage</a></li>
<li><a href="#geolocation-api" id="markdown-toc-geolocation-api">Geolocation API</a></li>
<li><a href="#notification-api" id="markdown-toc-notification-api">Notification API</a></li>
</ul>
</li>
<li><a href="#実践的なコード例" id="markdown-toc-実践的なコード例">実践的なコード例</a> <ul>
<li><a href="#フォームバリデーション" id="markdown-toc-フォームバリデーション">フォームバリデーション</a></li>
<li><a href="#シンプルなspasingle-page-application" id="markdown-toc-シンプルなspasingle-page-application">シンプルなSPA(Single Page Application)</a></li>
</ul>
</li>
<li><a href="#デバッグとテスト" id="markdown-toc-デバッグとテスト">デバッグとテスト</a> <ul>
<li><a href="#デバッグ技法" id="markdown-toc-デバッグ技法">デバッグ技法</a></li>
<li><a href="#簡単なテストフレームワーク" id="markdown-toc-簡単なテストフレームワーク">簡単なテストフレームワーク</a></li>
</ul>
</li>
<li><a href="#パフォーマンス最適化" id="markdown-toc-パフォーマンス最適化">パフォーマンス最適化</a> <ul>
<li><a href="#パフォーマンス測定と最適化" id="markdown-toc-パフォーマンス測定と最適化">パフォーマンス測定と最適化</a></li>
</ul>
</li>
<li><a href="#参考資料" id="markdown-toc-参考資料">参考資料</a> <ul>
<li><a href="#公式ドキュメント" id="markdown-toc-公式ドキュメント">公式ドキュメント</a></li>
<li><a href="#学習リソース" id="markdown-toc-学習リソース">学習リソース</a></li>
<li><a href="#ツールとライブラリ" id="markdown-toc-ツールとライブラリ">ツールとライブラリ</a></li>
<li><a href="#フレームワークライブラリ" id="markdown-toc-フレームワークライブラリ">フレームワーク・ライブラリ</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<h2 id="基本概念">基本概念</h2>
<h3 id="javascript-とは">JavaScript とは</h3>
<p><strong>JavaScript</strong> は、Webページに動的な機能を追加するためのプログラミング言語です。1995年にBrendan Eichによって開発され、現在はブラウザだけでなくサーバーサイド(Node.js)でも広く使用されています。</p>
<p><strong>特徴:</strong></p>
<ul>
<li>インタープリター言語(コンパイル不要)</li>
<li>動的型付け言語</li>
<li>プロトタイプベースのオブジェクト指向</li>
<li>関数型プログラミングもサポート</li>
<li>イベント駆動プログラミング</li>
</ul>
<h3 id="javascript-の役割">JavaScript の役割</h3>
<p>JavaScriptは以下の主要な役割を担います:</p>
<ol>
<li><strong>ユーザーインタラクション</strong>: クリック、入力などのイベント処理</li>
<li><strong>DOM操作</strong>: HTMLの動的な変更</li>
<li><strong>非同期処理</strong>: サーバーとの通信(Ajax、Fetch API)</li>
<li><strong>フォーム検証</strong>: 入力データの検証</li>
<li><strong>アニメーション</strong>: 視覚的な効果の実装</li>
</ol>
<h2 id="基本構文">基本構文</h2>
<h3 id="変数とデータ型">変数とデータ型</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 変数の宣言</span>
<span class="kd">let</span> <span class="nx">name</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">田中太郎</span><span class="dl">"</span><span class="p">;</span> <span class="c1">// 文字列(String)</span>
<span class="kd">const</span> <span class="nx">age</span> <span class="o">=</span> <span class="mi">30</span><span class="p">;</span> <span class="c1">// 数値(Number)- 定数</span>
<span class="kd">var</span> <span class="nx">isStudent</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span> <span class="c1">// 真偽値(Boolean)- 非推奨</span>
<span class="c1">// 現代的な変数宣言(ES6+)</span>
<span class="kd">let</span> <span class="nx">message</span><span class="p">;</span> <span class="c1">// 宣言のみ(undefined)</span>
<span class="kd">let</span> <span class="nx">score</span> <span class="o">=</span> <span class="mi">85</span><span class="p">;</span> <span class="c1">// 宣言と初期化</span>
<span class="kd">const</span> <span class="nx">PI</span> <span class="o">=</span> <span class="mf">3.14159</span><span class="p">;</span> <span class="c1">// 定数(再代入不可)</span>
<span class="c1">// データ型の確認</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">name</span><span class="p">);</span> <span class="c1">// "string"</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">age</span><span class="p">);</span> <span class="c1">// "number"</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">isStudent</span><span class="p">);</span> <span class="c1">// "boolean"</span>
<span class="c1">// プリミティブ型</span>
<span class="kd">let</span> <span class="nx">str</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">文字列</span><span class="dl">"</span><span class="p">;</span> <span class="c1">// String</span>
<span class="kd">let</span> <span class="nx">num</span> <span class="o">=</span> <span class="mi">42</span><span class="p">;</span> <span class="c1">// Number</span>
<span class="kd">let</span> <span class="nx">bool</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span> <span class="c1">// Boolean</span>
<span class="kd">let</span> <span class="nx">nothing</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span> <span class="c1">// Null</span>
<span class="kd">let</span> <span class="nx">undef</span> <span class="o">=</span> <span class="kc">undefined</span><span class="p">;</span> <span class="c1">// Undefined</span>
<span class="kd">let</span> <span class="nx">sym</span> <span class="o">=</span> <span class="nb">Symbol</span><span class="p">(</span><span class="dl">"</span><span class="s2">id</span><span class="dl">"</span><span class="p">);</span> <span class="c1">// Symbol(ES6+)</span>
<span class="kd">let</span> <span class="nx">big</span> <span class="o">=</span> <span class="mi">123</span><span class="nx">n</span><span class="p">;</span> <span class="c1">// BigInt(ES2020+)</span>
<span class="c1">// 参照型</span>
<span class="kd">let</span> <span class="nx">arr</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">];</span> <span class="c1">// Array</span>
<span class="kd">let</span> <span class="nx">obj</span> <span class="o">=</span> <span class="p">{</span> <span class="na">name</span><span class="p">:</span> <span class="dl">"</span><span class="s2">太郎</span><span class="dl">"</span> <span class="p">};</span> <span class="c1">// Object</span>
<span class="kd">let</span> <span class="nx">func</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{};</span> <span class="c1">// Function</span>
</code></pre></div></div>
<h3 id="文字列操作">文字列操作</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 文字列の基本操作</span>
<span class="kd">let</span> <span class="nx">firstName</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">太郎</span><span class="dl">"</span><span class="p">;</span>
<span class="kd">let</span> <span class="nx">lastName</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">田中</span><span class="dl">"</span><span class="p">;</span>
<span class="c1">// 文字列結合</span>
<span class="kd">let</span> <span class="nx">fullName1</span> <span class="o">=</span> <span class="nx">firstName</span> <span class="o">+</span> <span class="nx">lastName</span><span class="p">;</span> <span class="c1">// "太郎田中"</span>
<span class="kd">let</span> <span class="nx">fullName2</span> <span class="o">=</span> <span class="s2">`</span><span class="p">${</span><span class="nx">lastName</span><span class="p">}</span><span class="s2"> </span><span class="p">${</span><span class="nx">firstName</span><span class="p">}</span><span class="s2">`</span><span class="p">;</span> <span class="c1">// "田中 太郎" (テンプレートリテラル)</span>
<span class="c1">// 文字列メソッド</span>
<span class="kd">let</span> <span class="nx">text</span> <span class="o">=</span> <span class="dl">"</span><span class="s2"> Hello, World! </span><span class="dl">"</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">text</span><span class="p">.</span><span class="nx">length</span><span class="p">);</span> <span class="c1">// 16 (文字数)</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">text</span><span class="p">.</span><span class="nx">toLowerCase</span><span class="p">());</span> <span class="c1">// " hello, world! "</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">text</span><span class="p">.</span><span class="nx">toUpperCase</span><span class="p">());</span> <span class="c1">// " HELLO, WORLD! "</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">text</span><span class="p">.</span><span class="nx">trim</span><span class="p">());</span> <span class="c1">// "Hello, World!" (前後の空白削除)</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">text</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="dl">"</span><span class="s2">World</span><span class="dl">"</span><span class="p">));</span> <span class="c1">// 9 (文字列の位置)</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">text</span><span class="p">.</span><span class="nx">includes</span><span class="p">(</span><span class="dl">"</span><span class="s2">Hello</span><span class="dl">"</span><span class="p">));</span> <span class="c1">// true (文字列が含まれるか)</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">text</span><span class="p">.</span><span class="nx">slice</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span> <span class="mi">7</span><span class="p">));</span> <span class="c1">// "Hello" (部分文字列)</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">text</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="dl">"</span><span class="s2">World</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">JavaScript</span><span class="dl">"</span><span class="p">));</span> <span class="c1">// " Hello, JavaScript! "</span>
<span class="c1">// 文字列分割と結合</span>
<span class="kd">let</span> <span class="nx">csv</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">apple,banana,orange</span><span class="dl">"</span><span class="p">;</span>
<span class="kd">let</span> <span class="nx">fruits</span> <span class="o">=</span> <span class="nx">csv</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="dl">"</span><span class="s2">,</span><span class="dl">"</span><span class="p">);</span> <span class="c1">// ["apple", "banana", "orange"]</span>
<span class="kd">let</span> <span class="nx">joined</span> <span class="o">=</span> <span class="nx">fruits</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="dl">"</span><span class="s2"> | </span><span class="dl">"</span><span class="p">);</span> <span class="c1">// "apple | banana | orange"</span>
<span class="c1">// マルチライン文字列(テンプレートリテラル)</span>
<span class="kd">let</span> <span class="nx">multiLine</span> <span class="o">=</span> <span class="s2">`
これは
複数行の
文字列です
`</span><span class="p">;</span>
</code></pre></div></div>
<h3 id="配列">配列</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 配列の作成</span>
<span class="kd">let</span> <span class="nx">arr1</span> <span class="o">=</span> <span class="p">[];</span> <span class="c1">// 空の配列</span>
<span class="kd">let</span> <span class="nx">arr2</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">5</span><span class="p">];</span> <span class="c1">// 数値配列</span>
<span class="kd">let</span> <span class="nx">arr3</span> <span class="o">=</span> <span class="p">[</span><span class="dl">"</span><span class="s2">apple</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">banana</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">orange</span><span class="dl">"</span><span class="p">];</span> <span class="c1">// 文字列配列</span>
<span class="kd">let</span> <span class="nx">arr4</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="dl">"</span><span class="s2">text</span><span class="dl">"</span><span class="p">,</span> <span class="kc">true</span><span class="p">,</span> <span class="kc">null</span><span class="p">];</span> <span class="c1">// 混合配列</span>
<span class="c1">// 配列の基本操作</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">arr2</span><span class="p">.</span><span class="nx">length</span><span class="p">);</span> <span class="c1">// 5 (要素数)</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">arr2</span><span class="p">[</span><span class="mi">0</span><span class="p">]);</span> <span class="c1">// 1 (最初の要素)</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">arr2</span><span class="p">[</span><span class="nx">arr2</span><span class="p">.</span><span class="nx">length</span> <span class="o">-</span> <span class="mi">1</span><span class="p">]);</span> <span class="c1">// 5 (最後の要素)</span>
<span class="c1">// 要素の追加・削除</span>
<span class="nx">arr2</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="mi">6</span><span class="p">);</span> <span class="c1">// 末尾に追加: [1,2,3,4,5,6]</span>
<span class="nx">arr2</span><span class="p">.</span><span class="nx">pop</span><span class="p">();</span> <span class="c1">// 末尾を削除: [1,2,3,4,5]</span>
<span class="nx">arr2</span><span class="p">.</span><span class="nx">unshift</span><span class="p">(</span><span class="mi">0</span><span class="p">);</span> <span class="c1">// 先頭に追加: [0,1,2,3,4,5]</span>
<span class="nx">arr2</span><span class="p">.</span><span class="nx">shift</span><span class="p">();</span> <span class="c1">// 先頭を削除: [1,2,3,4,5]</span>
<span class="c1">// 配列メソッド(ES5+)</span>
<span class="kd">let</span> <span class="nx">numbers</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">5</span><span class="p">];</span>
<span class="c1">// map: 各要素を変換</span>
<span class="kd">let</span> <span class="nx">doubled</span> <span class="o">=</span> <span class="nx">numbers</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">x</span> <span class="o">=></span> <span class="nx">x</span> <span class="o">*</span> <span class="mi">2</span><span class="p">);</span> <span class="c1">// [2,4,6,8,10]</span>
<span class="c1">// filter: 条件に合う要素を抽出</span>
<span class="kd">let</span> <span class="nx">evens</span> <span class="o">=</span> <span class="nx">numbers</span><span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="nx">x</span> <span class="o">=></span> <span class="nx">x</span> <span class="o">%</span> <span class="mi">2</span> <span class="o">===</span> <span class="mi">0</span><span class="p">);</span> <span class="c1">// [2,4]</span>
<span class="c1">// reduce: 配列を単一の値に集約</span>
<span class="kd">let</span> <span class="nx">sum</span> <span class="o">=</span> <span class="nx">numbers</span><span class="p">.</span><span class="nx">reduce</span><span class="p">((</span><span class="nx">acc</span><span class="p">,</span> <span class="nx">x</span><span class="p">)</span> <span class="o">=></span> <span class="nx">acc</span> <span class="o">+</span> <span class="nx">x</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span> <span class="c1">// 15</span>
<span class="c1">// find: 条件に合う最初の要素</span>
<span class="kd">let</span> <span class="nx">found</span> <span class="o">=</span> <span class="nx">numbers</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="nx">x</span> <span class="o">=></span> <span class="nx">x</span> <span class="o">></span> <span class="mi">3</span><span class="p">);</span> <span class="c1">// 4</span>
<span class="c1">// forEach: 各要素に対して処理実行</span>
<span class="nx">numbers</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">x</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">x</span><span class="p">));</span>
<span class="c1">// includes: 要素が含まれているか</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">numbers</span><span class="p">.</span><span class="nx">includes</span><span class="p">(</span><span class="mi">3</span><span class="p">));</span> <span class="c1">// true</span>
<span class="c1">// sort: ソート</span>
<span class="kd">let</span> <span class="nx">fruits</span> <span class="o">=</span> <span class="p">[</span><span class="dl">"</span><span class="s2">banana</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">apple</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">orange</span><span class="dl">"</span><span class="p">];</span>
<span class="nx">fruits</span><span class="p">.</span><span class="nx">sort</span><span class="p">();</span> <span class="c1">// ["apple", "banana", "orange"]</span>
<span class="kd">let</span> <span class="nx">nums</span> <span class="o">=</span> <span class="p">[</span><span class="mi">3</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">5</span><span class="p">];</span>
<span class="nx">nums</span><span class="p">.</span><span class="nx">sort</span><span class="p">((</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="o">=></span> <span class="nx">a</span> <span class="o">-</span> <span class="nx">b</span><span class="p">);</span> <span class="c1">// [1,1,3,4,5] (数値ソート)</span>
</code></pre></div></div>
<h3 id="オブジェクト">オブジェクト</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// オブジェクトの作成</span>
<span class="kd">let</span> <span class="nx">person</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">name</span><span class="p">:</span> <span class="dl">"</span><span class="s2">田中太郎</span><span class="dl">"</span><span class="p">,</span>
<span class="na">age</span><span class="p">:</span> <span class="mi">30</span><span class="p">,</span>
<span class="na">city</span><span class="p">:</span> <span class="dl">"</span><span class="s2">東京</span><span class="dl">"</span><span class="p">,</span>
<span class="na">isStudent</span><span class="p">:</span> <span class="kc">false</span>
<span class="p">};</span>
<span class="c1">// プロパティへのアクセス</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">person</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span> <span class="c1">// "田中太郎" (ドット記法)</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">person</span><span class="p">[</span><span class="dl">"</span><span class="s2">age</span><span class="dl">"</span><span class="p">]);</span> <span class="c1">// 30 (ブラケット記法)</span>
<span class="c1">// プロパティの追加・変更</span>
<span class="nx">person</span><span class="p">.</span><span class="nx">email</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">tanaka@example.com</span><span class="dl">"</span><span class="p">;</span> <span class="c1">// 追加</span>
<span class="nx">person</span><span class="p">.</span><span class="nx">age</span> <span class="o">=</span> <span class="mi">31</span><span class="p">;</span> <span class="c1">// 変更</span>
<span class="c1">// プロパティの削除</span>
<span class="k">delete</span> <span class="nx">person</span><span class="p">.</span><span class="nx">isStudent</span><span class="p">;</span>
<span class="c1">// メソッドを含むオブジェクト</span>
<span class="kd">let</span> <span class="nx">calculator</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">value</span><span class="p">:</span> <span class="mi">0</span><span class="p">,</span>
<span class="na">add</span><span class="p">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">x</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">value</span> <span class="o">+=</span> <span class="nx">x</span><span class="p">;</span>
<span class="k">return</span> <span class="k">this</span><span class="p">;</span> <span class="c1">// チェーンメソッド用</span>
<span class="p">},</span>
<span class="na">multiply</span><span class="p">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">x</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">value</span> <span class="o">*=</span> <span class="nx">x</span><span class="p">;</span>
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
<span class="p">},</span>
<span class="na">getValue</span><span class="p">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">value</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="c1">// 使用例</span>
<span class="nx">calculator</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="mi">5</span><span class="p">).</span><span class="nx">multiply</span><span class="p">(</span><span class="mi">2</span><span class="p">).</span><span class="nx">getValue</span><span class="p">();</span> <span class="c1">// 10</span>
<span class="c1">// オブジェクトの反復処理</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">key</span> <span class="k">in</span> <span class="nx">person</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`</span><span class="p">${</span><span class="nx">key</span><span class="p">}</span><span class="s2">: </span><span class="p">${</span><span class="nx">person</span><span class="p">[</span><span class="nx">key</span><span class="p">]}</span><span class="s2">`</span><span class="p">);</span>
<span class="p">}</span>
<span class="c1">// ES6+ のオブジェクト機能</span>
<span class="kd">let</span> <span class="nx">name</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">太郎</span><span class="dl">"</span><span class="p">;</span>
<span class="kd">let</span> <span class="nx">age</span> <span class="o">=</span> <span class="mi">25</span><span class="p">;</span>
<span class="c1">// プロパティ名の短縮記法</span>
<span class="kd">let</span> <span class="nx">user</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">name</span><span class="p">,</span> <span class="nx">age</span> <span class="p">};</span> <span class="c1">// { name: "太郎", age: 25 }</span>
<span class="c1">// 計算されたプロパティ名</span>
<span class="kd">let</span> <span class="nx">prop</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">color</span><span class="dl">"</span><span class="p">;</span>
<span class="kd">let</span> <span class="nx">car</span> <span class="o">=</span> <span class="p">{</span>
<span class="p">[</span><span class="nx">prop</span><span class="p">]:</span> <span class="dl">"</span><span class="s2">red</span><span class="dl">"</span> <span class="c1">// { color: "red" }</span>
<span class="p">};</span>
<span class="c1">// デストラクチャリング代入</span>
<span class="kd">let</span> <span class="p">{</span> <span class="na">name</span><span class="p">:</span> <span class="nx">userName</span><span class="p">,</span> <span class="na">age</span><span class="p">:</span> <span class="nx">userAge</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">user</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">userName</span><span class="p">,</span> <span class="nx">userAge</span><span class="p">);</span> <span class="c1">// "太郎" 25</span>
</code></pre></div></div>
<h2 id="関数">関数</h2>
<h3 id="関数の定義">関数の定義</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 関数宣言</span>
<span class="kd">function</span> <span class="nx">greet</span><span class="p">(</span><span class="nx">name</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="s2">`こんにちは、</span><span class="p">${</span><span class="nx">name</span><span class="p">}</span><span class="s2">さん!`</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// 関数式</span>
<span class="kd">const</span> <span class="nx">greet2</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">name</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="s2">`こんにちは、</span><span class="p">${</span><span class="nx">name</span><span class="p">}</span><span class="s2">さん!`</span><span class="p">;</span>
<span class="p">};</span>
<span class="c1">// アロー関数(ES6+)</span>
<span class="kd">const</span> <span class="nx">greet3</span> <span class="o">=</span> <span class="p">(</span><span class="nx">name</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">return</span> <span class="s2">`こんにちは、</span><span class="p">${</span><span class="nx">name</span><span class="p">}</span><span class="s2">さん!`</span><span class="p">;</span>
<span class="p">};</span>
<span class="c1">// アロー関数(短縮形)</span>
<span class="kd">const</span> <span class="nx">greet4</span> <span class="o">=</span> <span class="nx">name</span> <span class="o">=></span> <span class="s2">`こんにちは、</span><span class="p">${</span><span class="nx">name</span><span class="p">}</span><span class="s2">さん!`</span><span class="p">;</span>
<span class="c1">// 複数パラメータのアロー関数</span>
<span class="kd">const</span> <span class="nx">add</span> <span class="o">=</span> <span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="o">=></span> <span class="nx">a</span> <span class="o">+</span> <span class="nx">b</span><span class="p">;</span>
<span class="c1">// 関数の呼び出し</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">greet</span><span class="p">(</span><span class="dl">"</span><span class="s2">太郎</span><span class="dl">"</span><span class="p">));</span> <span class="c1">// "こんにちは、太郎さん!"</span>
<span class="c1">// デフォルトパラメータ(ES6+)</span>
<span class="kd">function</span> <span class="nx">createUser</span><span class="p">(</span><span class="nx">name</span><span class="p">,</span> <span class="nx">age</span> <span class="o">=</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">city</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">未設定</span><span class="dl">"</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">{</span> <span class="nx">name</span><span class="p">,</span> <span class="nx">age</span><span class="p">,</span> <span class="nx">city</span> <span class="p">};</span>
<span class="p">}</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">createUser</span><span class="p">(</span><span class="dl">"</span><span class="s2">太郎</span><span class="dl">"</span><span class="p">));</span> <span class="c1">// { name: "太郎", age: 0, city: "未設定" }</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">createUser</span><span class="p">(</span><span class="dl">"</span><span class="s2">花子</span><span class="dl">"</span><span class="p">,</span> <span class="mi">25</span><span class="p">));</span> <span class="c1">// { name: "花子", age: 25, city: "未設定" }</span>
<span class="c1">// 可変長引数(Rest Parameters)</span>
<span class="kd">function</span> <span class="nx">sum</span><span class="p">(...</span><span class="nx">numbers</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">numbers</span><span class="p">.</span><span class="nx">reduce</span><span class="p">((</span><span class="nx">total</span><span class="p">,</span> <span class="nx">num</span><span class="p">)</span> <span class="o">=></span> <span class="nx">total</span> <span class="o">+</span> <span class="nx">num</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">sum</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">5</span><span class="p">));</span> <span class="c1">// 15</span>
<span class="c1">// スプレッド演算子</span>
<span class="kd">const</span> <span class="nx">arr1</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">];</span>
<span class="kd">const</span> <span class="nx">arr2</span> <span class="o">=</span> <span class="p">[</span><span class="mi">4</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">6</span><span class="p">];</span>
<span class="kd">const</span> <span class="nx">combined</span> <span class="o">=</span> <span class="p">[...</span><span class="nx">arr1</span><span class="p">,</span> <span class="p">...</span><span class="nx">arr2</span><span class="p">];</span> <span class="c1">// [1,2,3,4,5,6]</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">max</span><span class="p">(...</span><span class="nx">arr1</span><span class="p">));</span> <span class="c1">// 3</span>
</code></pre></div></div>
<h3 id="スコープとクロージャ">スコープとクロージャ</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// グローバルスコープ</span>
<span class="kd">let</span> <span class="nx">globalVar</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">グローバル</span><span class="dl">"</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">outerFunction</span><span class="p">()</span> <span class="p">{</span>
<span class="c1">// 関数スコープ</span>
<span class="kd">let</span> <span class="nx">outerVar</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">外側</span><span class="dl">"</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">innerFunction</span><span class="p">()</span> <span class="p">{</span>
<span class="c1">// クロージャ</span>
<span class="kd">let</span> <span class="nx">innerVar</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">内側</span><span class="dl">"</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">globalVar</span><span class="p">);</span> <span class="c1">// アクセス可能</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">outerVar</span><span class="p">);</span> <span class="c1">// アクセス可能</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">innerVar</span><span class="p">);</span> <span class="c1">// アクセス可能</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">innerFunction</span><span class="p">;</span>
<span class="p">}</span>
<span class="kd">const</span> <span class="nx">closure</span> <span class="o">=</span> <span class="nx">outerFunction</span><span class="p">();</span>
<span class="nx">closure</span><span class="p">();</span> <span class="c1">// クロージャが実行される</span>
<span class="c1">// 実用的なクロージャの例</span>
<span class="kd">function</span> <span class="nx">createCounter</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">count</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
<span class="k">return</span> <span class="p">{</span>
<span class="na">increment</span><span class="p">:</span> <span class="p">()</span> <span class="o">=></span> <span class="o">++</span><span class="nx">count</span><span class="p">,</span>
<span class="na">decrement</span><span class="p">:</span> <span class="p">()</span> <span class="o">=></span> <span class="o">--</span><span class="nx">count</span><span class="p">,</span>
<span class="na">getCount</span><span class="p">:</span> <span class="p">()</span> <span class="o">=></span> <span class="nx">count</span>
<span class="p">};</span>
<span class="p">}</span>
<span class="kd">const</span> <span class="nx">counter</span> <span class="o">=</span> <span class="nx">createCounter</span><span class="p">();</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">counter</span><span class="p">.</span><span class="nx">increment</span><span class="p">());</span> <span class="c1">// 1</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">counter</span><span class="p">.</span><span class="nx">increment</span><span class="p">());</span> <span class="c1">// 2</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">counter</span><span class="p">.</span><span class="nx">getCount</span><span class="p">());</span> <span class="c1">// 2</span>
<span class="c1">// ブロックスコープ(let, const)</span>
<span class="p">{</span>
<span class="kd">let</span> <span class="nx">blockVar</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">ブロック内</span><span class="dl">"</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">blockConst</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">定数</span><span class="dl">"</span><span class="p">;</span>
<span class="c1">// これらはブロック外からアクセス不可</span>
<span class="p">}</span>
<span class="c1">// var は関数スコープ</span>
<span class="kd">function</span> <span class="nx">varExample</span><span class="p">()</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="kc">true</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">varVariable</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">var変数</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">varVariable</span><span class="p">);</span> <span class="c1">// アクセス可能(ホイスティング)</span>
<span class="p">}</span>
</code></pre></div></div>
<h2 id="dom操作">DOM操作</h2>
<h3 id="要素の取得">要素の取得</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// ID で取得</span>
<span class="kd">const</span> <span class="nx">element</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">myId</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// クラス名で取得</span>
<span class="kd">const</span> <span class="nx">elements</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="dl">"</span><span class="s2">myClass</span><span class="dl">"</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">firstElement</span> <span class="o">=</span> <span class="nx">elements</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
<span class="c1">// タグ名で取得</span>
<span class="kd">const</span> <span class="nx">paragraphs</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="dl">"</span><span class="s2">p</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// CSSセレクタで取得(推奨)</span>
<span class="kd">const</span> <span class="nx">element2</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#myId</span><span class="dl">"</span><span class="p">);</span> <span class="c1">// 最初の要素</span>
<span class="kd">const</span> <span class="nx">elements2</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="dl">"</span><span class="s2">.myClass</span><span class="dl">"</span><span class="p">);</span> <span class="c1">// 全ての要素</span>
<span class="c1">// 複雑なセレクタの例</span>
<span class="kd">const</span> <span class="nx">navLinks</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="dl">"</span><span class="s2">nav ul li a</span><span class="dl">"</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">firstParagraph</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">article p:first-child</span><span class="dl">"</span><span class="p">);</span>
</code></pre></div></div>
<h3 id="要素の操作">要素の操作</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// テキストコンテンツの操作</span>
<span class="kd">const</span> <span class="nx">title</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">h1</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">title</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">新しいタイトル</span><span class="dl">"</span><span class="p">;</span> <span class="c1">// HTMLタグは文字列として表示</span>
<span class="nx">title</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="dl">"</span><span class="s2"><strong>太字タイトル</strong></span><span class="dl">"</span><span class="p">;</span> <span class="c1">// HTMLタグも解釈</span>
<span class="c1">// 属性の操作</span>
<span class="kd">const</span> <span class="nx">link</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">a</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">link</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="dl">"</span><span class="s2">href</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">https://example.com</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">link</span><span class="p">.</span><span class="nx">getAttribute</span><span class="p">(</span><span class="dl">"</span><span class="s2">href</span><span class="dl">"</span><span class="p">);</span> <span class="c1">// "https://example.com"</span>
<span class="nx">link</span><span class="p">.</span><span class="nx">removeAttribute</span><span class="p">(</span><span class="dl">"</span><span class="s2">target</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// より簡単な属性アクセス</span>
<span class="nx">link</span><span class="p">.</span><span class="nx">href</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">https://google.com</span><span class="dl">"</span><span class="p">;</span>
<span class="nx">link</span><span class="p">.</span><span class="nx">target</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">_blank</span><span class="dl">"</span><span class="p">;</span>
<span class="c1">// クラスの操作</span>
<span class="kd">const</span> <span class="nx">button</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">button</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="dl">"</span><span class="s2">active</span><span class="dl">"</span><span class="p">);</span> <span class="c1">// クラス追加</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">remove</span><span class="p">(</span><span class="dl">"</span><span class="s2">disabled</span><span class="dl">"</span><span class="p">);</span> <span class="c1">// クラス削除</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">toggle</span><span class="p">(</span><span class="dl">"</span><span class="s2">highlighted</span><span class="dl">"</span><span class="p">);</span> <span class="c1">// クラスの切り替え</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">contains</span><span class="p">(</span><span class="dl">"</span><span class="s2">active</span><span class="dl">"</span><span class="p">);</span> <span class="c1">// クラスの存在確認</span>
<span class="c1">// スタイルの操作</span>
<span class="kd">const</span> <span class="nx">box</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">.box</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">box</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">backgroundColor</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">red</span><span class="dl">"</span><span class="p">;</span>
<span class="nx">box</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">fontSize</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">20px</span><span class="dl">"</span><span class="p">;</span>
<span class="nx">box</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">none</span><span class="dl">"</span><span class="p">;</span>
<span class="c1">// 複数スタイルの設定</span>
<span class="nb">Object</span><span class="p">.</span><span class="nx">assign</span><span class="p">(</span><span class="nx">box</span><span class="p">.</span><span class="nx">style</span><span class="p">,</span> <span class="p">{</span>
<span class="na">width</span><span class="p">:</span> <span class="dl">"</span><span class="s2">200px</span><span class="dl">"</span><span class="p">,</span>
<span class="na">height</span><span class="p">:</span> <span class="dl">"</span><span class="s2">200px</span><span class="dl">"</span><span class="p">,</span>
<span class="na">border</span><span class="p">:</span> <span class="dl">"</span><span class="s2">2px solid black</span><span class="dl">"</span>
<span class="p">});</span>
</code></pre></div></div>
<h3 id="要素の作成と追加">要素の作成と追加</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 新しい要素の作成</span>
<span class="kd">const</span> <span class="nx">newParagraph</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="dl">"</span><span class="s2">p</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">newParagraph</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">新しい段落です</span><span class="dl">"</span><span class="p">;</span>
<span class="nx">newParagraph</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">new-content</span><span class="dl">"</span><span class="p">;</span>
<span class="c1">// 要素の追加</span>
<span class="kd">const</span> <span class="nx">container</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#container</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">newParagraph</span><span class="p">);</span> <span class="c1">// 末尾に追加</span>
<span class="c1">// より柔軟な挿入</span>
<span class="kd">const</span> <span class="nx">referenceElement</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">.reference</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">insertBefore</span><span class="p">(</span><span class="nx">newParagraph</span><span class="p">,</span> <span class="nx">referenceElement</span><span class="p">);</span> <span class="c1">// 指定要素の前に挿入</span>
<span class="c1">// 新しいAPI(より便利)</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">insertAdjacentElement</span><span class="p">(</span><span class="dl">"</span><span class="s2">beforeend</span><span class="dl">"</span><span class="p">,</span> <span class="nx">newParagraph</span><span class="p">);</span> <span class="c1">// 末尾に追加</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">insertAdjacentElement</span><span class="p">(</span><span class="dl">"</span><span class="s2">afterbegin</span><span class="dl">"</span><span class="p">,</span> <span class="nx">newParagraph</span><span class="p">);</span> <span class="c1">// 先頭に追加</span>
<span class="c1">// HTMLを直接挿入</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">insertAdjacentHTML</span><span class="p">(</span><span class="dl">"</span><span class="s2">beforeend</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2"><p>HTMLで追加</p></span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// 要素の削除</span>
<span class="kd">const</span> <span class="nx">elementToRemove</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">.remove-me</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">elementToRemove</span><span class="p">.</span><span class="nx">remove</span><span class="p">();</span> <span class="c1">// 新しい方法</span>
<span class="c1">// elementToRemove.parentNode.removeChild(elementToRemove); // 古い方法</span>
<span class="c1">// 要素の置換</span>
<span class="kd">const</span> <span class="nx">oldElement</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">.old</span><span class="dl">"</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">newElement</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="dl">"</span><span class="s2">div</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">newElement</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">新しい要素</span><span class="dl">"</span><span class="p">;</span>
<span class="nx">oldElement</span><span class="p">.</span><span class="nx">replaceWith</span><span class="p">(</span><span class="nx">newElement</span><span class="p">);</span>
</code></pre></div></div>
<h2 id="イベント処理">イベント処理</h2>
<h3 id="イベントリスナーの追加">イベントリスナーの追加</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 基本的なイベントリスナー</span>
<span class="kd">const</span> <span class="nx">button</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#myButton</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ボタンがクリックされました</span><span class="dl">"</span><span class="p">);</span>
<span class="p">});</span>
<span class="c1">// アロー関数を使用</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ボタンがクリックされました</span><span class="dl">"</span><span class="p">);</span>
<span class="p">});</span>
<span class="c1">// 名前付き関数を使用</span>
<span class="kd">function</span> <span class="nx">handleClick</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ボタンがクリックされました</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="nx">handleClick</span><span class="p">);</span>
<span class="c1">// イベントオブジェクトの使用</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">イベントタイプ:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">event</span><span class="p">.</span><span class="nx">type</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ターゲット要素:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">event</span><span class="p">.</span><span class="nx">target</span><span class="p">);</span>
<span class="nx">event</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span> <span class="c1">// デフォルト動作を阻止</span>
<span class="p">});</span>
<span class="c1">// 一度だけ実行するイベント</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="nx">handleClick</span><span class="p">,</span> <span class="p">{</span> <span class="na">once</span><span class="p">:</span> <span class="kc">true</span> <span class="p">});</span>
<span class="c1">// イベントリスナーの削除</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">removeEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="nx">handleClick</span><span class="p">);</span>
</code></pre></div></div>
<h3 id="よく使用するイベント">よく使用するイベント</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// マウスイベント</span>
<span class="nx">element</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">クリック</span><span class="dl">"</span><span class="p">));</span>
<span class="nx">element</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">dblclick</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ダブルクリック</span><span class="dl">"</span><span class="p">));</span>
<span class="nx">element</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">mousedown</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">マウスボタン押下</span><span class="dl">"</span><span class="p">));</span>
<span class="nx">element</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">mouseup</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">マウスボタン離上</span><span class="dl">"</span><span class="p">));</span>
<span class="nx">element</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">mouseover</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">マウスオーバー</span><span class="dl">"</span><span class="p">));</span>
<span class="nx">element</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">mouseout</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">マウスアウト</span><span class="dl">"</span><span class="p">));</span>
<span class="nx">element</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">mousemove</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`マウス位置: (</span><span class="p">${</span><span class="nx">e</span><span class="p">.</span><span class="nx">clientX</span><span class="p">}</span><span class="s2">, </span><span class="p">${</span><span class="nx">e</span><span class="p">.</span><span class="nx">clientY</span><span class="p">}</span><span class="s2">)`</span><span class="p">);</span>
<span class="p">});</span>
<span class="c1">// キーボードイベント</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">keydown</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`キー押下: </span><span class="p">${</span><span class="nx">e</span><span class="p">.</span><span class="nx">key</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">key</span> <span class="o">===</span> <span class="dl">"</span><span class="s2">Enter</span><span class="dl">"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">Enterキーが押されました</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">keyup</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`キー離上: </span><span class="p">${</span><span class="nx">e</span><span class="p">.</span><span class="nx">key</span><span class="p">}</span><span class="s2">`</span><span class="p">));</span>
<span class="c1">// フォームイベント</span>
<span class="kd">const</span> <span class="nx">form</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#myForm</span><span class="dl">"</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">input</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#myInput</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">form</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">submit</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span> <span class="c1">// フォーム送信を阻止</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">フォーム送信</span><span class="dl">"</span><span class="p">);</span>
<span class="p">});</span>
<span class="nx">input</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">input</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`入力値: </span><span class="p">${</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="p">});</span>
<span class="nx">input</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">focus</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">フォーカス</span><span class="dl">"</span><span class="p">));</span>
<span class="nx">input</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">blur</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">フォーカス失う</span><span class="dl">"</span><span class="p">));</span>
<span class="c1">// ウィンドウイベント</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">load</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ページ読み込み完了</span><span class="dl">"</span><span class="p">));</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">resize</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`ウィンドウサイズ: </span><span class="p">${</span><span class="nb">window</span><span class="p">.</span><span class="nx">innerWidth</span><span class="p">}</span><span class="s2">x</span><span class="p">${</span><span class="nb">window</span><span class="p">.</span><span class="nx">innerHeight</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="p">});</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">scroll</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`スクロール位置: </span><span class="p">${</span><span class="nb">window</span><span class="p">.</span><span class="nx">scrollY</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="p">});</span>
<span class="c1">// DOMコンテンツ読み込み完了(推奨)</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">DOMContentLoaded</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">DOM読み込み完了</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// ここに初期化コードを記述</span>
<span class="p">});</span>
</code></pre></div></div>
<h3 id="イベント委譲">イベント委譲</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 動的に追加される要素に対するイベント処理</span>
<span class="kd">const</span> <span class="nx">container</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#container</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// 子要素(ボタン)に対するクリックイベントを親要素で処理</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">matches</span><span class="p">(</span><span class="dl">"</span><span class="s2">button</span><span class="dl">"</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ボタンがクリックされました:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">textContent</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="c1">// 新しいボタンを動的に追加</span>
<span class="kd">function</span> <span class="nx">addButton</span><span class="p">(</span><span class="nx">text</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">button</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="dl">"</span><span class="s2">button</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="nx">text</span><span class="p">;</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">button</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">addButton</span><span class="p">(</span><span class="dl">"</span><span class="s2">新しいボタン1</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">addButton</span><span class="p">(</span><span class="dl">"</span><span class="s2">新しいボタン2</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// これらのボタンも自動的にイベントが適用される</span>
</code></pre></div></div>
<h2 id="非同期処理">非同期処理</h2>
<h3 id="promise">Promise</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// Promiseの基本</span>
<span class="kd">const</span> <span class="nx">myPromise</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Promise</span><span class="p">((</span><span class="nx">resolve</span><span class="p">,</span> <span class="nx">reject</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="c1">// 非同期処理のシミュレーション</span>
<span class="nx">setTimeout</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">success</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span> <span class="o">></span> <span class="mf">0.5</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">success</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">resolve</span><span class="p">(</span><span class="dl">"</span><span class="s2">成功しました!</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">reject</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラーが発生しました</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">},</span> <span class="mi">1000</span><span class="p">);</span>
<span class="p">});</span>
<span class="c1">// Promiseの使用</span>
<span class="nx">myPromise</span>
<span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="nx">result</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">成功:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">result</span><span class="p">);</span>
<span class="p">})</span>
<span class="p">.</span><span class="k">catch</span><span class="p">(</span><span class="nx">error</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
<span class="p">})</span>
<span class="p">.</span><span class="k">finally</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">処理完了</span><span class="dl">"</span><span class="p">);</span>
<span class="p">});</span>
<span class="c1">// Promiseチェーン</span>
<span class="kd">function</span> <span class="nx">fetchUser</span><span class="p">(</span><span class="nx">id</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="k">new</span> <span class="nb">Promise</span><span class="p">(</span><span class="nx">resolve</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">setTimeout</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">resolve</span><span class="p">({</span> <span class="nx">id</span><span class="p">,</span> <span class="na">name</span><span class="p">:</span> <span class="s2">`ユーザー</span><span class="p">${</span><span class="nx">id</span><span class="p">}</span><span class="s2">`</span> <span class="p">});</span>
<span class="p">},</span> <span class="mi">500</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">fetchUserPosts</span><span class="p">(</span><span class="nx">userId</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="k">new</span> <span class="nb">Promise</span><span class="p">(</span><span class="nx">resolve</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">setTimeout</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">resolve</span><span class="p">([</span>
<span class="p">{</span> <span class="na">id</span><span class="p">:</span> <span class="mi">1</span><span class="p">,</span> <span class="na">title</span><span class="p">:</span> <span class="dl">"</span><span class="s2">投稿1</span><span class="dl">"</span><span class="p">,</span> <span class="nx">userId</span> <span class="p">},</span>
<span class="p">{</span> <span class="na">id</span><span class="p">:</span> <span class="mi">2</span><span class="p">,</span> <span class="na">title</span><span class="p">:</span> <span class="dl">"</span><span class="s2">投稿2</span><span class="dl">"</span><span class="p">,</span> <span class="nx">userId</span> <span class="p">}</span>
<span class="p">]);</span>
<span class="p">},</span> <span class="mi">500</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="c1">// チェーンの実行</span>
<span class="nx">fetchUser</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span>
<span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="nx">user</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ユーザー取得:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">user</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">fetchUserPosts</span><span class="p">(</span><span class="nx">user</span><span class="p">.</span><span class="nx">id</span><span class="p">);</span>
<span class="p">})</span>
<span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="nx">posts</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">投稿取得:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">posts</span><span class="p">);</span>
<span class="p">})</span>
<span class="p">.</span><span class="k">catch</span><span class="p">(</span><span class="nx">error</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
<span class="p">});</span>
</code></pre></div></div>
<h3 id="asyncawait">async/await</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// async/awaitを使用した非同期処理</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">getUserData</span><span class="p">(</span><span class="nx">id</span><span class="p">)</span> <span class="p">{</span>
<span class="k">try</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">user</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">fetchUser</span><span class="p">(</span><span class="nx">id</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ユーザー取得:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">user</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">posts</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">fetchUserPosts</span><span class="p">(</span><span class="nx">user</span><span class="p">.</span><span class="nx">id</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">投稿取得:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">posts</span><span class="p">);</span>
<span class="k">return</span> <span class="p">{</span> <span class="nx">user</span><span class="p">,</span> <span class="nx">posts</span> <span class="p">};</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
<span class="k">throw</span> <span class="nx">error</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// async関数の呼び出し</span>
<span class="nx">getUserData</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span>
<span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="nx">data</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">完了:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">data</span><span class="p">))</span>
<span class="p">.</span><span class="k">catch</span><span class="p">(</span><span class="nx">error</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">処理失敗:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">));</span>
<span class="c1">// 複数の非同期処理を並行実行</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">fetchMultipleUsers</span><span class="p">()</span> <span class="p">{</span>
<span class="k">try</span> <span class="p">{</span>
<span class="c1">// 並行実行(高速)</span>
<span class="kd">const</span> <span class="p">[</span><span class="nx">user1</span><span class="p">,</span> <span class="nx">user2</span><span class="p">,</span> <span class="nx">user3</span><span class="p">]</span> <span class="o">=</span> <span class="k">await</span> <span class="nb">Promise</span><span class="p">.</span><span class="nx">all</span><span class="p">([</span>
<span class="nx">fetchUser</span><span class="p">(</span><span class="mi">1</span><span class="p">),</span>
<span class="nx">fetchUser</span><span class="p">(</span><span class="mi">2</span><span class="p">),</span>
<span class="nx">fetchUser</span><span class="p">(</span><span class="mi">3</span><span class="p">)</span>
<span class="p">]);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">全ユーザー取得完了:</span><span class="dl">"</span><span class="p">,</span> <span class="p">{</span> <span class="nx">user1</span><span class="p">,</span> <span class="nx">user2</span><span class="p">,</span> <span class="nx">user3</span> <span class="p">});</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">いずれかでエラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// Promise.allSettled(エラーがあっても全て実行)</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">fetchWithErrors</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">results</span> <span class="o">=</span> <span class="k">await</span> <span class="nb">Promise</span><span class="p">.</span><span class="nx">allSettled</span><span class="p">([</span>
<span class="nx">fetchUser</span><span class="p">(</span><span class="mi">1</span><span class="p">),</span>
<span class="nb">Promise</span><span class="p">.</span><span class="nx">reject</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラーのテスト</span><span class="dl">"</span><span class="p">),</span>
<span class="nx">fetchUser</span><span class="p">(</span><span class="mi">3</span><span class="p">)</span>
<span class="p">]);</span>
<span class="nx">results</span><span class="p">.</span><span class="nx">forEach</span><span class="p">((</span><span class="nx">result</span><span class="p">,</span> <span class="nx">index</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">result</span><span class="p">.</span><span class="nx">status</span> <span class="o">===</span> <span class="dl">"</span><span class="s2">fulfilled</span><span class="dl">"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`結果</span><span class="p">${</span><span class="nx">index</span><span class="p">}</span><span class="s2">:`</span><span class="p">,</span> <span class="nx">result</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`エラー</span><span class="p">${</span><span class="nx">index</span><span class="p">}</span><span class="s2">:`</span><span class="p">,</span> <span class="nx">result</span><span class="p">.</span><span class="nx">reason</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="p">}</span>
</code></pre></div></div>
<h3 id="fetch-api">Fetch API</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 基本的なGET リクエスト</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">fetchData</span><span class="p">()</span> <span class="p">{</span>
<span class="k">try</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">response</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">fetch</span><span class="p">(</span><span class="dl">"</span><span class="s2">https://jsonplaceholder.typicode.com/posts/1</span><span class="dl">"</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">response</span><span class="p">.</span><span class="nx">ok</span><span class="p">)</span> <span class="p">{</span>
<span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="s2">`HTTP error! status: </span><span class="p">${</span><span class="nx">response</span><span class="p">.</span><span class="nx">status</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="p">}</span>
<span class="kd">const</span> <span class="nx">data</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">response</span><span class="p">.</span><span class="nx">json</span><span class="p">();</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">取得データ:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">data</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">data</span><span class="p">;</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">取得エラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// POST リクエスト</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">createPost</span><span class="p">(</span><span class="nx">postData</span><span class="p">)</span> <span class="p">{</span>
<span class="k">try</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">response</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">fetch</span><span class="p">(</span><span class="dl">"</span><span class="s2">https://jsonplaceholder.typicode.com/posts</span><span class="dl">"</span><span class="p">,</span> <span class="p">{</span>
<span class="na">method</span><span class="p">:</span> <span class="dl">"</span><span class="s2">POST</span><span class="dl">"</span><span class="p">,</span>
<span class="na">headers</span><span class="p">:</span> <span class="p">{</span>
<span class="dl">"</span><span class="s2">Content-Type</span><span class="dl">"</span><span class="p">:</span> <span class="dl">"</span><span class="s2">application/json</span><span class="dl">"</span><span class="p">,</span>
<span class="p">},</span>
<span class="na">body</span><span class="p">:</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">postData</span><span class="p">)</span>
<span class="p">});</span>
<span class="kd">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">response</span><span class="p">.</span><span class="nx">json</span><span class="p">();</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">作成結果:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">result</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">result</span><span class="p">;</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">作成エラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// 使用例</span>
<span class="nx">createPost</span><span class="p">({</span>
<span class="na">title</span><span class="p">:</span> <span class="dl">"</span><span class="s2">新しい投稿</span><span class="dl">"</span><span class="p">,</span>
<span class="na">body</span><span class="p">:</span> <span class="dl">"</span><span class="s2">投稿内容</span><span class="dl">"</span><span class="p">,</span>
<span class="na">userId</span><span class="p">:</span> <span class="mi">1</span>
<span class="p">});</span>
<span class="c1">// ファイルアップロード</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">uploadFile</span><span class="p">(</span><span class="nx">file</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">formData</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">FormData</span><span class="p">();</span>
<span class="nx">formData</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="dl">"</span><span class="s2">file</span><span class="dl">"</span><span class="p">,</span> <span class="nx">file</span><span class="p">);</span>
<span class="k">try</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">response</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">fetch</span><span class="p">(</span><span class="dl">"</span><span class="s2">/upload</span><span class="dl">"</span><span class="p">,</span> <span class="p">{</span>
<span class="na">method</span><span class="p">:</span> <span class="dl">"</span><span class="s2">POST</span><span class="dl">"</span><span class="p">,</span>
<span class="na">body</span><span class="p">:</span> <span class="nx">formData</span>
<span class="p">});</span>
<span class="kd">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">response</span><span class="p">.</span><span class="nx">json</span><span class="p">();</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">アップロード完了:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">result</span><span class="p">);</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">アップロードエラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// AbortController でリクエストをキャンセル</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">cancellableRequest</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">controller</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">AbortController</span><span class="p">();</span>
<span class="c1">// 5秒後にキャンセル</span>
<span class="nx">setTimeout</span><span class="p">(()</span> <span class="o">=></span> <span class="nx">controller</span><span class="p">.</span><span class="nx">abort</span><span class="p">(),</span> <span class="mi">5000</span><span class="p">);</span>
<span class="k">try</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">response</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">fetch</span><span class="p">(</span><span class="dl">"</span><span class="s2">https://httpbin.org/delay/10</span><span class="dl">"</span><span class="p">,</span> <span class="p">{</span>
<span class="na">signal</span><span class="p">:</span> <span class="nx">controller</span><span class="p">.</span><span class="nx">signal</span>
<span class="p">});</span>
<span class="kd">const</span> <span class="nx">data</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">response</span><span class="p">.</span><span class="nx">json</span><span class="p">();</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">データ:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">data</span><span class="p">);</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">error</span><span class="p">.</span><span class="nx">name</span> <span class="o">===</span> <span class="dl">"</span><span class="s2">AbortError</span><span class="dl">"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">リクエストがキャンセルされました</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>
<h2 id="モダンjavascriptes6">モダンJavaScript(ES6+)</h2>
<h3 id="分割代入">分割代入</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 配列の分割代入</span>
<span class="kd">const</span> <span class="nx">colors</span> <span class="o">=</span> <span class="p">[</span><span class="dl">"</span><span class="s2">red</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">green</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">blue</span><span class="dl">"</span><span class="p">];</span>
<span class="kd">const</span> <span class="p">[</span><span class="nx">first</span><span class="p">,</span> <span class="nx">second</span><span class="p">,</span> <span class="nx">third</span><span class="p">]</span> <span class="o">=</span> <span class="nx">colors</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">first</span><span class="p">);</span> <span class="c1">// "red"</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">second</span><span class="p">);</span> <span class="c1">// "green"</span>
<span class="c1">// デフォルト値</span>
<span class="kd">const</span> <span class="p">[</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">,</span> <span class="nx">c</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">yellow</span><span class="dl">"</span><span class="p">]</span> <span class="o">=</span> <span class="p">[</span><span class="dl">"</span><span class="s2">red</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">green</span><span class="dl">"</span><span class="p">];</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">c</span><span class="p">);</span> <span class="c1">// "yellow"</span>
<span class="c1">// 値の交換</span>
<span class="kd">let</span> <span class="nx">x</span> <span class="o">=</span> <span class="mi">1</span><span class="p">,</span> <span class="nx">y</span> <span class="o">=</span> <span class="mi">2</span><span class="p">;</span>
<span class="p">[</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">]</span> <span class="o">=</span> <span class="p">[</span><span class="nx">y</span><span class="p">,</span> <span class="nx">x</span><span class="p">];</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">);</span> <span class="c1">// 2, 1</span>
<span class="c1">// オブジェクトの分割代入</span>
<span class="kd">const</span> <span class="nx">person</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">name</span><span class="p">:</span> <span class="dl">"</span><span class="s2">田中太郎</span><span class="dl">"</span><span class="p">,</span>
<span class="na">age</span><span class="p">:</span> <span class="mi">30</span><span class="p">,</span>
<span class="na">city</span><span class="p">:</span> <span class="dl">"</span><span class="s2">東京</span><span class="dl">"</span>
<span class="p">};</span>
<span class="kd">const</span> <span class="p">{</span> <span class="nx">name</span><span class="p">,</span> <span class="nx">age</span><span class="p">,</span> <span class="nx">city</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">person</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">name</span><span class="p">);</span> <span class="c1">// "田中太郎"</span>
<span class="c1">// プロパティ名を変更</span>
<span class="kd">const</span> <span class="p">{</span> <span class="na">name</span><span class="p">:</span> <span class="nx">fullName</span><span class="p">,</span> <span class="na">age</span><span class="p">:</span> <span class="nx">years</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">person</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">fullName</span><span class="p">);</span> <span class="c1">// "田中太郎"</span>
<span class="c1">// ネストした分割代入</span>
<span class="kd">const</span> <span class="nx">user</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">id</span><span class="p">:</span> <span class="mi">1</span><span class="p">,</span>
<span class="na">info</span><span class="p">:</span> <span class="p">{</span>
<span class="na">name</span><span class="p">:</span> <span class="dl">"</span><span class="s2">太郎</span><span class="dl">"</span><span class="p">,</span>
<span class="na">contact</span><span class="p">:</span> <span class="p">{</span>
<span class="na">email</span><span class="p">:</span> <span class="dl">"</span><span class="s2">taro@example.com</span><span class="dl">"</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="kd">const</span> <span class="p">{</span> <span class="na">info</span><span class="p">:</span> <span class="p">{</span> <span class="na">name</span><span class="p">:</span> <span class="nx">userName</span><span class="p">,</span> <span class="na">contact</span><span class="p">:</span> <span class="p">{</span> <span class="nx">email</span> <span class="p">}</span> <span class="p">}</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">user</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">userName</span><span class="p">);</span> <span class="c1">// "太郎"</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">email</span><span class="p">);</span> <span class="c1">// "taro@example.com"</span>
<span class="c1">// 関数の引数での分割代入</span>
<span class="kd">function</span> <span class="nx">greetUser</span><span class="p">({</span> <span class="nx">name</span><span class="p">,</span> <span class="nx">age</span> <span class="o">=</span> <span class="mi">0</span> <span class="p">})</span> <span class="p">{</span>
<span class="k">return</span> <span class="s2">`こんにちは、</span><span class="p">${</span><span class="nx">name</span><span class="p">}</span><span class="s2">さん(</span><span class="p">${</span><span class="nx">age</span><span class="p">}</span><span class="s2">歳)`</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">greetUser</span><span class="p">({</span> <span class="na">name</span><span class="p">:</span> <span class="dl">"</span><span class="s2">花子</span><span class="dl">"</span><span class="p">,</span> <span class="na">age</span><span class="p">:</span> <span class="mi">25</span> <span class="p">}));</span> <span class="c1">// "こんにちは、花子さん(25歳)"</span>
</code></pre></div></div>
<h3 id="モジュール">モジュール</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// math.js(エクスポート)</span>
<span class="k">export</span> <span class="kd">const</span> <span class="nx">PI</span> <span class="o">=</span> <span class="mf">3.14159</span><span class="p">;</span>
<span class="k">export</span> <span class="kd">function</span> <span class="nx">add</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">a</span> <span class="o">+</span> <span class="nx">b</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">export</span> <span class="kd">function</span> <span class="nx">multiply</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">a</span> <span class="o">*</span> <span class="nx">b</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// デフォルトエクスポート</span>
<span class="k">export</span> <span class="k">default</span> <span class="kd">function</span> <span class="nx">subtract</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">a</span> <span class="o">-</span> <span class="nx">b</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// main.js(インポート)</span>
<span class="k">import</span> <span class="nx">subtract</span><span class="p">,</span> <span class="p">{</span> <span class="nx">PI</span><span class="p">,</span> <span class="nx">add</span><span class="p">,</span> <span class="nx">multiply</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">./math.js</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">PI</span><span class="p">);</span> <span class="c1">// 3.14159</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">add</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">));</span> <span class="c1">// 5</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">multiply</span><span class="p">(</span><span class="mi">4</span><span class="p">,</span> <span class="mi">5</span><span class="p">));</span> <span class="c1">// 20</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">subtract</span><span class="p">(</span><span class="mi">10</span><span class="p">,</span> <span class="mi">3</span><span class="p">));</span> <span class="c1">// 7</span>
<span class="c1">// 名前を変更してインポート</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">add</span> <span class="k">as</span> <span class="nx">sum</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">./math.js</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">sum</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">));</span> <span class="c1">// 3</span>
<span class="c1">// 全てインポート</span>
<span class="k">import</span> <span class="o">*</span> <span class="k">as</span> <span class="nx">MathUtils</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">./math.js</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">MathUtils</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">));</span> <span class="c1">// 3</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">MathUtils</span><span class="p">.</span><span class="nx">PI</span><span class="p">);</span> <span class="c1">// 3.14159</span>
<span class="c1">// 動的インポート(非同期)</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">loadMathModule</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">mathModule</span> <span class="o">=</span> <span class="k">await</span> <span class="k">import</span><span class="p">(</span><span class="dl">'</span><span class="s1">./math.js</span><span class="dl">'</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">mathModule</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">));</span> <span class="c1">// 3</span>
<span class="p">}</span>
</code></pre></div></div>
<h3 id="クラス">クラス</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// ES6 クラス</span>
<span class="kd">class</span> <span class="nx">Person</span> <span class="p">{</span>
<span class="c1">// コンストラクタ</span>
<span class="kd">constructor</span><span class="p">(</span><span class="nx">name</span><span class="p">,</span> <span class="nx">age</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">name</span> <span class="o">=</span> <span class="nx">name</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">age</span> <span class="o">=</span> <span class="nx">age</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// メソッド</span>
<span class="nx">greet</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="s2">`こんにちは、私は</span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">name</span><span class="p">}</span><span class="s2">です`</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// ゲッター</span>
<span class="kd">get</span> <span class="nx">info</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="s2">`</span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">name</span><span class="p">}</span><span class="s2">(</span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">age</span><span class="p">}</span><span class="s2">歳)`</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// セッター</span>
<span class="kd">set</span> <span class="nx">age</span><span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">value</span> <span class="o"><</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
<span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="dl">"</span><span class="s2">年齢は0以上である必要があります</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">_age</span> <span class="o">=</span> <span class="nx">value</span><span class="p">;</span>
<span class="p">}</span>
<span class="kd">get</span> <span class="nx">age</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">_age</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// 静的メソッド</span>
<span class="kd">static</span> <span class="nx">createAdult</span><span class="p">(</span><span class="nx">name</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">(</span><span class="nx">name</span><span class="p">,</span> <span class="mi">20</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// クラスの使用</span>
<span class="kd">const</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">(</span><span class="dl">"</span><span class="s2">太郎</span><span class="dl">"</span><span class="p">,</span> <span class="mi">25</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">person</span><span class="p">.</span><span class="nx">greet</span><span class="p">());</span> <span class="c1">// "こんにちは、私は太郎です"</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">person</span><span class="p">.</span><span class="nx">info</span><span class="p">);</span> <span class="c1">// "太郎(25歳)"</span>
<span class="c1">// 静的メソッドの使用</span>
<span class="kd">const</span> <span class="nx">adult</span> <span class="o">=</span> <span class="nx">Person</span><span class="p">.</span><span class="nx">createAdult</span><span class="p">(</span><span class="dl">"</span><span class="s2">花子</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// 継承</span>
<span class="kd">class</span> <span class="nx">Student</span> <span class="kd">extends</span> <span class="nx">Person</span> <span class="p">{</span>
<span class="kd">constructor</span><span class="p">(</span><span class="nx">name</span><span class="p">,</span> <span class="nx">age</span><span class="p">,</span> <span class="nx">school</span><span class="p">)</span> <span class="p">{</span>
<span class="k">super</span><span class="p">(</span><span class="nx">name</span><span class="p">,</span> <span class="nx">age</span><span class="p">);</span> <span class="c1">// 親クラスのコンストラクタを呼び出し</span>
<span class="k">this</span><span class="p">.</span><span class="nx">school</span> <span class="o">=</span> <span class="nx">school</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">greet</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="s2">`</span><span class="p">${</span><span class="k">super</span><span class="p">.</span><span class="nx">greet</span><span class="p">()}</span><span class="s2">、</span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">school</span><span class="p">}</span><span class="s2">の学生です`</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">study</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="s2">`</span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">name</span><span class="p">}</span><span class="s2">は勉強しています`</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">const</span> <span class="nx">student</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Student</span><span class="p">(</span><span class="dl">"</span><span class="s2">次郎</span><span class="dl">"</span><span class="p">,</span> <span class="mi">18</span><span class="p">,</span> <span class="dl">"</span><span class="s2">東京大学</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">student</span><span class="p">.</span><span class="nx">greet</span><span class="p">());</span> <span class="c1">// "こんにちは、私は次郎です、東京大学の学生です"</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">student</span><span class="p">.</span><span class="nx">study</span><span class="p">());</span> <span class="c1">// "次郎は勉強しています"</span>
<span class="c1">// プライベートフィールド(ES2022+)</span>
<span class="kd">class</span> <span class="nx">BankAccount</span> <span class="p">{</span>
<span class="err">#</span><span class="nx">balance</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="c1">// プライベートフィールド</span>
<span class="kd">constructor</span><span class="p">(</span><span class="nx">initialBalance</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="err">#</span><span class="nx">balance</span> <span class="o">=</span> <span class="nx">initialBalance</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">deposit</span><span class="p">(</span><span class="nx">amount</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="err">#</span><span class="nx">balance</span> <span class="o">+=</span> <span class="nx">amount</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">getBalance</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="err">#</span><span class="nx">balance</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// プライベートメソッド</span>
<span class="err">#</span><span class="nx">calculateInterest</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="err">#</span><span class="nx">balance</span> <span class="o">*</span> <span class="mf">0.01</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">const</span> <span class="nx">account</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">BankAccount</span><span class="p">(</span><span class="mi">1000</span><span class="p">);</span>
<span class="nx">account</span><span class="p">.</span><span class="nx">deposit</span><span class="p">(</span><span class="mi">500</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">account</span><span class="p">.</span><span class="nx">getBalance</span><span class="p">());</span> <span class="c1">// 1500</span>
<span class="c1">// console.log(account.#balance); // エラー: プライベートフィールドにはアクセス不可</span>
</code></pre></div></div>
<h2 id="エラーハンドリング">エラーハンドリング</h2>
<h3 id="try-catch文">try-catch文</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 基本的なエラーハンドリング</span>
<span class="k">try</span> <span class="p">{</span>
<span class="c1">// エラーが発生する可能性のあるコード</span>
<span class="kd">let</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">riskyOperation</span><span class="p">();</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">成功:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">result</span><span class="p">);</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="c1">// エラーが発生した場合の処理</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラーが発生しました:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
<span class="p">}</span> <span class="k">finally</span> <span class="p">{</span>
<span class="c1">// 必ず実行される処理</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">処理完了</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="c1">// 異なるタイプのエラーの処理</span>
<span class="kd">function</span> <span class="nx">parseJSON</span><span class="p">(</span><span class="nx">jsonString</span><span class="p">)</span> <span class="p">{</span>
<span class="k">try</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="nx">jsonString</span><span class="p">);</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">error</span> <span class="k">instanceof</span> <span class="nx">SyntaxError</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">JSON形式が正しくありません:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">予期しないエラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">return</span> <span class="kc">null</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// カスタムエラー</span>
<span class="kd">class</span> <span class="nx">ValidationError</span> <span class="kd">extends</span> <span class="nb">Error</span> <span class="p">{</span>
<span class="kd">constructor</span><span class="p">(</span><span class="nx">message</span><span class="p">,</span> <span class="nx">field</span><span class="p">)</span> <span class="p">{</span>
<span class="k">super</span><span class="p">(</span><span class="nx">message</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">name</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">ValidationError</span><span class="dl">"</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">field</span> <span class="o">=</span> <span class="nx">field</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">validateEmail</span><span class="p">(</span><span class="nx">email</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">email</span><span class="p">.</span><span class="nx">includes</span><span class="p">(</span><span class="dl">"</span><span class="s2">@</span><span class="dl">"</span><span class="p">))</span> <span class="p">{</span>
<span class="k">throw</span> <span class="k">new</span> <span class="nx">ValidationError</span><span class="p">(</span><span class="dl">"</span><span class="s2">有効なメールアドレスではありません</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">email</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// カスタムエラーの使用</span>
<span class="k">try</span> <span class="p">{</span>
<span class="nx">validateEmail</span><span class="p">(</span><span class="dl">"</span><span class="s2">invalid-email</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">error</span> <span class="k">instanceof</span> <span class="nx">ValidationError</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`検証エラー(</span><span class="p">${</span><span class="nx">error</span><span class="p">.</span><span class="nx">field</span><span class="p">}</span><span class="s2">): </span><span class="p">${</span><span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">予期しないエラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// async/await でのエラーハンドリング</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">fetchUserData</span><span class="p">(</span><span class="nx">id</span><span class="p">)</span> <span class="p">{</span>
<span class="k">try</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">response</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">fetch</span><span class="p">(</span><span class="s2">`/api/users/</span><span class="p">${</span><span class="nx">id</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">response</span><span class="p">.</span><span class="nx">ok</span><span class="p">)</span> <span class="p">{</span>
<span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="s2">`ユーザー取得失敗: </span><span class="p">${</span><span class="nx">response</span><span class="p">.</span><span class="nx">status</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="p">}</span>
<span class="kd">const</span> <span class="nx">userData</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">response</span><span class="p">.</span><span class="nx">json</span><span class="p">();</span>
<span class="k">return</span> <span class="nx">userData</span><span class="p">;</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ユーザーデータ取得エラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
<span class="k">throw</span> <span class="nx">error</span><span class="p">;</span> <span class="c1">// エラーを再度投げる</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// エラーのロギング</span>
<span class="kd">function</span> <span class="nx">logError</span><span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="dl">"</span><span class="s2">Error:</span><span class="dl">"</span><span class="p">,</span> <span class="p">{</span>
<span class="na">message</span><span class="p">:</span> <span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">,</span>
<span class="na">stack</span><span class="p">:</span> <span class="nx">error</span><span class="p">.</span><span class="nx">stack</span><span class="p">,</span>
<span class="na">timestamp</span><span class="p">:</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">().</span><span class="nx">toISOString</span><span class="p">()</span>
<span class="p">});</span>
<span class="p">}</span>
</code></pre></div></div>
<h2 id="ブラウザapi">ブラウザAPI</h2>
<h3 id="local-storage">Local Storage</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// データの保存</span>
<span class="nx">localStorage</span><span class="p">.</span><span class="nx">setItem</span><span class="p">(</span><span class="dl">"</span><span class="s2">username</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">田中太郎</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">localStorage</span><span class="p">.</span><span class="nx">setItem</span><span class="p">(</span><span class="dl">"</span><span class="s2">settings</span><span class="dl">"</span><span class="p">,</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">({</span>
<span class="na">theme</span><span class="p">:</span> <span class="dl">"</span><span class="s2">dark</span><span class="dl">"</span><span class="p">,</span>
<span class="na">language</span><span class="p">:</span> <span class="dl">"</span><span class="s2">ja</span><span class="dl">"</span>
<span class="p">}));</span>
<span class="c1">// データの取得</span>
<span class="kd">const</span> <span class="nx">username</span> <span class="o">=</span> <span class="nx">localStorage</span><span class="p">.</span><span class="nx">getItem</span><span class="p">(</span><span class="dl">"</span><span class="s2">username</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">username</span><span class="p">);</span> <span class="c1">// "田中太郎"</span>
<span class="kd">const</span> <span class="nx">settings</span> <span class="o">=</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="nx">localStorage</span><span class="p">.</span><span class="nx">getItem</span><span class="p">(</span><span class="dl">"</span><span class="s2">settings</span><span class="dl">"</span><span class="p">));</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">settings</span><span class="p">);</span> <span class="c1">// { theme: "dark", language: "ja" }</span>
<span class="c1">// データの削除</span>
<span class="nx">localStorage</span><span class="p">.</span><span class="nx">removeItem</span><span class="p">(</span><span class="dl">"</span><span class="s2">username</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// 全データの削除</span>
<span class="nx">localStorage</span><span class="p">.</span><span class="nx">clear</span><span class="p">();</span>
<span class="c1">// ストレージの変更を監視</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">storage</span><span class="dl">"</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">ストレージが変更されました:</span><span class="dl">"</span><span class="p">,</span> <span class="p">{</span>
<span class="na">key</span><span class="p">:</span> <span class="nx">e</span><span class="p">.</span><span class="nx">key</span><span class="p">,</span>
<span class="na">oldValue</span><span class="p">:</span> <span class="nx">e</span><span class="p">.</span><span class="nx">oldValue</span><span class="p">,</span>
<span class="na">newValue</span><span class="p">:</span> <span class="nx">e</span><span class="p">.</span><span class="nx">newValue</span>
<span class="p">});</span>
<span class="p">});</span>
<span class="c1">// セッションストレージ(タブを閉じると削除される)</span>
<span class="nx">sessionStorage</span><span class="p">.</span><span class="nx">setItem</span><span class="p">(</span><span class="dl">"</span><span class="s2">temporary</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">一時的なデータ</span><span class="dl">"</span><span class="p">);</span>
</code></pre></div></div>
<h3 id="geolocation-api">Geolocation API</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 現在位置の取得</span>
<span class="k">if</span> <span class="p">(</span><span class="dl">"</span><span class="s2">geolocation</span><span class="dl">"</span> <span class="k">in</span> <span class="nb">navigator</span><span class="p">)</span> <span class="p">{</span>
<span class="nb">navigator</span><span class="p">.</span><span class="nx">geolocation</span><span class="p">.</span><span class="nx">getCurrentPosition</span><span class="p">(</span>
<span class="kd">function</span><span class="p">(</span><span class="nx">position</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">latitude</span> <span class="o">=</span> <span class="nx">position</span><span class="p">.</span><span class="nx">coords</span><span class="p">.</span><span class="nx">latitude</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">longitude</span> <span class="o">=</span> <span class="nx">position</span><span class="p">.</span><span class="nx">coords</span><span class="p">.</span><span class="nx">longitude</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`現在位置: </span><span class="p">${</span><span class="nx">latitude</span><span class="p">}</span><span class="s2">, </span><span class="p">${</span><span class="nx">longitude</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="p">},</span>
<span class="kd">function</span><span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">位置取得エラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
<span class="p">},</span>
<span class="p">{</span>
<span class="na">enableHighAccuracy</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> <span class="c1">// 高精度</span>
<span class="na">timeout</span><span class="p">:</span> <span class="mi">10000</span><span class="p">,</span> <span class="c1">// タイムアウト(10秒)</span>
<span class="na">maximumAge</span><span class="p">:</span> <span class="mi">60000</span> <span class="c1">// キャッシュ有効期間(1分)</span>
<span class="p">}</span>
<span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">Geolocation APIはサポートされていません</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="c1">// 位置の監視</span>
<span class="kd">const</span> <span class="nx">watchId</span> <span class="o">=</span> <span class="nb">navigator</span><span class="p">.</span><span class="nx">geolocation</span><span class="p">.</span><span class="nx">watchPosition</span><span class="p">(</span>
<span class="kd">function</span><span class="p">(</span><span class="nx">position</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">位置が変更されました:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">position</span><span class="p">.</span><span class="nx">coords</span><span class="p">);</span>
<span class="p">},</span>
<span class="kd">function</span><span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">監視エラー:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">);</span>
<span class="c1">// 監視の停止</span>
<span class="c1">// navigator.geolocation.clearWatch(watchId);</span>
</code></pre></div></div>
<h3 id="notification-api">Notification API</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 通知の許可を要求</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">requestNotificationPermission</span><span class="p">()</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="dl">"</span><span class="s2">Notification</span><span class="dl">"</span> <span class="k">in</span> <span class="nb">window</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">permission</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">Notification</span><span class="p">.</span><span class="nx">requestPermission</span><span class="p">();</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">通知許可:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">permission</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">permission</span> <span class="o">===</span> <span class="dl">"</span><span class="s2">granted</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// 通知の表示</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">showNotification</span><span class="p">(</span><span class="nx">title</span><span class="p">,</span> <span class="nx">options</span> <span class="o">=</span> <span class="p">{})</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">hasPermission</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">requestNotificationPermission</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">hasPermission</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">notification</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Notification</span><span class="p">(</span><span class="nx">title</span><span class="p">,</span> <span class="p">{</span>
<span class="na">body</span><span class="p">:</span> <span class="nx">options</span><span class="p">.</span><span class="nx">body</span> <span class="o">||</span> <span class="dl">""</span><span class="p">,</span>
<span class="na">icon</span><span class="p">:</span> <span class="nx">options</span><span class="p">.</span><span class="nx">icon</span> <span class="o">||</span> <span class="dl">"</span><span class="s2">/default-icon.png</span><span class="dl">"</span><span class="p">,</span>
<span class="na">tag</span><span class="p">:</span> <span class="nx">options</span><span class="p">.</span><span class="nx">tag</span> <span class="o">||</span> <span class="dl">"</span><span class="s2">default</span><span class="dl">"</span><span class="p">,</span>
<span class="p">...</span><span class="nx">options</span>
<span class="p">});</span>
<span class="nx">notification</span><span class="p">.</span><span class="nx">onclick</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">通知がクリックされました</span><span class="dl">"</span><span class="p">);</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">focus</span><span class="p">();</span>
<span class="k">this</span><span class="p">.</span><span class="nx">close</span><span class="p">();</span>
<span class="p">};</span>
<span class="c1">// 自動で閉じる</span>
<span class="nx">setTimeout</span><span class="p">(()</span> <span class="o">=></span> <span class="nx">notification</span><span class="p">.</span><span class="nx">close</span><span class="p">(),</span> <span class="mi">5000</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// 使用例</span>
<span class="nx">showNotification</span><span class="p">(</span><span class="dl">"</span><span class="s2">新しいメッセージ</span><span class="dl">"</span><span class="p">,</span> <span class="p">{</span>
<span class="na">body</span><span class="p">:</span> <span class="dl">"</span><span class="s2">太郎さんからメッセージが届きました</span><span class="dl">"</span><span class="p">,</span>
<span class="na">icon</span><span class="p">:</span> <span class="dl">"</span><span class="s2">/message-icon.png</span><span class="dl">"</span><span class="p">,</span>
<span class="na">tag</span><span class="p">:</span> <span class="dl">"</span><span class="s2">message</span><span class="dl">"</span>
<span class="p">});</span>
</code></pre></div></div>
<h2 id="実践的なコード例">実践的なコード例</h2>
<h3 id="フォームバリデーション">フォームバリデーション</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">class</span> <span class="nx">FormValidator</span> <span class="p">{</span>
<span class="kd">constructor</span><span class="p">(</span><span class="nx">form</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">form</span> <span class="o">=</span> <span class="nx">form</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">errors</span> <span class="o">=</span> <span class="p">{};</span>
<span class="k">this</span><span class="p">.</span><span class="nx">rules</span> <span class="o">=</span> <span class="p">{};</span>
<span class="k">this</span><span class="p">.</span><span class="nx">init</span><span class="p">();</span>
<span class="p">}</span>
<span class="nx">init</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">form</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">submit</span><span class="dl">"</span><span class="p">,</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
<span class="k">this</span><span class="p">.</span><span class="nx">validate</span><span class="p">();</span>
<span class="p">});</span>
<span class="c1">// リアルタイムバリデーション</span>
<span class="k">this</span><span class="p">.</span><span class="nx">form</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">input</span><span class="dl">"</span><span class="p">,</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">validateField</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="nx">addRule</span><span class="p">(</span><span class="nx">fieldName</span><span class="p">,</span> <span class="nx">rule</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">rules</span><span class="p">[</span><span class="nx">fieldName</span><span class="p">])</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">rules</span><span class="p">[</span><span class="nx">fieldName</span><span class="p">]</span> <span class="o">=</span> <span class="p">[];</span>
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">rules</span><span class="p">[</span><span class="nx">fieldName</span><span class="p">].</span><span class="nx">push</span><span class="p">(</span><span class="nx">rule</span><span class="p">);</span>
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">validateField</span><span class="p">(</span><span class="nx">field</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">rules</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">rules</span><span class="p">[</span><span class="nx">field</span><span class="p">.</span><span class="nx">name</span><span class="p">];</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">rules</span><span class="p">)</span> <span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">clearError</span><span class="p">(</span><span class="nx">field</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">const</span> <span class="nx">rule</span> <span class="k">of</span> <span class="nx">rules</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">rule</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="nx">field</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">result</span><span class="p">.</span><span class="nx">valid</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">addError</span><span class="p">(</span><span class="nx">field</span><span class="p">.</span><span class="nx">name</span><span class="p">,</span> <span class="nx">result</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">showError</span><span class="p">(</span><span class="nx">field</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span>
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">showSuccess</span><span class="p">(</span><span class="nx">field</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span>
<span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">validate</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">errors</span> <span class="o">=</span> <span class="p">{};</span>
<span class="kd">let</span> <span class="nx">isValid</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">fields</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">form</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="dl">"</span><span class="s2">[name]</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">fields</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">field</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">validateField</span><span class="p">(</span><span class="nx">field</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">isValid</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">isValid</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">onSuccess</span><span class="p">();</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">onError</span><span class="p">();</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">isValid</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">addError</span><span class="p">(</span><span class="nx">fieldName</span><span class="p">,</span> <span class="nx">message</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">errors</span><span class="p">[</span><span class="nx">fieldName</span><span class="p">])</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">errors</span><span class="p">[</span><span class="nx">fieldName</span><span class="p">]</span> <span class="o">=</span> <span class="p">[];</span>
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">errors</span><span class="p">[</span><span class="nx">fieldName</span><span class="p">].</span><span class="nx">push</span><span class="p">(</span><span class="nx">message</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">clearError</span><span class="p">(</span><span class="nx">fieldName</span><span class="p">)</span> <span class="p">{</span>
<span class="k">delete</span> <span class="k">this</span><span class="p">.</span><span class="nx">errors</span><span class="p">[</span><span class="nx">fieldName</span><span class="p">];</span>
<span class="k">this</span><span class="p">.</span><span class="nx">hideError</span><span class="p">(</span><span class="nx">fieldName</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">showError</span><span class="p">(</span><span class="nx">fieldName</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">field</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">form</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s2">`[name="</span><span class="p">${</span><span class="nx">fieldName</span><span class="p">}</span><span class="s2">"]`</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">errorContainer</span> <span class="o">=</span> <span class="nx">field</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">.error-message</span><span class="dl">"</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">errorContainer</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">errorContainer</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">errors</span><span class="p">[</span><span class="nx">fieldName</span><span class="p">][</span><span class="mi">0</span><span class="p">];</span>
<span class="nx">errorContainer</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">block</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">field</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="dl">"</span><span class="s2">error</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">field</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">remove</span><span class="p">(</span><span class="dl">"</span><span class="s2">success</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">hideError</span><span class="p">(</span><span class="nx">fieldName</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">field</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">form</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s2">`[name="</span><span class="p">${</span><span class="nx">fieldName</span><span class="p">}</span><span class="s2">"]`</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">errorContainer</span> <span class="o">=</span> <span class="nx">field</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">.error-message</span><span class="dl">"</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">errorContainer</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">errorContainer</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">none</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">field</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">remove</span><span class="p">(</span><span class="dl">"</span><span class="s2">error</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">showSuccess</span><span class="p">(</span><span class="nx">fieldName</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">field</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">form</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s2">`[name="</span><span class="p">${</span><span class="nx">fieldName</span><span class="p">}</span><span class="s2">"]`</span><span class="p">);</span>
<span class="nx">field</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="dl">"</span><span class="s2">success</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">field</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">remove</span><span class="p">(</span><span class="dl">"</span><span class="s2">error</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">onSuccess</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">フォームバリデーション成功</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// フォーム送信処理</span>
<span class="p">}</span>
<span class="nx">onError</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">フォームバリデーションエラー:</span><span class="dl">"</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">errors</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// バリデーションルール</span>
<span class="kd">const</span> <span class="nx">rules</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">required</span><span class="p">:</span> <span class="p">(</span><span class="nx">message</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">この項目は必須です</span><span class="dl">"</span><span class="p">)</span> <span class="o">=></span> <span class="p">({</span>
<span class="na">test</span><span class="p">:</span> <span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="o">=></span> <span class="p">({</span>
<span class="na">valid</span><span class="p">:</span> <span class="nx">value</span><span class="p">.</span><span class="nx">trim</span><span class="p">().</span><span class="nx">length</span> <span class="o">></span> <span class="mi">0</span><span class="p">,</span>
<span class="nx">message</span>
<span class="p">})</span>
<span class="p">}),</span>
<span class="na">email</span><span class="p">:</span> <span class="p">(</span><span class="nx">message</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">有効なメールアドレスを入力してください</span><span class="dl">"</span><span class="p">)</span> <span class="o">=></span> <span class="p">({</span>
<span class="na">test</span><span class="p">:</span> <span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="o">=></span> <span class="p">({</span>
<span class="na">valid</span><span class="p">:</span> <span class="sr">/^</span><span class="se">[^\s</span><span class="sr">@</span><span class="se">]</span><span class="sr">+@</span><span class="se">[^\s</span><span class="sr">@</span><span class="se">]</span><span class="sr">+</span><span class="se">\.[^\s</span><span class="sr">@</span><span class="se">]</span><span class="sr">+$/</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="nx">value</span><span class="p">),</span>
<span class="nx">message</span>
<span class="p">})</span>
<span class="p">}),</span>
<span class="na">minLength</span><span class="p">:</span> <span class="p">(</span><span class="nx">min</span><span class="p">,</span> <span class="nx">message</span><span class="p">)</span> <span class="o">=></span> <span class="p">({</span>
<span class="na">test</span><span class="p">:</span> <span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="o">=></span> <span class="p">({</span>
<span class="na">valid</span><span class="p">:</span> <span class="nx">value</span><span class="p">.</span><span class="nx">length</span> <span class="o">>=</span> <span class="nx">min</span><span class="p">,</span>
<span class="na">message</span><span class="p">:</span> <span class="nx">message</span> <span class="o">||</span> <span class="s2">`</span><span class="p">${</span><span class="nx">min</span><span class="p">}</span><span class="s2">文字以上で入力してください`</span>
<span class="p">})</span>
<span class="p">}),</span>
<span class="na">phone</span><span class="p">:</span> <span class="p">(</span><span class="nx">message</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">有効な電話番号を入力してください</span><span class="dl">"</span><span class="p">)</span> <span class="o">=></span> <span class="p">({</span>
<span class="na">test</span><span class="p">:</span> <span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="o">=></span> <span class="p">({</span>
<span class="na">valid</span><span class="p">:</span> <span class="sr">/^</span><span class="se">[\d</span><span class="sr">-</span><span class="se">]</span><span class="sr">+$/</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="nx">value</span><span class="p">),</span>
<span class="nx">message</span>
<span class="p">})</span>
<span class="p">})</span>
<span class="p">};</span>
<span class="c1">// 使用例</span>
<span class="kd">const</span> <span class="nx">form</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#contactForm</span><span class="dl">"</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">validator</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">FormValidator</span><span class="p">(</span><span class="nx">form</span><span class="p">);</span>
<span class="nx">validator</span>
<span class="p">.</span><span class="nx">addRule</span><span class="p">(</span><span class="dl">"</span><span class="s2">name</span><span class="dl">"</span><span class="p">,</span> <span class="nx">rules</span><span class="p">.</span><span class="nx">required</span><span class="p">())</span>
<span class="p">.</span><span class="nx">addRule</span><span class="p">(</span><span class="dl">"</span><span class="s2">email</span><span class="dl">"</span><span class="p">,</span> <span class="nx">rules</span><span class="p">.</span><span class="nx">required</span><span class="p">())</span>
<span class="p">.</span><span class="nx">addRule</span><span class="p">(</span><span class="dl">"</span><span class="s2">email</span><span class="dl">"</span><span class="p">,</span> <span class="nx">rules</span><span class="p">.</span><span class="nx">email</span><span class="p">())</span>
<span class="p">.</span><span class="nx">addRule</span><span class="p">(</span><span class="dl">"</span><span class="s2">phone</span><span class="dl">"</span><span class="p">,</span> <span class="nx">rules</span><span class="p">.</span><span class="nx">phone</span><span class="p">())</span>
<span class="p">.</span><span class="nx">addRule</span><span class="p">(</span><span class="dl">"</span><span class="s2">message</span><span class="dl">"</span><span class="p">,</span> <span class="nx">rules</span><span class="p">.</span><span class="nx">required</span><span class="p">())</span>
<span class="p">.</span><span class="nx">addRule</span><span class="p">(</span><span class="dl">"</span><span class="s2">message</span><span class="dl">"</span><span class="p">,</span> <span class="nx">rules</span><span class="p">.</span><span class="nx">minLength</span><span class="p">(</span><span class="mi">10</span><span class="p">));</span>
</code></pre></div></div>
<h3 id="シンプルなspasingle-page-application">シンプルなSPA(Single Page Application)</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">class</span> <span class="nx">SimpleRouter</span> <span class="p">{</span>
<span class="kd">constructor</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">routes</span> <span class="o">=</span> <span class="p">{};</span>
<span class="k">this</span><span class="p">.</span><span class="nx">currentRoute</span> <span class="o">=</span> <span class="dl">""</span><span class="p">;</span>
<span class="c1">// ブラウザの戻る/進むボタン対応</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">popstate</span><span class="dl">"</span><span class="p">,</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">handleRoute</span><span class="p">();</span>
<span class="p">});</span>
<span class="c1">// リンククリック時の処理</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">matches</span><span class="p">(</span><span class="dl">"</span><span class="s2">[data-route]</span><span class="dl">"</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
<span class="kd">const</span> <span class="nx">route</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">getAttribute</span><span class="p">(</span><span class="dl">"</span><span class="s2">data-route</span><span class="dl">"</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">navigate</span><span class="p">(</span><span class="nx">route</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="c1">// 初期ルート処理</span>
<span class="k">this</span><span class="p">.</span><span class="nx">handleRoute</span><span class="p">();</span>
<span class="p">}</span>
<span class="nx">addRoute</span><span class="p">(</span><span class="nx">path</span><span class="p">,</span> <span class="nx">handler</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">routes</span><span class="p">[</span><span class="nx">path</span><span class="p">]</span> <span class="o">=</span> <span class="nx">handler</span><span class="p">;</span>
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">navigate</span><span class="p">(</span><span class="nx">path</span><span class="p">)</span> <span class="p">{</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">history</span><span class="p">.</span><span class="nx">pushState</span><span class="p">({},</span> <span class="dl">""</span><span class="p">,</span> <span class="nx">path</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">handleRoute</span><span class="p">();</span>
<span class="p">}</span>
<span class="nx">handleRoute</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">path</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">pathname</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">currentRoute</span> <span class="o">=</span> <span class="nx">path</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">handler</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">routes</span><span class="p">[</span><span class="nx">path</span><span class="p">]</span> <span class="o">||</span> <span class="k">this</span><span class="p">.</span><span class="nx">routes</span><span class="p">[</span><span class="dl">"</span><span class="s2">*</span><span class="dl">"</span><span class="p">];</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">handler</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">handler</span><span class="p">();</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">show404</span><span class="p">();</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nx">show404</span><span class="p">()</span> <span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#app</span><span class="dl">"</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="s2">`
<h1>404 - ページが見つかりません</h1>
<p><a href="/" data-route="/">ホームに戻る</a></p>
`</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// ページコンポーネント</span>
<span class="kd">const</span> <span class="nx">pages</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">home</span><span class="p">:</span> <span class="p">()</span> <span class="o">=></span> <span class="s2">`
<h1>ホームページ</h1>
<nav>
<a href="/about" data-route="/about">会社概要</a> |
<a href="/contact" data-route="/contact">お問い合わせ</a>
</nav>
<p>ようこそ、私たちのサイトへ!</p>
`</span><span class="p">,</span>
<span class="na">about</span><span class="p">:</span> <span class="p">()</span> <span class="o">=></span> <span class="s2">`
<h1>会社概要</h1>
<nav>
<a href="/" data-route="/">ホーム</a> |
<a href="/contact" data-route="/contact">お問い合わせ</a>
</nav>
<p>私たちは革新的なソリューションを提供する会社です。</p>
`</span><span class="p">,</span>
<span class="na">contact</span><span class="p">:</span> <span class="p">()</span> <span class="o">=></span> <span class="s2">`
<h1>お問い合わせ</h1>
<nav>
<a href="/" data-route="/">ホーム</a> |
<a href="/about" data-route="/about">会社概要</a>
</nav>
<form id="contactForm">
<div>
<label>お名前: <input type="text" name="name" required></label>
</div>
<div>
<label>メール: <input type="email" name="email" required></label>
</div>
<div>
<label>メッセージ: <textarea name="message" required></textarea></label>
</div>
<button type="submit">送信</button>
</form>
`</span>
<span class="p">};</span>
<span class="c1">// ルーター初期化</span>
<span class="kd">const</span> <span class="nx">router</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">SimpleRouter</span><span class="p">();</span>
<span class="nx">router</span>
<span class="p">.</span><span class="nx">addRoute</span><span class="p">(</span><span class="dl">"</span><span class="s2">/</span><span class="dl">"</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#app</span><span class="dl">"</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">pages</span><span class="p">.</span><span class="nx">home</span><span class="p">();</span>
<span class="p">})</span>
<span class="p">.</span><span class="nx">addRoute</span><span class="p">(</span><span class="dl">"</span><span class="s2">/about</span><span class="dl">"</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#app</span><span class="dl">"</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">pages</span><span class="p">.</span><span class="nx">about</span><span class="p">();</span>
<span class="p">})</span>
<span class="p">.</span><span class="nx">addRoute</span><span class="p">(</span><span class="dl">"</span><span class="s2">/contact</span><span class="dl">"</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#app</span><span class="dl">"</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">pages</span><span class="p">.</span><span class="nx">contact</span><span class="p">();</span>
<span class="c1">// お問い合わせフォームのイベント設定</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">#contactForm</span><span class="dl">"</span><span class="p">).</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">submit</span><span class="dl">"</span><span class="p">,</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
<span class="nx">alert</span><span class="p">(</span><span class="dl">"</span><span class="s2">お問い合わせありがとうございます!</span><span class="dl">"</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">});</span>
</code></pre></div></div>
<h2 id="デバッグとテスト">デバッグとテスト</h2>
<h3 id="デバッグ技法">デバッグ技法</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// コンソール出力</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">基本的なログ</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">info</span><span class="p">(</span><span class="dl">"</span><span class="s2">情報メッセージ</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">warn</span><span class="p">(</span><span class="dl">"</span><span class="s2">警告メッセージ</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラーメッセージ</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// オブジェクトの詳細表示</span>
<span class="kd">const</span> <span class="nx">user</span> <span class="o">=</span> <span class="p">{</span> <span class="na">name</span><span class="p">:</span> <span class="dl">"</span><span class="s2">太郎</span><span class="dl">"</span><span class="p">,</span> <span class="na">age</span><span class="p">:</span> <span class="mi">30</span> <span class="p">};</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">table</span><span class="p">(</span><span class="nx">user</span><span class="p">);</span> <span class="c1">// テーブル形式で表示</span>
<span class="c1">// 実行時間の測定</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">time</span><span class="p">(</span><span class="dl">"</span><span class="s2">処理時間</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// 時間のかかる処理</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o"><</span> <span class="mi">1000000</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="c1">// 何らかの処理</span>
<span class="p">}</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">timeEnd</span><span class="p">(</span><span class="dl">"</span><span class="s2">処理時間</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// グループ化</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">group</span><span class="p">(</span><span class="dl">"</span><span class="s2">ユーザー情報</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">名前:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">user</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">年齢:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">user</span><span class="p">.</span><span class="nx">age</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">groupEnd</span><span class="p">();</span>
<span class="c1">// 条件付きログ</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">assert</span><span class="p">(</span><span class="nx">user</span><span class="p">.</span><span class="nx">age</span> <span class="o">>=</span> <span class="mi">18</span><span class="p">,</span> <span class="dl">"</span><span class="s2">ユーザーは18歳以上である必要があります</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// スタックトレース</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">trace</span><span class="p">(</span><span class="dl">"</span><span class="s2">スタックトレースを表示</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// ブレークポイント</span>
<span class="kd">function</span> <span class="nx">debugFunction</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">x</span> <span class="o">=</span> <span class="mi">10</span><span class="p">;</span>
<span class="k">debugger</span><span class="p">;</span> <span class="c1">// ブラウザの開発者ツールでここで停止</span>
<span class="nx">x</span> <span class="o">*=</span> <span class="mi">2</span><span class="p">;</span>
<span class="k">return</span> <span class="nx">x</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// エラーの詳細表示</span>
<span class="k">try</span> <span class="p">{</span>
<span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="dl">"</span><span class="s2">テストエラー</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラー名:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">エラーメッセージ:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">スタックトレース:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">.</span><span class="nx">stack</span><span class="p">);</span>
<span class="p">}</span>
</code></pre></div></div>
<h3 id="簡単なテストフレームワーク">簡単なテストフレームワーク</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 簡単なテストフレームワーク</span>
<span class="kd">class</span> <span class="nx">SimpleTest</span> <span class="p">{</span>
<span class="kd">constructor</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">tests</span> <span class="o">=</span> <span class="p">[];</span>
<span class="k">this</span><span class="p">.</span><span class="nx">passed</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">failed</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">test</span><span class="p">(</span><span class="nx">description</span><span class="p">,</span> <span class="nx">testFunction</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">tests</span><span class="p">.</span><span class="nx">push</span><span class="p">({</span> <span class="nx">description</span><span class="p">,</span> <span class="nx">testFunction</span> <span class="p">});</span>
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">assertEqual</span><span class="p">(</span><span class="nx">actual</span><span class="p">,</span> <span class="nx">expected</span><span class="p">,</span> <span class="nx">message</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">actual</span> <span class="o">===</span> <span class="nx">expected</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`✅ </span><span class="p">${</span><span class="nx">message</span> <span class="o">||</span> <span class="dl">'</span><span class="s1">Test passed</span><span class="dl">'</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">passed</span><span class="o">++</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`❌ </span><span class="p">${</span><span class="nx">message</span> <span class="o">||</span> <span class="dl">'</span><span class="s1">Test failed</span><span class="dl">'</span><span class="p">}</span><span class="s2">: expected </span><span class="p">${</span><span class="nx">expected</span><span class="p">}</span><span class="s2">, got </span><span class="p">${</span><span class="nx">actual</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">failed</span><span class="o">++</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nx">assertTrue</span><span class="p">(</span><span class="nx">value</span><span class="p">,</span> <span class="nx">message</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">assertEqual</span><span class="p">(</span><span class="nx">value</span><span class="p">,</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">message</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">assertFalse</span><span class="p">(</span><span class="nx">value</span><span class="p">,</span> <span class="nx">message</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">assertEqual</span><span class="p">(</span><span class="nx">value</span><span class="p">,</span> <span class="kc">false</span><span class="p">,</span> <span class="nx">message</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">run</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">🚀 テスト開始</span><span class="dl">"</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">tests</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(({</span> <span class="nx">description</span><span class="p">,</span> <span class="nx">testFunction</span> <span class="p">})</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`\n📝 </span><span class="p">${</span><span class="nx">description</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="k">try</span> <span class="p">{</span>
<span class="nx">testFunction</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`❌ エラー: </span><span class="p">${</span><span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">failed</span><span class="o">++</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`\n📊 結果: </span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">passed</span><span class="p">}</span><span class="s2"> passed, </span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">failed</span><span class="p">}</span><span class="s2"> failed`</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// テスト例</span>
<span class="kd">function</span> <span class="nx">add</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">a</span> <span class="o">+</span> <span class="nx">b</span><span class="p">;</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">multiply</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">a</span> <span class="o">*</span> <span class="nx">b</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// テストの実行</span>
<span class="kd">const</span> <span class="nx">test</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">SimpleTest</span><span class="p">();</span>
<span class="nx">test</span>
<span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="dl">"</span><span class="s2">add関数のテスト</span><span class="dl">"</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">assertEqual</span><span class="p">(</span><span class="nx">add</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">),</span> <span class="mi">5</span><span class="p">,</span> <span class="dl">"</span><span class="s2">2 + 3 = 5</span><span class="dl">"</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">assertEqual</span><span class="p">(</span><span class="nx">add</span><span class="p">(</span><span class="o">-</span><span class="mi">1</span><span class="p">,</span> <span class="mi">1</span><span class="p">),</span> <span class="mi">0</span><span class="p">,</span> <span class="dl">"</span><span class="s2">-1 + 1 = 0</span><span class="dl">"</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">assertEqual</span><span class="p">(</span><span class="nx">add</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">),</span> <span class="mi">0</span><span class="p">,</span> <span class="dl">"</span><span class="s2">0 + 0 = 0</span><span class="dl">"</span><span class="p">);</span>
<span class="p">})</span>
<span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="dl">"</span><span class="s2">multiply関数のテスト</span><span class="dl">"</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">assertEqual</span><span class="p">(</span><span class="nx">multiply</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">),</span> <span class="mi">6</span><span class="p">,</span> <span class="dl">"</span><span class="s2">2 * 3 = 6</span><span class="dl">"</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">assertEqual</span><span class="p">(</span><span class="nx">multiply</span><span class="p">(</span><span class="o">-</span><span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">),</span> <span class="o">-</span><span class="mi">6</span><span class="p">,</span> <span class="dl">"</span><span class="s2">-2 * 3 = -6</span><span class="dl">"</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">assertEqual</span><span class="p">(</span><span class="nx">multiply</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">5</span><span class="p">),</span> <span class="mi">0</span><span class="p">,</span> <span class="dl">"</span><span class="s2">0 * 5 = 0</span><span class="dl">"</span><span class="p">);</span>
<span class="p">})</span>
<span class="p">.</span><span class="nx">run</span><span class="p">();</span>
</code></pre></div></div>
<h2 id="パフォーマンス最適化">パフォーマンス最適化</h2>
<h3 id="パフォーマンス測定と最適化">パフォーマンス測定と最適化</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// パフォーマンス測定</span>
<span class="kd">function</span> <span class="nx">measurePerformance</span><span class="p">(</span><span class="nx">fn</span><span class="p">,</span> <span class="nx">label</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">start</span> <span class="o">=</span> <span class="nx">performance</span><span class="p">.</span><span class="nx">now</span><span class="p">();</span>
<span class="nx">fn</span><span class="p">();</span>
<span class="kd">const</span> <span class="nx">end</span> <span class="o">=</span> <span class="nx">performance</span><span class="p">.</span><span class="nx">now</span><span class="p">();</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`</span><span class="p">${</span><span class="nx">label</span><span class="p">}</span><span class="s2">: </span><span class="p">${</span><span class="nx">end</span> <span class="o">-</span> <span class="nx">start</span><span class="p">}</span><span class="s2">ms`</span><span class="p">);</span>
<span class="p">}</span>
<span class="c1">// 配列処理の最適化例</span>
<span class="kd">const</span> <span class="nx">largeArray</span> <span class="o">=</span> <span class="nb">Array</span><span class="p">.</span><span class="k">from</span><span class="p">({</span> <span class="na">length</span><span class="p">:</span> <span class="mi">100000</span> <span class="p">},</span> <span class="p">(</span><span class="nx">_</span><span class="p">,</span> <span class="nx">i</span><span class="p">)</span> <span class="o">=></span> <span class="nx">i</span><span class="p">);</span>
<span class="c1">// 非効率な方法</span>
<span class="nx">measurePerformance</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">result</span> <span class="o">=</span> <span class="p">[];</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o"><</span> <span class="nx">largeArray</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">largeArray</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">%</span> <span class="mi">2</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">result</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">largeArray</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">*</span> <span class="mi">2</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">},</span> <span class="dl">"</span><span class="s2">forループ</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// 効率的な方法</span>
<span class="nx">measurePerformance</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">largeArray</span>
<span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="nx">x</span> <span class="o">=></span> <span class="nx">x</span> <span class="o">%</span> <span class="mi">2</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span>
<span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">x</span> <span class="o">=></span> <span class="nx">x</span> <span class="o">*</span> <span class="mi">2</span><span class="p">);</span>
<span class="p">},</span> <span class="dl">"</span><span class="s2">filter + map</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// より効率的な方法(1回のループ)</span>
<span class="nx">measurePerformance</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">largeArray</span><span class="p">.</span><span class="nx">reduce</span><span class="p">((</span><span class="nx">acc</span><span class="p">,</span> <span class="nx">x</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">x</span> <span class="o">%</span> <span class="mi">2</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">acc</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">x</span> <span class="o">*</span> <span class="mi">2</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">acc</span><span class="p">;</span>
<span class="p">},</span> <span class="p">[]);</span>
<span class="p">},</span> <span class="dl">"</span><span class="s2">reduce</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// イベントリスナーの最適化(デバウンス)</span>
<span class="kd">function</span> <span class="nx">debounce</span><span class="p">(</span><span class="nx">func</span><span class="p">,</span> <span class="nx">wait</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">timeout</span><span class="p">;</span>
<span class="k">return</span> <span class="kd">function</span> <span class="nx">executedFunction</span><span class="p">(...</span><span class="nx">args</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">later</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">clearTimeout</span><span class="p">(</span><span class="nx">timeout</span><span class="p">);</span>
<span class="nx">func</span><span class="p">(...</span><span class="nx">args</span><span class="p">);</span>
<span class="p">};</span>
<span class="nx">clearTimeout</span><span class="p">(</span><span class="nx">timeout</span><span class="p">);</span>
<span class="nx">timeout</span> <span class="o">=</span> <span class="nx">setTimeout</span><span class="p">(</span><span class="nx">later</span><span class="p">,</span> <span class="nx">wait</span><span class="p">);</span>
<span class="p">};</span>
<span class="p">}</span>
<span class="c1">// スクロールイベントの最適化</span>
<span class="kd">const</span> <span class="nx">handleScroll</span> <span class="o">=</span> <span class="nx">debounce</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">スクロール処理</span><span class="dl">"</span><span class="p">);</span>
<span class="p">},</span> <span class="mi">100</span><span class="p">);</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">scroll</span><span class="dl">"</span><span class="p">,</span> <span class="nx">handleScroll</span><span class="p">);</span>
<span class="c1">// スロットル(一定間隔で実行)</span>
<span class="kd">function</span> <span class="nx">throttle</span><span class="p">(</span><span class="nx">func</span><span class="p">,</span> <span class="nx">limit</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">lastFunc</span><span class="p">;</span>
<span class="kd">let</span> <span class="nx">lastRan</span><span class="p">;</span>
<span class="k">return</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">context</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">args</span> <span class="o">=</span> <span class="nx">arguments</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">lastRan</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">func</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="nx">context</span><span class="p">,</span> <span class="nx">args</span><span class="p">);</span>
<span class="nx">lastRan</span> <span class="o">=</span> <span class="nb">Date</span><span class="p">.</span><span class="nx">now</span><span class="p">();</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">clearTimeout</span><span class="p">(</span><span class="nx">lastFunc</span><span class="p">);</span>
<span class="nx">lastFunc</span> <span class="o">=</span> <span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">((</span><span class="nb">Date</span><span class="p">.</span><span class="nx">now</span><span class="p">()</span> <span class="o">-</span> <span class="nx">lastRan</span><span class="p">)</span> <span class="o">>=</span> <span class="nx">limit</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">func</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="nx">context</span><span class="p">,</span> <span class="nx">args</span><span class="p">);</span>
<span class="nx">lastRan</span> <span class="o">=</span> <span class="nb">Date</span><span class="p">.</span><span class="nx">now</span><span class="p">();</span>
<span class="p">}</span>
<span class="p">},</span> <span class="nx">limit</span> <span class="o">-</span> <span class="p">(</span><span class="nb">Date</span><span class="p">.</span><span class="nx">now</span><span class="p">()</span> <span class="o">-</span> <span class="nx">lastRan</span><span class="p">));</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// メモ化(結果をキャッシュ)</span>
<span class="kd">function</span> <span class="nx">memoize</span><span class="p">(</span><span class="nx">fn</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">cache</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Map</span><span class="p">();</span>
<span class="k">return</span> <span class="kd">function</span><span class="p">(...</span><span class="nx">args</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">key</span> <span class="o">=</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">args</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">cache</span><span class="p">.</span><span class="nx">has</span><span class="p">(</span><span class="nx">key</span><span class="p">))</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">cache</span><span class="p">.</span><span class="kd">get</span><span class="p">(</span><span class="nx">key</span><span class="p">);</span>
<span class="p">}</span>
<span class="kd">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">fn</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="nx">args</span><span class="p">);</span>
<span class="nx">cache</span><span class="p">.</span><span class="kd">set</span><span class="p">(</span><span class="nx">key</span><span class="p">,</span> <span class="nx">result</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">result</span><span class="p">;</span>
<span class="p">};</span>
<span class="p">}</span>
<span class="c1">// フィボナッチ数列の最適化例</span>
<span class="kd">const</span> <span class="nx">fibonacci</span> <span class="o">=</span> <span class="nx">memoize</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">n</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">n</span> <span class="o"><</span> <span class="mi">2</span><span class="p">)</span> <span class="k">return</span> <span class="nx">n</span><span class="p">;</span>
<span class="k">return</span> <span class="nx">fibonacci</span><span class="p">(</span><span class="nx">n</span> <span class="o">-</span> <span class="mi">1</span><span class="p">)</span> <span class="o">+</span> <span class="nx">fibonacci</span><span class="p">(</span><span class="nx">n</span> <span class="o">-</span> <span class="mi">2</span><span class="p">);</span>
<span class="p">});</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">fibonacci</span><span class="p">(</span><span class="mi">40</span><span class="p">));</span> <span class="c1">// 大幅に高速化される</span>
</code></pre></div></div>
<h2 id="参考資料">参考資料</h2>
<h3 id="公式ドキュメント">公式ドキュメント</h3>
<ul>
<li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript">MDN Web Docs - JavaScript</a>: Mozilla開発者向けリソース</li>
<li><a href="https://tc39.es/ecma262/">ECMAScript Language Specification</a>: JavaScript仕様書</li>
<li><a href="https://nodejs.org/docs/">Node.js Documentation</a>: サーバーサイドJavaScript</li>
</ul>
<h3 id="学習リソース">学習リソース</h3>
<ul>
<li><a href="https://javascript.info/">JavaScript.info</a>: 現代的なJavaScript学習サイト</li>
<li><a href="https://eloquentjavascript.net/">Eloquent JavaScript</a>: 無料のJavaScript書籍</li>
<li><a href="https://github.com/getify/You-Dont-Know-JS">You Don’t Know JS</a>: 深いJavaScript理解</li>
</ul>
<h3 id="ツールとライブラリ">ツールとライブラリ</h3>
<ul>
<li><a href="https://eslint.org/">ESLint</a>: JavaScriptリンター</li>
<li><a href="https://prettier.io/">Prettier</a>: コードフォーマッター</li>
<li><a href="https://babeljs.io/">Babel</a>: JavaScript変換ツール</li>
<li><a href="https://webpack.js.org/">Webpack</a>: モジュールバンドラー</li>
</ul>
<h3 id="フレームワークライブラリ">フレームワーク・ライブラリ</h3>
<ul>
<li><a href="https://reactjs.org/">React</a>: ユーザーインターフェースライブラリ</li>
<li><a href="https://vuejs.org/">Vue.js</a>: プログレッシブフレームワーク</li>
<li><a href="https://angular.io/">Angular</a>: フルフィーチャーフレームワーク</li>
<li><a href="https://expressjs.com/">Express.js</a>: Node.jsウェブフレームワーク</li>
</ul>
</div></div>
</div>
</article>
<!-- Enhanced Table of Contents JavaScript --><script>
document.addEventListener('DOMContentLoaded', function() {
// Generate enhanced Table of Contents
const headings = document.querySelectorAll('.page-main-content h2, .page-main-content h3, .page-main-content h4');
const tocContainer = document.getElementById('page-toc-content');
if (headings.length > 0 && tocContainer) {
const tocList = document.createElement('ul');
tocList.style.cssText = 'list-style: none; padding-left: 0; margin: 0; line-height: 1.6;';
headings.forEach(function(heading, index) {
// Add ID to heading if it doesn't have one
if (!heading.id) {
heading.id = 'page-heading-' + index;
}
const listItem = document.createElement('li');
const link = document.createElement('a');
link.href = '#' + heading.id;
link.textContent = heading.textContent;
link.style.cssText = 'text-decoration: none; color: #007bff; transition: color 0.2s;';
// Add hover effect
link.addEventListener('mouseenter', function() {
this.style.color = '#0056b3';
});
link.addEventListener('mouseleave', function() {
this.style.color = '#007bff';
});
// Style based on heading level
if (heading.tagName === 'H2') {
listItem.style.cssText = 'margin-bottom: 8px; font-weight: 600;';
link.textContent = '📄 ' + heading.textContent;
} else if (heading.tagName === 'H3') {
listItem.style.cssText = 'margin-bottom: 5px; margin-left: 25px; font-size: 0.95em;';
link.textContent = '▶ ' + heading.textContent;
} else if (heading.tagName === 'H4') {
listItem.style.cssText = 'margin-bottom: 3px; margin-left: 50px; font-size: 0.9em;';
link.textContent = '• ' + heading.textContent;
}
listItem.appendChild(link);
tocList.appendChild(listItem);
});
tocContainer.appendChild(tocList);
} else if (tocContainer) {
// Hide TOC container if no headings found
tocContainer.parentNode.style.display = 'none';
}
});
</script><!-- Additional styling for page layout with sidebar TOC -->
<style>
/* Override minima theme wrapper width restriction for large screens */
@media (min-width: 1441px) {
.wrapper {
max-width: none;
}
}
.page-article {
margin: 0 auto;
}
/* Apply max-width only on smaller screens to maintain readability */
@media (max-width: 1440px) {
.page-article {
max-width: 2000px;
}
}
.page-content-wrapper {
display: flex;
gap: 20px;
position: relative;
}
.page-toc-sidebar {
width: 280px;
position: sticky;
top: 20px;
height: calc(100vh - 40px);
max-height: calc(100vh - 40px);
overflow-y: auto;
order: 2;
flex-shrink: 0;
}
.page-content {
flex: 1;
min-width: 0;
order: 1;
}
/* Responsive behavior */
@media (max-width: 1024px) {
.page-content-wrapper {
flex-direction: column;
}
.page-toc-sidebar {
width: 100%;
position: static;
order: 1;
margin-bottom: 20px;
height: auto;
max-height: none;
overflow-y: visible;
}
.page-content {
order: 2;
}
}
@media (max-width: 768px) {
.page-toc-sidebar {
display: none;
}
}
.page-title {
border-bottom: 3px solid #007bff;
padding-bottom: 10px;
color: #212529;
}
.page-main-content h2 {
color: #007bff;
border-bottom: 2px solid #e9ecef;
padding-bottom: 8px;
margin-top: 40px;
}
.page-main-content h3 {
color: #495057;
margin-top: 30px;
}
.page-main-content code {
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 3px;
padding: 2px 4px;
font-size: 0.9em;
}
.page-main-content pre {
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 5px;
padding: 15px;
overflow-x: auto;
}
.page-main-content blockquote {
border-left: 4px solid #007bff;
background: #f8f9fa;
margin: 20px 0;
padding: 15px 20px;
font-style: italic;
}
.page-main-content table {
border-collapse: collapse;
width: 100%;
margin: 20px 0;
}
.page-main-content th,
.page-main-content td {
border: 1px solid #dee2e6;
padding: 12px;
text-align: left;
}
.page-main-content th {
background: #f8f9fa;
font-weight: 600;
}
</style>
</main>
</article>
ALTテキストの設定
4. セキュリティ
セキュアなリンク
<a href="" target="_blank" rel="noopener noreferrer">
フォームのセキュリティ
<form method="post" action="https://formspree.io/your-email">
<input type="hidden" name="_subject" value="Contact from Jekyll site">
<input type="hidden" name="_next" value="https://toshi0907.github.io/thank-you">
</form>
実用的な例
1. ブログサイトの作成
_config.yml
title: "Tech Blog"
description: "技術ブログ"
baseurl: ""
url: "https://username.github.io"
markdown: kramdown
highlighter: rouge
theme: minima
paginate: 5
paginate_path: "/page:num/"
plugins:
- jekyll-feed
- jekyll-sitemap
- jekyll-seo-tag
- jekyll-paginate
defaults:
- scope:
path: ""
type: "posts"
values:
layout: "post"
comments: true
index.html
---
layout: default
---
<div class="home">
<h1 class="page-heading">最新の記事</h1>
<ul class="post-list">
</ul>
<!-- ページネーション -->
</div>
2. ポートフォリオサイトの作成
_data/projects.yml
- name: "プロジェクト1"
description: "Web アプリケーション開発"
image: "/assets/images/project1.jpg"
url: "https://github.com/username/project1"
tech: ["Jekyll", "HTML", "CSS", "JavaScript"]
- name: "プロジェクト2"
description: "モバイルアプリ開発"
image: "/assets/images/project2.jpg"
url: "https://github.com/username/project2"
tech: ["React Native", "TypeScript"]
portfolio.html
---
layout: page
title: "ポートフォリオ"
permalink: /portfolio/
---
<div class="portfolio">
<h1>作品集</h1>
<div class="projects-grid">
</div>
</div>
3. ドキュメントサイトの作成
_data/navigation.yml
- title: "ホーム"
url: "/"
- title: "ガイド"
url: "/guides/"
children:
- title: "入門編"
url: "/guides/getting-started/"
- title: "上級編"
url: "/guides/advanced/"
- title: "API リファレンス"
url: "/api/"
- title: "FAQ"
url: "/faq/"
_includes/navigation.html
<nav class="main-nav">
<ul>
</ul>
</nav>
これで Jekyll の包括的なリファレンスと GitHub Pages での運用におけるベストプラクティスが完成しました。このドキュメントは初心者から上級者まで幅広く活用できる内容となっています。