No244 どうしてJavaScriptがブレイクしたのか？

前回は急遽 Safari の脆弱性についての解説をしました。
この脆弱性については、Apple社が既に対応版をリリースしたようです。
これでまずは安心です。

さて、今回はNo242の続きで、JavaScriptの話に戻ります。
前回まででは、そこそこ利便性は上がるにしても、それほど大した機構とも思えないJavaScriptですが、とあるソフトを契機に大ブレイクします。

今回はそのあたりの解説をします。


1. ホームページでうまくやれないこと

前回までに述べたように、JavaScriptでは入力値のチェックや画像の拡大表示といった繰作性の改善を目的として作成されました。
実際、こういった機構が組み込まれることで、利用者の繰作性は良くなりましたので、十分に価値のある進歩でした。

ですが、それでもWebシステムには足りないものがいろいろとありました。

その一つに時々刻々の状況変化に応じて画面の一部を書き換えるのが、極端に苦手という点があります。

こんなことを書くとイマドキのWebシステムを利用している皆さんは「そんなホームページ(Webページ)はいくらでもあるじゃないか」とおっしゃることでしょう。

ですが、Webページの送受信を行うHTTP（Hyper Text Transfer Protocol:Webページの送信手順）という通信手順では画面の一部だけを更新するような規定はありません。
以前には複数のページをつないで一つのページに見せる方式(frameset)も規定されていましたが、現在はその規約はなくなってしまいました。

ですが、実際にはサイドバーのtwitter発言表示や、株価のリアルタイム表示など、画面の一部を動的に書き換えているサイトはいくらでもあります。

HTTPやHTMLなどでは対応していないのに、どうやって実現しているのでしょうか？


2. そこでJavaScript

ここで登場するのがJavaScriptです。

ところで、twitterの発言表示であれ、株価表示であれ、実現にはサーバと通信が必要です。JavaScriptは繰作性向上が主目的でしたので、サーバとの通信機能はありませんでした。

そこにサーバ通信機能を持ち込んだのはMicrosoft社のIE(Internet Explorer)でした。
これ自体は1999年なのですが、その後数年で多くのインターネットブラウザが追従しました。

当時もJavaScriptの実行機構は既に各ブラウザに搭載されていて、いつでも使える状態となっており、その上で動作するJavaScriptのプログラムを各サイトが提供していました。
こういったプログラムで一部の画面書き換えを行うような操作性改善を実現していましたが、認知度はまだまだ低く一般的とは言えませんでした。

それが一気に変わったのはGoogleマップなどの新世代のWebシステムの登場でした。


3.Google マップをご存知ですか？

Googleマップはご存知の方も多いことでしょう。
登場は2005年2月とのことですので、もう17年も前の話ですね。

このGoogleマップを初めて見た時には驚きました。それまでにも地図を表示してくれるサイトはありましたが、使い勝手がまるで違います。

従来の地図サイトでは、表示している地図の上下左右にスクロール用ボタンがあり、そのボタンを押すとそれぞれの方向の地図を再表示されるというものでした。
上述の通り、HTTPという通信手順には一部だけを変更する方法は規定されていませんから、ボタンを押すと、一度画面が真っ白になり、画面を再描画するまでは待つしかありません。

これはWebシステムの限界であり、どうにもならないことと筆者などは考えていましたが、Googleマップはその思いを見事に覆してくれました。

Googleマップでは地図上でマウスドラッグをすれば、地図が画面上でスクロールし、新たに見えた領域の地図は遅れて表示されます。マウスを大きく動かすと一瞬は地図が真っ白になりますが、除々に小さなブロック単位でその地点の地図が表示されます。

従来の地図サイトとは明らかに使い勝手の次元が違い、時代が変わったことを実感しました。
それまでは、Webシステムは「紙芝居」と思っていたものが、いきなり「動画」になった驚きでした。このようなダイナミックな動作の実現にはWindowsやMacintosh専用のプログラムが必要だったのが、Webブラウザの中でできるようになったのです。

この根底にあるのが、AJAXという考え方でした。


4. AJAXという魔法

AJAXは Asynchronous,JavaScript,XMLの３つの単語の頭文字を取っており、「エイジャックス」と読みます。
　Asynchronous(非同期)
　JAvaScript  ※先頭の2文字
　XML

この３つの要素をうまく組み合わせることで、Webサイトの繰作性を劇的に向上させることができるという考え方（概念）です。

この概念自体は既存の技術の組み合わせに過ぎないのですが、これを具体的にまとめたことで多くの先進的なプログラマが目指そうとする潮流を生みました。

さて、この３つの単語ですが、それぞれに意味があります。

