Vercel

@rauchg|April 21, 2020 (3y ago)41,913 views

Also available in: English.

訳註: Next.jsの生みの親の一人で、Vercel社のCEOを務める@rauchgによる記事の翻訳です。原文はこちら。訳者はVercelのエンジニアであり、ハンス・ロスリングほか著『FACTFULNESS』の共訳者でもある上杉周作(@chibicode)。ちなみに、Vercel社はこのたび社名をZEITから改名しました。公式発表はこちら。

本日、私達は社名をVercelに改め、2100万ドルの資金調達を実施したことを公表しました。資金調達においては、錚々たる顔ぶれのVC(Accel、CRV)や個人投資家の方々(Jordan Walke、Nat Friedman、Pete Hunt、Jessie Frazelle、Soleio、Naval Ravikant、その他多くの皆様)からご支援を頂いています。

せっかくの機会なので、今回はVercelのビジョンについて語らせてください。私達は、Jamstackのウェブサイトを作り・試し・公開する仕組みの質を極限まで追求し、ゆくゆくはフロントエンド開発の体験を再定義したいと考えています。

最近の大きな流れとして、クラウドインフラ、Kubernetes、様々なAPIを提供するサービス等の台頭により、バックエンド開発にコモディティ化の波が押し寄せました。その結果、やりがいがある革新の機会がまだどれだけ残っているか？という点において、フロントエンド開発がより魅力的になりつつあります。そしてフロントエンド開発こそが、多くの企業において価値の源泉であると言えるでしょう。集客や収益化に繋がるコンテンツやプロダクトに、フロントエンドは直結しているからです。

また近年、Jamstack(JavaScript・API・マークアップ)という設計手法が登場し、フロントエンドとバックエンドを切り分けることが容易になりました。これにより、バックエンドが足枷になることなく、フロントエンドを今まで以上に効率よく作ることができます。Jamstackへの移行に関してはグーグル、フェイスブック、マイクロソフトが太鼓判を押しており(例: マイクロソフトのドキュメンテーションサイトは全てJamstackで構築)、業界全体において日進月歩で導入が進んでいます。

Accel(訳註: 今回Vercelに投資したVC)のDaniel Levineは、「デザイナーやフロントエンドエンジニアが、主導権を握ってUIやUXを作り込むことができるか否か。これこそが、将来ほとんどの大規模市場において、ビジネスの勝敗を決める鍵となるだろう」と予想しています。また彼は、「Vercelは、フロントエンド版のAWSになれるかもしれない」とも話していました。

#フロントエンドの開発者体験を左右する3大トレンド

Jamstackの台頭に加え、フロントエンド開発は全般的に近代化が進んでいます。開発を高速化するツールが現れてJavaScriptエンジニアが恩恵を受けたり、サービス自体が最新技術によって高速化されることでユーザーが恩恵を受けています。このように近代化が進む中で、さらに良質なフロントエンドの開発者体験を追求するためにはどうすればいいか。おそらく、以下に述べる3大トレンドに留意する必要があるでしょう。ちなみに、Vercelが提供するフロントエンド開発者向けのクラウドプラットフォームは、これらのトレンドを念頭に置いて設計されています。

#1. コンポーネント化が最適解

より高度なUIやUXが求められるにつれ、現場ではコンポーネント化やデザインシステムの導入が急務になっています。同じプロダクトならば、プラットフォームが違えどユーザー体験に一貫性があるべきです。たとえばボタンの見た目は、ウェブアプリ、モバイルアプリ、デスクトップアプリ、あるいはアプリから送られるメールの文中においても同じであることが望ましいでしょう。

少し前まで、コンポーネント化は常識ではありませんでした。セレクタエンジンやDOMが話題の中心だったのです。そんな中、フェイスブックが生み出したReactがコンポーネント化の概念を提唱しました。もちろん、他のフレームワークでもコンポーネントを定義することはできましたが、コンポーネント化の流れを作った先駆者は紛れもなくReactでした。

数年前、Tim Neutkens、Naoyuki Kanezawa、そして私の3人は、「Reactはすごい。いずれ、フロントエンドは全てReactで書けるようになるだろう」と感じ、それを実現するためにNext.jsを作りました。一つのコンポーネントだけにReactを使うのではなく、何もかもをReactで書きたい人向けに必要な機能を実装したのです。Next.jsは、Reactが切り拓いたコンポーネント化の考え方を、フロントエンド全てに応用したいというニーズに応えました。

私達の読みは的中しました。現在、フロントエンド開発現場の多くはコンポーネント化への移行を急ピッチで進めています。多くはReactを選び、フロントエンドをバックエンドから分離し、設計を抜本的に見直そうとしているのです。Vercelは、そういった課題に直面しているフロントエンド開発者にとって、必要なものがすべて備うプラットフォームでありたいと考えています。

