WebページをダイエットするJavaScriptフレームワーク

ウェブサイトは大きすぎます。

ウェブサイトのパフォーマンスと使用されているテクノロジーを追跡するサイト、HTTP Archiveによると、平均的なウェブページは約2メガバイトです。確かに、良好な4Gモバイル接続であれば、2メガバイトのデータを1秒未満でダウンロードできます。しかし、今日のウェブページは、低速接続や帯域幅制限の低いユーザーにとっては問題となります。それほど昔のことではありませんが、複雑なゲームやソフトウェアプログラムは1.4メガバイトのフロッピーディスクに収まっていました。

今日のウェブが肥大化している理由は数多くありますが、多くのページを埋め尽くす広告やトラッキングスクリプトもその一つです。また、ウェブサイトが単なるテキストや画像の表示にとどまらないことも理由の一つです。多くのサイトは、まるで本格的なデスクトップアプリケーションのような外観と操作性を備えています。

こうしたインタラクティブなサイトを構築するために、多くのウェブ開発者は一般的なタスクを処理するオープンソースパッケージを活用しています。これらのツールはプログラマーを多くの面倒な作業から解放しますが、プロジェクトの規模を大きくしてしまうこともあります。例えば、Facebookの人気オープンソースライブラリであるユーザーインターフェース構築用Reactは、わずか100キロバイトです。さらに他のツールやグラフィックも加えると、すぐに数メガバイトにも達してしまいます。

ビジュアルジャーナリスト兼ソフトウェア開発者のリッチ・ハリス氏が開発した注目のJavaScriptフレームワーク「Svelte」は、より高速でコンパクトなインタラクティブなウェブサイトやアプリケーションの開発を容易にすることを目的としています。ウェブ開発者のショーン・ワン氏は、ReactからSvelteに切り替えることで、個人ウェブサイトのサイズを187キロバイトから9キロバイトに削減できたと述べています。

「本当に驚いたよ」とワン氏は言う。「サイズを最適化しようともしていなかったのに、そのまま落ちてしまったんだ」

ニューヨーク・タイムズのグラフィックエディターであるハリス氏は、ガーディアン紙で勤務していた2016年にSvelteの最初のバージョンを作成し、リリースしました。彼のプロジェクトの多くはインタラクティブなグラフィックやアニメーションでしたが、グラフィックの読み込みに時間がかかりすぎたり、ユーザーのデータ通信量制限を超過したりするのではないかと懸念していました。

フレームワークは、伝統的にアプリのコードとユーザーのブラウザの間の中間層として機能するため、ウェブサイトの重量を増加させます。つまり、開発者は、フレームワークのすべての機能を使用しない場合でも、独自のコードに加えてフレームワーク全体をアプリにバンドルする必要があります。ワン氏はこれを、宇宙に打ち上げるために巨大な燃料タンクを必要とするロケットに例えています。

ハリス氏は異なるアプローチを採用した。Svelteは、開発者がコードをウェブサーバーにアップロードする前、つまりユーザーがダウンロードするずっと前に、中間層の作業を実行する。これにより不要な機能を削除し、アプリのサイズを縮小することが可能になる。また、ユーザーがアプリを実行する際に動作するパーツの数も削減されるため、Svelteアプリの速度と効率性が向上する。「Svelteは宇宙エレベーターのようなものです」とワン氏は言う。このフレームワークの開発は難航したが、支持者たちは開発者が効率的なアプリを開発しやすくなると述べている。

スクリーンと泡がつながった抽象的な描写

Linux、GNU、そして大企業が無料のコラボレーションベースのソフトウェアでどのように利益を上げているかについて知りたいことすべて。

ワン氏は、WebページにはSvelteを使うのが好きだと言いますが、仕事などを含む大規模なアプリケーションでは依然としてReactを使用しています。まず、アプリの規模が大きければ大きいほど、開発者がReactの機能をすべて使う可能性が高くなります。そのため、無駄が少なくなります。実際、Svelteアプリの中には、Reactなどのツールで作られたアプリよりも大規模なものもあります。そして、React開発者の需要はSvelte開発者よりもはるかに高いのです。

21,000人以上の開発者を対象とした「State of JavaScript 2019」調査では、Svelteを使用した回答者の88%がSvelteに満足していると回答し、Reactの89%に次ぐ2番目に高い満足度となりました。しかし、Svelteを使用したことがある回答者はわずか7.8%で、24.7%はSvelteについて聞いたことがありませんでした。一方、Reactを使用したことがある回答者は80.3%でした。

ハリスは、多くの開発者がSvelteの学習に投資することに躊躇する理由を理解している。JavaScript開発の世界は急速に進化しており、プログラマーにはすでに目もくらむほど多くのツールがあり、その中から選択して学習できる。「Reactには、Facebookの支援、強力な求人市場、そしてReactと連携するサードパーティ製品の巨大なエコシステムという利点があります」と彼は言う。ハリスはニューヨーク・タイムズのグラフィックやアニメーション制作にSvelteを使用しているが、同紙のウェブサイトは依然としてReactベースだ。

Svelteはまだ、ハリス氏と他の開発者が主に自由時間に取り組んでいる趣味のプロジェクトです。ハリス氏は、ニューヨーク・タイムズ紙の仕事に役立つ修正や機能の追加が必要な時のみ、「勤務時間中」にSvelteに取り組んでいます。

ハリス氏によると、Svelte は、スマート TV や低電力デバイスで実行されるアプリなど、パフォーマンスとファイルサイズが特に重要なケースに最適です。

しかし、Svelte開発者の中には、より大規模なアプリの構築にそれを利用する人もいます。ライアン・アトキンソン氏は、高度にカスタマイズ可能なソーシャルウェブサイト構築ツールを開発するFelt Socialの創設者です。彼は、Svelteを選んだ理由として、必ずしも最小サイズではないアプリケーションでも、より高速で応答性の高いアプリケーションを構築できる点を挙げています。「Svelteのアーキテクチャは、ユーザーインターフェース構築のあり方を根本的に変える可能性があります」と彼は言います。

アトキンソン氏は、プログラマーは小さなものを作るのに適したツールを、大きなものを作るのには使えない「おもちゃ」だと考えて無視することが多いと語る。

「それは間違いだと思います」と彼は言う。結局のところ、JavaScriptはかつて「おもちゃの言語」とみなされていたと彼は指摘する。今ではGmailやGoogle Docsのようなアプリの開発に使われている。

WIREDのその他の素晴らしい記事