Outlecture
Home
About
Technology
Design
Video
Contact
Official
Outlecture
Home
About
Technology
Design
Video
Contact
Twitter Official
  • Home
  • Technology

React Native のおすすめの教材8選! 【 2023年3月 最新版】

更新日:2023年3月11日

こちらは、独学で React Native を学ぼうとしている初学者の方に最適な学習講座を紹介するページです。

目次

1. 本ページの説明

1. 本ページの説明

React Native を独学で学ぶ上でおすすめの講座を動画プラットフォームから合計8選紹介します。

React Native とは

React Nativeは、アメリカのFacebook社が開発したJavaScriptライブラリで、iOSおよびAndroidの両方のプラットフォームでネイティブモバイルアプリを開発するために使用されます。React Nativeを使用すると、単一のコードベースで複数のプラットフォームに対応することができ、高速かつ効率的にアプリを開発することができます。

本サイト「Outlecture(アウトレクチャー)」は講座の評価、情報の鮮度、購入者や視聴者数、直近の数値上昇率などを全てバランスよく採点し、ユーザーにとって最適な講座のみ抜粋できるよう独自のアルゴリズムで評価を行っています。

また、各動画プラットフォームもそれぞれ特徴があり、「こういう状況の方にはこちらの方が良い」というユースケースも合わせて説明していきます。

React Nativeをこれから学ぼうとしているみなさまのご参考にしていただければ幸いです。

2. Udemy おすすめ講座5選

Outlectureで厳選したおすすめのUdemy講座5選はこちらです。

コース名 平均評価 総購入者数 先月の購入者数
(2023年2月)
コースレベル コース時間 作成日 更新日 料金

【2023年最新版】React Native入門:ニュースアプリを作りながら覚えよう

thumbnail
4.67 4,518 65 初級 9 時間 50 分 2019年4月27日 2023年2月8日 ¥12,800

React Native, Firebase, Expo でアプリ開発をゼロから始めよう!

thumbnail
4.49 8,877 113 初級 30 時間 47 分 2017年10月10日 2022年12月2日 ¥27,800

実践編:React NativeとFirebaseで作るiOS/Androidアプリ:お店レビューアプリ開発編

thumbnail
4.75 2,121 19 中級 6 時間 44 分 2020年7月25日 2021年11月26日 ¥12,800

React Native(Expo)によるiOSアプリ開発

thumbnail
4.75 426 18 初級 4 時間 32 分 2021年9月14日 2023年2月25日 ¥27,800

【入門編】React Native & Expo でアプリ開発のスキルを身につける!

thumbnail
4.79 72 2 初級 10 時間 11 分 2022年1月31日 2022年11月27日 ¥2,400

Udemy(ユーデミー)は、アメリカ・シリコンバレー発祥のユニコーン企業で、世界最大級のオンライン学習プラットフォームを運営しています。

Udemyの特徴は、

  • 15.5万以上(※海外講座含む)の豊富な講座を提供している
  • 講師陣の多くが世界最先端の現場で活躍されている
  • 1講座あたり数千~数万円で、キャンペーン時は70~90%OFFとなる良心的な値段
  • 講座は1度購入すれば視聴期限なく受講でき、30日返金保証もついている
  • 講座は0.5~2倍の変速機能を備え、自分のペースで学習することができ、専用アプリを使えばスマホからでもオフライン環境で受講可能
  • 講師に直接掲示板から質問ができるため、疑問を解決し自学自習をサポートしてくれる

等があげられます。

Outlectureの管理メンバーは、ソフトウェアエンジニアやクリエイター、webデザイナーが現役で活躍しています。私たちは初めて触るプログラミング言語やプロダクトの多くはUdemyの受講からキャッチアップをはじめています。
私たちの体験談として、Udemyの講座の質は非常に高いと感じています。講師陣が世界最先端で活躍している方々ばかりで、最先端の知識や現場でのノウハウを丁寧にわかりやすく教えてくれます。試験で使う知識ではなく、実際の現場・案件で使う知識と技術を習得することができます。

Udemyの講座は、実際の現場で活用したい方や自己学習を始めたい方に特におすすめです。一度購入すれば、視聴期限がなく、30日間の返金保証もあるため、安心して学びを始めることができます。

こんな方におすすめ

  • 実案件でReact Nativeを使用する
  • 現役の(世界)トップ戦線で活躍している方のノウハウを学びたい
  • サブスクリプションの加入に抵抗のある
  • ITの基礎的な知識がある

各講座の詳細は以下に記載します。


【2023年最新版】React Native入門:ニュースアプリを作りながら覚えよう

Webの開発経験はあるけどアプリの開発は初めてという方、エンジニアになりたての人にお薦めのReact Native入門講座。2019年に導入されたHooksの記法にも対応。React Native現場歴3年の講師が基礎から丁寧に解説します。

thumbnail
平均評価
4.67
総購入者数
4,518
先月の購入者数
(2023年2月)
65
コースレベル
初級
コース時間
9 時間 50 分
作成日
2019年4月27日
更新日
2023年2月8日
料金
¥12,800

~~2023年2月 全編アップデート~~

最新のReact Native環境に合わせて全動画をアップデートしました。


【講座内容】

React Native + Expoを用いたスマホアプリ開発を、環境構築〜ストアへのリリースまで一通り習得することを目指します。


ソフトウェア開発の醍醐味は「自分の描いたサービスを実現できたとき」だと思います。

