강의

멘토링

커뮤니티

BEST
Programming

/

Mobile Application Development

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

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

  • Kyo
앱개발
커뮤니티앱
React Native
TypeScript
expo
react-hook-form
react-query

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

受講後に得られること

  • 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,050

受講生

157

受講レビュー

336

回答

4.9

講座評価

3

講座

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

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

 

  • inkyo.dev@gmail.com

カリキュラム

全体

80件 ∙ (8時間 25分)

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

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

受講レビュー

全体

57件

4.9

57件の受講レビュー

  • 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
      知識共有者

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

  • chotg님의 프로필 이미지
    chotg

    受講レビュー 1

    平均評価 5.0

    修正済み

    5

    100% 受講後に作成

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

    • koy
      知識共有者

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

  • agger21540581님의 프로필 이미지
    agger21540581

    受講レビュー 5

    平均評価 4.8

    5

    61% 受講後に作成

    とても面白いです!最高!

    • koy
      知識共有者

      ありがとうございます!面白く見ていただけたとのことで、励みになります :)

  • lgs4002님의 프로필 이미지
    lgs4002

    受講レビュー 14

    平均評価 4.3

    5

    96% 受講後に作成

    楽しく拝見させていただきました。

    • koy
      知識共有者

      楽しくご覧いただけて良かったです。受講後のレビューありがとうございます!

期間限定セール、あと17:36:05日で終了

¥7,210

24%

¥9,496

Kyoの他の講座

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

似ている講座

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