【動画で学習】UdemyのReact 人気/おすすめ講座【セールでお得】

こちらでは、UdemyのReact講座を、おすすめ、セール情報とともに紹介していきまっす。

Udemy講座の特徴

udemy

具体的な講座を見る前に、Udemyについてざっと整理しておきましょう。

Udemyは動画ベースの学習サービス、以下のような特徴があります。

Udemyの特徴

  • 買い切り型で継続コストがない
  • その上、内容更新あり、質問可能
  • スマホ対応、流し聴き学習も可能
  • 30日間返金が可能
  • セールで頻繁に80%以上割引

なんといっても、買い切り型なので購入後は継続コスト等が一切不要なのが安心。

その上で、講座の内容がアップデートされたり、質問も可能なので、買い切りなのに利用できるサポートが手厚いです。

講座の内容も10時間以上に登るものも多く、1本で基礎から応用まで学習可能

ユーザー評価や、動画プレビューあり、さらには30日間の返金保証もあるので、まず失敗しない購入が可能

購入時に絶対に抑えておきたいのがセール。毎回80~90%OFFの割引されます。

基本月1回は必ずセールが開催されているので、そこで購入するようにしましょう。また、新規ユーザーは1本目は大概セール価格で購入可能です。

 

UdemyのReact講座 人気ランキング(セール情報付き)

以下がUdemyで学習できるReactの最新の人気講座ランキング(日本語のもの)です。

セール価格情報も載せています。上述したとおりUdemyのセールは大きいので逃さずゲットしてください。

人気
Rank
学習コース評価
1
モダンJavaSciptの基礎から始める挫折しないためのReact入門
発売日 2020/08/27
受講者 2,142人
通常 4,200円
現在 1,500円
(4.7)
総評価数 534件
2
(4)
総評価数 1607件
3
(4.5)
総評価数 741件
4
(4.5)
総評価数 141件
5
React Native入門:ニュースアプリを作りながら覚えよう/Hooks対応版...
発売日 2019/04/27
受講者 2,419人
通常 11,400円
現在 1,500円
(4.5)
総評価数 380件
6
最速で学ぶFirebase + React Hooks (TypeScript)
発売日 2020/09/15
受講者 1,166人
無料講座
(4.4)
総評価数 121件
7
[基礎編]React Hooks + Django REST Framework API でフルスタックWeb開発...
発売日 2020/04/30
受講者 1,273人
通常 19,200円
現在 1,500円
(4.3)
総評価数 217件
8
Firebase + React Hooks(TypeScript)によるWebアプリ開発
発売日 2020/10/18
受講者 519人
通常 19,800円
現在 1,500円
(4.6)
総評価数 81件
9
2021年版 React Native, Firebase, Expo でアプリ開発をゼロから始めよう!...
発売日 2017/10/10
受講者 5,018人
通常 24,000円
現在 1,890円
(4.5)
総評価数 643件
10
Nextjs + Tailwind CSS + Django REST Framework で学ぶモダンReact開発
発売日 2020/12/23
受講者 302人
通常 24,000円
現在 1,500円
(4.6)
総評価数 45件
11
(4.4)
総評価数 88件
12
[COVID 19アプリ編] Reactで作るコロナウイルス Live ダッシュボード...
発売日 2020/07/03
受講者 658人
通常 19,800円
現在 1,500円
(4.2)
総評価数 99件
13
【はむ式】フロントエンドエンジニアのためのGraphQL with React 入門...
発売日 2018/06/06
受講者 1,957人
通常 24,000円
現在 1,630円
(4)
総評価数 226件
14
Reactソフトウェアテスト(Hooks+ReduxToolKit時代のモダンテスト手法)...
発売日 2020/08/07
受講者 593人
通常 19,800円
現在 1,500円
(4.5)
総評価数 67件
15
(4.2)
総評価数 178件
16
最短・最速で作る Youtube クローンアプリ React・React Hooks編
発売日 2020/05/21
受講者 951人
通常 19,800円
現在 2,080円
(4.4)
総評価数 158件
17
[Redux編] Redux Tool KitとReact HooksによるモダンReact フロントエンド開発...
発売日 2020/06/23
受講者 559人
通常 19,800円
現在 1,500円
(4.5)
総評価数 65件
18
[Instagramクローン編] React Hooks + Django Restframework
発売日 2020/07/28
受講者 420人
通常 19,800円
現在 1,500円
(4.6)
総評価数 41件
19
[JIRA編]React Hooks/TypeScript + Django REST APIで作るオリジナルJIRA
発売日 2020/09/09
受講者 366人
通常 19,800円
現在 1,500円
(4.5)
総評価数 37件
20
最短で学ぶReactとReduxの基礎から実践まで
発売日 2017/05/29
受講者 2,856人
通常 24,000円
現在 1,630円
(3.9)
総評価数 531件
21
(3.4)
総評価数 72件
22
最短・最速で学ぶ GraphQL Fullstack 実践入門 - Node & React編
発売日 2020/04/15
受講者 330人
通常 3,600円
現在 1,950円
(4.4)
総評価数 56件
23
GraphQL フルスタックWeb開発入門 (Django + React/Apollo Client)
発売日 2020/11/04
受講者 218人
通常 19,800円
現在 1,500円
(4.7)
総評価数 16件
24
[Youtube編] React Hooks + Django RestFramework API でフルスタックWeb
発売日 2020/05/31
受講者 367人
通常 19,800円
現在 1,500円
(4.4)
総評価数 32件
25
[SNS編] React Hooks + Django RestFramework API でフルスタックWeb開発
発売日 2020/05/23
受講者 418人
通常 24,000円
現在 1,500円
(4.5)
総評価数 42件
26
すぐできる!動かす React JS サンプル講座
発売日 2016/10/27
受講者 351人
通常 4,800円
現在 1,560円
(2.6)
総評価数 66件
27
React/Reduxで複雑なデータ構造を扱う実践的なアプリケーション開発...
発売日 2018/04/11
受講者 141人
通常 4,800円
現在 1,560円
(3.8)
総評価数 15件
28
(4.2)
総評価数 79件
29
React + Redux を使用したモダンフロントエンド開発
発売日 2018/03/05
受講者 871人
通常 9,600円
現在 9,600円
(4.2)
総評価数 273件
30
基礎から始めて実戦ですぐ使える!React+Redux入門講座
発売日 2018/05/18
受講者 356人
通常 7,200円
現在 1,690円
(4.1)
総評価数 55件
31
Web開発ソフトウェアテスト徹底攻略 (React Hooks/Redux + Django REST API)...
発売日 2020/11/17
受講者 140人
通常 24,000円
現在 1,500円
(4.7)
総評価数 9件
32
[テスト編] Nextjs + React-testing-libraryでモダンReactソフトウェアテスト...
発売日 2021/01/03
受講者 121人
通常 24,000円
現在 1,500円
(4.8)
総評価数 8件
33
GraphQL SNS機能開発 (React + Graphene-django)
発売日 2020/12/06
受講者 71人
通常 24,000円
現在 1,500円
(5)
総評価数 4件
34
【はむ式】ReactとFirebase とWebRTCで P2P ビデオ会議システムを開発しよう!...
発売日 2020/10/13
受講者 156人
通常 24,000円
現在 24,000円
(4.5)
総評価数 2件
35
[TensorFlow/React/Django]機械学習webアプリケーション作成入門
発売日 2021/01/14
受講者 6人
通常 19,800円
現在 1,500円
(0)
総評価数 0件
 

