React Native入門:ニュースアプリを作りながら覚えよう/Hooks対応 2020年版
4.5 (145 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
966 students enrolled

React Native入門:ニュースアプリを作りながら覚えよう/Hooks対応 2020年版

Webの開発経験はあるけどアプリの開発は初めてという方、エンジニアになりたての人にお薦めのReact Native入門講座。2019年に導入されたHooksの記法にも対応。React Native現場歴3年の講師が基礎から丁寧に解説します。
Bestseller
4.5 (145 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
966 students enrolled
Created by Takahiko Wada
Last updated 4/2020
Japanese
Current price: $56.99 Original price: $94.99 Discount: 40% off
23 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 7 hours on-demand video
  • 11 articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • React Native + Expoを用いたスピーディな開発手法を習得する
  • React Native + Expoを用いて、ニュース閲覧アプリを制作することでスマホアプリ開発の流れを理解できる
  • Hooksを用いたコンポーネントの書き方を理解する
  • コンポーネントによる再利用性の高いコードを実装する
  • APIを利用した実装を習得する
  • Reduxによる状態管理を習得し、大規模なアプリも実装できるようになる
  • 完成したアプリをApp StoreおよびGoogle Playに申請する
Course content
Expand all 98 lectures 07:05:36
+ UIを作ってみよう
12 lectures 44:26
本セクションの概要
01:18
これから作るアプリの完成イメージ
01:43
コンポーネントについて
07:45
箱を描いてみる
04:18
Styleを整える
02:35
レイアウトの区画整理
04:27
画像を表示する
02:57
テキストを表示する
05:01
レイアウトの調整
04:10
補足:flex boxについて
08:25
本セクションのまとめ
01:29
参考資料
00:18
+ コンポーネントを作ってみる
7 lectures 32:12
本セクションの概要
01:21
コンポーネントに切り出す
06:49
props経由でデータを渡す
06:54
ニュース記事の一覧表示
06:56
FlatListで一覧を表示する
09:02
本セクションのまとめ
00:45
参考資料
00:25
+ API経由でデータを取得してみよう
9 lectures 39:37
本セクションの概要
02:25
HooksのuseStateについて
06:05
HooksのuseEffectについて
06:48
News APIのアカウントを作る
06:42
Axiosを使ってAPIを実行する
09:12
【補足】ニュースの画像が表示されない場合
00:50
Function componentとClass componentについて
06:00
本セクションのまとめ
01:10
参考資料
00:24
+ 画面遷移を実装してみよう
8 lectures 31:56
本セクションの概要
00:53
React Navigation v5のインストール
02:46
StackNavigatorの利用
09:43
画面遷移を実装
07:50
ニュース記事を表示するためにWebviewを表示する
02:25
画面遷移時にパラメータを渡す
05:55
本セクションのまとめ
01:09
参考資料
01:15
+ Reduxを使ってクリップ機能を作ろう
16 lectures 01:18:34
本セクションの概要
01:41
Reduxについて
05:21
Reduxのインストール
00:54
Actionの実装
03:36
Reducerの実装
07:22
Storeの実装
06:35
デバッガーのインストール
04:45
ActionのDispatch
08:31
画面の下にタブを表示する
07:43
タブにアイコンを表示する
04:36
Reduxから状態を取得して画面に表示する
06:00
クリップ一覧から記事詳細への画面遷移
01:58
クリップボタンにアイコンを表示する
06:46
Reduxを永続化して端末に保存する
09:02
本セクションのまとめ
03:24
参考資料
00:20
+ アプリの仕上げ
6 lectures 20:42
本セクションの概要
00:45
スプラッシュスクリーン
03:56
アプリのアイコン
03:15
ローディング画面
11:33
本セクションのまとめ
00:45
参考資料
00:28
+ アプリをストアに公開しよう
11 lectures 30:21
本セクションの概要
01:06
Expoでアプリを配布する方法
05:13
社内や知人に向けて配布する
04:36
release-channelについて
02:31
iOSの申請用アプリをビルドする
07:18
iOSのipaファイルのアップロードとストア申請
02:44
Androidの申請用アプリをビルドする
02:43
Androidのapkファイルのアップロードとストア申請
01:07
本セクションのまとめ
01:55
参考資料
00:17
おわりの挨拶
00:51
Requirements
  • macOSが動作するMacが必要です(実機が無くても学習動画の視聴はできます)。
  • 本講座では、スマホアプリの開発を行います。実機が手元にあれば、開発結果を直接確認できるのでベストですが、各シュミレータで動作確認を行いますので、必須ではありません。
  • 詳しい開発環境については、レクチャー3で紹介していますので、受講前にチェックして下さい。
  • 制作したスマホアプリをAppStoreに申請する場合は、apple開発者登録が必要となります。
  • 本講座のハンズオンでは、Macを用いて解説を行います。WindowsOSへのサポートはございません。
  • 本講座では、JavaScriptの基本的な文法については解説しません。初学者向けのチュートリアル等に挑戦してから受講されることをおすすめします。
Description

~~2020年4月26日更新~~

【講座内容】

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


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

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

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


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


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

・コンポーネントの設計

・API通信

・Hooksの利用

・Reduxによる状態管理

・画面遷移

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


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



【この講座の対象者】

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

・エンジニア入門者

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



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

・JavaScriptの基本的な文法

・React Native熟練者向けの内容


【更新情報】

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の説明が漏れていたので修正しました

Who this course is for:
  • Webの開発経験はあるけどアプリの経験はない人
  • エンジニア入門者
  • React Nativeでの開発を経験してみたい人
  • リソースの共通化や工数削減を目的に、React Nativeを用いてクロスプラットフォーム開発に挑戦したい方 スマホアプリ開発の工程を体験したいエンジニア
  • 簡単にアプリ開発や検証が可能なExpoを用いたスマホアプリ開発に挑戦したい方
  • JavaScriptを用いた開発は得意だけど、スマホアプリ開発は未経験の方
  • React Nativeのチュートリアルまでやってみたので、これから本格的なアプリを作りたいエンジニア
  • 入門講座をやってみてReact Nativeの雰囲気は掴んだエンジニア