sahoooii

# Next.js(App Router) フルスタック バケーションレンタルサービス開発（予約 / Stripe決済 / チャット機能） ## デプロイサイト: [Aloha Estate](https://next-aloha-estate.vercel.app) ## GitHub: [next-alohaEstate](https://github.com/sahoooii/next-alohaEstate) --- ## 概要 Next.js（App Router）と TypeScript を用いて開発した **Airbnb風のバケーションレンタルサイト。** 予約・チャット・物件登録・管理機能など **実サービスを想定した機能を包括的に実装。** Next.js(App Router) を用い、 フロントエンドとAPIを単一プロジェクトで構築。 SSR / CSR / SSG を適切に使い分けることで **高速レンダリングと快適なUXを実現。** また TypeScript と Zod によるバリデーションを組み合わせ **安全で拡張性の高いデータフローを構築した。** --- ## 使用技術 ### Frontend / Backend Next.js 14（App Router / Server Components / Server Actions） / TypeScript / Tailwind CSS / shadcn/ui ### Database MongoDB / Mongoose ### Auth / Validation / Payment Clerk / Zod / Stripe ### Infra / Tools Cloudinary / Vercel (CI /CD デプロイ) / Git / GitHub --- ## 実装機能 ## ユーザー機能 - OAuthログイン（Clerk） - 物件検索 / 物件詳細閲覧 - 予約機能 - レビュー投稿 / 削除 - Stripe決済 - チャット機能 - お気に入り保存 - 予約管理 - プロフィール編集(アイコン画像変更) ## オーナー機能 - 物件管理 - 物件登録 / 編集 / 削除 - 物件情報の編集 / 画像アップロード ## 管理機能 - ユーザー管理 - 物件管理 - 予約管理 / 月額予約チャート閲覧機能 --- ## 技術的な工夫 ## 1. チャット機能の再設計（メール型 → チャットUI） ### 課題 当初のメッセージ機能は **メール型UI（スレッド表示）**で実装していた。 しかしこの方式では - 会話の流れが分かりにくい - 一度の会話ラリーしか想定されて設計されていない - リアルタイムコミュニケーションに向かない というUX上の問題があった。 また本アプリではチャットが**補助機能**であるため、 WebSocket等のリアルタイム通信ライブラリを導入すると - インフラ構成の複雑化 - サーバー負荷の増加 - 依存ライブラリの増加 といったコストが発生する問題もあった。 ### 解決 UIとデータ構造を見直し、 チャット機能ではメッセージを **「user × property」の単位 (userId, propertyId の複合キー)** で管理する設計を採用。 これにより - 会話スレッドの明確化 - 物件ごとの問い合わせ履歴管理 - チャット取得クエリの単純化 を実現した。 さらに Next.js の **Server Actions と revalidatePath** を利用し ``` メッセージ送信 ↓ revalidatePath ↓ Server Component再取得 ``` という **軽量な更新フロー**を実装。 `/messages/{userId}/{propertyId}` チャット単位のページのみを **ピンポイントで再検証**することで 最小限の再フェッチで更新を実現した。 また未読メッセージ数の表示は - Messageモデルに `read` フラグを追加 - GlobalContextで状態管理 することで実装した。 ### 結果 - 依存ライブラリを増やさない軽量構成 - 必要十分なチャットUX - サーバー負荷を抑えた更新方式 を実現した。 --- ## 2. Next.js Suspense × Skeleton UI によるUX改善 ### 課題 従来のMERNスタック開発では データ取得中に **ローディングスピナーのみ表示**する構成だった。 その場合ユーザーは - 何が表示されるページなのか - どれくらい待つのか を判断できず、**体感待ち時間が長く感じる問題**があった。 ### 解決 Next.jsの **Suspense** を利用し Skeleton UI を組み合わせたロード設計を実装。 ページ構造に合わせて - 物件カード - 詳細ページ - チャットUI それぞれに **Skeletonコンポーネント**を用意。 ### 結果 - ページ構造が先に視覚化される - ユーザーが表示内容を予測できる ため、**体感待ち時間を大幅に改善。** Next.jsのレンダリング特性を **UX改善に直接活用する実装を行った。** --- ## 3. Zod × Mongoose × TypeScript によるデータ安全性の確保 ### 課題 MongoDBは **スキーマレスDB**のため、 適切な設計を行わない場合 - 不正なデータ保存 - 型不整合 - データ破損 が発生する可能性がある。 ### 解決 以下の3層構造でデータ安全性を担保した。 **TypeScript** - 開発時の型安全性 **Zod** - API入力データのバリデーション **Mongoose Schema** - DB保存時のスキーマ制約 ### 結果 - 開発時 - API入力 - DB保存 の各段階でデータ整合性を保証し、 **安全で保守性の高いデータフローを構築。** --- ## 4. Next.js App Router によるフルスタック構成 ### 課題 従来のMERN構成では - フロントエンド - APIサーバー が分離しており、 - 開発環境の管理 - デプロイ構成 - API設計 が複雑になりやすい課題があった。 ### 解決 Next.js App Router を採用し - UI - API - データ処理 を**単一プロジェクトで統合管理**。 また Next.js の **ファイルベースルーティング**により ルーティング定義を簡潔に保ちつつ、 - 機能単位のフォルダ分割 - コンポーネントの責務分離 を意識した構成で、 **保守性を重視したディレクトリ設計**を行った。 ディレクトリ構成は ``` app components lib actions models types ``` など責務ごとに分割し、 コンポーネント肥大化を防ぐ設計を行った。 ### 結果 - フロント / API の統一構成 - 開発効率向上 - コード管理の簡素化 を実現し、**Next.jsを活用したフルスタック開発を実践。** データ取得ではServer Componentを活用し 不要なクライアントJSを削減。 必要な箇所のみClient Component化することで パフォーマンスとUXのバランスを取った。 --- ## 5. 決済フロー設計の見直し ### 課題 現在の実装では ``` 予約作成 ↓ Stripe決済 ``` の順序で処理を行っている。 そのためユーザーが決済途中で離脱した場合、 ・paymentStatus = false ・予約データは存在する 状態となり、予約枠が保持されたままになる **ゴースト予約が発生する可能性**がある。 ### 改善案 実サービスを想定した予約システムでは pending confirmed cancelled / expired などの **予約ステータス管理**が必要と考えている。 今後は - 予約作成時 → `pending` - Stripe決済成功 → `confirmed` とするフローへ改善予定。 また Stripe Webhook を利用し 決済イベントとDB状態の整合性を保つ設計を検討している。 さらに予約作成と決済処理の整合性を保証するため、 トランザクションを用いた排他制御の導入も検討している。 ### 学び 決済システムでは - 途中離脱 - 非同期イベント - 状態管理 を前提に設計する必要があることを学んだ。 --- # 学んだこと 本プロジェクトを通して以下を実践した ・Next.js App Routerによるフルスタック開発 ・Server Component / Client Componentの適切な分離 ・Zod + Mongooseによる型安全なデータフロー設計 ・SuspenseによるUX改善 ・チャット機能のデータモデル設計 を実践的に学んだ。 またチャット機能の設計やUI改善を通して **ユーザー体験を意識した設計・実装の重要性**を理解した。 現在はさらにリアルタイム性の高いコミュニケーション機能を学ぶため、 **マッチングアプリの開発に取り組んでいる。** --- ## 今後の課題 本プロジェクトでは機能実装だけでなく、 実サービスを想定した設計課題の洗い出しも行った。 例えば予約システムでは ・決済途中離脱によるゴースト予約 ・同日予約の排他制御 ・在庫（部屋数）管理 といった問題が存在することに気づき、 ステータス管理・トランザクション・在庫モデルによる 改善設計を検討している。 今後はトランザクション制御や在庫管理モデルを導入し、 実サービスレベルの予約システムへ改善する予定。