UdemyのReact 人気・おすすめの5講座

以下が今人気のおすすめの講座の詳細です。

Udemy講座では、1つのコースで基礎から応用まで幅広く学べるものが多く、コスパ高く学習可能。

自分にあったコースをセールでゲットして効率よく学習しましょう。

モダンJavaSciptの基礎から始める挫折しないためのReact入門

モダンJavaSciptの基礎から始める挫折しないためのReact入門
発売日 2020/08/27
(4.7)

6 total hours
Reactの習得に苦戦する理由は「JavaScript」への理解不足です。このコースではスムーズにReact開発のスタート地点に立てるように、モダンJavaScriptの動作の仕組みや概念、機能から解説します。

これからReactを勉強する全ての人におくるReact入門コース決定版!


Reactの勉強に苦戦する多くの人と話してきました。

そこで感じたのは苦戦する多くの人は学習の順序を間違えているということです。


JavaScriptへの理解なくしてReactの習得はなし得ません。

そこでJavaScript→Reactの理解の架け橋となる本コースを作成しました。


■本コースでは以下の流れで学習を進めます。

  1. モダンJavaScriptを取り巻く周辺知識や仕組みの概念を知る

    SPAとは?仮想DOMとは?パッケージマネージャとは?等

    React開発に関わる事柄について説明することでまず概念を理解し学習を進め易くします。

  2. React開発で使用するモダンJavaScriptの機能を知る

    ReactはJavaScriptの機能をふんだんに使って開発していきます。そのためまずは良く使うモダンなJavaScriptの機能を先に理解することで後でReactの学習に集中することができます。

  3. プレーンなJavaScriptのみでアプリケーションを開発する

    Reactを使用することでどういう恩恵があるか、従来との違いは何なのか?を知るためにまずはReactを使わずJavaScriptのみでアプリケーションを開発します。

    このステップを挟むことでよりReactへの理解が深まります

  4. Reactの基本やルールを知る

    ここからReact特有のルールや文法、機能についてフォーカスして学んでいきます。

  5. JavaScriptだけで作成したアプリケーションと同じものをReactで開発する

    学んできたReactを使用し実際にアプリケーションを開発することでより理解を深めます。

    実務ではどのような書き方をするか、抑えるべきポイントも合わせて説明していきますのでイメージが深まるかと思います。

    更にプレーンなJavaScriptで作成したものと同じものを作成するので、近代JavaScriptの転換を体感することができます。


■それ以外の本コースの特徴

  • 私自身、複数プロジェクトでReactを使用し仕事をしているエンジニアです(フリーランス→会社設立)

  • 学習には息抜きも必要なのでセクションの合間に私の経験やフロントエンド周りの雑談も含まれたりしています

  • コード入力時は画面を拡大する等、編集も工夫しているためスマホでもストレスなく閲覧できます

  • 収録音声にも気をつかっているのでイヤホン等で視聴しても不快ではないです(声の好みは分かりませんが...)



↓全て表示↑少なく表示
 
