UdemyでReactとReduxを学んでみた【レビューする】

スポンサーリンク




モダンなJSに興味を持ったので、年末年始セールで安くなっていたUdemyの講座(1,000円程度)を購入し、でReactとReduxを学んでみました。

今回は「最短で学ぶReactとReduxの基礎から実践まで」という講座をレビューしていきます。

これからReactとReduxを勉強しようかなと思っている人の参考になれば幸いです。

UdemyでReactとReduxに関して学んだこと

この講座では以下のことが学べます。

環境構築:

・JavaScriptパッケージマネージャーyarnの操作方法
・bable(ES6をES5に変換する)のインストール
・Webpack(利用しているjsファイルを1つにまとめる)のインストール
・Eslint(jsの検証ツール=赤い下線で怒ってくれる人)のインストール
・Sass/Scssの導入

Reactの基礎:

・Component
・Props
・state

などの概念に触れつつ、コードに落としていきます。

参考になった記事:
https://qiita.com/KeitaMoromizato/items/0da6c8e4264b1f206451

Reactの実践:

上記の基礎をふまえた上で、WEBアプリケーションを開発していきます。

概要としては、

・GoogleMapAPIを活用して、検索された地名(東京タワー、とか通天閣とか)から住所、緯度、経度を取得
・その情報から楽天トラベルのAPIを活用し、検索された地名の周辺にあるホテル情報を取得
・値段、レビュー数などでソートさせる

という感じです。

React Routerで複数ページの実装

・History APIを活用して、サーバレスにしていきます。
(/aboutページへのリンクを押してもサーバにアクセスせず、HistoryAPIとReact Routerで新しいコンポーネントを表示させる)

ReactをReduxで変換:

ここまで作ったReactのWEBアプリケーションをReduxで変換させていきます。(Redux=stateを管理する大規模開発向きフレームワーク)

・Reduxの概要
・ProviderとConnect()を使った記述
・Redux DevToolsの使い方
・Reducer,Action Creator
・MiddleWareとthunkの概要

参考になったサイト:
https://qiita.com/soarflat/items/bd319695d156654bbe86

スポンサーリンク

実際に作れたものを紹介

という訳で動画をさらいつつ、できたものをご紹介します。

東京タワーとかナゴヤドームと検索すると、マップが出て周辺のホテルの情報が表示されます。

URLのパラメータを変更してもそのまま検索枠に反映されて検索結果がでます。

値段やレビュー数でソートできます。

スポンサーリンク

どんな人におすすめか

この動画がどんな人におすすめかをまとめておきます。

・ある程度JavaScriptに詳しい人

・Reactの概念がある程度わかっている人

・環境構築に時間がかかってもOKな人

・SPAにある程度触れたことがある人

・Reduxを習得する必要がある人

逆に、JavaScript全くやったことないです!という人にはあまりおすすめできません。

あとはこの講座の最後にもあるように、

Reduxを使うにしても一長一短があり、(Reduxの公式ページがYou Might Not Need ReduxというページをReadMeに載せている)

関数型でやってしまおうというクセがあるので、メリットを十分に理解するまではReactでの実装で良いのでは、ということが記載されています

UdemyでReactとReduxを学ぶ時の注意点


本講座を受ける時の注意点です。

動画撮影時のバージョンと現時点の最新のReact、Reduxのバージョンが違うので、環境構築時に結構エラーが出ます。

なるべくこのコースに投稿されているQ&Aを最初にみて、どういうエラーが報告されているかをあらかじめ確認した上で、環境構築に臨むべきかと思います。

Maki
環境構築系のバージョン違い系のエラーって結構、他のエラーと比較して、しんどいですし、心を折って来ますよねw

実際私は、パッケージのバージョンをyarn add するときに@をつけてバージョン指定をし、最新よりはちょっとバージョンを落としつつやってました・・・。

また、検索ワードの場所(「例えば東京タワーなど」)から住所や緯度経度を取得する、Google mapのAPIは、動画の時点では開発者Keyが必要ではないようなのですが、

最近では、開発者用のKeyが必須になっているようで、自分のGoogleアカウントから登録してKeyを取得しなければなりません。

さらに、react-reduxのバージョンも最新は6.0.0なのですが、これもバージョン指定なしで入れてしまうと

「Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_0_react___default.a.createContext is not a function」

というものが出てしまうので、バージョンを@5.0.6でやる必要がある、など、色々と難しかったですね。

モダンなJSおそるべしです。

まとめ

という訳でこの動画の再生時間は6.5時間なのですが、色々調べたり、環境構築でつまづいていると28時間ぐらいかかってしまいました。

ちょっと最後の方は追いつくのに必死でしたが、概念を理解する上では良い動画であり、Progateやドットインストールよりはかなり濃い内容だったかなと思います。

何より、動くものが作れたので、よしとします!

興味のある方はぜひチャレンジを!


スポンサーリンク


スポンサーリンク