2年間Reactを勉強して思ったこと

はじめてReactを触ってからというもの、だいたい2年くらい経ちました。
カナダで勉強会に参加してみて、全く理解できないまま家に帰ったのを覚えています。SPA何それ美味しいの?npmってなんですか?状態です。
元々PHP書いていた人間で、JavaScriptは基本的に全部jQueryで済ませていたような旧石器時代の人間でした。

カナダで専門学校に通いながらでReactとNode.jsを中心に勉強しまくって、React案件を捌きまくった結果。
日本に戻ってからはReact専門のフリーランスエンジニアとして仕事を請け負うようになりました。
たまに技術選定間違えたのかなぁ、これで良かったのかなぁと思うことも多々ありますが、結局は無い物ねだりだったり、隣の芝生は青く見えるのと一緒なので、これで良かったのだろうと言い聞かせてます。
(よくReact案件のお話を頂くのですが、内心サーバーサイド書きたいとか思ってたりもします。)

まぁそんなちょっと毛が生えたようなReact DeveloperがReactを2年間やってみて思うことを書いてみようと思います。

需要が高い

さて、今のSPA界隈ですが、見ての通りReactの需要は高く、Angularは下火状態にあります。
アジア圏ではVueが使われており、欧米ではReactの一人勝ち状態が続いており非常に需要の高いライブラリとなっています。

angular-vs-react-vs-vue-npm-trends

参照元
npmtrends

特に、海外の求人票を見てるとReactで求人を出す会社は多く、Vueを扱っている会社は中国人経営の会社だったりします。自分は2018年頃にカナダに居ましたが、その頃は相対的に見てもReactの需要はかなり高かったです。

日本はVue案件がまだまだ多いですが近年需要は伸びてきている印象です。技術選定の際に世界的なシェアを見てReactを選択するようです。
もしもこの記事を読んでいるあなたが、今後海外でフロントエンドの仕事をしていきたいと考えているのならばJavaScript/TypeScript/Reactを勉強することをお勧めします。

SPA開発をやるならReactを推したい

開発や勉強におけるフレームワーク選定はReactを推したいです。
Vueは日本語情報が多いため好まれるかもしれませんが、Reactは英語を含めるとかなりの数の情報が手に入ります。開発を進める上で、英語で調べたらすぐにでも情報が手に入ります。
情報の豊富さを考えるとSPAの勉強にもってこいのフレームワークだとも思います。自分自身、VueはReactをやった後に触りましたが、VueはReactに比べると比較的簡単に扱えます。(これはReactから入った友人も同じことを言っていました。もちろん、ある程度勉強は必要になりますが)

Vueと比べて、TypeScriptとの相性がいいのもReactの良さです。基本的に今のJSの開発はTypeScriptがマストになってきています。自分自身、ここ2年の間でピュアなJavaScript案件がなかった気がします。すべてTypeScriptで書いていました。Vue自体、型を想定したフレームワークではないので、若干相性が悪いのですよね。そう言った面を含めReactを推したいです。また、開発元がfacebookであるのも安心できますね。

たまにJSXがキモいなんてことも聞きますが、確かに最初はキモいですが書いたら慣れます(笑)
正直、フレームワークは宗教戦争のようなものなので不毛な戦いですので、プロダクトにあったものを選びましょう。
ただ、私個人の意見としてはReact推しです。

Reactをやる上で大事だと思ったこと

Reactは自由度が高いフレームワークです。それがReactの良さなのですが、その分コードを書く人間がちゃんと設計しなければいけないという責任を負います。

React開発で鍵を握るのは開発者の設計能力だと思っていて、特にissueをコンポーネント単位で切ることが多いので、コンポーネントの詳細設計をちゃんとやらなければいけないです。(ミスるとバケツリレーになって積む)

大事なことは大きく分けて2つあって

  • Hooks APIを知っておくこと
  • デザインパターンを知っておくこと

だと思います。
ReactにどんなAPIがあるのかを知っておかないと結構大変です。というのが、限られたHooksだけでモノが作れてしまうからです。
それは遠回りしているのと一緒でAPIを知っておけさえすれば簡潔にコードを書けるパターンというのは結構存在します。

例:
useStateを多様する => 実はuseReducerでもっと簡単に書けた
props渡しまくってる => 実はContextAPIでグローバルに渡すようにできた

そういったケースをいろんな開発で見てきました。これは非常に勿体ないです。書くのに時間を無駄にしていますし、これはコードの可読性を落とします。

開発者はAPIの使い方を知る必要があり、またデザインパターンなどを知っておくとコンポーネントを設計するときに役立ちます。(ちなみにデザインパターンの幅を広げるには、いろんな人のコードを読むしかないのです。)

JavaScriptはJavaに比べて規約が緩く大変ですが、その反面規約の緩い言語ほどちゃんと設計すれば質の高いものが出来上がります。

そのよい例がPHPです。
PHPはクソ言語と揶揄されますが、それは書いた人間が悪いです。
PHPでもきちんと設計してあげれば、よいものが出来上がります、逆にちゃんと設計しなければ悪いものが出来上がるだけのことです。

Reactも結局は設計が大事です。
開発する上でReactはデザインパターンを理解し、コンポーネント設計をちゃんとしてあげればよいものが作れます。
また、Hooks APIとFLUXの概念を合わせることでよりよい開発ができます。

余談ですが、現在はSSRのフレームワークであるNext.jsの需要も高まっており、ディレクトリ構成などもあらかじめ決まっているため、ピュアなReactフレームワークよりもある程度制約のあるディレクトリ構成で構築をするため、Next.jsの方がチームでの開発向きな印象です。近年、SSRだけでなくSSGにも力を入れているので魅力的です。

まとめ

結論、フレームワークなんで自分が使いたいものを選べばよいです。ここまでReactを推してますが、別にVueを非難しているわけでもないです。自分はたまたま海外に居て偶然Reactの需要があって、就職のために勉強しただけの身なので日本にいたら使ってる技術もまた違ったかもしれません。

Reactを2年間やってみて、すごく奥の深いフレームワークだと思います。勉強してよかったとも思っています。
今までたくさんの会社でデザインパターンを見てきましたが、本当にたくさんあって開発者の色が出ているなぁと感じることがたくさんあります。

React自体おもちゃのようなフレームワークですが、おもちゃなだけあって面白いです。
jQuery時代に比べて本当に簡単にフロントエンド開発ができるようになりました。仮想DOMは偉大だし、ライブラリを作った先人には頭が上がらないです。

これからReactを勉強していこうって人や、開発に導入していこうって思う人は是非使って欲しいです。

サムネはトロントアイランドに行った時のものです。
カナダで必死にReactとNode.jsを勉強したこともあってReactはカナダの印象が強いです。

関連記事