No242 JavaScriptで操作性が向上できるのか？

前回はJavascriptというプログラム言語がインターネットブラウザ（Webブラウザ）の中に組み込まれているというお話をしました。
また、それによって操作性が向上していることも書きました。

ですが、プログラム言語によって操作性の向上なんてできるのでしょうか？
操作性というのはブラウザ側で改善すべき話であって、プログラム言語は関係ないように思えます。

今回はそのあたりの事情について解説します。

※お知らせ
　「がんばりすぎないセキュリティ」はPCメールでの習慣に従い、30文字で改行していました。
　ですが、スマホでは30文字で改行されると非常に読みづらくなります。
　今時ですから、メールをスマホでご覧になっている方も多いでしょう。
　そのため、今号から文中の改行をなくすことにしました。
　PCでご覧の方は見づらい点があるかもしれませんが、ご了承ください。


1. プログラムが必要なホームページ(webページ)？

プログラム言語というのは、その名の通りプログラムを作る時に使うものです。

一般的にプログラムといわれると計算に便利な表計算ソフトや図面を作成するCAD(キャド)ソフト、会社で使う会計管理のソフト、ゲームソフトあたりを思い浮かべる方が多いでしょう。
どれも、利用者が入力した内容を加工して画面表示したり印刷したりするタイプで、対話式と呼ばれています。
一方、DVDレコーダが自動で録画したり、ゲーム機が夜中にアプリをダウンロードするといった非対話式と呼ばれる裏で動くようなプログラムもあります。

ですが、ワープロソフトで保存した文書の中にはプログラムなんて入っていません。
同様に、ホームページ(Webページ)で表示されるデータにはプログラムなんて入っていません。

webページのデータを正しく表示するのはChromeやEdge、FirefoxといったWebブラウザ(インターネットブラウザとも。以下ではブラウザと書きます)の仕事です。
ブラウザが表示しているウィンドウのサイズに合わせて各パーツをカッコ良く並べたりしてページをレイアウトしてくれますが、これは前々回にも解説したCSSを使って実現できます。
わざわざプログラム言語に出張ってもらうまでもありません。


2. プログラムが必要なページは意外に多い

では、プログラムが必要なページとはどんなページでしょう？

まず、短時間で表示内容を変えなければならない場合です。

典形は天気予報やニュースサイトです。こういったサイトでは表示内容は時々刻々変わるわけですが、その時にならないと表示内容はわかりませんから、事前に準備する時間はとれません。
気候やニュースの情報は各所から24時間いつ届くかわからないのですから、ヒトが判断し、サイトに表示する内容を決め、それから手作業でページを作るのではとても間に合いません。

こういった場合は、ニュースが届いた場合にどうするか？をルール化し、その通りに実行してくれるプログラムを作っておくのです。
その処理というのは例えばこんな具合です。（以下は筆者の想像です）
　１）ニュースの付加情報からどのジャンルに属するニュースかを決める
　２）担当者に重要度判断を依頼するメールを送る
　３）重要度によってはニュースをトップにも出す
　４）「最新」アイコンを付ける
こんなのを素早く間違えずに、なんてことを不眠不休で人間が行うことはできません。もしやったとしてもべらぼうなコストがかかります。そういう作業は無給で頑張ってくれるプログラムに任せる方が賢明でしょう。

また、人によって表示内容を変えたい場合もそうです。
これは通販サイトやFacebook・TwitterのようなSNSを思い浮かべればわかりますよね。

自分のショッピング履歴を誰もが見られるのは困りますし、数億人が使っているFacebookの全発言が表示されれば、それはもうカオスでしかありません。
本人の情報だけを表示するには、利用者登録をした上でログインしてもらい、その人用のページを表示する必要があります。

これを人手で行うのはニュースサイトよりさらに難しいのがわかります。
ニュースサイトなら、表示内容は同一でも良いのです。（実際には有料会員向けページは別だと思いますが）
通販サイトやSNSでは、会員ごとに異なるページが必要です。100万人の会員がいれば同じページを100万種類用意しないといけない理屈です。
そんなのできっこありません。


3. なるほど、だからJavaScriptなの？

ここまで読んで「なるほど。だからプログラムが必要なんだ。だからJavaScriptなんだな」と思った方、ちょっと早すぎます。

この話はまだ続きがあるのです。

上記の話はいずれもサービスを提供しているサーバ上でしか動くことのできないプログラムなのです。

どういうことかというと、上記のようなプログラムを動かすには、そのサーバ上でしか見ることのできないデータが必要なのです。
例えば、通販サイトの購入履歴を表示しようとするとこんな情報が必要になります。
　購入者は誰か？
　いつ、何を、いくつ、いくらで買ったか？
　支払い方法は何か？
　配達済か？

こういった情報はデータベースサーバ（DBサーバ)に保管するのですが、DBサーバへのアクセス権はものすごく厳しくしておくのが常識です。
DBサーバには顧客の全ての情報を格納するわけですから、容易にアクセスできないようにするのはむしろ当然でしょう。

DBサーバへのアクセスを許すのは、その情報がないとページが作成できないサーバ（この例なら、購入履歴ページを生成するサーバ）に限定しておきます。こうすることで、他からの不正なアクセスを防いでいるわけです。

ですから、購入履歴を表示するプログラムは、その特定のサーバでしか動作できないことになります。

余談
　アクセス制限はファイアウォールなどと呼ばれるネットワーク機器で行います。
　ファイアウォールはごくシンプルに言えばコンピュータ単位（サーバ単位）でアクセスのOK/NGを判断します。
　サーバAからBへのアクセスはOK、でもサーバCからAへのアクセスはNGといった具合です。

