JavaScriptの何が特別なのか、JavaScriptで何が実現できるのか、そして他のどのようなテクノロジーと連携できるのかを見ていきましょう。
JavaScriptとは何か?
JavaScriptは当初、「ウェブページに命を吹き込む」ために作成されました。
この言語のプログラムはスクリプトと呼ばれます。これらはウェブページのHTMLに直接記述でき、ページの読み込み時に自動的に実行されます。
スクリプトはプレーンテキストとして提供され、実行されます。実行するために特別な準備やコンパイルは必要ありません。
この点で、JavaScriptはJavaと呼ばれる別の言語とは大きく異なります。
JavaScriptが作成された当初は、「LiveScript」という別の名前がありました。しかし、当時Javaは非常に人気があったため、新しい言語をJavaの「弟分」として位置付けることが役立つと判断されました。
しかし、進化するにつれて、JavaScriptはECMAScriptと呼ばれる独自の仕様を持つ完全に独立した言語になり、現在ではJavaとはまったく関係ありません。
今日、JavaScriptはブラウザだけでなく、サーバー上、あるいはJavaScriptエンジンと呼ばれる特別なプログラムを持つあらゆるデバイス上で実行できます。
ブラウザには、「JavaScript仮想マシン」と呼ばれる埋め込みエンジンがあります。
異なるエンジンには異なる「コードネーム」があります。例えば
- V8 – Chrome、Opera、Edge。
- SpiderMonkey – Firefox。
- …IEの「Chakra」、Safariの「JavaScriptCore」、「Nitro」、「SquirrelFish」など、他のコードネームもあります。
上記の用語は、インターネット上の開発者向けの記事で使用されているため、覚えておくことをお勧めします。私たちもそれらを使用します。たとえば、「機能XはV8でサポートされている」場合、Chrome、Opera、Edgeで動作する可能性が高いです。
エンジンは複雑です。しかし、基本は簡単です。
- エンジン(ブラウザの場合は埋め込み)は、スクリプトを読み取ります(「解析」します)。
- 次に、スクリプトを機械コードに変換します(「コンパイル」します)。
- そして、機械コードは非常に高速に実行されます。
エンジンは、プロセスの各段階で最適化を適用します。実行中のコンパイル済みスクリプトを監視し、それを流れるデータを分析し、その知識に基づいて機械コードをさらに最適化します。
ブラウザ内JavaScriptで何ができますか?
最新のJavaScriptは「安全な」プログラミング言語です。当初ブラウザ向けに作成されたため、メモリやCPUへの低レベルアクセスは提供しません。
JavaScriptの機能は、実行される環境に大きく依存します。たとえば、Node.jsは、JavaScriptが任意のファイルの読み書き、ネットワークリクエストの実行などを可能にする関数を提供します。
ブラウザ内JavaScriptは、ウェブページの操作、ユーザーとのインタラクション、ウェブサーバーとのやり取りに関するあらゆる処理を実行できます。
たとえば、ブラウザ内JavaScriptは次のことができます。
- ページに新しいHTMLを追加する、既存のコンテンツを変更する、スタイルを変更する。
- ユーザーアクションに反応する、マウスクリック、ポインターの動き、キー押下で実行する。
- リモートサーバーにネットワーク経由でリクエストを送信する、ファイルのダウンロードとアップロードを行う(いわゆるAJAXとCOMETテクノロジー)。
- Cookieを取得および設定する、訪問者に質問する、メッセージを表示する。
- クライアント側でデータ(「ローカルストレージ」)を記憶する。
ブラウザ内JavaScriptでは何ができませんか?
ブラウザでのJavaScriptの機能は、ユーザーの安全性を保護するために制限されています。不正なウェブページが個人情報にアクセスしたり、ユーザーのデータを損傷したりするのを防ぐことを目的としています。
そのような制限の例を以下に示します。
-
ウェブページ上のJavaScriptは、ハードディスク上の任意のファイルを読み書きしたり、コピーしたり、プログラムを実行したりすることはできません。OS機能には直接アクセスできません。
最新のブラウザではファイルの操作が可能になっていますが、アクセスは制限されており、ユーザーがファイルのブラウザウィンドウへの「ドロップ」や
<input>
タグによる選択などの特定のアクションを実行した場合にのみ提供されます。カメラ/マイクやその他のデバイスとやり取りする方法がありますが、それらはユーザーの明示的な許可が必要です。したがって、JavaScript対応のページはこっそりとウェブカメラを有効にして周囲を観察し、その情報をNSAに送信することはできません。
-
一般的に、異なるタブ/ウィンドウはお互いのことを認識しません。あるウィンドウがJavaScriptを使用して別のウィンドウを開く場合など、認識することがありますが、異なるサイト(異なるドメイン、プロトコル、またはポート)から来た場合でも、一方のページのJavaScriptがもう一方のページにアクセスすることはできません。
これは「同一オリジンポリシー」と呼ばれます。それを回避するには、両方のページがデータ交換に同意し、それを処理する特別なJavaScriptコードを含める必要があります。これはチュートリアルで説明します。
この制限は、繰り返しになりますが、ユーザーの安全のためです。ユーザーが開いた
http://anysite.com
のページは、たとえばURLがhttp://gmail.com
の別のブラウザタブにアクセスして、そこから情報を盗むことができません。 -
JavaScriptは、現在のページの送信元であるサーバーにネットワーク経由で簡単に通信できます。しかし、他のサイト/ドメインからのデータを受信する機能は制限されています。可能ではありますが、リモート側から(HTTPヘッダーで表現された)明示的な同意が必要です。これも安全性の制限です。
サーバーなど、ブラウザ以外でJavaScriptを使用する場合は、そのような制限はありません。最新のブラウザでは、拡張された権限を要求するプラグイン/拡張機能も許可されています。
JavaScriptをユニークにするものとは?
JavaScriptには少なくとも3つの優れた点があります。
- HTML/CSSとの完全な統合。
- 単純なことは単純に実行できます。
- すべての主要なブラウザでサポートされており、デフォルトで有効になっています。
JavaScriptは、これら3つの機能を組み合わせた唯一のブラウザテクノロジーです。
それがJavaScriptをユニークなものにしています。それが、ブラウザインターフェースを作成するための最も普及したツールである理由です。
つまり、JavaScriptはサーバー、モバイルアプリケーションなどの作成にも使用できます。
JavaScript「上位」言語
JavaScriptの構文は、すべての人がニーズに合っているわけではありません。人によって異なる機能を求めます。
これは当然のことです。プロジェクトと要件は人それぞれ異なるからです。
そのため、最近では、ブラウザで実行される前にトランスパイル(変換)される新しい言語が多数登場しています。
最新のツールはトランスパイルを非常に高速かつ透過的に行うため、開発者は別の言語でコーディングし、「内部で」自動的に変換できます。
そのような言語の例
- CoffeeScriptはJavaScriptの「構文糖」です。より短い構文を導入することで、より明確で正確なコードを記述できます。通常、Ruby開発者に好まれています。
- TypeScriptは、「厳格なデータ型付け」を追加することに重点を置いており、複雑なシステムの開発とサポートを簡素化します。Microsoftによって開発されています。
- Flowもデータ型付けを追加しますが、方法が異なります。Facebookによって開発されています。
- Dartは、ブラウザ以外の環境(モバイルアプリなど)で実行される独自のエンジンを持つスタンドアロン言語ですが、JavaScriptにもトランスパイルできます。Googleによって開発されています。
- Brythonは、JavaScriptにトランスパイルされるPythonで、JavaScriptを使用せずに純粋なPythonでアプリケーションを作成できます。
- Kotlinは、ブラウザまたはNodeをターゲットにできる、現代的で簡潔で安全なプログラミング言語です。
他にもあります。もちろん、これらのトランスパイルされた言語のいずれかを使用する場合でも、実際に行っていることを理解するにはJavaScriptについても知っておく必要があります。
まとめ
- JavaScriptは当初ブラウザ専用の言語として作成されましたが、現在では他の多くの環境でも使用されています。
- 今日、JavaScriptは、HTML/CSSと完全に統合された、最も広く採用されているブラウザ言語として独自の地位を確立しています。
- JavaScriptに「トランスパイル」され、特定の機能を提供する多くの言語があります。JavaScriptを習得した後に、少なくとも簡単にそれらを見てみることをお勧めします。
コメント
<code>
タグを使用し、複数行の場合は<pre>
タグで囲み、10行を超える場合は、サンドボックス(plnkr、jsbin、codepenなど)を使用してください。