はじめに

対象読者と環境について

この文書の対象読者は、すくなくとも筆者である私の狙うところとしては、「パソコンのWebブラウザで、いまこの文書を読めている人」です。ブラウザでWebページを見るくらいのパソコンの知識があることが条件です。できれば、twitterでもFacebookでも掲示板でもいいですが、キーボードで何らかの文章を打ち込むことができれば言うことありません。

使うパソコンは、Windows10を前提とします。現時点で初心者が一番使ってそうなのはWindowsですし、私はMacを持ってませんし。

「そもそもぼくのパソコンはWindows10なの?」という人はこちらへ。

あなたのパソコンがMacだったとしても、JavaScriptはMacのブラウザであるSafariでも動くし、適当に読み替えていただければと思います。「うちのパソコンはUbuntu Linuxなんだけど…」という人は、おそらく説明するまでもありませんね。「パソコンにくわしい兄貴がLinuxを入れたらしいんだけど俺はそんなのさっぱりわからないんだよ!」という人はお兄さんに聞いてください。

そして、Windows10を使っている人には、対象とするブラウザはEdge(エッジ)を前提とします

Edgeを前提とするのは、Windows10に標準でインストールされているからで、別段私がEdgeが好きだとか、そういうわけではありません。実際私は普段は家ではFirefoxを使っています。

2021年6月現在、Windowsで使われているブラウザといえば、以下くらいでしょうか。

表1: Windowsで使われているブラウザ
No.アイコン名前製造元
1Edgeマイクロソフト
2(2年くらい前の)Edgeマイクロソフト
3Chrome(クローム)Google(グーグル)
4FirefoxMozilla Foundation(モジラ・ファウンデーション)
5インターネットエクスプローラー(通称IE)
この入門の対象外
マイクロソフト

今この文書をWindowsで読んでいるのなら、タスクバーに今使っているブラウザのアイコンが表示されていることでしょう(タスクバーって何? という人もこちらへ)。

1番目のEdgeが、本記事で対象とするブラウザです。2番目の古いEdgeは、さすがにもう使っている人はほぼいないと思うのですが、2021年の3月にサポートが切れているので、万一まだ使っているならアップデートしておきましょう。3番目のChromeは、おそらく現在もっともシェアが高い(使っている人が多い)ブラウザだと思いますが、私は個人的に嫌いなので家では使っていません。4番目が私が普段使っているFirefoxです。ここまでのブラウザは、この入門で作成するJavaScriptは動くはずです。

問題は、5番目のインターネットエクスプローラーです。これは最新バージョンのIE11でさえ、2013年にリリースされた、ずいぶん古いブラウザで、いまどきのJavaScriptに対応していません。そのため、この入門では、インターネットエクスプローラーには対応しません

「環境」とは何か

あなたのパソコンの環境は? と聞かれて、「えっ、日当たりのいい窓際に置いてますけど……」と答える初心者、という笑い話がありますが、この「環境」という言葉も割と意味専門用語ですね(だから初心者がそれを知らないのは当たり前で、知らないことを笑いものにする側には立ちたくないものです)。

コンピュータの世界で「環境」と言えば、使っているパソコンの種類とか、OSの種類とか、積んでいるメモリの量とかのことを指します。たとえば私がこの文章を書くために使っている環境は、Panasonic Let's Note CF-SX4のWindows10で、メモリは8GBです。環境という言葉の指す範囲は割と文脈によって変わって、たとえばWebページを見るときの環境ならブラウザを含むでしょうし、プログラムを作るなら、プログラミング言語やそのバージョンも環境に含まれます。最初に書いた「開発環境」というのは、プログラムを作るための環境のことです。

人間がパソコンを使って何らかの作業をしたり、あるいはパソコンの中でプログラムが動くときには、その「環境」の中で作業したりプログラムが動いたりするわけです。そう考えると「環境」という言葉が使われていることも、イメージしやすいのではないでしょうか。

「いまどきメモリ8Gの環境でやってられるか!」とか、「このOSの環境ではそのプログラムは動かないよ」という言い方をしたりしますが、これは「環境」の中で、人間が作業したり、プログラムが動いているから出てくる言葉だと思います。

