>_tech-draft
Vercelのアイコン
Vercel
動画公開日
タイトル

The Open Web Panel

再生時間

40分 59秒

Next.js, Svelte, Nuxt.js開発秘話:Vercelを支えるオープンソースの力

ポイント

  • この記事は、Next.js、Svelte、Nuxt.jsの生みの親たちが語るフレームワーク開発秘話と、Web開発におけるオープンソースの重要性を紹介します。
  • 各フレームワークの誕生背景や特徴、開発における挑戦と工夫が具体的に解説されており、その思想を深く理解できます。
  • モダンWeb開発を支えるオープンソースの計り知れない価値と、コミュニティとの協働がソフトウェアの品質向上にいかに不可欠であるかを学べます。

VercelのCap氏が、オープンソースコミュニティの重要性を強調し、Next.js、Svelte、Nuxt.jsの主要開発者であるTim Newton氏、Rich Harris氏、Sebastian Chopin氏を招いたパネルディスカッションの開催意図を説明しました。このパネルは、透明性、好奇心、そしてオープンソースを祝うことを目的としています。「世界はオープンソースによって動いている」という信念のもと、これらの革新的なWebフレームワークの舞台裏に迫ります。VercelがSvelteとNuxtLabsを迎え入れたことで、多くの人々がお気に入りのフレームワークの未来について期待と疑問を抱いており、本セッションでは彼ら自身の言葉でその未来、Vercelにおけるオープンソース、そしてWeb全体について探求します。

主要Webフレームワーク開発者たち

セッションでは、Next.js、Svelte、Nuxt.jsという、多くの開発者が愛用するフレームワークの生みの親たちが登壇しました。各開発者は、それぞれの役割と、自身のフレームワークがどのようなものであるかを一文で紹介しました。

Next.js: モダンWeb開発の先駆者

Tim Newton氏はNext.jsのテックリードを務めています。彼はGarm氏と共にNext.jsを立ち上げました。Next.jsは、今日のWeb開発において広く採用されている、堅牢で高性能なアプリケーション構築のためのReactフレームワークです。

Svelte: コンパイラベースの革新

Rich Harris氏は過去9年間Svelteの開発に携わり、VercelではSvelteチームのマネージャーとして3人のチームを率いています。彼曰く、Svelteは「レジリエントでアクセシブルなWebアプリケーションを、他のツールよりも簡単に構築する方法」を提供するフレームワークであり、同時にコンパイラであり、一種の言語でもあります。

Nuxt.js: Vueエコシステムの強力な選択肢

Sebastian Chopin氏はNuxt.jsの作者であり、3ヶ月前にNuxtLabsがVercelに加わったことでVercelのメンバーとなりました。Nuxt.jsはVue.jsユーザー向けの代替フレームワークであり、Next.jsと同様に多くの機能を提供します。また、彼のチームは、2年前にNuxt 3から抽出されたサーバーサイドフレームワークであるNitroの開発にも取り組んでおり、これはViteプラグインとしても利用可能です。

興味深いことに、Next.js、Svelte、Nuxt.jsの三つは、いずれも約9年前に誕生しました。Nuxt.jsは特に2016年10月26日に最初のプロトタイプが完成しています。

フレームワーク誕生の背景

Nuxt.js誕生秘話

Sebastian Chopin氏は、2015年にVue.jsとサーバーサイドレンダリング(SSR)を使ってEコマースウェブサイトを構築していました。当時のVue 2にはSSR機能がなかったため、ヘッドレスブラウザを使ったプリレンダリングを行っていました。そんな中、彼はNext.jsの発表を見て、Vue.jsでも同じようなフレームワークを作ってみようと挑戦しました。そのわずか1週間後には、最初のプロトタイプが動作したといいます。

Svelte: コンパイラが変革するWeb開発

Rich Harris氏がSvelteを開発した背景には、彼が以前手がけたフロントエンドフレームワークへの「罪滅ぼし」がありました。そのフレームワークは肥大化しており、動作も遅かったため、彼はやり直しを望んでいました。彼は以前、モジュールバンドラーであるRollupを開発する中で抽象構文木(AST)の扱いに習熟しており、このコンパイラのアイデアをフレームワークに応用することを思いつきました。

ブラウザで実行時の作業を多くするのではなく、ビルドステップで事前にほとんどの作業を済ませる「AOT(Ahead-of-Time)」コンパイルアプローチを採用することで、より高速でコンパクトなアプリケーションを実現できると考えたのです。彼のモチベーションの源泉は、ジャーナリズムの分野での経験にもありました。ニュースルームでインタラクティブなビジュアライゼーションを構築する際、大量のデータを扱いながらも、モバイルデバイスでさえ60fpsでスムーズに動作する高性能なツールが必要とされたのです。当時の既存ツールではこの要求に応えきれなかったため、Svelteの開発へとつながりました。

Next.js: Vercelダッシュボードから始まった進化

Tim Newton氏がNext.jsの開発に関わる以前、Vercel(当時はZEIT)は自社のダッシュボードを構築していました。当時のCEOは、このダッシュボードの見た目や開発のあり方について明確なビジョンを持っていました。2016年当時のフレームワークがどうあるべきかというブログ記事も書かれています。

当初、彼らはReactを選ぶ代わりに、N4という独自のReactライクなテンプレート言語を開発していました。しかし、最終的にはReactベースのフレームワークへと方針を転換し、サーバーサイドレンダリングを核とするNext.jsの開発へと進んでいきました。その後、Next.jsは静的サイト生成(SSG)などの機能も取り込みながら、多岐にわたる進化を遂げてきました。

なぜオープンソースなのか?その計り知れない価値

オープンソースプロジェクトに対する開発コミュニティの見解は様々です。「コードを公開したくない」という懸念がある一方で、「コミュニティに参加し貢献することが極めて重要だ」と考える人もいます。この問いに対し、Rich Harris氏はオープンソースが持つ計り知れない価値を力強く語りました。

彼にとって、ソフトウェアをオープンソースとして開発しないという選択肢は考えられませんでした。それはソフトウェア開発の文化そのものであり、特にユーザーを獲得し、普及させたいのであれば不可欠な要素だと述べています。「もしオープンソースにしなければ、他の誰かがオープンソース版を作り、それがより人気になるだろう」と指摘します。

さらに、オープンソースにはソフトウェア自体に具体的な恩恵をもたらす側面があります。Rich氏は、コードを公開することで、開発者が気づかないセキュリティ脆弱性などをコミュニティが発見し、報告してくれる例を挙げました。これは、クローズドソースでは見過ごされがちなリスクを軽減し、ユーザーにより安全なソフトウェアを提供するために非常に重要な要素です。オープンソースは、単なるコードの公開を超え、コミュニティとの協働を通じてソフトウェアの品質と安全性を高めるための強力な手段であると言えるでしょう。

まとめ

Next.js、Svelte、Nuxt.jsの生みの親たちが語ったストーリーは、それぞれのフレームワークが持つユニークな背景と、Web開発の進化におけるオープンソースの揺るぎない重要性を浮き彫りにしました。初期の課題や開発者の情熱、そしてコミュニティとの共創が、今日のモダンなWeb開発を支える強力なツールを生み出しています。透明性を保ち、知的好奇心を満たし、そして何よりもオープンソースの精神を称えるこの座談会は、未来のWeb開発の方向性を示唆する貴重な機会となりました。

参考動画

YouTube動画URL