## デプロイサイト: [Weather App](https://weatherapp-frontend-shnz.onrender.com) ## GitHub: [react-weatherApp-3hourly](https://github.com/sahoooii/react-weatherApp-3hourly) ## 概要 React + Tailwind CSS + Node.js + Express を使用して構築した、**現在の天気と 3 時間ごとの予報を表示するお天気Webアプリ**。 OpenWeather API を活用し、 **スムーズで直感的な UX** を実現。 バックエンドを導入して API キーを安全に管理し、**セキュリティと利便性を両立した構成**を実現した。 また、温度や天気に応じて背景が変化するなど、**視覚的にも楽しめるインタラクティブな設計**を行った。 ## 使用技術 **Frontend:** React 18 / Tailwind CSS / Framer Motion **Backend:** Node.js 20 / Express **Infra & Tools:** OpenWeather API / Render ## 動機 React 学習の一環として、**API 連携型のシングルページアプリケーションを構築する経験**を積むことを目的に開発。 単なる天気表示に留まらず、**ユーザーが“体感できる”UX を実装**したいと考え、温度による背景変化・単位切替・モバイル対応などを設計段階から意識した。 また、API キーを直接フロントで扱うリスクを認識し、**Node.js + Express によるバックエンド導入**を決定。 安全性・拡張性の両面で学習効果の高い構成を実現した。 ## 取り組み 初期はフロントエンドのみで構築し、都市検索による天気と 3 時間予報の取得を実装。 その後、API キー保護のためにバックエンドを追加し、**セキュアな API 通信と保守性の高い構成**へ改修。 React の状態管理とレンダリング最適化により、検索結果の即時反映や、現在地ボタンによるワンタップ取得を実現。 背景色の変化、摂氏／華氏・風速単位切替、ローディングアニメーションなど、**視覚と操作の両面で一貫した体験設計**を行った。 ## 実務上の気づきと改善対応 当初は React 単体で API 通信を行い、`.env`ファイルで API Key を管理していたが、デプロイ環境での安全性に疑問を持った。 そこで、シングルアプリケーションのシンプルさを保ちながらも、Node.js + Express による軽量なバックエンドを導入し、安全な構成に改善。 一方で、Render へのデプロイ後にデータ取得の遅延が発生。 そのため、**データ以外のUIを先に描画し、ローディングアニメーションを追加**することで、ユーザーに「読み込み中」であることを自然に伝え、体験を損なわない設計に変更。 この対応を通じて、**「セキュリティとUXはトレードオフでなく、設計次第で両立できる」**という実務的な気づきを得た。 ## 工夫した点 - **API キー保護とセキュリティ向上** - Node.js + Express で API を中継し、キーをフロントから隠蔽 - 商用利用を想定した安全な構成を実現 - **UX 最適化とデザイン演出** - 温度や天気に応じて背景色を動的変更 - 摂氏／華氏・風速単位をリアルタイムで切替 - 現在地ボタンでの自動取得、即時反映を実現 - アニメーションやローディングで滑らかな操作感を演出 - **データ処理と描画効率の最適化** - ネスト構造の API レスポンスを再構成し、必要最小限のデータで描画 - Render でのコールドスタートを意識して、初回読み込みとアニメーション表示の整合性を調整 - **UI/UX の一貫性と情報視認性** - Tailwind CSS とアイコンデザインで情報を直感的に整理 - 視覚的な要素を取り入れ、「データ表示」ではなく「直感的な体験」を伝えるUIを構築 ## 成果 - **React の状態管理・非同期処理・API 通信スキルを実践的に習得** - Node.js + Express による **バックエンド連携とセキュリティ設計の理解を強化** - Tailwind CSS + Framer Motion により、**軽量かつ一貫性のあるデザイン設計力を獲得** - UX を意識した設計・改善を通して、**ユーザー視点のフロントエンド実装力を向上**

