JavaScript

JavaScript

JavaScript ソースコードのスクリーンショット
パラダイム	マルチパラダイム:イベント駆動型、関数型、命令型、手続き型、オブジェクト指向
デザイン：	最初はNetscapeのBrendan Eich氏、他の人たちもECMAScript標準に貢献した。
初登場	1995年12月4日; 28年前[1] (1995-12-04)
安定リリース	ECMAScript 2024 [2]  / 2024年6月; 4か月前 (June 2024)
プレビューリリース	ECMAScript 2025 [3]  / 2024年3月27日; 6か月前 (27 March 2024)
タイピングの規律	ダイナミック、弱い、アヒル
ファイル名拡張子	.js .cjs .mjs[4]
Webサイト	ecma-international.org/publications-and-standards/standards/ecma-262/
主な実装
V8、JavaScriptCore、SpiderMonkey、Chakra
影響を受けた
Java、[5] [6] Scheme、[6] Self、[7] AWK、[8] HyperTalk [9]
影響を受けた
ActionScript、ArkTS、AssemblyScript、CoffeeScript、Dart、Haxe、JS++、Opa、TypeScript
Wikibooks の JavaScript

JavaScript（/ ˈ dʒ ɑː v ə s k r ɪ p t /）は、しばしばJSと略され、HTMLやCSSと並んでWebのコアテクノロジーであるプログラミング言語です。ウェブサイトの99％は、ウェブページの動作のためにクライアント側でJavaScriptを使用しています。^[10]

Web ブラウザには、クライアントコードを実行する専用のJavaScript エンジンがあります。これらのエンジンは、一部のサーバーやさまざまなアプリでも利用されています。ブラウザ以外での使用に最もよく使用されるランタイム システムはNode.jsです。

JavaScriptは、 ECMAScript標準に準拠した、高水準でジャストインタイムコンパイル言語です。^[11]動的型付け、プロトタイプベースのオブジェクト指向、第一級関数を備えています。また、マルチパラダイムで、イベント駆動型、関数型、命令型プログラミングスタイルをサポートしています。テキスト、日付、正規表現、標準データ構造、ドキュメントオブジェクトモデル（DOM） を操作するためのアプリケーションプログラミングインターフェイス（API）を備えています。

ECMAScript 標準には、ネットワーク、ストレージ、グラフィックス機能などの入出力(I/O) は含まれていません。実際には、Web ブラウザーまたはその他のランタイム システムが I/O 用の JavaScript API を提供します。

Javaと JavaScript は名前、構文、それぞれの標準ライブラリが似ていますが、2 つの言語は別個のものであり、設計は大きく異なります。

グラフィカルユーザーインターフェイスを備えた最初の人気ウェブブラウザであるMosaicは、1993年にリリースされました。技術者以外の人でもアクセスでき、初期のワールドワイドウェブの急速な成長に大きな役割を果たしました。^[12]その後、Mosaicの主任開発者はNetscape社を設立し、1994年にさらに洗練されたブラウザであるNetscape Navigatorをリリースしました。これはすぐに最も使用されるブラウザになりました。^[13]

ウェブの形成期には、ウェブページは静的なものしかなく、ブラウザにページが読み込まれた後の動的な動作はできませんでした。ウェブ開発が盛んだった時代には、この制限を取り除きたいという要望があり、1995 年に Netscape はNavigator にプログラミング言語を追加することを決定しました。Netscape はこれを実現するために 2 つの方法を採用しました。Sun Microsystemsと協力し、 Java言語を組み込み、 Brendan Eich を雇ってScheme言語を組み込みました。^[6]

その目標は「一般大衆のための言語」^[14] 、 「プログラマー以外の人が動的でインタラクティブなWebサイトを作成できるようにする」ことだった。^{[15] Netscapeの経営陣はすぐに、Schemeや他の既存の}スクリプト言語に似ていないJavaに似た構文を持つ新しい言語をアイヒが考案するのが最善の選択肢であると判断した。^{[5] [6]}新しい言語とそのインタープリタ実装は、1995年9月にNavigatorベータ版の一部として最初に出荷されたときはLiveScriptと呼ばれていたが、12月の正式リリースではJavaScriptに名前が変更された。^{[6] [1] [16] [17]}

JavaScriptという名前を選んだことで、それがJavaと直接関係しているという誤解が生じ、混乱を招いた。当時はドットコムブームが始まっており、Javaは人気の新しい言語だったため、アイヒはJavaScriptという名前はNetscapeのマーケティング戦略だと考えた。^[14]

マイクロソフトは1995年にInternet Explorerを発表し、Netscapeとのブラウザ戦争を引き起こした。JavaScriptに関しては、マイクロソフトはJScriptと呼ばれる独自のインタープリターを作成した。^[18]

