Core Web Vitalsを意識したフレームワーク選定
昨年から Core Web Vitals の話が盛り上がっていますが、すでに稼働しているサービスへの修正の話題はよく見かけるものの、新規にサービスを立ち上げるときの話題はまだまだ少ないような気がします。
今回は話のきっかけとして私見で Core Web Vitals 対応するのに都合が良いフレームワーク構成を選んでみました。具体的な製品名やサービス名も出てきますが、これが最強！という意図ではなく選定した理由のほうに着目してフレームワーク選定のヒントにしていただければと思います。
技術詳細ではなく概要をもとに解説していますので、プロダクトマネージャーやウェブディレクターなどの方々が初期検討を行う際の材料になれば幸いです。
ざっくりと下記の3つの分野で紹介していきます。
Jamstack な構成に出来るかということを主眼にしているので、 Jamstack については以前の記事もぜひご覧ください。
※できるだけ穏当な候補を選択したつもりなので、わりと一般的な内容になっています。
- コーポレートサイト・サービス紹介サイト
- ECサイト
- フルスクラッチな Web アプリケーション
コーポレートサイト・サービス紹介サイトなど
まずはスタティックな構成のサイトになりやすいコーポレートサイトから。
Core Web Vitals への影響以外に下記のような基準で選んでみました。
- 運用の手間
- 構築コスト
- カスタマイズ制
Shifter
Shifter は「WordPress のための Jamstack ソリューション」をうたう WordPress ベースの SaaSです。
内部で WordPress を用いながら、配信は静的なHTMLの出力を事前におこなうことで高速なページ閲覧を実現しています。
なによりも WordPress がベースとなっているため、運用の安心感や構築を依頼できる相手先の選択肢が豊富なのが魅力です。
SaaS なので WordPress のプラグインすべてを自由に使えるわけではないのが注意点ですが、コーポレートサイトなどの実装には十分なだけ充実していると感じます。
月額費用が発生しますが、サーバーのメンテナンスなどから開放されることを考えれば合理的な価格ではないでしょうか。
Gatsby + HeadlessCMS
もっと自由にカスタマイズしたい、もっと内部に手を入れてチューニングしたいという場合は Gatsby がおすすめです。
Gatsby は React 製の静的サイトジェネレーターです。 公開時に利用するAPIからデータを取得することで全ページを生成し、ページ表示後は SPA として動く Jamstack 構成の代表的なフレームワークのひとつです。
要件にあう HeadlessCMS （APIでコンテンツを返す機能があるCMS）を選定することで独自のコンテンツを配信することができるので自由度は抜群です。複数のAPIを組み合わせることも可能なので自社サービスのAPIを利用してサービス独自の情報をシームレスに統合することも可能です。
静的サイトの構築に特化しているため比較的簡単に高度なことができるのが魅力ですが、React 前提となるためフロントエンド開発が得意な相手先に依頼する必要があるのがコスト面で難点でしょうか。
ECサイト
ECサイトは長い歴史のなかで生き残った強者がひしめく領域なので、 Jamstack 構成に利用できるサービスが限られています。
また、筆者は EC 領域はそこまで強くないため他にもおすすめの構成があるかもしれません。その点ご留意ください。（もしもっと良い構成あればぜひおしえてください！）
Shopify + Jamstack
Shopify はカナダ拠点のECプラットフォームです。素の状態でも高速配信や安定したプラットフォームなど魅力的なのですが、なによりも API が充実しているのが良いです。
そのため商品管理や在庫管理・注文管理などは Shopify で行いつつ、フロントエンドは Jamstack 構成にすることが可能です。
商品詳細や商品一覧など検索流入してくる表側のページのみ Jamstack にし、カートや決済から先は Shopify に任せるという構成が費用対効果的にも良さそうです。
採用する Jamstack フレームワークは前述の Gatsby や後述の Next.js, NuxtJS などがおすすめです。要件や開発チームの得意領域にあわせて検討することをおすすめします。
とても強力なECプラットフォームですが、ECサイトに多く関わってきた方からは「日本製のECシステムなら当たり前にできることが手間かかったりすることはある」というようなことを聞いたことがあります。すでにECサイトを運用されていてリプレースを検討される場合はオペレーションとの整合性をしっかりと検討してください。（他のECシステムでも同じですね。）
日本市場への本格的な参入から3年ほどのようなのでさらなるローカライズに期待です。
フルスクラッチな Web アプリケーション
自社サービスなど要件が複雑でフルスクラッチにてフロントエンド開発を行う必要がある場合は、まず React か Vue.js を使うかで大きく分かれます。
どちらも チーム開発にむいているフレームワークをピックアップしてみました。
Next.js with SSG
Next.js はReact をベースにしたフレームワークです。
Vercel というフロントエンドに特化したホスティングサービスの会社が開発しているため、常に高速化のためのアップデートを行なっています。
React を採用する予定で Gatsby では要件を賄いきれず、チーム開発が必要な規模感のサービスであれば Next.js がおすすめです。
Static Generation というSSGの機能を持っているため、この機能が有効になるよう開発を行えば Jamstack 構成の実現が可能です。
バージョンアップがはやく React の最新トレンドに対応した高速化手法が毎アップデートごとに取り入れられているのも特徴です。
常に最新に追いつくのが少し大変なので開発チームの習熟度などで採用を検討するのが良さそうです。
NuxtJS with SSG
NuxtJS は Vue.js をベースにしたフレームワークです。
Next.js にインスパイアされて開発が始まったとのことですが、開発効率に着目して開発のしやすさを重視しているフレームワークと感じています。
手軽に導入できて大規模開発にも耐えられるというのが魅力的です。
nuxt generate という機能を使うことでSSGができるため、 NuxtJS も Jamstack 構成が可能です。
また generate 時にクロールを行う機能があるため、SSGのための手間がとても少ないのも特徴です。
※筆者は nuxt generate の経験が不足しているので一部誤解もあるかもしれません。
Vue.js はアジア圏で人気なこともあり日本語訳された正式ドキュメントが豊富です。
そのため対応できる開発会社やフリーランスエンジニアも多く、開発を依頼する際の選択肢が多いのは特徴かもしれません。
NuxtJS, Next.js どちらにもメリット・デメリットがあるため開発チームとよく相談して決定するのをおすすめします。
フレームワーク選定は最初の一歩
ここまで Core Web Vitals を主眼にいくつかのパターンでフレームワークの紹介をしてきました。
しかし、フレームワークがまともであれば Core Web Vitals が向上するというわけではありません。フレームワーク選定後は適切な配信システムや画面レイアウト、CSS設計、画像の最適化などなど Core Web Vitals に影響するトピックはさまざまです。
この手の最適化はどこか一点が優れていても一箇所がボトルネックになっていれば意味がありません。
エンジニア・デザイナーと一緒にひとつずつ課題をクリアしていけるように要件の検討をすすめることをおすすめします。
せっかくフレームワーク選定から始められるプロジェクトであれば、ぜひエキスパートを巻き込んでよりよいサービスになるよう要件と設計を決めていけると良いですね。
弊社ではJamstackの知見で事業作りに貢献したいフロントエンドエンジニアを募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか？
もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。まずはお気軽に声をかけてください。お仕事お問い合わせや採用への応募、共に大歓迎です！
求人応募してみる！
