sahoooii

## デプロイサイト: [Athleisure Styles](https://mern-athleisure-styles.vercel.app) ## GitHub: [MERN_AthleisureStyles](https://github.com/sahoooii/MERN_AthleisureStyles) ## 概要 フロントエンド（React + Redux）からバックエンド（Node.js + Express + MongoDB）まで一貫して構築した、**スポーツ系ファッション EC サイトをテーマにAthleisure Styles**と名前をつけ作成。 ロゴ・UI設計・実装・デプロイすべてを一人で担当。 本プロジェクトを通じて、**MERNスタックによる0→1のフルスタック開発スキルを体系的に確立**した。 ## 使用技術 **Frontend:** React 18 / Redux Toolkit / Material UI **Backend:** Node.js 20 / Express **Database:** MongoDB / Mongoose **Infra & Tools:** Cloudinary / JWT / PayPal API / Render / Vercel ## 動機 React と Node.js を学んだ後、 **「バックエンドと連携した実運用レベルのアプリを自分で構築できるようになりたい」** と考え、フロントからサーバー・データベースまでを自作するフルスタック開発に挑戦。 UIの見た目だけでなく、**非同期通信やデータ整合性、セキュリティなど実運用で必要となる要素を全て学習すること**を目的とした。 ## 取り組み 実際のECサイトに近い体験を再現するため、以下を自力で設計・実装 - 購入フロー（カート、決済、注文履歴） - お気に入り登録機能 - レビュー投稿機能 - 管理者用ダッシュボード（商品・ユーザー・注文・発送管理） Material UIを用いて**デザインの統一性と操作性の高いUI**を設計。 さらに、**モバイル端末での操作性と導線設計を重視**し、スマホ片手でも完結できるUXを実現。 特に苦労したのが、**ユーザー登録時のアイコン画像アップロード機能**であり、 Cloudinaryの非同期処理とフォームバリデーションの整合性に問題があったが、 非同期制御を再設計して送信タイミングを最適化し、UXとデータ整合性を両立させた。 バックエンドではMongooseを使用し、**スキーマ設計・バリデーション・データ整合性の確保**を実装。これにより、信頼性と保守性の高いデータ構造を実現した。 ## 実務上のトラブル対応 **Render 上でデプロイ中、MongoDB Atlas への接続が不定期に失敗する問題が発生** - **問題:** 本番環境でデータ取得ができず、サイト運営やUXに影響 - **対応:** 調査後、アプリ専用ユーザーを作成しパスワードを複雑化、ホワイトリストを柔軟化。複数デプロイ環境でも安定接続できる構成に改善 - **成果:** クラウド環境での接続管理能力と運用トラブル対応力を習得し、実務レベルでの問題解決経験を獲得。安全性と安定性を両立した運用設計を実践 ## 工夫した点 - **Render × Vercel構成によるパフォーマンス改善** - **問題:** Render特有のコールドスタートにより、初回アクセス時に数分間「読み込み画面のみ」になる問題が発生していた - **対応:** フロント（Vercel）とバックエンド（Render）を分離し、API取得を待たずに**UIの静的要素（画像・テキスト）は即時表示**できる構成に変更 → これにより、**ユーザーが「何も表示されない時間」が実質ゼロになり、離脱リスクを大きく低減**できた。 - **Cloudinaryアップロードの非同期制御再設計** - クライアント側エラー時（例：メール重複など）でも画像が送信される問題を修正し、**不要通信の削減と処理の安定化を実現** - **モバイルファーストな UI 設計** - よく使う操作を下部固定ナビに集約し、**直感的でストレスのないUXを追求**。 また、コンポーネントの汎用化を進め、**保守性と再利用性**を強化 - **Redux Toolkit 導入による状態管理の最適化** - カート・ウィッシュリスト・認証情報を一元管理し、**データフローの可視化とスケーラブルな設計力**を磨いた ## 成果 - **UI/UX・パフォーマンス・セキュリティ・保守性を総合的に考慮した設計を実践** - **Cloudinary制御の改善でUXを向上**し、安定した画像アップロードを実現 - **Reduxによる明確な状態管理構造**を確立し、拡張性・チーム開発対応力を強化 - フロント〜バックを通して自ら課題を発見し改善サイクルを回す力を体得 →** MERNスタックでのフルスタック開発実務力**を獲得