英語とか専門用語について

現状、プログラムを書くとなると、やはり英語は避けて通れません。英語のWebページで使い方を調べる、とかまでは行かなくても、そもそもJavaScriptという言葉自体英語ですし、プログラムも、英単語を並べて書きます。私としては、こちらにも書いたように、この入門は12歳くらいの子どもにも読んでほしいと思っていますが、それぐらいの子どもにとっては、たとえば「while」とかいう言葉が出てくるだけで、かなりおっかなく感じるのではないでしょうか。どう読むのかもわからないでしょうし。

なので、この入門では、初出の英単語にはできるだけ読み仮名をつけます。上の方で「Edge(エッジ)」のように書いているのはそのためです。そして、その読み方は、「日本のプログラマーが普通に会話に使う」読み方を採用します。たとえばwhileなら、英語ネイティブが発音したら、「ワイル」か「フゥアイル」ぐらいに聞こえると思いますが、日本人プログラマのカタカナ英語なら「ホワイル」で問題ないというか、むしろそっちでないと通じないでしょう。もっともこの辺の話にはいろいろ論争があって、warningは多くのプログラマは「ワーニング」と読むが正しくは「ウォーニング」だろう、といった主張を聞くこともありますが、私は、カタカナ言葉を英語の発音に近づける必要はあまりないと思っているのでwarningは「ワーニング」と読みます。この入門の読み仮名で読んでいれば、まず恥をかくことはないでしょう。

また、専門用語については、すぐに説明している場合は別として、背景を黄色にしています。黄色背景の専門用語は、マウスカーソルを乗せることで説明が表示されます。この入門中に解説がある場合は下線が付いていて、クリックすると別タブでそのページが開きます。一度リンク先を見ると、背景の黄色は、ちょっと濃い色になります。

まあ、リンクなしの黄色背景になっている用語については、この入門では説明する必要がないと思われる用語ですから、特に理解できなくても問題ないと思いますし、リンクになっているところは、いずれリンク先を読めばよいので、こちらもその時点でわからなくても問題ないでしょう。

知らない単語だが黄色背景になっていないとか、黄色背景の説明を読んでもわからないとか、そういうこともあるとは思いますが、そういう場合はGoogle等で検索すればよいでしょう。

カコミの補足について

この入門には、ところどころに、紫っぽい背景で囲んだ文章があります(このすぐ下の、『「Windowsパソコン」とは何か』等)。これは補足として書いたもので、読み飛ばしても意味は通ると思います。ときどきちょっと高度なことが書いてあったりするので、難しいようなら読み飛ばして構いません。

「Windowsパソコン」とは何か

たとえば今、ビックカメラなりヨドバシなりにパソコンを買いに行けば、店員さんに「Windowsにしますか? Macにしますか?」と聞かれると思います。

このうちMacは話が簡単です。Macというのはアメリカのアップルという会社が売っているパソコンのことです。昔はMacintoshと呼びましたが、今は略称(愛称?)のMacと呼ぶのが普通ですね。

それに対し、「Windowsパソコン」は、国内外いろいろなメーカーが作っています。共通点は、OS(Operating System/オペレーティングシステム)としてWindowsが搭載されている、ということです。オペレーティングシステムとは、コンピュータの基本操作や資源(メモリとかCPUとかディスクとか)管理を行うプログラムのことです(おいおい説明します。今理解する必要はありません)。Windowsというのは、Microsoft社が開発したOSです。ちなみにMacにも当然OSはあって、Mac OSといいます。

これは、スマートフォンにおけるiPhoneとAndroidの関係に似ています。iPhoneはアップルが作っているスマートフォンであるのに対し、Androidのスマホはいろいろなメーカーが作っています。AndroidはGoogleが開発しているOSです※1

Androidの場合、OS自体のソースコード――人間が読める形のプログラムが公開されていて、各メーカーは、これが動くハードウェア(スマホ等の「機械」のこと)を勝手に作ってください、という状態ですが、「Windowsパソコン」は、歴史的な経緯はちょっと違います。