React Nativeを使うと、そのアイデア着想〜実現までが非常にスムーズになります。

この講座を通して、そんな体験をしていただければと思っています。


コーディングでは実際に「ニュース閲覧アプリ」を作りながら学びます。


シンプルなアプリですが、その中に、

・コンポーネントの設計

・API通信

・Hooksの利用

・Reduxによる状態管理

・画面遷移

などReact Nativeのエッセンスをギュッと濃縮しました。


アプリを開発しながら楽しく学びましょう!



【この講座の対象者】

・Webの開発経験はあるけどアプリの経験はない人

・エンジニア入門者

・React Nativeでの開発を経験してみたい人



【この講座では扱わないこと】

・JavaScriptの基本的な文法

・React Native熟練者向けの内容


【更新情報】

2023/2/5 全動画を最新版にアップデート

2022/8/22 Expoの開発環境構築を更新

2021/7/11 Screenのコードを修正

2021/4/24 付録にページング(スクロールすると次のページを読み込む)を追加しました

2020/10/20 付録にFunctionコンポーネントの色々な書き方、を追加しました

2020/9/27 各レクチャー毎のソースコード(L7~8)を掲載しました

2020/9/24 各レクチャー毎のソースコード(L4~6)を掲載しました

2020/8/16 環境構築のトラブルシュートを追加しました

2020/4/26 News APIの画像が表示されない場合の対応を追加

2020/4/11 TypeScript版のサンプルコードを掲載しました

2020/3/8   React Navigation v5対応のためセクション7を大幅に更新しました

2020/3/8   ReduxのHooks対応のためセクション8の一部を更新しました

2020/2/15 レクチャー39にエラー処理を追記しました

2020/2/11 レクチャー44にreact-navigationのバージョンに関する注意点を追加しました

2020/2/7   レクチャー4にExpoの最新版での注釈を追加しました

2020/2/3   レクチャー46にてHomeScreenの説明が漏れていたので修正しました

  1. はじめに
  2. 本コースの概要
  3. 講師の自己紹介
  4. React Nativeについて
  5. Expoとは
  6. 環境構築をしてさっそく作ってみよう
  7. 事前に必要なツールを用意する
  8. Expo CLIを触ってみる
  9. Expoの新規プロジェクトを作ってみる
  10. シミュレーターで実行する
  11. スマホ実機で実行する
  12. Prettierでコードを自動整形する
  13. まとめ
  14. UIコンポーネントを作ってみよう
  15. スタイル調整の基礎 - boxを描いてみる
  16. レイアウトの区画を整理する - flex-boxについて
  17. Imageコンポーネントで画像を表示する
  18. Textコンポーネントで文字を表示する
  19. コンポーネント化してUIを再利用可能にする
  20. (補足) export defaultについて
  21. propsで親から子にデータを渡す
  22. まとめ
  23. 補足:flex boxについて
  24. リスト表示を作ってみよう
  25. ダミーデータを読み込む
  26. ScrollViewで一覧表示
  27. FlatListで一覧表示
  28. まとめ
  29. API経由でニュース記事を取得してみよう
  30. stateとpropsの違い
  31. useStateでstateを扱う
  32. News APIを呼び出す
  33. ConstantsにAPIキーを保存する
  34. まとめ
  35. 画面遷移を作ってみよう
  36. 本セクションの概要
  37. React Navigationのインストール
  38. アプリにReact Navigationを導入する
  39. Stack Navigatorを用いて画面遷移する
  40. 遷移元から遷移先にパラメータを渡す
  41. Bottom Tab Navigatorで画面下にタブを表示する
  42. タブにアイコンを表示する
  43. まとめ
  44. Reduxで状態を管理する
  45. Reduxについて
  46. Redux Tool Kitのインストール
  47. Storeを用意する
  48. Sliceを作る
  49. actionをdispatchする
  50. storeの情報を表示する
  51. クリップ一覧画面を作る
  52. redux-persistでreduxの状態を永続化する
  53. まとめ
  54. アプリをストアに公開してみよう
  55. Expoでのストア用ビルドの手順
  56. EASの初期設定
  57. androidのビルド
  58. iOSのビルド
  59. まとめ
  60. おわりに
  61. おわりの挨拶
  62. 【旧バージョン】環境を構築してさっそく作ってみよう
  63. このセクションの概要
  64. Expoのインストール(2022年8月更新)
  65. シミュレーターで動かす
  66. スマホ実機で動かす
  67. コードを変更して確認する
  68. Prettierでコードを自動整形する
  69. まとめ
  70. 参考資料
  71. 環境構築のトラブルシュート
  72. 【旧バージョン】React Nativeの概要と使い所について
  73. このセクションの概要
  74. React Nativeの概要
  75. Expoのメリット・デメリット
  76. Expoで開発するときに気をつけること
  77. 本セクションのまとめ
  78. 【旧バージョン】UIを作ってみよう
  79. 本セクションの概要
  80. これから作るアプリの完成イメージ
  81. コンポーネントについて
  82. 箱を描いてみる
  83. Styleを整える
  84. レイアウトの区画整理
  85. 画像を表示する
  86. テキストを表示する
  87. レイアウトの調整
  88. 本セクションのまとめ
  89. 参考資料
  90. 【旧バージョン】コンポーネントを作ってみる
  91. 本セクションの概要
  92. コンポーネントに切り出す
  93. props経由でデータを渡す
  94. ニュース記事の一覧表示
  95. FlatListで一覧を表示する
  96. 本セクションのまとめ
  97. 参考資料
  98. 【旧バージョン】API経由でデータを取得してみよう
  99. 本セクションの概要
  100. HooksのuseStateについて
  101. HooksのuseEffectについて
  102. News APIのアカウントを作る
  103. Axiosを使ってAPIを実行する
  104. 【補足】ニュースの画像が表示されない場合
  105. Function componentとClass componentについて
  106. 本セクションのまとめ
  107. 参考資料
  108. 【旧バージョン】画面遷移を実装してみよう
  109. 本セクションの概要
  110. React Navigation v5のインストール
  111. StackNavigatorの利用
  112. 画面遷移を実装
  113. ニュース記事を表示するためにWebviewを表示する
  114. 画面遷移時にパラメータを渡す
  115. 本セクションのまとめ
  116. 参考資料
  117. 【旧バージョン】Reduxを使ってクリップ機能を作ろう
  118. 本セクションの概要
  119. Reduxについて
  120. Reduxのインストール
  121. Actionの実装
  122. Reducerの実装
  123. Storeの実装
  124. デバッガーのインストール
  125. ActionのDispatch
  126. 画面の下にタブを表示する
  127. タブにアイコンを表示する
  128. Reduxから状態を取得して画面に表示する
  129. クリップ一覧から記事詳細への画面遷移
  130. クリップボタンにアイコンを表示する
  131. Reduxを永続化して端末に保存する
  132. 本セクションのまとめ
  133. 参考資料
  134. 【旧バージョン】アプリの仕上げ
  135. 本セクションの概要
  136. スプラッシュスクリーン
  137. アプリのアイコン
  138. ローディング画面
  139. 本セクションのまとめ
  140. 参考資料
  141. 【旧バージョン】アプリをストアに公開しよう
  142. 本セクションの概要
  143. Expoでアプリを配布する方法
  144. 社内や知人に向けて配布する
  145. release-channelについて
  146. iOSの申請用アプリをビルドする
  147. iOSのipaファイルのアップロードとストア申請
  148. Androidの申請用アプリをビルドする
  149. Androidのapkファイルのアップロードとストア申請
  150. 本セクションのまとめ
  151. 参考資料
  152. おわりの挨拶
  153. ボーナスレクチャー
  154. Expo SDKのバージョンアップ
  155. Functionコンポーネントの色々な書き方
  156. パフォーマンス最適化
  157. 無限スクロール(ページング)の実装
