グルメマップアプリ開発(React Native & NestJS)

React Nativeを使って、自分だけのグルメ記録アプリを開発・リリースするまでの過程を学びます。デザインからフロントエンドおよびバックエンド開発、デプロイまで、全工程を用意しました。

難易度 中級以上

受講期間 無制限

React Native
React Native
TypeScript
TypeScript
NestJS
NestJS
react-query
react-query
zustand
zustand
React Native
React Native
TypeScript
TypeScript
NestJS
NestJS
react-query
react-query
zustand
zustand

学習した受講者のレビュー

4.9

5.0

Ryan Kim

82% 受講後に作成

いろいろな講師が作ったRN講義を3つほど頑強していましたが、京講師の講義が一番素晴らしいと感じました。 (私はバックエンド開発者なので、このコースのNestJSサーバーサイド部分は受講していません。) 1. さまざまな要件を体験できるプロジェクト構成 最初から最後までプロジェクトに従い、さまざまで現実的な要件、コンポーネント、ライブラリを試すことができ、この講義だけを受講しても、私が望むアプリを作るのに十分な情報を得ることができる講義です。トイプロジェクトとは感じられず、実際にサービスしてもらえるほどのレベルの複雑で多様な機能を持つアプリを開発してみることができる講義です。 (全体的な講義クオリティが聞いたRN講義中に相対的、絶対的にすべて高い) 2. 講師様の説明する能力に優れる 何かについてよく知っていてよくすることと、誰かにそれを教える能力は別個の能力だと思います。講義を受講しながら感じたことは、京講師はRNに対する熟練度が高いだけでなく、それを他人に理解しやすくよく説明する能力も持っていると感じました。おかげで簡単に講義を頑張ることができました。 3. 快適な受講環境(4K) 通常、他の講義は1Kでアップロードされますが、この講義は4K映像で撮影していただき、講義を受講する間、本当に目を浄化する気分を感じながら受講できました。講義内容だけでなく、こんな講義受講環境まで考慮していただく点だけ見ても、全体的な講義クオリティが良いしかないという気がします。 特に良かったこと - 講義映像品質(4K) - ボーナスレクチャーの内容(ライブラリ直接修正、画像最適化など) - 講義で一緒に開発していくアプリのレベル(プロダクトレベルの複雑で現実的な要件が反映されたアプリ) 退勤後は立ち寄ってから長くかかりましたが、本当に面白くてお得な講義でした。ありがとうございます! もっと難しい話題でRN講義また作りたいなら無条件受講する意思があります!

5.0

HyeJung

100% 受講後に作成

講義を聞きながら質問をたくさんしましたが、一つ一つ答えてくれてありがとうございました! React Nativeの講義に来て、もっと多くを手に入れたようで、とても良いですねㅎ タイプスクリプトについての知識が不足していましたが、講義を聞きながら不足した知識も少しずつもっと満たされる気分でした!タイプスクリプトの勉強もしたからこの講義もう一度ちゃんと聞いてみたいと思いますよろしくお願いします!

5.0

호갱

39% 受講後に作成

