강의

멘토링

커뮤니티

BEST
Programming

/

Mobile Application Development

アバターコミュニティアプリ作成 (React Native Expo)

React Nativeでアバターベースのコミュニティアプリを開発します。投稿作成だけでなく、コメント/返信、いいね、投票、アバター生成など、完成度の高いコミュニティアプリを構築する過程を学びます。

難易度 初級

受講期間 無制限

  • Kyo
React Native
React Native
TypeScript
TypeScript
expo
expo
react-hook-form
react-hook-form
react-query
react-query
React Native
React Native
TypeScript
TypeScript
expo
expo
react-hook-form
react-hook-form
react-query
react-query

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

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

4.9

5.0

임용준

34% 受講後に作成

わぁ....初めて聞く講座ですが、理解がスッとできますね。講師の教え方もとても良いし、 ネイティブ講座を初めて受講されるなら、この講座をぜひお勧めします。

5.0

로빈(Robin)

100% 受講後に作成

今回の講義を通して、React Native、Expoだけでなく、 react-query、react-hook-form、i18nなど、様々なReactのライブラリ活用法も学ぶことができ、大変有益な時間となりました。 KyoさんのReact Native CLIで作るグルメアプリの講義でも本当に多くのことを学びましたが、今回もExpoを学びながら、講師の様々な開発ノウハウも一緒に習得することができました。 とても満足のいく講義でしたし、今後Kyoさんがまた別の講義をリリースされたら、また受講して他のことも学べたら嬉しいです。 良い講義を作っていただきありがとうございます!

5.0

zoezoe

84% 受講後に作成

Expoを初めて触るのですが、大変 도움이 되는 강의였습니다 ! また、私はreact-hook-formを利用する方法や 共用コンポーネントを作る方法でも大変 도움이 되는 것 같습니다。 世間には入門のための易しい講座が多いのですが、少し難易度が高く、もう少し成長できるような講義のようで良かったです。 講義がとても 깔끔하고、講義一つ一つがあまり長くないので集中しやすく、全体的にコードを作成する上で学ぶ点が多いのでcli講義を購入して続けて聴講しようと思います😎

受講後に得られること

  • React Native & Expo, TypeScript

  • React Query (Tanstack Query)

  • React Hook Form

  • PushNotification, EAS, Dayjs, i18n

[初中級] アバターコミュニティアプリ作成 with React Native

React Native, TypeScript, react-query, react-hook-form, expo

講義紹介

React Nativeでアバターベースのコミュニティアプリを制作します。投稿作成・コメントだけでなく、返信、いいね、投票、アバターシステム、多言語設定、プッシュ通知など、様々な機能を持つコミュニティアプリを完成度高く作る方法をお教えします。

React Native (Expo), TypeScript, react-query(tanstack query), react-hook-formを使用してiOS、Androidアプリを同時に開発します。フロントアプリ開発に集中できるよう、Figmaデザインシステムを含むすべてのプロダクトデザインを提供し、バックエンドソースコードも提供いたします。

この講義ではReact Native Expoを使用します。

React Nativeでアプリを開発する方法には、Expoで開発する方法とCLIで開発する方法があります。最近React Nativeの公式ドキュメントでもExpoを通じた開発を推奨しています。

ExpoはCLIに比べて環境設定と開発を本当に簡単に行うことができます。シミュレーター/実機テストも簡単で、ライブラリの使用も簡単なため、Expoを利用すれば簡単にReact Native開発を始めることができます。また、EAS(Expo Application Services)を活用してアプリを簡単にビルド及びデプロイすることが可能です。

(* CLIを利用した開発はグルメマップアプリ作成講座を参考してください。)

📖 扱う内容

  • React Native & Expo

  • Expo Router


  • TypeScript

  • React Query (Tanstack Query)


  • JWTベース認証


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


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


  • プロフィール/アバター機能

  • 多言語設定 (i18n)

  • プッシュ通知 (Push Notifications)

  • アプリのビルドとデプロイ(EAS)


  • 記事作成/修正/削除

  • コメント/返信を作成する

  • 投票添付、投票参加

  • 画像アップロード

  • いいね/再生回数機能

  • 楽観的更新(Optimistic Update)

  • 無限スクロール (Infinite Scroll)


  • SVGの使用

  • フォントを適用する

  • dayjsで日付を扱う

  • React Hook Formでフォームを扱う




🔥 開発技術スタック

講義では React Native(Expo)、TypeScript、React Query(TanStack Query)、React Hook Form、dayjs、i18n などの技術を使用して開発します。Reactの経験さえあれば、すべて使ったことがなくても大丈夫です!