時は西暦1981年までさかのぼります。この年、IBMが、「IBM PC」というパソコンを発売しました。これが現存する「Windowsパソコン」の最初の先祖となります。なお、この頃、個人向けコンピュータとしての「Personal Computer」は既にありましたし、「PC」という名前も、たとえば日本のNECの「PC 8001」は1979年発売ですからIBM PCより2年前です。

IBMは、IBM PCの発売にあたり、IBM以外の会社が周辺機器やソフトウェアを開発できるよう、回路図やBIOS(Basic Input/Output System 今は知る必要はありません)を公開しました。これによりIBM PCが普及したわけですが、別のメーカーが、「IBM PC互換機」を発売する、という事態にもなりました。

その後、IBM PCはIBM PC XT、IBM PC ATと進化しました。現在の「Windowsパソコン」は、このIBM PC ATの互換機(PC/AT互換機)の子孫です。その後、互換機にシェアを奪われたIBMは、IBM PC PS/2という後継機を発売しましたが、新しい拡張バスであるMCAバスに対して高額なライセンス料を取るようにしたためか、結局PS/2の系譜はそのまま途絶えてしまいました。ただ、マウスやキーボードの接続コネクタの規格としてはその後もしばらく残っていましたし(今はほぼUSBに置き換えられましたが)、後述するVGAはPS/2で初めて搭載されたものです。

この頃のパソコンは、まだWindowsも何もありませんから、Microsoftが開発したOSであるMS-DOSが搭載されていました。そして、当初は日本語が表示できませんでした。しかし、PS/2に搭載されたグラフィックの規格VGA(Video Graphics Array)が互換機含め普及すると、グラフィックの機能を用いて日本語を表示するDOS/VというOSが日本IBMにより開発されました。これにより、PC/AT互換機が日本でも普及することになったわけです。PC/AT互換機が一時期「DOS/V機」と呼ばれていたのはこれが理由です(今でも、「DOS/V」という言葉は、店名や雑誌名に残っていたりしますね)。

今のパソコンは、もちろんオリジナルのIBM PC ATとは桁違いに性能が上がっていますし、オリジナルのIBM PC ATでWindows10が動くはずもありません。そういう意味では、今のPCを「PC/AT互換機」と呼ぶのもどうかと思いますし、いまどきDOS/Vを使っている人もいないでしょうから「DOS/V機」も変でしょう。

では何と呼べばいいのか? と考えると――やっぱり「Windowsパソコン」なんですかねえ。

JavaScriptとは何か

これからここで扱うJavaScriptというのは、プログラミング言語のひとつです。

プログラミング言語と言えば、CとかC++とかJavaとかC#とかRubyとかPythonとかPHPとか、数えきれないくらいいろいろありますが、JavaScriptは、Webブラウザの中で動くというところに特徴があります。

Webブラウザとは、Webページを見るためのプログラム(ソフトウェア)です。つまり今あなたがこれを読むために使っているものです。そして、JavaScriptは、Webページの中に、プログラムを埋め込むことができます。

たとえばこの下にあるのは、身長と体重からBMI(Body Mass Index)という値を計算し、太りすぎかどうかを判定するプログラムです。BMIは、以下の式で計算します。

BMI = 体重(kg) ÷ (身長(m) × 身長(m))

こうして得られたBMIを元に、以下の表で、やせすぎとか太りすぎとかを判定します※2

表2: BMIの判定表
BMI判定
18.50未満痩せ
18.50以上~25.00未満標準
25.00以上~30.00未満肥満(1度)
30.00以上~35.00未満肥満(2度)
35.00以上~40.00未満肥満(3度)
40.00以上肥満(4度)

下の入力フィールドに身長、体重を入力して「計算する」を押してみてください。「ここに結果が表示されます。」と書いてあるエリアに、BMIの値と、判定が表示されます。

身長: cm 体重: kg

ここに結果が表示されます。

※ちゃんと数値を入力しているつもりなのに「身長は数値で入力してください」というエラーが出る人は、全角文字で入力していませんか? 「全角って何?」という人はこちらへ。

こうしてWebページの中にプログラムを埋め込めるので、ここにあるようなUFOゲームも作れるわけです。