すべての講義を聞いて賞賛を加えたかったのですが 我慢できずに受講評を残すようになりました。 私はnext.jsで本当に簡単ですか?サイトを作ったことがあります。 (基本的なreact文法だけを知っている状態です。) バックアンド開発者として(spring、c#)働いていて、フロントにも興味があります。 react講義も聞いてみましたが、 本当にこんなにレベルの高い講義は初めて聞いているようです。 すぐに実務に適用してもらえるほどのソースクオリティを見ているようです。 (これが一番大きな利点のようです。) 一部の講義は本当に戻るだけで次のレベルに進む講義も多いです。 学ぶにはあまりにも多くの講義でした。 本当にファンになりました。 だから現在の講義を聞いて他の講義も聞きたいのですが まだ講義は現在講義しかありません。 今後の講義計画と もしnext講義を作る意思があるかも聞きたいです。

受講後に得られること

  • React Native

  • React Query

  • 状態

  • TypeScript

  • Nest.js

  • TypeORM

[中級] React Native & NestJSでグルメマップアプリを作る

講義リニューアルのお知らせ

2025年8月24日にリニューアルが完了した講義です。

講義紹介

新の技術を使用して自分だけのグルメマップサービスを作ってみましょう!フロントエンドおよびバックエンド開発、デザイン、デプロイまで全工程を用意しました。Figmaで構築されたデザインシステムを基にアプリを開発します。

React Nativeでアプリを開発し、App Store/Play Storeの両方でリリースするまで、さまざまなノウハウをお伝えします。技術スタックにはReact Native, TypeScript, NestJS, react-query, zustandを使用します。

フロントエンド/バックエンドの両方を開発し、最初から最後まで1つのサービスを完成させます。
講義時間はフロントエンド12時間+バックエンド3時間で構成されており、すべての授業のソースコードを提供します。

この講義はReact Native CLIを使用する中級者向けの講義です。この点にご留意のうえ、お申し込みください。Expoを使用した開発については、以下の講義をご参照ください!

扱う内容

  • React Navigation


  • TypeScript

  • Tanstack Query (React Query)

  • Zustand

  • サーバー状態 & グローバル状態管理

  • JWTベースの認証

  • Kakaoログイン/Appleログイン


  • 共通コンポーネント開発

  • コンポジットコンポーネントパターン

  • カスタムフックパターン

  • Suspense、ErrorBoundary

  • アプリのデプロイ

  • GoogleマップAPI、KakaoマップAPI連携

  • マーカー表示およびクラスタリング

  • 無限スクロール


  • カレンダー実装


  • ダークモード

  • 画像アップロード

  • アプリの権限を扱う

  • 日付関数の扱い

  • ライブラリを修正する

  • WebView


  • NestJS & TypeORM

  • PostgreSQL

📚 講義の技術スタック

フロントエンドはReact Native(CLI)、TypeScriptをベースに、TanStack Query(React Query)を積極的に活用し、グローバル状態管理ツールにはZustandを使用します。バックエンドはNestJS、TypeORM、PostgresQLのスタックを使用して開発します。このほかにも、Google API、Kakao APIなどさまざまなAPIを連携しながら開発します。

⭐ 主要実装機能

会員登録/ログイン/ソーシャルログイン

地図/位置情報連携

無限スクロール/お気に入り

場所の検索・登録

カレンダー機能

設定およびダークモード

⚠ 詳細な実装内容はカリキュラムをご確認ください!

💫 この講義の特徴

1. Android、iOS同時開発

2つのプラットフォームを同時に開発しながら、複数のプラットフォームや画面で再利用可能な共通コンポーネントを開発します。プラットフォーム間の違いと、その対応方法についてもご紹介します。

2. コンポーネント設計 & カスタムフック

単なる実装やライブラリの使用ではなく、コンポジットコンポーネントパターンやカスタムフックパターンなど、再利用性と柔軟性を考慮して開発する方法を学びます。

3. Figmaデザインに基づく開発

Figmaで構築されたデザインシステムとすべての画面のデザインを提供するため、どのコンポーネントや画面を実装するのかを簡単に確認できます。

4. ライブラリの使用を最小限に

ライブラリの使用を最小限に抑え、ほとんどの機能を自分で実装しながら、実装力と問題解決能力を高めます。約20個のカスタムフックと約40個のコンポーネント、各種ユーティリティ関数を自分で実装します。

5. ソースコードの提供

完成済みのバックエンドのソースコードだけでなく、プロジェクトの開始から終了までのすべての授業で使用するソースコードを提供します。そのほかにも、ブログや記事など、サービスを開発し理解するために必要な資料も提供します。

必要な前提知識

ReactNative CLIを使用する中級以上(専門性を高める)レベルの講義です。入門者・初級者には向いていない場合があります。この点にご留意のうえ、お申し込みください。(Expoを利用した開発については、服薬時間アプリを作る講義またはアバターコミュニティアプリを作る講義をご参照ください。)

  • JavaScript/CSSの知識が必要です。map、filterなどのES6構文は説明しません。

  • Reactの知識が必要です。stateやprops、基本的なHooks(useState、useEffect)などについては説明しません。


注意事項

  • 講義はReactNative CLIで進めます。Expoは使用しません。

  • 講義の開発環境はMac OSです。(WindowsユーザーはAndroid開発のみ可能です。iOSアプリ開発にはMac環境が必要です。)

  • この講義は3840 × 2160(4K)解像度で制作されているため、高い解像度を選択すると、より高画質で受講できます。


*2025年8月24日にリニューアルが完了した講義です。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • 自分だけのアプリをリリースしたい方

  • JavaScript/Reactの基礎を学習したことがある方

  • 実際に運用される特別なポートフォリオを持ちたい方

  • 一つのアプリを完成度高く作り上げたい方

  • JavaScriptでフロントエンド/バックエンドの両方を開発したい方

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

  • Reactの知識が必要です。

  • JavaScript/CSSの知識が必要です。

  • Node.js、Expressの経験があると望ましいです。(バックエンド開発時)

こんにちは
Kyoです。

キャリア認証

2,525

受講生

212

受講レビュー

356

回答

4.9

講座評価

5

講座

コミュニティサービスのフロントエンドエンジニアから始まり、現在はコマースプラットフォームのフルスタックエンジニアとして働いています。

Inflearnでは、完成度の高いプロダクトを作るための講義を行っています。

 

  • inkyo.dev@gmail.com

もっと見る

カリキュラム

全体

118件 ∙ (14時間 59分)

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

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

受講レビュー

全体

103件

4.9

103件の受講レビュー

  • kms920106님의 프로필 이미지
    kms920106

    受講レビュー 24

    平均評価 4.6

    5

    99% 受講後に作成

    もし、一番親しい友達に紹介するなら、本当に良い人として紹介したいし、一番親しい友達に RN は絶対にこの講義を紹介したいです 長所 1) 質問すると AI よりも早く答えてくれます 2) 講義の各章が GitHub にアップロードされているので、参照するのがとても簡単です 3) 声が優しくて... (少しソン・シギョンに似ているかな... ㄷㄷ) 4) リファクタリング プロセスも含まれています

    • koy
      知識共有者

      コミュニティに質問/共有記事をたくさん書いてくれましたが、こうして受講評まで作成していただきありがとうございます🙂 紹介させていただきたい講義だといいですね👍👍 これからも詰まっている部分があれば、いつでも教えてください!

  • lody님의 프로필 이미지
    lody

    受講レビュー 1

    平均評価 5.0

    修正済み

    5

    12% 受講後に作成

    私は元々ネイティブでアプリ開発をしてきましたが、今回RNを深く学びたいと思い受講しました。 実は最初、「クライアントとサーバーまで全部扱うなんて、時間だけ長くて大したことなかったらどうしよう?」という心配もあったんです。 でも、思ったよりはるかに体系的に構成されていて、毎回講義を受けるたびに本当に役に立つ知識を得ています。 一番良かった点は、サービス全体の流れを一度に把握できることです。Figmaでデザインを作成するところから、React Nativeで画面を構成し、NestJSバックエンドまで連動する過程を順を追って見せてくれるので、毎瞬間「こうやって繋がるんだ」という気づきがありました。 AWSにデプロイする部分まで扱っている点も良かったです。 React Nativeは不慣れでしたが、例レベルではなく、実際にすぐに使えるような機能を多様に扱っているので、興味深くついていけています。 時々RNだけで遭遇する特殊な部分を詳しく解説してくれるので、ネイティブ開発をしていた私も特に苦労することなく乗り越えることができました。 本当に満足して受講しているので、もうすでに「アバターコミュニティアプリ作り」のような他の講義も気になっています。 モバイルアプリをきちんと作ってみたい方に強くおすすめします! 私は特に質問がなくても講義の内容に十分ついていくことができました。 今後もこのように密度の高い講義をたくさん作ってくだされば嬉しいです。 ありがとうございました!

    • koy
      知識共有者

      良い受講後記をありがとうございます!

  • sysryan09027861님의 프로필 이미지
    sysryan09027861

    受講レビュー 1

    平均評価 5.0

    5

    82% 受講後に作成

    いろいろな講師が作ったRN講義を3つほど頑強していましたが、京講師の講義が一番素晴らしいと感じました。 (私はバックエンド開発者なので、このコースのNestJSサーバーサイド部分は受講していません。) 1. さまざまな要件を体験できるプロジェクト構成 最初から最後までプロジェクトに従い、さまざまで現実的な要件、コンポーネント、ライブラリを試すことができ、この講義だけを受講しても、私が望むアプリを作るのに十分な情報を得ることができる講義です。トイプロジェクトとは感じられず、実際にサービスしてもらえるほどのレベルの複雑で多様な機能を持つアプリを開発してみることができる講義です。 (全体的な講義クオリティが聞いたRN講義中に相対的、絶対的にすべて高い) 2. 講師様の説明する能力に優れる 何かについてよく知っていてよくすることと、誰かにそれを教える能力は別個の能力だと思います。講義を受講しながら感じたことは、京講師はRNに対する熟練度が高いだけでなく、それを他人に理解しやすくよく説明する能力も持っていると感じました。おかげで簡単に講義を頑張ることができました。 3. 快適な受講環境(4K) 通常、他の講義は1Kでアップロードされますが、この講義は4K映像で撮影していただき、講義を受講する間、本当に目を浄化する気分を感じながら受講できました。講義内容だけでなく、こんな講義受講環境まで考慮していただく点だけ見ても、全体的な講義クオリティが良いしかないという気がします。 特に良かったこと - 講義映像品質(4K) - ボーナスレクチャーの内容(ライブラリ直接修正、画像最適化など) - 講義で一緒に開発していくアプリのレベル(プロダクトレベルの複雑で現実的な要件が反映されたアプリ) 退勤後は立ち寄ってから長くかかりましたが、本当に面白くてお得な講義でした。ありがとうございます! もっと難しい話題でRN講義また作りたいなら無条件受講する意思があります!

    • koy
      知識共有者

      この講義では、おっしゃったように作って終わる単純なプロジェクトではなく、サービス可能なほどの完成度のあるアプリを作ってみることが目標でした。 それだけ講義時間が長くなりましたが、それでも講義がうまく合っているようでいいですね。

  • swi81387993님의 프로필 이미지
    swi81387993

    受講レビュー 2

    平均評価 5.0

    5

    24% 受講後に作成

    JAVA, JS, CSS程度を趣味で学んだことのある一般人です。 以前から「自分の手で直接アプリを作ってみたい!」という夢があったのですが、非専攻者なのでなかなか挑戦できずにいたところ、ようやく機会を得ることができました。 クロスプラットフォームアプリ開発が可能だというReact Nativeに興味が湧き、Reactの基礎だけを別途勉強した後、Kyoさんの講義を受けることになりました。 結論から言うと、この講義を受けて本当に良かったと思っています! 最初は中級の講義なので簡単ではありませんでしたが、学んでいくうちに「え、こんな機能もあったんだ?」と思う瞬間が多く、単に概念だけを知っていたことを実際にどのように活用するのかを学ぶことができて本当に有益でした。 特にもともと知っていた機能もより効率的に使用する方法を学ぶことができて良かったし、復習しながらついていくうちにだんだん慣れていくのを感じました。 おかげでReact Nativeに対する自信もつき、今では自分だけのアプリを直接作ってみることができるという期待感が大きくなりました! 非専攻者の私もReactの基礎だけを掴んで挑戦したので、他の方も十分にできると思います。 良い講義をありがとうございます!😊 ファイ팅! 🚀

    • koy
      知識共有者

      良いレビューをありがとうございます!

  • dlwhdans987791님의 프로필 이미지
    dlwhdans987791

    受講レビュー 1

    平均評価 5.0

    修正済み

    5

    100% 受講後に作成

    React Nativeでアプリを最初から最後まで作ることができてよかったです。フロントエンドとバックエンドの両方を経験し、実際のデプロイまで完了できたので実践的な感覚を身につけるのに十分でした。 React Query, Zustand, NestJS, TypeORMなど最新技術を使って技術スタックの勉強にもなり、Kakao/Appleログイン、地図API、無限スクロールのような実践的な機能も漏れなく扱われていました。 コードもよく整理されており説明も明確でついていきやすかったです。App Store/Play Storeでのリリースまで全過程を直接体験できたので完成度の高い講義だと思います。

    • koy
      知識共有者

      全ての授業を受講されましたね!完成度の高い講義だとおっしゃってくださってありがとうございます。

Kyoの他の講座

知識共有者の他の講座を見てみましょう!

似ている講座

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