deve.K

エンジニアが未来を切り開く。

English

React オススメ開発者ツール


スポンサーリンク

react画像

こんにちは!本日は便利ツールの紹介ですが React関連になります

Reactアプリケーションの開発とデバッグの両方に役立ちます

貴方がReactを学び、求人市場で競争力のあるプレーヤーになるためには、スキルセットを拡張することが常に重要となります。

2021年にReact開発者ツールが使用されている中から個人的にこのツールたちは是非とも使用してもらいたい、オススメをピックアップしました。

日本だけではなく、海外での利用者も多いです。

React Developer Tools

f:id:dev04K:20211211114144j:plain:w550:h250

f:id:dev04K:20211211114204g:plain:w550:h250

まずはReact開発者で最も人気のあるツールになります

Chrome用の拡張機能の『React Developer Tools』です。

Reactコンポーネントの階層を確認できます。

画面にレンダリングされたコンポーネントのリストに加え、子コンポーネントも表示できそれを選択すると

『状態』『小道具』を調べ編集が可能となります。

開発者がReactアプリをデバッグするのに、人気があり便利な方法となります。

アプリのパフォーマンスを測定して、すべてがスムーズに実行されているかどうかを確認することもできます。

Reactやってる方であればまず、1番オススメしたい間違いなく便利なツールの1つです。 

React Sight

f:id:dev04K:20211211115434g:plain:w600:h350

www.reactsight.com

こちらは先程の『React Developer Tools』と組み合わせ活用する拡張機能です。

こちらをインストールすると、DevToolsの一部として『ReactSight』用の新しいタブが開きます。

このツールを使用すれば、自身が作成した全てのコンポーネントを視覚化しツリー構造で表示されます。

カーソルを合わせれば、『状態』『小道具』の確認ができます。

ローカルURLを実行してる場合は、拡張設定で先程の『React Developer Tools』どちらとも

『ファイルURLへのアクセスを許可する』を有効化して下さい。



Storybook

storybook.js.org

StorybookはUIのコンポーネントをアプリケーションに組み込まず、独立して開発できる便利なツールとなっています。

なので指定したコンポーネントを個別化し『動作』『UI』の確認が可能となります。

学習時には結構オススメします。

使用方法は、ご自身のプロジェクトにStorybookが

公式で出してるCLIを使用すれば簡単に作成が可能です。 

npx -p @ storybook / cli sb init

コマンド実行でstorybookをランチする。

npm run storybook

※Vue.jsで使用したい方は別のコマンドになります。

React Live

f:id:dev04K:20211211114901g:plain:w600:h350

react-live.netlify.app

React Liveはライブで編集が可能なReactコンポーネントを手軽にレンダリングできます。

Reactコードをライブ編集するための柔軟な遊び場らしいです。

一応『beta版』みたいですが、問題はなさそうです。

React Bits

Bit for React · Docs

Bitsはコンポーネント共有サイト(ドキュメント)です

コンポーネントを共有・公開する事が可能です。

Git HubはプロジェクトですがReact Bitsはコンポーネントでの共有・公開となります。

公開に関しては、いくらでも大丈夫なんですが

非公開のコンポーネントの場合、数が限定されます。

プライバシーポリシー