JavaScriptの遍歴と現在

この記事は東北大学 計算機科学研究会 Advent Calendarの1日目の記事です。

2011年頃からJavaScriptに触れてきた、つまり今までのJavaScriptの波をほぼ体験してきました。その経験を踏まえつつ書きたいと思います。

今回書くこと

そこそこの文量になったので今回の内容を3行にまとめました。

• 現在のJavaScriptになぜトランスコンパイルが必要なのか
• 「JavaScriptがブラウザで実行される」ということがどういう問題を引き起こしたのか
• ウェブアプリの開発方法はどのように変化していったか

もっとも、かなり話の流れが錯綜するのでご注意ください。

jQuery

僕が始めた頃はまさにjQuery全盛期でした。世の中のほとんどのものはjQueryで出来ていたと言っても過言ではなかったように思います。当時の僕もjQuery信者となり活発に書いていました。JavaScriptを書く、というよりjQueryを書いていたという方が正しかった時代でした。

2011年当時はまだIE6対応という言葉も存在していました。懐かしいですね。

ブラウザ

「IE6対応」というのはInternet Explorer 6でも動くように書くことを意味します。JavaScriptは基本的にブラウザ上で動きます。つまりプログラマは顧客層となりそうなブラウザは全て対応しなければなりません。2011年当時はIE6がWindows XPでデフォルト搭載されていたので、IE6ユーザーはかなり多かったのです。そのためIE6でまともに見られるようにしなければなりませんでした。

しかし、IE6は他のブラウザーなら使える機能がほとんど搭載されていませんでした。そのためJS使いはとても苦労を強いられました。まあ今となってはどういうことをしていたかあまり覚えていませんが。

IE6は開発元のMicrosoftですら「IE6は腐った牛乳」と呼んでいました。

クロスブラウザ対応

IE6はXPのサポート終了に伴い徐々にシェア率が下がり、今ではほぼサポートする必要もなくなりました。

しかし、IE6は消えても全てのブラウザが全て同じ挙動を取るようになったわけではありません。現在でも同じコードを実行しても違う動作をすることがあります。もちろん昔に比べればかなり統一されてきましたが。

jQueryはそのクロスブラウザ対応を内部でしており、プログラマはjQueryを使うことでクロスブラウザ対応をさほど意識することなくプログラミングができました。このこともjQueryがシェアを集めた要因だったかと思います。

JSはクソだった

以前のJavaScriptは

• 変数のスコープが他言語と異なる
• クラス宣言がおかしい
• 型がない

など問題がありました。そのため、「他の言語のように書いてからそれをJavaScriptに直す」つまり「別言語からコンパイルする」という流れが起きました。別言語のことはaltJSと呼ばれています。CoffeeScript、TypeScriptなどが有名です。

しかし、それらもES2015の登場でだいぶ緩和されました。ES2015というのはECMAScript 2015といい、ECMAScriptの2015年バージョンという意味です。 ECMAScriptはJavaScriptの標準規格のようなものです。ブラウザ間の差がひどく独自の実装に溢れていたので、それを解消しようと誕生しました。

ただし、ES2015に全てのブラウザが一斉に対応したわけではありませんでした。そのため、ES2015で書いたコードを昔のバージョンのJavaScriptで動くようにする必要がありました。「JavaScriptをJavaScriptへコンパイルする」という奇怪なことが起きたのです。この「トランスコンパイル」するツールとしてはBabelが有名です。

ただ、最近のブラウザーは自動更新されるものも多く、ES2015がそのまま動くブラウザも増えています。そのため、トランスコンパイルする意味でのBabelは必要なくなりつつあります。

jQueryが消える

さて、話がかなりそれました。元に戻ります。jQueryは時代の覇者として君臨していましたが、それに終わりが訪れます。「フレームワーク戦争」です。おそらく僕が始めに触れたフレームワークはAngularJSだったと思います。

フレームワークがなぜ必要なのかというと、JavaScriptのアプリ開発が複雑化したためです。 jQueryでは「クリックされたらこの関数を呼び出す」というように宣言し、「ここをこう書き換える」というようなスタイルでした。しかし、大規模になるにつれてどこに何が書いてあるのか把握するのが困難になるという問題がありました。それを解消しようとMVCと呼ばれるモデルが提案され、それに則ったフレームワークが多数排出されました。

AngularJSは「データバインディング」と呼ばれる仕組みを採用していました。「ここのフォームの値をこれと紐づける」というふうにして、プログラム内で変更が起きればそれが即反映され、ブラウザでフォームへの入力等のイベントが起きればプログラム内の値も変わりました。そのため「この値にこういう処理をしてここに表示」といったふうにして、宣言的に書きやすくなりました。

しかし、AngularJSはデータバインディングのための仕組みとしてかなりゴリ押しをしていました。大規模になるにつれてパフォーマンスの急激な低下が起きたのです。

WebComponent

jQuery、MVCフレームワークときて次に訪れたのはウェブコンポーネントでした。ウェブコンポーネントというのは、HTML、CSS、JavaScriptをひとつのコンポーネントにまとめるというものです。CSS、JavaScriptは外部へ干渉することはありません。外部から値を渡すことはできます。このコンポーネントというのはカスタムタグという形で利用されます。このウェブコンポーネントをもって一区切りついた感じがしています。少なくともここ数年あった変動が、2017年にはおとずれませんでした。

まとめ

まとめてみたつもりです。時間がなくて書きなぐってしまったのでそのうち清書します。