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

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年と2023年に再収録のリニューアルを実施しています。
そのため、コース後半にはリニューアル前の動画が残っています。リニューアル公開時に受講されていた方が困らないための措置ですが、コース紹介ページには収録時間が合計して表示されていること予めご了承下さい。

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

~~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アプリにアニメーションを組み込む方法として、最新かつ人気のあるツールであるLottieやMoti、さらに標準のAnimated APIを使用した実装方法を紹介します。

それぞれ基礎から学び、最終的には実例として

- ToDoリスト

- Twitter風のプロフィール画面UI

- Tinder風UI

を作成します。

アニメーションによって、ユーザーの体験を向上させ、アプリの魅力を高めるためにぜひこのコースで学んでください。

1. はじめに
2. 本コースの概要
3. 講師の紹介
4. React Native(Expo)の環境構築
5. ソースコードについて
6. Lottieを用いた簡単かつリッチなアニメーション
7. Lottieとは
8. Lottieの環境構築とアニメーション再生
9. Lottieの再生をコントロールする
10. ローディング中のアニメーションをLottieで表示してみる
11. いいねボタンをLottieで作ってみる
12. まとめ
13. Motiを用いてコンポーネントを手軽にアニメーションさせる
14. Motiについて
15. Motiのインストール
16. ループするアニメーション
17. ToDoリストをアニメーションでリッチにしてみる
18. まとめ
19. Animated APIによる多彩なアニメーション
20. Animated APIについて
21. 簡単なフェードインアニメーション
22. Easingを試してみる
23. Interpolateを活用して入出力を定義する
24. Extrapolateの使い方
25. スクロールと連動したアニメーション
26. これから作るUIについて - Twitter風プロフィール画面
27. Twitter風プロフィール: ベースのコードの解説
28. Twitter風プロフィール: アバターの縮小と移動のアニメーション
29. Twitter風プロフィール: ヘッダーの移動アニメーション
30. Twitter風プロフィール: アバターとヘッダーの重なり具合のアニメーション
31. Twitter風プロフィール: ヘッダーにボカシをかける
32. これから作るUIについて - Tinder風UI
33. Tinder風UI: 土台のコードの解説
34. Tinder風UI: スワイプに応じて回転させるアニメーション
35. Tinder風UI: 離したときに元に戻るアニメーション
36. Tinder風UI: 離したときに画面外へ飛ばすアニメーション
37. まとめ
38. おわりに
39. おわりに

本コースでは、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アプリを開発していくことで、

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

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

プログラミング未経験者の方はもちろんのこと、プログラミングスキルを向上させたい方や、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. おわりに