JavaScript入門
JavaScript は Web サイトに動的な機能を追加するためのプログラミング言語です。 1995 年に米国の Netscape 社によって開発され、現在では Web 開発に欠かせない技術の一つとなっています。 JavaScript は Web ブラウザ上で直接動作するスクリプト言語であり、ボタンのクリックイベントやアニメーション、フォームの入力チェックなど、インタラクティブな機能を実装するのに利用できます。
JavaScript はブラウザさえあればすぐにプログラムを書いて実行できます。 Web ページの作成において、 HTML や CSS と組み合わせて利用されることも多いです。また、Node.js などを利用することでサーバーサイドの開発も可能となり、 JavaScript はフロントエンドからバックエンドまで幅広い用途で活用されています。
JavaScript は、オブジェクト指向や関数型プログラミングなど、多様なプログラミングスタイルを取り入れることができる柔軟な言語です。また、強力なライブラリやフレームワークが豊富に提供されており、効率的な開発を可能にします。今日では、大手 IT 企業も JavaScript を活用しており、特にフロントエンド開発の分野では JavaScript のスキルが求められています。JavaScript を習得することで、 Web 開発のスキルを身につけるだけでなく、キャリアアップや新しい技術の習得につながります。
このカテゴリでは、 JavaScript を使ったプログラミングをこれから始められる方を対象として、 JavaScript の基本から実践的な利用方法まで、わかりやすく解説していきます。
(Last modified: )
- 数値リテラルの記述方法
- 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)
- 再帰関数を利用する
- コールバック関数/高階関数を利用する
- 正規表現オブジェクトを作成する
- 正規表現におけるエスケープ処理
- 文字列が正規表現とマッチするかテストする(RegExp.prototype.test)
- 正規表現にマッチした文字列を取得する(RegExp.prototype.exec)
- 正規表現にマッチした文字列のインデックスを取得する(String.prototype.search)
- 正規表現にマッチしたすべての文字列を取得する(String.prototype.match)
- 文字列を正規表現を使った区切り文字で分割する(String.prototype.split)
- 正規表現にマッチした文字列を新しい文字列に置換する(String.prototype.replace)
- 文字クラスを使って色々な文字にマッチするパターンを記述する
- 文字列の先頭や末尾などの位置にマッチするパターンを記述する
- 直前の文字を指定回数繰り返す文字列にマッチするパターンを記述する
- 複数の文字列のいずれかにマッチするパターンを記述する
- キャプチャグループを設定してパターンの一部にマッチした文字列を取得する
- 先読みと後読みを使ったパターンの記述
- JavaScriptの正規表現で設定できるフラグの一覧
- 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.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.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とは
- 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イベント：ウィンドウサイズが変更されたとき
- ダイアログを表示する(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 )
著者 / TATSUO IKURA
これから IT 関連の知識を学ばれる方を対象に、色々な言語でのプログラミング方法や関連する技術、開発環境構築などに関する解説サイトを運営しています。