Reactを3週間ほど触ったので感想を語る

はじめに

どうも、僕です。
実はこの前、初めてインターンシップに参加できることが決まりました。誰もが知る大手有名企業ということもあり、舞い上がっています。もし許可をいただけたら参加レポートをこのブログに書きたいと思います!

さて、今回はここ最近触ってきた React について語ります。以前は完全な初心者だったのですが、現在はある程度自走して React を使えるレベルになった気がする ので、「どんな学習をしたのか」 や 「自分なりのプラクティス」 を簡単に伝えられたらなと思います。

キッカケ

まずは、Reactを始めたキッカケから話しましょう。僕は、昨年に Vue.js を学習して 簡単なチャットアプリ などを作っていました。Vue.js はシンプルかつ非常にパワフルなフレームワークで初学者の僕でも楽しく開発を進められました。おかげでフロントエンド開発に興味を持ち、今ではその道に進みたいと思っているほどです。

そんな経緯もあり、フロントエンド界隈でのデファクトになっている技術を身に着けたいという気持ちが起こりました。皆さんは何を想像するでしょうか。僕は React + TypeScript でした。

何で学習したのか

ダラダラ書いても仕方ないので、紹介は軽めにとどめておきます。

  1. 社内向けReactドキュメントを公開しようとしてるお話 - Qiita
  2. React 公式のチュートリアル
  3. Atomic Design ~堅牢で使いやすいUIを効率良く設計する
  4. たぶんこれが一番分かりやすいと思います React + Redux のフロー図解 - Qiita
  5. TypeScript + Reduxはもうぼちぼちサードライブラリに頼らなくてもある程度はいい感じに補完してくれる - Qiita
  6. バカのためのredux-saga入門 - akinor1ty’s diary

これらを順番に読みながら手を動かしていました。
ほとんどが Qiita や個人ブログなので学習方法としては非難されるかもしれませんが、経験者のコードを読むと既存のプラクティスを素早く吸収することができるので、僕は悪くはないと思っています。

学習する際に意識したこと

学習する際は以下のことに意識をしていました。

  • 手を動かすときは最終的に必ず TypeScript や React Hooks で書き直す
  • create-react-app に依存しない
  • よいプラクティスは取り入れる

React のメリットの1つは TypeScript と相性がよいところです。TypeScript を利用すれば、typo や 予期しないエラーに困ることが減り、堅牢なアプリケーションを作ることができます。試さない理由はないでしょう。

また、React は今後 FC(Function components) と呼ばれる関数ベースのコンポーネントを用いた開発が中心になると予想されます。これを実現するのが昨年発表された React Hooks という新しい機能です。React Hooks はまだ正式なリリースはされていませんが、先日 master にマージされたので、そろそろリリースされるのではないかと噂されています。時代に乗り遅れないためにも、積極的に試すようにしていました。

次に意識をしていたのは環境構築です。
React は公式から create-react-app という 非常に便利な CLI が提供されています。しかし、create-react-app は開発者が環境構築の煩わしさから開放される反面、細かい調整をするのに向いていませんでした。(yarn eject した後なら調整できるが怠かった)
そこで、途中からは勉強も兼ねて create-react-app に頼らない環境構築をしていました。そのおかげか、Linter や webpack の知見を得られました。

そして、よいプラクティスは積極的に取り入れるようにしていました。
僕が発見したのは Ducks という Redux のデザインパターンです。Redux 経験者なら共感していただけると思いますが、Redux はディレクトリの構造が複雑になってしまうという欠点があります。しかし、Ducks のルールに従えば 今まで以上に見通しのよいディレクトリ構造を実現することができます。 初めて聞いたという方にはぜひ試してください。

自分なりのプラクティス

「プラクティスは全部ここに置いてきた!(ドーーーーーーーーン!)」

github.com

現在、サンプルを交えた React のオレオレボイラープレートを作っています。
使用しているライブラリ等は以下のとおりです。

  • React
  • Redux
  • redux-logger
  • redux-saga
  • Storybook
  • TypeScript

また、割と本格的な開発を見据えて作っているので Atomic Design を採用したディレクトリ構成になっています。
コンポーネントごとにディレクトリを掘って中に story と container を突っ込んでいるのは、コンポーネント単位で開発をするときに見通しがよくなるからです。

.
├── README.md
├── package.json
├── public
│   └── index.html
├── src
│   ├── components
│   │   ├── App.tsx
│   │   ├── atoms
│   │   │   ├── Button
│   │   │   │   ├── index.stories.tsx
│   │   │   │   └── index.tsx
│   │   │   └── index.ts
│   │   ├── molecules
│   │   │   └── index.ts
│   │   ├── organisms
│   │   │   ├── Header
│   │   │   │   ├── index.stories.tsx
│   │   │   │   └── index.tsx
│   │   │   └── index.ts
│   │   └── pages
│   │       ├── Contact
│   │       │   ├── index.stories.tsx
│   │       │   └── index.tsx
│   │       ├── Home
│   │       │   ├── container.ts
│   │       │   ├── index.stories.tsx
│   │       │   └── index.tsx
│   │       └── index.ts
│   ├── index.tsx
│   ├── modules
│   │   ├── count.ts
│   │   ├── index.ts
│   │   └── qiita.ts
│   ├── sagas
│   │   ├── index.ts
│   │   └── qiita.ts
│   ├── store.ts
│   └── types.ts
├── tsconfig.json
├── webpack.config.ts
└── yarn.lock

今後も手を加えていくつもりなので、いい感じになったら改めて紹介します。 もし、試したい場合は GitHub から clone して動かしてみてください!

Vue.js との比較

特に気になったのは、React はライブラリの選択で戸惑うことが多かったという点です。
Vue.js は公式が主要なライブラリを手厚くサポートしているため、与えられたものを使えば十分でした。しかし、React 公式は最低限のものしかサポートしておらず、主要なライブラリはサードパーティ製のものが多いです。(たぶん)

例えば、グローバルな state を管理するときに Vue.js は Vuex を使えばよいのですが、React は Redux や MobX など複数のものが存在しています。更に、非同期処理を扱うときにも redux-saga か redux-thunk のどちらを採用するか悩みました。自由度が高いという意味では悪くありませんが、一貫した知識を身に着けて楽をしたいと考える方にはきっと辛いでしょう。

学習コストに関しては上記のような事情があるため、React の方が高めになっています。しかし、両者ともにコンポーネント志向のフレームワークという点では同じなので、片方を理解しているのであれば習得に困ることはないのではないでしょうか。

ここまでデメリットのような話をしましたが、もちろん React を採用するメリットもあります。

React は Vue.js と比較して TypeScript の恩恵が非常に大きいです。よく聞く話かもしれませんが、VSCode で書くと驚くほど補完が効きます。あまりにも気持ちがいいので、Vue.js には戻れないなと感じたこともありました。 また、React 学習すれば React Native を利用してネイティブアプリ開発をすることもできます。

まとめ

React はいいぞ。
ただ Vue.js も非常に魅力的なので、今後はどちらを採用するか頭を悩ませることになりそう…。
Google トレンドを見る限りでは Vue.js が熱くなってきているみたいですね。

Google トレンド

もし質問等があればコメント欄か Twitter で気軽に聞いてください!それでは〜