inflearn logo
知識共有
inflearn logo

実践Reactポートフォリオ完成 – 公共API + 地図サービス作り(デプロイまで)

こんな悩み、抱いたことはありませんか? Reactは学んだけど、いざ何を作ればいいかわからない ポートフォリオを作りたいけど、Todoアプリ以外思いつかない 地図APIや公共APIは難しそうで、挑戦すらできなかった デプロイまでしたことがなく、いつも「ローカルプロジェクト」で終わってしまう コードがどんどん複雑になり、設計をどうすべきかわからない 🎯 この講義が解決する問題 この講義は、単に地図を表示する方法を教える講義ではありません。 ✔ 公共APIを実際のサービスに連携させる方法 ✔ 地図SDKをReactの構造内で安定的に設計する方法 ✔ マーカーの最適化と情報ウィンドウの再利用構造 ✔ Contextを活用した状態管理の設計 ✔ Tailwind + SCSSの実戦活用 ✔ GitHubの整理およびVercelでのデプロイまで 「機能の実装」ではなく、実際のサービス構造として設計する方法をお教えします。 💡 単なる「写経」の講義ではありません なぜuseRefを使うのか なぜマーカーを毎回新しく作ってはいけないのか なぜ状態を分離しなければならないのか なぜデプロイ環境では環境変数を別に管理しなければならないのか すべての選択には理由があります。 この講義はその「理由」を説明します。 🚀 受講後、あなたはこのようになります 地図ベースのポートフォリオプロジェクトを1つ完成 公共APIの連携経験を確保 外部SDKをReactに組み込む構造の理解 実務型のプロジェクト構造の設計経験 デプロイ経験の保有 そして、面接でこのように話すことができます。 「公共APIベースの地図サービスを自ら設計し、デプロイまで行いました。」 この一言が大きな差を生みます。 👩‍💻 このような方におすすめです Reactの基本文法は知っているが、プロジェクト経験が不足している方 就職用のポートフォリオを作りたい方 地図/公共APIプロジェクトをやってみたかった方 実務に近い設計を学びたい方 🔥 この講義の目標 この講義は「地図の作り方」ではなく、「サービスを設計する思考プロセス」を学ぶ講義です。

26名 が受講中です。

難易度 初級

受講期間 無制限

React
React
REST API
REST API
Web API
Web API
GitHub
GitHub
vercel
vercel
React
React
REST API
REST API
Web API
Web API
GitHub
GitHub
vercel
vercel

受講後に得られること

  • 実践ポートフォリオプロジェクト1件完成

  • 外部API & 地図SDKをReactに安定的に連携させる設計能力

  • 実務型プロジェクト構造の設計経験

  • GitHubの整理およびVercelでのデプロイ経験

  • サービス視点で考える開発マインドセット

実務のように設計するReactプロジェクト、地図サービスで完成させてください。

Reactの文法は習得したけれど、いざ「サービスのように見えるプロジェクト」を作ってみたことはありませんか?

この講座は単なる機能実装ではなく、公共APIと地図APIを活用して、実際のサービスレベルのプロジェクトを完成させる過程です。

マーカーの重複生成問題、状態管理の衝突、SDK連携の課題、デプロイ環境での環境変数設定まで —
実際に経験した試行錯誤をもとに、安定した設計構造を伝授します。

単に真似して作るのではなく、なぜこのように設計すべきなのかを理解することで、
「コードがわかる人」から「プロジェクトを完成させられる人」へと成長できます。

  • 公共API + 地図APIの実践連動経験

  • Contextベースの状態管理設計

  • 性能最適化(useMemo, useRefの活用)

  • GitHubの整理およびVercelデプロイまで完成

  • 面接で説明可能なポートフォリオの確保

講義を終えると、このような成果物を作ることができます

公共API検索機能

地域の公共APIを検索できます。

お気に入り機能

お気に入り機能を通じて、公共APIを保存することができます。

地図のレンダリングとマーカー表示

