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**と名前をつけた。 ロゴ・デザイン・設計・実装・デプロイをすべて一人で担当。 本プロジェクトを通じて、**MERN スタックを用いた実践的なフルスタック開発スキルの確立**を目指した。 ## 使用技術 MERN スタック（MongoDB, Express, React, Node.js） Redux Toolkit / PayPal / Cloudinary / Material UI / JWT / Render / Vercel ## 動機 React と Node.js を学んだ後、**「バックエンドと連携した実運用レベルのアプリを自分で構築できるようになりたい」**という思いから作成したいものを決め、作成。 フロントのみの開発では表現できないデータフローや非同期通信、セキュリティ処理を自力で実装するため、**MERN スタックによる 0→1 開発**を選択。 ユーザー登録・商品管理・レビュー投稿・決済・画像アップロードなど、**実運用を想定した全機能を自作**し、フロント〜バック間のデータ連携を徹底的に学習した。 ## 取り組み 本物の EC サイトに近い体験を再現するため、主要な CRUD 機能に加え、**購入・お気に入り登録・決済・管理者機能**（商品・ユーザー情報管理、発送管理）までを実装。 フロントエンドは React、バックエンドは Node.js、データベースは MongoDB を採用。 デザインは初めて Material UI を使用し、**統一感と操作性の高い UI**を実現した。 また、実際のユーザー行動を想定し、モバイル時の挙動や導線設計を重視。レビュー投稿やカート操作など、UX 向上を意識した設計を徹底した。 特に、**ユーザー登録時のアイコン画像アップロード機能**の実装には多くの試行錯誤を行った。 クライアント側バリデーションと Cloudinary の非同期アップロードの整合性を取るのに苦労し、フォーム送信とアップロード処理のタイミングを最適化することで、UX とデータ整合性の両立を実現した。 ## 工夫した点 - **Vercel × Render によるフロント・バック分離デプロイ** - Render 特有のコールドスタート問題を解消するため、Vercel ＋ Render の分離構成を採用し、初回アクセス速度を大幅に改善 - パフォーマンス最適化の実践経験を獲得 - **フォームバリデーションと Cloudinary アップロードの整合性改善** - クライアント側エラー時（例：メール重複など）でも Cloudinary へ画像が送信される問題を修正 - **非同期処理の制御構造を再設計**し、不要な通信を防止。UX と処理効率を両立 - **モバイルファースト UI 設計** - 操作頻度の高いメニューを下部固定に配置し、**スマホ片手操作でも完結する設計** - コンポーネントを汎用化し、保守性・再利用性を強化 - **Redux Toolkit 導入による状態管理の明確化** - カート・ウィッシュリスト・認証情報を一元管理 - データフローを可視化し、**チーム開発を想定したアーキテクチャ設計力**を強化 ## 成果 - 初回表示速度・操作応答性ともに改善し、**UX を重視したパフォーマンス設計を体得** - Cloudinary との非同期制御を最適化し、**データ整合性・リソース効率を両立** - Redux 導入により、**スケーラブルな状態管理構造の設計力**を獲得 - UI/UX・パフォーマンス・セキュリティ・保守性を総合的に考慮した、**実践的なフルスタック開発スキルを確立**

