ITANDI TECH BLOG

イタンジのスタッフブログです。イベントや技術情報などを発信しています。

Reactを毛嫌いしてるが実は好きになりたい人へ

react_logoこんにちは、エンジニアの建三です。今までは機械学習に関する記事ばかり書いていましたが、実はフロントエンドも大好きです。

僕がWeb開発を始めた3年前はJS Framework全盛期だったので、JQueryをすっとばしてAngularから入りました。その後数々のLibraryやFramework(Ember, Backbone, Meteor, etc...)を試したのですが、どれも常に何かしらの不満を抱えていました。

2年前からReactの話を聞き始め、ちょくちょく触ってはいたのですが、どうもよく理解出来ず毛嫌いしていたんですね。 しかし最近個人プロジェクトを始めたのを機に、初めて本気でReactを勉強しました。そしたらなんと!やっと理解出来ました! Reactは理解出来ると面白いです。

正しい学び方をすればReactは理解出来ます。なので今回はReact歴3ヶ月の僕なりにReactを学ぶコツを書きます。昔の僕のようにReactを毛嫌いしてる人の参考になればと思います。

1. Functional Programmingを学ぶ

Reactの思想を理解するにはFunctional Programmingの知識が必要不可欠です。特にReduxはFunctional Programmingを使うしかないので、避けて通れません。LispHaskellClojureなど何でも良いので、Functional Programmingの基礎を身につけておくと後々楽です。

2. Javascript(ES6)を学ぶ

例えばAngularだと、htmlの中にループやif elseなどのロジックをガンガン埋め込めます。その時にng-repeatのような特別なsyntaxを学ぶことになります。なのである程度まではJavascriptを勉強しなくてもいけます。

しかしReactはロジックを全てJavascriptで書くので、あくまでJavascriptの延長です。つまりJavascriptを知らないと初っ端から「何だこれ意味わかんね」となります。そこで「Angularだったらもっと簡単なのに」と思ってしまうのはフェアじゃないですね。

逆にJavascriptを学べば、特別なsyntaxをあまり覚えなくて済みます。JS Frameworkの比較は炎上の元なので避けたいですが、これはReactの良いところだと思います。Angularだと、Javascriptを書いてるというよりAngularを書いてるような感じになるので、何か変わったことをしようと思った時に結構困ります。

そしてReactのチュートリアルはほぼ全部ES6を使ってるので、ES6は必須です。ES6によってJavascriptが更にfunctionalになりました。例えばES5では変数をイニシャライズする時varを使いますが、ES6ではconstletが出てきました。これはScalavalvarに似ています。よく使うES6のコンセプトはそこまで難しくないのでサクッと学べると思います。

3. Reactを学ぶ

次にReactを学びます。大抵どのJS frameworkもオフィシャルのチュートリアルでは足りません。僕はDocumentationを読んだだけで理解出来ないので、本やネットのリソースを探します。その際に僕が一番重要視してるのが新しいかどうかです。Reactに限らずJS Frameworkは進化のスピードが恐ろしく早いので、6ヶ月前に書かれたものでも怪しかったりします。その点では、普通の出版社を通してる本は書かれてから出版されるまで何ヶ月もかかるので、フロントエンドを学ぶ媒体としてあまり向いていません。ビデオコースも同じようにバージョンの更新が不可能なので不向きです。

オススメは、頻繁にアップデートされるオンラインチュートリアルあるいはPDF Bookです。探しまくった挙句fullstack reactにたどり着きました。サンプルチャプターを読んで感動し速攻買いました。非常に分かり易くReactを説明してます。

4. Reduxを学ぶ

Reactで本格的なアプリを書く時はReduxはほぼ必須と言っても良いでしょう。ただ、Reactではどうしても無理だという時になって初めて使い始めた方が良いと思います。あくまでReactの基礎を知ってからじゃないと、ReactとReduxを同時に覚える事になり相当キツイです。

Reduxに関しても上記のFullstack Reactでかなり分かり易く説明しています。ReactとReduxを繋げるreact-reduxというものがありますが、僕は使ってません。おそらくもっとアプリが成長したら使うかもしれませんが、初めの段階ではメリットが感じられず余計なアブストラクションを導入するだけです。

5. 環境構築を学ぶ

Reactは環境構築が面倒なので、create react appを強くオススメします。これはFacebookが出してるBoilerplateなので、サポートがしっかりしていますしチュートリアルが豊富にあります。

create react appはwebpackというフロントエンドのmodule bundlerを使ってるので、webpackの事は少しは知っておく必要があります。https://github.com/verekia/js-stack-from-scratchがcreate react appを使わずReactの環境構築をすごく分かりやすく説明してるのでオススメです。

6. NodeとExpressを学ぶ

これは必須ではないかもしれませんが、バックエンドとのやり取りを説明してるものは大抵nodeとExpressを使ってるので、知っておいた方が良いと思います。

React Native

今イタンジの新規事業のアプリ開発でReact Nativeを検討しており、もくもく会を開くなどして社内のエンジニアが全員React Nativeに触れる機会がありました。まず気づいたのは、リソースが少ないという事です。React NativeでもReactを使うので、React Native専用のリソースが少ないのは当然と言えば当然です。

Reactは初めはWebだけのものでしたが、React Nativeが出てくるタイミングで、元々のReactをReactとReact DOMという2つのLibraryに分けました。なのでReactはコアの部分を指し、WebにもMobileにも使われます。Reduxも同じようにどっちにも使われます。なのでReact Nativeを学ぶと言っても実質Reactを学んでる事とほぼ変わらないです。どのReact NativeのリソースもReactとReduxを知ってる事を前提にしてるので、初めに上記のプロセスを踏む事をオススメします。

たまにReactを知らなくても直接React Nativeを学べるというのを見かけます。これは嘘なので無視しましょう。もし行けるとしても、結局Reactについて遅かれ早かれ学ぶことになります。そしてReactのリソースはWeb開発に関してのものの方が豊富にあるので、そっちでReactをマスターした方が楽です。

その他

Reactのエコシステムは巨大で、多くのLibraryが存在します。上記でも何度か話しましたが、必要ないものは使わないことをオススメします。そうじゃないとキリがないです。例えばBootstrapをReact用にしたreact bootstrapというものがあります。Bootstrapをコンポーネントとして使えるのでReactっぽく書けますが、こういう"React-X"ばかり使い始めるとどんどんFramework依存症になりよくないなと個人的に思います。コンポーネントは簡単に作れるので、Bootstrapを使って自分でボタンなどのコンポーネントを書いた方がReactの理解が深まるしデバッグもし易いです。

まとめ

Webの進化を追っていくのは楽しいのと同時にとても大変で、日々勉強していないとあっという間に置いて行かれます。しかも色んな新しいLibraryに振り回されやすいので、どのツールが必要なのか見極める能力を磨く為に日々精進してます。

イタンジではReactに限らずJavascriptが好きでたまらないフロントエンドエンジニアを募集しています!