ReactにデビューしてSPAアプリケーション作った感想みたいなもの

*こんなタイトルにしておいてなんですが、 アプリケーション自体はクライアントの社内秘企画でお見せできません。 難易度はTODOアプリ+α+αぐらいのものです。

昨今仮想Domいけいけの時代ですが、
そもそも利用する機会がなかったので、ノータッチでした。
しかし、最近の案件で利用したので学んだポイントや苦労した点をまとめておこうと思います。

感想

Reactはビューだけやってくれるライブラリだから理解するのに時間はかからない。 けどそれ以外のことはほとんど全て自分で頑張らなきゃいけない。。 UIKitの恩恵に預かってiPhoneアプリ作ってた僕にとって、 全てを自分で作らなければいけないのは中々骨が折れる作業でした。 UINavigationControllerやUITableViewっていいな・・・と。

実装期間が２週間とちょっとぐらいしかなかったので、
学習コストを考えるとかなり厳しかった。

React

たくさんの人が語ってくれているので参考文献はたくさんあって助かる。 Typescriptで書くと、エラーをいっぱい吐かれるので序盤ちょっと泣きそうになった。

JSX

いい感じに書けます

Redux

複数ページ+通信処理ありでViewのStateが肥大化することも目に見えていたので、 最初っからReact+Reduxで行くことにしました。 この記事はわかりやすかったです。 https://qiita.com/kiita312/items/49a1f03445b19cf407b7

React-thunk

reduxで非同期処理したいがために利用しました(redux-sagaは大袈裟だったのでパス)。 下の記事に影響を受けて、非同期処理のためだけのmiddleware不要じゃね？と思って途中で書き直した。 https://qiita.com/uryyyyyyy/items/d8bae6a7fca1c4732696

axios

Fetch API利用しようかと思ったけどメジャーそうなaxios(アクシオス)を利用。 とくに不満もなく利用できました。

CSS

スタイリングにはよさげな、Styled-Componentsを利用しました。 書き方に癖があるので慣れるのには時間を要しましたが、終盤はスムーズにかけるようになりました。

序盤に以下のエラーで怒られてハマってしまった。

It looks like you’ve wrapped styled() around your React component (Component), but the className prop is not being passed down to a child. No styles will be rendered unless className is composed within your React component.

このページの「Styling normal React components」の項を参考にすれば解決します。
classNameの付与がポイント。
https://www.styled-components.com/docs/advanced#styling-normal-react-components

Atomic Design

多くの人が悩んでる「Atoms?Molecules?どっちなの？」問題に関しては、
僕一人の実装だったのでスルー。
確かに複数人数だと線引きが難しいように思える。

今後

アニメーションなどはノータッチだったので実装できるようになりたい。
vuejsも触って、来年一月までにはSSRするサイト一個ぐらいつくりたい。