React Native, Firebase, Expo でアプリ開発をゼロから始めよう!

React NativeとExpoを使ったモバイルアプリ開発のオールインワン講座。UIデザイン・開発・リリースまで、アプリ開発の全行程を一気に身につけましょう!<React Hooks 対応 / Git も学べる>

thumbnail
平均評価
4.49
総購入者数
8,877
先月の購入者数
(2023年2月)
113
コースレベル
初級
コース時間
30 時間 47 分
作成日
2017年10月10日
更新日
2022年12月2日
料金
¥27,800

React Native は、Web技術の組み合わで、iOS / Android ネイティブアプリを同時に開発することができます。初学者にも分かりやすい開発手法にも関わらず、本格的なアプリをつくることができます。

この講座は、アプリ開発を以下の工程に分割して進行します。

  • 1. Plan(計画)

  • 2. Design(デザイン)

  • 3. Markup(構造化)

  • 4. Styling(装飾)

  • 5. Programming(機能)

  • 6. Release(ストアに並べる)


最初は、HTML / CSS / Javascript を中心に学習し、最終的にはすべてを Javascript で書いていきます。
初めてアプリ開発に挑戦する人向けに進めて行きますので、まったく知識がなくても大丈夫です。

Figma を使ったUIデザインの基本も盛り込みました。
まさにアプリ開発のオールインワン講座となっています。

この講座では Expo を使用します。
Expo を採用することで、開発環境の構築とリリース作業が大幅に簡略化されました。
開発環境の構築とリリース作業は、初学者がつまづきやすいステップの代表例ですので、特に丁寧に解説しています。

また、開発現場には欠かせない Git や Github も取り入れ、実際の開発プロセスに近付けていますので、
これから開発の仕事に関わりたいと思っている方にも最適です。
  

主な機能

シンプルながら、基本的な機能を網羅したメモアプリを作成します。
メモはクラウド上に保存され、端末を変更してもアプリ利用を継続することができます。

  • 会員登録(メールアドレスとパスワードで登録)

  • ログイン・ログアウト

  • リアルタイムデータベース(作成、編集、削除、一覧、詳細)

  • ナビゲーション(画面から画面への移動)

  

主に使用する技術

  • React, React Native

  • React Hooks, Function Component

  • React Navigation

  • Expo

  • Javascript

  • ESLint

  • Firebase Authentication

  • Cloud Firestore

  • Figma (UI Design)

  

必要になる可能性がある費用

  • USD $99/year(App Store にアプリを公開するために Apple に毎年支払う)

  • USD $25(Play Store にアプリを公開するために Google に1度だけ支払う)

  • リリースは最終セクションにまとめていますので、公開しない方は、特に費用はかかりません。

ーーーーーーー


この講座は全編再収録を行い、2021年にリニューアルリリースしました。
コース後半にはリニューアル前の動画が残っています。リニューアル公開時に受講されていた方が困らないための措置ですが、コース紹介ページには、収録時間が合計して表示されています。

