このキーワード
友達に教える
URLをコピー

JavaScriptとは?

JavaScript
パラダイム
マルチパラダイム
【登場時期】
1995年 (1995)
【設計者】
ブレンダン・アイク
【開発者】
ネットスケープコミュニケーションズMozilla Foundation
【最新リリース】
ECMAScript 2019 / 2019年5月
型付け
ダック・タイピング
【主な処理系】
JavaScriptCoreKJSNitroRhinoSpiderMonkeyV8ほか
方言
JScript
【影響を受けた言語】
SchemeSelfJavaLiveScriptLuaPerlAWKHyperTalk
【影響を与えた言語】
DartObjective-J
プラットフォーム
クロスプラットフォーム
【拡張子】
.js

JavaScript(ジャバスクリプト)とは、プログラミング言語のひとつである。JavaScriptはプロトタイプベースオブジェクト指向スクリプト言語であるが、クラスなどのクラスベースに見られる機能も取り込んでいる。

利用される場面はWebサイトWebアプリ・バックエンド・デスクトップアプリモバイルアプリなど、ブラウザからサーバー、デスクトップからスマートフォンまで多岐にわたっている。

Javaと似た名称を持つが、異なるプログラミング言語である(#歴史を参照)。

概要

JavaScriptという言葉は狭義にはMozillaが仕様を策定し実装しているスクリプト言語を指す。このスクリプト言語はEcmaインターナショナルECMAScript (ECMA-262) として標準化されており、多くのウェブブラウザ等はこの標準化されたECMAScriptを実装している。たとえば、マイクロソフトによる実装はJScriptと呼ぶ。

一般的にJavaScriptという言葉が使われるときはこのようなさまざまなECMAScriptの実装も含んだ幅広い意味で使われるので、どちらの意味でJavaScriptという言葉が使われているかは文脈で判断する必要がある。

ECMAScriptは仕様自体に独自の拡張を条件付きで認める記述があり、現在主要なブラウザが実装しているスクリプト言語はすべてECMAScriptに準拠していることになる。広義の意味でこれをJavaScriptと呼ぶ場合、主要なブラウザが実装しているスクリプト言語はマイクロソフトやGoogleアップルの実装も含めてJavaScriptである。

なお、ウェブブラウザでよく実装されているAPIであるDOM (Document Object Model) はECMAScriptの仕様の一部ではないので、DOMの準拠の有無はECMAScriptの準拠の有無とは関係ない。

プログラミング言語としての特徴

JavaScriptはプロトタイプベースオブジェクト指向プログラミング言語で、それに分類される言語同様、静的にクラスを定義すること無くオブジェクトを利用する。多くの場合はC言語に似た手続き型言語のようなスタイルで書かれるが、第一級関数をサポートしており関数を第一級オブジェクトとして扱えるなど、関数型言語の性質も持ち合わせている。そのような柔軟な設計から、いくつかのアプリケーションではマクロ言語としても採用されている。例えばAdobe Acrobatは、JavaScriptによるマクロ機能を搭載している。

成立の経緯(#歴史を参照)から、当初は処理系の間の互換性に難があり、Prototype JavaScript Frameworkなどのライブラリがそれらの違いを吸収することで解決が図られた。

AptanaEclipseNetBeansIntelliJ IDEAなどの統合開発環境はJavaScriptをサポートしており、大規模開発が可能になっている。さらにExt JSなどの本格的なGUIライブラリの登場により、デスクトップアプリケーションと遜色ないユーザインタフェースの構築が可能になった。

JavaScriptプログラムのための各種のAPIがW3CWHATWGにより策定されており、クライアント・サーバ間の通信のためのXMLHttpRequestWebSocketマルチスレッド実行のためのWeb Workerなどが利用可能となっている。

一方、プロトタイプベースの言語はクラスベースに比較して少数派であり、CoffeeScriptを筆頭に、いわゆるAltJSと呼ばれる、クラスベースを採用した言語が開発され、これらはJavaScriptにトランスパイルして使用する。

歴史

誕生

JavaScriptはネットスケープコミュニケーションズブレンダン・アイクによって開発され、Netscape Navigator 2.0で実装された。開発当初はLiveScriptと呼ばれていたが、1995年サン・マイクロシステムズ(現・オラクル)が開発したプログラミング言語Javaが当時大きな注目を浴びており、ネットスケープとサン・マイクロシステムズが業務提携していた事もあったため、JavaScriptという名前に変更された。最初のJavaScriptエンジンはブレンダン・アイクによりNetscape Navigatorのために作成されたものであった。このエンジンはSpiderMonkeyと呼ばれており、C言語で実装されていた。また、全てJavaで記述されたJavaScriptエンジンであるRhinoも同じくNetscapeのNorris Boyd(後にGoogleに移籍)らにより作成された。

1996年マイクロソフトInternet Explorer 3.0に搭載されるようになると、その手軽さからJavaScriptは急速に普及していく。1997年、通信に関する標準を策定する国際団体EcmaインターナショナルによってJavaScriptの中核的な仕様がECMAScriptとして標準化され、多くのウェブブラウザで利用できるようになった。

ネットスケープは、ウェブアプリケーション開発言語として自社のサーバ製品に実装したLiveWire JavaScriptも発表したが、こちらはあまり普及しなかった。

JavaScriptの登場初期は、ブラウザベンダー間で言語仕様の独自拡張が行われていたため、ブラウザ間の互換性が極めて低かった。ECMAScriptの策定以降は実装間の互換性は向上し、DOMなど関連仕様の実装に関する互換性も高くなっていった。

発展

市場のブラウザ間互換性がある程度確立された2000年頃には、GoogleAmazon等のGAFAMもJavaScriptを積極的に利用し始めた。2005年、microsoftが開発したJavaScriptの非同期通信を利用した技術にAjaxという名前が付けられたことによって、高機能なウェブアプリケーション開発言語の一つとして再び注目を集めた。初期にAjaxを利用した代表的なアプリケーションとして、Google map[1]などがある。

また、JavaScriptはウェブブラウザの拡張機能を開発するための言語としても使われるようになった。当初は拡張機能用のAPIが統一されていなかったが、互換性を高めようとする動きがある。

当初はインタプリタ方式で実行されることが一般的であったためJavaScriptの実行速度はさほど速くなかったが、現在ではJITコンパイルなどを利用した各種の最適化がなされており、各ウェブブラウザのベンダーともに高速化を図ってしのぎを削っている。さらには、この高速化を受ける形で、Node.jsのようにサーバサイドでもJavaScriptを使う動きが見られるようになった。

JavaScript 2.0

次世代のJavaScriptとして“JavaScript 2.0”を作ろうとした動きは2度あったが、いずれもまとまらなかった。

1度目はECMAScript 3が完成したのち2000年から2003年にかけて発生したが、ネットスケープとマイクロソフトの対立でまとまらなかった。当時ネットスケープが提案していた案はアドビActionScript 2.0に引き継がれ、マイクロソフトの案はJScript .NETへと引き継がれた。

その後もネットスケープ及びMozilla FoundationはECMAScriptの策定に並行してJavaScriptを拡張し、JavaScript 1.x系列としてバージョンアップを繰り返していた。ECMAScript側ではECMAScript 4の策定が1999年以降進められており、2006年の時点でMozilla Foundationはこれに基づいてJavaScript 2.0を作成することを表明していた。MozillaはECMAScript 4の策定にあたって、Pythonの文法を一部取り込んだ案を提案しており、自身でもこれを実装していた。

しかしその後、ECMAScriptの標準化作業がMozilla、Adobe、Opera、Googleらが推すECMAScript 4と、Microsoft、Yahoo!らが推すECMAScript 3.1に事実上分裂してしまった影響から、2008年8月に大きな方針転換があり、ECMAScript 4は破棄され後者がECMAScript 5として2009年に標準化された。ECMAScript 4に入る予定だった機能は新たに発足した「ECMAScript Harmony」に先送りとなった。これは後にECMAScript 2015として標準化が完了した。

なお、ECMAScript 5が標準化されて以降、MozillaのJavaScript実装はECMAScriptへの準拠を謳うようになったためバージョン番号での呼称は行われなくなり、JavaScript 2.0は死語となった。

文法

詳細は「JavaScriptの文法」を参照

基本的な文法

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

var x; // 変数xの宣言。値が未指定のため、特殊な値である undefined が入った状態となる。
var y = 2; // 変数yの宣言。同時に 2 が代入される。

上記例のスラッシュ2文字以降はコメントである。

JavaScriptは言語仕様にI/Oが組み込まれておらず、それらは実行環境により提供される。ECMAScript 5.1の仕様では以下のように言及されている。

この仕様の中では外部データの入力または計算結果の出力は供給しない。
(… indeed, there are no provisions in this specification for input of external data or output of computed results.)

しかし、ほとんどの実行環境はConsole Standardで規定されている console オブジェクトを持っており、そこにコンソール出力を行える。以下に最小の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 が返る

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

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 が呼ばれるようになる。
        //   ただし、計算後にプロパティ 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はコードの最上階層に属するグローバルオブジェクトを提供している。JavaScriptにおけるグローバルオブジェクトはglobalThisである。

利用

ウェブブラウザにおけるHTML操作を目的として作られたJavaScriptは、2020年現在幅広い領域で利用されている。

Webページでの利用

ダイナミックHTML」、「Ajax」、および「Document Object Model」も参照

JavaScriptの最も歴史の長い使用法はHTMLページにクライアント側のふるまいを持たせることである。これは当初はダイナミックHTML (DHTML) として知られていた。JavaScriptはHTMLに直接埋め込まれまたは別のファイルからインクルードされ、ウェブブラウザ上のJavaScript実行環境で動作する。ウェブブラウザは通常、Document Object Model (DOM) を扱うためのホストオブジェクトを提供する。

JavaScriptの使用例としては、以下のようなものがある。

JavaScriptはユーザーのブラウザ上で動作できることから、ユーザーの操作に対して素早く反応することができ、アプリケーションをよりレスポンシブにすることができる。さらにJavaScriptはHTML単独では対応できない操作、例えばキー入力などにも応答することができる。Gmailのようなアプリケーションでは、JavaScriptでUIロジックを実装し、さらにJavaScriptでサーバーから情報(例えばeメールのメッセージ)を取得することで、こうしたメリットを享受している。このような利点からAjaxは大きなトレンドとなった。

様々な言語やフレームワークをウェブブラウザ上で動作させるために、JavaScriptはそれらのコンパイル先出力言語となっている(例: TypeScript)。

以下はJavaScriptとDOMを含むWebページのごく単純な例である。


<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 = document.getElementsByTagName('h1')[0]; // または

要素を全て取得してそこから先頭を取得。 script> <noscript>表示中のブラウザはJavaScriptをサポートしていないか、OFFになっています。noscript> body> html>

その他の環境での利用

ウェブブラウザ以外のJavaScript実行環境も存在する(サーバーサイドJavaScript実装の一覧を参照)。データベースWebサーバーに組み込まれ、それらのAPIやHTTPリクエストやレスポンスのアクセスが提供されているものもある。

また、Node.jsのようにOSの機能(ネットワークファイルシステムなど)にアクセスできる環境も存在する。加えてElectronなどのアプリケーションフレームワークの登場により、Atomなどのアプリケーションが広まりつつある。

バージョンとブラウザの対応表

ECMAScript#バージョン」も参照
【バージョン】
【日付】
【規格】
【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 1 edition / ECMA-262 2 edition | 4.06-4.7x |  | 4.0 | 5.0 | 
1.4 |  |  | Netscape
Server |  |  | 6.0 | 
1.5 | 2000年11月 | ECMA-262 3 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 Compliance |  | 4.0-11.0 |  |  | 

ライブラリ

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

Vanilla JS

ライブラリを使用しないJavaScriptはVanilla JSと称されることがある。

脚注

  1. ^ 出典URL: https://www.ecma-international.org/ecma-262/10.0/, 題名: ECMAScript 2019 Language Specification
  2. ^ JavaScript 第5版(オライリー・ジャパン、2007)P2。
  3. ^ ECMA-262 第5版 2.Conformance
  4. ^ 新しい(ES2015以降)JavaScriptではクラスの構文によりプロトタイプを意識せずにオブジェクト指向プログラミングをすることが可能になったが、言語設計はプロトタイプベースの設計を維持している。
  5. ^ Marc Andreessen. “INNOVATORS OF THE NET: BRENDAN EICH AND JAVASCRIPT”. 2008年1月22日閲覧。
  6. ^ NETSCAPE AND SUN ANNOUNCE JAVASCRIPT, THE OPEN, CROSS-PLATFORM OBJECT SCRIPTING LANGUAGE FOR ENTERPRISE NETWORKS AND THE INTERNET”. 2008年1月22日閲覧。
  7. ^ ECMA 262, ISO/IEC 16262, JIS X 3060
  8. ^ WebExtensions, Browser Extensions
  9. ^ ECMAScript® 2017 Language Specification (ECMA-262, 8th edition, June 2017) Introduction
  10. ^ Python and JavaScript” (英語). Brendan's Roadmap Updates (2006年2月19日). 2007年9月5日閲覧。
  11. ^ JavaScript 2.0はECMAScript 3.1ベースに、ECMAScript 4は譲歩 - マイコミジャーナル
  12. ^ Mozilla における ECMAScript 5 のサポート
  13. ^ var – JavaScript – MDN”. The Mozilla Developer Network. 2012年12月22日閲覧。
  14. ^ let – JavaScript – MDN”. The Mozilla Developer Network. 2018年1月24日閲覧。
  15. ^ const – JavaScript – MDN”. The Mozilla Developer Network. 2018年1月24日閲覧。
  16. ^ ECMAScript Language Specification – ECMA-262 Edition 5.1”. Ecmaインターナショナル. 2012年12月22日閲覧。
  17. ^ Console Living Standard” (英語). WHATWG (2017年5月18日). 2017年5月24日閲覧。
  18. ^ console”. Mozilla Developer Network. Mozilla. 2013年4月6日閲覧。
  19. ^ “[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters Rest parameters - JavaScript]”. Mozilla Developer Network. Mozilla. 2018年1月24日閲覧。
  20. ^ 2020-04-10現在 tc39 stage-4 (finished proposal). ECMAScript2020へ採用予定 tc39
  21. ^ JavaScript tracking – Piwik”. Piwik. 2012年3月31日閲覧。
  22. ^ 後藤大地 (2009年12月9日). “JavaScriptのブラウザ非互換に解決のみとおし”. journal.mycom.co.jp. 2009年12月9日閲覧。
  23. ^ John Resig. “Versions of JavaScript”. Ejohn.org. 2009年5月19日閲覧。

関連項目

外部リンク

JavaScript
【概念】

エンジン

コンパイラ

デバッガ

【エディタ】
出典:wikipedia
2020/06/06 18:55

HAPPY Wikipedia

あなたの考える「JavaScript」の意味を投稿しよう
「JavaScript」のコンテンツはまだ投稿されていません。
全部読む・投稿 

JavaScriptスレッド一覧

・・・・・・・・・・・・・・・・・・
「JavaScript」のスレッドを作成する
JavaScriptの」
友達を探す
掲示板を探す
このページ
友達に教える
URLをコピー

注目のキーワード

錦織圭/北島康介/2014_FIFAワールドカップ・アジア予選/サッカー日本女子代表/消費税/東京スカイツリー/ダルビッシュ有/イチロー/香川真司/野田内閣/復興庁/石川遼/HKT48/AKB48/ワールド・ベースボール・クラシック日本代表/黒田博樹/尖閣諸島/バレンタインデー/ONE_PIECE

キーワードで探す

 
友達を探す
掲示板を探す
ハッピーWiki
ハッピーメール
ハッピーランド
HAPPY NEWS
2010Happy Mail