ちなみにBMI計算のプログラムは、以下のような感じになります(左端に青文字で書いてある行番号はこのページでの説明用に付けたもので、本来のプログラムでは不要なものです)。

リスト1: BMI計算プログラム
  1: "use strict";
  2: // 「計算する」ボタンのオブジェクトを取得する
  3: const button = document.getElementById("calc_bmi_button");
  4: 
  5: // 「計算する」ボタンをクリックしたときの動作に、
  6: // calcBmiという名前の関数を割り当てる。
  7: button.onclick = calcBmi;
  8: 
  9: // BMIを計算する関数 calcBmi
 10: function calcBmi() {
 11:   // 身長と体重の入力欄から入力された文字列を取得し、
 12:   // それを数値に変換する。
 13:   const height = Number.parseFloat(document.getElementById("height_text").value);
 14:   const weight = Number.parseFloat(document.getElementById("weight_text").value);
 15: 
 16:   // 結果表示用の要素(「ここに結果が表示されます。」と表示されている要素)を
 17:   // 取得しておく。
 18:   const result = document.getElementById("bmi_result");
 19: 
 20:   // 身長や体重に数字が入っていなかった場合のエラーチェック
 21:   if (Number.isNaN(height)) {
 22:     result.textContent = "身長は数値で入力してください。";
 23:     return;
 24:   }
 25:   if (Number.isNaN(weight)) {
 26:     result.textContent = "体重は数値で入力してください。";
 27:     return;
 28:   }
 29:   // BMIの計算。BMIは 体重(kg)を身長(メートル)の2乗で割ることで算出します。
 30:   const bmi = weight / ((height / 100.0) * (height / 100.0));
 31: 
 32:   // 結果表示の前半部分。toFixed(1)は、小数点以下1桁までの
 33:   // 文字列に変換する、という意味。
 34:   let resultText = "あなたのBMIは" + bmi.toFixed(1) + "です。";
 35: 
 36:   // 算出されたBMIを元に判定を行い、結果表示の後半部分をくっつける。
 37:   if (bmi < 18.50) {
 38:     resultText += "痩せすぎですね。";
 39:   } else if (bmi < 25.00) {
 40:     resultText += "普通体重ですね。";
 41:   } else if (bmi < 30.00) {
 42:     resultText += "肥満(1度)です。";
 43:   } else if (bmi < 35.00) {
 44:     resultText += "肥満(2度)です。";
 45:   } else if (bmi < 40.00) {
 46:     resultText += "肥満(3度)です。";
 47:   } else {
 48:     resultText += "肥満(4度)です。いくらなんでも太りすぎです。";
 49:   }
 50:   result.textContent = resultText;
 51: };

これが書けるようになればあなたもJavaScriptプログラマです。

「//」に続けて書いてある日本語は、コメント(comment)といって、プログラムの説明のために書くものです(たとえば2行目も5行目も6行目も、まるごとコメントです)。コメントはプログラムの実行には一切関係しない、人間が読むためのものです。そのコメントをたくさん入れたので、なんとなくでも意味が分かったりしないでしょうか。

たとえばBMIの計算は30行目で行っています。これは普通に計算式で、BMIは、体重(kg)を身長(メートル)×身長(メートル)で割ることで算出できますから、cmで入力した身長(height)を100で割ってメートルにして、かけ算して2乗※3にして(まだ習っていない読者のために説明すると、ある数の2乗とは、その数同士を2回かけたものです。3回かけたら3乗です)、体重(weight)をそれで割っています。

BMIを元に、痩せすぎとか太りすぎとかの判定を行っているのは37~49行目です。これはif文(イフぶん)による条件分岐です。英語でifとは「もし」という意味なので、「もしbmiが18.50より小さければ~」という判定を37行目で行っています。39行目のelse(エルス)は、英語なら「さもなければ~」というような意味で、if文で条件が成立しなかったとき、つまりbmiが18.50より小さくなかったときにelse側が実行されます。

ここでの説明はこのへんにしておきますが、なんとなくプログラムというものの雰囲気はつかめないでしょうか(もちろん今わからなくても問題ありません。おいおい説明します)。

