강의

멘토링

커뮤니티

BEST
Programming

/

Mobile Application Development

[リニューアル] グルメマップアプリ作り (React Native & NestJS)

React Nativeを使って自分だけのグルメ記録アプリを開発し、リリースする過程を学ぶことになります。デザインからフロント・バックエンド開発、デプロイまで全過程を準備しました。

  • Kyo
실습 중심
클론코딩
프로젝트
React Native
TypeScript
NestJS
react-query
zustand

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

受講後に得られること

  • React Native

  • React Query

  • Zustand

  • TypeScript

  • Nest.js

  • TypeORM

[中級] グルメマップアプリ作成 with React Native & NestJS

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

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

講座紹介

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

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

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

* この講座はReact Native CLIを使用する中級講座です。この点にご注意の上、受講申請をお願いします。(Expoを利用した開発はアバターコミュニティアプリ作成講座をご参照ください。)

扱う内容

  • React Navigation


  • TypeScript

  • Tanstack Query (React Query)

  • Zustand

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

  • JWTベース認証

  • カカオログイン / Appleログイン


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

  • 合成コンポーネントパターン

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

  • Suspense、ErrorBoundary

  • アプリのデプロイ

  • Google Maps API、カカオマップ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環境が必要です。)

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


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

こんな方に
おすすめです

学習対象は
誰でしょう?

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

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

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

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

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

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

  • Reactの知識が必要です。

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

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

こんにちは
です。

2,066

受講生

160

受講レビュー

337

回答

4.9

講座評価

3

講座

커뮤니티 서비스 프론트엔드 개발자로 시작하여 현재는 커머스 플랫폼 풀스택 개발자로 일하고 있습니다.

인프런에서는 완성도 높은 프로덕트를 만들기 위한 강의를 하고 있습니다.

 

  • inkyo.dev@gmail.com

カリキュラム

全体

119件 ∙ (14時間 59分)

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

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

受講レビュー

全体

94件

4.9

94件の受講レビュー

  • sysryan09027861님의 프로필 이미지
    sysryan09027861

    受講レビュー 1

    平均評価 5.0

    5

    82% 受講後に作成

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

    • koy
      知識共有者

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

  • kms920106님의 프로필 이미지
    kms920106

    受講レビュー 24

    平均評価 4.6

    5

    99% 受講後に作成

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

    • koy
      知識共有者

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

  • dlwhdans987791님의 프로필 이미지
    dlwhdans987791

    受講レビュー 1

    平均評価 5.0

    修正済み

    5

    100% 受講後に作成

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

    • koy
      知識共有者

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

  • lody님의 프로필 이미지
    lody

    受講レビュー 1

    平均評価 5.0

    修正済み

    5

    12% 受講後に作成

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

    • koy
      知識共有者

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

  • swi81387993님의 프로필 이미지
    swi81387993

    受講レビュー 2

    平均評価 5.0

    5

    24% 受講後に作成

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

    • koy
      知識共有者

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

期間限定セール

¥54

30%

¥12,512

Kyoの他の講座

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

似ている講座

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