コラム

最近のフロントエンド界隈で大注目のVercel。そのCEOであるGuillermo Rauch氏が来日したのに合わせて、Vercel Meetup #0 with CEOが開催されました。

30名マックスの会場に100名以上の応募がありつつ、運良く当選したので現地参加してきました。

撮影可否が分からなかったので写真はないのですが、当日のセッションについてはYouTube動画が公開されていますので、そちらをご覧ください。

https://www.youtube.com/watch?v=IHRU2ox5Jzw

Fireside Chat with CEO

Guillermo Rauch氏とメンバーの方で行われるパネルディスカッション形式のセッションでした。動画は8:25あたりからです。

https://www.youtube.com/watch?v=IHRU2ox5Jzw&t=505s

• 自己紹介
• 日本の来た理由
  投資を受けている会社のカンファレンスに参加するため（その投資会社は日本企業と結びつけるミッションを持っているとのこと）
• Vercelを起業した理由
  一つ前に起業した会社のLearnBoostはWordPressの親会社であるAutomatic社に売却。次はオープンソースとクラウド技術を組み合わせが起業をしたいと考えた。当時はk8sも出てきた中でテクノロジーはありつつも、使いこなすのは大変だった。
  そこでk8sなどを使いつつ、開発者が車輪の再発明をせずにアプリケーションを開発できる環境としてVercelを起業した。
• ユーザーからのフィードバックについて
  ローンチは良くとも、その100日後にいかにパフォーマンスを維持すれば良いかと言った意見があった。
• Vercelの今後
  一つのテクノロジー（React、Next.js）で様々な環境に適合させる未来があったが、モバイルは懸念点だった。最近ではPWA対応が進んできて、課題が解決しつつある。
  GitHub CopilotやChatGPTの登場によってiPhone登場時のような、時計の針がリセットされたように感じている。こうした技術を利用することで、飛び抜けた開発者が出てくるのではないか。
• Next.jsのコミュニティが成功した秘訣について
  とにかくコミュニティフィードバックを大事にしてきた。Vercelについては常にオープンプラットフォーム（Next.jsに限らず利用できる）であることを重視してきた。そうやって他のフレームワークの良さも取り込んでNext.jsは成長している。
• 連続起業を成功させる秘訣
  小さく、分かりやすいものからはじめる。
• これまでのターニングポイントについて
  すべてのリソースをサーバーレスに投入したこと。

Q&A

ここからQ&Aに入りました。動画は39:53からです。寄せられた質問は多かったですが、時間が限られることもあって回答していたのは以下の質問です。

• 元Googlerで現在はMicrosoftのAlex Russell氏がReact/Next.jsを執拗にdisっていますが、どう思いますか？
• なぜGitHub OrganizationはVercelの有料プランなのですか？
• MetaからReactの開発を引き継ぐ可能性はありますか？
• PWAの今後期待している点は何ですか？
• Edgeサーバーからもアクセスできるサーバーレスなデータベースが欲しいです

LT

ここからVercel/Next.jsを使ったLTが5本（！）ありました。

Svelte メンテナから見た Rich Hariis の素晴らしいところと Svelte 日本コミュニティの状況

https://www.youtube.com/watch?v=IHRU2ox5Jzw&t=3853s

山下 裕一朗 (@baseballyama_)さんのLTです。生きて帰れるか分からない…という前置きのもとに開始したSvelteに関するLTになります。

なお、Rich Hariis氏はSvelteの開発者ですが、現在はVercel社にて働いています。内容はSvelte愛に富んだ面白いものでした。

https://docs.google.com/presentation/d/16GCSVB-h_TlZtyq-CQ98_fUux5fpKy8QCybMsgH4SsI/edit#slide=id.g1f2376c7dc7_1_56

ブラウザバック体験で見る Next.js

https://www.youtube.com/watch?v=IHRU2ox5Jzw&t=4517s

佐藤 昭文 (@akfm_sato)さんのLTです。ブラウザバック（いわゆるバックボタン）操作時のスクロール位置の復元や入力情報の復元など、UI/UXをよりよいものにするための知見を共有してくれました。

詳細はNext.jsで戻る厨を満たすrecoil-sync-nextにて詳しく解説されているので、ぜひご覧ください。

https://zesty-basbousa-04576f.netlify.app/1

Next.js アプリを Kubernetes と Vercel で別々にリリースしてみた

https://www.youtube.com/watch?v=IHRU2ox5Jzw&t=5148s

出羽 健一さんのLTです。どちらもNext.jsで作られたアプリをAWS EC2 + k8sとVercel、それぞれにデプロイしてみた知見を共有してくれました。

サーバーの運用を担当するリソースがVercelでは一切存在しないという点が大きな違いだったようです。k8sはマニュアルカー、Vercelはオートマカーという例えは確かに分かりやすいです。

https://drive.google.com/file/d/1mSmBr-gRlcJ1frWSYdmA4MMzi5eQwrm8/view

Insights from Using Vercel and Next.js for Over 3 Years in Real World

https://www.youtube.com/watch?v=IHRU2ox5Jzw&t=5835s

俣野 光佑 (@matamatanot)さんのLTです。サイバーエージェント社のFANBASE ARENAでどうVercelが使われているかを紹介しています。

様々な機能を使っているとのことですが、LTという枠の中で時間が足りず、プロジェクトの運用方法に限って紹介していました。

Production Experience: Some Insights from Using Vercel and Next.js for Over 3 Years from KosukeMatano1

How not to Build a Video Game

https://www.youtube.com/watch?v=IHRU2ox5Jzw&t=6578s

Christoph Nakazawa(@cpojer)さんのLTです。Next.jsを使って作られた8ビットゲームの紹介でした。ゲームですがDOMで描かれているので、ダークモードに素早く対応したり、CSSを編集してキャラクターの色を変えたりできます。

完全に個人的なプロジェクトとのことですが、完成度はかなり高くて面白かったです。HTMLスライドの中に埋め込んで表示できるのも良かったです。

まとめ

日曜日の昼ながら多くの人がオフラインで参加したり、オンラインで視聴したりとVercelの注目度がうかがい知れたイベントでした。

HexabaseでもVercelは活用しており、多くのプロジェクトで利用しています。今後の開発ロードマップを予感させるような発言もあり、今後も目が離せません。