「お気楽 JavaScript プログラミング超入門」のフォントを Web フォント (Noto Sans JP, Noto Sans Mono) に変更し、印刷用の CSS を追加しました。Web ブラウザの印刷機能を使って PDF に変換することもできます。表示が崩れるときはフォント Noto Sans Mono CJK JP をインストールしてください。
M.Hiroi の JavaScript に関する覚え書です。このページは M.Hiroi が関心を持った JavaScript の機能 (クロージャやオブジェクト指向など) をまとめたものです。いわゆる "Web プログラミング" について解説したものではありません。ご注意ください。
JavaScript はネットスケープコミュニケーションズのブレンダン・アイクによって開発され、1995 年に Netscape Navigator 2.0 で実装されました。主な動作環境は Web ブラウザで、Web ページのユーザビリティ向上、Web アプリケーションの構築などで使われています。
当初、JavaScript は名称から Java のサブセットと誤解されたり、Web ブラウザ用のマクロ言語という認識が多かったのですが、Ajax という JavaScript を使った技術が注目を集めるようになると、プログラミング言語として正当に評価されるようになりました。
近年はサーバーサイドでも JavaScript が使われるようになりました。有名なところでは JavaScript エンジンに Google Chrome の V8 を搭載した Node.js があります。Node.js を使って Web サーバーを構築し、そこでアプリケーションを動作させます。Apache など従来のサーバーに比べて、大量のリクエストを高速にさばくことができるそうです。
さらに、最近ではデスクトップアプリケーションの作成にも Web 系の技術が使用されています。GitHub 社が開発している Electron はクロスプラットフォームなフレームワークで、ランタイムに Node.js と Chromium (Chrome のオープンソース版) を使用しています。元々は GitHub 社がエディタ Atom の開発で使用していたフレームワークを、オープンソースとして公開したものです。Microsoft 社のエディタ Visual Stdio Code も Electron を使用しています。
昔々、M.Hiroi は JavaScript のことを誤解していて、Web ブラウザで使用するマクロ言語としか認識していませんでしたが、今ではいろいろな分野で活用されるようになりました。最近の Web ブラウザや Node.js は新しい言語仕様 (ECMAScript) にも対応しているので、これからも多くの分野で JavaScript (Node.js) が活用されていくのではないかと思っております。
JavaScript の言語仕様は Ecma International という団体によって標準化されています。これを ECMAScript といいます。ECMAScript は JavaScript のコアな部分のみを標準化したものです。たとえば、Web ブラウザに搭載されている JavaScript は、ECMAScript に Web ブラウザ特有の機能を追加しています。
ECAMScript は毎年改定されていて、最新版は 2024 年 7 月に公開された ECAMScript2024 (ES2024) です。ECMAScript の中で 2015 年 6 月に公開された ES2015 では多くの機能が追加されました。Node.js や多くの Web ブラウザは ECMAScript の改訂に追随していますが、M.Hiroi が対応できるのは ES2015 くらいまでなので、本ページでは ES2015 をベースにプログラムを記述することにします。
JavaScript の基本を学ぶ場合、Lisp / Scheme の REPL (read eval print loop) のような対話モードがあると便利です。Python にも対話モードがありますし、Ruby には irb (interactive ruby) というツールがあります。
最近の Web ブラウザには JavaScript 用のコンソールが用意されていて、コンソールからプログラムを入力して実行することが可能です。Google Chrome の場合、コンソールはメニューや設定から開くことができますが、ショットカットキー (Ctrl-Shift-J) でも開くことができます。
簡単な例として、hello, world をコンソールに表示するプログラムを作ってみましょう。次のリストを見てください。
リスト : hello, world の表示 (index.html)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>お気楽 JavaScript プログラミング超入門</title>
</head>
<body>
<script>
console.log("hello, world");
</script>
</body>
</html>
HTML ファイルに JavaScript プログラムを書く場合、script タグの中で定義します。script タグは body タグの最後、</body> の直前に記述するのが一般的です。この HTML ファイルを読み込んでブラウザのコンソールを開いてください。hello, world と表示されているはずです。また、リロードしても hello, world と表示されます。
Node.js には REPL が用意されているので、そちらを使うこともできます。Node.js は次のページからダウンロードすることができます。
Windows の場合、インストーラーが用意されているので、簡単にインストールすることができます。
UNIX 系 OS の場合、いろいろな方法があります。Ubuntu の場合、apt で Node.js とパッケージマネージャ npm を簡単にインストールすることができますが、バージョンが少々古いです。Node.js のバージョン管理ツール n を使うと簡単なようです。
Ubuntu の場合、最初に apt で Node.js と ppm をインストールします。
$ sudo apt update $ sudo apt install nodejs npm
次に npm を使って n をインストールします。
$ sudo npm install -g n
そして、n を使って Node.js をインストールします。n ls-remote で利用できるバージョンの一覧が表示されます。バージョンを指定してインストールすることもできますが、最新版と LTS (long-term support) であれば、以下のコマンドでインストールできます。
M.Hiroi は LTS をインストールしました。最後に古いバージョンの Node.js と npm を削除します。
$ sudo apt purge nodejs npm
n を使うと異なるバージョンの Nodej.js をインストールすることができ、sudo n で使用する Node.js のバージョンを選択することができます。
シェルでコマンド node を実行すると REPL が起動します。
$ n ls
node/22.12.0
$ node --version
v22.12.0
$ npm --version
10.9.0
$ node
Welcome to Node.js v22.12.0.
Type ".help" for more information.
> .help
.break Sometimes you get stuck, this gets you out
.clear Alias for .break
.editor Enter editor mode
.exit Exit the REPL
.help Print this help message
.load Load JS from a file into the REPL session
.save Save all evaluated commands in this REPL session to a file
Press Ctrl+C to abort current expression, Ctrl+D to exit the REPL
> console.log("hello, world")
hello, world
undefined
本ページでは主に Node.js の REPL を使いながら JavaScript の学習を進めていくことにします。
ところで、Google Chrome に搭載されている JavaScript エンジン (V8) はとても速いといわれています。そこで、実際に拙作のページ「Algorithms with Python: 再帰定義」のたらいまわし関数で実行速度を比較してみました。
リスト : たらいまわし関数 (tak.js)
function tak(x, y, z) {
if(x <= y) return z;
return tak(tak(x - 1, y, z), tak(y - 1, z, x), tak(z - 1, x, y));
}
function test(x, y, z) {
var s = new Date().getTime();
console.log(tak(x, y, z));
var e = new Date().getTime();
console.log(e - s);
}
HTML ファイルで JavaScritp プログラムが書かれたファイルを読み込む場合は、script タグで次のように指定します。
<script src="tak.js"></script>
あとは、コンソールで関数 test を実行すると、時間が msec 単位で表示されます。Node.js の場合、REPL の .load コマンドでファイルを読み込むことができます。あとは test() を実行するだけです。
$ node Welcome to Node.js v22.12.0. Type ".help" for more information. > .load tak.js ... 略 ... > test(22,11,0) 11 3121 undefined
それでは実行結果を示します。tak(22, 11, 0) を計算しました。なお、下表では JavaScript を JS と表記します。
| 処理系 | 秒 |
|---|---|
| Python (ver 3.10.12) | 62.23 |
| Ruby (ver 3.0.2p107) | 25.59 |
| Lua (ver 5.4.4) | 22.41 |
| Gauche (ver 0.9.15) | 21.29 |
| ocamlc (ver 4.13.1) | 9.46 |
| SBCL (ver 2.1.11) | 4.90 |
| JS (Chrome) | 3.66 |
| JS (Node.js v22.12.0) | 3.12 |
| Julia (ver 1.10.5) | 1.84 |
| SBCL (最適化) | 1.50 |
| GCC -O2 (ver 11.4.0) | 1.19 |
| ocamlopt (ver 4.13.1) | 1.05 |
Chrome の JS と Node.js は、Python や Ruby などバイトコードにコンパイルする処理系とは次元の異なる速さで、ネイティブコードにコンパイルする処理系に匹敵する結果になりました。こんなに速いとは M.Hiroi も予想していなかったので大変驚きました。興味のある方はいろいろ試してみてください。
それでは簡単な例題として FizzBuzz 問題を JavaScript で解いてみましょう。FizzBuzz 問題は 1 から 100 までの値を表示するとき、3 の倍数のときは Fizz を、5 の倍数ときは Buzz を表示するというものです。FizzBuzz 問題の詳細については Fizz Buzz - Wikipedia をお読みください。
プログラムは次のようになります。
リスト : FizzBuzz 問題 (fizzbuzz.js)
function fizzbuzz() {
for (var i = 1; i <= 100; i++) {
if (i % 15 == 0) {
console.log("FizzBuzz");
} else if (i % 3 == 0) {
console.log("Fizz");
} else if (i % 5 == 0) {
console.log("Buzz");
} else {
console.log(i);
}
}
}
JavaScript の場合、関数を定義するときは function を使います。そのあとに関数名と引数を指定します。基本的な制御構造はＣ言語とほぼ同じです。ローカル変数の宣言には var を使います。Ｃ言語と違って JavaScript の変数に型はありません。どんなデータ型でも格納することができます。このように、JavaScript のプログラムはＣ言語によく似ていることがわかると思います。
実行結果は次のようになります。
> fizzbuzz() 1 2 Fizz 4 Buzz Fizz 7 8 Fizz Buzz 11 Fizz 13 14 FizzBuzz 16 ・・・ 省略 ・・・
お気楽 JavaScript プログラミング超入門の続編です。
M.Hiroi が JavaScript の勉強で書いたジャンクスクリプトです。
『JavaScript Programming』の著作権は筆者「広井誠 (Makoto Hiroi) 」が保持します。無断使用や無断転載は禁止いたします。本ページで作成したプログラムはフリーソフトウェアとします。ご自由にお使いください。プログラムの改造や配布もご自由にどうぞ。その際は、出典を明記してくださるようお願いいたします。
ただし、これらのプログラムは無保証であり、使用したことにより生じた損害について、作者「広井誠 (Makoto Hiroi)」は一切の責任を負いません。また、これらのプログラムを販売することで利益を得るといった商行為は禁止いたします。
なお、ソースコードに "Released under the MIT license" の記述があるプログラムは『MIT ライセンス』 で配布します。どうぞご自由にお使いくださいませ。