古いオフィス街の一角に、元エンジニアのマスターとAIロボットが営む喫茶店がある。今日も客がドアを開けた。
ドアベルが鳴って、三人連れが入ってきた。
六十手前くらいの女性が三人。声が明るく、友達同士の集まりのようだ。
「いらっしゃいませ。三名様ですね」
カウンターの向こうから声がした。踏み台に乗って、ようやくカウンターに手が届くくらいの、小さなロボットが立っている。
三人が、揃って足を止めた。
「……かわいい」
「うちの看板でしてね」奥からマスターが顔を出した。「お好きな席へどうぞ」
三人が窓際の席に落ち着いて、めいめいに注文をする。マスターがカウンターの中に戻って、キャニスター缶の豆をミルへ移しはじめた。
「──で、結局その膝、どうするの」
「どうもしない。歳ですねって言われて終わり」
「モネモネのとこ、下の子は決まったの」
「決まった決まった。やっと出ていった」いちばん奥の女性が、手をひらひらさせる。
「うちなんて、まだいるわよ。二十八」
三人が笑った。
マスターの手が、止まった。
すくいかけた豆が、缶の上で止まっている。
「もんさ、あんた、まだ夜中までネットやってるの。もう十一時まわるまで我慢しなくても電話代かからないよ」
「ちがうちがう。動画見てたら、つい遅くなっちゃうだけ」
三人はまた笑った。
マスターが、ミルの豆をいったん缶へ戻した。それから、はじめから数え直した。
しばらくして、コーヒーを三つ盆に乗せて運んできた。
一つ、二つと置いて、最後の一つを置くときに、ふと口を開いた。
「あの……人違いでしたら、申し訳ありませんが」
三人が、顔を上げた。
「昔、うきうきチャットにいらした方ですか」
三人が、黙った。
「……え」奥に座った女性が、マスターを見る。「なんで」
「私は、ホーです」
一拍あった。
「……えっ」
「えっ？」
「ホーって」手前の女性が、身を乗り出した。「あの、ホー？」
「ええ」
「うそでしょ。なんでこんなところにいるの！」奥の女性が、椅子から半分立ち上がった。
「ここが、私の店ですから」
「え、ちょっとまって、すごいすごい！」手を打って笑う。「なにそれ！ 喫茶店！」
「待って待って。私、顔はじめて見た」
「私も」
「私はオフ会で会ってるわ。変わったねー、お互い」奥の女性が笑う。
マスターが、盆を胸に抱えたまま、しばらく何も言えずにいた。
「……いや」ようやく、そう言った。「私も、驚いております」
「あのオフ会、何人来たんだっけ」
「七人でしたよ」
「うそ。もっといたでしょ」
「七人です」マスターが、まだ落ち着かない顔で笑った。「……ずいぶん昔の話ですが、よく覚えているものでしてね」
「昔よ。ほんとに昔。あんた、あのころ学生だったでしょう」
「はい」
「ほらね」奥の女性が、両隣を見る。「私、もう子どもがいたのよ」
三人が、また笑って、椅子に座り直した。
そのあとは、また今の話に戻った。
聞くともなしに聞いていると、三人は年に一度、こうして集まっているらしかった。去年は芝居を観に行った、来年はどこにしようか。画面の向こうで喋っていただけの三人が、いつのまにか、外で会う友達になっていた。
三十分ほどして、三人が席を立った。
「また来る。絶対来るから」
「お待ちしております」
ドアベルが鳴って、三人が出ていった。
店が静かになる。
日が傾いて、そのまま客は来なかった。マスターが表の札を裏返しに出て、戻ってきて、灯りを一つ落とした。
カップを拭きながら、しばらく黙っていた。
「……君」
「はい」
「前に、今はブラウザで画面を組み立てるという話を聞いたね」1
「クライアントサイドレンダリングのことですね」
「それで、作ってみたいものができたかもしれない」
ロボットがカウンターの向こうから顔を出した。
「ご協力できます。作りたいものを、おっしゃってください」
「うきうきチャットだ」
ロボットが、少し間を置いた。
「……うきうきチャット」
「そういう名前でしてね」マスターが、平然と言う。「今からちょうど三十年前、1996年に私がPerlで書いたCGIです。プログラムのところだけを頼まれて作りました」
「先ほどのお三方が」
「そこで知り合った人たちです。久しぶりに思い出しました、あのチャットのことを」
「同じチャットを、おつくりになるのですか」
「いやね、そのCGIのチャットは、ややあって使われなくなったんですよ」
「PHPかJava Servletで作り直されたのでしょうか」
「いやいや。まだありませんでしたし」
「……失礼しました。1996年、PHPは初期バージョンが公開されていますが、まだ作者本人や先駆的な開発者だけが使っているような時期でした。Servletは、まだ発表されたばかりで実装が出そろっていませんでした」
「誰かがIRCというの見つけましてね、引っ越したんです。『#うきうきチャット』というチャンネルを作ってね」
「アイ・アール・シー」ロボットが言った。「インターネット・リレー・チャット。クライアントがサーバーを介してチャットを行うための通信の取り決めです。利用者は専用のクライアントをパソコンに入れ、サーバーに置かれた部屋に入って話します。部屋はチャンネルと呼ばれ──」
「知っていますよ」マスターが笑った。「毎晩、開いていたんだから」
「失礼しました」
「CGIのチャットは、遅かったんですよ」マスターが、拭いていたカップを置いた。「書き込んでも、すぐには表示されない。30秒の定期リロードにしてたかな。サーバーに負荷がかからないように、そのくらいが普通だったのでね」
「30秒」
「しかもサーバーやネットワークが混んでくると、その30秒からさらに遅れる。なかなか会話にならない時もありました」
ロボットが、黙って聞いている。
「それに比べて、IRCは快適でしてね。書き込んだら、すぐに出る」
「では、不足はなかったのですね」
「……いや」
マスターが、少し黙った。
「ただ、なんというか、素っ気なくてね。IRCソフトのGUIが」
「仕様上は、文字を送り合うためのものですので」ロボットが言った。
「あのウェブのほうには、心躍らせる何かがありました」マスターがうなずいた。「うきうきしたものですよ。遅いくせに、時々、恋しくなりました」
「マスター」
「なんだい」
「心躍らせる何か、と申しますのは。……画面の、どのあたりでしょうか」
「……さあ」マスターが笑った。
ロボットが、黙った。
「いまなら、作れるんじゃないかね」マスターが、ようやくロボットのほうを見た。「あの頃に夢見たうきうきチャットが」
「承知しました」ロボットが、カウンターにノートパソコンを置いた。
「作業は任せます。……ただし、何をするのか、そのつど教えてもらえるかい」
「かしこまりました」
ロボットが画面に向かって、しばらく黙って動いていた。
「まず、画面のほうから始めます。フレームワークを使います」
「フレームワーク……JavaScriptにも、あるのかい」
「はい」
「まったく、どんなものか想像がつかないな」マスターの目が丸くなっていた。
マスターがカウンターに腰を下ろして、画面を覗き込んだ。ロボットが作業を進めていく。
「マスター。発言者の名前は、どちらへ出しましょう」
「文の頭だ。名前があって、そのあとに、喋ったことが続く」
「マスター、書き込む欄は、画面のどちらへ」
「上だ。上に書く欄があって、その下に、みんなの言ったことが並ぶ」
ロボットの動きが、少し遅くなった。
「……いまは、逆に置くものが多いのですが」
「そうなんですか。でも、あれは上でした」
「承知しました」
ロボットがまた画面のほうを向く。時折、画面の細かいところを確かめては、マスターの答えを聞いてまた続ける。
マスターが立って、灯りをもう一つ落とした。それから湯を沸かして、自分のぶんのコーヒーを淹れた。
小一時間ほどして、ロボットが言った。
「マスター。ひととおり書けましたので、ビルドツールで表示を確認します」
「ビルドツール？」
「はい。書いたものを、そのままブラウザへ渡すわけではありませんので」
マスターが、コーヒーから顔を上げた。
「なんだか、大掛かりだね。PerlにしてもJavaScriptにしても、スクリプト言語は手軽さが売りだったと思いますが」
「いまの書き方は、ブラウザが読むことのできる書き方ではありません」
「……私の知っている書き方と、ずいぶん変わったなと思いましたが」
「フレームワークでは人が書きやすいような書き方になっています。これをブラウザが読める書き方に変換します」
「それじゃまるで……コンパイルじゃないか」マスターの眉間の皺が深くなった。
「はい。……厳密には機械語にするわけではありませんので、呼び分けることもあります。ただ、書いたものを別の形にしてから動かすという点では、同じです」
「そうだったかな……C言語のような高級言語からアセンブリ言語にすることをコンパイルと言ったような……アセンブリ言語から機械語にすることはアセンブルで……」
「……その区分けは、文献によって揺れのあるところです」
「なんにせよ、フレームワークで使うJavaScriptはアセンブリ……もとい、素のJavaScriptに変換するというわけか」
「はい。他にも、ブラウザに不要な改行、字下げ、中身の分かる長い名前といったものを削って小さくすることもします」
「それも、コンパイルと同じだね」マスターが言った。「人のためのものを落として、機械に要るものだけを残す」
「それから、分けて書いたものは、一つへまとめます。分かれたままですと、ブラウザがそのぶん取りに行くことになりますので」
「C言語ならリンク、JavaならJARやWARにするみたいなものか」
「はい。それに、CSSにも同じことをします。分かりやすい書き方で書いておいて、ブラウザの分かる形へ直し、不要なものを削り、一つにまとめます」
「そっちも、やってくれるのかい」
「はい。他にも、画像などのパスをCSSやJavaScriptの側で適切なものに書き換えます。CSSの内容を自動で補完したりもします。……このツールは、そうした工程を一括で行うものです」
「そうか。ビルドツールってのは、そういうことだね。……makeなんかと同じだ」
マスターが、カップを置いた。
「では、書き終えたので、ビルドを実行するんだね」
「いえ」
「いえ？」
「いま、動いております」
マスターが、顔を上げた。
ロボットが、書いていたものの隣にブラウザを立ち上げた。短いアドレスを打ち込むと、いま書いたばかりのチャットの画面が表示された。
「ファイルの変更を見張っております。保存すると即座に画面に反映されますので、お試しください」
マスターが、タイトルのうきうきチャットをわくわくチャットに書き換えて、保存する。
ブラウザに表示されていたチャットのタイトルが、音もなく変わった。
「……ブラウザも、勝手に更新されるのか」
「はい。保存されるたび、こちらから送っております」
マスターが、タイトルを元に戻して、椅子の背にもたれた。
「CGIの頃は」しばらくして、そう言った。「直しては上げて、上げては読み込み直して、夜中に何十回とやりましたよ」
マスターは立ち上がって、明日の支度をはじめた。
流しの器具を洗い、拭いて、一つずつ棚へ戻していく。
「ぶっちゃけ……JavaScriptの開発が、こんなに変わっているとは思いませんでした」
「はい」
「今日はもう、これで腹一杯です」マスターが笑った。「続きは、また明日にしましょう」
「承知しました」
ロボットのひとくちメモ
本日のポイントを整理します。
- ビルド：いま多くのウェブの制作では、書いたファイルをそのままブラウザに渡しません。ブラウザに渡す形に作り直します。この工程をビルドと呼びます
- ビルドがすること（１）：フレームワークなどの書き方は、人が使いやすいように独自に拡張されたもので、ブラウザはそのまま読むことができません。ブラウザの分かる書き方に直します（トランスパイル）
- ビルドがすること（２）：改行も、字下げも、分かりやすい名前も、人が読むためのものです。ブラウザには要らないので削ります（ミニファイ）
- ビルドがすること（３）：人が扱いやすいように細かく分けて書いてあるものを、渡すときは一つにまとめます（バンドル）
- 書いたものをすぐに確認できます：ビルドツールはファイルの変更を見張っていて、保存した瞬間に、直した結果が画面に反映されます（開発サーバー）
-
ブラウザ側で画面を組み立てるやり方（クライアントサイドレンダリング）については、第5回「フロントエンドとバックエンド。私のころは、そんな区別はありませんでした。」で取り上げています。 ↩