なお、Webページそのものは、HTML(エッチティーエムエル/Hyper Text Markup Language)というJavaScriptとは別の言語で書きます。つまり、この文章もHTMLで書いています。

このページのHTMLは、ブラウザがEdgeなら、ページの適当なところを右クリックして「ページのソース表示」を選択することで表示できます。

BMI計算プログラムでは、身長、体重を入れる入力フィールドや「計算する」のボタンがありますが、これもHTMLとして書いており、該当部分は以下のようになっています。

リスト2: BMI計算プログラムの数値入力部分のHTML
 83:   <p>
 84:     身長:<input type="text" id="height_text" size="3"> cm
 85:     体重:<input type="text" id="weight_text" size="3"> kg
 86:     <button id="calc_bmi_button">計算する</button>
 87:   </p>
 88:   <p>
 89:     <span id="bmi_result">ここに結果が表示されます。</span>
 90:   </p>

これもまあ、今わからなくても問題ありません。

JavaScriptという言語は、かつてネットスケープナビゲータ(Netscape Navigator)というWebブラウザを作っていたネットスケープコミュニケーションズ(Netscape Communications)という会社で、1995年に、ネットスケープナビゲータのバージョン2向けに作られました。実際に作ったのはブレンダン・アイク(Brendan Eich)というプログラマです。彼によれば、JavaScriptは、Webデザイナ向けに作った言語だそうです。つまり、毎日ガリガリプログラムを書く本職のプログラマではなく、Webページのデザインをするような、それほどプログラミングに詳しくない人でも書けることを目指して設計された言語のようです。実際、JavaScriptは手軽に書ける言語で、昔、個人が「ホームページ」を作ることが流行ったころ、嬉しがってホームページを作った人が自分のページの飾りつけをするのによく使われました。たとえば、下の「なんかキラキラするやつ」ボタンを押して、ちょっとマウスカーソルを動かしてみてください。※4

……うざいでしょう(笑)。

こんなうざいだけのプログラムを得意になって組み込むやつがそれなりにいたせいで(そして、当時のコンピュータの処理能力ではそれだけで結構表示が重くなったりしたせいで)「JavaScriptはうざいだけだからブラウザの設定でオフにしておけ」なんて言われた時代もありましたが、そんなことを言っていた人も、今となってはJavaScriptをオフにはしていないことでしょう。JavaScriptは今や多くのページで実用的に使われており、オフにしていたのではまともにWebを見ることすらできません。

それはさておき、JavaScriptは1995年に発表された言語ですから、もう四半世紀の歴史があります。これだけ長く使われていると、その間にいろいろ機能拡張したりして言語が変わってきます。

上記の通り、JavaScriptは1995年に開発されましたが、1997年にはECMA(エクマ/European Computer Manufactures Assosiation:欧州電子計算機工業会)にて標準化されました。当初のJavaScriptはブラウザごとに動きがちょっとずつ違ったりしていましたが、標準化団体にてそれを統一したわけです。よって、現在JavaScriptと言われているプログラミング言語は、言語仕様としては、正しくはECMAScript(エクマスクリプト)です。ただし、ECMAScriptは、Webブラウザに固有な機能については定義していない(node.jsをはじめとしてECMAScriptはWebブラウザ以外でも動いています)ため、DOM APIをはじめとするブラウザ固有の機能を追加したものが、我々がWebブラウザで使用できるいわゆるJavaScript、ということになります。

ECMAScriptには、以下のバージョンがあります。

表3: ECMAScriptのバージョン
エディション公開日略称
11997年6月ES
21998年6月ES2
31999年12月ES3
4放棄
52009年12月ES5
5.12011年6月ES5.1
6(2015)2015年6月ES2015 またはES6
7(2016)2016年6月ES2016 またはES7
8(2017)2017年6月ES2017 またはES8
9(2018)2018年6月ES2018 またはES9
10(2019)2019年6月ES2019 またはES10
11(2020)2020年6月ES2020 またはES11

とりわけ重要な大変更が行われたのが2015年のES2015で、この年から、ECMAScriptは毎年改定されることになり、ES2015のように西暦付きの名前で呼ぶことが推奨されるようになりました(とはいえ、ES6のような呼び方も結構残っています)。