## デプロイサイト: [Aloha Estate](https://next-aloha-estate.vercel.app) ## GitHub: [next-alohaEstate](https://github.com/sahoooii/next-alohaEstate) ## 概要 Next.js と TypeScript を使用して開発した、**Airbnb 風のバケーションレンタルサイト**。 MERN スタック開発で培った知識をもとに、**保守性・パフォーマンス・UIの一貫性**を重視したアーキテクチャを設計。 予約管理・チャット・物件登録・管理者機能など、実サービスを想定した機能を包括的に実装。 フロントからバックエンドまで Next.js で統一し、**SSR / CSR の最適な切り替え**により、高速なページレンダリングとスムーズなユーザー体験を実現。 また、**TypeScript による型安全な開発**を通して、拡張性と保守性を両立した Next.js アプリ構築を実践的に学んだ。 ## 使用技術 Next.js（App Router） / TypeScript / Tailwind CSS / shadcn/ui / MongoDB / Mongoose / Zod / Clerk / Cloudinary / Stripe / Vercel ## 動機 MERN スタックでフルスタック開発を経験した後、よりモダンな構成で**保守性・スケーラビリティの高いアプリを構築したい**という思いから Next.js と TypeScript を採用。 基本的な CRUD 機能を搭載しつつ、EC サイトとは違うものを作成したいという思いから、**Airbnb 風のバケーションレンタルサイト**を作成することにした。 また、ただの不動産検索ではなく、ユーザーとオーナー双方向コミュニケーションを扱うツールを作成したいと思い**チャット機能**を搭載。 「Next.js × TypeScript 」によって、**開発効率と信頼性を両立するアーキテクチャの理解**を深めることを目的とした。 また、Zod を導入することで、**実行時のデータ安全性を強化**し、サーバー・クライアント双方で堅牢なバリデーションを実現した。 ## 取り組み Next.js と TypeScript を組み合わせ、**堅牢で可読性の高い開発環境**を構築。 UI は shadcn/ui と Tailwind CSS を活用してデザインを統一し、**全デバイス対応のレスポンシブ設計**を実現。 ユーザー（宿泊者）とオーナー（物件提供者）間のコミュニケーションを強化するため、 **LINE風チャットUIをゼロから実装**。リアルタイム通信による自然な操作感を再現し、簡単にメッセージのやり取りができるようにした。 バックエンドは Mongoose + MongoDB によりスキーマ設計を整理。 さらに Clerk を導入して認証処理を強化し、**セキュアで信頼性の高いユーザー管理**を実現した。 開発全体を通じて、**Next.js によるフルスタック構成の理解と運用経験**を積み上げた。 ## 工夫した点 - **Next.js の SSR / CSR / SSG を適切に使い分け** - ページごとの最適化を行い、初期表示速度を改善 - **LINE 風チャットへのリファクタリング** - 以前はメール形式で作成しており、返信機能はあるもののチャットのように気軽に使えるものではなかった。そのため、**UI・DB 構造を全面的に見直し、物件 × ユーザー単位で管理**し、UI もチャット風に大きく変更 - **メッセージ送受信をわかりやすく視覚化**し、ユーザー体験を直感的かつリアルタイムに最適化 - **型安全性とバリデーションの強化** - **TypeScript によりコンパイル時の型安全性を確保し、Zod で実行時のデータ整合性**を担保 - **Mongoose モデルと Zod スキーマを組み合わせ、二重バリデーションで堅牢なデータ処理**を実現 - 再利用可能な型とスキーマを分離し、保守性と可読性を両立 - **統一感のあるデザイン設計** - shadcn/ui コンポーネントをベースに Tailwind CSS でカスタマイズをし、**デザインに独自性**を出した - UI コンポーネントを共通化し、**可読性と再利用性**を両立 - データ読み込み時に **Skelton でアニメーション**を出し、各ページにあったデザインを作成 - **パフォーマンスの最適化** - Next.js 単独構成により、MERN Stack に比べて**軽量かつデプロイが高速化** - Vercel 上でビルドとデプロイを最適化し、ユーザー体験を向上 ## 成果 - Next.js の SSR / CSR / SSG の特性を理解し、**最適化されたフルスタック構成を実装**できるようになった - チャット機能を通じて、*状態管理・UI設計の実践的スキル**を獲得 - TypeScript導入により、**型安全性・拡張性・保守性の高いコードベース**を実現 - Vercel デプロイにより、**レスポンス性能とUXを両立する運用スキル**を習得 - **デザインから機能まで自走で完結できる“フルサイクル開発力”**を確立

