限界を究めるブログでした。最近はいろんな分野を幅広めに書いてます。Calendarの1日目の記事です。2011年頃からJavaScriptに触れてきた、つまり今までのJavaScriptの波をほぼ体験してきました。その経験を踏まえつつ書きたいと思います。今回書くことそこそこの文量になったので今回の内容を3行にまとめました。現在のJavaScriptになぜトランスコンパイルが必要なのか「JavaScriptがブラウザで実行される」ということがどういう問題を引き起こしたのかウェブアプリの開発方法はどのように変化していったかもっとも、かなり話の流れが錯綜するのでご注意ください。jQuery僕が始めた頃はまさにjQuery全盛期でした。世の中のほとんどのものはjQueryで出来ていたと言っても過言ではなかったように思います。当時の僕もjQuery信者となり活発に書いていました。JavaScriptを書く、というよりjQueryを書いていたという方が正しかった時代でした。2011年当時はまだIE6対応という言葉も存在していました。6でも動くように書くことを意味します。JavaScriptは基本的にブラウザ上で動きます。プログラマは顧客層となりそうなブラウザは全て対応しなければなりません。XPでデフォルト搭載されていたので、IE6ユーザーはかなり多かったのです。そのためIE6でまともに見られるようにしなければなりませんでした。IE6は他のブラウザーなら使える機能がほとんど搭載されていませんでした。そのためJS使いはとても苦労を強いられました。今となってはどういうことをしていたかあまり覚えていませんが。IE6は開発元のMicrosoftですら「IE6は腐った牛乳」と呼んでいました。クロスブラウザ対応IE6はXPのサポート終了に伴い徐々にシェア率が下がり、今ではほぼサポートする必要もなくなりました。IE6は消えても全てのブラウザが全て同じ挙動を取るようになったわけではありません。現在でも同じコードを実行しても違う動作をすることがあります。昔に比べればかなり統一されてきましたが。jQueryはそのクロスブラウザ対応を内部でしており、プログラマはjQueryを使うことでクロスブラウザ対応をさほど意識することなくプログラミングができました。このこともjQueryがシェアを集めた要因だったかと思います。JSはクソだった以前のJavaScriptは変数のスコープが他言語と異なるクラス宣言がおかしい型がないなど問題がありました。そのため、「他の言語のように書いてからそれをJavaScriptに直す」つまり「別言語からコンパイルする」という流れが起きました。別言語のことはaltJSと呼ばれています。CoffeeScript、TypeScriptなどが有名です。それらもES2015の登場でだいぶ緩和されました。2015といい、ECMAScriptの2015年バージョンという意味です。ECMAScriptはJavaScriptの標準規格のようなものです。ブラウザ間の差がひどく独自の実装に溢れていたので、それを解消しようと誕生しました。ES2015に全てのブラウザが一斉に対応したわけではありませんでした。そのため、ES2015で書いたコードを昔のバージョンのJavaScriptで動くようにする必要がありました。「JavaScriptをJavaScriptへコンパイルする」という奇怪なことが起きたのです。この「トランスコンパイル」するツールとしてはBabelが有名です。最近のブラウザーは自動更新されるものも多く、ES2015がそのまま動くブラウザも増えています。そのため、トランスコンパイルする意味でのBabelは必要なくなりつつあります。jQueryが消えるさて、話がかなりそれました。jQueryは時代の覇者として君臨していましたが、それに終わりが訪れます。「フレームワーク戦争」です。僕が始めに触れたフレームワークはAngularJSだったと思います。フレームワークがなぜ必要なのかというと、JavaScriptのアプリ開発が複雑化したためです。jQueryでは「クリックされたらこの関数を呼び出す」というように宣言し、「ここをこう書き換える」というようなスタイルでした。大規模になるにつれてどこに何が書いてあるのか把握するのが困難になるという問題がありました。それを解消しようとMVCと呼ばれるモデルが提案され、それに則ったフレームワークが多数排出されました。AngularJSは「データバインディング」と呼ばれる仕組みを採用していました。「ここのフォームの値をこれと紐づける」というふうにして、プログラム内で変更が起きればそれが即反映され、ブラウザでフォームへの入力等のイベントが起きればプログラム内の値も変わりました。そのため「この値にこういう処理をしてここに表示」といったふうにして、宣言的に書きやすくなりました。AngularJSはデータバインディングのための仕組みとしてかなりゴリ押しをしていました。大規模になるにつれてパフォーマンスの急激な低下が起きたのです。WebComponentjQuery、MVCフレームワークときて次に訪れたのはウェブコンポーネントでした。ウェブコンポーネントというのは、HTML、CSS、JavaScriptをひとつのコンポーネントにまとめるというものです。CSS、JavaScriptは外部へ干渉することはありません。外部から値を渡すことはできます。このコンポーネントというのはカスタムタグという形で利用されます。このウェブコンポーネントをもって一区切りついた感じがしています。少なくともここ数年あった変動が、2017年にはおとずれませんでした。まとめまとめてみたつもりです。時間がなくて書きなぐってしまったのでそのうち清書します。関連記事2019-05-17ポートフォリオ就活しているのでブログにもポートフォリオを書いておきます。限界を究めるブログです。までSNSTwitterGitHubHomepageBlog連載リストプライバシーポリシースターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。