スクロールTOP
ぶーてんトップ画像

ぶーてん

Reactの基礎習得と、転職活動に向けたスキルアピールを目的として制作しました。コンポーネント設計、props、Hooksの理解を深めるとともに、実務での使用頻度が高いとされるMUIの導入にも挑戦しています。

サイトを見る

設計ポイント

  • コンポーネント設計

    ヘッダー、地域選択、天気情報表示の各機能をそれぞれ独立したコンポーネントとして分割し、複数ページで使い回せるように設計しました。各コンポーネントに明確な役割を持たせることで、保守性と再利用性の向上を図っています。

  • 外部APIの活用

    非同期処理やエラーハンドリング（try/catch）など、実務で求められるJavaScriptの基礎を網羅することを意識しました。

  • ユーザビリティの向上

    都道府県入力はドロップダウン形式にし、選択肢とAPI用コードをJSONで管理することで、保守性と操作性の両立を図りました。

  • MUIによるUI構築

    ドロップダウンや送信ボタンはMUIコンポーネントで実装し、ReactとMUIの連携を実践しました。

  • ルーティング設計

    APIレスポンスは別ページに分離し、React Routerによる画面遷移を導入することで、構造的な設計を意識しました。

  • GitHub Pagesで公開

    ビルド・デプロイの流れを理解し、静的ホスティングによる公開までを一貫して経験しました。

デザインコンセプト

元々「ブタがてくてくしながら天気予報するアプリを作りたい！」が制作のきっかけだったため、トップページには歩くブタのイラストを大きく配置しました。アニメーションは軽量化を意識し、GIF形式からWEBP形式へ変換して書き出しています。画質の粗さが残った点は、今後の改善ポイントとして認識しています。UI設計では、ユーザーの操作を直感的に促す工夫として、ドロップダウンメニュー上に「セレクト！」、検索ボタン上に「クリック！」というラベルを配置し、視線誘導と操作のわかりやすさを意識しました。天気ページでは、現在の天気と気温に加え、天候に応じてランダムで「ぶーさんコメント」が表示されるユーモア要素を追加しています。機能性だけでなく、ユーザーにクスッと笑ってもらえるような体験を目指しました。

使用言語/ツール

JavaScript / React / SCSS / Figma / ibisPaint X / GitHub / VSCode

制作期間

  • 制作時期

    2025年5月（1ヶ月）

  • 設計

    2日

  • デザイン

    1週間

  • コーディング

    3週間（React2週間、CSS1週間）

一覧へもどる

contact

ご覧いただきありがとうございます！
ご連絡は以下よりお願いいたします。