本章では、JavaScript(以下JS)がどのような思想で設計され、JavaやPython、C#といった他の言語とどう異なるのか、その全体像を把握します。また、学習に必要な環境構築と最初のコード実行を行います。
JavaScriptは1995年、Netscape社のBrendan Eichによってわずか10日間でプロトタイプが作成されました。当初はWebページに軽い動きをつけるための言語でしたが、現在ではECMAScript (ES) として標準化され、フロントエンドからバックエンド、モバイルアプリまで幅広く利用されています。
経験豊富なエンジニアが押さえておくべき特徴は以下の3点です。
JavaScriptはどこで動くのでしょうか? かつてはブラウザの中だけでしたが、現在は大きく分けて2つの環境があります。
Webブラウザ (クライアントサイド):
window オブジェクトがグローバルスコープです。Node.js (サーバーサイド):
言語仕様(コア機能)は同じですが、「何ができるか(API)」は環境に依存するという点を意識してください。
あなたが既に知っている言語とJSを比較してみましょう。
| 特徴 | Java / C# | Python | JavaScript |
|---|---|---|---|
| 型システム | 静的型付け (強い型付け) | 動的型付け (強い型付け) | 動的型付け (弱い型付け) |
| 並行処理 | マルチスレッド | マルチスレッド (GILあり) | シングルスレッド + イベントループ |
| OOP | クラスベース | クラスベース | プロトタイプベース (class構文はシンタックスシュガー) |
| 実行方式 | コンパイル (JVM/CLR) | インタープリタ | JITコンパイル (多くのエンジン) |
classは見た目は似ていますが、裏側の仕組み(プロトタイプチェーン)は全く異なります。また、コンパイルエラーで弾かれるようなコードも、JSでは実行できてしまう(そして実行時に落ちる)ことがあります。asyncioに似ていますが、JSはデフォルトで非同期を前提としています。また、インデントではなく波括弧 {} でブロックを定義します。実際にコードを動かしてみましょう。ここでは2つの方法を紹介します。
ちょっとした動作確認にはREPLが便利です。Node.jsのREPLを起動するには、ターミナルで node と入力して起動します。
このウェブサイトではドキュメント内にJavaScriptの実行環境を埋め込んでおり、以下のように緑枠で囲われたコード例には自由にJavaScriptコードを書いて試すことができます。ただしNode.jsとは環境が異なり、Node.js特有の機能は使用できません。
> console.log("Hello, World from REPL!");
Hello, World from REPL!
undefined
> 1 + 2
3
※ undefined は console.log 関数の戻り値が表示されています。
本格的なプログラムはファイルに記述します。
まず、以下の内容で hello.js というファイルを作成してください。
// 変数定義 (後述しますが、現代ではconstを使います)
const greeting = "Hello, World!";
const target = "Node.js";
// テンプレートリテラル (バッククォート ` を使用)
console.log(`${greeting} I am running on ${target}.`);ターミナルでファイルのあるディレクトリに移動し、node コマンドで実行します。
node hello.jsHello, World! I am running on Node.js.
ブラウザで動かす場合は、HTMLファイルが必要です。
index.html を作成し、以下のように記述してブラウザで開いてみてください。
<!DOCTYPE html>
<html>
<body>
<script>
console.log("Hello from Browser!");
alert("Hello from Browser!");
</script>
</body>
</html>
ブラウザの開発者ツール(Consoleタブ)にメッセージが表示され、ポップアップウィンドウが出れば成功です。