リニューアル前のコース収録時間は13時間程度、リニューアル後は17時間程度と大幅に拡張されています。合計は30時間強となっておりますますが、リニューアル前後の動画が含まれていますことを予めご了承下さい。

  1. イントロダクション
  2. このコースを修了したら作れるアプリ
  3. アプリ開発の6の工程
  4. リニューアルについて
  5. 1. プランニング
  6. コンセプトとワイヤーフレーム
  7. 2. UIデザイン
  8. Figmaをインストール
  9. Figmaの基本
  10. ヘッダーのUIデザイン
  11. メモ一覧のUIデザイン
  12. コンポーネントでデザイン作業を効率化する
  13. プロトタイプを作成する
  14. ボタンのUIデザイン
  15. UIデザインのまとめ
  16. 3. マークアップの練習
  17. VSCode のインストール
  18. まずはHTMLで構造化を学ぶ
  19. マークアップを始める
  20. メモ一覧のマークアップ練習
  21. 4. スタイリングの練習
  22. スタイルシートの基本
  23. HTML要素をスタイリングする
  24. 複雑なスタイリング
  25. ボタンのスタイリング
  26. 5. プログラミングの練習
  27. プログラミングの基本
  28. 関数の基本
  29. 演算子の基本
  30. 条件分岐
  31. 繰り返し処理
  32. 練習
  33. Git と Github
  34. GitとGithubのメリット
  35. GitのインストールとGithubのアカウント作成
  36. Windows / TerminalとGitのインストール
  37. Windowsのコマンド
  38. ターミナルでの操作
  39. Gitの初期化
  40. Gitの設定を変更する
  41. Gitで変更履歴を追加してみる
  42. SSH Key に関する注意事項
  43. SSHを使ったGithubとの連携
  44. SSHパスフレーズを省略せずにGithubと連携する
  45. Windows / Gitの初初期化からGithubとの連携まで
  46. テキスト版教材
  47. アプリ開発の環境構築
  48. Expoとは
  49. M1 Mac をお使いの方へ
  50. Node.js のインストール
  51. Expo のインストール
  52. Xcode のインストール
  53. M1 Mac での Android Emulator
  54. Android Studio のインストール
  55. emulatorコマンド(Windowsの場合)
  56. React Native アプリ開発の基本
  57. Expo プロジェクトの新規作成
  58. Expo でアプリを共有する
  59. Expo の基本的なファイル構成
  60. Expo における Git のデフォルトブランチ
  61. Git でファイルの変更履歴を追跡
  62. ESLint airbnb 設定ファイルのバグ
  63. ESLint のインストール
  64. コンポーネントの基本
  65. コンポーネントを作成する
  66. React Props の仕組み
  67. props で値を受け渡す
  68. コンポーネントのスタイルを上書きする
  69. アプリ開発・構造化とスタイリング
  70. メモの一覧をマークアップ
  71. ヘッダー(AppBar)のスタイリング
  72. メモのリストアイテムをスタイリング
  73. ボタンのスタイリング
  74. コードをコンポーネントとして抽出する
  75. コードをスクリーンとして抽出する
  76. メモの詳細画面をマークアップ
  77. メモの詳細画面をスタイリング
  78. アイコンを表示する
  79. いろいろなアイコンを表示する
  80. カスタムアイコンを作成する
  81. メモの編集画面の構造化とスタイリング
  82. KeyboardAvoidingView でテキスト領域を調整
  83. メモの作成画面を作成する
  84. KeyboardAvoidingView のバグ
  85. ログイン画面のマークアップ
  86. ログイン画面のスタイリング
  87. サインアップ画面を作成する
  88. ユーザーのアクションを受け取る
  89. アプリ開発・ナビゲーションの実装
  90. React Navigation のバージョン
  91. React Navigation をインストール
  92. ナビゲーションを導入して画面をつなぐ
  93. iOS Simulator リロードのショートカットについて
  94. すべてのスクリーンを登録する
  95. ボタンをタップして画面を移動する
  96. 履歴をリセットしながら画面を移動する
  97. iOS と Android のアニメーションを統一する
  98. React Hooks
  99. useState を使って状態を保存する
  100. TextInput のオプション
  101. アプリ開発・機能の実装
  102. Firebase を始める
  103. 会員登録を実装する
  104. ログインを実装する
  105. ログイン状態を監視する
  106. ログアウトを実装する
  107. データベースにデータを保存する
  108. ユーザーごとにメモを保存する
  109. データベースからデータを取得する
  110. データをメモの一覧として表示する
  111. 効率的なリストのレンダリング
  112. メモの詳細画面でデータを取得する
  113. メモの詳細画面でデータを監視する
  114. メモの編集画面を実装する
  115. メモが0件の場合のUX
  116. ローディング状態の表示
  117. ローディングコンポーネントでUX改善
  118. メモの削除を実装する
  119. エラーメッセージを翻訳する
  120. Firestore のルール設定でデータ保護
  121. ESLint のエラーを修正
  122. リリース前の細かな調整
  123. 6. リリース
  124. 画像の準備とビルド設定
  125. Expo 47の影響
  126. EASを利用したビルド
  127. iOS アプリをビルド
  128. App Tracking Transparency
  129. Apple Store の設定
  130. Android アプリをビルド
  131. <練習> iOS アプリのリジェクト
  132. ーーー 2020年以前の収録 ーーー
  133. リニューアル前のレクチャーです
  134. <2020>はじめに
  135. 講座の進め方
  136. <2020>スケッチ
  137. まずは手描きでスケッチ
  138. Sketchとプラグインのインストール
  139. Sketch作成(ログイン / ユーザー登録画面)
  140. Sketch作成(メモリスト)
  141. <2020>構造化の基本
  142. エディタのインストール
  143. HTMLの基本とChromeを使った確認方法
  144. Sketchを見ながらメモリストを構造化する
  145. <2020>スタイリングの基本
  146. 概要とメモリストのCSS(ヘッダー)
  147. メモリストのCSS(リストアイテム)
  148. メモリストのCSS(追加ボタン)
  149. <2020>プログラミングの基本
  150. 変数と値の種類
  151. 関数と繰り返し処理
  152. JavascriptでHTMLを変更してみる
  153. ボタンにイベントを設定する
  154. 条件分岐
  155. Javascriptの基本をおさらい
  156. <2020>GitとGithubの基本
  157. Gitのインストール
  158. 初期化と初めてのコミット
  159. Githubでのレポジトリ作成と鍵の作成
  160. リモートレポジトリへのpush
  161. <2020>ReactNativeの開発環境を整える
  162. Node JSのバージョン
  163. Node JSのインストール
  164. Expo のインストール
  165. Expo コマンドについての注意点
  166. Xcode と iPhoneシュミレータのインストール
  167. Android Studio のインストール
  168. 環境変数の設定に関する注意点
  169. 環境変数の設定 1
  170. 環境変数の設定 2
  171. Android エミュレータのインストール
  172. Android エミュレータのトラブルシューティング
  173. <2020>Expo の使い方 / プロジェクトの構成とエディタの設定
  174. Expoの制限
  175. Expo で React Native のプロジェクトを新規に作成する
  176. iOSシュミレータが立ち上がらない場合
  177. iOS と Android で React Native を立ち上げる
  178. Expo / React Native のプロジェクト構成
  179. npm script で Android エミュレータを同時に立ち上げる
  180. iPhoneの実機でアプリを立ち上げる
  181. 実機を使ったテストの注意点と --offline オプション
  182. Expo のオプションと便利機能
  183. 新規プロジェクトをGithubで管理する
  184. ESLint 7.3 のバグ
  185. Eslintで構文チェック
  186. Eslintの設定を変更する
  187. このアプリのGithubレポジトリについて
  188. <2020>ReactNativeでの構造化とスタイリング
  189. ReactNativeを使った構造化とスタイリングの表現方法
  190. 小さな構造体(コンポーネント)を作成する
  191. propsを使ってコンポーネントをカスタマイズする
  192. 画面全体の構造化とAppbarのスタイリング
  193. MemoListのスタイリング
  194. MemoAddButtonのスタイリング
  195. <2020>再利用可能なコンポーネントを抽出する
  196. MemoList / Appbar / CircleButtonの切り出し
  197. 再利用可能なコンポーネントを使って画面を作成する
  198. <2020>各画面の構造化とスタイリング
  199. メモの詳細画面の構造化
  200. MemoDetailScreenのスタイリング