## デプロイサイト: [Aloha Estate](https://next-aloha-estate.vercel.app) ## GitHub: [next-alohaEstate](https://github.com/sahoooii/next-alohaEstate) ## 概要 Next.js（App Router）と TypeScript を使用して開発した、**Airbnb風のバケーションレンタルサイト**。 MERNスタック開発で培った知見をもとに、保守性・パフォーマンス・UIの一貫性を重視した設計を実践。 予約・チャット・物件登録・管理者機能など、実サービスを想定した機能を包括的に実装し、**Next.jsのみで構成されたフルスタックWebアプリケーション**として完成させた。 SSR / CSR の最適切り替えによる**高速レンダリングと快適なUX**を実現し、TypeScript によって**安全で拡張性の高い開発**を行った。 ## 使用技術 **Frontend / Backend:** Next.js 14（App Router） / TypeScript / Tailwind CSS / shadcn/ui **Database:** MongoDB / Mongoose **Auth / Validation / Payment:** Clerk / Zod / Stripe **Infra & Tools:** Cloudinary / Vercel ## 動機 MERN スタックを一通り学んだ後、よりモダンな構成で**開発効率・拡張性・信頼性を両立できるWebアプリケーション**を構築したいと考えた。 基本的な CRUD 機能を搭載しつつ、EC サイトとは違うものを作成したいという思いから、**Airbnb 風のバケーションレンタルサイト**を作成することにした。 また、物件検索だけではなく、ユーザーとオーナー双方向コミュニケーションを扱うツールを作成したいと思い**チャット機能**を搭載。 Next.js × TypeScript による**堅牢なフルスタック構成の理解**と、Zod 導入による**実行時のデータ安全性の確保**を主な学習目的とした。 ## 取り組み - **Next.js × TypeScript による型安全な開発環境の構築** - App Router を活用して、API・UI・データ処理を統一的に管理 - shadcn/ui + Tailwind CSS により、全デバイス対応のレスポンシブデザインを実現 - **チャット機能の再設計（メール型 → LINE風UI）** - メッセージを**「物件 × ユーザー」単位**で管理し、 リアルタイム通信の**自然なやり取りを実現**。UXの快適さを重視したUIへ刷新 - **セキュアなユーザー管理** - Clerk を導入し、OAuth対応のログインを実装し、**セキュアで信頼性の高いユーザー管理**を実現 - **Zod × Mongoose による二重バリデーション構成** - クライアント・サーバー双方でデータ整合性を保証し、**信頼性と保守性の高いデータフロー**を構築 ## 工夫した点 - **Next.js の Suspense × Skeleton UI による初期UX改善** - データ取得中に“ローディングアニメーション”しか出せなかった MERN版とは異なり、Next.js の **Suspense と Skeleton UI** を活用することで、**ページ構造に沿った読み込みデザインを実現** → これにより、ユーザーは **「何が表示されるのか」事前に把握でき、体感待ち時間が大幅に短縮** → 結果として、**SSR/CSR/SSG の使い分けに依存せず、Next.js の強みをUI/UX改善に最大限活用**できた - **チャット機能の全面リファクタリング** - **UI・DB構造を根本から見直し**、リアルタイムな双方向通信設計を実現 - メッセージ送受信のアニメーションやスケルトンUIで**視覚的な一体感**を強化 - **型とスキーマの分離による保守性向上** - 再利用可能な型定義をモジュール化し、**拡張時のリスクを最小化** - **UI/UX の統一と独自性** - shadcn/uiをベースにTailwindでカスタムし、**ブランドの世界観とデザイン性と可読性**を両立 ## 成果 - Next.jsの特性（SSR / CSR / SSG）を理解し、**最適構成で運用できる実装力**を習得 - TypeScript + Zod により、**型安全かつ信頼性の高いフルスタック開発スキル**を獲得 - チャット実装を通じて、**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の設計・表現力を向上 - プロジェクト情報を体系的に整理し、**デザイン面だけでなく情報設計スキルを強化** - 状態管理・アニメーション制御・テーマ切替など、**実務的なフロントエンドスキルを総合的に習得** - 結果として、**「技術とデザインの両軸で魅せるポートフォリオ」** として完成度を高めた