マイクロソフトは1996年に初めてJScriptをリリースし、同時にCSSとHTMLの拡張機能もサポートしました。これらの実装はいずれも、 Netscape Navigatorの対応するものとは著しく異なっていました。^{[19] [20]}これらの違いにより、開発者が両方のブラウザでWebサイトをうまく動作させることが困難になり、「Netscapeで最適」および「Internet Explorerで最適」というロゴが数年間広く使用されることになりました。^{[19] [21]}

1996 年 11 月、Netscape は、すべてのブラウザ ベンダーが準拠できる標準仕様の出発点として、JavaScript をEcma Internationalに提出しました。これにより、1997 年 6 月に最初のECMAScript言語仕様が正式にリリースされました。

標準化プロセスは数年間継続され、1998年6月にECMAScript 2、1999年12月にECMAScript 3がリリースされました。ECMAScript 4の作業は2000年に始まりました。^[18]

しかし、言語を完全に標準化する努力は、ブラウザ市場でマイクロソフトがますます支配的な地位を獲得したことで損なわれました。2000年代初頭までに、Internet Explorerの市場シェアは95％に達しました。^{[22]これは、} JScriptがWeb上の クライアント側スクリプトの事実上の標準になったことを意味します。

Microsoft は当初、標準化プロセスに参加し、JScript 言語でいくつかの提案を実装しましたが、最終的には ECMA の作業への協力をやめました。そのため、ECMAScript 4 は廃止されました。

2000年代初頭のInternet Explorerの優位性の間、クライアントサイドスクリプトは停滞していました。2004年にNetscapeの後継者であるMozillaがFirefoxブラウザをリリースすると、状況は変わり始めました。Firefoxは多くの人に好評を博し、Internet Explorerから大きな市場シェアを奪いました。^[23]

2005 年、Mozilla は ECMA International に加盟し、ECMAScript for XML (E4X) 標準の作業が開始されました。これにより、Mozilla は、 ECMAScript 4 ドラフトに基づいた ActionScript 3 言語で E4X を実装していたMacromedia (後にAdob​​e Systemsに買収) と共同で作業することになりました。目標は、ActionScript 3 を新しい ECMAScript 4 として標準化することでした。この目的のため、Adobe Systems はTamarin実装をオープンソースプロジェクトとしてリリースしました。しかし、Tamarin と ActionScript 3 は、確立されたクライアント側スクリプトとは大きく異なっており、Microsoftの協力がなければ、ECMAScript 4 は実現しませんでした。

一方、ECMA の活動とは関係のないオープンソース コミュニティでは、非常に重要な開発が行われていました。2005 年にJesse James Garrett がホワイト ペーパーを公開し、その中でAjaxという用語を作り出し、JavaScript を基盤とする一連のテクノロジについて説明しました。このテクノロジは、ページ全体を再読み込みせずにバックグラウンドでデータを読み込むことができるWeb アプリケーションを作成するためのものです。これが、オープンソース ライブラリとそれを中心に形成されたコミュニティが先頭に立って JavaScript のルネッサンス期を巻き起こしました。jQuery、Prototype、Dojo Toolkit、MooTools など、多くの新しいライブラリが作成されました。

Googleは2008年に競合他社よりも高速なV8 JavaScriptエンジンを搭載したChromeブラウザを発表しました。 ^{[24] [25]}重要な革新はジャストインタイムコンパイル（JIT）でした。^[26]そのため、他のブラウザベンダーはJITのためにエンジンを全面的に改良する必要がありました。^[27]

2008 年 7 月、これらのさまざまな関係者がオスロで会議に集まりました。これにより、2009 年初頭にすべての関連作業を統合して言語を前進させることで最終的に合意に達しました。その結果、2009 年 12 月に ECMAScript 5 標準がリリースされました。

この言語に関する野心的な作業は数年にわたって続けられ、 2015年にECMAScript 6が公開され、膨大な追加機能と改良点が正式にまとめられました。^[28]

2009年にライアン・ダールがNode.jsを開発したことで、ウェブブラウザ以外でのJavaScriptの使用が大幅に増加しました。NodeはV8エンジン、イベントループ、I/O APIを組み合わせて、スタンドアロンのJavaScriptランタイムシステムを提供しています。^{[29] [30]} 2018年現在、Nodeは数百万人の開発者に使用されており、^[31] npmは世界で最も多くのモジュールを持つパッケージマネージャです。 ^[32]

ECMAScriptのドラフト仕様は現在GitHubで公開されており、^[33]定期的に毎年スナップショットが公開されてエディションが作成されています。^[33]言語の潜在的な改訂は、包括的な提案プロセスを通じて審査されます。^{[34] [35]}現在、開発者はエディション番号の代わりに、今後の機能のステータスを個別に確認しています。^[33]

現在のJavaScriptエコシステムには、多くのライブラリやフレームワーク、確立されたプログラミング手法、Webブラウザ以外でのJavaScriptの大幅な使用があります。^[17]さらに、シングルページアプリケーションやその他のJavaScriptを多用するWebサイトの台頭により、開発プロセスを支援するためにいくつかのトランスパイラが作成されました。^[36]

