JavaScript
logo.jsによるJavaScriptの | |
パラダイム | マルチパラダイム |
---|---|
1995 | |
ブレンダン・アイク | |
ネットスケープコミュニケーションズ、Mozilla Foundation | |
ECMAScript 2024[1] / 2024 | |
ECMAScript 2025[2] / 2024 | |
ダック・タイピング | |
JavaScriptCore、KJS、Nitro、Rhino、SpiderMonkey、V8ほか | |
JScript | |
Scheme、Self、Java、Lua、Perl、AWK、HyperTalk、Python | |
Dart、Objective-J、Google Apps Script、TypeScript | |
プラットフォーム | クロスプラットフォーム |
ウェブサイト |
www |
.js 、.cjs 、.mjs |
JavaScript(ジャバスクリプト)は、プログラミング
プロトタイプベースのオブジェクト
Javaと
概要
[ソースをJavaScriptはWebブラウザNetscape Navigatorに
JavaScriptの
プログラミング言語 としての特徴
[ソースをJavaScriptは
if
・for
などの制御 構造 による手続 き型 プログラミングスタイル.prototype
・class
などのオブジェクトによるオブジェクト指向 プログラミングスタイルmap
・高階 関数 などの関数 操作 による関数 型 プログラミングスタイル
これらを
AptanaやEclipse, NetBeans, IntelliJ IDEAなどの
並行 処理
[ソースをJavaScriptではしばしば、ネットワークを
Promise
、Promise
を
またJavaScriptは
並列 処理
[ソースをJavaScriptではSharedArrayBuffer
、バッファAtomics
がWorker
、Node.jsのworker_threads
でpostMessage
によるメッセージングが
歴史
[ソースを誕生
[ソースをJavaScriptはネットスケープコミュニケーションズのブレンダン・アイクによって、1995
1996
ネットスケープは、ウェブアプリケーション
JavaScriptの
かつてはJavaScriptという
ECMAScriptは
発展
[ソースをまた、JavaScriptはウェブブラウザの
JavaScript 2.0
[ソースを1
その
しかしその
なお、ECMAScript 5が
文法
[ソースを基本 的 な文法
[ソースをJavaScriptの
let x; // 変数 xの宣言 。値 が未 指定 のため、特殊 な値 である undefined が入 った状態 となる。
let y = 2; // 変数 yの宣言 。同時 に 2 が代入 される。
const z = 5; // 定数 zの宣言 。同時 に 5 が代入 される。定数 であるため、書 き換 えることはできない。
JavaScriptは
この
仕様 の中 では外部 データの入力 または計算 結果 の出力 は供給 しない。
(… indeed, there are no provisions in this specification for input of external data or output of computed results.)
しかし、ほとんどの
console.log("Hello World!");
function factorial(n) {
if (n == 0) {
return 1;
}
return n * factorial(n - 1);
}
// ECMAScript 5以前 の記法
var displayClosure = function() {
let count = 0;
// ECMAScript 2015以降 で可能 な記法
return ()=> {
return ++count;
};
}
var inc = displayClosure();
inc(); // 1 が返 る
inc(); // 2 が返 る
inc(); // 3 が返 る
var sum = function(...args) {
let x = 0;
for (const v of args) {
x += v;
}
return x;
}
sum(1, 2, 3); // 6 が返 る
var v;
v = 1;
var getValue = (function(v) {
return function() {return v;};
})(v);
v = 2;
getValue(); // 1 が返 る
複雑 な例
[ソースを"use strict"; // strictモードの宣言
/* 2つの数値 の最小公倍数 を求 める */
function LCMCalculator(x, y) { // コンストラクタ関数
const checkInt = (x)=> { // 入 れ子 の関数
if (x % 1 !== 0) {
throw new TypeError(x + " is not an integer"); // 例外 のスロー
}
return x;
};
// 行末 のセミコロンは省略 可能 な場合 があるが、省略 は推奨 されない。
this.a = checkInt(x)
this.b = checkInt(y);
}
// オブジェクトのプロトタイプはコンストラクタ関数 の prototype プロパティに格納 する
LCMCalculator.prototype = { // オブジェクトリテラル
constructor: LCMCalculator, // このようにプロトタイプを上書 きする場合 は、
// constructorプロパティにコンストラクタ関数 名 を再 指定 する
gcd: function () { // 最大公約数 を計算 するメソッド
// 「ユークリッドの互除法 」アルゴリズムで計算
let a = Math.abs(this.a), b = Math.abs(this.b);
if (a < b) {
// 変数 の入 れ替 え
const t = b;
b = a;
a = t;
}
while (b !== 0) {
const t = b;
b = a % b;
a = t;
}
// 最大公約数 の計算 は一 度 でよいため、自分 自身 を計算 済 みの結果 を返 すメソッドで再 定義 (上書 き)する。
// (これにより LCMCalculator.prototype.gcd の代 わりに this.gcd が呼 ばれるようになる。
// ただし、計算 後 にプロパティ a や b が変更 されてしまうと、結果 は誤 りとなる。)
// なお 'gcd' === "gcd", this['gcd'] === this.gcd である。
this['gcd'] = function () {
return a;
};
return a;
},
lcm : function () { // 最小公倍数 を計算 するメソッド
// 変数 名 は、オブジェクトのプロパティと衝突 しない。例 )lcm は this.lcm とは異 なる。
// 以下 では、浮動 小数 の精度 の問題 を避 けるために this.a * this.b としていない。
const lcm = this.a/this.gcd()*this.b;
// 最小公倍数 の計算 も一 度 でよいため、自分 自身 を計算 済 みの結果 を返 すメソッドで再 定義 (上書 き)する。
this.lcm = function () {
return lcm;
};
return lcm;
},
toString: function () { // toStringはオブジェクトを文字 列 に変換 するときに呼 ばれるメソッド。
// テンプレート文字 列 により文字 列 中 に値 を埋 め込 むことができる。
return `LCMCalculator: a = ${this.a}, b = ${this.b}`;
}
};
// 汎用 の出力 関数 の定義 。この実装 はWebブラウザ上 でのみ動作 する。
function output(x) {
document.body.appendChild(document.createTextNode(x));
document.body.appendChild(document.createElement('br'));
}
// 無名 関数 はさまざまな書 き方 が可能
[[25, 55], [21, 56], [22, 58], [28, 56]].map(([a, b])=> new LCMCalculator(a, b)) // 配列 リテラル + マッピング関数
.sort((a, b)=> a.lcm() - b.lcm()) // 指定 した比較 関数 を用 いたソート
.forEach(obj=> {
output(obj + ", gcd = " + obj.gcd() + ", lcm = " + obj.lcm());
});
LCMCalculator: a = 28, b = 56, gcd = 28, lcm = 56
LCMCalculator: a = 21, b = 56, gcd = 7, lcm = 168
LCMCalculator: a = 25, b = 55, gcd = 5, lcm = 275
LCMCalculator: a = 22, b = 58, gcd = 2, lcm = 638
機能
[ソースをグローバルオブジェクト
[ソースをJavaScriptはコードのglobalThis
である[21]。
エコシステム
[ソースを実行 環境 API
[ソースをそれぞれのJavaScript
Webブラウザ
[ソースをHTMLdocument.querySelector
)、HTTPリクエストを
Node.js
[ソースをファイルシステムにアクセスするためのfs
API(モジュール)やprocess
APIなどが
altJS
[ソースをalternative JavaScript (altJS) はJavaScriptへトランスパイルされるプログラミング
JavaScriptへ
パッケージ管理
[ソースをJavaScriptエコシステムにはnpm
やyarn
がある。
利用
[ソースをWebブラウザにおけるHTML
- ウェブページ・ウェブサイト・ウェブアプリケーション(ブラウザクライアント
上 での動作 ) - ウェブバックエンドサーバ (Node.js)
- デスクトップアプリケーション(
例 : Electron (ソフトウェア)) - モバイルアプリケーション (
例 : React Native)
Webページでの利用
[ソースをJavaScriptの
JavaScriptの
- ページの
再 読 み込 みなしで新 しいコンテンツを読 み込 むまたはサーバに投稿 する(Ajax。例 えば、SNSでページを離 れることなく新 しい投稿 を表示 することができる)。 - ゲームなどの
動的 なコンテンツを提供 する。 - データをサーバーに
送信 せずにフォーム入力 値 の検証 を行 う。 - アクセス
解析 や広告 追跡 、パーソナライゼーションなどのためにユーザーの閲覧 情報 を収集 する[23]。
JavaScriptはユーザーのブラウザ
例
[ソースを<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>
単純 な例 </title> </head> <body> <h1 id="header">これはJavaScriptです</h1> <script> document.body.appendChild(document.createTextNode('Hello World!')); let h1 = document.querySelector('#header'); // id='header'の<h1>要素 の参照 を取得 。 h1 = document.querySelectorAll('h1')[0]; //または<h1>要素 を全 て取得 してそこから先頭 を取得 。 </script> <noscript>お使 いのブラウザはJavaScriptをサポートしていないか、無効 になっています。</noscript> </body> </html>
その他 の環境 での利用
[ソースをウェブブラウザ
また、Node.jsのようにOSの
いくつかのアプリケーションではマクロ
バージョンとブラウザの対応 表
[ソースをバージョン | Netscape Navigator |
Mozilla Firefox |
Internet Explorer |
Opera | Safari | ||
---|---|---|---|---|---|---|---|
1.0 | 1996 |
2.0 | 3.0 | ||||
1.1 | 1996 |
3.0 | |||||
1.2 | 1997 |
4.0-4.05 | |||||
1.3 | 1998 |
ECMA-262 1st edition / ECMA-262 2nd edition | 4.06-4.7x | 4.0 | 5.0 | ||
1.4 | Netscape Server |
6.0 | |||||
1.5 | 2000 |
ECMA-262 3rd edition | 6.0 | 1.0 | 5.5 (JScript 5.5), 6.0 (JScript 5.6), 7.0 (JScript 5.7), 8.0 (JScript 6.0) |
||
1.6 | 2005 |
1.5 + Array extras + Array and String generics + E4X | 7.0-8.0 | 1.5 | 7.0-9.0 | 3.0, 3.1 | |
1.7 | 2006 |
1.6 + Pythonic generators + Iterators + let | 2.0 | 3.2-5.1 | |||
1.8 | 2008 |
1.7 + Generator expressions + Expression closures | 3.0 | ||||
1.8.1 | 1.8 + Minor Updates | 3.5 | |||||
1.9 | 1.8.1 + ECMAScript 5[24] Compliance | 4.0-11.0 |
ライブラリ
[ソースを脚注
[ソースを注釈
[ソースを出典
[ソースを- ^ “ECMAScript® 2024 Language Specification” (6
月 2024). 30 8月 2024閲覧 。 - ^ “ECMAScript® 2025 Language Specification” (27 3
月 2024). 17 4月 2024閲覧 。 - ^ Effective JavaScript(
翔 泳 社 、2013)iii。 - ^ Marc Andreessen. “INNOVATORS OF THE NET: BRENDAN EICH AND JAVASCRIPT”. 2008
年 7月 4日 時点 のオリジナルよりアーカイブ。2008年 1月 22日 閲覧 。 - ^ a b “NETSCAPE AND SUN ANNOUNCE JAVASCRIPT, THE OPEN, CROSS-PLATFORM OBJECT SCRIPTING LANGUAGE FOR ENTERPRISE NETWORKS AND THE INTERNET”. 2008
年 5月 28日 時点 のオリジナルよりアーカイブ。2008年 1月 22日 閲覧 。 - ^ ECMA 262, ISO/IEC 16262, JIS X 3060
- ^ JavaScript
第 5版 (オライリー・ジャパン、2007)P2。 - ^ ECMA-262
第 5版 2.Conformance - ^ WebExtensions, Browser Extensions
- ^ ECMAScript® 2017 Language Specification (ECMA-262, 8th edition, June 2017) Introduction
- ^ “Python and JavaScript” (
英語 ). Brendan's Roadmap Updates (2006年 2月 19日 ). 2010年 1月 25日 時点 のオリジナルよりアーカイブ。2007年 9月 5日 閲覧 。 - ^
後藤 大地 (2008年 8月 18日 ). “JavaScript 2.0はECMAScript 3.1ベースに、ECMAScript 4は譲歩 ”. マイナビニュース. 2013年 3月 1日 時点 のオリジナルよりアーカイブ。2022年 4月 11日 閲覧 。 - ^ “Mozilla における ECMAScript 5 のサポート”. 2021
年 4月 20日 時点 のオリジナルよりアーカイブ。2022年 4月 11日 閲覧 。 - ^ “var – JavaScript – MDN”. The Mozilla Developer Network. 22 December 2012
閲覧 。 - ^ “let – JavaScript – MDN”. The Mozilla Developer Network. 24 January 2018
閲覧 。 - ^ “const – JavaScript – MDN”. The Mozilla Developer Network. 24 January 2018
閲覧 。 - ^ “ECMAScript Language Specification – ECMA-262 Edition 5.1”. Ecmaインターナショナル. 22 December 2012
閲覧 。 - ^ “Console Living Standard” (
英語 ). WHATWG (2017年 5月 18日 ). 2017年 5月 24日 閲覧 。 - ^ “console”. Mozilla Developer Network. Mozilla. 6 April 2013
閲覧 。 - ^ “[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters Rest parameters -
JavaScript]”. Mozilla Developer Network. Mozilla. 24 January 2018
閲覧 。 - ^ 2020-04-10
現在 tc39 stage-4 (finished proposal). ECMAScript2020へ採用 予定 tc39 - ^ “Vanilla JS”. vanilla-js.com. June 16, 2020
時 点 のオリジナルよりアーカイブ。2021年 9月 4日 閲覧 。 - ^ “JavaScript tracking – Piwik”. Piwik. 31 March 2012
閲覧 。 - ^
後藤 大地 (2009年 12月9日 ). “JavaScriptのブラウザ非 互換 に解決 のみとおし”. journal.mycom.co.jp. 2009年 12月9日 閲覧 。 - ^ John Resig. “Versions of JavaScript”. Ejohn.org. 2009
年 5月 19日 閲覧 。
関連 項目
[ソースを- JSON(JavaScript Object Notation)- JavaScriptにおけるオブジェクトの
記法 をベースとした軽量 なデータ記述 言語 。 - Category:JavaScriptを
生成 する言語 も参照 。
外部 リンク
[ソースを英語 日本語 - JavaScript - MDN
- JavaScript
講座 - リズムファクトリー社 - JScript - Microsoft