今回は動画学習サイト Udemy で４番目に視聴した動画のレビューを行いたいと思います。
Udemyに関しては関連記事の方を参照頂ければと思います。
目次
- 1 概要／値段／講師の情報
- 2 どのくらいオススメするか？
- 3 セクション１～３：概要説明とJavaScript記法のおさらい
- 4 セクション４：まずはReactに触れてみよう
- 5 セクション５：イベントリスナと状態管理（State）
- 6 セクション６：制御構文とフォームの制御
- 7 セクション７：スタイリング
- 8 セクション８：ReactでDOM操作を行う方法
- 9 セクション９～１０：問題への対処法／関数型プログラミング
- 10 セクション１１：様々な状態管理の方法（React Hooks）
- 11 セクション１２：useEffectとカスタムフック
- 12 セクション１３：ReduxとRedux Toolkit
- 13 セクション１４：クラスコンポーネント
- 14 セクション１５：【発展】パフォーマンスの最適化
- 15 セクション１６：Rest APIを使ったサーバーとの通信
- 16 セクション１７：Next.js 基本的な使い方
- 17 セクション１８：Next.js レンダリング
- 18 セクション１９：テスト
- 19 セクション２０：TypeScript
- 20 まとめ
概要／値段／講師の情報
今回レビューする記事はこちらの動画になります。
値段
こちらは割引がないと10,000円する動画となります。
講義の長さ
- スキルレベル→すべてのレベル
- 講師の前作（19.5時間）を更に超える25時間の超長丁場
前回のJavaScript動画も記事にしてますので気になる方はチェック。
講師の情報
この動画の講師である「CodeMafia」さんは「独習JavaScirptの新版」を出版。更に以前記事にしたJavaScriptの動画と同一の方でした。
独習JavaScript 新版 [ CodeMafia 外村 将大 ]
どのくらいオススメするか？
未経験者オススメ度：★★★★☆
初級者（プログラミング経験１年前後）オススメ度：★★★★★
中級者 （プログラミング経験３年前後） オススメ度： ★★★★★
上級者 （プログラミング経験５年以上） オススメ度： ★★★★☆
未経験者
正直この動画はボリュームがすごい分、未経験者から上級者に至るまでオススメ範囲が広いです。ReactはJavaScriptのフレームワークなのでJavaScriptの基礎を知ってた方が取り掛かりやすいですが、この動画内でも関係する記法のセクションがああるので未経験でもまったくわからないといった事はないでしょう。
ProgateもReactが学べるので興味があれば下記記事を見てみてください
初級者／中級者
初級／中級者にはうってつけの内容です。Reactの記法から問題の対処方法／Redux／Next.js／パフォーマンスに対するセクション、テスト、更にTypeScriptのセクションがあり、まさに全部入り。
これを全部マスターできればすぐにでも実務で通用すると思います。
上級者
上級者の方でもパフォーマンスなどの解説があるので気づきを得られそうです。
以降はセクション毎の感想をつづっています。ただ量が膨大のため、今回は復習・発展である
セクション９、セクション１０、セクション１４、セクション１５、セクション１９、セクション２０は受講したら追記します。
セクション１～３：概要説明とJavaScript記法のおさらい
セクション１～３で１時間４７分。
ただし、セクション３はReactでなく、JavaScript記法を一部用いるのでおさらい的な意味でやってます。この動画で学ぶより、↑の記事で執筆しているJavaScript動画で学ぶことをオススメしたいです。
セクション４：まずはReactに触れてみよう
２時間。Reactの全ての基本である
- コンポーネント
- スタイル
- Fragment
- JSX
- props
を学ぶことができます。
ReactはVue.jsやAngularよりもチーム開発がしやすいコンポーネント指向に特化したフレームワークで基本文法に触れることができます
セクション５：イベントリスナと状態管理（State）
１時間４１分。このセクションでは状態管理であるUseStateの使い方を学ぶことができます。
JavaScriptではクリックイベントなどのイベントリスナで出てきた状態を保持する役目がUseStateであり、Reactの頻繁に登場する重要な記法ですね。
セクション６：制御構文とフォームの制御
１時間３３分。この講義では主にJSXにおける配列の操作とmapを使った繰り返し処理。フォームタグの使い方の説明があります。
一番重要な事項としてはmapを使ったリストには「キー」を設定することですね
セクション７：スタイリング
１時間８分。外部CSSのimportを使ったスタイリングとCSS Modulesを使ったスタイリング、stykled-componentsを使った様々な適用方法が解説されています。ChakraUIなどの紹介もあります。
セクション８：ReactでDOM操作を行う方法
４６分。モーダルウィンドウの表示、useRefなどで動画のプレイ／ストップの制御の説明など、実用性の高そうな技術を丁寧に解説されています。
セクション９～１０：問題への対処法／関数型プログラミング
２つで１時間４３分。まだ受講していないので受講したら追記します。
セクション１１：様々な状態管理の方法（React Hooks）
２時間。こちらはuseReducerとuseContextを使用します。useStateとの違いも解説されています。
セクション１２：useEffectとカスタムフック
５８分。タイマーの仕組みを作成できるuseEffectを覚える回です。使用頻度は低いものの、useLayoutEffectやカスタムフック（自作のフック）の講義もあります。
セクション１３：ReduxとRedux Toolkit
１時間３５分。Reduxの特徴と今までのuseReducer及び、Toolkit使用、Redux Thunkの説明があります。
Reduxはチーム開発案件で良くReactとセットで要求されるスキルで基本はReactの機能を寄りパフォーマンスが良く、メンテナンスもしやすい状態管理ライブラリです。
セクション１４：クラスコンポーネント
３２分。まだ受講していないので受講したら追記します。
セクション１５：【発展】パフォーマンスの最適化
１時間９分。まだ受講していないので受講したら追記します。
セクション１６：Rest APIを使ったサーバーとの通信
１時間１８分。WebAPIの作成で重要されているRestAPIの説明とAxiosを使ったサーバ通信の説明があります。
昨今のサーバ通信で重要なJSONの説明もあります。
セクション１７：Next.js 基本的な使い方
１時間２３分。Next.jsでのフォルダ構成。及びLinkの使い方やheader、_app.jsの役割などが解説。これを利用すると、より簡単にReactを使った画面を生成できる。
セクション１８：Next.js レンダリング
２時間７分。CSR – クライアントサイドレンダリング、SSR – サーバーサイドレンダリング、SG – 静的サイト生成（ブログページにはピッタリ）、ISR（SG＆SSR） – インクリメンタル静的再生成の解説が行われている。実務（チーム）で開発する際は抑えた方が良い内容となっている。
セクション１９：テスト
１時間２１分。まだ受講していないので受講したら追記します。
セクション２０：TypeScript
１時間４１分。まだ受講していないので受講したら追記します。
まとめ
今回の動画のボリュームは前回よりものすごく、１１月くらいに動画を見ながら開発を始めて2/下旬にメイン所の受講完了したので実に丸三カ月半かかりました・・・。
今までのUdemy動画は元値22000円に対して大体10000円くらいと評価していましたが、この動画も前回のJavaScriptと同じで元値10000円に対して22000円の価値があると思いました。どっちみちUdemyは割引を大体１～２週間の１回の頻度で行っているので元値で購入するといった事はありませんが、値引き時には是非一度見てもらいたいです。
正直メチャクチャボリュームありすぎて３カ月に渡って視聴を続けてます。手を動かしながらやってるので再生速度は大体0.5倍。。５０時間になっちゃうんです( ﾟДﾟ)