最初のAsynchronous(非同期)の説明をするとプログラマ向けの内容になってしまいますので、ここでは「裏で（知られないうちに）通信する仕組み」と思ってください。

次のJavaScriptはご存知のJavaScriptそのものです。

最後のXMLというのは情報形式の一つで、eXtensible Markup Languageの略で、拡張可能
なマークアップ言語です。
「マークアップ言語」などと言われても何のこっちゃ？でしょうが、要は記述方法の一つだと思ってください。「言語」とは付いていますが、プログラム言語ではありません。
実はHTMLもHyper Text Markup Languageの略で、同じ「マークアップ言語」という単語が含まれています。HTMLは文書（章立てとか見出しとか）の構造を記述するのが目的ですが、XMLはもっと巾広いデータ構造が記述できるデータ形式なのです。

つまり「JavaScript」を使い「XMLなどの様々なデータ」を「裏側で通信」する方式のことをAJAXと呼ぶのです。


5. ではGoogleマップではどうしているのか？

では、GoogleマップではAJAXをどのように使っているのでしょう？

Googleマップのサーバでは全世界を小さな地図ブロックに分割して保管しています。

地図を表示する場合、どの地図ブロックが必要かをJavaScriptのプログラムで調べ、必要な地図ブロックの送信をサーバに依頼します。
画面描画には複数のブロックが必要ですから、いくつもの送信依頼を並行して行います。

この送信依頼はAJAXで行います。ですから、利用者はそんな送信依頼をしていることなどわかりませんし、サーバから送られてきた地図データもJavaScriptのプログラムが受け取りますので、その時点では画面には表示されません。

地図データを受け取ったJavaScriptのプログラムは、利用者のマウスドラッグ量に応じて表示位置を計算し、そこに受信した地図データを表示します。同様の処理を全ての地図ブロックが表示されるまで行います。

利用者が地図をドラッグすると、その移動量をJavaScriptのプログラムが認識し、新たに見える領域を計算し、上と同様にサーバに地図ブロックの表示を依頼します。

こういった処理を行うことで、利用者が知らず知らずのうちにJavaScriptのプログラムがAJAX方式で裏側でサーバと通信を行って画面を完成させるのです。


6. JavaScriptは今や「あって当然」の技術

このAJAXという概念が脚光を浴びたことで、JavaScriptそのものの位置付けが大きく変わりました。それまで「オマケ」感の強かったJavaScriptが、AJAXによって「必須」の技術となったのです。

2022年現在のホームページ(Webページ)では、JavaScriptの利用はごくありふれたものとなっています。

こうなったのは、AJAXのおかげだけではありません。AJAXの使いにくさやJavaScriptの機能不足といった弱点を改善したソフトウェア部品集（ライブラリやフレームワークと呼ばれます）が次々と開発され、レベルアップを果たしてきたからです。

JavaScriptの言語も何度か大きな機能拡張が行われています。
ECMAという標準化団体が機能拡張に関与するなど、セキュリティ面でも十分な配慮がなされ、信頼できる言語となっています。

今や「JavaScriptは無効化した方が良い」などと言う声も聞かなくなりました。今やJavaScriptはHTMLやCSSと並んでWebサイトの構築になくてはならない基本技術なのです。

ブラウザの操作性はもはや2000年頃とは別次元と言える程リッチになっています。

例えば、Microsoft社のオフィスソフト(Microsoft365)ですら、今はブラウザ上で動作します。アプリ版とは多少使い勝手が異なる点はあるものの、十分に使いものになるレベルです。

こういったツール群の充実もあり、現在ではJavaScriptはWebサイトの開発でなくてはならないものとなったのです。


7. まとめ

Webブラウザではホームページの表現力向上のため、HTMLとCSSを扱うことができます。
ですが、時々刻々の状況変化に応じて画面の一部を書き換えるのは、極端に苦手でした。

そのため、JavaScriptをうまく利用してこの弱点を克服する試みがいろいろと行われました。そのような取組みの中でGoogleマップなどの新しい方式を活用するサービスが登場し、従来システムとは一線を画する優れた繰作性を提供しました。
この新しい方式とは、AJAX（エイジャックス）と呼ばれる仕組みでした。これはJavaScriptを積極的に使い裏側でサーバとの通信をしてそのタイミングで必要なデータだけを取ってくるという方式でした。

このAJAX方式の良さはまたたく間に広がりました。
当初の使いづらかった部分も、多くの開発者たちが改善を重ねることで、格段に使い易くなっています。
コミュニティによる開発努力のおかげもあり、今やJavaScriptはWebシステム開発になくてはならないものとなっているのです。

今回で、JavaScriptの解説は終わりとなります。

次回もお楽しみに。

（本稿は 2022年1月に作成しました）