検索した地図の位置に移動し、マーカーで表示することができます。

  • 外部APIと地図SDKをReact構造の中で安定的に設計する方法を理解できるようになります。

  • 単なる機能実装ではなく、状態管理(Context)とコンポーネントの分離を通じて、保守可能な構造を設計できるようになります。

  • useRef、useMemoなどを活用して、不必要な再レンダリングやパフォーマンスの問題を制御できるようになります。

  • 公共APIデータを実際のサービス形式に加工し、画面に自然に繋げることができるようになります。

  • GitHubの整理からVercelでのデプロイまで、プロジェクトを「完成」させる経験を得ることができます。

学習内容

  • 講義で何を学ぶことになるのか教えてください。セクションごとにどのような内容を学ぶのか説明していただけると助かります。

  • セクションごとに学ぶ内容についての例示イメージがあれば、より魅力的な講義紹介を作成することができます。


セクション (1) プロジェクト紹介 基本設定を行う

  • プロジェクトの概要

  • node / git をインストールする

  • github repository 作成する

  • ローカルでインストールを進める

  • react dev tools 設置する

  • Githubのワークフロー

セクション (2) 公共APIデータ処理フローの理解

  • tailwindの基本概念およびセッティング


  • browser router セッティングする

  • 基本骨格作り

  • git新規ブランチの作業物をアップロードする

セクション (3) データ処理および画面出力

  • 公共データの理解とWiFiデータの活用

  • データをリストとして表示する

  • カカオデベロッパーズの設定

  • カスタムフックを作成して地図をロードする

セクション (4) リスト ↔ 地図連動機能の実装

  • 選択された場所の維持 & 地図データの処理

  • 地図選択の同期

  • 地図画面の連動を理解する

セクション (5) お気に入り機能 & 状態管理

  • お気に入り管理カスタムフック

  • グローバルなお気に入り状態管理

  • ルーティングおよびグローバル状態の接続

  • お気に入り機能を適用する

セクション (6) アプリをデプロイする

  • Vercel rewrites 設定

  • GitHub Pull Request

  • Vercelサイトへの登録および連携

  • カカオデベロッパーズ ドメイン追加

受講前のご注意事項

  • この講義は、Reactの基本文法を理解していることを前提に進められます。

  • HTML、CSS、JavaScriptの基礎、およびuseState / useEffectの使用経験が必要です。

  • カカオマップAPIと公共APIを活用するため、開発者センターへの加入および認証キーの発行プロセスを直接進めていただくことになります。

実習環境

  • Windows 10 以上

  • macOS (最新バージョン推奨)

  • Linux環境でも可能

学習資料

  • Notion学習資料

  • github ソースコード


事前知識および注意事項

  • Reactの基本文法(コンポーネント、props、state)

  • useState、useEffectの使用経験

  • 基本的なJavaScript (ES6) 文法の理解

  • 簡単なCSSの理解

この講義はReactの完全入門講座ではなく、基礎を理解している方のための実践プロジェクト講義です。


こんな方に
おすすめです

学習対象は
誰でしょう?

  • Reactの文法は学んだものの、しっかりとしたポートフォリオプロジェクトがない方

  • 公共APIや地図APIを活用したプロジェクトをやってみたかった方

  • 就職活動中で、差別化されたポートフォリオが必要な方

  • 実務に近いプロジェクト設計の経験を積みたい方

前提知識、
必要でしょうか?

  • この講義は、Reactの基礎文法を理解していることを前提に進められます。

  • 基本的なJavaScript文法 (ES6)

  • 簡単なCSSの理解

こんにちは
lizbです。

358

受講生

15

受講レビュー

92

回答

4.9

講座評価

3

講座

フロントエンドからバックエンドまで実務中心の授業を行っており、長年の講義経験をもとに、実務中心のウェブ開発を教える講師です。

カリキュラム

全体

42件 ∙ (2時間 33分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

まだ十分な評価を受けていない講座です。
みんなの役に立つ受講レビューを書いてください!

似ている講座

同じ分野の他の講座を見てみましょう!

期間限定セール、あと3日日で終了

¥11,550

70%

¥4,863