Users Voice
まさに自分はJavaScriptの知識不足で最初のReact学習につまずいた人でした。本講義の中でモダンJavaScriptの説明に触れていただいたことにより、理解がスムーズにできました(何がReactで何がJavaScriptなのかの切り分けができた)。次回の教材(後続?)も期待してます!! (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. はじめに
    • 講師自己紹介
    • コース全体像
    • なぜこのコースが必要なのか
    • このコースを受けたらできるようになること
  2. このコースで用いる環境について
    • CodeSandboxの紹介
    • CodeSandboxの機能説明
    • CodeSandboxでGitHubにリポジトリを作ってみよう
    • 雑談(情報処理の単位が取れずに留年しかけてました)
  3. ReactやVue等を使うために知っておきたいJavaScriptの基本
    • このセクションで伝えたいこと
    • JavaScript is 何?なぜオススメ?
    • DOMや仮想DOMってなんなんだ
    • npm/yarn等のパッケージマネージャーの意義を知る
    • ECMAScriptとは。近代JavaScriptの転換期について
    • モジュールバンドラーやトランスパイラの概念
    • SPAとは?従来のWebシステムとの違い
    • 雑談(フリーランスって一言に言っても...)
  4. モダンJavaScriptの機能に触れる
    • このセクションで取り組むこと
    • const、let等の変数宣言
    • テンプレート文字列 ``
    • アロー関数 =>
    • 分割代入 {}
    • デフォルト値 =
    • スプレッド構文 ...
    • mapやfilterを使った配列の処理
    • 三項演算子 ? :
    • 論理演算子の本当の意味を知ろう && ||
    • セクションまとめ
  5. 素のJavaScriptだけでTODOアプリを作成してみよう
    • 準備
    • HTMLで構造を作成
    • CSSでスタイリング
    • タスクの追加機能(テキスト)
    • タスクの追加機能(ボタン)
    • タスクの削除機能
    • タスクの完了機能
    • タスクの戻す機能
    • セクションまとめ
    • 雑談(コンポーネントって何だ??)
  6. Reactの基本を学ぶ
    • 準備
    • JSX記法のルールを知る
    • コンポーネントの使い方を知る
    • コンポーネントの補足
    • Reactでのイベントやstyleの扱い方を知る
    • Propsを知る
    • Stateを知る(useState)
    • 再レンダリングと副作用を知る(useEffect)
    • default exportとexport
    • 雑談(クラスコンポーネントと関数コンポーネント)
  7. React使ってTODOアプリを作成してみよう
    • 準備
    • JSXで構造を作成
    • CSSでスタイリング
    • Reactでの実装を意識したモックに変更
    • タスクの追加機能
    • タスクの削除機能
    • タスクの完了機能
    • タスクの戻す機能
    • カイゼン(コンポーネント化)
    • カイゼン(CSS-in-JS)
    • カイゼン(TODOの上限設定)
  8. さいごにとこれから
    • フロントエンドの大変さ、モチベーション
    • ボーナスレクチャー:さいごにとこれから
    

【はむ式】フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門

【はむ式】フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門
発売日 2018/01/12
(4)

7.5 total hours
RESTful APIサーバと連携する実践的なCRUDアプリケーション開発手法を学び、今後のフロントエンドWeb開発の標準になり得るReact・Reduxアプリケーション開発をマスターし、もう一段階上のJavsScriptエンジニアになろう

本コースでは、フロントエンドUser Interface開発のためJavaScriptのライブラとして多くの開発者に支持されているReactを題材にし、実際にコーディングを進めながらReactプログラミング技術を習得するという内容になっています。 また、よくReactとセットで用いられる状態管理のためのライブラリであるReduxについても学んで頂けるコースとなっています。

プログラミング習得のための最大の近道は、「とにかく書いて動かすこと!」というのが私の信念です。ReactReduxの習得の学習コストは高いと言われていますが、 とにかく、コードを書いて、その挙動を目で確認しながら、まるでゲームをしているかのごとく体得してもらうことが最も効率的だと私は考えており、このコースの内容もその信念に基づいて設計しています。

本コースの中では受講生の皆様に外部サーバと連携するアプリケーションを開発して頂きます。それはいわゆるCRUDアプリケーションで自在に外部のRESTful APIサーバと連携しながらデータを外部サーバに永続化できる実用的なアプリケーションで現実世界にもよく見かける形態の一つですので、実際の業務にも応用できる技術と言えます。

こんなアプリケーションの実装について興味を持たれた方は是非本コースをご受講ください。

また、何か問題が起きた場合もご安心ください。UdemyではQ&Aを通じて講師と共にその問題を解決しながらコースに取り組んで頂ける仕組みがあります。是非この仕組も十分に活用頂き本コースを通じて皆様の成長のために貢献できるよう頑張ります!

では、本コースでお会いできるのを楽しみにしております!


↓全て表示↑少なく表示
 
Users Voice
基礎からわかりやすく説明されているため実践に活用しやすかった (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. はじめに
    • プロモーショナルビデオ
    • 本コースの全ソースコードはこちら
  2. 開発環境構築編
    • レクチャーを始める前にお読みください
    • Node.jsのインストール
    • エディターの紹介
    • Yarnのインストール
    • GitHubのリポジトリ作成
    • create-react-appのインストール
    • 自分専用のboilerplateを作成しよう
  3. Reactアプリケーション基礎編
    • Reactの概要について
    • JSX
    • もっとJSX
    • トランスパイラー
    • webpack
    • Component
    • props
    • prop-types
    • State
  4. Reduxアプリケーション基礎編
    • Reduxイントロダクション
    • Action
    • Reducer
    • Store
    • connectでstateとactionsとの関連付けを行う
  5. React・Reduxアプリケーション実践編
    • イントロダクション
    • 登場人物 (Client、Static File Server、API Server)の紹介
    • React CRUDアプリケーションの仕様
    • ReactアプリケーションとAPIサーバ間のネットワーク上のデータの流れ - 全データ取得時
    • ReactアプリケーションとAPIサーバ間のネットワーク上のデータの流れ - 特定のデータ取得時、データ更新時
    • ReactアプリケーションとAPIサーバ間のネットワーク上のデータの流れ - データ作成時、データ削除時
    • APIサーバの仕様をcurlで確認する
    • アクションでイベント一覧を取得する
    • イベント一覧を画面に表示する
    • イベント新規作成画面への画面遷移を実装する
    • イベント新規作成画面のコンポーネントをreduxFormでdecorateする
    • APIサーバにイベント新規作成要求を送信する
    • 送信ボタンのdisabled状態を調整する
    • Redux DevToolsを導入しデバッグし易い環境を整える
    • イベント更新画面用のコンポーネントを作成する
    • イベント削除機能を実装する
    • イベントの詳細情報を更新画面に表示する
    • イベント更新機能を実装する
    • Material-UI概説
    • 【注意喚起】material-uiのインストール時、動画内で使用しているバージョンと同じものを必ず指定してください
    • Material-UIの適用(一覧画面)
    • Material-UIの適用(新規作成画面、編集画面)
  6. レシピ編
    • React v16.3 Context API
  7. Q&A編
    • 質問 #5994878 - redux-formのenableReinitializeについて
  8. おわりに
    • おわりのご挨拶
    

【はむ式】React Hooks 入門 - HooksとReduxを組み合わせて最新のフロントエンド状態管理手法を習得

【はむ式】React Hooks 入門 - HooksとReduxを組み合わせて最新のフロントエンド状態管理手法を習得
発売日 2019/04/19
(4.5)

9 total hours
Vue.js Firebase Docker Gatsby などを抑え、なんと受講生の37.2%が次に学びたいと注目度の高い React Hooks 。複雑な状態管理をシンプルに且つ美しく実装するためのフロントエンド開発手法を身につけよう!

こんにちは!Udemyのプログラミングおじさん、はむです。

本コースでは、React Hooksについて学びます。

導入方法ももちろんですし、実践的な使い方について、手を動かしながら学習します。僕のコースは基本パワーポイントとかでで概要とか概念の概略の説明などは一切しません。というのも、パワポの資料作成とそれによるプレゼンテーションは費用対効果が低いんですよね、なので、机上の理論よりも、簡単に口頭で概要をお伝えして、その後すぐ、エディターを開いて手を動かして目で動作を確認するというスタイルで進めていきます。僕に言わせると、プログラミングは、スポーツをやっているような感覚に近いです。まぁとにかくですね、手をガンガン動かしていくんで、楽しんでいきましょう!ということですね。

他にも、React Hooksとの今後の付き合い方について学びます。これはかなり抽象的に書いていますけれども、要するに、 Hooksを使うと、今までのクラスコンポーネントにあまり依存しないコンポーネントを実装することになります。何故かと言うと、今まではファンクショナルコンポーネントとクラスコンポーネントの2つがあったわけなんですけれどもその2つの違いの1つに、状態を持たせるかどうかというのがありました。Hooksが出てからはですね、今までのファンクショナルコンポーネントというのはファンクションコンポーネントという名前に変わりました。これ、名前が変わっただけじゃなくて何が起きたのかと言うと、状態がもてるようになったんですね。ということはどういうことかというと、ファンクションコンポーネントとクラスコンポーネントとの実質的な違いというのがなくなってきたんですよね。なので、コンポーネントを実装しょうとしたときに、どっちのコンポーネントで実装しようかと考えてきたと思いますけれども、今後は、hooksによって機能拡張がなされたことで、ファンクションコンポーネントを書く機会が増えると思います。本コースでもクラスコンポーネントは一切実装しません。クラスコンポーネントに依存しなくても状態を持つアプリケーションは十分に実装できるということを本コースで学んでいただければいいかなと思います。

メンテナンス性についても触れていきます。これは、Hooksだからということではないんですけれども、僕のコーディングスタイルは、動いたら終わり!というようなコーディンすは一切しません。みなさんが、コース終了後に、もっと大規模なアプリケーション開発をする際にきっと役に立つであろうコンポーネントの細分化だったり、定数の定義だったり、とにかく、性質の異なるものは、モジュールという単位で分割してコードの見通しを良くすると言ったプログラマに備わっている慣習について意識しながらコーディングを進めていきますのでまだ、現場でコードを書いたことがない!という方には是非この辺りのコーディングの慣習について学んで頂けたら良いんじゃないかなと思います。

最後に、これはまぁおまけみたいなものなんですが、Bootstrapですね。本コースはHooksのコースなのでスタイリングに時間をかけるつもりはないんですが、とはいえ、見た目も最低限は必要かなということでBootstrapを採用しています。  ReactアプリケーションへのBootstrapの適用についても解説していますので興味のある方はぜひ一緒にやっていきましょう。

次にソースコードについてですが、本コースで動画の中で実装したソースコードは、GitHubに完全公開していますので、自分の書いた内容と照合したいときなどに是非お使いいただければとおもいます。

もし、コースを進めていて、動画の通りにやってみたけれども、うまく行かない!という時には、Q&Aのページがありますので、遠慮なくご質問ください。僕の肌感では、どうも、質問をするのが恥ずかしいとか、周りに質問の内容をみられるのがいやだとか、あるいは、初歩的な質問になるから恐縮してしまうといったような受講生の方が非常に多いんじゃないかと感じています。僕のプロフィールページにも、書いていますが、「聞くは一時の恥聞かぬは一生の恥」ということですね。とにかく、遠慮しないでガンガンぶつかってきてください!そもそも、知らないことを学ぶためにコースを受講しているわけですし、受講料をお支払い頂いているわけですから、ちょっと遠慮するところが間違っていますよ!と僕は言いたいです。というわけで、Q&A、どんどん活用してください。


↓全て表示↑少なく表示
 
Users Voice
React・Reduxアプリケーション開発入門のReactから受講し、今回、React Hooks入門を受講しました。 Javascriptの知識がそれなりに必要だということを知り、Javascriptの知識を得てから受けた方が良いと感じました。 とてもわかりやすい内容で、 次は、Firebase未経験者のためのReactのアプリケーションにチャレンジします。 (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. はじめに
    • 講師自己紹介、React Hooksの紹介、なぜこのタイミングでコースリリースとなったのか?
    • 本コースの概要のご説明
    • GitHubリポジトリのURL
    • 本コースで実装するソースコードを管理するGitHubリポジトリの紹介
  2. 開発準備編
    • create-react-appでReactアプリケーションの雛形を作成しよう[更新版]
  3. 入門編
    • はじめてのReact Hooks ということで useState でファンクションコンポーネントに状態を持たせよう
    • 複数の状態を管理しよう
    • 複数の状態を1つのオブジェクトに統合しよう
    • useEffect でコールバックを実装しよう
    • 状態遷移とは何かを改めて考えてみよう
    • Bootstrapを導入しよう
    • イベントの状態遷移を管理するreducerを作成しよう
    • useReducerでreducerを実際に使ってみよう
    • イベント一覧に作成したイベントを表示させよう
    • イベント一括削除処理を実装しよう
    • 肥大化したコンポーネントを役割毎に分割しよう
    • アクションのタイプは定数がお好き
    • Prop Drilling問題とそれを解消するための手段の紹介
    • はじめてのReact Context
    • Providerのセットアップをしよう
    • Prop Drilling問題をやっつけよう
  4. 実践編
    • より複雑な状態を管理しよう
    • やっぱりreduxをインストールしよう
    • イベント用のreducerのリファクタリングをしよう
    • 操作ログ用のreducerを作成しよう
    • 正規化された時間を作ろう
    • 操作ログを保存しよう
    • 全ての操作ログを削除しよう
    • イベント削除時の操作ログも残そう
    • 操作ログ一覧を表示させよう
    • localStorageの各種メソッドのおさらいをしよう
    • localStorageで状態の永続化をしよう
    

【はむ式】Firebase未経験者のためのReactで作るチャットアプリ開発入門!最速最短でゴール到達!

【はむ式】Firebase未経験者のためのReactで作るチャットアプリ開発入門!最速最短でゴール到達!
発売日 2020/10/03
(4.5)

8 total hours
アウトプット重視の本格的ハンズオン!元シリコンバレーの現役ウェブ系エンジニアが脱React入門者のためにコーディングプロセスを丁寧に解説!Firebase未経験者の方は必見のコースです!いざ始めたら止まらない、あっという間の8時間コース!

【コースの概要】

本コースはタイトルの通り、Firebase未経験者のためのReactのアプリケーションを開発できるコースとなっています。僕のコースではハンズオン形式でコーディングの流れを体験することができます。


【コース購入をご検討されている方へ】

冒頭のセクション『本コースで作成するアプリケーションを動かしてみよう!!』を無料公開しています。このセクションでは本コースで作成するアプリケーションを実際にご自身で動かし、本コースで達成するゴールを確認して頂くことができます。また、GitHubでソースコードを無料公開していますので、是非手にとって見て遊んでみてください。そして、もしこのアプリケーションの作り方に興味を持って頂けたら、続きのセクションとなる『Reactアプリケーションを開発しよう!!』をご受講頂ければより一層ご満足頂けると思っています。


【注意事項】

本コースでは、FirebaseのRealtime Databaseを使用しますが、セキュリティールールについてはコースの範疇外とさせて頂きますので、予めご了承ください。

本コースは、Windowsは対象外です。Windowsの方はVirtualBoxまたはDockerによる仮想環境(Linux)を事前にご用意ください。


↓全て表示↑少なく表示
 
Users Voice
本講座、大変わかりやすく最初から最後まで楽しみながら学習することができました。 はむさんの他講座も受けてみようと思います。 これからもお世話になります..! (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. まず、本コースで作成するアプリケーションを動かしてみよう!!
    • はじめに
    • 本コースで実装したソースコードを取得しよう
    • ちょっと一息
    • Firebase でプロジェクトを作成しよう
    • Firebase Realtime Databaseでデータベースを作成しよう
    • Firebase のアプリを追加しよう
    • アプリケーションをセットアップしよう
    • お疲れさまでした!
  2. Reactでチャットアプリケーションを開発しよう!!
    • デモアプリを期間限定で公開します。
    • ReactスケルトンアプリのgitリポジトリのURLについて
    • アプリケーションを新規作成しよう
    • ちょっと一息
    • サインインページを作ろう
    • サインインページの見た目をデモアプリに合わせよう
    • Reactアプリでニックネームを管理しよう
    • はじめるボタンのクリックでニックネームを登録する(前半)
    • はじめるボタンのクリックでニックネームを登録する(後半)
    • エンターキーでもニックネームを登録させる
    • 日本語のニックネームも登録できるようにする
    • アプリケーションの設定ファイルを作ろう
    • CSSグリッドレイアウトの基本的概念
    • CSSグリッドレイアウトを適用する
    • グリッドレイアウトの適用の続き
    • 入力用のコンポーネントにグリッドを適用する
    • アバター画像を生成する
    • メッセージを入力するフィールドのコンポーネントを作ろう
    • Firebaseの新規プロジェクトを作成しよう
    • アプリを作成する
    • Gridのitemを指定しwarningsを取り除く
    • ハードコードしている環境変数を取り除く
    • 送信ボタンの実装を行う
    • フォーカスを適用する
    • メッセージ一覧を取得しよう
    • メッセージ一覧を表示しよう
    • 新規メッセージをいい感じに表示させる
    • アプリケーションをビルドする
    • Firebase Hosting でアプリをディプロイする
    • Deploy用のタスクを登録する
    • .env.localを生成するスクリプトを作成する
 
Preview Video
   

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

React Native入門:ニュースアプリを作りながら覚えよう/Hooks対応版
発売日 2019/04/27
(4.5)

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

~~2020年10月20日更新~~

【講座内容】

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


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

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

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


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


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

・コンポーネントの設計

・API通信

・Hooksの利用

・Reduxによる状態管理

・画面遷移

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


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



【この講座の対象者】

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

・エンジニア入門者

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



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

・JavaScriptの基本的な文法

・React Native熟練者向けの内容


【更新情報】

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


↓全て表示↑少なく表示
 
Users Voice
写経しつつ進めている際、途中バグが発生すると結構わかりづらいエラーが多い印象です。編集した箇所とは関係のないところでエラーになりがちのため、もしわからなくなったら、とりあえずexpo再起動、再度巻き戻って一字一句写経をしにいく 、それでもダメなら配布していただいているソースを丸コピして動いたら差分を調べる...といった具合で進めました。 (もちろん、わかる範囲では自分でバグフィックスしたほうがいいと思います) 内容はexpoを活用したアプリ開発全般を学ぶことができ、よかったです! また、機能実装をする際も、代替オリジナルのリファレンスを元に解説してくれているので、今回学ばなかった機能を学ぶ際も理解が楽になりそうな点も大きいです! (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. はじめに
    • はじめに
    • 講師の自己紹介
    • ソースコード
  2. 環境構築してさっそく作ってみよう
    • このセクションの概要
    • Expoのインストール
    • シミュレーターで動かす
    • スマホ実機で動かす
    • コードを変更して確認する
    • Prettierでコードを自動整形する
    • まとめ
    • 参考資料
    • 環境構築のトラブルシュート
  3. React Nativeの概要と使い所について
    • このセクションの概要
    • React Nativeの概要
    • Expoのメリット・デメリット
    • Expoで開発するときに気をつけること
    • 本セクションのまとめ
  4. UIを作ってみよう
    • 本セクションの概要
    • これから作るアプリの完成イメージ
    • コンポーネントについて
    • 箱を描いてみる
    • Styleを整える
    • レイアウトの区画整理
    • 画像を表示する
    • テキストを表示する
    • レイアウトの調整
    • 補足:flex boxについて
    • 本セクションのまとめ
    • 参考資料
  5. コンポーネントを作ってみる
    • 本セクションの概要
    • コンポーネントに切り出す
    • props経由でデータを渡す
    • ニュース記事の一覧表示
    • FlatListで一覧を表示する
    • 本セクションのまとめ
    • 参考資料
  6. API経由でデータを取得してみよう
    • 本セクションの概要
    • HooksのuseStateについて
    • HooksのuseEffectについて
    • News APIのアカウントを作る
    • Axiosを使ってAPIを実行する
    • 【補足】ニュースの画像が表示されない場合
    • Function componentとClass componentについて
    • 本セクションのまとめ
    • 参考資料
  7. 画面遷移を実装してみよう
    • 本セクションの概要
    • React Navigation v5のインストール
    • StackNavigatorの利用
    • 画面遷移を実装
    • ニュース記事を表示するためにWebviewを表示する
    • 画面遷移時にパラメータを渡す
    • 本セクションのまとめ
    • 参考資料
  8. Reduxを使ってクリップ機能を作ろう
    • 本セクションの概要
    • Reduxについて
    • Reduxのインストール
    • Actionの実装
    • Reducerの実装
    • Storeの実装
    • デバッガーのインストール
    • ActionのDispatch
    • 画面の下にタブを表示する
    • タブにアイコンを表示する
    • Reduxから状態を取得して画面に表示する
    • クリップ一覧から記事詳細への画面遷移
    • クリップボタンにアイコンを表示する
    • Reduxを永続化して端末に保存する
    • 本セクションのまとめ
    • 参考資料
  9. アプリの仕上げ
    • 本セクションの概要
    • スプラッシュスクリーン
    • アプリのアイコン
    • ローディング画面
    • 本セクションのまとめ
    • 参考資料
  10. アプリをストアに公開しよう
    • 本セクションの概要
    • Expoでアプリを配布する方法
    • 社内や知人に向けて配布する
    • release-channelについて
    • iOSの申請用アプリをビルドする
    • iOSのipaファイルのアップロードとストア申請
    • Androidの申請用アプリをビルドする
    • Androidのapkファイルのアップロードとストア申請
    • 本セクションのまとめ
    • 参考資料
    • おわりの挨拶
  11. ボーナスレクチャー
    • Expo SDKのバージョンアップ
    • Functionコンポーネントの色々な書き方
    • パフォーマンス最適化
    

Udemyで無料で学べるReact講座一覧

以下の講座は無料で学習が可能。

無料コースでは、質問ができない、学習した証の修了証書が発行されない、といった違いがありますが、動画コンテンツはすべて利用可能。

有料講座ほどの内容の幅はないですが、動画学習の取っ掛かりとしてまずこちらを試してみるのもおすすめです。

最速で学ぶFirebase + React Hooks (TypeScript)

最速で学ぶFirebase + React Hooks (TypeScript)
発売日 2020/09/15
(4.4)

1.5 total hours
FirebaseのCloud Firestore,Authentication,Hosting機能とReact Hooks/TypeScriptを使ってToDoアプリのハンズオン

本コースでは、はじめてWebアプリケーションを勉強される方向けに、簡単にバックエンドの機能を利用できるFirebaseを使っていきます。Firebaseによるバックエンド、Reactによるフロントエンドとの連携、ディプロイの流れを通じて小さなWebアプリを公開していきます。


*本コースでは、TypeScriptを使用するので無料コースの"最速で学ぶTypeScript"を事前に受講しておいてください。

*React Hooksを徹底理解したい方は、"[基礎編]React Hooks + Django REST Framework API でフルスタックWeb開発"コースがおすすめです。


Firebaseのデータベース(Cloud Firestore)、認証機能を使って簡単なToDoアプリをハンズオンで作成します。

フロントエンドは、React Hooks/TypeScript/Material UIを使っていきます。


Firebaseは、Nativeアプリ(iOS, Android)開発のバックエンドとして採用されることが多く、近年のクロスプラットフォームフレームワーク(Flutterなど)とも非常に相性が良いです。NativeアプリとWebアプリ(React)でデータベースを共有したい場合やFirebaseのリッチな認証機能をReactに取り入れたいケースにFirebaseとReactを連携させるスキルが必要になります。本コースでは、ToDoアプリを通じて基礎的な連携方法について学んでいきます。



↓全て表示↑少なく表示
 
Users Voice
コースコンテンツも素晴らしいが、コードを単位ごとにコピペをして説明に重点をおくスタイルが非常に良かった。海外でも取り入れられている動画学習の効率的なスタイルのようで、こういった最新のテクニックをいち早く採用している講師がすごいと思った。逆にこういった新しいトレンドに柔軟に対応できないとWeb系エンジニアとして生き残っていくのは難しいと感じた。 (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. はじめに
    • はじめに
    • TypeScript無料コース
    • コースに必要なツールのインストール
    • 本コースのSource code
  2. ToDo アプリのハンズオン (Firebase + React Hooks/TypeScript)
    • Reactプロジェクト作成
    • vs-icons 設定
    • Firebaseのアカウント
    • databaseURL
    • [注意点] firebase import文
    • FirebaseとReactの連携
    • Firebaseデータベース
    • FirebaseのデータをReactでレンダリング
    • タスク作成機能
    • TaskItemコンポーネント
    • CRUD
    • CSS
    • React-Router-DOM
    • Firebase認証機能(Login)
    • Firebase認証機能(Log out)
    • Deploy
  3. 更に学びたい人向け
    • ボーナスレクチャー
 
Preview Video
   

最短・最速で学ぶ Firebase Hosting + React Todoアプリ実装編 (React Hooks)

最短・最速で学ぶ Firebase Hosting + React Todoアプリ実装編 (React Hooks)
発売日 2020/02/18
(3.4)

1 total hour
話題のFirebaseを使ってWebアプリケーションを公開しよう & Todoリスト実装 with (React, React Hooks, ContextAPI, Function Component)


News: React Hooks + ContextAPIを使ったグローバルステート管理のレクチャーを追加しました。

今回のコースでは、Firebaseを使ってReactアプリケーションをデプロイし

公開することをゴールとしています。

そして、Firebaseホスティングについて学んだ後、

実際に、最新のReact開発手法である functionコンポーネントとReact Hooks + ContextAPIを使って
Todoリストを作成・公開します。
本講義では、ローカルステートを利用した開発方法を学んだ後、React16.8より導入されたuseContextとContextAPIを使用してRedux無しでのグローバルステート管理についても学んでいきます。

このコースを受講後には、バックエンドやインフラの知識がなくても

Reactで作成したwebサイトやwebアプリケーションを10分以内で公開できるようになります。

Firebaseとはgoogleが提供するBaaSサービスになります。

このBaaSとはBackend as a serviceの略称で

バックエンドの機能を提供してくれるサービスになります。

例えば、Facebookやgoogleでの認証処理であったり、

チャットアプリのようにリアルタイムでのデータのやり取りなど

様々なサービスを提供してくれています。

とても便利なサービスなので一緒に学習し活用していきましょう!



↓全て表示↑少なく表示
 
Users Voice
「Firebaseを使って」とあるが、Webアプリのデプロイ先としてFirebase Hostingを利用しているのみで、その他の機能は使わないため、「Firebase Hostingを使って」が正しい。Reactのチュートリアルと思えばわかりやすく、良い。 (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. はじめに
    • はじめに
  2. Firebase Hostingを学ぶ
    • 第2回 NodeJSのインストール
    • 第3回 Reactアプリの作成
    • 第4回 FIrebaseへデプロイ
  3. Todoリストの作成
    • 第5回 Todoリスト概要
    • 第6回 Bootstrapのインストール
    • 第7回 Formの作成
    • 第8回 リスト表示 + 削除ボタンの追加
    • 第9回 完了・未完了 変更処理の追加
    • 第10回 Firebaseへデプロイ
  4. グローバルステート管理
    • 第11回 Todoリスト コンポーネント化
    • 第12回 ContextAPIを使ったグローバルステート管理
        

React Nativeの講座 2つ

ReactはWebフロントエンドだけでなく、スマホネイティブアプリ開発向けのReact Nativeとしても展開されていますね。

Android、iOSアプリを共通コードで開発可能で、効率的なマルチプラットフォームアプリ開発として最近注目度も上がっています。

以下がReact Nativeの講座の詳細です。

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

2021年版 React Native, Firebase, Expo でアプリ開発をゼロから始めよう!
発売日 2017/10/10
(4.5)

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

<2021年1月1日 ★ リニューアルリリース!>
\最新バージョン対応・収録時間も大幅拡張/

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時間強となっておりますますが、リニューアル前後の動画が含まれていますことを予めご了承下さい。


↓全て表示↑少なく表示
 
Users Voice
2021年版を最後まで受講しましたが初心者には本当にいい内容でした。 Reactの基本の書き方は知っていましたが、それ以外のexpoの使い方、AppStore等に配信するまでの流れを学べる部分が特に良かったです。 また、ReactNative・Firebase・Expoを使った開発は勤めている会社でも使っている技術なのでとても参考になりました。 (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. イントロダクション
    • このコースを修了したら作れるアプリ
    • アプリ開発の6の工程
    • リニューアルについて
  2. 1. プランニング
    • コンセプトとワイヤーフレーム
  3. 2. UIデザイン
    • Figmaをインストール
    • Figmaの基本
    • ヘッダーのUIデザイン
    • メモ一覧のUIデザイン
    • コンポーネントでデザイン作業を効率化する
    • プロトタイプを作成する
    • ボタンのUIデザイン
    • UIデザインのまとめ
  4. 3. マークアップの練習
    • VSCode のインストール
    • まずはHTMLで構造化を学ぶ
    • マークアップを始める
    • メモ一覧のマークアップ練習
  5. 4. スタイリングの練習
    • スタイルシートの基本
    • HTML要素をスタイリングする
    • 複雑なスタイリング
    • ボタンのスタイリング
  6. 5. プログラミングの練習
    • プログラミングの基本
    • 関数の基本
    • 演算子の基本
    • 条件分岐
    • 繰り返し処理
    • 練習
  7. Git と Github
    • GitとGithubのメリット
    • GitのインストールとGithubのアカウント作成
    • Windows / TerminalとGitのインストール
    • ターミナルでの操作
    • Gitの初期化
    • Gitの設定を変更する
    • Gitで変更履歴を追加してみる
    • SSH Key に関する注意事項
    • SSHを使ったGithubとの連携
    • SSHパスフレーズを省略せずにGithubと連携する
    • Windows / Gitの初初期化からGithubとの連携まで
    • テキスト版教材
  8. アプリ開発の環境構築
    • Expoとは
    • M1 Mac をお使いの方へ
    • Node.js のインストール
    • Expo のインストール
    • Xcode のインストール
    • Android Studio のインストール
  9. React Native アプリ開発の基本
    • Expo プロジェクトの新規作成
    • Expo でアプリを共有する
    • Expo の基本的なファイル構成
    • Git でファイルの変更履歴を追跡
    • ESLint のインストール
    • コンポーネントの基本
    • コンポーネントを作成する
    • React Props の仕組み
    • props で値を受け渡す
    • コンポーネントのスタイルを上書きする
  10. アプリ開発・構造化とスタイリング
    • メモの一覧をマークアップ
    • ヘッダー(AppBar)のスタイリング
    • メモのリストアイテムをスタイリング
    • ボタンのスタイリング
    • コードをコンポーネントとして抽出する
    • コードをスクリーンとして抽出する
    • メモの詳細画面をマークアップ
    • メモの詳細画面をスタイリング
    • アイコンを表示する
    • いろいろなアイコンを表示する
    • カスタムアイコンを作成する
    • メモの編集画面の構造化とスタイリング
    • KeyboardAvoidingView でテキスト領域を調整
    • メモの作成画面を作成する
    • KeyboardAvoidingView のバグ
    • ログイン画面のマークアップ
    • ログイン画面のスタイリング
    • サインアップ画面を作成する
    • ユーザーのアクションを受け取る
  11. アプリ開発・ナビゲーションの実装
    • React Navigation をインストール
    • ナビゲーションを導入して画面をつなぐ
    • すべてのスクリーンを登録する
    • ボタンをタップして画面を移動する
    • 履歴をリセットしながら画面を移動する
    • iOS と Android のアニメーションを統一する
    • React Hooks
    • useState を使って状態を保存する
    • TextInput のオプション
  12. アプリ開発・機能の実装
    • Firebase を始める
    • 会員登録を実装する
    • ログインを実装する
    • ログイン状態を監視する
    • ログアウトを実装する
    • データベースにデータを保存する
    • ユーザーごとにメモを保存する
    • データベースからデータを取得する
    • データをメモの一覧として表示する
    • 効率的なリストのレンダリング
    • メモの詳細画面でデータを取得する
    • メモの詳細画面でデータを監視する
    • メモの編集画面を実装する
    • メモが0件の場合のUX
    • ローディング状態の表示
    • ローディングコンポーネントでUX改善
    • メモの削除を実装する
    • エラーメッセージを翻訳する
    • Firestore のルール設定でデータ保護
    • ESLint のエラーを修正
    • リリース前の細かな調整
  13. 6. リリース
    • 画像の準備とビルド設定
    • iOS アプリをビルド
    • Apple Store の設定
    • Android アプリをビルド
    • <練習> iOS アプリのリジェクト
  14. ーーー 2020年以前の収録 ーーー
    • リニューアル前のレクチャーです
  15. <2020>はじめに
    • 講座の進め方
  16. <2020>スケッチ
    • まずは手描きでスケッチ
    • Sketchとプラグインのインストール
    • Sketch作成(ログイン / ユーザー登録画面)
    • Sketch作成(メモリスト)
  17. <2020>構造化の基本
    • エディタのインストール
    • HTMLの基本とChromeを使った確認方法
    • Sketchを見ながらメモリストを構造化する
  18. <2020>スタイリングの基本
    • 概要とメモリストのCSS(ヘッダー)
    • メモリストのCSS(リストアイテム)
    • メモリストのCSS(追加ボタン)
  19. <2020>プログラミングの基本
    • 変数と値の種類
    • 関数と繰り返し処理
    • JavascriptでHTMLを変更してみる
    • ボタンにイベントを設定する
    • 条件分岐
    • Javascriptの基本をおさらい
  20. <2020>GitとGithubの基本
    • Gitのインストール
    • 初期化と初めてのコミット
    • Githubでのレポジトリ作成と鍵の作成
    • リモートレポジトリへのpush
  21. <2020>ReactNativeの開発環境を整える
    • Node JSのバージョン
    • Node JSのインストール
    • Expo のインストール
    • Expo コマンドについての注意点
    • Xcode と iPhoneシュミレータのインストール
    • Android Studio のインストール
    • 環境変数の設定に関する注意点
    • 環境変数の設定 1
    • 環境変数の設定 2
    • Android エミュレータのインストール
    • Android エミュレータのトラブルシューティング
  22. <2020>Expo の使い方 / プロジェクトの構成とエディタの設定
    • Expoの制限
    • Expo で React Native のプロジェクトを新規に作成する
    • iOSシュミレータが立ち上がらない場合
    • iOS と Android で React Native を立ち上げる
    • Expo / React Native のプロジェクト構成
    • npm script で Android エミュレータを同時に立ち上げる
    • iPhoneの実機でアプリを立ち上げる
    • 実機を使ったテストの注意点と --offline オプション
    • Expo のオプションと便利機能
    • 新規プロジェクトをGithubで管理する
    • ESLint 7.3 のバグ
    • Eslintで構文チェック
    • Eslintの設定を変更する
    • このアプリのGithubレポジトリについて
  23. <2020>ReactNativeでの構造化とスタイリング
    • ReactNativeを使った構造化とスタイリングの表現方法
    • 小さな構造体(コンポーネント)を作成する
    • propsを使ってコンポーネントをカスタマイズする
    • 画面全体の構造化とAppbarのスタイリング
    • MemoListのスタイリング
    • MemoAddButtonのスタイリング
  24. <2020>再利用可能なコンポーネントを抽出する
    • MemoList / Appbar / CircleButtonの切り出し
    • 再利用可能なコンポーネントを使って画面を作成する
  25. <2020>各画面の構造化とスタイリング
    • メモの詳細画面の構造化
    • MemoDetailScreenのスタイリング
    • CircleButtonのスタイリングを上書きする
    • アイコンの実装方法について
    • カスタムアイコンフォントのインストールと設定
    • ボタンにアイコンを適用してみる
    • @expo/vector-icons のバージョン
    • アイコンフォントのより良い使い方
    • CircleButton についての注意点
    • メモの編集画面の構造化とスタイリング
    • テキスト入力のためのコンポーネントを配置する
    • ログイン画面の構造化とスタイリング
    

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

React Native入門:ニュースアプリを作りながら覚えよう/Hooks対応版
発売日 2019/04/27
(4.5)

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

~~2020年10月20日更新~~

【講座内容】

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


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

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

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


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


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

・コンポーネントの設計

・API通信

・Hooksの利用

・Reduxによる状態管理

・画面遷移

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


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



【この講座の対象者】

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

・エンジニア入門者

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



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

・JavaScriptの基本的な文法

・React Native熟練者向けの内容


【更新情報】

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


↓全て表示↑少なく表示
 
Users Voice
写経しつつ進めている際、途中バグが発生すると結構わかりづらいエラーが多い印象です。編集した箇所とは関係のないところでエラーになりがちのため、もしわからなくなったら、とりあえずexpo再起動、再度巻き戻って一字一句写経をしにいく 、それでもダメなら配布していただいているソースを丸コピして動いたら差分を調べる...といった具合で進めました。 (もちろん、わかる範囲では自分でバグフィックスしたほうがいいと思います) 内容はexpoを活用したアプリ開発全般を学ぶことができ、よかったです! また、機能実装をする際も、代替オリジナルのリファレンスを元に解説してくれているので、今回学ばなかった機能を学ぶ際も理解が楽になりそうな点も大きいです! (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. はじめに
    • はじめに
    • 講師の自己紹介
    • ソースコード
  2. 環境構築してさっそく作ってみよう
    • このセクションの概要
    • Expoのインストール
    • シミュレーターで動かす
    • スマホ実機で動かす
    • コードを変更して確認する
    • Prettierでコードを自動整形する
    • まとめ
    • 参考資料
    • 環境構築のトラブルシュート
  3. React Nativeの概要と使い所について
    • このセクションの概要
    • React Nativeの概要
    • Expoのメリット・デメリット
    • Expoで開発するときに気をつけること
    • 本セクションのまとめ
  4. UIを作ってみよう
    • 本セクションの概要
    • これから作るアプリの完成イメージ
    • コンポーネントについて
    • 箱を描いてみる
    • Styleを整える
    • レイアウトの区画整理
    • 画像を表示する
    • テキストを表示する
    • レイアウトの調整
    • 補足:flex boxについて
    • 本セクションのまとめ
    • 参考資料
  5. コンポーネントを作ってみる
    • 本セクションの概要
    • コンポーネントに切り出す
    • props経由でデータを渡す
    • ニュース記事の一覧表示
    • FlatListで一覧を表示する
    • 本セクションのまとめ
    • 参考資料
  6. API経由でデータを取得してみよう
    • 本セクションの概要
    • HooksのuseStateについて
    • HooksのuseEffectについて
    • News APIのアカウントを作る
    • Axiosを使ってAPIを実行する
    • 【補足】ニュースの画像が表示されない場合
    • Function componentとClass componentについて
    • 本セクションのまとめ
    • 参考資料
  7. 画面遷移を実装してみよう
    • 本セクションの概要
    • React Navigation v5のインストール
    • StackNavigatorの利用
    • 画面遷移を実装
    • ニュース記事を表示するためにWebviewを表示する
    • 画面遷移時にパラメータを渡す
    • 本セクションのまとめ
    • 参考資料
  8. Reduxを使ってクリップ機能を作ろう
    • 本セクションの概要
    • Reduxについて
    • Reduxのインストール
    • Actionの実装
    • Reducerの実装
    • Storeの実装
    • デバッガーのインストール
    • ActionのDispatch
    • 画面の下にタブを表示する
    • タブにアイコンを表示する
    • Reduxから状態を取得して画面に表示する
    • クリップ一覧から記事詳細への画面遷移
    • クリップボタンにアイコンを表示する
    • Reduxを永続化して端末に保存する
    • 本セクションのまとめ
    • 参考資料
  9. アプリの仕上げ
    • 本セクションの概要
    • スプラッシュスクリーン
    • アプリのアイコン
    • ローディング画面
    • 本セクションのまとめ
    • 参考資料
  10. アプリをストアに公開しよう
    • 本セクションの概要
    • Expoでアプリを配布する方法
    • 社内や知人に向けて配布する
    • release-channelについて
    • iOSの申請用アプリをビルドする
    • iOSのipaファイルのアップロードとストア申請
    • Androidの申請用アプリをビルドする
    • Androidのapkファイルのアップロードとストア申請
    • 本セクションのまとめ
    • 参考資料
    • おわりの挨拶
  11. ボーナスレクチャー
    • Expo SDKのバージョンアップ
    • Functionコンポーネントの色々な書き方
    • パフォーマンス最適化
    

関連:Reactを本でも学ぼう

UdemyのReact講座は上述したとおり、Reactの基礎的な使い方からWebアプリ開発・スマホアプリ開発実用まで、幅広く学べる非常にパフォーマンスの高い学習法。

ただ、リファレンスとしては動画だと見返しづらい側面もありますので、書籍も併用しながら学習すると良いかと思います。

Reactの参考書は以下で紹介しています。合わせて参照ください。

いじょうでっす。

コメント

タイトルとURLをコピーしました