JavaScript

すぐに役立つテクニック & 学習向けのコンテンツ

レシピ

アニメーション

  1. CSSアニメーションを設定する
  2. Web Animations APIを使う
  3. HTML要素に透過エフィクトをつける
  4. HTML要素の背景色をアニメーションで変化させる
  5. HTML要素に移動エフィクトをつける
  6. HTML要素のサイズをアニメーションで変化させる
  7. 画像の明度をアニメーションで変化させる
  8. 画像の彩度をアニメーションで変化させる
  9. 画像のぼかしをアニメーションで変化させる
  10. 画像の色相回転をアニメーションで変化させる
  11. 画像の色の反転(ネガポジ反転)をアニメーションで変化させる

配列

  1. 配列を使う
  2. 配列の長さを取得する
  3. 配列に要素を追加する
  4. 配列の要素を取り出す
  5. 配列の空要素を削除する
  6. 配列のループ
  7. 配列の各要素に対して処理を実行する
  8. 配列の要素の一部を置き換える
  9. 複数の配列を連結する
  10. 配列の要素を連結して1つの文字列にする
  11. 配列から特定の値を持つ要素を検索する
  12. 配列の要素をソートする
  13. 配列の要素の並びを逆順にする
  14. すでにある配列から新しい配列を作る
  15. 配列の要素の合計を計算する
  16. 文字列を配列に変換する
  17. 配列の全要素に値を一括で代入する
  18. 配列の要素の並びをシャッフルする
  19. 配列から最大値と最小値を取得する

ブラウザ

  1. アラートメッセージを表示する
  2. 確認ウインドウを表示する
  3. テキスト入力欄を作る
  4. ブラウザのウインドウサイズを取得する
  5. 端末のピクセル比を取得する
  6. 端末がタッチ(タップ)に対応しているか確認する
  7. 指定したURIに移動する
  8. ページをリロード (再読み込み)する
  9. 現在のページの前ページ・次ページに移動する
  10. URIからハッシュを取得する
  11. 新しいウインドウを開く
  12. スクロールした量を取得する
  13. 指定した位置にスクロールする
  14. ページのタイトルを書き換える
  15. ページをフルスクリーンで表示/解除する
  16. ページ表示中にブラウザがオンライン/オフラインか確認する

データについて

  1. 値の型を調べる
  2. 型を変換する
  3. 変数の値渡しと参照渡し
  4. 変数が「undefined」になる事例と対処方法
  5. 特定のオブジェクトのインスタンスであるか調べる

イベント

  1. イベントリスナーを設定する
  2. マウスの各操作に対応したイベント一覧
  3. クリックしたときに処理を実行する
  4. タッチ(タップ)したときに処理を実行する
  5. 設定したイベントリスナーを解除する
  6. スワイプ/フリックしたときに処理を実行する
  7. マウスカーソルの位置座標を取得する
  8. タッチ(タップ)したときの位置座標を取得する
  9. スクロールしたときに処理を実行する
  10. ページが読み込まれたら処理を実行する
  11. テキストを選択したときに処理を実行する
  12. キーボード入力時に処理を実行する
  13. キーボードの押されたキーを取得する
  14. 全角入力の未確定の状態を取得する
  15. 全角入力の開始と終了を検出する
  16. ページの表示状態の切り替わりを取得する
  17. ブラウザのタブが表示/非表示になるタイミングで処理を実行する
  18. ブラウザの画面サイズが変更されたときに処理を実行する
  19. JavaScriptコードにメディアクエリを設定する
  20. 指定したイベントを発生させる
  21. HTMLのデフォルトの挙動をキャンセルする
  22. ドラッグ・ドロップしたときに処理を実行する
  23. ドラッグ・ドロップでファイルを選択する
  24. フォームが入力されたタイミングで処理を実行する
  25. フォーム送信時に処理を実行する
  26. CSSのtransitionプロパティによるアニメーションの開始や終了時に処理を実行する
  27. CSSのanimationプロパティによるアニメーションが実行されたときに処理を実行する
  28. 画像の読み込みが完了したら処理を実行する

