IT

React+Reduxへの入門!本とUdemyで爆速入門

私は仕事でReactを利用しているので、今では思い描いたWebアプリケーションをすぐにReactで作れます。しかし、最初からそうだったわけではありませんでした。そこで、私の体験を絡めながらReactへの入門方法について記事にしていきたいと思います。

Reactとは

Reactは、Facebookとコミュニティによって開発されているユーザーインターフェースを構築するためのJavaScriptライブラリです。他のウェブフレームワークとの比較記事でも触れましたが、たとえば、FacebookやInstagramなどの有名サービスでも使用されており、信頼できるライブラリになっています。

Reactだけ勉強すればUIはできるの?

詳しい方には釈迦に説法かもしれませんが、ウェブフレームワークというものについても指導説明しておきたいと思います。ReactはUIを構築するライブラリーですが、これだけで有害が作れるわけではありません。Reactは画面遷移や、ユーザの操作に応じて次にどんな画面を表示するかを規定するものであり、画面の色やパーツなどについてはCSSやBootstrapなどの別のツールを使ってカスタマイズする必要があります。

一方これらをラップしたSemantic UIや、Material UIといったReact向けのツールも公開されています。細かい調整はできませんが、一般的によく使われるようなパーツについては既に構築されています。

これらとうまく組み合わせることによって、低コストでUIを構築できるという点がReactの魅力の1つです。

Reduxとは?

Reactと一緒にReduxというツールが使われることがよくあります。React+Reduxという書かれ方をしてることもよくあります。先にReduxについて最低限の説明をしておきます。

ReduxはState管理のツールです。Stateとは「状態」の意味ですが、ReactのStateとは、Webサイトが内部的に保有している状態のことです。

例えば、ログインできるWebサイトを想像してください。あなたがログインした場合、そのウェブサイトはあなたのブラウザの中であなたについての情報を持っています。{login:true, user:”Aさん”}といった具合にです。

理由は割愛しますが、この情報をReactだけで管理するのは少し面倒なのです。そこでReduxと言う専用のツールを使ってこの情報を管理するのです。簡単には、ブラウザの中で情報をためておけるプチデータベースみたいな感じです。したがって、Reduxはなくても、Reactだけで動作します。

また、ReduxはReactとしか使えないわけではありません。AngularやVueといった別のWebフレームワークと使うこともできます。もっと詳しく知りたい方は下記サイトが参考になるでしょう。

Redux入門【ダイジェスト版】10分で理解するReduxの基礎

Reactの具体的な勉強方法

React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで


React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで (NEXT ONE)

React開発 現場の教科書などもあるのですが、今市場に出ている本の中ではこの本が最も有用だと思います。

ReactとReduxについて、それぞれ丁寧に解説されています。特にReduxは初心者にとってと着きづらく、なかなか理解できないことが多いのですが、この本ではReduxの解説を行う際に、まずReactを使わずReduxだけで小さいアプリケーションを開発します。これによりにReduxついて誰でもちゃんと理解できるのです。これはかなり大切なことで、Reactの勉強でつまずく人の多くは、React+Reduxのところでつまずくのです。逆に、ここさえ突破できれば、Reactの学習はスムーズに進んでいきます。

この本は、他の多くのプログラミングの本と同じく、スケジュール管理アプリから開発していきます。そこからどんどんレベルが上がっていき、最終的には簡単なショッピングサイトがつくれるようになります。この本を1冊理解すれば、後は公式ドキュメントなどを読むことによって、自分でオリジナルのアプリを作ることが出来るようになります。

Udemy:Node with React: Fullstack Web Development

注:セールがあるので実際にはもっと安く買えます

このUdemyコースは英語ですが、かなり分かりやすく、レベルも高いです。英語と日本語の字幕が自動生成されるので、英語に不安がある人でも問題なく視聴できると思います。ビデオが25時間もあるので、腰を落ち着けて勉強できる方向けですが、その分よく学ぶことができます。

