こんにちはカレイドです。
Reactと呼ばれるJavaScriptフレームワークをご存知ですか？
筆者はHTML/CSS/JavaScript + Reactを独学で5ヶ月学んで現在はインターン生としてお給料をもらいつつ働いています。
今回はめちゃくちゃ有益なのに安い、ボリュームもあるReact講座についてご紹介します。
簡単な自己紹介です
この記事は完全な初心者向けではないので、0から始めたいという方はこちらから読んでいただけるといいと思います。
【Udemy】HTML/CSSを初心者から一人前になれる講座を紹介！【0からでもOK】
こんな方におすすめ
- HTML/CSSの基本的内容は習得済み(どういう書き方かぐらいがわかってれば大丈夫です）
- JavaScriptの基礎がわかっている(変数、関数、if, for文がわかる）
- フロントエンドエンジニアとして最先端で働きたい人
- フルスタックエンジニアとして働きたい人
- モダンな環境で働きたい人
前提条件
基本的に私が紹介する講座なのですが、英語がベースになっています。
初めは慣れるまでに時間がかかると思いますが、プログラミングはすべて英語で書いていきますから英語で勉強した方が効率もいいです。
また、海外の講座は本当に日本人が出している講座の何倍も質がいいです。
筆者は累計５０以上のUdemyの講座を取っていますがそのほとんどは英語版の講座を使っています
そしてReactはある程度JavaScriptの知識が要求されることになります。
これから紹介する講座によく使う構文についての解説は付いています。不安な人は別途で講座を受けながら確認することをお勧めします。
特にif文、for文、 三項演算子、Arrow関数はよく出てきますので必ず使えるようになりましょう。
以下の記事で英語の字幕を日本語に直して勉強する方法を解説していますので、受講される場合はこちらとセットでお読みください
【Udemy】英語字幕しかない講座を日本語字幕にして勉強する方法を解説する【セールとおすすめ講座】
またUdemyでは購入から30日以内の返金対応も行なっていますので、安心して始めてもらえればなと思います。
【Udemy】返金制度の実際の流れと活用方法【デメリットなし】
[基礎編] Reactフレームワークを0から学ぼう。3つの講座のうち一つとればOKです。
それでは早速講座の紹介をしていきますね。
私はいろんな講座をインターンに通過した後も、完全な趣味としていくつか取っています。
理由は有名な講師であれば、教え方などで新たな発見が得られるかもしれないし、私は将来的に自分の講座を作成してみたいとも思っているのでストーリー作成のヒントをと思って似たような講座を複数取っています。
どの講座も講師の特徴が出るのでここに関してはプレビューを見て頂いて自分に一番あった講師の人を選んでいただければいいんじゃないかと思います。
学べることの全般（私が定義するReactの基礎部分）はどの講座を取っても同じになります。
Modern React with Redux [2019 Update]
それでは早速一つ目です。
Modern React with Redux [2019 Update]
まずReactはFaceBook社が開発したJavaScriptのフレームワークになります。最近のアプリはSPA（シングルページアプリケーション）と呼ばれる形になってきており、より高速化が進んできています。なので最新のスキルということになりますが、今まで日本語は初心者が学ぶには書籍程度しかありませんでした。
そして、既存のアプリをこのReactで書き換えたりすることが最近は多くなりつつあります。つまりフロントエンジニアの需要が高まりつつあります。なので今がまさに旬になる一歩手前と筆者は考えています。
さて、この講座は私がReactを学ぶ上で一番最初に取った講座です。
筆者は基本的なIf文やFor文、関数やClassの定義程度しか知りませんでしたがなんとかついていけました。
進み方としては複数のアプリを題材にそのアプリごとに特定の重要な概念を学んでいきます。
細かく複数のアプリを作っていきたい人はこの講座をお勧めします。そして、わかりやすさは受講したコースの中でナンバーワンです。
React - The Complete Guide (incl Hooks, React Router, Redux)
続いて二つ目です
React - The Complete Guide (incl Hooks, React Router, Redux)
これは私が二つ目に取った講座になります。もともと上で紹介した講座を取っていたのですが、今ご紹介した講師の方が出している別の講座がとてもよかったので、復習も兼ねて取ることにしました。
学べる内容は冒頭でも話した通りほとんど同じです。ただこちらの講座ではFirebaseを利用したアプリになるのでAPIに関する処理も少し学ぶことができます。
最初の講座と違うのは、あちらは細かいアプリを複数作るということでした。こちらは1つのアプリを段々とよくしていく段階的な講座になります。
最初はめんどくさい書き方をしているところがどうやって綺麗な構造になっていくかを一つのアプリで行なっていくため、リファクタ技術も一緒に学んでいきたい人はこちらの方がおすすめかもしれません。
特にReactを少し学んでいる人に取って一番最初の壁はstate管理をどこで行うか、そして何のためにReduxが存在するかという部分ですが、そういうのを段階的に学べるようになっています。
かなりのSectionがありますが、タイトルにBonusとあるもの以外はすべてやることをお勧めします。
Complete React Developer in 2019 (w/ Redux, Hooks, GraphQL)
Complete React Developer in 2019 (w/ Redux, Hooks, GraphQL)
こちらは私がインターンに参加後3つ目のReact基礎で取った講座になります。
上二つでは学べない styled-componentと呼ばれる技術も学ぶことができます。
ReactはCSSによる装飾の方法が複数あります。通常のCSSやJSに埋め込むタイプ。そして自分でカスタムするStyled-Componentと呼ばれるものなど様々なものがあります。
結局どれが優れているかはプロジェクトの内容によりけりになってしまうので一概にこれ！ということはできません。
なので私は色々なタイプのスタイルを学ぶためにこの講座を取った感じになります。ただ紹介した中では一番最新のものでこちらの講座も１個上で紹介したように一つのアプリをリファクタリングしながら徐々によくしていくタイプのものになります。
私が取った講座の中では一番モダンなアプリという感じでした。一番密度濃く幅広くやっているのがこの講座という認識を持ってもらえればいいかなと思います。
あとは、この講座は講座を取った人のDiscoardコミュニティがあるので、海外の同じ受講者とやりとりしたいという人にもいいかもしれません。
ちなみに日本人で同じように取っている人もいましたw
応用編 Reactを使った実践的なアプリを学ぶ講座
以上までに説明した内容が基礎編で、Reactを使う上で欠かせない部分になってきます。
特に最近はクラス型のコンポーネントからHooksによる関数型コンポーネントによる管理方法に変わりつつあるので必ず両者押さえておいてください。なんのこっちゃ、という人はクラス型コンポーネントという言葉と関数型コンポーネントという言葉を頭の片隅に入れておいてください。
以前から作られたアプリなんかはまだまだClass型のコンポーネントにしていることが多いのですが、最近はクラスをなるべく使わずに書いてくプロジェクトが少しずつ多く見受けられるようになりました。
私のインターンでも今少しずつクラス型のコンポーネントを関数型に変換している最中です。
話がそれたので戻すと、今回の記事はあくまでReactが主軸になるので、バックエンドにNode.jsやMongoDBなどを備えているフルスタックのものは省かせてもらいます。筆者はできれば両方学んだ方が理解は深まると思います。
そしてインターン獲得という点でも有利。
なので、ここではバックエンドにお手軽に使えるFirebaseを採用した講座を紹介していきます。
バックエンドもしっかりさせたい人はJS全般についてご紹介しているこちらの記事が参考になると思います。
【Udemyセール】JavaScriptおすすめ講座【5ヶ月で手に職をつけるために使った講座】
【Udemy】セールを利用して実践的なアプリを構築できるおすすめ講座【中級編】
React+Redux（Hooks）＋Firebaseで掲示板アプリ作成
この講座ではReactの復習をしつつ一つの巨大掲示板アプリの構築を目標に進めていきます。
バックエンドのFirebaseも解説が付いているので、基礎編のどの講座を取っていたとしてもここにつなげることができます。
最近アップデートされてHooksを使った関数型への書き換えも加わったので一粒で二度美味しい講座になります。
React+Redux＋FirebaseでSlack模倣アプリ作成
みなさんはSlackというチャットツール知っていますでしょうか。
簡単に言うなら Line だと思ってくれればいいです。
知っている方からすればそれを作れるのか！ってなったかもしれないです。このアプリではSlackアプリを本当に一から作っていきます。
動画時間が短く感じるかも知れないですがボリュームはかなりたっぷりです。
コンポーネントの管理もかなり複雑なのでPropsの渡し方やStateの管理、またそのStateをどうやって分配していくかなど、動画の通りになぜやるのか、こっちの方がいいんじゃないかなど色々考えながら学ぶといいと思います。
そしてこのアプリはDeskTop用に作られているので時間がある時にモバイル版の表示もできるような改築を自分で加えられればもう１人前だと思って大丈夫です。
紹介した中だと個人的に一番達成度が高いアプリで何度もコードを見ながら復習しました。そのぐらいState管理が複雑で難しかったです。
ただやはりロジック一つ一つの組み合わせでしか無いのでユーザのログイン状況含めてReactの集大成だと思って取り組んでみるといいです。
正直に言いますが難易度は高いです。とりあえず１週終わらせてもう１週するぐらいの覚悟を持って取り組むとちょうどいいと思います。
最後に バックエンドがFirebaseはまだまだ少ない
いかがでしたでしょうか。
FIrebaseはまだまだ最近出てきたばかりの技術でブラックボックスで手軽にバックエンドを構築できる点でかなり優れています。
ただ、世間的にはまだまだしっかりバックエンドを自分たちで構築しています。そして、自分でもバックエンドで最低限何をしているかぐらいの知識を持っていた方が有利です。
そう言う意味でここで満足せずにぜひNode.jsを使った実践的なバックエンドの構築までやってみてほしいです。
先ほど紹介したこちらの記事で詳しく解説していますので、ぜひ気になると言う方は見てみてください。
【Udemyセール】JavaScriptおすすめ講座【5ヶ月で手に職をつけるために使った講座】
【Udemy】セールを利用して実践的なアプリを構築できるおすすめ講座【中級編】
それではぜひ快適なコーディングライフを！