Web Programming
JavaScript
- Index
JavaScriptの概要
- JavaScript とは
- 「オブジェクト指向スクリプト言語」である。
- ブラウザ環境
- JavaScriptが利用されている最も一般的な環境がブラウザ環境です。
はじめに
- JavaScriptの実行方法
- HTMLから JavaScriptを読み込む方法は、２つです。
- デバッグの仕方
- プログラムが意図した通りに動かない場合に、デバッグという作業を行います。
- コード記述のルール
- JavaScriptの記述ルールとは、let・constを使いセミコロンを省略せず、インデントや命名規則を統一し、厳密等価演算子を用いるなど可読性・保守性を重視したスタイルを徹底し、ESLintやPrettierなどのツールで自動的にフォーマットやエラー検知を行うことで安全・効率的なコードを維持することです。
- コメント
- JavaScriptのコメントの書き方には、２通りの記述方法があります。
- セミコロンの使い方
変数・定数とデータ型
- 変数と定数
- 変数とは、プログラムで使われる値を、名前付きで管理するラベルのようなものです。
- 識別子と予約語
- 変数名は、識別子と呼ぶこともあります。
- データ型
- プログラムで扱うデータにはいくつかの種類があり、そのデータの種類のことをデータ型、または型と呼びます。
- リテラル
- JavaScriptでプログラムに直接記述するデータ値のことをリテラルと呼びます。
- テキスト
- 文字列は、16ビット値が順序付けて並べられた不変のデータです。
- BigInt
- 任意の精度で整数値を扱える型です。
オブジェクトとメソッド・プロパティの概要
- オブジェクト、メソッド、プロパティとは
- 不変な基本型値と可変なオブジェクト参照
- ラッパーオブジェクト
- グローバルオブジェクト
- プログラムのどこからでもアクセスできる共通の機能や値を提供する、プログラミング言語の基盤です。
- 型の変換
- 変数のスコープ
-
- グローバルスコープ（Global Scope）
- 特定の関数やブロックの外部に定義された変数や関数が、プログラム全体のどの箇所からでも参照・変更できる最も広いアクセス範囲のことです。
- ローカルスコープ（Local Scope）
- 関数やブロック(コードの塊)内部に限定されるスコープ。
演算子
- 演算子の概要
- Arithmentic operator 「算術演算子」
- 関係演算子
- 論理演算子
- 代入演算子
- その他の演算子
- 評価式
文・制御構文
- 式文
- 複合文と空文
- 条件文
- ループ文
- 特定の条件が満たされるまで同じ処理を繰り返し実行するための仕組みです。
- break / continue
-
- break [statement]
- ループや switch文を条件が満たされた時点で即座に終了させるための制御文です。
- continue [statement]
- ループの中で特定の条件に当てはまった時に、その繰り返しの残りの処理をスキップして次の繰り返しに進むために使う命令です。
関数
- 関数（function）
- 特定の処理をひとまとまりにして呼び出しやすくし、再利用可能にするためのコードの部品です。
- アロー関数
- => (矢)を使って関数リテラルを記述します。
- return
- 関数から値を返し、その関数の実行を終了します。
主要なビルトインオブジェクト
- Number / String / Boolean / Object
-
- 数値 [Number]
- Number型は、-(253 - 1) から 253 - 1 までの数値は正確に表現できます。
- String
- 文字列を参照／設定する。
- Boolean
- Boolean（真偽値）は、trueまたは falseという値を取ります。
- Object [constructor]
- 新しいオブジェクトを作成し、プロパティやメソッドを追加するための方法です。
- 配列（Array）
- 配列を作成します。
- Math
- 数学的な定数と関数を提供するオブジェクトです。
-
- Math.PI
- 円周率。約 3.14159 です。
- Math.random()
- 0 以上 1 未満の疑似乱数を返す。
- Date [object]
- 日付や時刻の取得・設定・操作を行うための組み込みオブジェクトです。
- Promise [constructor]
- 非同期処理の成功または失敗の結果を表現し、将来の処理結果を管理するためのオブジェクトです。
- Map / Set
-
- Map
- 様々な型のキーと値のペアを順序付けして保持し、効率的に操作できるデータ構造です。
- Set
- 重複する値を一切含まず、各要素がユニークなデータの集まりを管理するための機能です。
- JSON (JavaScript Object Notation)
- データを表現するための軽量なテキストベースの形式で、名前と値のペアの集合（オブジェクト）や値の順序付けられたリスト（配列）を使用してデータを構造化します。
- 正規表現 [Regular Expressions]
- 特定のパターンに基づいて文字列を検索、置換、抽出するための強力なツールです。
- Error [object]
- プログラム内で発生したエラーの情報を捕捉し、管理するために使用されるオブジェクトです。
DOM操作（クライアントサイド）
- Documentオブジェクト / Windowオブジェクト
-
- document
- ドキュメントを参照する。
- window
- ウィンドウを使用する。
- 要素の取得・操作
-
- getElementById(), querySelector(), querySelectorAll(),
- createElement(), appendChild(), remove()
- innerHTML, textContent
- setAttribute(), getAttribute(), removeAttribute()
- className, classList
- ページ読み込みタイミング
-
- 文字コード
-
イベント処理
- イベントモデル
- （event.html や eventtarget.html など）
- イベントリスナーの登録
- addEventListener(), removeEventListener()
- 主要なイベントの種類
-
- マウス系：click, mousemove, mousedown, mouseup など
- キーボード系：keydown, keyup など
- フォーム系：change, submit, input など
- ページ読み込み系：DOMContentLoaded, load
- イベント伝搬制御
- preventDefault(), stopPropagation(), stopImmediatePropagation()
ライブラリ・フレームワーク
- jQuery
- JavaScriptを簡潔に書けるようにし、DOM操作やイベント処理、Ajax、アニメーションを効率的に行うための軽量なライブラリです。
- Three.js
- JavaScriptでブラウザ上に3Dグラフィックスを簡単に描画できるオープンソースのライブラリです。
- Vue.js
- シンプルで柔軟な構造を持ち、リアクティブなデータバインディングとコンポーネントベースのアーキテクチャにより、効率的に動的なユーザーインターフェースを構築できるJavaScriptフレームワークです。
- React
- Angular
WebGL
- WebGL
- ウェブブラウザ上でインタラクティブな3Dおよび2Dグラフィックスをハードウェアアクセラレーションを利用して高速に描画するための JavaScript APIです。
Node.js（サーバーサイドJavaScript）
- Node.js
- Node.jsは、JavaScriptをウェブブラウザ以外で使えるようにするプラットフォームで、効率的なアプリケーション開発を可能にします。
付録・その他
- デバウンス処理 [Debounce processing]
- 頻繁に起こるイベントを一定時間待ってから一度だけ実行することで、不要な処理を防ぐ手法です。
Index
- addEventListener
- イベントリスナー（さまざまなイベントに合わせて処理を実行させる関数）を登録するためのメソッドです。
- alert
- 警告ダイアログを表示したい。
- appendChild
- 特定の親ノードの子ノードの最後にノードを追加する。
- apply [method]
- 関数を特定の this値と、引数を配列で指定して実行できるようにするものです。
- arc [function]
- 指定された中心点、半径、開始角度、終了角度、描画方向を使って、円や円弧を描画するための方法です。
- arguments
- Array
- 配列を作成します。
- beginPath [method]
- 新しい描画を開始するために、以前の描画パスから独立させる命令です。
- body [object]
- ウェブページの表示内容を操作するためのHTMLドキュメントの主要な部分にアクセスするオブジェクトです。
- Boolean
- Boolean（真偽値）は、trueまたは falseという値を取ります。
- break [statement]
- ループや switch文を条件が満たされた時点で即座に終了させるための制御文です。
- cancelable
- イベントがキャンセル可能かどうか、イベントが発生しないように抑止することができるかを示します。
- change
- フォーム部品でユーザーによる要素の値の変更が確定したときに発生するイベントです。
- characterSet
- 文字コードを取得する。
- charCodeAt
- 文字コードを取得する。
- childNodes [property]
- 特定の要素の子要素を含む NodeList（ノードリスト）を返す。
- classList
- 要素のクラス属性のリストを取得して返します。
- classList.add() [method]
- 指定した要素にクラス名を重複なく追加することで、CSSやDOM操作による見た目や動作の変更を手軽に実現するためのメソッドです。
- className
- HTML要素のクラス属性を設定または取得する。
- clearInterval
- setInterval() でセットしたタイマーを解除する。
- clearTimeout
- setTimeout() でセットしたタイマーを解除する。
- click
- マウスのボタンが押されたあとで離された時に発生するイベントです。
- cloneNode [method]
- 指定した DOM要素を、その子要素も含めて複製できるメソッドです。
- close() [method]
- ウィンドウやポップアップウィンドウを閉じるために使用する。
- codePointAt
- Unicode コードポイント値である負ではない整数を返します。
- const
- 文字列や数値などのデータに名前を付けたり繰り返し利用するために、データを保持するための変数を宣言します。
- content
- HTML要素のメタ情報やテキスト内容を示すプロパティや属性を指し、ページや要素の中身を指定・操作するために使われます。
- continue [statement]
- ループの中で特定の条件に当てはまった時に、その繰り返しの残りの処理をスキップして次の繰り返しに進むために使う命令です。
- createElement() [method]
- 新しいHTML要素をプログラムで作成するための機能です。
- dataset
- HTMLの data属性（カスタムデータ属性）を操作するプロパティです。
- Date [object]
- 日付や時刻の取得・設定・操作を行うための組み込みオブジェクトです。
- decodeURI [function]
- ウェブアドレスやその他のURIから特殊文字のエンコーディングを解除し、もとの読みやすい文字列に戻す関数です。
- decodeURIComponent [function]
- ウェブアドレスに含まれる特殊文字を元の文字（例えば日本語や空白など）に戻す関数です。
- default
- モジュールから単一の値をエクスポートする際や、switch文内でどのケースにも当てはまらない場合の処理を指定するために使用されます。
- dispatchEvent
- 特定の EventTargetに Eventをディスパッチし、影響する EventListenerを適切な順序で呼び出します。
- do...while [loop]
- コードを一度実行してから条件をチェックし、その条件が真である間はその処理を繰り返すループです。
- document
- ドキュメントを参照する。
- document.close()
- openメソッドで出力を開始したドキュメントへの出力を終了します。
- document.open()
- ドキュメントを開いて書き出し可能な状態にします。
- DOMContentLoaded
- Webページが読み込みが完了した時に発動するイベント。（画像などのリソースは含まない）
- element
- HTML及び XHTMLの要素を表現するオブジェクト。
- encodeURI [function]
- URLをウェブ上で安全に使用できる形式に変換するために使用されます。
- encodeURIComponent [function]
- URLの一部として安全に使用するために文字列をパーセントエンコーディング形式に変換する関数です。
- Error [object]
- プログラム内で発生したエラーの情報を捕捉し、管理するために使用されるオブジェクトです。
- eval [function]
- 文字列として渡されたコードを実行する機能ですが、セキュリティリスクが高いため使用は推奨されません。
- Event
- Eventインターフェイスは、DOMで発生するイベントを表します。
- EventTarget
- EventTargetは DOMインターフェイスで、イベントを受け取ることや、リスナーを持つことができるオブジェクトが実装しています。
- export [statement]
- 定義された関数、変数、クラスなどを他のファイルからアクセス可能にするために使用されます。
- fill [method]
- 配列の全要素または指定された範囲の要素を特定の値で上書きする機能を提供します。
- fillRect [method]
- キャンバス上に指定した位置と大きさで四角形を描き、それを現在の塗りつぶし色で塗りつぶす機能を提供します。
- fillStyle [property]
- キャンバス上で描画する図形や文字の色や模様を設定するプロパティです。
- for [loop]
- 指定した条件が満たされる間、コードブロックを繰り返し実行するための制御構造です。
- for...in [loop]
- オブジェクトの列挙可能なすべてのプロパティを一つずつ取り出して処理するための構文です。
- for...of [loop]
- ループの一種で、配列や文字列などの反復可能オブジェクトに対して、要素の値を繰り返し処理するために使用されます。
- forEach() [method]
- 配列の各要素に対して、指定された関数を一度ずつ実行するために使用されます。
- forms
- 文書内に含まれるすべての <form> を列挙した HTMLCollectionを返します。
- frames
- ウィンドウ自体を、現在のウィンドウの直接のサブフレームを列挙した配列風オブジェクトとして返します。
- fromCharCode
- Unicodeコードポイントを表す数値を引数に取り、それに対応する文字列を返す。
- fromCodePoint
- 指定されたコードポイントのシーケンスを使って生成された文字列を返します。
- function 「関数」
- 特定の処理をひとまとまりにして呼び出しやすくし、再利用可能にするためのコードの部品です。
- getAttribute [method]
- 指定した属性の値をHTML要素から取得する。
- getContext [method]
- キャンバス上で絵を描くために使う道具や技法（「2d」や「webgl」など）を選ぶ方法です。
- getElementsByClassName
- 特定の class名（class属性値）から要素を取得する際に使用します。
- getElementById
- オブジェクトの情報を id で取得する。
- getFullYear() [method]
- Dateオブジェクトにおいて、getFullYear()メソッドは古い getYear()の代替として推奨され、オブジェクトが表すローカルタイムを基準に西暦年を整数で返すメソッドです。
- getMonth() [method]
- getMonth() は、Dateオブジェクトから 0（1月）～11（12月）の範囲で現在の“月”を取得するメソッドです。
- hasOwnProperty [method]
- オブジェクト自身が特定のプロパティを持っているかどうかを確認するためのものです（継承されたプロパティは含まれません）。
- height [property]
- ウェブページ上の要素の高さを設定または取得するために使用されます。
- History [object]
- JavaScriptからブラウザーの「戻る」「進む」などの履歴操作を行い、URLやセッション履歴の状態を動的に変更・管理できる仕組みを提供するAPIです。
- href
- URL を参照／設定する
- HTMLDataListElement
- HTMLElement
- 任意の HTML 要素を表します。
- HTMLTableColElement
- id
- idの取得・設定・削除。
- if ... else
- 条件分岐処理をする。
- Image
- 新しく HTMLImageElementインスタンスを作成します。
- import [statement]
- 他のモジュールから機能やデータを読み込むために使用されます。
- importNode
- 外部ドキュメントから、現在のドキュメント内へ挿入可能なノードのコピーを作成します。
- in
- in演算子は、主に2つの使い方があり、オブジェクトにプロパティが存在するか判定する。または、オブジェクトのプロパティを繰り返し処理する。
- Infinity
- 計算可能な数値の範囲を超える非常に大きな数値、または無限大を表す特別な値です。
- innerHeight
- ブラウザの表示領域の高さをピクセル単位で教えてくれるプロパティです。
- innerHTML
- HTML要素の中身を変更する際に使用する Elementオブジェクトのプロパティです。
- innerText [property]
- HTML要素内のユーザーに表示されているテキストのみを取得または変更するために使用されます。
- innerWidth
- ブラウザーのウィンドウ内の表示領域の幅をピクセル単位で教えてくれるプロパティです。
- instanceof 演算子
- オブジェクトが特定のクラスまたはコンストラクタ関数から作成されたかどうかを確認する。
- isFinite [function]
- 与えられた値が実際の有限数であるかどうかを判断するためのツールです。
- isNaN [function]
- 与えられた値が数値ではないかどうかを判断するためのものです。
- item() [method]
- 特定のコレクション内の項目にアクセスするために使用されます。
- join [method]
- 配列の各要素を指定した区切り文字で結合して一つの文字列を生成します。
- JSON (JavaScript Object Notation)
- データを表現するための軽量なテキストベースの形式で、名前と値のペアの集合（オブジェクト）や値の順序付けられたリスト（配列）を使用してデータを構造化します。
- keydown
- キーが押されたときに発生するイベントです。
- keypress
- 通常は文字を生成するキーが押されたときに発生するイベントでしたが、このイベントはデバイス依存度が高く、使用すべきではないようです。keydownイベント、keyupイベントを使うようにしましょう。
- keyup
- キーが離されたときに発生するイベントです。
- lastModified [property]
- Webページが最後に更新された時刻を取得するためのプロパティです。
- length
- 文字列の長さ（文字数）を参照する。
- let
- 文字列や数値などのデータに名前を付けたり繰り返し利用するために、データを保持するための変数を宣言します。
- links
- 文書中の、href属性の値を持つすべての area要素とアンカー要素のコレクションを返します。
- load
- Webページの読み込みが完了した時に発動するイベント。（画像などのリソースすべて含む）
- location [object]
- ロケーション（URL）情報を参照／設定する
- Map
- 様々な型のキーと値のペアを順序付けして保持し、効率的に操作できるデータ構造です。
- map() [method]
- 配列の各要素に対して指定された関数を適用し、その結果を新しい配列として生成するためのメソッドです。
- Math
- 数学的な定数と関数を提供するオブジェクトです。
-
- Math.PI
- 円周率。約 3.14159 です。
- Math.random()
- 0 以上 1 未満の疑似乱数を返す。
- message [property]
- エラーオブジェクトに対して発生したエラーの説明をテキスト形式で提供します。
- mousedown
- マウスのボタンが押された時に発生するイベントです。
- mousemove
- マウスが動いた時に発生するイベントです。
- mouseup [event]
- ユーザーが押していたマウスボタンを離した瞬間に発生するイベントです。
- NaN (Not a Number)
- 数値として無効または未定義の計算結果を表す特別な値。
- new
- 新規オブジェクトを生成する。
- nodeType
- 要素の種類を示す整数値で、例えば、テキストノードや属性ノード、要素ノードなどがあります。
- null
- 明示的に何もない状態を表す特別な値。
- Number() [function]
- 与えられた値を数値に変換するために使用されます。
- Object [constructor]
- 新しいオブジェクトを作成し、プロパティやメソッドを追加するための方法です。
- Object.prototype.toString() メソッド
- JavaScriptの標準オブジェクトで、引数として渡された値の型を文字列で表現するメソッドです。
- onAbort
- 画像やフレームなどのリソースの読み込みが中断された場合に発生するイベントハンドラーです。
- onBlur
- フォーカスがはずれたら処理を実行する。
- onChange
- フォームの状態が変化したら処理を実行する。
- onClick
- オブジェクトがクリックされたら処理を実行する。
- onDblClick
- オブジェクトがダブルクリックされたら処理を実行する。
- onError
- 画像のリンクが切れていたり、サーバの都合などによってエラーが発生した場合にイベントを取得する。
- onFocus
- フォーカスされたら処理を実行する。
- onKeyDown
- キーボードのキーが押された時に実行されるイベントハンドラです。
- onKeyPress
- キーが押されている間処理を実行する。
- onKeyUp
- キーが押されて離されたら処理を実行する。
- onLoad
- Webページ読み込み完了時に処理を実行する。
- onMouseDown
- マウスボタンが押されたら処理を実行する。
- onmousemove
- ユーザーがマウスを動かしたときにその動きを検知して処理を実行できるイベントです。
- onMouseOut
- マウスカーソルが要素の上から外れたときに指定した処理を実行するためのイベントハンドラです。
- onMouseOver
- マウスポインタがオブジェクトに重なったら処理を実行する。
- onMouseUp
- マウスボタンが離されたら処理を実行する。
- onUnload
- 他のページに移動したら処理を実行する。
- open
- 新しいウィンドウを開く。
- parse [パース]
- 文字列形式のデータを JavaScriptが操作しやすいオブジェクト形式に変換する処理のことです。
- parseFloat [function]
- 文字列を数値に変換するために使われ、文字列が数値で始まる場合はその数値を、そうでない場合は NaN（数値ではない）を返します。
- parseInt [function]
- 文字列を数値に変換する関数です。
- preventDefault
- 既定のアクションを通常どおりに行うべきではないことを伝えます。
- Promise [constructor]
- 非同期処理の成功または失敗の結果を表現し、将来の処理結果を管理するためのオブジェクトです。
- prompt() [function]
- ユーザーから入力を受け取るためのシンプルなポップアップダイアログを表示する機能です。
- push() [method]
- 引数として渡された要素を配列の末尾に追加する。
- querySelector
- 指定されたセレクターまたはセレクターのグループに一致する、文書内の最初の Elementを返します。
- querySelectorAll
- 指定したセレクタに一致するすべての HTML要素（NodeList）を取得する。
- readyState [property]
- ドキュメントの読み込みと解析の状態を示すプロパティです。
- remove
- 要素を削除する。
- removeAttribute
- 要素に設定されている属性を削除する。
- replace() [method]
- 文字列の中で指定したパターン（文字列や正規表現）に一致する部分を新しい文字列に置き換えるためのメソッドです。
- requestAnimationFrame [method]
- スムーズで効率的なアニメーションを実現するために、ブラウザの最適なタイミングで関数を実行するよう依頼するメソッドです。
- reset() [method]
- HTMLフォームの入力値を消去し、初期状態に戻すためのメソッドです。
- return
- 関数から値を返し、その関数の実行を終了します。
- Set
- 重複する値を一切含まず、各要素がユニークなデータの集まりを管理するための機能です。
- selection
- ユーザーが選択した範囲を表します。
- setAttribute
- 指定したHTML要素に属性を追加する、または既存の属性を変更する。
- setInterval [function]
- 指定した時間間隔ごとに同じ処理を繰り返し実行するための関数です。
- setProperty
- 要素のスタイルを変更するために使用されるメソッドです。
- setTimeout
- タイマーをセットする。
- showModal() [method]
- ブラウザでモーダルダイアログを表示するためのメソッドです。
- splice() [method]
- 配列の指定した位置に要素を追加したり、削除したり、置き換えたりできる便利なメソッドです。
- stopImmediatePropagation
- 同じオブジェクトの同じイベントに複数のリスナーが設定されている場合、このメソッドを実行すると、その時点で他のリスナーを実行しません。
- stopPropagation
- イベントの過程におけるこれ以上の伝搬を抑止します。
- String
- 文字列を参照／設定する。
- style
- HTML要素のスタイルを動的に変更することができます。
- submit [event]
- HTMLフォームが送信される時に発生するイベントです。
- super
- switch〜case
- 3つ以上の分岐が可能。
- target
- イベントを発生させたオブジェクトへの参照です。
- test() [method]
- 指定された文字列が正規表現にマッチするかを判定し、マッチする場合は true 、しない場合は false を返すメソッドです。
- textContent
- テキストの取得や書き込み。
- this
- 実行時に決定される特殊なキーワードです。
- throw [statement]
- プログラムで意図的にエラーを発生させ、そのエラーを捕捉して適切に処理するために使用されます。
- toLocaleDateString [method]
- 日付を特定の地域の形式に合わせてフォーマットするために使用されます。
- toLocaleTimeString [method]
- 日時を特定の地域や言語に合わせた形式で表示するための機能です。
- toString
- 指定された Numberオブジェクトを表す文字列を返します。
- try ... catch [statement]
- エラーが発生する可能性のあるコードを安全に実行し、エラーが発生した場合にそのエラーを処理するための仕組みです。
- typeof
- 対象の値のデータ型を表す文字列を返す演算子です。typeof 演算子を使用することでデータ型を調べることができます。
- undefined
- 変数がまだ値を持っていないか、存在しないプロパティにアクセスした際に得られる特別な状態を指します。
- value
- ボタンに表示する文字列や、入力フィールドに入力されている文字列など、各エレメントの値を参照、設定します。
- var
- 文字列や数値などのデータに名前を付けたり繰り返し利用するために、データを保持するための変数を宣言します。
- while
- 条件をチェックして繰り返す。
- width [property]
- DOM要素の幅(width)を扱う際は、offsetWidthや clientWidthなどがパディング・ボーダーを含むか否かで異なり、さらに box-sizingや style.widthの設定によって実際の表示幅が変わるため、それぞれの特性を理解して目的に応じた方法を使い分けることが重要です。
- window
- ウィンドウを使用する。
- window.onload
- windowの loadイベントに対応するイベントハンドラです。
- write
- ドキュメントにデータを書き出す。
- writeln
- ドキュメントに文字列を書き出して改行する。
- XMLHttpRequest [object]
- Webページがサーバーと非同期通信を行い、ページの再読み込みなしにデータを交換できるようにするオブジェクトです。
- jQuery
- jQueryとは、ウェブブラウザ用の JavaScriptコードをより容易に記述できるようにするために設計された JavaScriptライブラリです。
-
- jQueryの入手方法
- ready
- jQuery UI
- jQuery UIとは、jQueryの便利な機能をまとめたライブラリの一種で、名前の通り、UI（User Interface : ユーザーインターフェース）に関係した機能を提供します。
- jQuery CDN
- CDN（Contents Delivery Network）とは、外部のファイルをリンク１つで使用することができる仕組みのことです。
- Node.js
- Node.jsは、JavaScriptをウェブブラウザ以外で使えるようにするプラットフォームで、効率的なアプリケーション開発を可能にします。