## デプロイサイト: [Where Is My Dog?](https://js-whereismydog.onrender.com/) ## GitHub: [js-whereIsMyDog](https://github.com/sahoooii/js-whereIsMyDog) ## 概要 **HTML・CSS・JavaScript のみ**で構築した、記憶力カードゲーム（神経衰弱型）。 React を習得した後、**敢えてフレームワークやライブラリを一切使用せず**に、DOM 操作・アニメーション・ゲームロジックをゼロから実装。 また、Webpack と Babel によるビルド環境を自ら構築し、**アセット管理・最適化・デプロイまでの一連のフローを自走**で完結させた。 この開発を通して、**フロントエンドの低レイヤー理解と開発環境構築力**を磨いた。 ## 使用技術 **Frontend:** HTML / CSS / JavaScript (ES6+) **Infra / Build:** Webpack / Babel / Render ## 動機 React を習得したことで抽象化された開発に慣れた反面、 「ブラウザで何が起きているのか」を自分の手で確かめたいと感じ、**あえてフレームワークなしでの開発**を選択。 DOM 操作、イベント処理、アニメーションなどを自力で設計することで、**JavaScript の基礎と構造設計力を再確認**することを目的とした。 また、単なる技術実験にとどまらず、**デザイン・音楽・演出を組み合わせたゲーム体験**として完成度を追求。 視覚的な動きやフィードバック演出を通して、**「ユーザーを没入させるUI設計」**を学ぶ機会とした。 ## 取り組み カード反転アニメーション、効果音、タイマー、ライフカウントなどを搭載し、**軽快で直感的な操作感を実現**。 PC・スマホ・タブレットの各デバイスに最適化し、**シンプルながら没入感のあるデザイン体験**を提供。 DOM 操作が煩雑にならないよう、JavaScript のクラス構文で構造を整理し、 非同期処理には async/await を導入することで、**コードの可読性と一貫性**を高めた。 また、React 環境以外でもデプロイできるように、**Webpack + Babel によるビルド設定をゼロから構築**。 依存関係の管理、モジュール分割、アセット最適化を自ら設計し、**開発環境の構築プロセスを実践的に理解**した。 ## 工夫した点 - **フレームワークに頼らない環境構築と設計力の強化** - Webpack と Babel を自力で設定し、**ビルド・最適化・デプロイまで一貫管理** - クラスベース設計で DOM 操作やロジックを整理し、**保守性と再利用性を確保** - **UI/UX の演出設計** - タップやクリック操作に連動したアニメーション・効果音で、**操作フィードバックを即時に可視化** - カード反転・成功時のエフェクト・ミス時のライフ減少演出など、**小さな演出でゲームらしさを演出** - **フレームワークなしでも動きと音の演出でユーザーを引き込むインタラクティブな体験**を実現 - **開発環境構築の理解深化** - 依存管理・トランスパイル・バンドルなど、普段 React が抽象化している仕組みを**実体として理解** - “便利さの裏側”を知ることで、Next.jsやViteを用いる際の**パフォーマンス最適化視点**を養えた ## 成果 - **JavaScriptの低レイヤー構造・DOM操作・非同期処理を体系的に理解** - **Webpack / Babel を用いたビルド設定・最適化の実務的スキルを獲得** - UI/UXを意識したゲーム設計を通じ、**演出力と操作感デザインの重要性**を体感 - React / Next.js開発においても、**抽象化の下層構造を理解した上で設計判断**が可能に