このUdemyコースでは、先ほどの本よりももっと詳しい内容について扱っています。React, Reduxの加えて、

  • Express:サーバーを構築するライブラリ
  • MongoDB:データベース
  • Google OAuth:Googleアカウントでログイン認証
  • Sendgrid:メールを一斉配信するSaaS
  • Stripe:クレジットカード決済代行してくれるサービス

といった、実際のサービス開発に必要な重要なサービスについて学ぶことができます。このコースでは、コース全体を通して、大きなアプリケーション構築することができます。

課金することによって、メールを一斉配信できるアプリケーションです。Googleを通じてログインすることができ、Sendgridというサービスを通じてメールを配信します。そのコストはStripeというサービスを通じて、クレジットカードで支払うことができます。

ログイン認証と、クレジットカードによる課金処理の実装について学ぶことができます。これによって実際のアプリケーション開発をどうやって行えばいいのか、もっと具体的に理解することができます。

また、オンラインコースであるので、講師と一緒にコーディングを行うことで、しっかりと身につきます。コースは定期的にアップデートされており、2019年4月現在においても、最終更新は先月の3月になっています。分からないところがあっても、Q&Aのところから、講師に直接質問することができます。ここはオンラインコースならではの良さがといえます。

Udemy:Mordern React with Redux

Modern React with Reduxというコースもあるので、一応ご紹介しておきます。こちらはStephen Griderという講師の講座ですが実は先ほど紹介したコースと同じ先生が作ったコースです。こちらの方が先に作られたもので、より初心者向けの内容となっています。私としては、そんなに見る必要がないと思っていて、本を読んだら、そのままNode with Reactに住むのが良いと思います。Stephen GriderはAdvanced React and Reduxというコースも作っているので、Node with ReactかMordern React with Reduxを終えたらそちらに進んでも良いと思います。

Udemy:最短で学ぶReactとReduxの基礎から実践まで

こちらは、どうして日本語が良いという方向けに一応ご紹介しておきます。しかし、ビデオが6時間しかなく、少々高いんじゃないかなぁと思います。30日間返金保証がついてるので、一応見てみて、満足できなかったら返金するということも可能です。

私がなぜこれらをおすすめしているのか

私はReactの主要なコンセプトを、Stephen Griderさんから学びました。Node with Reactを最初に見て、Reactの開発手法について学びました。しかしこれだけではReduxについてあんまり理解できていない自分がいました。そこで、最初にご紹介したReact入門という本を買って、Reduxの部分についてよく読みました。すると以前に分からなかった部分が、かなりわかるようになり、十分に腹落ちした状態でコード書けるようになりました。

私はUdemyをやってから本を読んだのですが、先に本を読んでおけばもっとスムーズだったかなと後悔しました。なので、まず本を読んでいただき、その上でUdemyコースを見ていただくのがよいかと思います。Udemyコースは、かなり高いように見えますが、セールやフェアなどをよくやっていのでその時に買えば1,800円程度で買うことができます。私もその時に購入したので皆さんもその時に購入されたら良いかと思います。

マテリアルの紹介

最後に、本とコースを終えた方向けのマテリアルをご紹介しておきます。

Reactについての勉強の副教材としては下記が使えます

React公式

UIライブラリ

 

ここまで来たあなたは業務でも十分通用するレベルにReactを使いこなすことが出来るようになっているでしょう。この記事が少しでもみなさんの役に立つことを願っています。

1人で学習するのが厳しそうであれば、プログラミングスクールを使うという手もあります。Tech boostというプログラミングスクールにはReact.jsコースがあるので、資金に余裕がある方はそちらを検討されても良いと思います。

独学(本、Udemy)か、プログラミングスクールかプログラミングを勉強するにも、いくつか方法があります。 独学には、本を読む方法と、Udemyなどのオンラインコースを買う方法があり...