この入門ではES2015を扱います。そして、マイクロソフトの古いブラウザであるインターネットエクスプローラー(略称IE)は、ES2015に対応していません。上で、インターネットエクスプローラーには対応しません、と書いたのは、そういう意味です。

IEは、もはや開発元であるマイクロソフトからして、「IEを使っている人は早くEdgeに移行してくれ」と懇願しているようなブラウザです。実のところ企業内の社内サイトなどでは、まだIEが捨てられない、といったケースも(いまだに)ありますが、趣味の世界ならもうIEは捨ててしまってよいでしょう。

このようにJavaScriptは長いあいだバージョンアップを繰り返してきた言語なので、ネットで検索して「JavaScript入門」のようなページを見つけても、そのページが古いと、サンプルとして載っているプログラムが「古い書き方」になっているケースもあります。まあJavaScriptのバージョンアップは、「古い書き方のプログラムも動くように」(後方互換性といいます)なされてきたので古い書き方でも今のブラウザでちゃんと動きますし、「新しい書き方はわかりにくいんじゃねえ?」みたいなケースも結構あって、新しい書き方の方が常によいとも言えません。この入門でのサンプルプログラムは、私の主観で、初心者にわかりやすいと思われる書き方で書いています。

ただ、この「初心者にわかりやすい」というのは結構な罠で、前述のようにJavaScriptは「Webページのデザインをするような、それほどプログラミングに詳しくない人」向け、つまり初心者向けの言語です。そこで作者のブレンダン・アイクは、ちょっと間違ったくらいなら、エラーにするのではなく、なんとなくでも動くように言語を設計しました。たとえば、上のBMI計算プログラムでは、ほとんどの行の後ろにセミコロン「;」がついていますが、実はJavaScriptでは、このセミコロンを書かなくても(たいていのケースで)動きます。これはブレンダン・アイクによれば「Tolerate “minor” errors (missing semicolons)」(訳:小さなエラーは許容する(セミコロンのつけ忘れのような))という方針によるものだそうです(参考:JavaScript Ten Years)、

しかし、私も長いことプログラムを書いていますが、セミコロンのつけ忘れのような軽微なポカであれ、ミスはちゃんとエラーにしてくれる方が、経験上ずっと気楽です。その点、JavaScriptは、ミスがあってもエラーにならず、しかしプログラムはやっぱり正しく動かないという事態が起きやすい言語で、正直、初心者こそ苦労しそうです。

そこで、ES2015から導入されたのが、上のBMI計算プログラムの先頭にある以下の1行です。

"use strict";

この1行があることで、JavaScriptはstrictモード(ストリクトモード:厳格モード)となり、通常よりもエラーチェックが厳しくなります。今後新たに書くJavaScriptプログラムでは、strictモードを使う方がよいでしょう。まあ、strictモードでも、上述の「セミコロンの付け忘れ」はエラーにはなりませんが、たとえば、以下のように変数を宣言するとして(「変数」とか「宣言」とかはまた後で説明します。今は雰囲気だけ見ておいてください)、

let myHeight = 170; // 私の身長は170cm

strictモードでない場合、このletを書かなくても動きます。

myHeight = 170; // strictモードでない場合、これもOK

しかし、letを書かなくてエラーにならないということは、今度このmyHeightの値を変えるために再度代入しようとして、しかしそこでミスタイプした、という場合、別の変数myHaightが作られるだけで、エラーになりません。

myHaight = 173; // HeightをHaightにミスタイプした

strictモードなら、新たに変数を宣言したければlet(またはconst)が必須なので、このようなミスはエラーとしてJavaScriptの処理系が検出してくれます(処理系とは、プログラミング言語を実行するプログラムのことで、JavaScriptの場合はブラウザを指します)。

おそらくこれからみなさんは、何らかのプログラムを書くごとに、必ずたくさんエラーを出しますあなたのミスを、処理系が見つけてくれるわけですから、そういう時に「なんだこの野郎!」と思ってはいけません。エラーを見つけてくれる処理系さんに感謝して、ちゃんとミスを直しましょう。