フォーム

  1. フォームに入力された値を取得する
  2. チェックボックスの選択状態を取得・変更する
  3. 選択したチェックボックスだけを取得する
  4. ラジオボタンの選択状態を取得・変更する
  5. プルダウンメニューの選択した項目を取得・変更する
  6. ファイル選択時にファイル情報を取得する
  7. 選択されたファイルの内容を取得する
  8. スライダーの値を取得する
  9. スライダーを特定の範囲で動かせないように設定する
  10. カラーピッカーの値を取得する

HTML・DOM

  1. JavaScriptでHTMLを操作する
  2. html要素、head要素、body要素を取得する
  3. 特定のHTML要素の子要素、親要素、前後の要素を取得する
  4. 指定した位置にHTML要素を挿入する
  5. HTML要素が子要素を持つか確認する
  6. 新しいHTML要素を作成する
  7. 指定したHTML要素を削除する
  8. img要素を動的に作成して画像を表示する
  9. HTML要素を複製(コピー)する
  10. HTML要素を他のHTML要素に置き換える
  11. HTML要素内のテキストを取得、編集する
  12. HTML要素のソースコードを取得、編集する
  13. HTML要素の属性を取得、編集する
  14. HTML要素が特定の属性を持つか確認する
  15. 別タブを開くリンク「_blank」に「rel="noopener"」を付与する
  16. HTML要素のクラスを追加、削除する
  17. HTML要素が特定のクラス名を持つか確認する
  18. HTML要素に直接スタイルを設定する
  19. HTML要素に適用されたスタイルを取得する

数値

  1. 数値(Number)について
  2. ランダムな数値を取得する
  3. 四捨五入、切り捨て、切り上げ
  4. 浮動小数点数を指定した桁数にする
  5. 数値を指定した桁数の文字列に変換する
  6. 数値を指定した桁数の表記にする
  7. JavaScriptで数学の計算を実行する

オブジェクト

  1. オブジェクトの作成とアクセス方法
  2. オブジェクトを複製する
  3. オブジェクトが特定のプロパティを持っているか確認する
  4. オブジェクトの各キーごとに処理を実行する
  5. オブジェクトを編集できないようにする
  6. オブジェクトのプロパティを配列形式で取得する

正規表現

  1. JavaScriptの正規表現
  2. 正規表現で文字列から特定の文字を検索する
  3. 正規表現で文字列に含まれる特定の文字を置き換える
  4. 正規表現で文字列から空白を取り除く

文字列

  1. 文字列の長さを取得する
  2. 文字列の先頭、末尾にある空白を取り除く
  3. 文字列をURIエンコード(エスケープ)・デコードする
  4. 文字列の中で変数を展開する
  5. 文字列を検索する
  6. 文字列から指定した位置にある文字を取得する
  7. 文字列から指定した文字を取り出す
  8. 特定の文字を他の文字に置き換える
  9. アルファベットを大文字、小文字に変換する
  10. 文字列を分割する
  11. 文字列を結合する
  12. 文字列が指定した長さになるまで文字を追加する
  13. 文字列を置き換えてハイライト表示する

日付・時間

  1. 日付や時刻を取得する
  2. 指定した日時のDateインスタンスを作る
  3. 現時刻のタイムスタンプを取得する
  4. 指定した日時からタイムスタンプを取得する
  5. 2つの日時の差分を計算する
  6. 日付・時刻の計算
  7. 特定の日時から経過した時間を計算する

URL

  1. URLからドメイン、パス、プロトコル、GETパラメータなど各種情報を取得する
  2. ファイルからURLを取得してページに表示する
  3. URLに含まれるGETパラメータを取得する
  4. URLに特定のGETパラメータが含まれるか確認する
  5. URLにGETパラメータを追加する
  6. URLのGETパラメータの値を更新する
  7. URLから指定したGETパラメータを削除する
  8. ページ移動せずにアドレスバーのURLを変更する