## デプロイサイト: [My Portfolio](https://react-my-portfolio-vert.vercel.app/) ## GitHub: [react-myPortfolio](https://github.com/sahoooii/react-myPortfolio) ## 概要 **React × Tailwind CSS × Framer Motion** を活用して構築した、自己紹介・スキル・制作実績をまとめたポートフォリオサイト。 単なる紹介ページではなく、**「自分というプロダクト」**を表現することをテーマに、アニメーション・配色・情報構成に徹底的にこだわった。 ライト/ダークモード、日本語/英語切替、レスポンシブ対応を実装し、あらゆる環境で快適に閲覧できるよう設計。 React Smooth Scroll によるスムーズなページ遷移や、タイプライター風アニメーションを通して、 **視覚的にも印象に残る体験**を提供する。 ## 使用技術 **Frontend:** React 18 / Tailwind CSS / Framer Motion / React Hook Form **Infra:** Vercel（ホスティング） ## 動機 React・Tailwind CSS・Framer Motion の学習を深める過程で、**自分の技術・デザイン・価値観を一つにまとめた「作品集」を作りたい**と感じた。 特に**「UI/UXに強いフロントエンドエンジニア」** としての自分を明確に打ち出すため、操作感・デザイン・アニメーションの一貫性を重視した。 また、**日本語と英語、ライトとダーク**という異なる世界観を一つのサイトで自然に共存させることにも挑戦した。 ## 取り組み - React と Tailwind CSS を基盤に、Framer Motion で各セクションに**滑らかなアニメーション**を実装 - **React Smooth Scroll** により、ナビゲーションから各セクションへスムーズに遷移する体験を設計 - ポートフォリオ欄では、**MERN・Next.js・Vanilla JSなど多様な技術を用いた全プロジェクトを体系的に紹介** - プロジェクトの特徴や技術選定、工夫点を明確に可視化し、訪問者が**「どんなエンジニアなのか」一目で理解できる構成** - タイプライター風アニメーションや柔らかなトランジションで、飽きずに閲覧できる**動的U**Iを演出 - ライト/ダークモードや日英切替機能を実装し、**多言語・多テーマ環境でも一貫したUX**を実現 ## 工夫した点 - **アニメーション×UI設計の統合** - Framer Motion によるページ内アニメーションで、**情報の流れを自然に誘導** - スクロールやクリック時の挙動も**自然で滑らかに設計** - **レスポンシブ & バイリンガル対応** - 画面サイズに応じてコンテンツ配置を最適化 - 日本語/英語切替機能を導入し、グローバルな閲覧にも対応 - **テーマ別のデザイン最適化** - ライト/ダークモードで異なる印象を与えながら、配色コントラストと可読性を確保 - **「成長の軌跡」を示す構造** - プロジェクト完成と共にポートフォリオも完成していく形を意識 - 成果物の積み上げから、**スキルの伸びと方向性を直感的に理解できる構成** ## 成果 - **UI/UX・アニメーション・多言語・テーマ切替を統合したポートフォリオサイトを自力構築**し、Reactの設計・表現力を向上 - プロジェクト情報を体系的に整理し、**デザイン面だけでなく情報設計スキルを強化** - 状態管理・アニメーション制御・テーマ切替など、**実務的なフロントエンドスキルを総合的に習得** - 結果として、**「技術とデザインの両軸で魅せるポートフォリオ」** として完成度を高めた