モダンフロントエンド

WebサイトやWebアプリケーションを構築する際に用いられるフロントエンドの技術は、時代と共に移り変わっています。ピクセルグリッドでは次のようなWebの作り方をモダンフロントエンドと定義し、よりよいWeb開発に取り組んでいます。

UIフレームワーク（React、Svelte、Solidなど）を使い、再利用性の高いコンポーネントとして分割する設計手法です。これにより保守性や拡張性を高めます。

最近のブラウザで使えるようになった技術を積極的に利用します。たとえば、CSSではGridを活用して複雑なレイアウトをシンプルに実現し、JavaScriptではモジュールシステムによりコードを分割し効率的な開発を行います。

開発用のコードと、公開用のコードに求められるものは違います。メンテナンスしやすい開発用のコードをビルドツールによって、パフォーマンスを最適化した公開用のコードにします。

Webの特性を活かし、誰もが利用できるようにすることはもちろん、最新の技術を活かし、ユーザーの使い勝手を考えてデザイン・実装します。

Cloudflare PagesやVercelのようなフロントエンドクラウドと呼ばれるホスティングサービスにデプロイできる形で設計します。これによりインフラの管理コストを大きく削減できます。

ビジネスの観点から見ると、モダンフロントエンドは企業のWebサイトやアプリケーションが市場で競争力を維持・向上させるための基盤技術と言えます。

新機能の追加や変更がスムーズになり、ビジネスニーズに迅速に対応できます。

サイトやアプリの動作が速くなることで、顧客満足度の向上やコンバージョン率の改善につながります。

静的なコンテンツやフロントエンドクラウドを利用して長期的なコスト削減が期待できます。

企業の先進性や信頼性をアピールでき、ブランド価値の向上に寄与します。

Jamstackは、Webフレームワーク（Astro、SvelteKit、SolidStart、Next.jsなど）または静的サイトジェネレーター（Eleventyなど）とフロントエンドクラウド（Cloudflare Pages, Vercel、Netlifyなど）と呼ばれるホスティングサービスを組み合わせ、全てのコンテンツをビルドプロセスで静的に生成する手法です。動的な機能はブラウザ（CSR）で行います。

コンテンツ管理はヘッドレスCMSを利用するか、Markdownのような更新しやすいテキストファイルで行います。

Jamstackではすべてのコンテンツが事前に生成されているため、動的な処理が不要になり、サーバー負荷がほぼゼロになります。その結果、ページの表示速度が高速化し、DDoS攻撃のリスクも大幅に軽減されます。また、フロントエンドクラウドと組み合わせることで、どんなにアクセスが集中してもスムーズな配信が可能です。セキュリティが大事なサイトにもおすすめです。

事例

致知電子版

月刊『致知』をWebで読めるサービス「致知電子版」の設計と開発を担当。 Jamstack構成により、素早くユーザーにコンテンツを届けられるメディアサイトを、ランニングコストを抑えて実現しました。

  • Svelte
  • Prismic
  • AWS Amplify
  • Amazon Cognito
  • GitHub
  • Eleventy
  • Tailwind CSS
  • Stripe

セゾンカード

リニューアル時のフロントエンド開発を担当。 EleventyとmicroCMSによるJamstack構成で、情報を整理し更新しやすく、高速でセキュリティを考慮したWebサイトを実現しました。

  • Eleventy
  • microCMS
  • AWS Amplify
  • Svelte
  • GitHub

Webフレームワークとフロントエンドクラウドを組み合わせ、ユーザーに高速でメンテナンスしやすいWebアプリケーションやWebサイトを提供する手法です。

事前に静的に書き出す（Build / SSG）、ページにアクセスしたときに構築する（Edge / SSR）、ブラウザで動的に書き換える（Browser / CSR）を処理や要件によって適切に組み合わせ、ユーザーにとって負担なく快適に表示でき、運用しやすいサイトを構築します。

JamstackがSSG（静的サイト生成）とCSR（クライアントサイドレンダリング）に特化していたのに対し、BEBop Web開発ではSSR（サーバーサイドレンダリング）も適切に組み合わせ、より柔軟で最適なWebアーキテクチャを実現します。Jamstackの進化形とも言える手法です。

JavaScriptの実行する場所（Build、Edge、Browser）に着目し、処理ごとに実行場所を考え、最適なパフォーマンスを引き出すコンセプトから、ピクセルグリッドでは、この手法を「BEBop Web開発」と命名しています。

事例

CodeGrid

Jamstackで作られていた構成から大きく変えず、採用技術をCloudflare + Astroに差し替え。AstroではSSRを使用し、ユーザーごとに出し分ける必要のあるコンテンツにも高速に表示できるメディアサイトを実現しました。

  • Astro
  • Svelte
  • Algolia
  • Hygraph
  • Cloudflare Pages
  • Cloudflare Workers
  • Cloudflare Workers KV
  • GitHub

エッジサーバーレスは、従来のサーバーとは異なり、ユーザーに最も近いCDNエッジでJavaScriptを実行できるため、遅延を大幅に削減できます。特に、グローバルなAPIレスポンス速度を向上させたり、リクエスト負荷を分散したりする用途に適しています。

具体的には、Cloudflare WorkersやCloudflare Pages Functionを中心に、APIやWebアプリケーションを構築します。

これにより、コストを抑えつつ高速で、アクセスに強い仕組みを構築できます。

事例

FONTPLUS アドバンスト・プラン

静的サブセッティング方式のWebフォント配信システムの開発を行いました。配信の速度が重要であり、大量のアクセスが見込まれるサービスのため、Cloudflare開発プラットフォームを採用し設計しました。高速な配信とコストの削減を両立したWebフォント配信サービスを実現しています。

  • SvelteKit
  • Cloudflare Pages
  • Cloudflare Workers
  • Cloudflare Workers KV
  • Cloudflare D1
  • GitHub