2019/06/10

React開発で生産性を向上させるヒント

Create React Appで作ったアプリなど、Reactアプリで開発するにあたって生産性を向上させるヒントをまとめました。

生産性を向上させるヒント

エディターやブラウザにいくつかの設定をしておくことで、バグを未然に防いだり、デバッグの作業を効率的に行うことができます。 実際、慣れていないときは多くの時間をバグと戦うこともあると思いますが、 そのときに、どのようにしてバグを未然に防ぐのか,原因を突き止めるのかというヒントをお伝えできればと思います。

ここで、設定するのは

  • eslint のプラグイン
  • pretter のプラグイン
  • Google Chrome 拡張機能版の React Developer Tools

です。

すでに設定されている方に関してはこの講義はスキップしていただいて結構ですが、していない方は一緒に設定をしていきましょう。

エディターの設定をしよう

vscode上で、eslint のプラグイン,pretterのプラグインをインストールしていきます。

eslintはJavaScriptのための静的検証ツールです。コードを実行する前に明らかなバグを見つけたりすることができます。 pretterはコードを整形してくれるフォーマッタです。コードのスタイルの一貫性を保つことができます。

これらをvscodeでインストールし、使ってみましょう。

eslint

eslint

下記の画像ではeslint のプラグインのプラグインをインストールすることで、

<img src={logo} className="App-logo" alt="logo"/>

の部分を

<img src={lego} className="App-logo" alt="logo"/>

に書き換え、'lego' is not defined.eslint(no-undef)というエラーになっています。

このようにeslintを導入することで静的解析によってバグを早期に発見することができます。


pretter

pretter

下記の画像ではpretterのプラグインのプラグインをインストールしvscodeの保存時にフォーマットするという設定を行うことで、保存時に自動的にフォーマットがかかっています。

このようにpretterを導入することでコードのスタイルの一貫性を保つことができます。


React 開発者ツールを使おう

React Developer Tools を使うことで意図しない動きに対しての原因の追求がスムーズになります。

Google Chrome 拡張機能から「React Developer Tools」を検索してこちらのページからインストールするとReactの開発環境でGoogle Chromeの開発者ツールから、 Reactのタブが選択できるようになります。

react developer tools

具体的にどのようなことができるかを紹介します。


props, stateを確認したり書き換える

上記にあるようにReactコンポーネントを選択して、コンポーネントの値を確認したり、書き換えることができます。(例ではpropsを書き換えています。)

画面に問題がある場合に、レンダーを担当するコンポーネントを見つけて、問題の切り分けをします。

コンポーネントの呼び出し(props)の問題なのか、状態(state)の問題なのか、描画(render)の問題ないのかというように3つに分類できます。

はじめに、propsを確認し、コンポーネントに渡された引数を確かめることができます。 propsが間違っている場合はこのコンポーネントを呼び出しているコンポーネントへ1つ上に辿っていき、おかしなpropsを渡したコンポーネントを見つけることで原因がわかります。

propsが正しい場合は、次にstateを確認します。stateが間違っている場合はコンポーネント内のsetState()の呼び出しのどれかによって問題が引き起こされていることがわかります。

propsstateも正しい場合はコンポーネントの描画(render)内に問題があるということになります。

React Developer Toolsを使ってコンポーネントを調べることで、問題に対して素早く原因を特定し、デバッグを当てずっぽうで行わずに、手順を追って行うことがきます。


ブレークポイントを貼る例

上記の方法でpropsstateを調べてもわからない場合、ブレークポイントを貼って、動作を確認すことができます。問題のコンポーネントを右クリックして「Show xxx Source」をクリックしてコンポーネントのソースコードに飛んでみてください。

ソースコードにブレークポイントを貼り(上記の例では[6]行目をクリックしてブレークポイントを貼っています。)、ブレークポイントを通過する動作を行うことで次にそこに到達した時に、コードの実行を止め、その時に変数がどのような値になっているのか確認することができます。

props, stateを調べる際や、render内を調べる際にブレークポイントを呼び出し元から貼って1つづつ順を追って値を確認していくことで実際に値がどのように渡されているのか、変わっているのかというところをアプリを動かしながら見ることができます。


上記の2つ紹介した使い方だけでも、うまく使いこなすことで効率的にデバッグを行うことができます。 なにかおかしい,うまくいかないと思ったときにこの「React Developer Tools」の機能を思い出して使ってみてください。


まとめ

Reactの開発に限定した話ではなく、エディターは他にもいろいろとカスタマイズができますし、たくさんのショートカットがあります。毎日使うものなので徹底的に調べ、使いこなすことができると生産性は飛躍的に向上します。

そしてReact Developer Toolsをはじめ、Google Chromeの開発者ツールはWeb開発になくてはならない存在です。 開発者ツールを使いこなせると開発体験は飛躍的に向上します。基本的な使い方はGoogle開発者公式のこちらから確認できます。日々進化を続けており、こちらに最新のGoogle Chromeの記事がアップロードされるので、そちらも気になる方はチェックしてみてください!

今回はエディターや開発者向けのブラウザの機能などを紹介しましたが、開発をサポートしてくれるものは他にもたくさんあります。ツールにこだわったり、理解を深めることで生産性は上げられます。楽しく開発するためにも日々、ツールへの理解を深めていきましょう。


おまけ

ほかにも個人的に開発に欠かせないアプリ

  • クリップボードの履歴アプリ

  • 画面分割アプリ

    • win: winkey + 矢印key で可能
    • mac: ShiftIt

...

Share