JavaScriptは、当初ウェブページの要素と対話するために設計されたプログラミング言語です。ウェブブラウザ内では、JavaScriptは主に3つの部分から構成されています。
- ECMAScriptはコア機能を提供します。
- ドキュメントオブジェクトモデル(DOM)は、ウェブページ上の要素と対話するためのインターフェースを提供します。
- ブラウザオブジェクトモデル(BOM)は、ウェブブラウザと対話するためのブラウザAPIを提供します。
JavaScriptを使用すると、ウェブページにインタラクティブ性を持たせることができます。通常、JavaScriptはHTMLとCSSと共に使用して、フォームの検証、インタラクティブマップの作成、アニメーションチャートの表示など、ウェブページの機能を強化します。
ウェブページが読み込まれると、つまりHTMLとCSSがダウンロードされた後、ウェブブラウザのJavaScriptエンジンがJavaScriptコードを実行します。その後、JavaScriptコードはHTMLとCSSを変更して、ユーザーインターフェースを動的に更新します。
JavaScriptエンジンは、JavaScriptコードを解釈および実行するウェブブラウザのコンポーネントです。コードを解析するパーサー、コードを機械語に変換するコンパイラ、コンパイルされたコードを実行するインタープリタが含まれています。
注目すべきJavaScriptエンジンには、ChromeのV8、FirefoxのSpiderMonkey、SafariのJavaScriptCoreなどがあります。
当初、JavaScriptエンジンはインタープリタとして実装されていました。しかし、最新のJavaScriptエンジンは、パフォーマンス向上のため、JavaScriptコードをバイトコードにコンパイルするJust-In-Time(JIT)コンパイラとして実装されることが一般的です。
クライアントサイドとサーバーサイドのJavaScript
JavaScriptがウェブページで使用される場合、ウェブブラウザで実行され、クライアントサイド言語として機能します。
JavaScriptは、ウェブブラウザとサーバーの両方で実行できます。一般的なJavaScriptサーバーサイド環境はNode.jsです。クライアントサイドのJavaScriptとは異なり、サーバーサイドのJavaScriptはサーバー上で実行され、データベース、ファイルシステムなどへのアクセスを許可します。
JavaScriptの歴史
1995年、JavaScriptはNetscapeの開発者であるBrendan Eichによって開発されました。当初はMochaと呼ばれていましたが、後にLiveScriptと改名されました。
Netscapeは、Javaの人気に便乗するためにLiveScriptをJavaScriptに改名することを決定しました。この決定は、Netscape Navigator 2ウェブブラウザのリリース直前に下され、JavaScriptバージョン1.0が導入されました。
NetscapeはNetscape Navigator 3でJavaScript 1.1をリリースしました。一方、MicrosoftはNetscapeの競合製品として、Internet Explorer 3(IE 3)と呼ばれるウェブブラウザを導入しました。しかし、IEにはJScriptと呼ばれる独自のJavaScript実装が搭載されていました。Microsoftは、Netscapeとの潜在的なライセンス上の衝突を避けるために、JScriptという名前を使用しました。
したがって、市場には2つの異なるバージョンのJavaScriptが存在していました。
- Netscape NavigatorでのJavaScript
- Internet ExplorerでのJScript
この時点では、JavaScriptには標準化された構文と機能が不足していたため、コミュニティは言語の標準化を提唱しました。
1997年、JavaScript 1.1は欧州コンピュータ製造業者協会(ECMA)に提案されました。技術委員会第39号(TC39)は、言語を標準化する任務を割り当てられ、汎用、クロスプラットフォーム、ベンダーニュートラルなスクリプト言語に変換することを目的としました。
TC39はECMA-262を考案し、ECMAScript(しばしばエクマースクリプトと発音される)と呼ばれる新しいスクリプト言語を定義するための標準を確立しました。
その後、国際標準化機構と国際電気標準会議(ISO/IEC)はECMAScript(ISO/IEC-16262)を採用しました。
JavaScriptの概要
次のセクションでは、JavaScriptコードの優れた紹介を提供しています。まだ慣れていない場合は、問題ありません。今後のチュートリアルで学ぶことができます。
JavaScriptで変数を定義するには、var
キーワードを使用します。例:
var x = 10;
var y = 20;
Code language: JavaScript (javascript)
ES6では、let
キーワードを使用して変数を宣言する新しい方法が追加されました。
let x = 10;
let y = 20;
Code language: JavaScript (javascript)
var
とlet
の違いがあります。変数を宣言するにはlet
キーワードを使用することをお勧めします。
関数を宣言するには、function
キーワードを使用します。次の例では、2つの引数の合計を計算する関数を定義しています。
function add( a, b ) {
return a + b;
}
Code language: JavaScript (javascript)
add()
関数を呼び出すには、次の構文を使用します。
let result = add(x, y);
Code language: JavaScript (javascript)
結果をウェブブラウザまたはターミナル(Node.jsの場合)のコンソールウィンドウに出力するには、console.log()
関数を使用します。
console.log(result);
Code language: JavaScript (javascript)
これで、出力に30
が表示されます。
JavaScriptは、if-else
やswitch
ステートメントなどの条件ステートメントを提供します。例:
let a = 20,
b = 30;
function divide(a, b) {
if(b == 0) {
throw 'Division by zero';
}
return a / b;
}
Code language: JavaScript (javascript)
divide()
関数では、分母(b)がゼロかどうかを確認します。はいの場合は、例外をスローします。そうでない場合は、a / bの結果を返します。
配列を宣言するには、次の構文を使用します。
let items = [];
Code language: JavaScript (javascript)
初期要素を持つ配列を宣言するには、角括弧内にこれらの要素を指定します。
let items = [1, 2, 3];
Code language: JavaScript (javascript)
items
配列の要素数をそのlength
プロパティで確認できます。
console.log(items.length); // 3
Code language: JavaScript (javascript)
items
配列の要素を反復処理するには、次のようにfor
ループステートメントを使用します。
for(let i = 0; i < items.length; i++) {
console.log(items[i]);
}
Code language: JavaScript (javascript)
for(let item of items) {
console.log(item);
}
Code language: JavaScript (javascript)
JavaScriptは進化し続ける言語であり、今後のチュートリアルで学ぶ豊富な機能があります。
このチュートリアルでは、JavaScriptの概要とJavaScript言語の概要を学習しました。