フロントエンドエンジニアのための React アプリケーション開発入門 2018年版

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

4.00 (1972 reviews)
Udemy
platform
日本語
language
Web Development
category
フロントエンドエンジニアのための React アプリケーション開発入門 2018年版
10,221
students
7.5 hours
content
May 2022
last update
$39.99
regular price

What you will learn

実践的かつモダンなフロントエンド開発手法を学ぶことができる

CRUD(作成、参照、更新、削除)ができる動的なReactアプリケーションの実装方法を学ぶことができる

外部のRESTful APIと連携する動的なReactアプリケーションの開発手順及び開発方法を体得することができる

現場のベテランエンジニアが開発をする際に気をつける点について、コードを書きながら学ぶことができる

初学者がやってしまう間違いについて学ぶことができる

Description

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

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

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

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

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

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

Content

はじめに

プロモーショナルビデオ
本コースの全ソースコードはこちら

開発環境構築編

Node.jsのインストール
エディターの紹介
Yarnのインストール
GitHubのリポジトリ作成
create-react-appのインストール
自分専用のboilerplateを作成しよう

Reactアプリケーション基礎編

Reactの概要について
JSX
もっとJSX
トランスパイラー
webpack
Component
props
prop-types
State

Reduxアプリケーション基礎編

Reduxイントロダクション
Action
Reducer
Store
connectでstateとactionsとの関連付けを行う

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の適用(新規作成画面、編集画面)

レシピ編

React v16.3 Context API

Q&A編

質問 #5994878 - redux-formのenableReinitializeについて

おわりに

おわりのご挨拶

Reviews

