JavaScript リファレンス
JavaScript とは、HTML を動的に表現するためのスクリプト言語です。ブラウザ上で動作し HTML、CSS と連携して web ページのフロントエンド開発に利用されます。
ブラウザ上で動作しますので OS に依存しないクロスプラットフォームで利用できるという特徴があります。
ここでは HTML テキストをオブジェクト化するための DOM を含めた JavaScript について解説します。
JavaScript で HTML を動的に表現するために、 Wep API （ DOM を含む ）という仕組みを利用します。 DOM は HTML テキストをオブジェクトツリー化するためのクラス（インターフェイス、ミックスイン）定義です。
右に DOM のインデックスがあります。参考にして下さい。
JavaScript はブラウザ上で動作し、ゲーム、チャットといった web アプリケーションの作成を可能にしています。
また、非同期通信
という機能があり、画面遷移をしなくてもサーバーと通信しページの一部を変更することができます。
Node.js
というサーバーサイドで JavaScript を動かせるスクリプトもあります。Node.js
はファイル操作や双方向通信ができますがブラウザ上では動きません。
JavaScript の js ファイルの読み込みとスクリプト直接定義
スクリプトのコードは HTML 内に直接記述することも、外部ファイルとして読み込むこともできます。
HTML 内に直接記述されたスクリプトの方が後で読み込まれますので、直接記述されたスクリプトの方の内容が優先されます。
Script の外部ファイル読み込み
外部ファイルとして作成したスクリプトファイルを読み込むには <script> エレメントでファイル名を指定します。
<script type="text/javascript" src="example.js"></script>
HTML5 以降ではtype="text/javascript"
はなくても機能します。
<script src="example.js"></script>
Script を直接定義
スクリプトを HTML テキストに直接編集することもできます。
<script type="text/javascript"> ... </script>
直接記述する場合にも HTML5 以降ではtype="text/javascript"
はなくても機能します。
<script> ... </script>
スクリプトに対応していないブラウザために「代替えテキスト」を用意した方がよいかもしれません。
代替テキスト
スクリプトに対応していないブラウザで代替として <noscript> エレメントを使います。<noscript> エレメントは、<body> 内に記述します。
<noscript>このページには script が含まれています</noscript>
HTML 内での script タグエレメントについては、<script>
を参照してください。
Script 宣言
HTML5 以降では、JavaScript が既定のスクリプトとなったために、以下のような <meta> によるにスクリプト宣言が不要になりました。
web ページが HTML5 であることを宣言するには<!DOCTYPE html>
とします。<!DOCTYPE > について詳しくは <!DOCTYPE > ページを参照してください。
参考までに <meta> 宣言によるスクリプト宣言を示します。
<meta http-equiv="Content-Script-Type" content="text/javascript">
ここではスクリプト言語は JavaScript であることを前提としています。
HTML（DOM）とJavaScript
DOM について
JavaScript はブラウザ上で動くスクリプトのひとつです。web ブラウザ上でデータ入力を受け付けて、ブラウザ上に処理結果を表示します。web ブラウザが I/O の役割をします。
HTML の元である DOM（Document Object Model））という仕組みを利用して JavaScript で web ページを動的に表現します。
- Web API
- ├─ CSS Object Model（style、<style>、CSS外部ファイル）
- └─ DOM
- ├─ Event ... AnimationEvent、ClipboardEventなど
- └─ EventTarget
- ├─ Window
- ├─ Node
- ├─ Document
- ├─ Element
- └ HTMLElement ... HTMLAnchorElement、HTMLParagraphElementなど
- └─ Attr
- │
- └─ XMLHttpRequestEventTarget - XMLHttpRequest .. 非同期通信
- ├─ HTMLCollection
HTML テキストをブラウザにロードしたら DOM によって以下のようなオブジェクトツリーに変換されます。この DOM を JavaScript で操作します。
JavaScript は、web ブラウザ依存のプログラミング言語というところが他のプログラミング言語と違う所です。
スクリプト言語はコンパイラを必要としません。コードはそのまま実行されます。ただし実行速度はコンパイラ言語よりも劣る傾向にあります。
JavaScript と CSS
CSS は DOM ではなく Web API 以下のクラスとして扱われています。CSS について調べるときには DOM とは別に記載されていることを念頭においておいた方がよいでしょう。
スタイルシート情報は Document.prototype.styleSheets または HTMLElement.protorype.style プロパティで取得できます。
エレメントの class 属性は Element.classList.add() で追加、 Element.classList.remove() で削除することができます。
詳しくはCSS の取得と設定
ページを参照してください。
内容の削除、更新
エレメントの内容を削除するには innerHTML に "" または null を代入します。
document.getElementsByTagName( 'p' )[0].innerHTML = "";
innerHTML はタグ付きの HTML テキストを代入すると直ちに DOM によってオブジェクトツリーに変換されます。
ドキュメントの削除には、Document インスタンスに null を代入します。
document = null;
内容の更新は非同期で処理されているようです。
エレメントの取得/新規作成（ I/O ）
JavaScript は、ブラウザ上で実行できる言語です。ブラウザによって HTML テキストが DOM というオブジェクトデータに変換されます。この DOM を介して JavaScript でデータの取得や操作、処理、そして出力を行います。
HTMLテキスト におけるタグエレメントもしくはエレメントと呼ばれる <p> といったタグが、ブラウザよってオブジェクト化されます。タグエレメントを取得するには、Document.getElementsByTagName() や Document.getElementById() といったメソッドを使います
var element = document.getElementsByTagName('tag_name');
これは、タグ名から HTMLCollection というオブジェクトの列を取得します。詳しくは以下を参照してください。
「エレメントの取得と新規追加」ページへ
Event インターフェイス
ブラウザには、マウスやキーボード、API、エラーといった I／O やエラーはイベントという方法によって捉えます。 このイベントは DOM のEvent インターフェイスを利用します。
Event インターフェイスには、イベントを捉える方法とそのためのパラメータとメソッドが用意されています。
イベントを捉える方法には、HTML でタグの属性としてイベントハンドラーを設定する、JavaScript でエレメントを指定してイベントハンドラーを設定する、addEventListener() 関数といった方法があります。
<p onclick="alert('クリックされました');" >
document.getElementsByTagName('p')[0].onclick = "alert('クリックされました');";
document.getElementsByTagName('p')[0].addEventListener("click", ()=>{
alert('クリックされました');
}, false);
addEventListener() 関数の 第2引数であるコールバック部分は引数のある関数を呼び出すことができません。
Event インターフェイスには用途によって、MouseEvent、KeyboardEvent、や ClipboardEvent などといった派生があります。
詳しくは、DOM Eventインターフェイス
のページを参照して下さい。
バブリング・キャプチャリング
発生したイベントはバブリング・キャプチャリングという機能によって親エレメントにイベントが伝わります。伝わったイベントは親エレメントでもイベントとして発生します。
| 親のエレメント | |||
|---|---|---|---|
| ┃ | ↑ | ||
| ( キャプチャー ) | ┃ | ┃ | （バブリング ） |
| ↓ | ┃ | ||
| エレメント ( ＊イベントが発生 ) | |||
バブリング・キャプチャリングについて詳しくはバブリング・キャプチャリングについて
を参照してください。
変数（Valiable）
変数とは、変数名とデータ（値）のセットを指します。
let value = "abcdef";
JavaScript ではすべてのデータをオブジェクトとして扱います。数値は Number オブジェクト、文字列は String オブジェクトに変換されます。
以下に JavaScript で扱うデータの型を示します。扱うデータには大きく分けるとプリミティブを扱う場合とオブジェクトを扱う場合があります。
| データの型 | 概要 |
|---|---|
| プリミティブ | |
| Boolean | 真偽値（true、false） |
| Number | 数値。JavaScript では整数、浮動小数点型といった扱いに違いはない。すべて同じ数値として扱うことができる |
| String | 文字列。”（ダブルコーテーション）、'（シングルコーテーション）、`（バッククォート）で囲まれたもの |
| Symbol | 一意な識別子 |
| オブジェクト | |
| Array | 配列 |
| Object | オブジェクト、連想配列 |
| RegExp | 正規表現 |
| Date | 日付 |
| Function | 関数 |
| Iterator | 順序付け |
データは自動で型を判別してくれます。そのため、データ宣言を明記しなくても自動でメモリを割り当ててくれます。
変数を扱う上で以下のような特殊な値が出てきます。ここでは簡単に一覧だけ上げます。
| 特殊な値 | 概要 |
|---|---|
| null | 値が存在しない（nullリテラル） |
| undefined | 未定義の値 |
| NaN | 数値ではない |
変数が何の型なのかを知るには、typeof または instanceof があります。typeof の方が型名を詳細に返します。
詳しくは、変数（Variable）ページを参照してください。
var、let、const
JavaScript では、var、let、const を使い変数を宣言することができます。これらは変数のスコープを明確にする働きがあります。
let は同名の宣言があるとエラーなり、デバグがし易くなります。変数宣言には let を使うようにした方が賢明でしょう。var ステートメントは同名の変数が使われてもエラーが発生しませんでしたので規模が大きくなるとデバグし難くなります。
グローバル変数などで初期値を変えたくない場合は const を利用するとよいでしょう。const は同じ変数名（識別子）で再宣言できません。
var、let、const について詳しくは変数（Variable）ページの項目 var、let、const
を参照してください
配列と連想配列
JavaScript で配列を変数として宣言するには以下のようにします。
let list_ = [];
配列に初期値を与えるには以下のようにします。
let list_ = [ "a", "b", "c", "d", "e" ];
JavaScript にも連想配列があります。
let obj_ = {};
連想配列の初期値を与えるには、key と value の組み合わせで行います。
var animal = { name:'elephant', food : 'plant' };
連想配列は Object 型とも言われます。詳しくは連想配列（オブジェクト）
ページを参照してください。
関数の定義（ Function オブジェクトの生成 ）
JavaScript で関数を定義するにはFunction コンストラクターまたは function ステートメントを使用します。
// Function コンストラクター
example_ = function(){
...
return( foo );
}
/* または */
// function ステートメント
function example_(){
...
return( foo );
}
function ステートメントによって Function オブジェクトが生成されます。
Function オブジェクトはリテラル値で、変数に代入したり、引数として関数に渡したりすることができます。また、オブジェクトのメンバにすることもでき、その場合はメソッドとも呼ばれています。
詳しくはFunction
を参照してください。
古い方法ですが、function ステートメントでクラスを定義できます。クラスについてはクラス
ページを参照してください。
オブジェクト（クラスとインスタンス）
JavaScript におけるクラス定義とそのインスタンスの生成についてです。
let obj_student = {};
class Example{
constructor(){
...
}
}
オブジェクトは、それ固有のデータ群（プロパティ）と関数群（メソッド）を持つデータです。データと関数を併せもつデータがオブジェクトという抽象的なものです。
実際のプログラムではオブジェクトの設計図であるクラスの定義を行い、そしてその設計図からオブジェクトデータであるインスタンスを生成します。
このサイトではオブジェクトについてはオブジェクト
で、クラスについてはクラス
で解説しています。
詳しくはそれぞれのページを参照してください。
JavaScript では HTML エレメントのタグエレメントがオブジェクト（DOM）として扱われています。これを理解し活用するとよいでしょう。
予約語とグローバル変数、グローバル関数
予約語とは、変数名に使えないあらかじめ決められた名称です。JavaScriptには、予約語ではないのですがグローバル変数とグローバル関数と呼ばれる変数名としては使わない方がよい名称があります。
JavaScriptには以下の予約語があります。予約語を変数名としては使えません。
| 予約語一覧 | ||||
|---|---|---|---|---|
| await | break | case | catch | class |
| const | continue | debugger | default | delete |
| do | else | enum | export | extends |
| false | finally | for | function | if |
| implements | import | in | instanceof | interface |
| let | new | null | package | private |
| protected | public | return | super | static |
| switch | this | throw | true | try |
| typeof | var | void | while | with |
| yield | ||||
*withは使用を推奨されていないステートメントです。
詳しくは予約語とグローバル変数、グローバル関数
を参照してください。
スコープ（変数の参照範囲）
スコープ（変数の参照範囲）とは、変数の取得や変更といった変数の参照ができる範囲のことです。
変数には宣言した箇所によって参照できる範囲が変わります。
let a = 10;
{
let b = 100;
console.log( 'a = ' + a );
console.log( 'b = ' + b );
}
console.log( 'a = ' + a );
console.log( 'b = ' + b ); // エラーが起きる
上記の場合、最後の b の参照console.log( 'b = ' + b );
はエラーが起きます。
b は {} のブロック内のみで参照できるからです。
詳しくはスコープ（変数の参照範囲）
ページを参照してください。
演算子（Operation）
演算子は、プログラムにおけるデータや変数（オペランド）の代入や四則計算、比較などといったデータ操作を行うためシンボルです。JavaScriptはオブジェクト指向ですので、オブジェクトに関する演算子も含まれています。
算術演算子には以下のようなものがあります。
| 演算子 | 概要 |
|---|---|
+ | 加、Addition |
- | 減、Subtraction |
* | 乗、Multiplication |
/ | 除、Division |
% | 余り、Modulus |
++ | インクリメント |
-- | デクリメント |
他にも以下のような代入演算子やオブジェクトに関する演算子もあります。
詳しくは演算子
を参照してください。
数学的な計算はMath クラス
を参照してください。
制御構文（Control Flow Statements）
制御構文（Control Flow Statements）は、あらかじめ用意されている制御構造で、プログラムの流れをコントロールする目的で用いる文（Statements）です。
繰り返し
- do{...}while();
- 繰り返し、条件によって出る
- for(){...}
- 定義数の繰り返し
- for( propaties in object ){...}
- 繰り返し、オブジェクトのプロパティ数が条件
- for( values of array ){...}
- 繰り返し、配列数が条件
- while(){...}
- 繰り返し、条件によって出る
- continue;
- 以降のコードを飛ばして繰り返しに戻る
条件分岐
- if(){...}(else if)else{...}
- 条件分岐
- switch(){case : break; ... default: ... ;}
- 条件分岐
- break;
- 繰り返しや条件分岐処理から出る
割り込み処理
- try{...}catch(){...}(finally{...})
- 割り込みエラー制御
- throw
- 割り込みエラー制御で任意の処理ができる
デバグ
関数
- return();
- 呼び出し元に戻り値を返す
詳しくは制御構文（Control Flow Statements）
を参照してください。
正規表現
正規表現とは、複数の文字列を１つの文字列として表現する正規表現を用いて文字列のパターンマッチングを行う機能のことです。 多くのプログラミング言語やアプリケーションと同じように、文字列のパターンマッチングを正規表現でも行うことができます。
const re = /abc/; const re = new RegExp('abc');
詳しくは正規表現
を参照してください。
簡単な文字列の検索や置換は String インスタンスのメソッドでも行えます。詳しくはString のメソッド
を参照してください。
非同期処理
非同期処理とは、マルチに実行処理を進める方法のことです。
プログラムの実行において、ファイルの読み書きやネットワーク経由の読み書き、一定時間ごとの実行というように本来は待ちになる処理があります。
このような処理も実行待ちにならないようにマルチに処理を進めたいものです。それを可能にするが非同期処理といえます。
非同期処理に関して詳しくは非同期処理
ページを参照してください。
非同期通信
非同期通信とは、web ページの遷移がない状態でサーバーと通信を行いページ内の一部を変更することを可能にする手法です。非同期処理のひとつです。
通信方法は web ページと同じ HTTP 接続で web サーバーと通信を行います。そのため、web サーバーに URL でリクエストします。
基本的に JavaScript ではサーバーとの双方向通信はできません。クライアントのリクエストに対してレスポンスを返すだけです。（双方向通信をするためには、サーバー側にNode.jsをインストールする方法があります。）
詳しくは非同期通信
を参照してください。
例外処理 try ~ catch
例外処理とは、エラーが発生してもそのエラーを捉えて任意の処理に移行する方法です。例外処理があると、エラーによってプログラムの実行が止まりません。
try{
// 例外処理の対象コード。エラーが発生する可能性があるコード
} catch( e ) {
// 例外処理。エラーが発生した場合の処理
}
e はエラーオブジェクトです。開発用コンソールで内容を確かめることができます。
XMLHttpRequest ではイベントを捉えてステータス番号で場合分けする方法を使用します。try ~ catch と XMLHttpRequest の併用は上手く機能しないようです。
詳しくは例外処理 try ~ catch
ページを参照してください。
数学的な計算 Math クラス
Math クラスは数学的な計算式のために用意されたクラスです。例えば以下のような円周率を表す静的プロパティがあります。
let rndm = Math.random(); // 乱数を発生します
四則計算や余りといった計算は演算子
を参照してください。
詳しくはMath
ページを参照してください。
その他
デバグ
開発において必ず必要になる作業がデバグです。デバグとは仕様または想定通りに動作しない部分を特定する作業です。プログラムの実行によってエラーが起きたらデバグをしなければなりません。
JavaScript におけるデバグを支援するツールに Console API インターフェイスがあります。
Console API インターフェイスはブラウザごとに用意されています。
Google Chrome での開発用コンソールは、Google Chrome ウィンドウ画面の上部の右端のメニュー︙
から、
その他のツール
→ デベロッパーツール
→ メニュー上のconsole
で見ることができます。
Console API インターフェイスについて詳しくはConsole API インターフェイス
を参照してください。
文字列の連結
文字列と変数を連結するには+
を使用します。
let temp = 27;
const example_message = "温度は " + temp + " ℃です"
console.log( example_message );
上記の例は以下のように表示されます。
温度は 27 ℃です
現在はテンプレートリテラル ${..}
を使うこともできます。
let temp = 27;
const example_message = "温度は ${ temp } ℃です"
console.log( example_message );
上記の例は以下のように表示されます。
温度は 27 ℃です
詳しくは文字列の連結について
を参照してください。
データの型変換
JavaScript には数値から文字列へ、文字列から数値にデータを変換する便利な関数があります。
文字列に変換
数値や Date、配列を toString() 関数で文字列に変換することができます。
例えば数値を文字列に変換するには以下のようにします。
let number_ = 27; console.log( number_.toString() ); // "27" と表示される。
Date オブジェクトも文字列に変換できます。
let now_ = new Date(); console.log( now_.toString() ); // 例えば、"Fri Jun 30 2023 20:41:09 GMT+0900 (日本標準時)" のように表示される。
配列も文字列に変換できます。
let array_ = [ 1, "a", "b" ]; console.log( array_.toString() ); // "1,a,b" と表示される。
文字列から数値を
parseInt() や parseFloat() によって文字列中の数値のみを取り出すことができます。
console.log( parseInt( "20 years old", 10 ); // 20 が整数として取り出される。 console.log( parseFloat( "36.5 cm" ); // 36.5 が浮動小数点として取り出される。
ファイル I/O
基本的にブラウザからネットワークを通して直接ファイルにアクセスはできません。ローカルファイルにはアクセスできます。
詳しくはFileReader
を参照してください。