canvas描画

Image。getContext。

PROMISE

記述方法 Promiseチェーン記述方法

debounce

react。input。テキスト入力制御。スキップ。遅延。setTimeout。cleanup関数。useEffect。

関数型プログラミング

functional programing。純粋関数。immutable。

__dirname Node

fileURLToPath。

Null合体演算子を使った初期値の設定

??。自己代入演算子。

エラーのハンドリング

error。try…catch。instanceof。

オプショナルチェイニング演算子

optional chaining。?.。

オブジェクトをiterableにする

イテレータ。for。of。ジェネレータ。generator。

スクリプトからイベントを発生させる

dispatchEvent。

オブジェクトを配列にする

Object.entries()

重複削除

filter,reduce,set,includes,indexOf

動画再生 React

useRef。video。source。

ジェネリクス

Typescript。

選択済ラジオボタンを非選択状態にする

radio。

モーダル作成

modal。createElement。黒透明画面。画像背景。

論理積と論理和

truethy。 falsy。&&。||。

ウェイト処理

同期処理。非同期処理。wait。Date。タイマー。

クロージャー_動的な関数の生成

closure。レキシカルスコープ。グローバル、スクリプト、関数、ブロック。スコープ。

クロージャー_プライベート変数

closure。

郵便番号からハイフンを削除する 　VSCODE

正規表現。後方参照。$1。

defer と async の違い

　type=”module”。

祖先要素にさかのぼって検索する closest

空白スペースを ＆nbsp; に置換する

replace。文字実体参照。文字参照。

GSAP を使ったアニメーション

TweenMax。animation。greensock。

スクロール検知　IntersectionObserver –

テスト用の配列オブジェクトの作成

test。

上限値、下限値の制御

react。Math.min。Math.max。最大値。最小値。バッチ。

配列からN件の要素を抽出する

slice。件数。

配列要素の作成

Array。テスト。keys。

高階関数、カリー化

コールバック関数。

React useReducer

Typescript。フック。

React Function Components

コンポーネント。props。初期値。FC。Typescript。

残余引数の総和を求める

REST PARAMETER。レストパラメータ。残余引数。reduce() 。…。

3項演算子

条件演算子。typeof。toLocaleString。

関数を変数に入れる

デフォルト値。

オブジェクトの分割代入。配列の分割代入

ランダムカラーを生成する

hsl。style。

react タイマー

フック。useState。useEffect。

promise thenチェーン

高階関数。コールバック関数。

React ルーティング

BrowserRouter。Route。Link。Switch。

オブジェクトコピー

シャロー。ディープ。

React fetchを使ったＣＲＵＤ操作

通信。JSON。

switch文

case。break。

React useEffectの使い方②

通信。

React useEffectの使い方

fetch。loading。useState。

react ライフサイクルメソッド

componentDidMount。componentWillUnmount。

数字をカンマ区切りにする　toLocaleString

3桁区切り。

条件演算子 Null合体演算子

存在チェック。ロジカルオペレーター。&&。||。??。

react　リスナーの登録

addEventListener。click。keydown。イベント。

カレンダー

Date()。

２次元配列の行列入れ替え

ビンゴ。多階層。

繰返し repeat()

substring。リピート。keyup。

クラス属性の操作

async awaitを使用した非同期処理

fetch。json。

fetchを使った非同期通信

response。async。await。

Promise と XMLHttpRequestオブジェクトでweb APIのデータを読み込む

JSON。非同期通信。

Promiseで非同期処理を一斉に開始し、すべての完了を待ってから処理する　　並列処理

Promise.all()。

Promiseを使った非同期処理

resolve。then。reject。catch。

setTimeoutメソッドを使ったループ処理

clearTimeout。new Date()。

キャプチャーフェーズ　バブリングフェーズ

stopPropagation。preventDefault。once。

配列から条件を満たす要素を取得する find

findIndex。keyup。input。フォーム。入力されたidに合致するオブジェクトを返す。インデックス。

配列の操作　forEach, map, filter, find

スプレッド構文

スプレッド演算子。ノードリスト。NodeList。map。…。max。

例外処理　エラーをthrowする

Error。

2点間の距離を求めるクラス

Math.sqrt。ルート。平方根。2乗。

オブジェクトの参照値

参照コピー。

JavascriptオブジェクトをJSON文字列に変換する stringify

SVGの要素を動的に追加する createElementNS

requestAnimationFrame。setAttribute。アニメーション。

Set オブジェクトを使う