野崎
February 13, 2023
この動画を見るまでに、git, github, Windows で動作するnode.js バージョン管理のためのvolta について調べて、講座を追いかけています。 途中経過として、node 8.9.4 のままだと「create-react-app」が実行できません。Windows 環境でバージョンを最新にしてyarn をインストールしようとしてもエラーが出ています。ほかにもバージョン違いでnpm start させてもlocalhost:3000 のサーバーへの接続を確立できませんでした。プログラムの写経だけして、流れだけ追っています。
辻俊介
January 3, 2023
前半部分のReactに関する説明は分かりやすかったのですが、セクションが進むにつれて登場するライブラリについては「なぜそうなるか?」等説明不足なところが多く自分で調べることが多くありました。公開して頂いているgithubのソースにはコメントが詳しく書いてあるのに動画では話していない点も少し残念でした。
Okumura
June 30, 2022
Reactの学び直しということで、チャレンジしました。 すごくわかりやすく、JavaScriptの書き方も無駄のない書き方が 推奨されていて、大変いいトレーニングになりました。 Redux を使ってみて、VueXに似た面白いものだと思いましたが、 React 16.3 以降では、React が Redux を不要とする機能強化をした 事にも触れられていて、有意義な講座でした。 4年前のバージョンと、現在のバージョンの違いはありますが、 これもやりながら理解を深められますので、基礎固めには最適な 講座です!!
Kuniakisuzuki
April 11, 2022
もう何年も前の物なので、若干、バージョンによる差異(コンパイルが通らないなど)はあるものの、調べれば解消できるレベルではある。 ただ、総じて、ただコードを書いていくというだけになってしまっていることが多いと感じる。 そのコード自体が、reactネイティブなものなのかどうか、ライブラリの物であれば、それのどこに属していて依存しているのか、という説明はないため、終わってみても、本質的な理解はほぼしていないという状態になってしまうと思う。 (ユーザークリックからactionにdispatchされて…みたいな流れがあるが、例えば、流れがわかる、図的なものがあったりしたらよかったのかもしれない) ただ、まずは理解していなくとも動くものがひとまずできている、という最初の1歩のステップは達成できると思うので、この講座をやる意味がない、ということでは絶対ない、ないが… これ1つ終わらせることでの理解は、かなり少ないものだと見積もっておく必要はあると思う。 あと、、自分が行った質問に関しては丁寧なご回答を頂いたものの、過去のQ&Aを見る限りでは、ちょっと見当違いの質問をされている方に対しては、結構攻撃的というか、揚げ足を取るような回答をしているものも見受けられ、初心者的な方は手を出さない方がいいのかもしれない。 (ただ、これはある程度、先生の気持ちも理解できます。 毎日毎日、何十件何百件も、そんなの講座見返せば数秒で理解できるだろ!そんなこと分からないやつがそもそもreactとかやりたいって思うなよ!みたいな質問来るわけですからね…)
小森弘太朗
February 15, 2022
数年前の講座で、今と変更点がありますが、全体を通して、とてもいい講座でした。 javascriptやgitなどを何も知らない方には、少し難しいとおもいます。 特に、gitでブランチをきりながら、開発していきますので、多少しっており、初期設定が終わっていないと、厳しいです。 windowsでの受講でしたが、たまにコマンドの書き方が異なったりしますが、問題なく受講できました。 講座の内容を追っていくには、パッケージのバージョンを落とすことをお勧めします。現在のバージョンでは廃止されているものも、ありますので、はむさんのgithubのjsonでバージョンを確認して、ダウングレードしながら、受講させていただきました。 難しい部分もありましたが、とてもいい講座でした。ありがとうございました!
稲垣勇馬
November 9, 2021
Javascript初学者にはお勧めしませんが、ある程度Javascript経験者であればReactの導入としては良いかなと思います。 ただ、所々ターゲットが初学者なのか経験者なのかわからない部分があるので、経験者の方は1.5倍速で見るのをお勧めします
シャケ
November 2, 2021
対象者をどこに絞ってるのかわからない。。。gitから入るので初学者向けなのかと思うとgitのコマンド説明は一切なく、肝心の講義の方も説明する箇所としない箇所をどのレベル感に合わせてるのかわからない。あと、キーボードの打鍵音がうるさすぎる
Kaede
September 3, 2021
色々と説明が足りないと感じました。何をやっているのかわからないまま進むので少なくともreact学習が始めたてであれば受けるべきではないかと、reactを学習済みであればテンポが早いので復習にはいいかもしれません。
Nobuaki
August 15, 2021
説明のための資料などの教材は一切準備されず、講師がソースコードを書いている姿をひたすら後ろから眺めているだけのような感覚になる。それもコピペでなくリアルタイムで書いているのでタイピングの時間が無駄であるし、しょっちゅうタイポによりエラーが出て講義の進行がいちいち妨げられる。講義を見ながら真似してコードを書けば同じものは作れるが、結局何を書いているのか理解するのは困難だろう。オンライン学習の利点を活かすにはもっと講義の設計と資料作成の準備を入念に行うべきではないだろうか。
みや
August 13, 2021
タイピング音が結構気になって集中力が途切れてしまうことが何回かありました。できればもう少し音声の調整をして欲しいです。内容に関しては所見で理解するのは難しく、ある程度知識が必要な部分もあるので、初心者向けでは無いような気がしました。
Tsuna
July 20, 2021
1つ1つの作業が丁寧に説明されています。 サーバサイドの言語などは経験ありますが、jsをあまり触ったことないため、基本的なことの説明が省略されている場合たまに動画を止めて調べることがありますが、そこまでケアするのは難しいかなと思うので問題ないと思ってます。
Comee
July 19, 2021
簡潔で分かりやすい説明でreactの基本をおさえられる。 ただ、一回だけではreduxがしっくりこなかった。 カウンターappの他に例があるとうれしかった。 yarnやgit、jsの基本構文とかの説明はあまりないので、JSライブラリ初心者は厳しいかも。 veujsやangularとかを触ったことがある人にはちょうど良いかと。
西岡健
March 27, 2021
インストールの仕方、vim、などとにかく分かりにくくて何度も止めて調べながらでないと進めない。2番目のビデオ、ソースコードのところに突然いってどうすればいいか分からない。プロモーションビデオのところが分かり易そうに演出されているのでかなり注意が必要。質問しようにも、内容がバラバラで質問しずらい。2講座も買ってしまったので時間をかけたが返金期日を過ぎてしまい大人しく勉強しているが、非常に不親切で分かりにくいと感じている。数ヶ月後、この内容が分かるように頑張りたいと思う。
染谷亮介
January 27, 2021
声が聞き取りやすさ、スピードが自分にはちょうどよくストレスなく受講できた。 解説も丁寧で、今までよくわかっていなかったReducerやActionについての理解を深めることができた。 この講座を受けたことで、よりReactの理解を深めていけるという手応を得られました。
Yuma
September 12, 2020
解説のための資料は一切なく、講師のコーディングを見ながら進めるという形式。さらっとした解説のみで具体的な解説は含まれていないので、ある程度経験のある中, 上級エンジニア以上の方でないと、確実についていくことができません。

Charts

Price

フロントエンドエンジニアのための React アプリケーション開発入門 2018年版 - Price chart

Rating

フロントエンドエンジニアのための React アプリケーション開発入門 2018年版 - Ratings chart

Enrollment distribution

フロントエンドエンジニアのための React アプリケーション開発入門 2018年版 - Distribution chart
1507044
udemy ID
1/12/2018
course created date
11/16/2019
course indexed date
Bot
course submited by