さらに、JavaScriptはサーバではまず使われません。
前回も書きましたが、JavaScriptはインタプリタ型の言語ですので、プログラムとして動かすにはインタプリタが必要です。ChromeやEdgeのようなブラウザにはJavaScriptのインタプリタが入っていますが、サーバにはそんなの要らないので入っていないのです。


4. え？サーバにはブラウザ入ってないの？

ここで、面食らう方がおられるかもしれません。
「なんでインターネットのページを送ってくれるサーバにブラウザが入ってないの？通信するのに要るんじゃないの？」と。

パソコン(PC)に入っているブラウザは、サーバにリクエストを送り、返ってきた情報でページを表示するのが目的のソフトです。
サーバ側にはその逆の働きをするプログラム、つまりリクエストに応えてページを送り返すプログラムが必要です。
要はブラウザはサーバ側では使えないのです。

なお、ブラウザと通信をするサーバ側のプログラムのことはWebサービスを実現してくれるプログラムという意味で「Webサーバ」と呼びます。
Apache（アパッチ）やnginx（エヌジンクスではなくエンジンエックス）といった製品が有名どころです。

また、サーバ側でよく使われるプログラム言語は、Java、PHP、C#（シーシャープ）あたりでしょうか。

余談
　かなりマニアックな話ですが、サーバ側でもJavaScriptが使われているケースもあるにはあります。あまり一般的ではありませんが。

じゃあ、JavaScriptってどこで使われてるのよ？となりますよね。
それはPC側、なんです。


5. JavaScriptはパソコン(PC)で動く

さて、JavaScriptはパソコン(PC)で動くと書きました。

上でも書いた通り、JavaScriptが動作しているそれぞれのパソコンからはサーバ上の重要なデータにはアクセスできません。
そんなのができてしまったら、重大な情報漏洩であり大問題です。

では、PC上でJavaScriptで何をさせるというのでしょうか？

例としてページ内の入力内容で簡単な計算をするプログラムを挙げます。

例えば、体重と身長からBMI（いわゆる肥満指数。正しくはBody Mass Index）を計算してくれるサイトがいろいろあります。
BMI＝体重÷身長×身長ですから、何も難しい計算は必要なく、PCでも十分に実行できます。
こういった場合はPC上で計算した方が、答えが瞬時で表示できますから使い勝手は良くなります。

また、BMIの計算では身長や体重の範囲チェックをPC側で行うこともできます。例えば身長は80cm〜200cmまで、体重も20kg〜120kgまでとし、範囲外の値を入れられた時はその場でエラー表示ができます。入力ミスを防ぐこともまた使い勝手向上に役立ちます。

これ以外にも、こういったいわばミニプログラムで使い勝手が良くなるケースはたくさんあります。
・服のサイズを選ぶと、品切れの色が選べなくなる。
　→ページ表示時に在庫情報を隠しデータとして渡し、サイズ選択時に選べない色を選択不可にする
・商品をクリックすると拡大画像が表示される。
　→拡大画像を隠しデータとして渡し、小さな画像を押すと隠しデータを表示状態にする
・生年月日を入力すると、年齢が自動入力される
・実行する際に「本当に実行していいですか？」などの確認画面を出す

JavaScriptではサーバ側で行うような大規模なプログラムではなく、かゆいところに手が届くようなちょっとした気遣いをプログラムとして実現しようというわけです。

これが最初の疑問に対する答えです。
つまり、JavaScriptのプログラムを使えば、事前のエラーチェックだとか、ちょっとした計算をサーバとの通信なしにその場で実施できるのです。
それによって、利用者は気持ち良くサービスが利用できるようになりますから、Win-Winが実現できたのです。

ですが、JavaScriptは便利な反面、セキュリティリスクを抱えていました。


6. JavaScriptはセキュリティ面では嫌われ者だった

JavaScriptは現代のブラウザには必須の重要機構ですが、初期のJavaScriptは上記の通り使い勝手向上が主目的でしたので、いわばオマケ扱いでした。

当時はMicrosoft社のIE(Internet Explorer)がトップシェアでした。
ところが、IEにはJavaScript関連の脆弱性が続々と見つかり、それを悪用したマルウェアもまた続々と登場していたのです。
そのため「JavaScriptは設定で無効にしておくべきだ」という主張がセキュリティを気にする人々の間で支持されていました。

逆に言えば、無効化しても少々不便になる程度の使われ方で留まっていたとも言えます。


7. まとめ

インターネットのホームページ(webページ)では、例えばニュースサイトなら最新のニュースを表示したり、会員サイトであればその会員情報を表示するなど、タイミングや利用者によって内容の違うページを表示する必要があります。
あらかじめページを準備しておける場合ならともかく、ニュースサイトなど事前にページを用意しておくことは不可能です。
だから、プログラムを使ってその場でページを生成するわけです。

しかし、このようなプログラムはサービス提供元のサーバ上でしか動かせません。なぜなら処理に必要な情報はそのサーバでしか取得できないからです。
また、こういったサーバ上で動くプログラムにはJavaScriptは使われません。

JavaScriptはむしろ利用者側のパソコン(PC)で使われています。
ちょっとした計算、入力値のチェック、選択可能なボタン類の制御、拡大画像や確認ウィンドウの表示、などはわざわざサーバに通信を行わなくてもPC側だけで制御が行えます。こういったちょっとした使い勝手の向上策にJavaScriptは威力を発揮します。

一方、初期にはセキュリティ上の脆弱性が特にMicrosoft社のIE(Internet Explorer)でたくさん見つかったのもあり、「JaavScriptは無効化すべきだ」という主張もありました。

このような経緯で割と軽い使い方を中心に始まったJavaScriptですが、AJAXと呼ばれる技法を駆使するサービスが登場し、爆発的に利用が拡がります。

次回は、このJavaScriptの変化について解説します。
次回もお楽しみに。

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