SetIterator。

Mapオブジェクト

MapIterator。

画像を遅延読み込みさせる DOMContentLoaded

Map。data-src。dataset。

マウスストーカー requestAnimationFrame

アニメーション。clientX。マウスの動きに合わせて動かす。

CSSアニメーションが開始終了した時に処理を行う animationstart

animationiteration。animationend。

CSSトランジションが終了した時に処理を行う transitionend

アニメーション。transform。transition。

フォーム送信時に処理を行う submit

フォーム。form。input。confirm。preventDefault。確認。

カラーピッカーの値を取得する color

change。フォーム。form。input。

スライダーの値を調べる range

フォーム。form。input。change。リスナー関数。

セレクトボックスの選択されている内容を調べる selectbox

multiple。ループ。フォーム。form。

データ保存 cookie

クッキー。split。decodeURIComponent。

データ保存 localStorage sessionStorage

ローカルストレージ。セッションストレージ。永続化。

inputイベントとchangeイベントの違い

addEventListener

要素の属性を取得・変更する

setAttribute。getAttribute。hasAttribute。

要素の取得

children。firstElementChild。lastElementChild。nextElementSibling。previousElementSibling。parentNode。

html head body要素を取得する

documentElement。createElement。insertBefore()。appendChild()

チェックの有無で処理を行うか判断する checked

checkbox。return

画面サイズがブレークポイントを超えたときに処理を行う

レスポンシブ。matchMedia。onMediaQueryChange。

ブラウザがバックグラウンドになったかどうか判断する

visibilitychange。addEventListener。visibilityState。

タッチイベントを処理する

touchstart。touchmove。touchend。event.changeTouches。

選択したテキストを取得する window.getSelection()

addEventListenr。selectstart。mouseup。toString。

マウスホバー マウスアウトした時の処理

マウスオーバー。バブリングなし mouseentr mouseleave。
バブリングあり mouseover mouseout。

マウスを動かす クリックボタンを押す クリックボタンを離した時の処理

addEventListener。mousemove。mousedown。mouseup。カーソルの位置。

イベントリスナーを一度だけ実行する once

addEventListener。第三引数。

要素をフォーカスした時、その要素をスクロールして表示する

focus({preventScroll: true});

フォーカスされているか調べる focus blur

ループして複数の要素にイベントリスナーを設定する。

ウィンドウのスクロール量を調べる scrollTo scrollX scrollY

新規ウィンドウを開く

window.open。

アンカーポイントにスクロールする

location.hash。

ページを再読み込みする reload()

ページ更新。

ページのアドレスを取得する ページを移動する location.href

リダイレクト。URL。searchParams。同一オリジン。origin。

タッチ可能デバイスかどうかを調べる

デバイスピクセルを調べる

高解像度ディスプレイを調べる。

アナログ時計

setInterval()

配列の並び順を逆にする reverse

配列の連結 concat スプレッド構文

concat は新しい配列が返されるその他の新しい配列として返り値で返されるメソッド：join  slice  map  filter 配列のコピー複製

エンコード encodeURIComponent

encodeURI()。decodeURIComponent()。 decodeURI()

少数点以下の表示桁数を指定する toFixed

文字列を分割して配列にいれる split

文字列の何文字目から何文字を取得する substr

文字列の開始位置から終了位置までの文字を取得する slice substring

slice()。substring()。

文字列から指定の位置の1文字を取得する

charAt()。

あいまい検索 前方一致検索 後方一致検索

includes()。startWith()。endWith()。

文字列、配列の中に任意の文字列が含まれているかを調べる

indexOf。lastIndexOf。includes。

文字列の両端にある空白、スペース、タブ、改行文字を削除する trim

トリム。空文字。入力チェック。

テキスト入力の文字数を１文字入力毎に取得して表示する

keyup。placeholder。

回転アニメーション requestAnimationFrame()

ループ処理。svg。

四捨五入 切り捨て 切り上げ 整数部分

Math。

ユーザエージェント判別 userAgent

iPhone Windows判別。

配列、オブジェクトの比較

confirm。比較演算子。

べき乗 Math.pow()

2乗。

子要素を全て削除する処理

while。removeChild。

click() イベント

btn.dispatchEvent(new Event(“click”));

フィッシャー・イェーツのシャッフル

shuffle。並び替え。ランダム。

0埋め　padStart padEnd slice

0パディング。0 padding。タイマー。

event.target と event.currentTarget

イベントハンドラー。

