インタビューReact アプリケーションを構築するための Next.js フレームワークの作成者である Guillermo Rauch 氏が、リリースされたばかりの Next.js 9.3 と、Web アプリケーション開発に対するハイブリッド アプローチについてThe Registerに語りました。
Rauch氏はクライアントアプリケーション向けのJAMstack（JAMは「JavaScript、API、Markup」の略）の提唱者です。JAMstackの最も純粋な概念は、Webアプリケーションを静的ページに事前に構築し、コンテンツとコードを使用して出力を生成するというものです。
このプロセスは1日に何度も発生する可能性があります。静的なWebページはパフォーマンスを最適化する上で最適であり、リクエストごとにページを再生成する必要がないため、効率的です。アカウント情報やショッピングカートなど、個々のユーザーに固有のコンテンツは、クライアントで実行されるJavaScriptによって、カスタムマイクロサービスまたはその他のアプリケーションによって公開されたAPIから取得されます。
したがって、JAMstackのコンセプトには静的サイトジェネレーターの考え方も含まれています。そのリストはこちらです。例としては、Gatsby、Hugo、Jekyllなどが挙げられます。Next.jsもその一つです。これはReactアプリケーションを生成するJavaScriptフレームワークです。Git統合を追加することで、リポジトリへのコンテンツ変更のプッシュ時に更新のテストとデプロイが自動的に行われるようになり、ウェブサイトやアプリケーションを保守するための強力なメカニズムが実現します。
ただし、静的サイト生成（SSG）とAPIのみに依存することは、すべてのユースケースに最適とは限りません。解決策は、SSGとサーバーサイドレンダリング（SSR）を組み合わせることです。サーバーサイドレンダリングは、PHPやASP.NETなどの旧式のWebアプリケーション技術で使用されています。このため、Next.jsコミュニティでは、「ページごとに静的サイト生成とサーバーサイド生成の両方を行う方法を提供することで、Next.jsを完全にハイブリッド化できるようにする」という議論が行われました。
この変更は、新たにリリースされたNext.js 9.3の中核を成すものです。「Next.jsは、静的サイト生成、クライアントサイドレンダリング、サーバーレンダリングのあらゆる領域に対応できます」とRauch氏は述べています。「まるで新たな始まりのようです。SSGをハイブリッドな方法で組み合わせ、ユーザーに選択肢を提供するというこのアイデアは、本当に大きなものです。」
Next.jsはReactウェブページを生成するためのフレームワークです
新リリースでは、Internet Explorer 11などの古いウェブブラウザに必要なポリフィルと呼ばれる互換性機能を削除することで、クライアントにダウンロードされるJavaScriptランタイムライブラリのサイズも削減されています。旧ブラウザを使用している場合、ポリフィルはオンデマンドでダウンロードされます。これによりページサイズが約32KB削減され、パフォーマンスが向上します。「Googleは、パフォーマンスに基づいてウェブサイトのランキングを決定づけることに真剣に取り組んでいます。Androidデバイスでレンダリングされるパフォーマンスの遅いウェブサイトには、警告を表示することも検討しています。」
ミニマル
セキュリティ上の脆弱性を持つ古いJavaScriptライブラリを開発者が使用する場合の問題はどうでしょうか？「Next.jsは、後方互換性を厳格に重視した頻繁なビルドサイクルを採用しています」とRauch氏は言います。「Next.js 0.1用に作成したコードは9.3でも動作します。そのため、依存関係のアップグレードをストレスなく行えるようにしました。Next.jsは軽量なフレームワークです。」
JavaScriptの世界では、信頼できるモジュールを見つけるのが困難でした。選択肢が何百万もあるからです。私たちはすでにその決定を下しており、WebpackとBabelをバンドルしています。最小限の要素にとどめることで、セキュリティを確保しています。
ラウチ氏によると、Next.js開発者の多くは、オプションで静的型付けが可能なJavaScriptのスーパーセットであるTypeScriptを使用しているという。「私たちはTypeScriptを最も早く導入した企業の1つです」と彼は言う。「TypeScriptチームと協力して、Next.jsとTypeScriptを連携させた非常に人間工学的な方法を開発しました。」
「Next.js は、TypeScript ページを書き始めると、TypeScript を最適化するために必要なすべての構成を自動生成します。TypeScript は、特に企業での導入において、JavaScript を次のレベルに引き上げるテクノロジーになると思います。」
TypeScriptの人気の理由は何でしょうか？「従来.NETやJavaといった言語を使ってきた企業、さらにはRuby on RailsコミュニティやGOコミュニティでさえ、JavaScriptを避けてきました。JavaScriptは、非常に曖昧で動的な言語であり、多くの興味深い落とし穴を抱えていたからです。しかし、現代的で魅力的なエクスペリエンスを生み出すにはJavaScriptが必要なのです。TypeScriptは、バックエンド言語と同じような感覚と安心感を与えてくれます。」
「たとえ有能な JavaScript チームがあったとしても、非常に大規模なコードベースを作成する場合は、大規模に検討し、大規模にドキュメント化してコメントし、大規模にリファクタリングするために、TypeScript を採用する必要があります」と Rauch 氏はアドバイスしています。
誰かが非常に最適化されたNext.jsプロジェクトを作成し、ビジネス側の誰かがやって来て、「このスクリプトを挿入するだけ」と言って広告を配信します。
最後に、Visual Studio Codeの台頭があります。VS Codeはフロントエンド開発者のコードエディタとして定着しました。TypeScriptとの連携が非常に優れているだけでなく、TypeScriptによってVS Codeは優れたコードエディタとなり、素晴らしいサジェスト機能や自動補完機能など、様々な機能を備えています。つまり、VS CodeとTypeScriptの成功は相乗効果を生んでいると言えるでしょう。Next.jsのTypeScriptユーザーに話を聞くと、95%の人がVS Codeと併用していると言えるでしょう。
WebAssemblyはフロントエンド開発にどのような影響を与えるでしょうか？Rauch氏は、WebAssemblyは1つの言語だけで作業したい人にとって役立つだろうと述べています。「1つの言語だけを使うチームは、より速く作業を進める傾向があります。」
コードベースでのコラボレーションの障壁となるのではなく、まずバックエンドに着手し、次にフロントエンドのためにTypeScriptを学ぶのです。WebAssemblyによって、このユニバーサルな配信フォーマットにクロスコンパイルし、単一の言語で開発できるようになることを期待していましたが、実際にはまだうまくいっていません。
画像操作、動画、数値計算など、適切に分離された個別のプロセスを高速化できる可能性が秘められています。すでにその動きは加速しています。また、Next.js内にWebAssemblyモジュールを組み込めるようバインディングを構築しています。今のところは特殊な用途でしか使われていませんが、パフォーマンスの予測可能性が大幅に高まるため、非常に期待しています。興味深い技術になると思いますが、まだ判断するには時期尚早です。
素晴らしい！さあ、広告スクリプトでぶち壊してみよう
フレームワーク開発者はパフォーマンスとデザインに素晴らしい取り組みをしていますが、広告と収益化のせいで、Web の多くはユーザーにとって不快なものになっています。「現在私たちが目にする最大のパフォーマンス問題の一つは、広告に関係しています。誰かが非常に最適化された Next.js プロジェクトを作成すると、ビジネス側の誰かがやって来て、『このスクリプトを挿入するだけ』と広告を流すのです。予測不能な広告読み込みの結果としてページが飛び跳ね始めると、レンダリングパフォーマンスに多くの問題が発生します。」
「巨大なページが縦横に表示され、バナーやポップアップ、ブロッカーが目立ち、プライバシーが侵害されるなど、広告もまた、顧客体験の質を低下させる一因となっています。優れた顧客体験を維持し、プライバシーを守る方法を見つけるために、ウェブは進化していく必要があります。」
「Appleのようなネイティブエコシステムは、合理的なサブスクリプションシステムとプライバシー保護をOSに組み込むことで、この点で大きな進歩を遂げています。Webはこうした基本機能を獲得するために進化していくでしょう。そうでなければ、競合他社に負けてしまうでしょう」とラウチ氏は語る。
残念なことに、これらの広範な問題はフレームワーク開発者だけでは解決できません。®
