React開発の与太話

React開発よもやま話

弊社ではフロントエンド開発にReact.jsを採用しています。
導入理由は誰が書いてもある程度揃った書き方ができるためです。

そんなReactを書いていた時に色々と思ったことがあるのでまとめました。

create-react-appは至高

create-react-appはFacebookが提供するReactのアプリのジェネレーターです。

create-react-app アプリ名で最新のwebpack,依存関係ファイルを用意してnpm startで一発スタートできます。 やはりFacebookが開発を進めるだけあって最新のバージョンにも素早く対応してくれます。

以前までは依存関係やwebpack.configをいちいち定義していたのですが、構成こそ変更するものの必要最低限を 拡張性高くスタートさせるに当たってこれほど良いものはありません。 必要になったらwebpack.config書き換えればいいやと思えるのも気楽でいいですね。

ESLint × Pretterの罠

長らく規約問題に悩まされてきましたが、ESLintとPretterの組み合わせで大幅にそれも緩和されました。

ESLintはReactの規約をルール化し静的解析をして構文をチェックしてくれます。 一方Pretterはコードフォーマッタでルールを自分で記載してコードのフォーマットをして警告を出してくれるものです。

詳しい使い方に関してはまた書くことにしますが、この組み合わせを導入して以降大幅に表記ずれがなくなり 見通しの良いものになりました。 結構肥大化しがちなReactプロジェクトにおいてこの功績は大きいですね。

Redaxの使い所

Redaxはstateの管理をするものなんですが、こいつがなかなか厄介です。 こいつの使い方をいい加減に設計をするとプロジェクト内で本当に欲しいstateを見失うことになるし、どんどんメンテしにくいプロジェクトになっていきます。 本来のstate管理のための機能を最大限に活かすためにもRedaxへの理解と運用方針を揃えるのは必須ですね。

個人的には小さいプロジェクトならmobxでも全然いけると思うので積極的にこの辺の知識はキャッチアップしたいところです。