## デプロイサイト: [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 時間ごとの予報を表示するお天気アプリ**。 OpenWeather API を活用し、**スムーズで直感的な UX **を実現。 ## 使用技術 React / Tailwind CSS / Node.js / Express / Framer Motion / OpenWeather API / Render ## 動機 React を学ぶ中で、**API を扱ったシングルページアプリケーションの構築**に慣れたいと思い、天気予報アプリを作成。 単なるデータの表示ではなく、**ユーザーの体験を考慮した UX 設計**（温度に応じた背景色、摂氏/華氏切替、モバイル対応など）を行うことで、実践的なフロントエンドスキルを伸ばすことを目指した。 ユーザーは都市名を検索してその土地の詳細な気象データを取得でき、**摂氏／華氏**の切り替えにも対応。 現在地ボタンを押すと端末の位置情報から天気を自動取得し、**サンライズ／サンセットの時間、最高・最低気温、体感温度、湿度、風速**などをアイコン付きで分かりやすく表示。 また、単位切り替え時には温度だけでなく、**風速も m/s ↔ mph に自動変換**するなど、細部のUXにもこだわった。 背景色やローディングアニメーションなど視覚的な演出を通して、**天気の変化を感じられるインタラクティブなデザイン**を目指した。 ## 取り組み 初期段階ではフロントエンドのみでアプリを構築し、OpenWeather API を利用して都市の現在の天気や 3 時間ごとの予報を表示。 しかし、フロントエンドだけでは API キーの管理やセキュリティ面で課題があると感じ、**Node.js + Express による簡易バックエンドを導入**。これにより、API リクエストを安全に中継する構成へと改修した。 React の状態管理を活用して、検索した都市情報を効率的にレンダリングし、クイックアクセスを実現。 また、**背景色の変化や摂氏/華氏の切替、ローディングアニメーション、モバイル対応デザイン**など、視覚的にも直感的に操作できる UX を設計した。 ## 工夫した点 - **バックエンド導入によるセキュリティ向上** - API キーをフロントに露出させず、ユーザーが安全にリクエストできる構成を実現 - **UX 最適化** - **温度や天気に応じて背景色を動的に変化**させることで、ユーザーが直感的に天候の変化を感じ取れるデザインを実現 - **摂氏／華氏や風速単位の切替にリアルタイム対応**し、数値だけでなく全体の表示要素を自動更新することで一貫した体験を提供 - **検索結果の即時反映と、現在地ボタンによるワンタップ取得**により、操作ステップを最小化 - データ取得時の**ローディングアニメーションや遷移エフェクト**で、待機時間を感じさせない滑らかな操作感を追求 - 各データをアイコン付きで配置し、**情報密度が高くても視覚的に理解しやすいUI**を設計 - **データ処理の効率化** - ネストしたAPIレスポンスを必要な形に再構成し、フロントでの描画に最適化 - **パフォーマンスの向上** - Render でのコールドスタートを意識して、初回読み込みとアニメーション表示の整合性を調整 ## 成果 - **React の状態管理・非同期処理・API 通信の理解を実践的に習得**し、API 連携型アプリの開発スキルを獲得 - Node.js + Express によるバックエンド導入を通じて、**セキュリティ・保守性を考慮した設計思考を習得** - Tailwind CSS と UI 設計の組み合わせにより、**視覚的に分かりやすく一貫性のあるデザイン構築力を強化** - 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 によるビルド環境を構築し、アセット管理・最適化・デプロイまでを一貫して行った。 ## 使用技術 HTML / CSS / JavaScript / Webpack / Babel ## 動機 React を習得した後、**より低レイヤーの仕組みを理解し、JavaScript の基礎を強化したい**という思いから、あえてフレームワークを使わずに開発を実施。 DOM 操作やイベント処理を自分で組み立てながら、React がなぜ便利なのかを改めて体感することを目的とした。 また、単なる学習用ではなく、**世界観・デザイン・音楽を含めた「ゲームとしての完成度」**を追求することで、UI 設計やユーザー体験の演出力を磨いた。 ## 取り組み カードの反転アニメーションや効果音、タイマー・ライフカウント機能を搭載し、直感的な操作と没入感のある UI を実現。 PC・スマホ・タブレットすべてで快適に動作するようにレスポンシブ設計を行い、**本物のゲームのような体験**を意識して開発を進めた。 実装面では、冗長になりがちな DOM 操作を整理するため、JavaScript クラスで構造をモジュール化。 setTimeout 処理を async/await に書き換えるなど、非同期処理の可読性と一貫性を重視してリファクタリングを行った。 デプロイ面では、React 以外のプロジェクトを自力で公開する方法を学ぶため、**Webpack と Babel を導入**し、ビルドからデプロイまでの一連のフローを自分で構築。これにより、**開発環境構築に対する理解**を大きく深めた。 ## 工夫した点 - **低レイヤーからの環境構築** - React やフレームワークに頼らず、**Webpack + Babel を自分で学習し、開発・ビルド・デプロイ環境をゼロから構築** - クラス設計で DOM 操作やゲームロジックを整理し、**可読性・保守性を向上** - 環境構築とコード設計の両方を自力で行うことで、**フロントエンドの深い理解を習得** ## 成果 - **フロントエンド低レイヤーの理解向上** - JavaScript の基礎文法から非同期処理までを体系的に理解 - フレームワークなしで SPA を構築した経験により、**React の内部動作や 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 によるスムーズなページ遷移や、タイプライター風の自己紹介表示、アニメーション演出により、直感的で魅力的な UX を提供。 過去のフルスタック・フロントエンドプロジェクトやバックエンド作品も掲載し、GitHub 連携により自分の技術力や成長を総合的に示すサイト。 ## 使用技術 React / Tailwind CSS / Framer Motion / React Hook Form ## 動機 React と Tailwind CSS、Framer Motion の学習を進める中で、**自分のスキルと成長を総合的に可視化できるサイトを作りたい**と思いポートフォリオサイトを作成。 ただの紹介ページではなく、**UI/UX にこだわり、デザインやアニメーションを通じて自分の強みを直感的に伝えること**を目的とした。 また、**日本語・英語バイリンガル対応**や**ライト/ダークモード、レスポンシブ設計**を盛り込み、幅広いユーザー体験に対応できるサイトにしたいと考えた。 ## 取り組み React と Tailwind CSS をベースに、Framer Motion でスムーズなアニメーションを実装。 セクションごとに分け、React Smooth Scroll を使ってクリックするとスムーズに移動するナビゲーションを作成。 ポートフォリオセクションでは、これまで作成したフルスタックアプリからフロントエンド特化アプリまで、すべてのプロジェクトを紹介。 単に掲載するだけでなく、各プロジェクトの**特徴や技術選定、工夫した点をわかりやすく表示**。バックエンド作品や未デプロイのプロジェクトも GitHub へのリンクを設置して確認可能にした。 UI/UX に重点を置き、自己紹介はタイプライター風表示、アニメーションによる視覚効果でユーザーを自然に誘導。 ライト/ダークモードや日英切替も実装し、多様な環境でも快適に閲覧できる構成にした。 ## 工夫した点 - **Framer Motion での多彩なアニメーション** - セクション移動やコンテンツ表示時にアニメーションを付与し、視覚的に直感的な導線を作成 - スクロールやクリック時の挙動も自然で滑らかに設計 - **レスポンシブ & バイリンガル対応** - モバイル・タブレット・PC 各環境で快適な表示を保証 - 日本語・英語切替機能を搭載し、グローバルな閲覧にも対応 - **ライト/ダークモード切替** - UIデザインを両モードに最適化し、テーマに応じた配色やアニメーションを適用 - **ポートフォリオを「ロードマップ」として設計** - プロジェクト完成と共にポートフォリオも完成していく形を意識 - 自分の成長やスキルの積み上げをユーザーに伝えられる構造に仕上げる ## 成果 - **UI/UX・アニメーション・レスポンシブ・多言語対応を統合したポートフォリオサイトを構築**し、Reactの実装力とデザイン統合力を大幅に向上 - 過去プロジェクトを整理・掲載することで、**自分のスキルや成長を視覚的に表現できる構成力と情報設計スキルを獲得** - React Smooth Scroll や Framer Motion を活用し、**インタラクション設計やアニメーション制御の知見を深める** - ライト／ダークモード・日英切替などの状態管理を通じて、**React のコンポーネント設計と再利用性への理解を強化** - バックエンドプロジェクトや未デプロイ作品も含めた GitHub 連携を実装し、**ポートフォリオを通して技術の幅と実践力を示せるようになる**