実践編:React NativeとFirebaseで作るiOS/Androidアプリ:お店レビューアプリ開発編

アプリはReact Native、バックエンドにFirebaseを採用し、サーバーと連携したアプリを開発します。実際に「お店レビューアプリ」を作りながら学びます。実務にも活用できるアプリ開発・運用方法を手に入れよう!

thumbnail
平均評価
4.75
総購入者数
2,121
先月の購入者数
(2023年2月)
19
コースレベル
中級
コース時間
6 時間 44 分
作成日
2020年7月25日
更新日
2021年11月26日
料金
¥12,800

~~2020年12月19日更新~~


本コースでは、React Nativeとfirebaseを組み合わせた、効率良いアプリ開発の手法について学びます。


多くのアプリ開発では、フロントエンドだけでなくバックエンドのサーバーが必要となってきます。


アプリ開発者にとって、サーバー側のインフラ構築や開発がネックになりがちですが、近年話題のfirebaseを用いることで非常に効率よくサーバー側を構築することが出来ます。

React NativeとFirebaseは非常に相性がよく、筆者自身もこの組み合わせで複数のアプリを開発し、その効率の良さに魅力を感じています。


コーディングでは実際に「レストランのレビューアプリ」を作りながら学びます。


このアプリの中に

- React NativeとFirebaseの組み合わせ型

- Firebaseによるデータ管理やファイル管理

- Algoliaによる全文検索

など、現場でも使えるノウハウをギュッと詰め込みました。


アプリを開発しながら楽しく学びましょう!



【この講座の対象者】

・アプリ開発の経験はあるが、サーバー側の経験はない人

・React Nativeでの開発を経験してみたい人

・Firebaseの基礎を学びたい人



【この講座では扱わないこと】

・JavaScriptの基本的な文法

・React Nativeの基礎

※React Nativeの基礎の解説は薄めです。state, props, hooksなどのキーワードがピンとこない場合は基礎編を先におすすめします。


【必要なもの】

・mac

・googleアカウント



【更新情報】

2020/12/19 ボーナスレクチャー「プッシュ通知を送る」を追加

