JavaScript

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

レシピ

Ajax

  1. XMLHttpRequestオブジェクトのプロパティ、メソッド、イベント一覧
  2. XMLHttpRequestオブジェクトを使ってAjaxを実装する
  3. XMLHttpRequestでファイルを読み込む
  4. XMLHttpRequestでファイルを送信する
  5. XMLHttpRequestでフォームに入力されたデータを送信する
  6. XMLHttpRequestによるファイルの読み込み状況を取得する
  7. XMLHttpRequestのリクエストをキャンセルする
  8. XMLHttpRequestによる通信で一定時間経過したらリクエストをキャンセルする
  9. Fetch APIを使ってAjaxを実装する
  10. Fetch APIでフォームに入力されたデータを送信する
  11. Fetch APIでファイルを送信する
  12. Fetch APIでファイルを読み込む
  13. Fetch APIが使えるか確認する
  14. Fetch APIでJSON形式のデータを送信する
  15. Fetch APIから画像ファイルをJSON形式で送信する
  16. Fetch APIで受け取ったレスポンスのHTTPステータスコードを取得する
  17. Fetch APIで受け取ったレスポンスの送信元のURLを取得する

アニメーション

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

配列

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

音声

  1. audio要素／video要素のプロパティ、メソッド、イベント一覧
  2. 音声ファイルの再生、一時停止を操作する
  3. 音声ファイルのボリュームを操作する
  4. 音声ファイルの再生をスキップする
  5. 音声ファイルの再生位置を表示する
  6. 音声ファイルを自動再生する
  7. 音声ファイルの再生速度を速くしたり遅くする
  8. 音声ファイルを逆再生する
  9. メディアファイルを再生できるか確認する

ブラウザ

  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. 画像の読み込みが完了したら処理を実行する
  29. 1度だけのイベントリスナーを設定する

実行するタイミング

  1. 一定時間が経過したら処理を実行する
  2. 定期的に処理を実行する
  3. setIntervalメソッドとsetTimeoutメソッドの違い

ファイル

  1. Base64形式のデータをFileオブジェクトに変換する

フォーム

  1. フォームに入力された値を取得する
  2. チェックボックスの選択状態を取得・変更する
  3. 選択状態のチェックボックスだけを取得する
  4. ラジオボタンの選択状態を取得・変更する
  5. セレクトボックス（select要素）の選択した項目を取得・変更する
  6. ファイル選択時にファイル情報を取得する
  7. 選択されたファイルの内容を取得する
  8. スライダーの値を取得する
  9. スライダーを特定の範囲で動かせないように設定する
  10. カラーピッカーの値を取得する
  11. パスワード入力欄でパスワード表示・非表示を切り替える
  12. セレクトボックス（select要素）を選択状態にする
  13. セレクトボックス（select要素）の選択状態を解除する
  14. セレクトボックス（select要素）で選択されている項目のラベルを取得する

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要素に適用されたスタイルを取得する
  20. 指定した親要素を取得する
  21. 特定のHTML要素の前後、または内側に新しいHTML要素を追加する

画像

  1. JavaScriptで画像ファイルを読み込む
  2. 画像を遅延読み込みする
  3. Base64形式の画像を表示する

JSON

  1. JSONの基礎
  2. JavaScriptのオブジェクトをJSONに変換する
  3. JSONをJavaScriptのオブジェクトに変換する

数値

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

オブジェクト

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

正規表現

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

文字列

  1. 文字列の長さを取得する
  2. 文字列の先頭、末尾にある空白を取り除く
  3. 文字列をURIエンコード（エスケープ）・デコードする
  4. 文字列の中で変数を展開する
  5. 文字列の中に特定のワードが含まれているか検索する
  6. 文字列から指定した位置にある文字を取得する
  7. 文字列から指定した文字を取り出す
  8. 特定の文字を他の文字に置き換える
  9. アルファベットを大文字、小文字に変換する
  10. 文字列を分割する
  11. 文字列を結合する
  12. 文字列が指定した長さになるまで文字を追加する
  13. 文字列を置き換えてハイライト表示する
  14. 改行コードをbr要素に置き換える
  15. 数値を通貨の表記に変換する
  16. 数字を指定した桁数まで0埋めする

日付・時間

  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を変更する

動画

  1. audio要素／video要素のプロパティ、メソッド、イベント一覧
  2. メディアファイルを再生できるか確認する
  3. 動画ファイルの再生、一時停止を操作する
  4. 動画ファイルを逆再生する
  5. 動画ファイルの再生をスキップする
  6. 動画ファイルのボリュームを操作する
  7. 動画ファイルの再生位置を表示する
  8. 動画ファイルを自動再生する
  9. 動画ファイルの再生速度を速くしたり遅くする