DUICUO

現在の場所： ホーム > 記事 > 2019年にReact開発者が習得すべき22の素晴らしいツール

2019年にReact開発者が習得すべき22の素晴らしいツール

ご存知の通り、Reactは優れたユーザーインターフェースを構築するためのJavaScriptライブラリです。しかし、誰もが同じツールを使用しているわけではなく、React開発をより楽しく、そして積極的に進めるのに役立つ便利なツールをすべて知っているわけでもありません。

Reactをまだ使ったことがない方、あるいはReactに興味を持っている友人がいる方、なぜこのライブラリを選んだのかと聞かれたら、どう答えるべきでしょうか？まずは、このライブラリの素晴らしさを伝えるだけでなく（これが一番の答えになるはずです）、オープンソースコミュニティによって開発されたこれらのツールが、開発体験を全く新しい、刺激的なレベルへと引き上げてくれることもお伝えしたいと思います。

2019 年に React アプリケーションを構築するために使用できる 22 個のツールを紹介します (このリストは重要度順ではありません)。

1. webpack-bundle-analyzer

アプリケーションのどのパッケージや部分が最も多くのスペースを占有しているのか疑問に思ったことはありませんか？ webpack-bundle-analyzer を使えば、最も多くのスペースを占有している出力ファイルを特定するのに役立ちます。

ライブサーバーを作成し、バンドルの内容をインタラクティブなツリー図で視覚的に表示します。このツールキットを使用すると、表示されているファイルの場所、gzipファイルサイズ、解析済みサイズ、親ファイルと子ファイルの階層構造を確認できます。

メリットは何でしょうか？表示される図に基づいて React アプリケーションを最適化できるのです！

これはそのスクリーンショットです:

PDFパッケージがアプリケーション内で最大のスペースを占めていることがはっきりとわかります。また、画面領域も最大で占めており、これは私たちにとって便利です。

ただし、スクリーンショットの品質は非常に低いです。「generateStatsFile: true」などの便利なオプションを入力することで、より詳細な情報を表示できます。また、開発環境外のどこかに保存して後で使用できるように、静的なHTMLファイルを生成することもできます。

2. Reactプロト

React-Protoは、開発者とデザイナー向けのプロトタイピングツールです。デスクトップアプリケーションなので、使用する前にダウンロードしてインストールする必要があります。

ツールページのレイアウトは次のとおりです。

このアプリケーションを使用すると、プロパティとそのタイプを宣言したり、ツリー ダイアグラムでコンポーネントを表示したり、背景画像をインポートしたり、それらをステートフルまたはステートレスとして定義したり、親コンポーネントを定義したり、ズームイン/ズームアウトしたり、プロトタイプを新規または既存のプロジェクトにエクスポートしたりできます。

このアプリケーションは Windows もサポートしていますが、Mac ユーザーに適しているようです。

ユーザーインターフェースのマッピングが完了したら、既存のプロジェクトまたは新しいプロジェクトにエクスポートするかを選択できます。既存のプロジェクトにエクスポートし、ルートディレクトリを選択した場合、以下のように ./src/components にエクスポートされます。

サンプル内のコンポーネントの 1 つを使用する方法の例を次に示します。

React-Proto は GitHub で 2,000 個のスターを獲得しました。

ただし、このアプリケーションはまだ更新する必要があり、特に React Hooks のリリースなど、やるべき作業がたくさんあると思います。

背景画像が表示されていない場合、画像のサイズを変更することはできません。つまり、背景画像をインポートしてサイズを変更した後、画像を削除すると、操作ボタンがグレー表示になって操作できなくなるため、画像のサイズを変更できなくなります。

ズームインするには、背景画像を再インポートしてズームインし、その後削除するしかありません。この欠陥により、このツールに対する当初の好印象は一変しましたが、このオープンソースファイルは他に見当たらないため、リストに追加しました。もちろん、オープンソースであることはこのアプリケーションにとって良いことであり、将来的に人気のあるオープンソースリポジトリのリストに追加される可能性を秘めています。