「JavaScript」は米国オラクル社の商標です。 ^{[37] [38]}この商標はもともと1997年5月6日にサン・マイクロシステムズ社に付与され、2009年にオラクル社がサンを買収した際にオラクル社に譲渡されました。^[39]

JavaScriptはWebのクライアント側 スクリプト言語として最も多く使用されており、 Webサイトの99%がこの目的で使用しています。^{[10]スクリプトはHTML文書に埋め込まれたり、} HTML文書から取り込まれたりして、 DOMと対話します。

すべての主要なWeb ブラウザには、ユーザーのデバイス上で コードを実行するJavaScript エンジンが組み込まれています。

• AjaxまたはWebSocketを介して、ページを再読み込みせずに新しいWeb ページコンテンツを読み込みます。たとえば、ソーシャル メディアのユーザーは、現在のページを離れることなくメッセージを送受信できます。
• オブジェクトのフェードイン、フェードアウト、サイズ変更、移動などの Web ページのアニメーション。
• ブラウザゲームをプレイしています。
• ストリーミング メディアの再生を制御します。
• ポップアップ広告や警告ボックスを生成します。
• データがWeb サーバーに送信される前に、 Web フォームの入力値を検証します。
• ユーザーの行動に関するデータを記録し、それをサーバーに送信します。Web サイトの所有者は、このデータを分析、広告の追跡、パーソナライゼーションに使用できます。
• ユーザーを別のページにリダイレクトします。
• ストレージまたはIndexedDB標準を介して、ユーザーのデバイスにデータを保存および取得します。

ウェブサイトの80％以上が、クライアント側スクリプトの一部としてサードパーティのJavaScriptライブラリまたはウェブフレームワークを使用しています。 ^[40]

jQueryは圧倒的に最も多く使用されています。^[40]その他の注目すべきものとしては、Angular、Bootstrap、Lodash、Modernizr、React、Underscore、Vueなどがあります。^[40] jQueryとBootstrapなど、複数のオプションを組み合わせて使用​​​​することもできます。^[41]

しかし、「Vanilla JS」という用語は、ライブラリやフレームワークを一切使用せず、代わりに標準のJavaScript機能に完全に依存するWebサイトを指すために造られました。^[42]

JavaScript の使用は、Web ブラウザーのルーツを超えて拡大しています。JavaScriptエンジンは現在、サーバー側のWeb サイトの展開と非ブラウザーアプリケーションの両方で、さまざまな他のソフトウェア システムに組み込まれています。

サーバーサイドJavaScriptの使用を促進する最初の試みは、Netscape Enterprise ServerとMicrosoftのInternet Information Servicesであったが、^{[43] [44]}それらは小さなニッチであった。^{[45]サーバーサイドの使用は、} Node.jsやその他のアプローチの作成により、2000年代後半に最終的に増加し始めた。^[45]

Electron、Cordova、React Nativeなどのアプリケーションフレームワークは、JavaScriptで実装された動作を持つ多くのアプリケーションを作成するために使用されてきました。その他の非ブラウザアプリケーションには、PDFドキュメントのスクリプトをサポートするAdobe Acrobat ^[46]やJavaScriptで書かれたGNOME Shell拡張機能などがあります。^[47]

JavaScriptは、通常Node.jsを活用して、いくつかの組み込みシステムで使用されています。^{[48] [49] [50]}

スクリプトが広範な環境と対話できるようにするには、JavaScript エンジンをランタイム システム( Web ブラウザーやスタンドアロン システムなど) 内に埋め込む必要があります。ランタイム システムには、ネットワーク、ストレージ、グラフィックスなどの入出力操作に必要な API が含まれており、スクリプトをインポートする機能も提供されます。

JavaScript はシングルスレッド言語です。ランタイムはキューからのメッセージを1 つずつ処理し、新しいメッセージごとに関連付けられた関数を呼び出して、関数の引数とローカル変数を含むコール スタックフレームを作成します。コール スタックは関数の必要に応じて縮小または拡大します。関数の完了時にコール スタックが空になると、JavaScript はキュー内の次のメッセージに進みます。これはイベント ループと呼ばれ、各メッセージが完全に処理されてから次のメッセージが検討されるため、「完了まで実行する」と説明されています。ただし、この言語の並行性モデルでは、イベント ループは非ブロッキングであると説明されています。つまり、プログラム I/O はイベントとコールバック関数を使用して実行されます。つまり、たとえば、JavaScript はデータベース クエリが情報を返すのを待っている間にマウス クリックを処理できます。^[55]

注目すべきスタンドアロン ランタイムは、 Node.js、Deno、Bunです。

以下の機能は、明示的に指定されていない限り、すべての準拠 ECMAScript 実装に共通です。