onclick イベント

オブジェクトのfor文 配列のfor文

ループ処理。

return と continue

for文。forEach文。forEach文のスキップ処理。

セレクトボックスで選択されているオプション番号を取得する selectedIndex

form。フォーム。

どのキーが押されたかを確認する keyup keydown keypress

e.key。e.keyCode。

マウスの座標を取得する mousedown mousemove mouseup

clientX。offsetX。pageX。screenX。

ノードを複製(コピー)する cloneNode()

アロー関数式のthis参照

グローバル変数。

文字列と配列の操作 join split

正規表現。分割代入。

オブジェクトのキー・値・プロパティの配列を取得する

Object.keys()。Object.values()。Object.entries()。

配列の操作 filter

偶数（奇数）だけを抽出。

配列の操作 map

インデックス。

配列の特定の要素を置換える splice

配列.splice(追加位置, 削除数, 追加要素１, 追加要素２,…)※元の配列が加減される。新しい配列が返るわけでないので注意戻り値：削除した配列要素

配列のコピー複製

参照渡し。concat。スプレッド構文。slice。

配列要素追加と削除 unshift push shift pop

先頭に追加 unshift  戻り値：追加後の個数末尾に追加 push     戻り値：追加後の個数先頭を削除 shift    戻り値：削除した要素末尾を削除 pop      戻り値：削除した要素 shift, po […]

ユニークキーの作成

unique key。一意。

関数とスコープ

ブロック。グローバル変数。

アロー関数と省略記述

while と do while

XMLHttpRequestオブジェクトでweb APIのデータを読み込む

JSON.parse。request。非同期通信

JSONからデータを解析して取り出す

JSON.parse()

要素のクラスをフラグで切り替える　toggle処理

トグル処理。flg = !flg; 。反転。

DOMのロードを待って処理する

DOMContentLoaded。load。defer。async。

変数宣言　var , let , const

var 宣言は全てグローバル変数になる const, let 宣言はブロック内のみ有効const は宣言する時に初期値を設定しなければいけない

for文で入れ子のオブジェクトの内容を取得する

関数の引数にオブジェクトを使用する

for文でオブジェクトの内容を取得する

フォームの要素を取得する

form。input。ラジオボタン。チェックボックス。セレクトボックス。value。

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

this。window。var。

日付・時間　Date()　Date.now()

getFullYear。getMonth。getDate。月末日の取得。

continue break return の違い

continue : ループ処理の中で条件合致の場合、現在のループをスキップする break： ループ処理の中で条件合致の場合、ループ終了する return： 関数を終了する

オブジェクトを編集不可にする -feeze-

isFrozen()。seal()。preventExtensions()

クラスを定義する

コンストラクタ。静的メソッド。

正規表現 -replace-

後方参照。

正規表現 -test- -match-

後方参照。matchAll。

アルファベットの大文字小文字変換 -toUpperCase- -toLowerCase-

関数に渡す引数の初期値

関数に渡す引数のかずが不明。デフォルト引数。残余引数。スプレッド構文。可変長引数。

無名関数の自動実行

即時関数。即時実行関数式 (Immediately-Invoked Function Expression)。IIFE。

アルファベット順・あいうえお順に文字列をソートする -sort- -localeCompare-

060。

キー順に配列オブジェクトをソートする -sort-

059。オブジェクトを昇順降順に並べ替える。ソート。

配列をソートする -sort-

058。比較関数。配列自身が変化するメソッド：push pop shift unshift splice reverse sort。新しい配列として返り値で返されるメソッド：concat join slice map filter。

配列の全要素に対して処理を行なった結果を別の配列に入れる – map –

061。メソッドチェーン。mapとforEach違い

型変換

型変換。Boolean。String。Number。parsInt。parsFloat。データ型。typeof

ファイル選択フォームで選んだファイルの内容をFileReaderオブジェクトを使って書き出す

コールバックとイベント。readAsText()。非同期処理と同期処理

ファイル選択フォームで選択されたファイルリストを取得する

ファイルを選択フォーム。ファイル選択ダイアログ。

カウントアップの記述方法

加算処理。

カスタムデータ属性（data-*属性）の使用方法

スネークケース。キャメルケース。dataset。要追記

任意の範囲に含まれるランダムな整数を生成する方法

Math.floor()。Math.random()。サイコロ。くじ。数字。min。max。乱数。

要素に適用されているスタイルを調べる

getComputedStyle()。R160

文字列の置換え replace()

R034。