3. なぜレンダリングしたのか

Reactのモンキーパッチ通知「なぜレンダリングしたのか？」は、再レンダリングを回避するのに役立ちます。これは非常に便利なだけでなく、プロジェクトのパフォーマンス修正の指針となり、Reactの仕組みを理解するのにも役立ちます。さらに、Reactの仕組みをより深く理解することで、より優れたReact開発者になれるのです。

モンキーパッチ：この名前はZopeフレームワークに由来しています。Zopeのバグを修正する際に、プログラムにアップデートパーツを追加することがよくありました。これらは「ゲリラパッチ」と呼ばれていました。その後、ゲリラは徐々にゴリラと表記され、さらにモンキーと表記されるようになりました。そのため、モンキーパッチという名前は不可解な形で生まれました。

追加の静的プロパティ whyDidYouRender を宣言し、その値を true に設定することで、任意のカスタム コンポーネントにリスナーをアタッチできます。

  1.  'react' から React をインポートする 
  2.  '@material-ui/core/Button' からボタンをインポートします。  
  3.  const子= (props) = >   < div {...props} />    
  4.  const Child2 = ({ children, ... props }) = > (  
  5.  < div {...props} >    
  6.  {children} <子供  />    
  7.  </div>    
  8.  ）  
  9.  Child2.whyDidYouRender = true    
  10.  const App = () = > {  
  11.  const [state, setState] = React.useState({})  
  12. 戻る （  
  13.  <div>    
  14.  <子> {JSON.stringify(state, null, 2)} </子>    
  15.  <div>    
  16. ボタン タイプ= "ボタン"   onClick ={() = > setState({ hello: 'hi' })} >    
  17. 提出する 
  18.  </Button>    
  19.  </div>    
  20.  <子供2 >子供 #2 </子供2 >    
  21.  </div>    
  22.  ）  
  23.  }  
  24. デフォルトアプリをエクスポート

これを実行すると、コンソールに非常に迷惑な警告が表示されます。

でも誤解しないでください。これは良いことだと捉えてください。これらの煩わしいメッセージは、無駄な再レンダリングを修正するのに役に立ちます。

4. Reactアプリを作成する

React アプリを作成することが、React プロジェクト (最新の機能をすぐに使用できる) の開発を開始する最も早い方法であることは誰もが知っています。

`npx create-react-app <name>` よりも簡単なものは何でしょうか?

Medium (および Dev.to) の私のチュートリアルではすべて、高速かつシンプルであるため、create-react-app を使用して React API を構築しています。

CRAを使ってTypeScriptプロジェクトを作成する方法がわからない方もいるかもしれません。必要なのは、末尾に`--typescript`を追加するだけです。

  1.  npx create -react-app <名前> --typescript

これにより、CRA プロジェクトに TypeScript を手動で追加する手間が省けます。

5. Reactライフサイクルビジュアライザー

React-Lifecycle-Visualizer は、任意の React コンポーネントのライフサイクル メソッドを追跡および視覚化するための npm パッケージです。

「Why Did You Render」と同様に、任意のコンポーネントを選択してライフサイクル視覚化ツールを起動できます。

  1.  'react' から React をインポートする 
  2. 輸入 {  
  3. ログ、  
  4.  VisualizerProvider、  
  5. トレースライフサイクル 
  6.  } 'react-lifecycle-visualizer' から 
  7. クラスTracedComponentはReact.Componentを拡張します{  
  8. 状態= {  
  9. ロード済み: false、  
  10.  }  
  11. コンポーネントマウント() {  
  12.  this.props.onMount()  
  13.  }  
  14. 与える（） {  
  15. トレースされたコンポーネントを返す< / h2 >    
  16.  }  
  17.  }  
  18.  const EnhancedTracedComponent = traceLifecycle (TracedComponent)  
  19.  const App = () = > (  
  20.  <ビジュアライザープロバイダー>    
  21. 拡張トレースコンポーネント  />    
  22.  <ログ  />    
  23.  </ビジュアライザープロバイダー>    
  24.  ）

結果は以下の通りです。

ただし、欠点の 1 つは、現在はクラス コンポーネントでのみ機能し、フックをまだサポートしていないことです。

6. グッピー

Guppyは、React用の使いやすく無料のアプリケーションマネージャー兼タスクランナーです。デスクトップでも実行でき、クロスプラットフォームの互換性もサポートしているので、安心してお使いいただけます。

React開発者にとって典型的なタスク（新規プロジェクトの作成、タスクの実行、依存関係の管理など）をサポートする、ユーザーフレンドリーなグラフィカルインターフェースを提供します。2018年8月にWindowsサポートが追加されたため、クロスプラットフォームであることは間違いありません。

Guppy を使用すると次のようになります。

7. react-testing-library

react-testing-library はユニットテストを書くときに使い心地が良いので、ずっと気に入っています。このパッケージは実用的なDOMテスターを提供し、優れたテストプラクティスを促進します。

このソリューションは、React コンポーネントの入出力をテストするのではなく、実装の詳細をテストしてユーザーに公開するという問題に対処することを目的としています。

実装の詳細をテストすることは、アプリケーションが期待通りに機能することを確認する効果的な方法ではありません。コンポーネントが必要なデータをどのように取得するか、ソート方法をどのように使用するかなど、より深く理解することは確かにできますが、別のデータベースを参照するように実装を変更しなければならない場合、ユニットテストは失敗します。これらはロジックを結合する実装の詳細です。

これは react-testing-library が解決する問題です。理想的には、ユーザーインターフェースが正しく動作し、最終的には正しく表示されることだけを望んでいるからです。これらのコンポーネントからデータがどのように取得されるかは、期待される出力が得られる限り、実際には重要ではありません。

以下は、このライブラリを使用してテストするためのサンプル コードです。

  1.  // テストケース間で再利用できるようにヘルパー関数（変数ではない）をホイストする 
  2.  constレンダリングコンポーネント= ({ count }) = >    
  3. 与える（  
  4. ステートモック 状態= {{ count }} >    
  5. ステートフルカウンター  />    
  6.  </StateMock>  
  7.  ）  
  8.  it('初期カウントをレンダリングします', async() = > {  
  9.  // 状態の漏洩を防ぐために、すべてのテストで新しいインスタンスをレンダリングします 
  10.  const { getByText } = renderComponent({ count: 5 })  
  11.  waitForElement(() = > getByText(/5回クリック/i))を待機します 
  12.  })  
  13.  it('カウントを増加', async() = > {  
  14.  // 状態の漏洩を防ぐために、すべてのテストで新しいインスタンスをレンダリングします 
  15.  const { getByText } = renderComponent({ count: 5 })  
  16.  fireEvent.click(getByText('+1'))  
  17.  waitForElement(() = > getByText(/6回クリック/i))を待機します 
  18.  })

8. React開発者ツール

React Developer Tools は、Chrome および Firefox 開発者ツールで React コンポーネント階層を表示できる拡張機能です。

これは、React 開発で最も一般的な拡張プラグインであり、React 開発者がアプリケーションのデバッグに使用する最も便利なツールの 1 つです。

9. ビット

Bitは、material-uiやsemantic-ui-reactなどのコンポーネントライブラリを使用する場合に最適な代替手段です。Bitを使えば、数千ものオープンソースコンポーネントを探索し、プロジェクトの構築に活用できます。

タブ、ボタン、チャート、テーブル、ナビゲーション バー、ドロップダウン メニュー、ロード ローテーター、日付ピッカー、パンくずナビゲーション、アイコン、レイアウトなど、誰でも使用できるさまざまな React コンポーネントが用意されています。

これらは、あなたや私と同じように、他の React 開発者によってアップロードされたものです。

ただし、日付間の距離をフォーマットするなどのユーティリティもいくつかあります。

10. ストーリーブック

Storybook を使い慣れておらず、UI コンポーネントを簡単に構築したい場合は、今すぐ使用することを強くお勧めします。このツールは、ホットリロードをサポートするライブ開発サーバーを起動し、React コンポーネントをリアルタイムで独自に開発できます。

もう1つの素晴らしい点は、既存のオープンソースプラグインを使用することで、開発エクスペリエンスを全く新しいレベルに引き上げることができることです。例えば、Storybook READMEパッケージを使用すれば、本番環境対応のReactコンポーネントを開発しながら、同じページにREADMEドキュメントを作成できます。これは通常のドキュメントページであれば十分です。

11. リアクトサイト

アプリケーションをフローチャートで表すとどうなるか、考えたことはありませんか？React-sightを使えば、アプリケーション全体の階層構造をツリー図で表示し、Reactアプリケーションの概要を明確に把握できます。React Router、Redux、React Fibreにも対応しています。

このツールを使用すると、ツリー内の直接関連するコンポーネントへのリンクであるノードの上にマウスを置くことができます。

結果の表示で問題が発生した場合は、アドレスバーに chrome:extensions と入力して React Sight を見つけてください。

以下に示すように、ボックスにチェックを入れ、「ファイル URL へのアクセスを許可する」スイッチをクリックします。

12. リアクトコスモス

React-cosmos は、再利用可能な React コンポーネントを作成するための開発ツールです。

プロジェクト内のコンポーネントをスキャンし、次の機能を実行できます。

  • プロパティ、コンテキスト、状態の任意の組み合わせを使用してコンポーネントをレンダリングします。
  • 各外部依存関係（API レスポンス、localStorage など）をシミュレートします。
  • 実行中のインスタンスと対話するときに、アプリケーション状態のリアルタイムの変化を表示します。

13. コードサンドボックス

これは、この推奨事項で利用できる最高のツールの 1 つであり、瞬きするよりも速く (まあ、それほど速くはないかもしれませんが)、React を手動で使用できるようになります。

CodeSandbox と呼ばれるこのツールは、プロトタイプの作成から Web アプリケーションの展開まで、すべてをこの Web サイトで実行できるオンライン エディターです。

Codesandboxは当初Reactのみをサポートしていましたが、現在ではVueやAngularなどのライブラリもサポートしています。また、GatsbyやNextJSといった一般的な静的サイトジェネレーターを使ったプロジェクト作成もサポートしており、Reactを使ったWebプロジェクトを立ち上げる際にも役立ちます。

Codesandbox は活発なだけでなく、議論すべき興味深い事柄も数多くあります。

利便性のために構築されているいくつかのプロジェクトを調べたい場合は、「調べる」をクリックすると、次のプロジェクトに役立つ豊富なコード例に簡単にアクセスできます。

プロジェクトの編集を開始すると、実際に強力な VSCode エディターを使用していることがわかります。

現在 CodeandBox で利用できるすべての機能を概説した完全な記事を書きたいのですが、今のところその作業は完了したようです。

14. リアクトビット

React Bits は、React のパターン、テクニック、ヒント、コツを集めたもので、すべてオンライン ドキュメントに似た形式で書かれており、さまざまなデザイン パターンやテクニック、アンチパターン、スタイル、UX のバリエーション、その他の役立つ React 関連の資料に 1 つのタブからすぐにアクセスできます。

彼らの GitHub リポジトリには現在 10,437 個のスターが付いています。

例としては、プロッププロキシなどの概念、さまざまなシナリオでのさまざまな UX の組み合わせの処理、さらにはすべての開発者が避けるべき落とし穴に関するヒントなどがあります。

彼らのページは次のようになります。左側のメニューを見るとわかるように、たくさんの情報があります :)

15. フォルダ分け

Folderizeは、コンポーネントファイルをコンポーネントフォルダ構造に変換できるVSCode拡張機能です。変換されたReactコンポーネントは、ディレクトリに変換されただけで、コンポーネントであることに変わりはありません。

例えば、ファイルを属性として利用し、メタデータなどの有用な情報を表示するReactコンポーネントを作成しているとします。メタデータコンポーネントのロジックは多くの行数を必要とするため、別のファイルに分割することにしました。しかし、そうすると関連するファイルが2つに分かれてしまいます。

したがって、ディレクトリが次のようになっているとします。

FileView.jsとFileMetadata.jsをApplesのようなディレクトリ構造に抽象化したい場合があります。特にFileScanner.jsのようなファイル関連コンポーネントを追加したい場合は、folderizeがそれを可能にします。これにより、次のような構造を持つことができます。

  1.  'react' から React をインポートする 
  2.  './src/components/FileView' から FileView をインポートします。  
  3.  const App = (props) = >   <ファイルビュー{...props} />    
  4. デフォルトアプリをエクスポート

16. Reactスタータープロジェクト

React Starter Projectsは、依存ライブラリの優れたリストで、すべてのプロジェクトを1ページで確認できます。そのため、一度に多数のオプションを素早く確認したい方に最適です。

適切な入門プロジェクトを見つけたら、リポジトリを簡単にクローンし、アプリケーションのニーズに合わせて簡単な変更を加えることができます。ただし、すべてのライブラリがクローンに使用できるわけではありません。一部のライブラリは、プロジェクトの依存関係としてインストールする必要があるためです。これにより、アップデートの取得が容易になり、プロジェクトをクリーンな状態に保つことができます。

ページは次のようになります。

17. ハイライト更新

これは、すべての開発者ツールキットに必須と言えるでしょう。Highlight Updates は、React DevTools の拡張機能で、ページ上のどのコンポーネントが不必要に再レンダリングされているかを確認できます。

重大な再レンダリングの問題はオレンジ色/赤色でマークされ、ページの開発時にパフォーマンスの問題をより簡単に特定できるようになります。

平凡なアプリケーションを作ることが目的でない限り、私たちが持っているこの素晴らしいものをなぜ提供しないのでしょうか?

18. React 差分ビューア

React Diff Viewerは、DiffとReactを使用して構築されたシンプルで美しいテキスト差分ビューアです。分割画面表示、インライン表示、単語差分、行のハイライト表示など、さまざまな機能をサポートしています。

この機能をメモ帳（Boostnote など）に埋め込み、アプリケーション（テーマの色、ストーリー プレゼンテーション ドキュメントの組み合わせなど）にカスタマイズしたい場合に非常に便利です。

19. JSコーチ

JS.coachは、React関連の資料を探すのによく使うウェブサイトです。なぜこのサイトをあまり紹介していないのか分かりませんが、必要な情報はほぼすべてここで見つかります。高速で便利、そして常に更新されているので、あらゆるプロジェクトに必要な結果が得られます。

最近、React VR タブが追加されました。素晴らしいですね!

20. 素晴らしい反応

Awesome React オープンソースライブラリは、React 関連ライブラリの素晴らしいリストです。

これを見て、他のウェブサイトのことなど忘れて、このリンクからだけReactを学ぼうと思うかもしれません。ここには、素晴らしいReactアプリケーションを構築するのに役立つ、役立つリソースが山ほどあるからです！

21. プロトンネイティブ

Proton Native は、クロスプラットフォームのネイティブ デスクトップ アプリケーションを構築するための React 環境を提供します。

これは Electron の代替であり、次のようないくつかの基本的な機能のみを備えています。

  • React Nativeと同じ構文
  • Reduxなどの既存のReactライブラリと互換性がある
  • クロスプラットフォーム
  • ネイティブコンポーネント、Electronは使用しなくなりました
  • すべての通常のNode.jsパッケージと互換性があります

さらに詳しく知りたいですか？ ドキュメントをお読みください。

22. Devhints React.js チートシート

Reactのチートシートとしては悪くないですが、React Hooksが抜けています。ご安心ください。React v16.8以降用のチートシートも作成予定ですので、お楽しみに。

結論は

これらはすべてこのプレゼンテーションで共有されたツールです。

皆様がここで貴重な情報を見つけられたことを願っています。

ラベル

関連するおすすめ記事

ランダムにおすすめされた記事

人気のタグ