VercelはNext.jsに加え、どんなコンポーネント化のフレームワークにでも満遍なく対応しています。最近は有力なフレームワークも多く、たとえばVueやSvelteは、ブラウザが読み込むJavaScriptの容量を大幅に減らすなど意欲的な試みを行っています。どのフレームワークも、コンポーネント化で直面する様々な問題や、コンポーネント化のウェブ標準における課題を解決することで頭角を現しています。Vercelは、こういったフレームワーク全てを歓迎するプラットフォームでありたいのです。

#2. コードレビューはデプロイプレビューに如かず

コードをプッシュしてレビューする一連のプロセスは複雑化しがちです。自前のCI/CDパイプラインを構築したり、Jenkinsの設定を弄ったり、CI/CDやCDNのベンダーを選定するのに時間がかかりすぎるのです。CI/CDとCDNをうまく連携させたり、複雑なシステムの挙動を見張るのはとても難儀です。

フロントエンドに特化したプッシュ・レビューの仕組みについて試行錯誤した結果、私達は画期的なアイデアにたどり着きました。Jamstackのフロントエンドアプリを開発しているチームにとっては、プレビュー用のURLほどシンプルで強力なものはないと気づいたのです。Vercelを使えば、開発中のフロントエンドアプリをプレビュー用にデプロイし、すぐさまそのURLを取得して結果を確認することができます。コンテンツ管理システム(訳註: Wordpressなど)によくあるプレビュー機能と同じですが、VercelはGitと連携し、全てのpushに対してデプロイを行うのがポイントです。(訳註: 各pushごとに独立したデプロイが行われ、毎度新しいURLが生成されます。また、ブランチに対応したURLも別に生成されます。)

たかがURLだと侮るなかれ。プレビューURLには、複雑な仕組みからフロントエンド開発者を解放し、開発スピードを飛躍的に高める効果があるのです。

最もわかりやすい例を挙げると、プレビューURLがあれば、開発部門だけでなく、マーケティングや営業や法務など他部門との共同作業が捗ります。社内チャットでプレビューURLを送り合うだけで、いま何の開発が進んでいて、会社としてどの分野に力を入れているのかが可視化されるのです。

デプロイ毎に新しくURLが生成されれば、テストも容易になります。プレビューURLを使えば、ステージング環境を通り越して、本番と同じ環境でテストを行うことができます。もちろん、プレビューURLはアイデア段階のプロダクトを試すのにも使えるでしょう。発案から品質保証まで、ソフトウェア開発プロセスの全段階においてプレビューURLは役立つのです。

VercelのデプロイプレビューURLのもうひとつのメリットは、すべての機能が本番環境と遜色ないということです。たとえば、Vercelはプレビューを含む全てのデプロイURLを自動で常時SSL化してくれます。インフラ整備に頭を悩ますことなく、Let’s Encryptを用いたセキュアな環境を利用することができるのです。常時SSL化はプレビューURLを共有する際に役立つだけでなく、本番さながらの環境でテストを行うのにも重宝するでしょう。テスト時にSSL化を徹底していないと、いざ本番にデプロイした際にセキュリティ警告が表示されたり、ユーザー体験が損なわれる可能性が生まれます。ちなみに最近のブラウザでは、SSL化されていないサイトではBluetooth、ウェブカメラ、マイクといった機能がそもそも利用できなくなります。

#3. スピードが命

最近のフロントエンド開発において、サイトの速度ほど大事なことはありません。たとえば GoogleのLighthouseスコアは、さまざまな観点からサイトの速度をそれぞれ数値化してくれますが、いずれの速度もサイトの検索順位に影響します。

Vercelはグローバルなエッジネットワークを運用しており、特に何もせずともデプロイする度にLighthouseで満点を取り続けることができます(訳註: Lighthouseのパフォーマンススコア)。Vercelの利用者が、CDNやサーバレスアーキテクチャの黒魔術を理解する必要はありません。ただVercelにPushするだけで、あなたのフロントエンドアプリは世界中のエッジにデプロイされ、静的コンテンツはキャッシュされ、またトップクラスの圧縮技術で圧縮されます(Vercelでは Brotli が使われています。訳註: gzipも利用可)。フロントエンドのパフォーマンスにまつわる全ての指標に向けた最適化が行われ、その効果はプレビューURLで確かめることができるのです。

また、Vercelはサイトの速度だけでなく、開発速度の向上にも一役買います。開発の軸足をローカルからクラウドに移すことで、より楽に、より速くプロダクトを改善できるようになるはずです。

#これから

ユーザーにとってはより速く、開発者にとってはより開発しやすく。ウェブの新時代はまだ始まったばかりです。

そんな時代をぜひ、Vercelと共に歩んでみませんか。宜しければ、私達のツイッターもフォローしてみてください。オープンなプラットフォームから生まれたVercelの、どこまでもオープンな物語が垣間見えることでしょう。