JavaScript はCの構造化プログラミング構文の多くをサポートしています(例:文、ループ、文、ループなど)。 部分的な例外が 1 つあり、スコープです。元々 JavaScript には を使用した関数スコープしかありませんでした。ブロックスコープはECMAScript 2015 でキーワードとによって追加されました。C と同様に、JavaScript では式と文を区別します。C との構文上の違いの 1 つは自動セミコロン挿入で、これによりセミコロン (文の終了文字) を省略できます。^[56]ifwhileswitchdo whilevarletconst

JavaScriptは弱い型付けであり、使用される操作に応じて特定の型が暗黙的にキャストされることを意味します。^[57]

• 二項+演算子は、両方のオペランドが数値でない限り、両方のオペランドを文字列に変換します。これは、加算演算子が連結演算子としても機能するためです。
• 二項-演算子は常に両方のオペランドを数値に変換します
• 単項演算子（+、-）は両方とも常にオペランドを数値にキャストします。

値は次のように文字列に変換されます。^[57]

• 文字列はそのまま残されます
• 数値は文字列表現に変換されます
• 配列の要素は文字列に変換され、その後カンマ（,）で結合されます。
• 他のオブジェクトは、オブジェクトのコンストラクタの名前で[object Object]ある文字列に変換されます。Object

値は、文字列にキャストしてから文字列を数値にキャストすることで数値にキャストされます。これらのプロセスは、それぞれ文字列キャストと数値キャストのプロトタイプで関数toStringとvalueOf関数を定義することで変更できます。

JavaScriptは、これらの変換の実装方法について、ルールの複雑さが矛盾と誤解される可能性があるとして批判を受けています。^{[58] [57]}たとえば、文字列に数値を追加する場合、連結を実行する前に数値を文字列に変換しますが、文字列から数値を減算する場合は、減算を実行する前に文字列を数値に変換します。

よく言及されるのは、{} + []結果として (数値) になることです0。これは誤解を招きます。 は{}空のオブジェクトではなく空のコードブロックとして解釈され、空の配列は残りの単項演算子によって数値にキャストされます+。式が括弧で囲まれている場合({} + [])、中括弧は空のオブジェクトとして解釈され、式の結果は"[object Object]"予想どおりになります。^[57]

JavaScriptは他のほとんどのスクリプト言語と同様に動的に型付けされます。型は式ではなく値に関連付けられます。たとえば、最初は数値にバインドされていた変数は、文字列に再割り当てされることがあります。^{[59] JavaScriptは、}ダックタイピングを含む、オブジェクトの型をテストするさまざまな方法をサポートしています。^[60]

JavaScript には、eval実行時に文字列として提供されたステートメントを実行できる関数が含まれています。

JavaScript におけるプロトタイプ継承は、Douglas Crockfordによって次のように説明されています。

プロトタイプオブジェクトを作成し、新しいインスタンスを作成します。JavaScript ではオブジェクトは変更可能なので、新しいインスタンスを拡張して、新しいフィールドとメソッドを追加できます。これらは、さらに新しいオブジェクトのプロトタイプとして機能します。多くの類似したオブジェクトを作成するためにクラスは必要ありません...オブジェクトはオブジェクトを継承します。これ以上にオブジェクト指向的なことがあるでしょうか? ^[61]

JavaScript では、オブジェクトは連想配列で、プロトタイプが追加されています (下記参照)。各キーはオブジェクトプロパティの名前を提供し、そのような名前を指定する構文にはドット表記 ( obj.x = 10) と角括弧表記 ( obj['x'] = 10) の 2 つの方法があります。プロパティは、実行時に追加、再バインド、または削除できます。オブジェクトのほとんどのプロパティ(およびオブジェクトのプロトタイプ継承チェーンに属するすべてのプロパティ) は、ループを使用して列挙できますfor...in。

JavaScriptは、他の多くのオブジェクト指向言語が継承にクラスを使用するのに対し、プロトタイプを使用します。^[62] JavaScriptでは、プロトタイプを使用して多くのクラスベースの機能をシミュレートできます。^[63]

関数は、通常の役割に加えて、オブジェクト コンストラクターとしても機能します。関数呼び出しの前にnewを付けると、プロトタイプのインスタンスが作成され、コンストラクターからプロパティとメソッド (Objectプロトタイプのプロパティを含む) が継承されます。^[64] ECMAScript 5 ではObject.createメソッドが提供されており、プロトタイプから自動的に継承することなく、明示的にインスタンスを作成できますObject(古い環境では、プロトタイプを に割り当てることができますnull)。^[65]コンストラクターのprototypeプロパティによって、新しいオブジェクトの内部プロトタイプに使用されるオブジェクトが決まります。コンストラクターとして使用される関数のプロトタイプを変更することで、新しいメソッドを追加できます。 や などの JavaScript の組み込みコンストラクターにArrayもObject、変更可能なプロトタイプがあります。Objectプロトタイプを変更することは可能ですが、JavaScript のほとんどのオブジェクトはプロトタイプからメソッドとプロパティを継承しObject、プロトタイプが変更されることを想定できない可能性があるため、一般的には悪い習慣と見なされています。^[66]

