JavaScript入門
JavaScript はクライアント側で実行されるオブジェクト指向型のスクリプト言語です。 JavaScript を用いることで、動的にWebページの内容を書き換えたりフォームに入力された内容をクライアント側でチェックしたりできます。ここでは JavaScript の使い方として JavaScript のプログラミングの方法をサンプルを用いて解説していきます。
(Last modified: )
JavaScriptを各種ブラウザで有効にする方法やWebページの中にどのようにJavaScriptを記述するのかなど基本的事項を確認します。
JavaScriptを使ったプログラムを記述する上で必要となるJavaScriptの構文を1つ1つ確認していきます。
- 数値
- 数値リテラルの記述方法
- Numberオブジェクト
- 数値を指定の基数の形式で文字列に変換する(toString)
- 数値を指数形式で文字列に変換する(toExponential)
- 数値を固定小数点数形式で文字列に変換する(toFixed)
- 数値の有効桁数を指定して文字列に変換する(toPrecision)
- 数値を指定したロケールに応じた形式で文字列に変換する(toLocaleString)
- 文字列を整数に変換する(Number.parseInt)
- 文字列を浮動小数点数に変換する(Number.parseFloat)
- 値がNaNかつ数値型であるかどうかを調べる(Number.isNaN)
- 値が有限でかつ数値型であるかどうかを調べる(Number.isFinite)
- 値が整数かどうかを調べる(Number.isInteger, Number.isSafeInteger)
- 文字列
- 文字列リテラルの記述方法
- 特殊な文字の入力(エスケープシーケンス)
- テンプレートリテラルを使って文字列を表す
- Stringオブジェクト
- JavaScriptにおけるサロゲートペアとは
- 文字列の長さを取得する(length)
- 文字列を指定の区切り文字で分割する(split)
- 文字列を置換する(replace)
- 文字列を連結する(concat)
- 文字列を指定した回数繰り返した新しい文字列を取得する(repeat)
- 文字列から開始位置と終了位置を指定して部分文字列を取得する(slice, substring)
- 文字列から開始位置と文字数を指定して部分文字列を取得する(substr)
- 文字列の指定した位置にある文字を取得する(charAt)
- 文字列の指定した位置にある文字のUTF-16文字コードを取得する(charCodeAt)
- 文字列の指定した位置にある文字のUnicodeコードポイントを取得する(codePointAt)
- 指定したUTF-16文字コードから文字列を作成する(String.fromCharCode)
- 指定したUnicodeコードポイントから文字列を作成する(String.fromCodePoint)
- 文字列の中の大文字を小文字に、小文字を大文字に変換する(toLowerCase, toUpperCase)
- 指定の文字列が含まれているか検索し見つかった場合は位置を返す(indexOf, lastIndexOf)
- 文字列に指定の文字列が含まれているか検索する(includes)
- 文字列の先頭または末尾が指定の文字列かどうか判定する(startsWith, endsWith)
- 文字列を先頭または末尾から空白を取り除く(trim, trimStart, trimEnd)
- 文字列が指定の長さになるように先頭または末尾に文字を追加する(padStart, padEnd)
- 配列
- 配列とは
- 配列を作成する
- 配列の要素の値の取得と新しい値の代入
- 多次元配列の利用
- 配列の要素の数を取得する(length)
- オブジェクトが配列かどうかを調べる(Array.isArray)
- 配列へ要素を追加する(push, unshift)
- 配列から要素を削除する(pop, shift)
- 配列の指定範囲の要素を別の要素に置き換える(splice)
- 配列の要素を順に取得する(forEach)
- 配列と配列を結合する(concat)
- 指定の値と一致する配列の要素を検索する(indexOf, lastIndexOf)
- 条件に一致する配列の要素を検索する(findIndex, find, some, every)
- 配列の指定した範囲の要素をコピーして新しい配列を作成する(slice)
- 配列の全要素を連結して作成した文字列を取得する(join, toString)
- 配列の要素を並び替える(reverse, sort)
- 配列のすべての要素に順番に同じ処理を行う(map)
- 配列の要素の中で条件を満たした要素だけを集めて新しい配列を作成する(filter)
- 配列のすべての要素の値を合計した値を取得する(reduce)
- 関数
- 関数を定義する
- 引数を使って関数へ値を渡す
- 関数へミュータブルな値を渡したあと関数内で値を変更する場合の注意点
- 関数から呼び出し元へ値を返す(return)
- 関数から複数の値を呼び出し元へ返す
- 関数と関数の呼び出しを記述する位置について
- 関数がオブジェクトであることについて
- 関数リテラルを使って関数を定義する(無名関数)
- アロー関数式を使って関数を定義する
- Functionコンストラクタを使って関数を定義する
- argumentsオブジェクトを使って関数に渡された値を取得する
- 関数の定義内容をあらわす文字列を取得する(toString)
- 関数で受け取る引数の数を取得する(length)
- 再帰関数を利用する
- コールバック関数/高階関数を利用する
- JavaScript正規表現
- 正規表現オブジェクトを作成する
- 正規表現におけるエスケープ処理
- 文字列が正規表現とマッチするかテストする(RegExp.prototype.test)
- 正規表現にマッチした文字列を取得する(RegExp.prototype.exec)
- 正規表現にマッチした文字列のインデックスを取得する(String.prototype.search)
- 正規表現にマッチしたすべての文字列を取得する(String.prototype.match)
- 文字列を正規表現を使った区切り文字で分割する(String.prototype.split)
- 正規表現にマッチした文字列を新しい文字列に置換する(String.prototype.replace)
- 文字クラスを使って色々な文字にマッチするパターンを記述する
- 文字列の先頭や末尾などの位置にマッチするパターンを記述する
- 直前の文字を指定回数繰り返す文字列にマッチするパターンを記述する
- 複数の文字列のいずれかにマッチするパターンを記述する
- キャプチャグループを設定してパターンの一部にマッチした文字列を取得する
- 先読みと後読みを使ったパターンの記述
- JavaScriptの正規表現で設定できるフラグの一覧
JavaScriptで用意されている組み込みクラス及びグローバル関数のリファレンスです。
- Dateオブジェクト
- Dateオブジェクトのインスタンスを作成する
- Dateオブジェクトの値を文字列で取得する(toString, toUTCString, etc)
- Dateオブジェクトの値を指定のロケール形式にした文字列で取得する(toLocaleString, etc)
- Dateオブジェクトの値を基準時間からの経過ミリ秒の値で取得する(getTime, valueOf)
- Dateオブジェクトの新しい値として基準時間からの経過ミリ秒の値を設定する(setTime)
- Dateオブジェクトの値から年、月、分、秒などの値を取得する(getFullYear, getUTCFullYear, etc)
- Dateオブジェクトの値に年、月、分、秒などの新しい値を設定する(setFullYear, setUTCFullYear, etc)
- ローカルのタイムゾーンとUTCタイムゾーンの差を取得する(getTimezoneOffset)
- 基準時間からの経過ミリ秒を取得する(Date.parse, Date.UTC, Date.now)
- Mathオブジェクト
- Mathオブジェクトの静的プロパティ
- 絶対値を取得する(Math.abs)
- 小数点以下を四捨五入/切り上げ/切り捨てする(Math.round, Math.ceil, Math.floor)
- 小数点以下を削除し整数を取得する(Math.trunc)
- 複数の値の中から最大および最小の値を取得する(Math.max, Math.min)
- 乱数を生成する(Math.random)
- 平方根/立方根を計算する(Math.sqrt, Math.cbrt)
- 累乗を計算する(Math.pow, Math.exp)
- 正か負か数値の符号を取得する(Math.sign)
- 対数関数(Math.log, Math.log10, Math.log2, Math.log1p)
- 三角関数(Math.sin, Math.cos, Math.tan, etc)
- Consoleオブジェクト
- コンソールにログを出力する(console.log、console.info、console.warn、console.error)
- コンソールへの出力をグループ化する(console.group、console.groupEnd)
- 条件式がfalseの場合だけエラーログを出力する(console.assert)
- タイマーを使って処理時間を計測する(console.time, console.timeLog, console.timeEnd)
- メソッドが呼び出された回数をカウントして出力する(console.count)
- メソッドが呼び出された経路を出力する(console.trace)
- コンソールをクリアする(console.clear)
DOM(Document Object Model)の基本的な使い方について確認していきます。
- DOM入門
- DOMとは
- id属性の値を指定して要素ノードを取得(getElementById)
- タグ名を指定して要素ノードを取得(getElementsByTagName)
- class属性の値を指定して要素ノードを取得(getElementsByClassName)
- name属性の値を指定して要素ノードを取得(getElementsByName)
- CSSセレクタ形式の条件に一致する要素ノードを取得(querySelector, querySelectorAll)
- ノードの子・親・兄弟ノードを取得(childNodes,firstChild,nextSibling,parentNode,他)
- 要素ノードの子・親・兄弟要素のノードを取得(children,firstElementChild,nextElementSibling,parentElement,他)
- ノードの種類を取得(nodeType)
- ノードの名前を取得(nodeName)
- ノードの値を取得・設定(nodeValue)
- ノード内のテキストを取得・設定(textContent)
- 要素内のレンダリングされたテキストを取得・設定(innerText)
- 要素内のHTMLを取得・設定(innerHTML,outerHTML)
- 要素の属性値を取得・設定(getAttribute,setAttribute)
- 要素に設定された属性の一覧を取得(getAttributeNames)
- 要素に設定された属性を削除(removeAttribute)
- 要素のスタイルを取得・設定(getComputedStyle)
- ノードを作成(createElement,createTextNode,他)
- ノードを子ノードの中の先頭または最後に追加(prepend,append,appendChild)
- ノードを子ノードの中の指定ノードの前または後ろに追加(before,insertBefore,after)
- ノードを別のノードに置換(replaceWith, replaceChild)
- ノードを削除(remove, removeChild)
- HTMLを表す文字列からノードを作成し指定の位置に追加(insertAdjacentHTML)
- 現在処理を実行しているscript要素を取得(currentScript)
- 複数のノードをまとめて追加(DocumentFragment)
- ドキュメントにHTMLを表す文字列を書き込む(write)
- イベント処理
- HTML要素の属性としてイベントハンドラを登録する
- DOMで取得した要素のプロパティにイベントハンドラを登録する
- addEventListenerメソッドを使ってイベントリスナーを登録する
- イベントハンドラを登録するコードの記述位置に関する注意と対処方法
- 発生したイベントの情報を取得する(Event)
- Event.currentTargetとEvent.targetの違いについて
- イベントの伝搬(キャプチャリングとバブリング)
- イベントの伝搬をキャンセルする(stopPropagation,stopImmediatePropagation)
- イベントに対するデフォルトの動作をキャンセルする(preventDefault)
- イベントをコードから発生させる(dispatchEvent)
- clickイベント:マウスがクリックされたとき
- dblclickイベント:マウスがダブルクリックされたとき
- mousedownイベント,mouseupイベント:マウスのボタンを押したときと離したとき
- mousemoveイベント:マウスが動いたとき
- mouseenterイベント,mouseleaveイベント:マウスオーバーのとき
- MouseEventで取得できる座標情報とキー情報
- keydownイベント,keyupイベント:キーを押したときと離したとき
- KeyboardEventで取得できるキー情報
- changeイベント:フォームや選択メニューが変更されたとき
- inputイベント:フォームで文字が入力されたとき
- copyイベント,cutイベント,pasteイベント:コピー、カット、ペーストを行ったとき
- loadイベント:ページの読み込みが完了したとき
- DOMContentLoadedイベント:DOMツリーの構築が完了したとき
- beforeunloadイベント:ページがアンロードされる直前
- resizeイベント:ウィンドウサイズが変更されたとき
- ブラウザでのJavaScriptの利用
- ダイアログを表示する(window.alert,window.prompt,window.confirm)
- 新しいタブやウィンドウを開く(window.open)
- タブやウィンドウを閉じる(window.close)
- 指定時間経過後に1回実行する(window.setTimeout)
- 指定時間毎に繰り返し実行する(window.setInterval)
- ウィンドウの幅と高さを取得する(window.innerWidth,window.outerWidth,他)
- ウィンドウの幅と高さを変更する(window.resizeTo,window.resizeBy)
- ディスプレイのデバイスピクセル比を取得する(window.devicePixelRatio)
- 印刷ダイアログを表示する(window.print)
- 現在のページのURLを取得する(location.href)
- 指定のURLのページを読み込んで表示する(location.assign,location.replace)
- 現在のページを再読み込みする(location.reload)
- ブラウザの履歴を前後に移動する(history.back,history.forward.history.go)
- ユーザーエージェントを取得する(navigator.userAgent)
- ディスプレイの画面サイズや色の情報を取得する(screen.width,sreen.height,他)
- Webページの最終更新日や文字エンコーディングを取得する(document.characterSet,他)
- Cookieへの書き込みと読み出し(document.cookie)
- Cookieで指定可能な属性の種類と設定方法
( Written by Tatsuo Ikura )
Profile
著者 / TATSUO IKURA
プログラミングや開発環境構築の解説サイトを運営しています。