React Queryを使用してサーバーデータを取得し、キャッシュし、更新する方法、React Hook Formを使用してどんなに複雑なフォームでも簡単に扱う方法、dayjsで日付を簡単に扱う方法、i18nを活用して多言語サポートを簡単に適用する方法をお教えします。

⚡ ️️主要実装機能

会員登録/ログイン

フィード無限スクロール/検索

投稿作成/投票添付

いいね/コメント/返信 + プッシュ通知

プロフィール/アバターカスタム

設定/多言語

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

️ この講義の差別化ポイント

1. Android、iOS同時開発


2つのプラットフォームを一緒に開発しながら、様々なプラットフォーム/画面に応じて再利用可能な共通コンポーネントを開発します。プラットフォーム間の違いと対応方法もお教えします。

2. Figmaデザインシステム提供

デザインは悩む必要がありません!カラー/コンポーネント/スクリーン/画像が含まれたすべてのプロダクトデザインを提供します。

3. 集中度の高い構成、授業別ソースコード提供

  • 不要な内容を削減し、核心だけを盛り込んで、授業あたり平均7.5分、最大16分の短く集中しやすい構成で学習効率を高めるよう制作しました。

  • 完成されたバックエンドソースコードだけでなく、プロジェクトの開始から終了まで進行されるすべての授業について、進行される授業と同じソースコードを提供します。授業ごとに添付資料をご確認ください。

️参考事項

  • 講義はReactNative Expoを利用して進行されます。


  • この講義はWindows/Macユーザー共に受講していただくことができ、Android/iOS両方の動作を確認しながら進めます。(iOSアプリ開発時にはMac環境が必要)


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

  • 講義で使用される画像(アバター)は著作権登録されている著作物ですので、個人練習用途でのみご使用ください。

🙋‍♂ Q&A

Q. 受講対象はどのようになりますか?

  • 事前知識としてReact Nativeは必要ありませんが、JavaScript ES6の知識をお持ちの方、Reactを経験したことがある方を受講対象としています。

Q. TypeScriptは必須ですか?

  • React Nativeでは基本的にプロジェクトがTypeScriptで設定されているため、講義はTypeScriptで進行されます。ただし、複雑な型は使用しないため、TypeScriptの知識が必須というわけではありません。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • JavaScript/Reactの基礎を学習してみた方

  • 単なる掲示板ではなく、完成度の高いコミュニティアプリを作りたい方

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

  • JavaScriptの基礎知識が必要です。 ES6の文法は知っておく必要があります。

  • Reactの基本Hooks(useState, useEffect)は知っておくべきです。

こんにちは
です。

2,156

受講生

174

受講レビュー

348

回答

4.9

講座評価

3

講座

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

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

  • inkyo.dev@gmail.com

カリキュラム

全体

80件 ∙ (8時間 25分)

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

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

受講レビュー

全体

65件

4.9