多くのオブジェクト指向言語とは異なり、JavaScript では関数定義とメソッド定義の区別はありません。むしろ、区別は関数呼び出し時に行われます。関数がオブジェクトのメソッドとして呼び出されると、関数のローカルthisキーワードはその呼び出しの間そのオブジェクトにバインドされます。

JavaScript関数は第一級関数であり、関数はオブジェクトとみなされます。^[67]そのため、関数にはやなどのプロパティやメソッドがある場合があります.call()。.bind()[ ^68]

ネストされた関数は、別の関数内で定義された関数です。外側の関数が呼び出されるたびに作成されます。

さらに、各ネストされた関数はレキシカルクロージャを形成します。つまり、外側の関数の実行が終了した後でも、外側の関数のレキシカルスコープ（定数、ローカル変数、引数値を含む）は、各内側の関数オブジェクトの内部状態の一部になります。^[69]

JavaScript は匿名関数もサポートしています。

JavaScript は暗黙的および明示的な委任をサポートします。

JavaScriptは、 Traits ^{[71] [72]}やMixin ^{[73]のような}Role ^[70]パターンのさまざまな関数ベースの実装をネイティブにサポートしています。このような関数は、その本体内のキーワードにバインドされた少なくとも1つのメソッドによって追加の動作を定義します。その後、プロトタイプチェーンを介して共有されない追加の動作を特徴とする必要があるオブジェクトを介して、またはオブジェクトにRoleを明示的に委任する必要があります。 thisfunctioncallapply

明示的な関数ベースの委任は JavaScript の合成をカバーしますが、暗黙的な委任は、たとえば、オブジェクトに関連しているが直接所有されていないメソッドを見つけるためにプロトタイプ チェーンをたどるたびにすでに発生します。メソッドが見つかると、このオブジェクトのコンテキスト内で呼び出されます。したがって、 JavaScript の継承は、コンストラクター関数のプロトタイプ プロパティにバインドされた委任の自動化によってカバーされます。

JavaScript はゼロインデックス言語です。

関数には、不定数のパラメータを渡すことができます。関数は、仮パラメータとローカルオブジェクトを通じて、それらのパラメータにアクセスできますarguments。メソッドを使用して、可変長関数bindを作成することもできます。

多くのスクリプト言語と同様に、配列とオブジェクト (他の言語では連想配列) はそれぞれ簡潔なショートカット構文で作成できます。実際、これらのリテラルがJSONデータ形式の基礎を形成します。

Perlと同様に、JavaScriptも正規表現をサポートしており、組み込みの文字列関数よりも洗練された簡潔で強力なテキスト操作構文を提供します。^[74]

JavaScript は、非同期操作を処理するためのPromiseとAsync/await をサポートしています。^{[引用が必要]}

組み込みの Promise オブジェクトは、Promise を処理し、ハンドラーを非同期アクションの最終結果に関連付ける機能を提供します。最近、JavaScript 仕様にコンビネータ メソッドが導入されました。これにより、開発者は複数の JavaScript Promise を組み合わせて、さまざまなシナリオに基づいて操作を行うことができます。導入されたメソッドは、Promise.race、Promise.all、Promise.allSettled、および Promise.any です。

async/await を使用すると、非同期の非ブロッキング関数を通常の同期関数と同様の方法で構成できます。非同期の非ブロッキング コードは、従来の同期のブロッキング コードと同様に構造化され、最小限のオーバーヘッドで記述できます。

歴史的に、一部のJavaScript エンジンは次のような非標準機能をサポートしていました。

• 条件節catch（Java など）
• 配列の内包表記とジェネレータ式（Python のような）
• 簡潔な関数式（function(args) exprこの実験的な構文は矢印関数より前からあった）
• ECMAScript for XML (E4X) は、ECMAScriptにネイティブXMLサポートを追加する拡張機能です（Firefoxバージョン21以降ではサポートされていません^[75]）

JavaScriptの変数varは、^[76] let^[77]またはconst^[78]キーワードを使用して定義できます。キーワードなしで定義された変数はグローバルスコープで定義されます。

// `x` という名前の関数スコープの変数を宣言し、
それに暗黙的に特別な値 `undefined` を割り当てます。値のない変数は自動的に
undefinedに設定されます。// 
var は一般に悪い習慣と考えられており、let と const が通常は好まれます。var 
x ; 


// 変数は次のように手動で` undefined` に設定できます。let x2 = undefined ;   

// `y` という名前のブロックスコープの変数を宣言し、それを暗黙的に
`undefined` に設定します。`let` キーワードは ECMAScript 2015 で導入されました
。let y ; 

// ブロックスコープの再割り当て不可能な変数 `z` を宣言し、それを
文字列リテラルに設定します。`const` キーワードも ECMAScript 2015 で導入され
、明示的に割り当てる必要があります。