2020/10/3 レクチャー38「Expo SDK 39における画像アップロードのエラーについて」を追加

  1. はじめに
  2. 本コースの概要と講師紹介
  3. React Nativeについて
  4. firebaseについて
  5. React Nativeアプリにfirebaseを組み込んでみよう
  6. 本セクションの概要
  7. firebaseのプロジェクト作成
  8. firebaseのwebコンソールを触ってみる
  9. expoのプロジェクトを作成
  10. (注意) Firebase SDKのバージョンについて
  11. React Nativeにfirebaseを組み込む
  12. React Nativeでfirestoreのデータを取得する
  13. firestoreのデータ構造について補足
  14. リファクタリング
  15. まとめ
  16. firestoreで検索やソートを実装してみよう
  17. 本セクションの概要
  18. サンプルデータの準備
  19. shopの一覧表示
  20. shopを評価の高い順にソート
  21. まとめ
  22. React Nativeの画面遷移を実装しよう
  23. 本セクションの概要
  24. React Navigationのインストール
  25. AppNavigatorを作成
  26. StackNavigatorの利用
  27. 画面間でパラメーターを渡す
  28. TabNavigatorの利用
  29. モーダルの画面を実装
  30. ログイン後の画面遷移
  31. まとめ
  32. firebase authでユーザー認証を実装しよう
  33. 本セクションの概要
  34. 匿名ログイン
  35. Contextによるユーザー情報の保持
  36. ログイン後の画面切り替え
  37. まとめ
  38. firestoreのデータを更新する
  39. 本セクションの概要
  40. ユーザー情報の編集
  41. firestoreの設計のコツ(非正規化)
  42. レビューの投稿フォーム
  43. レビューを投稿する
  44. カメラロールから写真を選択する
  45. ※ Expo SDK 39における画像アップロードのエラーについて
  46. Cloud Strageに画像をアップロードする
  47. レビュー一覧の表示
  48. 投稿したレビューを画面に即時反映する
  49. 本セクションのまとめ
  50. Cloud functionでバックエンド処理を実装しよう
  51. 本セクションの概要
  52. Cloud functionの環境準備
  53. ユーザー名の更新を各レビューに反映する
  54. 平均スコアの計算を非同期に行う
  55. まとめ
  56. セキュリティルールについて
  57. セキュリティルールを設定する
  58. algoliaで全文検索を実装しよう
  59. 本セクションの概要
  60. algoliaのプロジェクト作成
  61. Cloud functionでalgoliaにindexを追加する
  62. React Nativeでalgoliaの検索を実行する
  63. まとめ
  64. おわりに
  65. おわりのメッセージ
  66. ボーナスレクチャー
  67. プッシュ通知を送る
React Native(Expo)によるiOSアプリ開発

Firebase, TypeScript, Tailwind CSS, Redux Toolkit, Expo/React-nativeによるiOSアプリ開発手法を習得。

thumbnail
平均評価
4.75
総購入者数
426
先月の購入者数
(2023年2月)
18
コースレベル
初級
コース時間
4 時間 32 分
作成日
2021年9月14日
更新日
2023年2月25日
料金
¥27,800

本コースでは、Expo・React-nativeを使ったiOS アプリの開発手法について学習します。


コースで使用する技術

  • Expo/React-native

  • TypeScript

  • Firebase

  • Tailwind CSS

  • Redux Toolkit


本コースの構成

  • Section 1 : Expo開発環境の構築

  • Section 2 : 基礎レッスン

    ・flex box

    ・Redux Toolkitによる状態管理(Global)

    ・memo, useCallbackによる最適化

    ・react-navigationとlife time

  • Section 3 : 実践レッスン : Todo-Appの作成


*Firebase SDK ver9.0以降の modular styleに準拠

*React-navigation ver6.0

*Expo SDK 43対応


***本コースの注意点***

  1. Mac PCが必須になります。

  2. 講義では、iOS simulatorのみ扱っています。(Android emulatorの導入ついては講義に含まれていません)

  3. iOSアプリのApp Storeへの公開手順は講義に含まれていません。

  1. Expo開発環境構築
  2. コース概要
  3. Expo開発環境の構築
  4. 基礎レッスン : React-native
  5. GitHub URL
  6. tailwind-rn version指定
  7. Project setup
  8. [注意] AntDesign cannot be used as a JSX component.
  9. Tailwind RN + Root Navigator
  10. React navigation
  11. Flex box
  12. Redux ToolKit (仕組みの理解)
  13. Redux ToolKit
  14. memo + useCallback
  15. 実践レッスン : Todo-app
  16. GitHub URL
  17. tailwind-rn version指定
  18. Project setup
  19. Redux setup
  20. useFirebaseAuth + UI components
  21. AuthScreen
  22. Navigator
  23. CreateTag
  24. TagListScreen
  25. Screen options + todoSlice
  26. Navigation to TaskListScreen
  27. CreateTask
  28. TaskItem
  29. TaskList (FlatList)
  30. Task Edit
  31. Security rules + expo publish
  32. Next steps
  33. ボーナスレクチャー(クーポンリスト)
【入門編】React Native & Expo でアプリ開発のスキルを身につける!

アプリ開発の登竜門であるTodoリストアプリを開発しながら、React Nativeでのアプリ開発スキルを身につけていきましょう。

thumbnail
平均評価
4.79
総購入者数
72
先月の購入者数
(2023年2月)
2
コースレベル
初級
コース時間
10 時間 11 分
作成日
2022年1月31日
更新日
2022年11月27日
料金
¥2,400

Expoを使用したReact Nativeアプリを開発していくことで、

アプリ開発のスキルを習得可能なコースとなっています。


開発環境の構築〜アプリ開発方法について詳しく解説していますので、

