ページの動作

JavaScriptによるDOM操作・イベント・アニメーション・通信・ストレージなど、ページの動作に関するリファレンス

DOM操作系

要素を追加・削除したい

DOM要素の取得・追加・削除操作

→

querySelector, appendChild, remove

テキストや内容を書き換えたい

要素のテキストやHTMLを動的に変更

→

textContent, innerHTML

スタイルを動的に変えたい

クラスやインラインスタイルの動的変更

→

classList, style

HTML属性を読み書きしたい

HTML属性の読み取りと変更

→

getAttribute, setAttribute

イベント系

クリックやホバーを検知したい

マウス操作イベントの検知と処理

→

click, mouseenter, mouseleave

キーボード操作を検知したい

キーボードイベントの検知と処理

→

keydown, keyup, keypress

フォーム送信をコントロールしたい

フォーム送信イベントの制御

→

submit, preventDefault

スクロールやリサイズを検知したい

スクロールとウィンドウリサイズの検知

→

scroll, resize

アニメーション系

要素を表示・非表示にしたい

要素の表示・非表示の切り替え

→

display, visibility, opacity

アニメーションをJSで制御したい

CSSアニメーションのJS制御

→

animation, transition, classList

処理を遅らせる・繰り返したい

遅延実行・繰り返し処理のタイマー

→

setTimeout, setInterval

スクロールに連動して動かしたい

スクロールに連動したアニメーション

→

IntersectionObserver, scrollY

データ処理系

配列・オブジェクトを加工したい

配列・オブジェクトの変換・操作

→

map, filter, reduce, spread

文字列を整形・抽出したい

文字列の整形・変換・抽出

→

slice, split, replace, template literal

数値を計算・フォーマットしたい

数値演算とフォーマット処理

→

Math, toFixed, parseInt

日付・時刻を扱いたい

日付・時刻の取得・フォーマット

→

Date, Intl.DateTimeFormat

通信系

外部APIにリクエストしたい

外部APIへのHTTPリクエスト

→

fetch, then, json

非同期処理を書きたい

非同期処理の記述と制御

→

async, await, Promise

リアルタイムで通信したい

双方向リアルタイム通信の実装

→

WebSocket, onmessage, send

ストレージ系

ブラウザにデータを永続保存したい

永続的なブラウザストレージへの読み書き

→

localStorage.setItem, getItem

セッション中だけデータを保持したい

セッション中のみ保持するストレージ

→

sessionStorage.setItem, getItem

Cookieを読み書きしたい

クッキーの設定・取得・削除

→

document.cookie

ブラウザ操作系

URLや履歴を操作したい

URLと履歴スタックの操作

→

history.pushState, replaceState

別ページに飛ばしたい

別URLへのページ遷移

→

location.href, location.replace

印刷ダイアログを出したい

ブラウザ印刷ダイアログの呼び出し

→

window.print

テキストをコピーさせたい

テキストをクリップボードにコピー

→

navigator.clipboard.writeText

画面切り替えをなめらかにしたい

状態変化や画面切り替えに滑らかなアニメーションを付与

→

document.startViewTransition, view-transition-name

OSのシェア機能を呼び出したい

OSのシェアダイアログを呼び出してSNS・メール等にシェア

→

navigator.share, navigator.canShare

フォーム系

入力値をバリデーションしたい

フォーム入力値のバリデーション処理

→

checkValidity, setCustomValidity

フォームデータを送信したい

フォームデータの収集とサーバー送信

→

FormData, fetch POST

入力に即座に反応したい

入力に応じたリアルタイム処理

→

input, oninput, debounce

メディア系

動画・音声を操作したい

動画・音声要素のJS制御

→

play, pause, currentTime

カメラ・マイクを使いたい

デバイスカメラ・マイクへのアクセス

→

getUserMedia, MediaStream

Canvasに描画したい

Canvas APIを使った2D描画

→

canvas, getContext, drawImage

WebGLで3D描画したい

WebGLを使った3Dグラフィクス描画

→

WebGLRenderingContext

その他

ブラウザ通知を出したい

ブラウザプッシュ通知の表示

→

Notification, requestPermission

現在地を取得したい

デバイスの現在位置を取得

→

navigator.geolocation

ドラッグ＆ドロップを実装したい

ドラッグ＆ドロップ操作の実装

→

dragstart, dragover, drop

オフラインでも動くようにしたい

オフライン対応とバックグラウンド処理

→

serviceWorker.register, cache

HTML標準UI系

ネイティブモーダル（dialog）

JSライブラリ不要のネイティブモーダルダイアログ

→

<dialog>, showModal(), show(), ::backdrop

ネイティブポップオーバー（popover）

HTML属性だけで動くポップオーバー・ツールチップ

→

popover, popovertarget, showPopover()

排他的アコーディオン（details name）

name属性でグループ化するJSなしの排他アコーディオン

→

<details name>, <summary>, grid-template-rows

このサイトについて使用ライブラリ一覧

Zenn ☕ Buy Me a Coffee