// キーワード `const` は定数を意味するため、
値が `constant` であるため、変数を再割り当てすることはできません。const 
z = "この値は再割り当てできません! " ;   

// グローバルスコープの変数を宣言し、3 を割り当てます。これは一般的に
悪い習慣と考えられており、厳密モードがオンの場合は機能しません
。t = 3 ;  


// `myNumber` という名前の変数を宣言し、数値リテラル(値`2`) を割り当てます。let 
myNumber = 2 ;   

// `myNumber` を再割り当てし、文字列リテラル (値 `"foo"`) に設定します。// 
JavaScript は動的型付け言語なので、これは有効です。myNumber 
= " foo" ;  

上記の例のコメントはすべて 2 つのスラッシュで始まっていることに注意してください。

JavaScript には組み込みの入出力機能はなく、ランタイム環境によって提供されます。ECMAScript 仕様書 5.1 版では、「この仕様では外部データの入力や計算結果の出力については規定されていません」と述べられています。^[79]consoleただし、ほとんどのランタイム環境には、出力を印刷するために使用できるオブジェクト があります。 ^{[80]以下は、コンソール オブジェクトを使用したランタイム環境における JavaScript の最小限の}「Hello, World!」プログラムです。

コンソール.log ( "Hello, World!" ) ;

HTML ドキュメントでは、出力には次のようなプログラムが必要です。

// テキスト ノードは、"write" メソッドを使用して作成できます。
// ドキュメントが完全に読み込まれている場合はドキュメントを上書きする可能性があるため、これは好ましくありません。
document . write ( 'foo' );

// 要素も作成できます。まず、DOM 内に要素を作成する必要があります。const 
myElem = document . createElement ( ' span' );   

// クラスや ID などの属性も設定でき
ますmyElem.classList.add ( ' foo ' ) ; myElem.id = ' bar ' ;
  

// これを設定すると、タグは次のようになります: `<span class="foo" id="bar" data-attr="baz"></span>` 
myElem . setAttribute ( 'data-attr' , 'baz' ); // これは `myElem.dataset.attr = 'baz'` と書くこともできます  


//最後に、 HTMLドキュメントの<body>に子要素として追加します。body.appendChild ( myElem );

// 要素は、1 つの要素の場合は querySelector で、複数の要素の場合は querySelectorAll で命令的に取得できます。複数の要素は forEach でループできます
。document . querySelector ( '.class' ); // "class" クラスの最初の要素を選択します。document . querySelector ( '#id' ); // "id" の `id` を持つ最初の要素を選択します。 document . querySelector ( '[data-other]' ); // "data-other" 属性を持つ最初の要素を選択します。document . querySelectorAll ( '.multiple' ); // "multiple" クラスを持つすべての要素の配列のような NodeList を返します。 
 
 
 

自然数の階乗を計算する単純な再帰関数:

