こんにちは！本日は便利ツールの紹介ですが React関連になります
Reactアプリケーションの開発とデバッグの両方に役立ちます
貴方がReactを学び、求人市場で競争力のあるプレーヤーになるためには、スキルセットを拡張することが常に重要となります。
2021年にReact開発者ツールが使用されている中から個人的にこのツールたちは是非とも使用してもらいたい、オススメをピックアップしました。
日本だけではなく、海外での利用者も多いです。
React Developer Tools
まずはReact開発者で最も人気のあるツールになります
Chrome用の拡張機能の『React Developer Tools』です。
Reactコンポーネントの階層を確認できます。
画面にレンダリングされたコンポーネントのリストに加え、子コンポーネントも表示できそれを選択すると
『状態』『小道具』を調べ編集が可能となります。
開発者がReactアプリをデバッグするのに、人気があり便利な方法となります。
アプリのパフォーマンスを測定して、すべてがスムーズに実行されているかどうかを確認することもできます。
Reactやってる方であればまず、1番オススメしたい間違いなく便利なツールの１つです。
React Sight
こちらは先程の『React Developer Tools』と組み合わせ活用する拡張機能です。
こちらをインストールすると、DevToolsの一部として『ReactSight』用の新しいタブが開きます。
このツールを使用すれば、自身が作成した全てのコンポーネントを視覚化しツリー構造で表示されます。
カーソルを合わせれば、『状態』『小道具』の確認ができます。
ローカルURLを実行してる場合は、拡張設定で先程の『React Developer Tools』どちらとも
『ファイルURLへのアクセスを許可する』を有効化して下さい。
Storybook
StorybookはUIのコンポーネントをアプリケーションに組み込まず、独立して開発できる便利なツールとなっています。
なので指定したコンポーネントを個別化し『動作』『UI』の確認が可能となります。
学習時には結構オススメします。
使用方法は、ご自身のプロジェクトにStorybookが
公式で出してるCLIを使用すれば簡単に作成が可能です。
npx -p @ storybook / cli sb init
コマンド実行でstorybookをランチする。
npm run storybook
※Vue.jsで使用したい方は別のコマンドになります。
React Live
React Liveはライブで編集が可能なReactコンポーネントを手軽にレンダリングできます。
Reactコードをライブ編集するための柔軟な遊び場らしいです。
一応『beta版』みたいですが、問題はなさそうです。
React Bits
Bitsはコンポーネント共有サイト(ドキュメント)です
コンポーネントを共有・公開する事が可能です。
Git HubはプロジェクトですがReact Bitsはコンポーネントでの共有・公開となります。
公開に関しては、いくらでも大丈夫なんですが
非公開のコンポーネントの場合、数が限定されます。