Realays開発ログ: はじめ

Realaysハブサイトを開発しながら経験したプロセスと技術的決定を記録として残したいと思います。この最初の記事では、プロジェクトの背景と技術スタック選定の理由について扱います。

1. プロジェクトの背景

Realaysは、様々なウェブサービスを一つのブランドで統合し、ユーザーに一貫した体験を提供するために始まりました。当初、各サービスは個別に存在していましたが、これらを包括するハブ(Hub)サイトの必要性が浮上しました。単にリンクを集めたページではなく、Realaysのブランド価値とビジョンを伝えることができる空間が必要でした。

2. 技術スタック選定 (Tech Stack)

Realaysハブサイト開発のために選定されたモダンウェブ技術スタック

迅速かつ効率的な開発と保守性を考慮して、以下のようなModern Web Stackを選定しました。

フロントエンドフレームワーク: Astro + React

このプロジェクトの最大の特徴は、Astroをメインフレームワークとして採用したことです。

• なぜAstro?: ハブサイトはコンテンツ中心(Content-focused)のウェブサイトです。初期にロードすべきJavaScriptを最小化するAstroの’Island Architecture’が性能最適化に有利だと判断しました。
• なぜReact?: 動的なインタラクションが必要なコンポーネント(例:言語セレクター、モバイルナビゲーションなど)には、慣れ親しんだ豊富なエコシステムを持つReactを使用しました。

言語: TypeScript

プロジェクトの規模が大きくなるほど、型の安全性は重要になります。TypeScriptを導入して、ランタイムエラーを事前に防止し、コードの可読性と開発生産性を向上させました。

スタイリング: Tailwind CSS

迅速なプロトタイピングと一貫したデザインシステム構築のために、Tailwind CSSを使用しました。ユーティリティクラスベースのスタイリングはCSSファイルのサイズを削減し、ダークモードの実装などを非常に簡単にします。

デプロイメント: Vercel

VercelはAstroとの互換性に優れ、世界中のエッジネットワークを通じてユーザーに高速でコンテンツを配信できます。また、CI/CDパイプラインが自動化されており、デプロイメントプロセスが非常に便利です。

3. 今後の計画

ハブサイトの1次オープンは始まりに過ぎません。今後、以下のような作業を計画しています。

1. サービス統合強化: Dalendar、FruitsFace、Style AIなど、各サービス間の連携を強化し、シームレスなユーザー体験(Seamless UX)を提供します。
2. 技術ブログの活性化: 開発過程で経験した問題解決の経験、技術的チャレンジなどをブログを通じて共有し、開発コミュニティとコミュニケーションしたいと思います。

今後の旅も着実に記録しながら共有します。たくさんの関心をお願いします！

開発過程で直面した課題

1. 多言語(i18n)実装

ハブサイトは最初からグローバルユーザーをターゲットにしたため、韓国語、英語、日本語の3つの言語をサポートする必要がありました。

選択したアプローチ

• Astroのi18nルーティング機能を活用
• JSONベースの翻訳ファイル管理
• 各言語別の個別フォルダ構造 (/en, /ko, /ja)

遭遇した問題

• SEO問題: 各言語別のcanonical URL設定
• ルーティング複雑度: 言語別動的ルーティング処理
• 翻訳の一貫性: 技術用語の統一

2. 静的サイト生成の最適化

Astroは静的サイト生成(SSG)を基本としますが、大量のページをビルドする際に時間がかかりました。

最適化戦略

// astro.config.mjsで並列ビルド設定
export default defineConfig({
  build: {
    inlineStylesheets: "auto",
    split: true,
  },
  vite: {
    build: {
      rollupOptions: {
        output: {
          manualChunks: {
            vendor: ["react", "react-dom"],
          },
        },
      },
    },
  },
});

結果: ビルド時間30%短縮

3. ダークモード実装

考慮事項

• ユーザー設定の保存 (localStorage)
• システム設定の自動検出
• ちらつきのないスムーズな遷移

実装コードスニペット

// ページロード前にthemeを適用 (FOUC防止)
const theme =
  localStorage.getItem("theme") ||
  (window.matchMedia("(prefers-color-scheme: dark)").matches
    ? "dark"
    : "light");
document.documentElement.classList.toggle("dark", theme === "dark");

技術的意思決定の背景

Astro vs Next.js vs Gatsby

基準	Astro	Next.js	Gatsby
性能	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐
学習曲線	⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐
コミュニティ	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐
柔軟性	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐

選択理由: コンテンツ中心のサイトで、Astroの性能と柔軟性が最も適していました。

性能測定と改善

Lighthouseスコア

初期:

• Performance: 72
• Accessibility: 88
• Best Practices: 83
• SEO: 91

最適化後:

• Performance: 98
• Accessibility: 100
• Best Practices: 100
• SEO: 100

終わりに

Realaysハブサイトの開発は、単なるウェブサイト制作ではなく、ブランド価値を伝えユーザー経験を最大化するプロセスでした。

今後も技術ブログを通じて、開発過程の挑戦と解決策を透明に共有し、開発コミュニティに貢献したいと思います。

ご質問があれば、いつでもお問い合わせからご連絡ください！

たくさんの関心とフィードバックをお願いします。🚀