function factorial ( n ) { // 引数の正当性をチェックします。階乗は正の整数に対して定義されます。if ( isNaN ( n )) { console . error ( "数値以外の引数は許可されていません。" ); return NaN ; // 特別な値: Not a Number } if ( n === 0 ) return 1 ; // 0! = 1 if ( n < 0 ) return undefined ; // 負の数の階乗は定義されていません。if ( n % 1 ) { console . warn ( ` ${ n }は最も近い整数に丸められます。整数以外の場合は、代わりにガンマ関数の使用を検討してください。` ); n = Math . round ( n ); } // 上記のチェックは再帰で繰り返す必要がないため、実際の再帰部分を以下で別途定義します。  
    
      
        
          
    
       
          
       
          
        
        
          
    
    

    // 次の行は階乗を再帰的に計算する関数式です。ES6 で導入された矢印構文を使用します。const 
recursivelyCompute = a => a > 1 ? a * recursivelyCompute ( a - 1 ) : 1 ; // 三項演算子 `?` の使用に注意してください。return recursivelyCompute ( n ) ; }                    
     


階乗( 3 ); // 6 を返す 

匿名関数（またはラムダ）：

const counter = function () { let count = 0 ; return function () { return ++ count ; } };    
       
      
         
    


const x = counter (); x (); // 1 を返すx (); // 2 を返すx (); // 3 を返す   
 
 
 

この例は、JavaScript では関数クロージャが非ローカル変数を参照によってキャプチャすることを示しています。

アロー関数は、第 6 版 ECMAScript 2015で初めて導入されました。JavaScript で関数を記述するための構文を短縮します。アロー関数は匿名であるため、括弧で囲んですぐに実行しない限り、作成後に呼び出すには、アロー関数を参照するための変数が必要です。

矢印関数の例:

// 矢印関数を使用すると、`function` キーワードを省略できます。//
ここで、`long_example` は匿名関数の値を指します。const 
long_example = ( input1 , input2 ) = > { console . log ( "Hello, World!" ); const output = input1 + input2 ;      
    
         

    出力を返します。}; 


// 中括弧がない場合、矢印関数は単に式を返します
// したがって、ここでは (input1 + input2) です
const short_example = ( input1 , input2 ) => input1 + input2 ;        

long_example ( 2 , 3 ); // "Hello, World!" を出力し、5 を返しますshort_example ( 2 , 5 ); // 7 を返します  
   

// 矢印関数にパラメータが 1 つしかない場合は、括弧を削除できます。const 
no_parentheses = input = > input + 2 ;       

no_parentheses ( 3 ); // 5 を返す 

// 矢印関数は、他の関数定義と同様に、作成時と同じステートメントで実行できます。
// これは、グローバル スコープを埋めないようにライブラリを作成する場合や、クロージャの場合に役立ちます。
let three = (( a , b ) => a + b ) ( 1 , 2 );          

const generate_multiplier_function = a => ( b => isNaN ( b ) || ! b ? a : a *= b ); const five_multiples = generate_multiplier_function ( 5 ); // 指定された引数は式の「シード」となり、a によって保持されます。five_multiples ( 1 ); // 5 を返しますfive_multiples ( 3 ); // 15 を返しますfive_multiples ( 4 ); // 60 を返します             
    
 
 
 

JavaScript では、オブジェクトはクラスのインスタンスとして作成できます。

オブジェクトクラスの例:

クラスボール{  

   コンストラクター(半径) { this.radius = radius ; this.area = Math.PI * ( radius ** 2 ) ; }​​​​ 
        
              
   

   // クラス (およびオブジェクト) には、メソッドと呼ばれる関数を含めることができます。
show () { console . log ( this . radius ); } };    
      
   


const myBall = new Ball ( 5 ); // 半径 5 のボールオブジェクトの新しいインスタンスを作成します。myBall . radius ++ ; // オブジェクトのプロパティは通常、外部から変更できます。myBall . show (); // 継承された "show" 関数を使用すると "6" がログに記録されます。     
 
   

JavaScript では、関数から オブジェクトを直接インスタンス化できます。

オブジェクトの機能例:

関数ボール(半径) {  

   const area = Math.PI * (半径** 2 ) ; const obj = {半径、面積} ;         
         

   // オブジェクトは変更可能であり、関数をプロパティとして追加できます。
obj . show = () => console . log ( obj . radius ); return obj ; };       
    


const myBall = Ball ( 5 ); // 半径 5 の新しいボール オブジェクトを作成します。「new」キーワードは必要ありません。myBall . radius ++ ; // インスタンス プロパティを変更できます。myBall . show (); // 「show」関数を使用すると、新しいインスタンス値である「6」がログに記録されます。    
 
   

可変長関数のデモンストレーション（argumentsは特殊変数）: ^[81]

関数sum () { let x = 0 ;  
       

    for ( let i = 0 ; i < arguments . length ; ++ i ) x += arguments [ i ];        
          

    xを返す; } 


sum ( 1 , 2 ); // 3 を返すsum ( 1 , 2 , 3 ); // 6 を返す  
   

// ES6 以降では、rest 演算子を使用します。
function sum (... args ) { return args . Reduce (( a , b ) => a + b ); }  
          


sum ( 1 , 2 ); // 3 を返すsum ( 1 , 2 , 3 ); // 6 を返す  
   

即時に呼び出される関数式は、クロージャを作成するためによく使用されます。クロージャを使用すると、名前空間内のプロパティとメソッドを収集し、その一部をプライベートにすることができます。

let counter = ( function () { let i = 0 ; // プライベートプロパティ    
        

    return { // パブリックメソッドget : function () { alert ( i ); }, set : function ( value ) { i = value ; }, increment : function () { alert ( ++ i ); } }; })(); // モジュール    
          
            
        
          
              
        
          
            
        
    
 

counter.get (); // 0 を返すcounter.set ( 6 ) ; counter.increment ( ) ; // 7 を返すcounter.increment ( ) ; // 8を返す 

 
 

ジェネレータオブジェクト（ジェネレータ関数の形式）は、内部コンテキスト（状態性）を維持しながら、呼び出し、終了、再入力できる関数を提供します。^[82]

関数* rawCounter () { yield 1 ; yield 2 ; }  
     
     


function * dynamicCounter () { let count = 0 ; while ( true ) { // ほとんどの場合、while true ループの利用は推奨されません。yield ++ count ; } }  
       
      
        
         
    


// インスタンス
const counter1 = rawCounter (); const counter2 = dynamicCounter ();   
   

// 実装
counter1 . next (); // {値: 1, done: false} counter1 . next (); // {値: 2, done: false} counter1 . next (); // {値: undefined, done: true} 
 
 

counter2 . next (); // {値: 1, done: false} counter2 . next (); // {値: 2, done: false} counter2 . next (); // {値: 3, done: false} // ...無限に 
 
 

JavaScriptはモジュールからのエクスポートとインポートが可能です: ^[83]

エクスポート例:

/* mymodule.js */ // この関数は
エクスポートされていないため、プライベートのままです。let 
sum = ( a , b ) => { return a + b ; }      
       


// 変数をエクスポート
export let name = 'Alice' ; export let age = 23 ;    
    

// 名前付き関数をエクスポートする
export function add ( num1 , num2 ) { return num1 + num2 ; }    
       


// エクスポートクラス
export class Multiplication {コンストラクター( num1 、num2 ) { this . num1 = num1 ; this . num2 = num2 ; }   
      
          
          
    

    追加（）{戻り合計（this.num1 、this.num2 ）; } }​​ 
          
    

インポート例:

// 1つのプロパティをインポートします
import { add } from './mymodule.js' ; console . log ( add ( 1 , 2 )); //> 3     
 


// 複数のプロパティをインポートする
import { name , age } from './mymodule.js' ; console . log ( name , age ); //> "Alice", 23      
 


// モジュールからすべてのプロパティをインポートします
。import * from ' ./module.js ' console.log ( name , age ); // > "Alice", 23 console.log ( add ( 1,2 ) ); //> 3   
 

このサンプル コードは、さまざまな JavaScript 機能を表示します。

/* 2 つの数値の最小公倍数 (LCM) を計算します */ 
function LCMCalculator ( x , y ) { // コンストラクター関数if ( isNaN ( x * y )) throw new TypeError ( "数値以外の引数は許可されていません。" ); const checkInt = function ( x ) { // 内部関数if ( x % 1 !== 0 ) throw new TypeError ( x + "整数ではありません" );    
        
         
             
                

        x を返します。 
    

    this . a = checkInt ( x ) // セミコロン ^^^^ はオプションで、改行で十分ですthis . b = checkInt ( y ); } // コンストラクターによって作成されたオブジェクト インスタンスのプロトタイプは、// そのコンストラクターの「プロトタイプ」プロパティです。LCMCalculator . prototype = { // オブジェクト リテラルコンストラクター: LCMCalculator 、// プロトタイプを再割り当てする場合は、コンストラクター プロパティを適切に設定しますgcd : function () { // 最大公約数を計算するメソッド// ユークリッドのアルゴリズム: let a = Math . abs ( this . a ), b = Math . abs ( this . b ), t ;  
    
      



   
      
       
        
               

        if ( a < b ) { // 変数を交換// t = b; b = a; a = t; [ a , b ] = [ b , a ]; // 分割代入を使用して交換 (ES6) }    
            
            
                 
        

        b ! == 0の間{ t = b ; b = a % b ; a = t ; }    
              
                
              
        

        // GCD は 1 回だけ計算する必要があるため、このメソッドを「再定義」します。
// (実際には再定義ではありません。インスタンス自体に定義されているため、this.gcd は LCMCalculator.prototype.gcd ではなく、この「再定義」を参照します。// LCMCalculator オブジェクト メンバー "a" または "b" が後で変更された場合、間違った結果になることに注意してください。) // また、'gcd' === "gcd"、this['gcd'] === this.gcd this [ 'gcd' ] = function () { return a ; };        
        
        
        
           
             
        

        を返す; }, 
    

    // オブジェクト プロパティ名は、二重引用符 (") または一重引用符 (') で区切られた文字列で指定できます。
"lcm" : function () { // 変数名はオブジェクト プロパティと衝突しません。たとえば、|lcm| は |this.lcm| ではありません。 // FP 精度の問題を回避するために |this.a*this.b| は使用しません。let lcm = this . a / this . gcd () * this . b ;      
        
        
               

        // lcm を一度だけ計算する必要があるので、このメソッドを「再定義」します。
this . lcm = function () { return lcm ; };           
             
        

        lcmを返す; }, 
    

    // メソッドは ES6 構文を使用して宣言することもできます
toString () { // ES6 テンプレートリテラルと (+) 演算子の両方を使用して値を連結しますreturn `LCMCalculator: a = ${ this . a } , b = ` + this . b ; } };     
        
           
    


// 汎用出力関数を定義します。この実装は Web ブラウザーでのみ機能します。
function output ( x ) { document . body . appendChild ( document . createTextNode ( x )); document . body . appendChild ( document . createElement ( 'br' )); }  
    
    


// 注: 配列の map() と forEach() は JavaScript 1.6 で定義されています。
// ここでは、JavaScript の本来の機能的な性質を示すために使用されています。
[ 
[ 25 , 55 ], [ 21 , 56 ], [ 22 , 58 ], [ 28 , 56 ] ]. map ( function ( pair ) { // 配列リテラル + マッピング関数return new LCMCalculator ( pair [ 0 ], pair [ 1 ]); }). sort (( a , b ) => a . lcm () - b . lcm ()) // この比較関数でソートします。 => は、"矢印関数" と呼ばれる関数の省略形です。 . forEach ( printResult );     
     
     
     
  
       
      
    

関数printResult ( obj ) {出力( obj + ", gcd = " + obj . gcd () + ", lcm = " + obj . lcm ()); }