目次
- JavaScript 目的別リファレンス
- Chapter 1 日付・時間操作
- Chapter 2 数値操作
- Chapter 3 正規表現
- Chapter 4 数学
- Chapter 5 配列操作
- Chapter 6 オブジェクト操作
- Chapter 7 DOM操作
- Chapter 8 イベント処理
- Chapter 9 非同期処理
- Chapter 10 ユーザー入力処理
- Chapter 11 メディア操作
- Chapter 12 通信・ネットワーク
- Chapter 13 グラフィック描画
- Chapter 14 ローカルデータの管理
- Chapter 15 アニメーションとトランジション
- Chapter 16 エラーハンドリング
- Chapter 17 ユーティリティ関数
- Chapter 18 セキュリティ
- Chapter 19 テスト
- Chapter 20 ウェブAPIの活用
- Chapter 21 フォームとバリデーション
- Chapter 22 パフォーマンス最適化
- Chapter 23 アクセシビリティ対応
- Chapter 24 モバイル最適化
JavaScript 目的別リファレンス
Chapter 1 日付・時間操作
- 現在の日付と時刻を取得したい
- 日付を特定のフォーマットに変換したい
- 日付をISOフォーマットで取得したい(
toISOString()
) - UNIXタイムスタンプ(エポックタイム)を取得したい
- 年、月、日、時、分、秒を個別に取得したい(
getFullYear()
,getMonth()
,getDate()
) - 特定の日付に日数を加算・減算したい(
setDate()
) - 日付の曜日をテキスト形式で取得したい(
getDay()
) - 2つの日付の差を計算したい
- 月の最初・最後の日を取得したい(
setDate(1)
,getDate()
) - 現在のタイムゾーンを取得したい(
getTimezoneOffset()
) - 特定の日付が平日か休日かを判定したい
- 祝日かどうかを確認したい
- 日付が過去か未来かを判定したい
- ミリ秒から日付を生成したい(
Date(milliseconds)
) - タイムゾーンを指定して日付を取得したい
- 12時間制と24時間制の時刻を切り替えたい
- 日付のフォーマットをカスタマイズしたい(例:
YYYY-MM-DD
) - UTC日付をローカルタイムに変換したい
- 日付の時刻部分をフォーマットしたい(
toTimeString()
) - ストップウォッチを実装したい
- カウントダウンタイマーを作成したい
- 日付を日本の和暦に変換したい
- 日付を文字列として取得したい(
toString()
) - 指定した年が閏年かどうかを確認したい
- 日付を特定の形式(
MM/DD/YYYY
)に変換したい - タイムスタンプをわかりやすい形式で表示したい(例:
1時間前
) - 日付のUTCタイムを取得したい(
getUTCDate()
) - 日付のタイムゾーン差分を取得したい(
getTimezoneOffset()
) - 特定の曜日の日付を計算したい(例:次の月曜日の日付)
- タイムスタンプを年月日形式に変換したい
- ミリ秒単位で時間を測定したい(
performance.now()
) - 日付を言語に依存した形式で表示したい(
toLocaleDateString()
) - ISO形式の日付から特定の部分を抽出したい(例:年、月)
- 特定の日付を経過日数で計算したい(例:今日から30日後)
- 特定の日付が週末かどうかを確認したい
- 日付の書式をカスタマイズして表示したい(例:月日だけを表示)
- 月や年の増減を計算したい(例:翌月の同じ日)
- 日付が指定の期間内に収まっているか確認したい
- 日付と時刻をパーシングして有効な日付かを確認したい(
Date.parse()
) - 特定の日付を経過したかどうかを確認したい(期限切れ判定)
- 日付と時刻の国際標準フォーマット(ISO 8601)で出力したい
- タイムゾーンを指定して特定の時刻を取得したい
- 日付のフォーマットをゼロ埋め(例:
01/02/2023
) - 月の長さ(日数)を動的に計算したい
- 日付が同じ月かどうかを確認したい
- 時刻を丸めたい(例:15分ごとに切り上げ)
- 年月の差を計算したい(
getFullYear()
を使用して) - 日付が同じ年かどうかを確認したい
- 時間差を分、秒に変換して表示したい
- 特定の日付が現在の日付かどうかを確認したい
- 日本語フォーマットで日付を表示したい(例:
2023年1月1日
) - タイムスタンプから経過時間を計算したい(例:
x分前
) - ミリ秒単位で経過時間を計算したい(高精度タイマー)
- 日付の週番号を取得したい(ISO週番号)
- 季節(春、夏、秋、冬)を日付から判定したい
- 日付を明日や昨日で表示したい
- 月の第何週かを判定したい(例:第2週の月曜日)
- 日付が今日以降の日付かどうかを確認したい
- 日付オブジェクトを比較して早いか遅いかを判定したい
- 特定の月の日数を取得したい(
getDate()
) - 特定の日付までのカウントダウンを表示したい
- 日付の差を時間、分、秒単位で計算したい
- 現在時刻を特定の間隔で自動更新したい(例:1秒ごと)
- 特定の日付が月の末日かどうかを確認したい
- 日付をヨーロッパ式(例:
DD/MM/YYYY
)にフォーマットしたい - 日付が祝日・休日と一致するかを確認したい(カスタム祝日・休日ロジック)
Chapter 2 数値操作
- 数値を四則演算したい(足し算、引き算、掛け算、割り算)
- 数値を文字列に変換したい
- 文字列を数値に変換したい
- 浮動小数点の桁数を調整したい(例:小数点以下2桁まで)
- 数値を小数点以下で四捨五入したい
- 絶対値を取得したい(
Math.abs()
) - 数値を固定小数点形式に変換したい(
toFixed()
) - ランダムな数値を生成したい(
Math.random()
) - 指定範囲内で最小値、最大値を求めたい(
Math.min()
,Math.max()
) - 奇数か偶数かを判定したい
- 指定した数値の対数を計算したい(
Math.log()
) - n進数を変換したい(2進数、8進数、16進数)
- 数値を指数表記に変換したい(
toExponential()
) - 小数点の切り捨て、切り上げをしたい(
Math.floor()
,Math.ceil()
) - 累積和を計算したい
- 最大公約数や最小公倍数を求めたい
- 符号を反転させたい(負数を正数に、正数を負数に)
- 特定範囲内に収めたい(例:0〜100の範囲)
- 数値の範囲チェックをしたい
- 円周率を使って計算したい(
Math.PI
) - 平均、中央値、最頻値を求めたい
- 数値が整数かどうか確認したい(
Number.isInteger()
) - パーセント計算をしたい
- 数値のビット演算を行いたい(AND, OR, XOR)
Chapter 3 正規表現
- 正規表現のパターン一覧表
- 文字列に特定のパターンが含まれているか確認したい
- 正規表現で特定の文字列を置換したい
- メールアドレスの形式かを検証したい
- URLの形式かを検証したい
- 特定の文字列で始まるか、終わるかを確認したい
- 数字のみか、アルファベットのみかを確認したい
- 空白文字やタブを削除したい
- 電話番号の形式かを検証したい(国際フォーマット含む)
- 日付フォーマットが正しいか確認したい(例:YYYY/MM/DD)
- HTMLタグを削除したい
- 複数行のテキストを処理したい
- 特定のパターンで文字列を分割したい
- 文字列に含まれる数字をすべて抽出したい
- HTMLからリンクや画像URLを抽出したい
- 連続する空白を1つにまとめたい
- ドメイン名を抽出したい
- 正規表現でIPアドレス(IPv4, IPv6)を検証したい
- ファイル拡張子を抽出したい
- 文字列において複数回マッチするパターンをすべて取得したい
- 数字をカンマ区切りで表示したい(例:1,000,000)
- テキストを逆順に並べ替えたい
- 正規表現でUnicode文字列を処理したい
- 文字列の特定の部分にマッチした箇所を取得したい
- ハイフンやアンダースコアを含む文字列を検証したい
- 大文字と小文字を区別せずにパターンをマッチさせたい
- 任意の文字が0回以上、1回以上、特定回数以上出現するか確認したい
- 電子メールアドレスのドメイン部分だけを抽出したい
- ファイルパスからディレクトリ名を抽出したい
- バックスラッシュを含む文字列をエスケープせずに処理したい
- 正規表現でXMLタグを削除したい
- JavaScriptやHTMLのコードのコメント部分を削除したい
- 特定の文字列の間にあるすべてのテキストを抽出したい
- JSON文字列の特定の部分を抽出したい
- 電話番号のフォーマットに修正したい(例:ハイフンを追加)
- 英文の単語をすべて取得したい
- クレジットカード番号の形式かを検証したい
- 16進数カラーコードを抽出したい
- タブ、改行、空白をすべて削除したい
- 正規表現で文字数に制限をかけたい(例:5〜10文字以内)
- 大文字・小文字を区別せずに文字列を検出したい
- 空のHTMLタグを検出して削除したい
Chapter 4 数学
- 円の面積を計算したい(
πr^2
) - 三角関数を使いたい(
Math.sin()
,Math.cos()
,Math.tan()
) - 逆三角関数を使いたい(
Math.asin()
,Math.acos()
,Math.atan()
) - 度数法からラジアンに変換したい(
Math.PI
を使用) - 指定した数値の平方根を計算したい(
Math.sqrt()
) - ベクトルの長さを求めたい
- 複数のベクトルの内積を計算したい
- 数列の和を求めたい(等差数列、等比数列)
- 線形方程式を解きたい
- 乱数生成にシードを指定したい
- 指定範囲の数値をランダムに生成したい
- ラプラス変換やフーリエ変換を行いたい
- 統計関数(平均、分散、標準偏差)を計算したい
- 三次方程式や二次方程式の解を求めたい
- 線形補間を行いたい
- 二項定理を使って展開式を求めたい
- 正弦波の波長や振幅を計算したい
- 任意の次元の行列演算を行いたい
- 双曲線関数を計算したい(
Math.sinh()
,Math.cosh()
,Math.tanh()
) - 複素数の計算をしたい
- 円周率を利用して三角形の内角を計算したい
- 連立方程式を解きたい
- ニュートン法を使って数値解を求めたい
- 極限を求めたい(リミットの計算)
- 絶対値を計算したい(
Math.abs()
) - 対数を求めたい(自然対数、常用対数)
- 組み合わせや順列の計算をしたい
- 行列の逆行列を求めたい
- 複素数の絶対値を計算したい
- 数値を指定桁数で丸めたい(四捨五入、切り上げ、切り捨て)
- 指数関数的成長・減少を計算したい(
Math.exp()
) - ユークリッド距離を計算したい(2点間の距離)
- 複素数を使って回転を計算したい(例:極座標から直交座標への変換)
- 角度の単位を度からラジアンに変換したい(
toRadians()
) - ラジアンから度に変換したい(
toDegrees()
) - 立体の体積を計算したい(球、円柱、円錐)
- 行列の行列式を求めたい
- 数学定数(
π
,e
, 黄金比)を使いたい - 複数の数値の最大公約数を求めたい(
gcd()
) - 最小公倍数を計算したい(
lcm()
) - 微分を計算したい(数値微分)
- 積分を計算したい(数値積分)
- ベクトルの外積を計算したい
- ベクトルの投影を計算したい
- ローレンツ変換を使った特殊相対論の計算をしたい
- 反復法で方程式の解を求めたい(例:二分法、ニュートン法)
- フラクタル図形を描画したい
- 任意の数列の項を計算したい(フィボナッチ数列、カタラン数)
- 数学的帰納法を使って証明したい
- パスカルの三角形を生成したい
- 素数を判定したい
- ベジエ曲線を計算したい
- ガウス分布を計算したい(正規分布)
- クォータニオンを使って3D回転を計算したい
- ハミルトニアン演算子を使って物理シミュレーションをしたい
- オイラー角を使って3次元の回転を計算したい
- ベイズ定理を使った確率計算をしたい
- 確率密度関数を計算したい
- フーリエ級数展開を計算したい
- 畳み込み積分を行いたい(信号処理に使用)
- ラグランジュの補間法を計算したい
- 2次元および3次元のベクトルの回転を計算したい
- 逆行列を使って線形方程式を解きたい
- 複素数平面上の演算を行いたい
- 複雑な三角形や多角形の面積を計算したい
- グラフ理論のアルゴリズムを計算したい(最短経路、最小生成木など)
- 数学的漸近線を計算したい
- 行列の特異値分解(SVD)を行いたい
- 線形回帰分析を行いたい
- 非線形最適化を行いたい
- モンテカルロ法を使って確率分布を計算したい
- 幾何的変換(平行移動、回転、拡大縮小)を計算したい
- ベクトル場の発散と回転を計算したい
- ランダムウォークをシミュレートしたい
- カオス理論の計算を行いたい
- フラクタルの次元を計算したい
- 熱方程式や波動方程式をシミュレーションしたい
- ゲーム理論のナッシュ均衡を計算したい
- 差分方程式を解きたい
- ベクトルの正規化を行いたい
- ヘロンの公式で三角形の面積を求めたい
- データセットの統計的な相関関係を計算したい
- 対数スケールでグラフをプロットしたい
- グラフの勾配を計算したい(傾き)
- 複素平面上の位相を計算したい
- 2次曲線の焦点と準線を求めたい
Chapter 5 配列操作
- 配列の要素をソートしたい(昇順、降順)
- 配列を逆順にソートしたい
- 配列に要素を追加したい(
push()
,unshift()
) - 配列から要素を削除したい(
pop()
,shift()
) - 配列の特定の範囲をコピーしたい(
slice()
) - 配列をフィルタリングして条件に合う要素だけを取得したい
- 配列の各要素に対して処理を実行したい(
forEach()
) - 配列を指定の値で埋めたい(
fill()
) - 配列の中で重複する要素を削除したい
- 配列の要素を繰り返し処理したい(
map()
) - 配列内の要素が条件を満たすか確認したい(
every()
,some()
) - 配列の特定の位置に新しい要素を挿入したい
- 2つの配列を結合したい(
concat()
) - 配列の中から特定の要素を検索したい(
find()
,indexOf()
) - 配列をシャッフルしたい
- 配列の重複を削除して一意の要素にしたい
- 配列をフラット化(ネストされた配列を1次元に)したい
- 配列を文字列に変換したい(
join()
) - 配列のすべての要素を合計したい
Chapter 6 オブジェクト操作
- オブジェクトのプロパティを追加したい
- オブジェクトのプロパティを削除したい
- ネストされたオブジェクトのプロパティにアクセスしたい
- オブジェクトのすべてのプロパティを列挙したい(
for...in
) - オブジェクトをディープコピー(深いコピー)したい
- オブジェクトのプロパティの数を数えたい
- オブジェクトのプロパティが存在するか確認したい(
in
演算子) - オブジェクトのプロパティをソートしたい
- オブジェクトをJSON形式に変換したい(
JSON.stringify()
) - オブジェクトのプロパティを動的に追加・変更したい
- オブジェクトを他のオブジェクトとマージしたい(
Object.assign()
) - オブジェクトをフリーズして変更不可能にしたい(
Object.freeze()
) - プロトタイプチェーンをたどってプロパティにアクセスしたい
- オブジェクトのプロパティを動的に削除したい(
delete
演算子) - オブジェクトをキーと値のペアに変換したい(
Object.entries()
) - オブジェクトのネストされたプロパティに安全にアクセスしたい(オプショナルチェイニング)
Chapter 7 DOM操作
- 特定のIDを持つ要素を取得したい(
getElementById()
) - 特定のクラス名を持つ要素を取得したい(
getElementsByClassName()
) - CSSセレクターで要素を取得したい(
querySelector()
) - 複数の要素を取得したい(
querySelectorAll()
) - 要素を動的に作成して追加したい(
createElement()
,appendChild()
) - 要素の内容を変更したい(
innerHTML
,textContent
) - 特定の属性を取得・変更したい(
getAttribute()
,setAttribute()
) - 要素のスタイルを変更したい(
style
プロパティを使う) - 要素のCSSクラスを追加・削除したい(
classList.add()
,classList.remove()
) - 要素の位置やサイズを取得したい(
getBoundingClientRect()
) - 要素をスクロールさせたい(
scrollTo()
) - 要素の表示/非表示を切り替えたい(
display: none
,visibility
) - データ属性を操作したい(
dataset
) - 親要素や子要素を取得したい(
parentNode
,childNodes
) - 特定の要素を削除したい(
remove()
) - 特定の位置に要素を挿入したい(
insertBefore()
) - フォームの入力値を取得・設定したい(
value
プロパティを使う) - 要素にイベントリスナーを追加したい(
addEventListener()
) - 特定のノードを複製したい(
cloneNode()
) - 要素の高さや幅を動的に変更したい
- 要素のスクロール位置を取得したい(
scrollTop
,scrollLeft
) - 要素のスクロールを監視したい(
IntersectionObserver
)
Chapter 8 イベント処理
- 要素のクリックイベントを取得したい(
click
イベント) - ページの読み込み完了時に処理を実行したい(
DOMContentLoaded
イベント) - キーボード入力を検出したい(
keydown
,keyup
イベント) - スクロール時にイベントを発火させたい
- ウィンドウのサイズ変更を監視したい(
resize
イベント) - マウスのホバー状態を検出したい(
mouseover
,mouseout
イベント) - フォーム送信イベントをキャッチしたい(
submit
イベント) - ドラッグ&ドロップイベントを実装したい(
dragstart
,drop
イベント) - イベントのバブリングを防ぎたい(
stopPropagation()
) - デフォルトのイベント動作をキャンセルしたい(
preventDefault()
) - 特定のキーの押下を検知したい(例:Enterキー、Escキー)
- イベントリスナーを動的に追加・削除したい(
addEventListener()
,removeEventListener()
) - マウスの位置を取得したい(
clientX
,clientY
) - スワイプイベントを検出したい(タッチスクリーン対応)
- 要素がクリックされた時に座標を取得したい
- ダブルクリックイベントを検知したい(
dblclick
イベント) - スクロール位置に応じた要素の表示/非表示を切り替えたい
- ページが閉じられる前に警告を表示したい(
beforeunload
イベント) - コンテキストメニューのカスタマイズを行いたい(右クリックメニュー)
Chapter 9 非同期処理
- 非同期にデータを取得したい(
fetch()
) - 複数の非同期処理を並行して実行したい(
Promise.all()
) - 非同期処理のエラーハンドリングを行いたい(
try...catch
) - タイマーを非同期で設定したい(
setTimeout()
,setInterval()
) - 非同期処理が完了したら通知を受け取りたい(
then()
メソッド) - 非同期処理をキャンセルしたい(
AbortController
) - WebSocketを使用してリアルタイム通信を行いたい
- 非同期に画像や動画を読み込みたい
- Web Workerを使用してバックグラウンド処理を行いたい
- 非同期にファイルをアップロードしたい
- 非同期にファイルをダウンロードしたい
- APIからデータを取得して表示したい
- 非同期に複数のAPIを同時に呼び出したい
- 非同期に定期的にデータを取得したい(ポーリング)
- 非同期処理の進行状況を表示したい(プログレスバー)
- 非同期にデータをストリーミングで受け取りたい
- 非同期処理の途中でタイムアウトを設定したい
- サーバーからのレスポンスが遅い時にローディング表示を出したい
Chapter 10 ユーザー入力処理
- テキストボックスの値を取得・設定したい
- フォームの入力値をバリデーションしたい
- チェックボックスやラジオボタンの状態を取得・変更したい
- ドロップダウンメニューの選択値を取得したい
- ファイルのアップロード機能を実装したい
- フォーム送信時に入力内容を検証したい
- 入力フィールドでリアルタイムにフィードバックを表示したい
- ドラッグ&ドロップでファイルをアップロードしたい
- フォーム送信の前に確認メッセージを表示したい
- 数値入力フィールドの上下ボタンで値を増減させたい
- パスワードの表示/非表示を切り替えたい(目のアイコン)
- ユーザーが入力を終えたタイミングで自動保存したい
- 入力フォームを動的に追加・削除したい
- フォーカスが当たった時にスタイルを変更したい
- 入力値に基づいてオートコンプリート(自動補完)を表示したい
- ユーザーの入力履歴を保持したい(例:ブラウザのローカルストレージ)
Chapter 11 メディア操作
- 画像をアップロードして表示したい
- 動画を再生・停止したい
- カメラにアクセスして写真を撮りたい(
getUserMedia()
) - マイクから音声を取得したい
- 音声を再生・停止したい
- 動画や音声の再生速度を変更したい
- 動画のキャプションを動的に変更したい
- 動画の再生位置を取得・変更したい(シークバー操作)
- 画像をキャンバス上に描画して加工したい
- 動画の特定フレームをサムネイルとして抽出したい
- 音声や動画の再生時間を表示したい
- 動画の画質を変更したい(HD, 4K)
- 音声の波形をリアルタイムで表示したい
- 動画や音声のボリュームを動的に調整したい
- 動画のループ再生を設定したい
- 動画にフィルターを適用して効果を追加したい
Chapter 12 通信・ネットワーク
- サーバーからデータを取得したい(
fetch()
やXMLHttpRequest
) - POSTリクエストを送信したい(フォームデータの送信)
- WebSocketでリアルタイムチャットを実装したい
- サーバーからのレスポンスをJSON形式で受け取りたい
- CORSに対応したリクエストを行いたい
- データを定期的に取得したい(ポーリング)
- ファイルをアップロードしながら進捗を表示したい
- クッキーを操作したい(取得、設定、削除)
- ローカルストレージにデータを保存したい
- HTTPリクエストのレスポンスヘッダーを取得したい
- 非同期にデータを送信して受信したい(Ajax通信)
- アップロードの進行状況を取得してプログレスバーを表示したい
- OAuthやAPIトークンを使って認証したい
- ファイルのダウンロードリンクを生成したい
- APIから大量のデータを効率的に取得したい(ページング処理)
- 通信エラーを検出してエラーメッセージを表示したい
- サーバーにWebSocketで通知を送信したい
- JSONデータを送受信したい
- ファイルダウンロード中に中断して再開機能を実装したい
Chapter 13 グラフィック描画
- 四角形をキャンバスに描画したい(
CanvasRenderingContext2D.fillRect()
) - 円や円弧を描画したい(
arc()
メソッド) - 線を描画したい(
beginPath()
,lineTo()
,stroke()
) - キャンバス上に画像を表示したい(
drawImage()
) - グラデーションを作成したい(
createLinearGradient()
) - 2Dグラフィックをスケーリング・回転させたい(
scale()
,rotate()
) - 画像の特定部分をトリミングして描画したい
- 画像のフィルタ効果を追加したい(例:ぼかし、モノクロ)
- テキストをキャンバス上に描画したい(
fillText()
) - パスを描画したい(
moveTo()
,lineTo()
) - 四角形の枠線のみを描画したい(
strokeRect()
) - ピクセルごとの色データを取得したい(
getImageData()
) - ベジェ曲線を描画したい(
bezierCurveTo()
) - アニメーションを実装したい(
requestAnimationFrame()
) - キャンバスをクリアしたい(
clearRect()
) - ドロップシャドウを追加したい(
shadowBlur
,shadowColor
) - 画像の一部をキャンバスにコピーしたい
- 画像をキャンバス上で回転させたい
- キャンバス上に複数の画像を重ねて表示したい
- 図形の塗りつぶし色を設定したい(
fillStyle
)
Chapter 14 ローカルデータの管理
- クッキーを設定・取得・削除したい
- ローカルストレージにデータを保存したい(
localStorage
) - セッションストレージにデータを保存したい(
sessionStorage
) - ローカルストレージのデータを取得したい
- ローカルストレージに保存されたデータを削除したい
- オフラインモードでデータを保存したい
- IndexedDBを使用して大容量のデータを保存したい
- クライアント側で一時的にデータをキャッシュしたい
- ローカルストレージの使用容量を確認したい
- 複数のタブ間でローカルストレージを共有したい
- ローカルストレージにオブジェクトを保存したい(
JSON.stringify()
) - クッキーに有効期限を設定したい
- クッキーにセキュリティ属性を追加したい(
Secure
,HttpOnly
) - IndexedDBでトランザクションを使用してデータを操作したい
- Web Storage APIを使ってデータをセキュアに保存したい
Chapter 15 アニメーションとトランジション
- CSSトランジションを設定したい(
transition
プロパティ) - 要素をスムーズに移動させたい(アニメーション)
- 要素の色をフェードさせたい(
opacity
のアニメーション) - 要素を上下にバウンドさせたい(ジャンプ効果)
- 要素を回転させたい(
transform: rotate()
) - 要素の拡大・縮小を実装したい(
scale()
) - アニメーションをループさせたい
- アニメーションの途中で動きを緩やかにしたい(イージング関数)
- アニメーションの速度を変化させたい(
animation-timing-function
) - スクロール位置に基づいて要素を動かしたい
- 要素が表示されたタイミングでアニメーションを発火させたい
- スクロールアニメーションを実装したい(
scroll-behavior
) - フレーム単位でアニメーションを作成したい(
@keyframes
) - 要素の背景色をトランジションさせたい
- 要素の表示/非表示をフェードで切り替えたい
- 要素を画面外からスライドインさせたい
- パララックス効果を実装したい
Chapter 16 エラーハンドリング
- 例外が発生した場合にエラーメッセージを表示したい(
try...catch
) - エラーログをブラウザのコンソールに出力したい
- エラーハンドリングのために
finally
ブロックを使いたい - 非同期処理で発生したエラーをキャッチしたい(
catch()
メソッド) throw
を使って独自のエラーを発生させたい- エラーが発生した際にユーザーに通知を表示したい
onerror
イベントで未キャッチのエラーを処理したい- スタックトレースを取得してエラーの原因を特定したい
- エラーが発生した時にリトライ処理を実装したい
- 例外発生時にデフォルト動作をカスタマイズしたい
- ログファイルにエラー情報を記録したい
- APIからのエラーレスポンスをハンドリングしたい
Chapter 17 ユーティリティ関数
- 数値をゼロ埋めして特定の桁数で表示したい
- 文字列をランダムに生成したい(例:IDやトークン)
- ディープコピーを実装したい(オブジェクトや配列)
- オブジェクトのキーと値を入れ替えたい
- タイムスタンプをフォーマットして表示したい
- テンプレート文字列を使って動的にHTMLを作成したい
- デバウンス関数を作成して、特定の処理の頻度を制限したい
- 任意のタイミングで関数を一度だけ実行したい(
once
処理) - 関数の実行回数をカウントしたい
- 特定の条件で関数をリトライしたい
- フェッチAPIのリクエストでタイムアウトを設定したい
- 一定時間経過後に処理を実行したい(
setTimeout
) - 深いネストのオブジェクトを安全に処理したい(オプショナルチェイニング)
- 数字をカンマ区切りで表示したい(例:1,000,000)
Chapter 18 セキュリティ
- ユーザーの入力をエスケープしてXSS攻撃を防ぎたい
- フォームデータのサニタイズを行いたい
- クッキーにセキュリティ属性を追加したい(
Secure
,HttpOnly
) - HTTPS接続の強制リダイレクトを実装したい
- ログイン情報をセッションストレージに保存したい
- パスワードを暗号化して保存したい
- JWTトークンを生成して認証を行いたい
- CSRFトークンを使用してリクエストを保護したい
- ユーザーのセッションを有効期限付きで保持したい
- APIリクエストに認証ヘッダーを付加したい
- CORSを設定して外部からのリクエストを制限したい
- セキュアなパスワードの入力・バリデーションを実装したい
Chapter 19 テスト
- 単体テストを作成したい(JavaScript用テスティングフレームワーク)
- モックを使用して外部依存関係をテストしたい
- 非同期処理をテストしたい
- フォームの入力バリデーションをテストしたい
- DOMの要素操作をテストしたい
- イベントハンドラーの動作をテストしたい
- テストの実行結果をレポートにまとめたい
- 結果のスナップショットを保存して差分を確認したい
- エラーハンドリングをテストしたい
- カバレッジレポートを生成したい
- テスト中に例外が発生した際の動作を確認したい
Chapter 20 ウェブAPIの活用
- Web Speech APIを使用して音声認識を実装したい
- Web Speech APIで音声を合成して読み上げたい(テキスト読み上げ)
- Geolocation APIを使用してユーザーの位置情報を取得したい
- WebRTCを使ってビデオ通話や音声通話を実装したい
- Fullscreen APIを使用して要素を全画面表示したい
- Battery APIを使ってデバイスのバッテリー状態を取得したい
- Notification APIでプッシュ通知を送信したい
- Page Visibility APIを使ってタブがアクティブかどうかを検出したい
- Clipboard APIを使用してテキストをクリップボードにコピーしたい
- Gamepad APIでゲームコントローラを操作したい
- Device Orientation APIを使用してデバイスの傾きを検出したい
- Vibration APIを使用してデバイスを振動させたい
- WebGLを使用して3Dグラフィックスを描画したい
- Ambient Light APIを使って環境光を検出したい
- Beacon APIを使って低消費電力でデータを送信したい
Chapter 21 フォームとバリデーション
- フォームの入力を必須項目として設定したい(
required
属性) - メールアドレスの形式をバリデーションしたい(
type="email"
) - URL形式をバリデーションしたい(
type="url"
) - 数字入力フィールドに範囲を設定したい(
min
,max
属性) - 入力フィールドにデフォルト値を設定したい
- フォーム送信時に確認ダイアログを表示したい
- フォームのサブミットボタンを無効化したい
- フォームフィールドの入力中にリアルタイムバリデーションを行いたい
- 入力フィールドにプレースホルダーを表示したい
- フォーム入力のオートコンプリート機能を追加したい
- 数値入力フィールドのステップ値を設定したい
- カレンダー入力フィールドを実装したい(
input type="date"
) - 入力フィールドに長さ制限を設けたい(
maxlength
,minlength
属性) - 入力フィールドのフォーカス時にハイライトさせたい
- カスタムバリデーションメッセージを表示したい(
setCustomValidity()
)
Chapter 22 パフォーマンス最適化
- 画像を遅延読み込み(Lazy Load)したい
- 大量のデータを効率的に処理するためにWeb Workerを使いたい
- メモリリークを防ぐためにイベントリスナーを適切に削除したい
- アニメーションのパフォーマンスを最適化したい(
requestAnimationFrame()
) - スクロールのパフォーマンスを向上させたい(スロットリング・デバウンス)
- プロファイリングツールを使ってJavaScriptの実行時間を計測したい
- アセットの圧縮(画像、CSS、JavaScript)を行いたい
- 非同期ローディングでページのパフォーマンスを向上させたい
- メモリ使用量を最小限に抑えるコードを実装したい
- 画像をWebPフォーマットに変換してパフォーマンスを向上させたい
- 非同期処理を適切に並列化してパフォーマンスを最大化したい
- フレームレートを監視してアニメーションのスムーズさを保ちたい
- クライアントサイドのキャッシュを利用してデータの取得を最適化したい
- スクロールイベントを軽量化して、スクロールがスムーズに行えるようにしたい
Chapter 23 アクセシビリティ対応
- キーボード操作でフォーカス可能な要素を適切に設定したい(
tabindex
) - 画像に代替テキストを追加してスクリーンリーダー対応にしたい(
alt
属性) - ボタンのラベルを動的に変更してアクセシビリティを向上させたい
- ARIA属性を使ってアクセシビリティを強化したい(
aria-label
,aria-labelledby
) - ランドマーク要素を使ってページの構造を分かりやすくしたい
- ダイアログを表示する際にフォーカスを自動的に移動させたい
- スクリーンリーダーで読み上げられる順序を制御したい
- フォームフィールドに適切なラベルを関連付けたい(
<label>
タグ) - 色覚異常に配慮したデザインを実装したい(色のコントラスト設定)
- テキストの読みやすさを改善するために行間を調整したい
- キーボードだけで操作可能なドロップダウンメニューを実装したい
- 動画に字幕やキャプションを追加したい
- アコーディオンメニューに適切なキーボード操作を追加したい
- アクセシブルなモーダルウィンドウを実装したい
Chapter 24 モバイル最適化
- モバイルデバイスに応じてレイアウトを調整したい(レスポンシブデザイン)
- タッチイベントを実装したい(
touchstart
,touchmove
,touchend
) - モバイルブラウザでのタッチジェスチャーをサポートしたい
- モバイルデバイス向けのフルスクリーンモードを実装したい
- タッチスクリーンでのスワイプ操作を実装したい
- モバイル向けのフォーム入力を最適化したい
- スマートフォンでのスクロールパフォーマンスを向上させたい
- モバイル向けに最適な画像サイズを提供したい
- モバイルデバイスの傾きを検出したい(
DeviceOrientation
) - モバイルブラウザのズームを制御したい(
viewport
メタタグ) - モバイル向けにナビゲーションバーをレスポンシブにしたい
- モバイルブラウザでのパフォーマンスを最適化したい(画像の圧縮、スクリプトの最小化)