プログラミング未経験者の方はもちろんのこと、プログラミングスキルを向上させたい方や、React Nativeでのアプリ開発を学びたい方など、幅広く対象となるようなコースになるよう作りました。


コースの内容

  • Todoリストアプリを作れる

  • JavaScriptの基礎を学べる

  • モバイルアプリ開発の基礎を学べる

  • 開発環境の構築について学べる

  • Expo & React Nativeの基礎を学べる

  • アプリ開発方法 & プログラミング手法を詳しく解説


コースの特徴

  • 分かりやすいコース構成

    一目で分かりやすいコース構成となるようにしました。


  • セクション毎の明確な作業分け

    セクション毎に行う作業を統一するようにしました。

    アプリ開発セクションでは「画面の作成」「UIの作成」「機能の作成」と開発工程を明確に分けています。


  • 豊富なスライド

    多くのスライドを作成して分かりやすい解説ができるようにしました。


  • 動画内の無駄なシーンをカット

    スムーズな学習を行えるように、動画内の無駄なシーンをカット編集しました。


  • リソースの充実

    レクチャー内で参照するWebサイトへのリンクや、アプリ内で使用する画像のダウンロードリンクを

    全てをレクチャーの「リソース」へ設定しています。

    これによりスムーズな学習を行えるようにしています。


  1. はじめに
  2. はじめに
  3. ソースコード
  4. 資料
  5. 本コース作成時の環境について
  6. JavaScriptの基本構文を学ぶ
  7. セクション概要
  8. JavaScriptとは
  9. 学習環境の準備
  10. 変数と定数
  11. 演算子
  12. 条件分岐 if文
  13. 条件分岐 switch文
  14. 繰り返し処理 for文
  15. 繰り返し処理 while文
  16. 配列
  17. 連想配列
  18. 関数(メソッド)
  19. クラス
  20. 配列関数
  21. 練習問題1 FizzBuzz問題
  22. 練習問題2 宝くじの当選
  23. 練習問題2 宝くじの当選(配列関数版)
  24. React Nativeの基礎を学ぶ
  25. セクション概要
  26. モバイルアプリ開発の基礎
  27. React Nativeの基礎
  28. Expoについて学ぶ
  29. 開発環境の構築
  30. セクション概要
  31. Node.jsのインストール
  32. Expoのインストール
  33. Visual Studio Codeのインストール
  34. Xcodeのインストール
  35. Android Studioのインストール
  36. iOSシミュレーター&Androidエミュレーターのセットアップ
  37. React Nativeを使ってみる
  38. React Nativeを使ってみる
  39. テキストを作成してみる
  40. デザインを加えてみる
  41. ビューを作成してみる
  42. 画像を表示してみる
  43. ボタンを作成してみる
  44. アラートを表示してみる
  45. 横並び / 縦並び ビューを作成してみる
  46. デザインの仕上げ
  47. コンポーネント化してみる
  48. 【アプリ】プロジェクトの初期設定
  49. セクション概要
  50. プロジェクト作成
  51. プロジェクト構成について学ぶ
  52. テキストエディタの設定
  53. 【アプリ】画面作成
  54. セクション概要
  55. ライブラリのインストール
  56. ホーム画面を作成する
  57. タブ管理画面を作成する
  58. ナビゲーション設定を行う
  59. 画面遷移を実装する
  60. ステータスバーの設定を行う
  61. 【アプリ】UI作成
  62. セクション概要
  63. チェックマークを作成する
  64. Todoリストアイテムを作成する
  65. Todo追加ボタンを作成する
  66. タブリストアイテムを作成する
  67. 削除ボタンを作成する
  68. 入力ダイアログ(アラート)を表示する
  69. タブビューを作成する
  70. リストビューを作成する
  71. iPhone UI調整
  72. Android UI調整
  73. UI作成 仕上げ
  74. 【アプリ】機能作成
  75. セクション概要
  76. AsyncStorageの導入
  77. React Native Debuggerのインストール
  78. 【タブ】追加&取得処理の実装
  79. 【タブ】表示処理の実装
  80. 【タブ】編集処理の実装
  81. 【タブ】削除処理の実装
  82. 【タスク】追加&取得処理の実装
  83. 【タスク】表示処理の実装
  84. 【タスク】編集処理の実装
  85. 【タスク】削除処理の実装
  86. 【タスク】チェック処理の実装
  87. 初期設定Todoの登録処理を実装
  88. 機能作成 仕上げ
  89. 【アプリ】仕上げ
  90. アプリアイコンを設定
  91. スプラッシュスクリーンを設定
  92. app.jsonの設定
  93. おわりに
  94. おわりに

3. YouTubeおすすめ講座3選

Outlectureで厳選したおすすめのYouTube講座3選はこちらです。

動画名 総視聴数 先月の視聴数
(2023年2月)
いいね数 公開日

【ReactNative入門】スマホアプリ作ろう/第1回.環境構築とコードを触ってみる

thumbnail

チャンネル名:ロックシステムアカデミー!ゆっくりプログラミング学習

5,882 464 98 2021年12月24日

【ReactNative基礎コース】React Nativeの使い方を勉強します!【初心者/スマホアプリ開発】

thumbnail

チャンネル名:だいやん ITアカデミー

2,266 131 56 2021年12月22日

【セイト先生】ReactNativeの将来性について教えてください!!#IT #ReactNative #クロスプラットフォーム

thumbnail