strictモードにすればいくぶんマシになるとはいえ、それでもJavaScriptは、間違いの検出が遅くなりがちな言語です。これは、「変数に型のない」言語であるという性質によるもので、こういう言語は手軽に書ける、と言われることもありますが、実際にはミスの発覚が遅れ、後でプログラムを読むときにも情報がなくて読みにくく、とりわけ初心者にとって、よいことなどありません(断言)。その上、JavaScriptは、プロトタイプベースのオブジェクト指向言語というかなり変態、いえちょっと珍しい言語です。いまどきのプログラミング言語はたいていオブジェクト指向の機能はありますが、JavaとかRubyとかPythonはクラスベースのオブジェクト指向言語であって、プロトタイプベースではありません※5

ただし、JavaScriptは元々はプロトタイプベースのオブジェクト指向言語なのですが、ES2015からついにクラスの機能が導入されました(見せかけだけ、ではあるのですが)。また、最近はJavaScriptの変数に型注釈という形で型を付けることができるTypeScriptという言語も人気です。こうしてみると、なんだみんな結局クラスや変数の型が欲しかったんじゃないか20年も遠回りしてたのかよ、と言いたくなりますね。

JavaとJavaScriptは「メロンとメロンパンくらい違う」?

JavaScriptと同じようなプログラミング言語で、「Java」という言語があります。

JavaとJavaScriptはまったく違う言語です。JavaScriptはもともとLiveScript(ライブスクリプト)という名前だったのが、当時人気だったJavaというプログラミング言語に便乗するため、Javaの開発元であるサンマイクロシステムと、JavaScriptの開発元であるネットスケープが当時提携したこともあって、JavaScriptと名前を変えられたのです。その名前以外、JavaとJavaScriptには何の関係もありません。JavaとJavaScriptはメロンとメロンパンくらい違います――という説明が、JavaScriptについてはよくされます。この「メロンとメロンパンくらい違う」のところは、「インドとインドネシアくらい違う」「オーストリアとオーストラリアくらい違う」等々いろいろなバリエーションがあります。問題は、このたとえが成立するほど、本当にJavaとJavaScriptは別物なのか、というところです。

JavaScriptは、確かにLiveScriptから改名されたのですが、LiveScriptよりもさらに前には「Mocha(モカ)」と呼ばれていました。これはコーヒーの名前です。そしてJavaもコーヒー(ジャワコーヒー)の名前です。MochaはJavaより後に開発されているので、名前からしても、Javaを意識していたように見えます。

「JavaScriptという名前は、まるでJavaのスクリプト言語版のような印象を与えるが、実際はそうでなくてまったくの別物だ」という主張も見ることがあります(たとえばここ)。ここでの「スクリプト言語」というのは、簡単なプログラムを手っ取り早く書ける言語、というような意味です。

実際、JavaScriptは、Javaと違ってコンパイルという作業が不要だったり、変数の型宣言が不要だったりと、「簡単なプログラムを手っ取り早く書ける」というスクリプト言語らしい特性を持っています(そもそも名前がJava「Script」なわけですし)。でも、前述の通り元はLiveScriptで商売の都合で改名されただけだから、Javaとは無関係だ、と言いたいわけでしょう。

この点については、JavaScriptの作者であるブレンダン・アイク自身が、以下のように語っています(JavaScript Ten Years)。

当時の状況について説明が必要でしょう。登場当時のJavaは、「Javaアプレット」という、ブラウザで動作するプログラムを作るための言語でした。ネットスケープは当時大流行したWebブラウザであるネットスケープを作った会社です。ネットスケープでもJavaアプレットは動いたわけですし、その状況でなぜもうひとつプログラミング言語を作る必要があるのか、とネットスケープの経営者は聞いたわけです(無理もないでしょう)。

それに対するブレンダン・アイクの回答が、「JavaScriptはWebデザイナーのための言語だ」というものであるわけですから、「JavaScriptはJavaのスクリプト言語版だ」という言説は、それなりにもっともであると思えます。

実際、JavaとJavaScriptは、プログラムの見た目はかなり似通っています。たとえば先ほどのBMI計算プログラムの一部をJavaで書き直すと、こんな感じになります。

