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

~~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 は、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のスタイリング

~~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. プッシュ通知を送る

本コースでは、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. ボーナスレクチャー(クーポンリスト)

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. 練習問題１ FizzBuzz問題
22. 練習問題２ 宝くじの当選
23. 練習問題２ 宝くじの当選（配列関数版）
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. おわりに