65件の受講レビュー

  • thdwngusl7542님의 프로필 이미지
    thdwngusl7542

    受講レビュー 3

    平均評価 5.0

    修正済み

    5

    47% 受講後に作成

    ✔️講義を選択した理由 パブリッシャーとしてフロントエンドの勉強をしていたところ、プロダクト(アプリ)のリリースに意欲が湧き、 1人開発者として生まれ変わりたいと思いました…!言語選択に悩みましたが、 Reactを使ったことがあったので(初心者ですが)React Nativeで作ることに決めました😊😊 そうしてネイティブの講義を探し回っていたところ、 Inflearnで新しい講義がオープン!割引イベントを見て受講を決めました。 React Nativeの講義があまりないのに講義をオープンしていただきありがとうございます。😊 ✔️講義の長所 expoでアプリ開発をする一番楽で簡単な方法を教えてくれます。 便利なライブラリの使い方と、どんな時にこのようなライブラリを使えば良いかをよく教えてくれます! フロントエンドだけでなく、バックエンドのソースも提供してくれるので、実際にDB連携まで確認できます。 講義を受講すれば完全なプロダクトを見ることができると思います…! ✔️講義をおすすめする方 バックエンド、フロントエンドに対する基本的な知識があり、expoで簡単にアプリを作ってみたい方におすすめです。他の場所でネイティブの講義を受けるよりも、確実にexpoがとても簡単にアプリを作れます…! But...!!私はバックエンドに無知でReact初心者で開発者ではないせいか…サーバー連携部分から (5章から)すごく手間取るようになり…一日中取り組んでも解決できず、とりあえず中断します😭たまにボブおじさんのようにあっという間にできる気がするのですが、私は理解が難しいです😭😭… もう少し初級バージョンの色々な講義を聞いて、expoで実際のアプリを作ってみる時にまた聞くことにしました。 でもこれは私がアホだからであって…講義自体はおすすめです!!👍

    • koy
      知識共有者

      詳細な受講レビューをお寄せいただきありがとうございます!

    • 講座を聞いて個人アプリのリリースまで完了しました〜 expoで作ったので制約が少し多く、ライブラリの衝突も起こりましたが、簡単に作れるツールであることは間違いないです。 作ったアプリは https://play.google.com/store/apps/details?id=com.badanang.CampWeather です Kyoさんのおかげでデザイナーなのにアプリをリリースすることができてとても感謝しています😭😭!

    • koy
      知識共有者

      ワ、デザイナーさんなのに、リリースまでなんて凄いですね!私も使ってみます! 大変だったと思いますが、最後まで講座を受講してくださり、ありがとうございました👍

  • sungwon68952341님의 프로필 이미지
    sungwon68952341

    受講レビュー 2

    平均評価 5.0

    5

    34% 受講後に作成

    現在も引き続き講義を受けて、学んでいる非専攻の受講生です,,, 正直、真似しながら本当に多くのことを学んでいます... さらに、行き詰まる部分があればすぐにフィードバックをくださる講師の方には、尊敬の念しかありません... これからも学び続け、精進していきます... 非専攻の1人開発者を夢見て,,,😭😭

    • koy
      知識共有者

      良い受講レビューありがとうございます。応援しています!

  • toito1toi님의 프로필 이미지
    toito1toi

    受講レビュー 4

    平均評価 5.0

    5

    100% 受講後に作成

    講義の進行がスムーズで、講義時間も長くないので退屈せずに、様々な機能を扱うことができて良かったです。事情によりMacとWindowsを交互に使いながら講義を聞く必要がありましたが、両方の場合とも親切に説明してくださったので、大きな困難なく付いていくことができました。

    • koy
      知識共有者

      すべての授業を受講されましたね!!受講後のレビューを残していただき、ありがとうございます :)

  • chotg님의 프로필 이미지
    chotg

    受講レビュー 1

    平均評価 5.0

    修正済み

    5

    100% 受講後に作成

    会社で急遽RNを使用しなければならない状況になり、ちょうど講義が30%割引中だったので、プレビュー講義を聞いてみました。講師の方がコードを気にされる方だという印象を受け、受講を決めました。 公式ドキュメントを参考にしながら開発することもできますが、もう少し早くアプリはどのように開発するのか知りたかったのです。計3日間で講義をすべて終えました。 講義の長所 学ぶことが本当に多いです。単に機能の実装にとどまらず、講師の方が意図的に多様な機能を追加しながら学習できるように構成されています。 実務で直ちに活用できる技術を扱います。 (Formの扱い方及び有効性検査、react-queryの使い方、コンポーネントの分離及び再利用性の考慮、一貫性のあるコードスタイルなど) プロダクト開発の過程を直接経験できます。単純な例レベルではなく、実務での開発の流れを習得できました。 カット編集で不要な部分を減らして良かったと思います。 講義で提供されるコードを学び、そしてコードを改善しながら自分のものにすれば、きっと大きな助けになると思います。 おすすめの対象 ReactとCSSに対する基本的な理解がある方 実践開発経験を望む方 指導者なしで実務を身につけなければならない2年目以下の開発者または就職準備生 Reactの経験が全くない方にはやや難しい可能性があるので、基本概念を習得してから受講することをおすすめします。

    • koy
      知識共有者

      短期間で最後まで受講していただき、大変お役に立てたようで嬉しいです。機能やコンポーネントからコードの一貫性、さらには編集まで、私が長い時間をかけて気を配ってきた細部にまでお気づきいただき、驚きました。良いレビューをお寄せいただきありがとうございます!

  • gnzmqkqh1846님의 프로필 이미지
    gnzmqkqh1846

    受講レビュー 4

    平均評価 5.0

    修正済み

    5

    62% 受講後に作成

    • react nativeを勉強しようと思って受講しました。 初めて触れるのですが、とても役に立ちました。ありがとうございます。 そして講義を進める時に画面を間違ってクリックしたせいか、星2つが入っていましたね..;; 急いで修正しました。

¥9,428

Kyoの他の講座

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

似ている講座

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