概要

株式会社SOZOのコーポレートサイトは、高速でスケーラブルなユーザー体験を提供するために、Gatsbyを中心とした最新のフロントエンド技術を採用しています。

本記事では、使用しているパッケージやプラグイン、開発環境の設定、パフォーマンス向上のための工夫を詳しく紹介します。

1. Gatsbyを選んだ理由

GatsbyはReactベースの静的サイトジェネレーターで、ビルド時にHTMLを生成するため、SEOとパフォーマンスに優れています。

SOZOのコーポレートサイトでは、コンテンツ配信速度の向上とスケーラビリティを重視してこのフレームワークを採用しました。

2. 主な技術スタックとその特徴

以下は、SOZOのコーポレートサイトで使用されている主要なライブラリとツールの概要です。

Gatsby Plugins

• gatsby-plugin-image
• • 最適化された画像を簡単に扱い、パフォーマンスを最大化。
• gatsby-plugin-manifest
• • PWA対応を強化し、モバイルファーストの体験を提供。
• gatsby-source-microcms
• • MicroCMSと連携し、ヘッドレスCMSとしての柔軟性を発揮。
  • 「/news」をMicroCMSの管理画面から投稿できる様にする。

フォーム管理とバリデーション

• react-hook-form & @hookform/resolvers
• • 軽量で高パフォーマンスなフォーム管理を実現。
• zod
• • スキーマベースのバリデーションを提供し、型安全性を強化。
  • 「/simulation」のシュミレーターフォームで使用

UI/UXの向上

• swiper
• • 滑らかなカルーセルを簡単に実装。
• @fontsource/noto-sans-jp
• • 読みやすくモダンな日本語フォントを採用。

3. 開発環境とテスト戦略

効率的な開発と高品質なコードを維持するため、以下のツールを導入

型チェックと静的解析

• typescript
• • 型システムを活用し、エラーを事前に検出。
• eslint & prettier
• • コーディング規約の自動整形とコード品質の向上。

テスト環境

• jest & @testing-library/react
• • ユニットテストとUIコンポーネントのテストをサポート。
• ts-jest
• • TypeScriptとJestを統合し、スムーズなテストプロセスを提供。

4. パフォーマンスとSEOの最適化

Gatsbyの特徴である静的生成に加え、以下の最適化手法を採用

Google Tag Manager

`gatsby-plugin-google-tagmanager`を活用し、マーケティングタグの効率的な管理とデータ収集を実現。

Microsoft Clarity

`gatsby-plugin-clarity`でユーザー行動を可視化し、サイトの使いやすさを向上。

5. 開発フローの自動化

`pnpm`による高速なパッケージ管理や、スクリプトの自動実行（`preinstall`）により、開発効率を最大化。