チャンネル名:切り抜き!セイト先生!!

2,293 225 23 2022年5月6日

YouTubeは、広告がつくものの無料で視聴でき、日常生活でもお馴染みとなっています。
最近では、良質な教材も増えており、学びたいけどお金をかけるほどでもない方や、概要をさらっと理解したい方には、YouTubeで学ぶことをおすすめします。

こんな方におすすめ

  • お金をかけずに学びたい
  • React Nativeの概要だけさらっと理解したい

各講座の詳細は以下に記載します。

【ReactNative入門】スマホアプリ作ろう/第1回.環境構築とコードを触ってみる

ロックシステムアカデミー!ゆっくりプログラミング学習

総視聴数
5,882
先月の視聴数
(2023年2月)
464
いいね数
98
公開日
2021年12月24日
どうもロックシステムアカデミーのろっくんです!
今回はReactNativeでスマホアプリを作っちゃいます。
第1回目の今回はReactNativeの基礎知識と環境構築をやっちゃいます。
全4回のシリーズみなさんも是非チャンレンジしてみてください!

■動画内で紹介したソフトのダウンロードは以下リンクからできます!
・Node.jsダウンロード
https://nodejs.org/ja/

・Expo公式サイト
https://expo.dev/

・Visual Studio Code
https://azure.microsoft.com/ja-jp/products/visual-studio-code/

・Expo GO(スマホから)
https://apps.apple.com/jp/app/expo-go/id982107779

■動画で使用したコマンド一覧(コピペして使用してください。)
・Node.jsインストール確認
node --version

・Expo-clのインストール

npm install expo-cli --global

web UIが上手く表示されない場合
npm install expo-cli --global ではなく
npm install -g expo-cli@5.5.1 のコマンドを使用してください

・プロジェクト作成
expo init my-new-project

・Expoログイン
expo login

・Expo起動
expo start --tunnel
----------------------------------------------------------
ブログでは動画内でご紹介したプログラミングコードやお役立ち情報を発信!是非合わせてご覧ください。
▼ロックシステム公式ブログ
https://rocksystem.co.jp/blog/pickup.php

大阪福島のエンジニアスクール「ロックシステムアカデミー」WEBサイトはこちら!
▼ロックシステムアカデミー
https://rocksystem.co.jp/academy/
----------------------------------------------------------
大阪福島にある直接指導エンジニアスクール「ロックシステムアカデミー」です!「プログラミング作って実践」をテーマに楽しく分かりやすいアプリ開発のレクチャー動画をアップしていきます!

ご質問、コメントお待ちしてます。
チャンネル登録も是非よろしくお願いします!
----------------------------------------------------------
【ReactNative基礎コース】React Nativeの使い方を勉強します!【初心者/スマホアプリ開発】

だいやん ITアカデミー

総視聴数
2,266
先月の視聴数
(2023年2月)
131
いいね数
56
公開日
2021年12月22日
このシリーズではReact Nativeの基礎知識を教えていきます。このシリーズが見終わった頃には最低限の知識が身に付きます。最初は大変かと思いますが、頑張って学習しましょう!きっと明るい未来が待っていますよ!

▷ チャプターリスト(目次)
00:00 React NativeとExpoをインストール
04:11 ViewとTextとStyleSheet
12:11 State
20:06 ScrollViewとFlatList
31:55 Todoリストアプリを作ってみよう
57:13 Flex

▷React Native公式ページ
https://reactnative.dev/

▷Nodeダウンロードページ
https://nodejs.org/ja/download/

▷ソースコード
https://github.com/DaiyanItDaigaku/ReactNativeBeginner
【セイト先生】ReactNativeの将来性について教えてください!!#IT #ReactNative #クロスプラットフォーム

切り抜き!セイト先生!!

総視聴数
2,293
先月の視聴数
(2023年2月)
225
いいね数
23
公開日
2022年5月6日
最近皆さんにいただいているコメントに👍で反応していたのですが、別に❤️のボタンがあることを初めて知りました...
今まで塩対応ですみません、次から❤️や返信に切り替えていきます!

〜〜〜以下チャンネル概要〜〜〜
ご視聴ありがとうございます!
「セイト先生のWeb・ITエンジニア転職ラボ」のライブ配信の切り抜き動画を投稿しています!

よろしければチャンネル登録・高評価よろしくお願いいたします。

セイト先生のチャンネル登録はこちらから↓↓
https://youtube.com/channel/UC8IWoNfegB72Q2nT9GJy2zQ

※切り抜き動画についてはセイト先生のライブ配信にて許可を得ております。

5. まとめ

React Nativeのおすすめ講座を紹介しました。他の関連講座を学びたい方は、下記をご参考ください。

Firebase
Swift
Flutter
Firebase
Swift
Flutter

「自ら機会を創り出し、機会によって自らを変えよ」

株式会社リクルート創業者 江副浩正氏の有名な言葉です。自分の知識やスキルを高めることは、機会を作り出すことに役に立ちます。自らを変えようとしている方にとって、本ページの情報が少しでもお役に立てれば幸いです。

今回紹介したいずれかの講座を受講した後にさらに深掘りして学びたい方は、公式サイトやコミュニティサイトに行くことを、最新の情報をキャッチアップしていきたい方場合は、公式twitterアカウントをフォローすることをおすすめします。

一覧に戻る
Home About Share
Home
About
Privacy policy
Disclaimer
Contact
Official
© 2023 outlecture.com All Rights Reserved.