モダンフロントエンド

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

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

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

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

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

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

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

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

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

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

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

Jamstackは、Webフレームワークや静的サイトジェネレーターと、フロントエンドクラウドを組み合わせる手法です。すべてのコンテンツをビルド時に静的生成します。動的な機能はブラウザ（CSR）で実行します。たとえば、AstroやSvelteKit、Eleventy、Cloudflare Pages、Vercel、Netlifyなどを用います。

コンテンツ管理はヘッドレス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 Functionsを中心に、APIやWebアプリケーションを構築します。

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

事例

FONTPLUS アドバンスト・プラン

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

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

モダンフロントエンドで解決したいプロジェクトがあれば、技術選定の前に気軽にお問い合わせよりご相談ください。

お問い合わせ