この記事はフラーAdvent Calendar 2019の13日目の記事です。
前日の12日目は@shmokmtで、コマンドラインのオプションの設計についてでした。

私は今年の4月からウェブフロントエンジニアとして、JavaScriptを書いています。
最初はVue.jsやWordPressを触ってきましたが、なんやかんやあって8月ごろからReactを使うことになりました。
Reactは全くわからなかったので、どんなライブラリを使って開発していいかわかりませんでした。
しかし、先輩エンジニアの方から色々と教えてもらって、なんとか今開発を進められている状況です。
今回はその中で、今までに使ってみてよかったツールやライブラリをまとめていきます。

redux-devtools-extension

このツールはReduxを使う上で便利なツールです。
どの状態からどの状態へ変化したかを知ることができるので、デバッグに役立ちます。
例えば、下のコードのようなカウンターアプリを作ったとします。

counter.ts

const initialCounterState = {
  count: 0
};

export const counterReducer = (state = initialCounterState, action: any) => {
  switch (action.type) {
    case "INCREMENT":
      return { count: state.count + 1 };
    case "DECREMENT":
      return { count: state.count - 1 };
    default:
      return state;
  }
};

export const increment = () => ({
  type: "INCREMENT"
});

export const decrement = () => ({
  type: "DECREMENT"
});

Counter.tsx


const Counter: React.FC = () => {
  const count = useSelector<any, any>(
    ({ counterReducer }) => counterReducer.count
  );
  const dispatch = useDispatch();

  return (
    <div>
      <div>{count}</div>
      <div>
        <button onClick={() => dispatch(increment())}>+</button>
        <button onClick={() => dispatch(decrement())}>-</button>
      </div>
    </div>
  );
};

このアプリにredux-devtools-extensionを使うと、下の図のようにdispatchされたアクションとアクションの前後でどのように状態が変化したか把握できます。
また、アクションがdispatchされた時の状態に戻すことができるjump機能やdispatchされたアクションをなかったことにできるskip機能があるので、どのアクションでバグが起きたかを捕まえやすくなります。

肝心の導入の仕方ですが、storeの作成時に createStore() の引数にwindow.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() と入れるだけです。
より詳しい情報はgithubの方をご覧ください。

const store = createStore(
  rootReducer,
  (window as any).__REDUX_DEVTOOLS_EXTENSION__ &&
    (window as any).__REDUX_DEVTOOLS_EXTENSION__()
);

styled-components

こちらはCSS in JSのライブラリで、javaScriptを使ってCSSを書くことができます。
このライブラリのいいところは、CSSの影響範囲を狭めることができることです。
これ以上うまい説明ができないので、実際の例を作りました。
例えば、下のような表示をしたいときに、App.tsxとSample.tsxを作ったとしましょう。

App.tsx

import "./App.css";
import Sample from "./Sample";

const App: React.FC = () => {
  return (
    <div>
      <p className="red">App component</p>
      <Sample />
    </div>
  );
};

App.css

.red {
  color: red;
}

Sample.tsx

import "./Sample.css";

const Sample: React.FC = () => {
  return <p className="red">sample component</p>;
};

Sample.css

.red {
  background-color: red;
}

しかし、実際にアプリを立ち上げて見てみると、下のように文字と背景が赤色になってしまいます。

これはCSSに名前空間がないことが原因です。
簡単にいうとCSSファイルを分けていてもクラス名が同じであれば、全ての同じクラス名がついている要素にスタイルが適用されてしまうということです。

しかし、styled-componentを使ってApp.tsxとSample.tsxを下のように書き換えてあげることで、この問題を回避できます。
（BEMやSMACSSなどのように命名で解決する方法もありますが、ここでは割愛します。）

App.tsx

import styled from "styled-components";
import Sample from "./Sample";

const App: React.FC = () => {
  return (
    <div>
      <StyledP>App component</StyledP>
      <Sample />
    </div>
  );
};

const StyledP = styled.p`
  color: red;
`;

Sample.tsx

import styled from "styled-components";

const Sample: React.FC = () => {
  return <StyledP>sample component</StyledP>;
};

const StyledP = styled.p`
  background-color: red;
`;

こうすることによって、コンポーネントごとにCSSの名前空間を分けることができます。
時間がない中で開発するにあたって、簡単に狙った場所だけにスタイルを当てることができるので本当に助かってます。
（ただし、適当に命名するとぱっと見でどんなコンポーネントか分からなくなるのでご注意を......）

終わりに

ということで教えてもらったいいツールを紹介しました。
特にstyled-componentは開発のレビューで教えてもらって、今ではなくてはならないものとなってます。
redux-devtools-extensionは教えてもらって今回初めて使いましたが、とても使いやすいので取り入れていこうと思います。
今回紹介したものは教えてもらったものの一部で、他にもimmerなどを教えてもらいましたが、まだまだ触れていない状況です。
早く触れるようにならなければ......。