Zenn
技術的な知見や開発の過程を記事として公開
zenn.dev/hudorosu技術は、
ビジネスを加速させるための手段である。
Next.js / React Native / Express / TypeScript
を用いたフルスタックな開発体制
LP
Next.js
Next.js
→
Backend
Express
Express
Mobile
React Native
React Native
→
Admin
React + Vite
React + Vite
Next.jsによるSEOとUXの最大化
React Nativeによるマルチプラットフォーム戦略と、
TypeScriptによる型安全性を組み合わせた技術スタック
LP (Next.js)
パフォーマンスとSEOの追求。Next.js 14のApp Routerによる高速なページ遷移と、サーバーサイドレンダリングによる検索エンジン最適化を実現。TypeScriptとTailwind CSSで保守性の高いコードを実現。
Next.js 14App RouterSEO最適化Tailwind CSS
Mobile (React Native)
コスト効率とUXの両立。Expo SDK 54とReact Native 0.81により、iOS/Androidの両プラットフォームでネイティブアプリ並みのパフォーマンスを、単一コードベースで実現。TypeScriptによる型安全性も確保。
Expo SDK 54React Native 0.81クロスプラットフォームTypeScript
Admin (React + Vite)
業務効率化を支える操作性。Vite 7による超高速なビルドとホットリロードにより、開発速度を最大化。React 18とTypeScript、Tailwind CSSで直感的なUIを実現。
Vite 7React 18Tailwind CSSTypeScript
Backend (Express + TypeScript)
型安全でスケーラブルな基盤。ExpressとTypeScriptによる型安全性を組み合わせ、Sequelize ORMでPostgreSQLと連携。保守性の高いRESTful APIを構築。
ExpressTypeScriptSequelizePostgreSQL
なぜこのスタックか？
技術選定の意思決定ロジック。単なる流行ではなく、
ビジネス価値を最大化するための戦略的な選択。
01
なぜNext.js 14のApp Routerなのか？
キャッシュ戦略とRSCの活用により、従来のSPAでは実現困難なパフォーマンスを実現。サーバーコンポーネントによる初期ロード時間の短縮と、クライアントコンポーネントによるインタラクティブなUXを両立。SEO最適化も自動的に実現。
初期ロード時間 50%削減
SEOスコア 100点達成
02
なぜExpo SDK 54を採用しているのか？
開発効率とクロスプラットフォーム対応が最大の理由。Expo Goによる即座の動作確認と、豊富なネイティブモジュールにより、iOS/Androidの両プラットフォームを単一コードベースで開発。OTA（Over-The-Air）アップデートにより、App Store審査なしで緊急修正も可能。
開発速度 2倍向上
開発コスト 40%削減
03
なぜTypeScriptを全プロジェクトで統一しているのか？
長期的なメンテナンスコストの削減と型安全性の確保が目的。LP、Backend、Frontend、Mobileの全プロジェクトでTypeScriptを統一採用することで、型安全性による実行時エラーの事前検出を実現。大規模開発でも、コードの可読性と保守性を維持。モノレポ構成との相乗効果で、3年後の技術的負債を最小化。
バグ発生率 70%削減
オンボーディング時間 50%短縮
数値で見る成果
Performance Report - 実際の数値で証明する品質
Lighthouseスコア
All 100
Performance100
Accessibility100
Best Practices100
SEO100
開発速度
工数削減 60%
60%
コードベース共通化による工数削減
2週間
新機能リリースまでの平均期間
稼働率・エラー率
99.9%
99.9%
システム稼働率
0.01%
エラー発生率
開発ツールとワークフロー
ただ作るだけでなく、品質を担保する仕組みをどう組んでいるか
Infrastructure
Docker ComposeによるPostgreSQLデータベースの管理。開発環境と本番環境の一貫性を保ち、スケーラブルなインフラ構成を実現。
Tooling
モノレポ構成によるコード共有と型安全性の確保。ESLintによるコード品質の自動チェックと、Sequelize CLIによるデータベースマイグレーション管理。
技術記事・ブログ
開発の過程や技術的な知見を共有しています