@Override
public void actionPerformed(ActionEvent e) {
    String heightStr = this.heightField.getText();
    String weightStr = this.weightField.getText();
    double height = 0;
    double weight = 0;
    String message = null;
    try {
        height = Double.parseDouble(heightStr);
    } catch (NumberFormatException ex) {
        message = "身長は数値で入力してください。";
    }
    try {
        weight = Double.parseDouble(weightStr);
    } catch (NumberFormatException ex) {
        message = "体重は数値で入力してください。";
    }
    if (message != null) {
        this.messageLabel.setText(message);
        return;
    }
    double bmi = weight / ((height / 100.0) * (height / 100.0));
    message = String.format("あなたのBMIは%.1fです。", bmi);
    if (bmi < 18.50) {
        message += "痩せすぎですね。";
    } else if (bmi < 25.00) {
        message += "普通体重ですね。";
    } else if (bmi < 30.00) {
        message += "肥満(1度)です。";
    } else if (bmi < 35.00) {
        message += "肥満(2度)です。";
    } else if (bmi < 40.00) {
        message += "肥満(3度)です。";
    } else {
        message += "肥満(4度)です。いくらなんでも太りすぎです。";
    }
    this.messageLabel.setText(message);
}

JavaもJavaScriptも、ほとんど同じに見えるのではないでしょうか。

「いや、それはJavaもJavaScriptもどちらもC言語を祖先としているからだ」という反論があるかもしれません。確かに、ブロックを表すのに波括弧{ }を使うとか、そういうところはCから引き継いだものです。しかし、それ以外にも、たとえば文字列に対するメソッド名のcharAt()とかindexOf()とかstartsWith()とか、JavaScriptはあからさまにJavaに合わせています。上で挙げた文書「JavaScript Ten Years」の続きには、「Javaに合わせるようにプレッシャーがあった。そのため、Dateの2000年問題のバグも、Javaから引き継ぐことになった」という記載もあったりします(2021年現在、getYear()が121を返すことだと思います)。

このようにあからさまに「Javaに合わせた」のが、最初からなのか商売の都合でJavaScriptに改名された後のことなのか、MochaやLiveScriptの資料が見当たらなくて正直私にはわかりません。LiveScript時代は大文字と小文字を区別しなかったという話もありますし、このページを見ると「LiveScriptの文法はJavaに似ていたから」JavaScriptに改名された、と書いてあったりします。ただ、いつ「Javaに合わせた」にせよ、JavaScriptとして世に出てきた時点で、JavaScriptはJavaに似せて作られていたのは確かです。

――とはいえ、見た目こそ似ていても、プログラミング言語としての性質は、JavaとJavaScriptは見事なまでに違います。Javaはコンパイルが必要ですがJavaScriptは不要です。Javaはうるさいくらいにコンパイルエラーを出す静的型付け言語ですが、JavaScriptは変数に型がない言語です。Javaはクラスベースのオブジェクト指向言語ですが、JavaScriptは(元々は)プロトタイプベースのオブジェクト指向言語です。こういった違いを考えれば、「見た目は確かに似ているが、中身はまったく別の言語だ」と言えるのは確かだと思います。

私の感覚だと、JavaとJavaScriptは、「メロンとメロンパンくらい違う」というよりは、「サメとイルカくらい違う」あたりにしておくのが妥当だと思います(それはつまり、「見た目以外はまったく違う」という意味なのですが)。


参考ページ:JavaScript の生い立ちを探る

https://www.markupdancing.net/archive/20081111-083300.html

正直、このページを見なければ、この長い補足は書かなかったと思います。


「JavaScript」はここから始まった、1995年のJavaScriptリリースはこんな感じ(GIGAZINE)

https://gigazine.net/news/20201216-javascript-initial-release/

JavaScriptが、当初、「Javaを補完するもの」として紹介されていることがわかります。しかし、「つまり、クライアントとサーバーの両方でJavaScriptを実行することができます。」とあるけど、この時点(1995/12/04)でサーバサイドで動くJavaScriptなんてあったっけ?

公開日: 2021/06/20



次のページ | ひとつ上のページに戻る | トップページに戻る