トップ > React基礎 > React.jsのよくある質問と簡単な回答：初心者向けガイド

React.jsのよくある質問と簡単な回答：初心者向けガイド

React基礎

React.jsのよくある質問と簡単な回答：初心者向けガイド

Reactよくある質問

React.jsについてのよくある質問と簡単な回答をまとめました。

React.jsにお困りの場合は、この記事を参考にして問題解決を試みてください。

これらの質問は、React初心者がよくする質問です。

※ 注意点

この記事で提供される回答は、必ずしも最善の方法や正確性を提供しているわけではありません。

最も簡単で適切な方法を解説しています。

最終的な判断はご自身でお願い致します。

最も多い質問

Reactとは何ですか？

Reactは2013年にFacebookのソフトウェアエンジニアの「Jordane Walke」氏によってオープンソースプロジェクトとしてリリースされ、Netflix、Uber、Airbnbなどの大手企業にも広く使用されました。

React.jsはフレームワークではなく、具体的にはJavaScriptライブラリです。

Webアプリやモバイルアプリ開発に使用できます。 Reactの人気は操作が便利で、インターフェースを作成する際の柔軟性と自由度が最大であることによるものです。 dev-k.hatenablog.com

Reactの長所は何ですか？

Reactは実際にはMVCアーキテクチャに従っているわけではありません。代わりに、ReactはUIコンポーネントベースのライブラリです。

Reactは主にビューレイヤーの構築に特化しており、ユーザーインターフェース（UI）の作成と管理に焦点を当てています。仮想DOMを使用してUIを効率的にレンダリングします。

仮想DOMは、Reactが必要な変更のみを更新するための内部メカニズムです。これにより、UIの再レンダリングが効率的に行われ、パフォーマンスが向上します。

ReactはJavaScriptのフレームワークではなく、ライブラリとして位置づけられています。ただし、Reactは他のライブラリやフレームワークと組み合わせて使用することができます。

Reactの利点には、再利用可能なコンポーネントの作成、データの効果的な管理、仮想DOMによるパフォーマンスの最適化などがあります。

また、ReactはSEOに適しており、開発者が魅力的なUIを簡単に作成し、さまざまな検索エンジンでナビゲートしやすくすることができます。さらに、サーバーサイドのレンダリングも可能であり、アプリのSEO向上にも役立ちます。

Reactは広範なエコシステムを持つライブラリであり、要件に応じて最適なアプリケーションを開発するためにツールやライブラリ、アーキテクチャを自由に選択することができます。

Reactの短所は何ですか？

ReactはJavaScriptのライブラリです。Reactを使用すると、UIコンポーネントを構築することができます。ただし、ReactはMVC（Model-View-Controller）フレームワークではありません。複雑なユーザーインターフェースの構築には、追加の知識が必要です。

Reactのエコシステムは広範であり、全体を理解するには時間がかかるかもしれません。また、ReactではJSX（JavaScript XML）と呼ばれる構文を使用します。JSXは初めて接する人にとっては少し難しく感じるかもしれませんが、慣れてくると強力なツールとなります。

Reactの開発ペースは非常に速く、常に進化しています。開発者は新しいプロセスやメカニズムを学びながら追いつく必要があります。一部の開発者はこの速い進化に不満を抱くこともあります。

Reactには充実したドキュメントがありますが、アップデートや新しいリリースが頻繁に行われるため、完全なドキュメントを作成するには時間がかかることがあります。Reactのドキュメントだけでなく、関連するライブラリやツールのドキュメントも重要です。一部のテキストガイドは詳細をカバーしていない場合もありますが、コミュニティやオンラインのリソースを活用することで補完することができます。

dev-k.hatenablog.com
Reactの機能はなんですか？

Reactの主な機能は次のとおりです。

※最新であるReact v18機能も含めます。

・ JSX

・ 仮想DOM

・ コンポーネント

・ パフォーマンス

・ シンプルさ

・ 一方向のデータフロー

・ 同時レンダリング(並行性)

・ 自動バッチ処理

・ 状態管理

・ サスペンス機能

・ フック

・ React Native

React v18新機能については下記で解説ております。

dev-k.hatenablog.com
なぜReactを使用する？

React.jsは、2021年に世界中の開発者の間で最も使用されたWeb開発フレームワークとして注目されました（参考：Statista）。日本ではまだあまり馴染みがありませんが、ReactはインタラクティブなUIの開発を可能にする効率的なJavaScriptフレームワークです。柔軟性と使いやすさを統合し、優れたアプリケーションを構築することができます。

ただし、先述のStatistaのデータは2021年のものであり、最新の統計情報ではありません。Reactや他のフレームワークの人気は年々変動していますので、最新の統計を確認することをお勧めします。

また、Reactの学習には時間と努力が必要です。初学者にとっては学習曲線があり、JavaScriptや基本的なWeb開発の知識が必要です。一般的には、Reactを短期間で習得することは難しいとされています。

Reactの魅力は、宣言型のオープンソースJavaScriptライブラリであることや、柔軟性、効率性などの特徴にあります。これらの側面により、Reactを使用することでWebアプリケーションの開発が容易になり、スケーラブルでシンプルなフロントエンドアプリケーションを構築することができます。

ただし、Reactはフロントエンドの開発に特化したライブラリであり、バックエンドの開発には直接関係ありません。バックエンドの技術やフレームワークの選択は、プロジェクトの要件や開発者の好みによって異なります。

最後に、個人的な意見として、私はReactの開発者として長年の経験がありますが、日本でもReactを学ぼうとする人々が増えていると感じています。SNSや学習意欲の高まりからもその兆候が見受けられます。Reactの学習は時間がかかりますが、他のWeb開発技術よりも比較的短い時間で学び始めることができます。

Reactの代替えはありますか？

はい、ございます。

まずは、Reactの代替品を探している場合は、最初にそれらが必要な理由を理解する必要がありますので、よく考えてから切り替えを検討下さい。

ReactJSの代替可能な人気のあるものは以下となります。

・ Inferno JS

Inferno.jsは効果的なUIを作成するためのReactのようなライブラリを提供する高速でパフォーマンス重視のJavaScriptツールです。

・ Xamarin

正式名称は`Powered by Microsoft Xamarin`でReactの無料のオープンソース代替手段となります。

iOS、Android、watchOS、tvOS、macOS、およびWindowsアプリに対応しています。パフォーマンス重視のアプリケーションを作成するために使用される方が多いです。

・ Ember JS

Ember.jsは、クライアント側のレンダリングテンプレート構造になっておりURLサポートを提供するReactの人気のある代替手段です。

・ Flutter

Flutterは、Googleが提供する主要なオープンソースのUIフレームワークです。開発者は特定のコードベースを介し、モバイル、デスクトップ、およびWeb用のクロスプラットフォームアプリを作成できます。

・ Backbone JS

Backbone.jsは、Webアプリケーションに構造を提供する人気のあるJavaScriptライブラリとなっています。1つのJSライブラリに依存している為、非常に軽量です。

・ Vue JS

Vue.jsは、Reactの優れた代替手段として、より高速でスマートなアプリを簡単に作成でき、シンプルでありながら強力なJavaScriptフレームワークです。モジュールであり、Reactと比較して軽量となっています。

・ Angular JS

Angular.jsは、高速で効果的かつ効率的なWebアプリケーション開発およびモバイルアプリケーション開発が可能でWeb、デスクトップ、およびモバイルアプリの構築に役立ちます。Googleが提供するオープンソースフレームワークです。

・ Preact

Preactは、精度とコンパクトさを備え持つ単純な実装を備えた最速のV-DOMライブラリの1つです。Web/モバイルアプリケーションを作成するためのReactライブラリの軽量オプションになります。

・ Aurelia

Aureliaは、アプリケーションとコンポーネントをシームレスな統合を提供する人気のあるツールです。ES2016を使用して作成されており、Web、モバイル、およびデスクトップアプリケーションを作成するための強力なツールで人気があります。

・ Riot JS

カスタムタグを使用し効果的なUIを作成し、初心者が簡単に始められるので人気のあるライブラリです。

・ React-lite

React-liteは、Reactのサブセットだと思って下さい。スクリプトのサイズを小さくするために最適化されたReactの並列実装となっており、機能操作にReactDOMサーバーを利用しています。

ReactをReact-liteに置き換えることにより、JavaScriptバンドルのサイズが大幅に減少します。jsファイルのバンドルサイズを減らしたいモバイルサイトにとっては依然として優れた選択肢と言えます。

・ Cycle.js

Cycle.jsは、Reactの優れた代替手段として、リアクティブおよび機能ストリームできるリアクティブJSフレームワークです。リアクティブプログラミング(RP)は、非同期データストリームを使用したプログラミングです。

その関数型プログラミングの概念は、関数が入力と出力のみを持ち、エラーが最小であることを保証致します。

・ Svelte

Svelteは、UIを作成するための有名な無料のオープンソースコンパイラです。アプリケーションの状態が変更されるとすぐにDOMを更新し、より良い反応性、拡張性、速度を提供し軽量で既存のJSライブラリを活用します。

仮想DOMはなく、記述する必要のあるコードも少なく、複雑な状態管理ライブラリもございません。その為Svelteは小規模なアプリケーションや小規模なチームに最適となっています。

・ Mithril JS

Mithril.jsは単一ページのアプリを作成するための、クライアント側のJavaScriptフレームワークです。サイズが小さく、パフォーマンスが高速となっておりルーティングおよびXHRユーティリティを提供します。

また、習得が比較的容易です、読み込みが非常に速くてAPIが同業他社と比較しても小さくなっています。仮想DOMを使用するので、そのテンプレートが最初にコンパイルされます。

・ Vanilla JS

Vanilla.jsはJQueryのような他のライブラリやフレームワークなしでプレーンJavaScriptを使用します。つまり純粋なJavaScriptを示しています。純粋なJSを深く知っていると、複雑な問題を解決できるエンジニアになれる事は間違いありません。

ReactとReact Nativeの違いは？

React Nativeは、ある意味でReact.jsと非常に似ています。React.jsは、フロントエンドのオープンソースJavaScriptライブラリであり、UIの構築に使用されます。一方、React Nativeはモバイルフレームワークであり、開発者がAndroidやiOSなどのプラットフォームでReactを使用できるようにします。

React Nativeは、JavaScriptを使用してWindows、Android、iOSなどのさまざまなプラットフォームで実行できる再利用可能なコンポーネントを備えたネイティブモバイルアプリケーションの開発に優れています。React Nativeを使用してMVP（Minimum Viable Product）を構築する場合、開発時間を大幅に節約できます。

React Nativeは、1つのコアAPIを利用して、iOSとAndroidの両方に同じAPIを提供し、両方のプラットフォームでアプリを実行できるようにします。また、React.jsと同様に、React Nativeもホットリロード機能や優れたUIを提供し、モバイルアプリのリロードによる柔軟性があります。これにより、開発者の貴重な時間を節約し、開発プロセスを加速することができます。

React Nativeを使用すると、アプリをより迅速に構築することができます。React Nativeでは、アプリのレンダリングにHTMLを使用せず、独自のコンポーネントを提供しています。一方、React.jsでは仮想DOMを使用してコードのレンダリングを行います。さらに、React.jsではコンポーネントの再利用性が強化され、時間を節約することができます。

React.jsでは、サーバーサイドのレンダリングが可能であり、WebページやアプリのSEOを向上させ、優れたUXを実現することができます。また、React.jsには巨大な開発者ツールのエコシステムも存在します。React.jsを使用すると、より少ないコーディングで動的なアプリケーションを簡単に作成することができます。

なぜブラウザはJSXを読み取れない？

WebブラウザではJSXを直接読み取ることはできません。

これは、通常のJSオブジェクトのみを読み取るように構築されており、JSXは通常のJavaScriptオブジェクトではないためです。つまりブラウザは母国語であるJavaScriptのみしか直接は読み取ってはくれません。

ブラウザはどのようにしてJSXファイルを読み取る事ができますか？

JSXはJavaScriptオブジェクトのWebブラウザで理解できる形式に変換する必要があります。

ブラウザがJSXを読み取れるようにするには、「Babel」を使用して、JSXファイルをブラウザが理解できるネイティブのJavaScriptオブジェクトとHTMLに変換してから渡してあげなければいけません。

Babelは、最新のJavaScript(ES6)を古いES5のJavaScriptに変換するJavaScriptトランスパイラーです。すべての最新のJavaScript機能はまだすべてのブラウザでサポートされているわけではありません。

ES6機能をすべてのブラウザで理解できるES5にトランスパイルするために使用され、BabelではJSXをサポートしております。つまりBabelはES6のトランスパイラーでもありJSXトランスパイラーでもあるのです。

あなたがCreate-React-App(CRA)を使用している場合に限り、CRAではBabelが組み込まれているので別途、統合する必要性はありません。また、JSXを使用しない場合はBabelは必要ない場合もあります。

Reactプロジェクトを開始するにはどうすればいいですか？

Reactを始める方法はいくつかあります。

Reactを学び始めるための簡単な方法は、HTMLファイルに直接Reactを組み込むことです。

以下のスクリプトをHTMLのheadタグ内に含めると、Reactを使用することができます。

<head>

<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>

<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

</head>

この方法は主に学習やテストの目的で推奨されますが、本番環境では別の設定が必要です。

2つ目の方法に一般的には、Create React Appというツールを使ってReactアプリケーションを構築します。

Create React Appは、単一ページのReactアプリケーションの作成に公式でサポートされている方法です。これを使うと、特定の設定やツール（WebpackやBabelなど）のインストールや構成をする必要がありません。

Create React Appを使うためには、Node.jsをインストールしておく必要があります。

次のコマンドを使用して、グローバルとしてCreate React Appをインストールします。

npm install -g create-react-app

Create React Appがインストールされたら、次のコマンドを実行するだけで新しいReactプロジェクトを作成できます。

npx create-react-app my-react-app

また3つ目の方法として、独自でWebpackとBabelを設定しReactプロジェクトをセットアップする方法もあります。

この方法は、Create React Appを使用したくない場合に適しています。

Create React Appでは、WebpackとBabelが事前に設定されており、1つのコマンドでReactをすぐに始めることができます。一方で、WebpackとBabelを独自にセットアップしてプロジェクトを構築する場合は、ある程度の専門知識が必要です。

WebpackとBabelが何をしているのか、そしてReact.jsとの関係を理解する必要があります。

初心者の場合は、Create React Appを使ってReactを始めることをおすすめします。

以上が、Reactを始めるためのいくつかの方法です。

dev-k.hatenablog.com dev-k.hatenablog.com
リアルDOMとReactDOMの違いは何ですか？

実際のDOMと同様に、仮想DOMもツリー構造として表されます。

唯一の違いは、変更のたびに実際のDOMではなく仮想DOMが更新されることです。

実際のDOMはHTMLから直接更新が可能ですが、仮想DOMはJavaScriptのオブジェクトとして存在し、HTMLとは独立しています。

要素が更新された場合、実際のDOMでは必要な部分だけが再構築されます。仮想DOMは変更があった部分のみを検出し、その部分のみを更新します。したがって、必ずしも全体のツリーを再構築するわけではありません。これにより、効率的なパフォーマンスを実現します。

仮想DOMは実際のDOMよりも多くのメモリを使用しますが、この差は通常無視できるほど小さくなります。仮想DOMのメリットは、パフォーマンスの向上にあります。

Reactでは、「VirtualDOM diff」と呼ばれるアルゴリズムを使用して、仮想DOMの変更箇所を効率的に検出し、更新します。各UIはReactのコンポーネントとして個別に管理され、それぞれが独自の状態を持っています。データの更新時には、最新の状態に基づいて再レンダリングされますが、状態は失われません。

仮想DOMはメモリ使用量を削減し、高速かつ簡単なレンダリングを可能にします。

さらに違いを詳しく学びたい方は以下を参照ください。

dev-k.hatenablog.com
Reactでのcreate-react-appとはなんですか？

Create-React-App（CRA）は、React（Meta）の公式CLI（コマンドラインインターフェース）であり、ビルド構成なしでReactアプリを簡単に作成するためのツールです。

WebpackやBabelなどのツールのインストールや構成は不要です。CRAにはこれらがすべて含まれています。

CRAは非常に便利で、簡単にインストールでき、1つのコマンドでReactプロジェクトを開始できます。

npmまたはyarnのコマンドを使用してCRAをインストールできます。

CRAでは、変更を加えると自動的にアプリケーションがリロードされるウォッチャーが付属したWebpackローカル開発サーバーが起動します。

CRAにはES6およびES7の一連の機能をサポートする独自のBabelプリセット（babel-preset-react-app）が付属しています。

スタイリングでは、必要なCSSファイルをインポートするだけでスタイルを追加できます。アプリケーションをビルドすると、すべてのCSSファイルが1つのバンドルに結合され、ビルドフォルダーに追加されます。

また、CSSモジュールもサポートされており、CSSセレクターの名前の競合を回避することができます。

CRAは開発時間を大幅に節約できる効率的なツールです。

dev-k.hatenablog.com
Reactでのルーティングは従来と、どのように異なりますか？

まず従来のルーティングでは、ユーザーはナビゲーションバーで提供されるリンクを使用し、さまざまなページにアクセスしたり、フォームで提供されたボタンを送信したりできます。

ユーザーがそのリンクまたはボタンをクリックすると、表示が変更され、URLが更新されます。

そしてURLが変更されるたびに、ブラウザは新しいページのリソースをサーバーにリクエストし、サーバーから応答を受け取ります。

サーバーはリクエストを受け取り、URLのパス名をチェックして、それに応じて適切なデータやコンテンツを含んだ新しいHTMLページを返します。

このプロセスが従来のルーティングです。

従来のルーティングでは、ページ全体が更新されるため、表示には時間がかかる可能性があります。

では、レンダリング時間を短縮し、ページ全体を更新する必要がないようにするにはどうすれば良いでしょうか？

そこでクライアント側ルーティングまたはReactRouterライブラリが使用されます。

React Routerは動的ルーティングを使用します。

React Routerと動的なクライアント側ルーティングにより、ユーザーがナビゲートするときにページを更新することなく、ナビゲーション付きの単一ページのWebアプリケーションを構築できます。

つまり、クライアント側ルーティングでは、ページのリクエストがサーバーに送信されないため、ページの更新にはサーバーとのやり取りが必要ありません。

代わりに、ページにロードされたJavaScriptがルーティングプロセスを処理します。

React Routerはコンポーネント構造を使用し、適切な情報を表示するためのコンポーネントを呼び出します。その結果、Webページの一部のみが更新されるため、ページ全体を更新する必要はありません。

ですので、クライアント側のルーティングでは、URLが更新されるたびにページ全体を更新する必要はありません。

従来のルーティングと比べて、クライアント側のルーティングでは、ページ遷移時にサーバーへのリクエストが発生せず、ページの一部のみが更新されます。これにより、レンダリング時間が短縮され、ユーザー体験が向上します。

また、クライアント側のルーティングでは、URLの変更に伴ってサーバー側で新しいページをレンダリングする必要がないため、サーバーの負荷が軽減されます。

さらに、クライアント側のルーティングは、SPA（Single Page Application）としての開発を可能にします。これにより、ユーザーがナビゲーションを行ってもページ全体がリロードされることなく、スムーズな遷移が実現されます。

しかし、クライアント側のルーティングでは、初回のページロード時にすべての必要なリソース（JavaScript、CSS、画像など）を一度に読み込む必要があります。そのため、初回のロード時間が増える可能性があります。また、ブラウザのJavaScript実行環境に依存しているため、一部のユーザーがJavaScriptを無効にしている場合には正常に動作しないことがあります。

総じて、クライアント側のルーティングは、高速なページ遷移とスムーズなユーザー体験を提供する一方で、初回のロード時間やJavaScriptの依存性に注意する必要があります。

dev-k.hatenablog.com
AJAXはReactでも使用可能ですか？

はい、可能です。

ですがReactはJavaScriptベースのライブラリであり、HTTPリクエストを行う機能は元々ありません。 しかしHTTPリクエストの作成は、Webアプリケーションの基本的な部分です。

それを実現させるには、サードパーティのライブラリを使用する必要があります。

ReactアプリにHTTP呼び出しを行うために利用できるライブラリは様々あります、それは以下となります。

・ Axios

・ Fetch

・ Superagent

・ React-axios

・ Use-http

・ React-request

Reactアプリでデータを送信する場合、開始する最も簡単な方法は、ブラウザのFetchAPIの使用です。 FetchはReactだけでなく、AngularやVuejsなどの他のフレームワークからも使用できます。

フックでAJAX呼び出しを行う場合は、useStateとuseEffectフックを組み合わせ、呼び出します。

フックでのFetch使用方法は以下で詳しく解説しておりますので参照ください。

dev-k.hatenablog.com
ReactでjQueryを使用するにはどうすればよいですか？

※統合する前に注意点がございます、どうかReact内部でJQueryを使用しないようにしてください。

React内でjQueryを使用することが推奨されない理由についてはございます。

それはReactでは実際のリアルDOMではなく、仮想DOMと呼ばれる概念を使用している為です。つまり仮想DOMの外部でブラウザのDOMを変更すると、React状態、イベント、UIレンダリングなど様々なレンダリング処理はされず変更は認識されなくなる可能性があります。

ですが、使用する事は可能ではあります。その方法は、基本的にはnpm経由でJQueryをインストールします。

npm install jquery
JQueryをJQueryパッケージの` $ `としてインポートします。 
import $ from "jquery"

もし、あなたがReact内部でJQueryを使用する事を検討しているのであれば、両方が使用されている場合は、開発者はそれぞれが何をしているのか、そしてもう一方がそれをどのように処理するのかをしっかりと知っておく必要があります。バグが発生する可能性があるので、適切に扱って下さい。

dev-k.hatenablog.com
クラスコンポーネントは学ぶ必要ありますか？またはスキップしても大丈夫ですか？

フック（Hooks）はReact 16.8以降のバージョンで導入された機能であり、関数コンポーネントで使用されます。

現代のReact開発では、関数コンポーネントとフックの組み合わせが一般的です。

クラスコンポーネントはReactの一部ですが、関数コンポーネントと比べて優れているわけではありません。ライフサイクルや仮想DOMなど、Reactに関連する概念を学習する際には、クラスコンポーネントから学ぶことも役立つかもしれませんが、関数コンポーネントとフックの理解も重要です。

フックは、状態管理や副作用の処理など、関数コンポーネントでの開発をよりシンプルにするための仕組みです。適切な学習環境やニーズに合わせて、選択することをお勧めします。

dev-k.hatenablog.com dev-k.hatenablog.com

機能に関する質問

JSXとは何ですか？

JSXは、JavaScriptXMLの略語です。

JSXは、Reactで使用されるXML/HTMLに似た構文であり、ECMAScriptを構文拡張して、XML/HTMLに似たテキストをJavaScript/Reactコードと共存できるようにします。全機能を備えています。

JavaScriptコード内にHTMLコードを記述するための構文です。つまり、それらを1つのファイルに混在させることができます。

const name = "React";

const App = <h1 className="#">Hello, {name}</h1>

// Hello, React
dev-k.hatenablog.com

Reactコンポーネントとはなんですか？

Reactのコンポーネントは、再利用可能なUIの一部であり、互いに独立して機能します。

コンポーネントは一般的に同じ構造を持ちますが、必ずしも同じ構造である必要はありません。コンポーネントは異なる構造を持つことができ、他のコンポーネントと組み合わせて使用することもあります。

コンポーネントは独自の状態やプロパティを持ち、これらを使用してUIをレンダリングします。クラスコンポーネントと関数コンポーネントは、Reactにおける2つの主要なコンポーネントのタイプです。

クラスコンポーネントは古いReactコードでは一般的に使用されていましたが、React v16.8以降では、関数コンポーネントが導入され、フックという仕組みが使われるようになりました。フックを使用することで、関数コンポーネントでも状態の管理やライフサイクルの処理が可能になりました。

また、純粋コンポーネント（Pureコンポーネント）と高階コンポーネント（HOC）という概念も存在します。純粋コンポーネントは、同じ入力に対して常に同じ出力を返すように設計されたコンポーネントです。高階コンポーネントは、他のコンポーネントをラップして機能を追加するための設計パターンです。

高階コンポーネント（HOC）は高度な設計パターンですので、初心者では覚える必要性はありません。

dev-k.hatenablog.com
クラス・関数コンポーネントの違いは何ですか？

関数コンポーネントとクラスコンポーネントの違いについて説明します。

まず、構文の違いから見ていきましょう。

// クラスコンポーネント
class App extends React.Component {
  render() {
    return <h1>Hello, world</h1>;
  }
}

// 関数コンポーネント
const App = () => {
  return <h1>Hello, world</h1>;
}

クラスコンポーネントは、`React.Component`を拡張するクラスとして定義されます。 一方、関数コンポーネントはJavaScriptの関数として定義されます。

次に、イベント処理の構文の違いを見てみましょう。

// クラスコンポーネント
class App extends React.Component {
  handleClick() {
    // クリックイベントの処理
  }

  render() {
    return <button onClick={this.handleClick}>Click me</button>;
  }
}

// 関数コンポーネント
const App = () => {
  const handleClick = () => {
    // クリックイベントの処理
  };

  return <button onClick={handleClick}>Click me</button>;
}

クラスコンポーネントでは、renderメソッド内でイベントハンドラを定義し、onClick属性に参照を渡します。 一方、関数コンポーネントでは、イベントハンドラを関数として定義し、その関数をonClick属性に渡します。

また、クラスコンポーネントでは状態の管理やライフサイクルの処理に`this`キーワードやライフサイクルメソッド（constructorやcomponentDidMountなど）を使用しますが、関数コンポーネントではHooks（フック）を使用して同様の機能を提供します。

// クラスコンポーネント
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      title: 'This is the first test'
    };
  }

  componentDidMount() {
    // コンポーネントのマウント後に実行する処理
  }

  render() {
    return <div>{this.state.title}</div>;
  }
}

// 関数コンポーネント
const App = () => {
  const [title, setTitle] = useState('This is the first test');

  useEffect(() => {
    // コンポーネントのマウント後に実行する処理
  }, []);

  return <div>{title}</div>;
}

クラスコンポーネントでは`constructor`メソッドと`super`呼び出しを使用して状態を初期化し、`componentDidMount`メソッドなどのライフサイクルメソッドを使用してコンポーネントのマウント後に実行する処理を定義します。

一方、関数コンポーネントではuseStateフックを使用して状態を初期化し、useEffectフックを使用してコンポーネントのマウント後に実行する処理を定義します。

dev-k.hatenablog.com

ReactのProps(小道具)とは何ですか？

Props（プロパティ）は、オブジェクトの一種であり、タグの属性の値が格納されます。Reactや一部の他のフレームワークでは、Propsはコンポーネント間でデータを受け渡すために使用されます。

Propsを使用すると、データを1つのコンポーネントから別のコンポーネントに渡すことができます。コンポーネント内にはPropsという属性を追加することができます。

Propsは親コンポーネントから子コンポーネントに渡されるデータであり、子コンポーネントはPropsを読み取ることができます。親コンポーネントは子コンポーネントにPropsの値を提供し、子コンポーネントはそれを使用して表示や振る舞いを変えることができます。

Propsは読み取り専用であり、コンポーネント内で一度受け取ったPropsの値を変更することはできません。子コンポーネントから親コンポーネントに直接Propsを渡すことはできませんが、子コンポーネントがコールバック関数を使用して親コンポーネントにイベントを伝えることは可能です。

Propsを通じて渡されるデータの型には、文字列、配列、整数、ブール値、オブジェクト、関数などさまざまなものがあります。

したがって、PropsはReactなどのフレームワークで使用されるデータの受け渡し機構であり、親コンポーネントから子コンポーネントにデータを渡すための一方向の手段として機能します。

dev-k.hatenablog.com
ReactのPropsの値を更新できますか？

Reactにおいて、Propsは親コンポーネントから子コンポーネントにデータを渡すためのメカニズムです。Propsは通常、親コンポーネントの状態やプロパティから渡され、子コンポーネントでは読み取り専用として扱われます。そのため、子コンポーネント内で直接Propsの値を更新することはできません。

ただし、親コンポーネント側でPropsの値を変更すると、自動的に子コンポーネントに反映されます。これは、Propsが親から子に単方向のデータフローを持つためです。親コンポーネントでPropsの値を変更する場合、親の状態を変更するか、親のプロパティを更新することによって行います。その結果、子コンポーネントは新しいPropsの値を受け取り、再レンダリングされます。

もし子コンポーネントで値を変更する必要がある場合、その値を親コンポーネントの状態に持たせ、親コンポーネント内で更新する必要があります。親コンポーネントの状態が更新されると、新しいPropsが子コンポーネントに渡されます。

また、Reactの新しい機能であるHooksを使用することで、親コンポーネントの状態管理を行わずに子コンポーネント内で状態を管理することも可能です。useStateフックを使用すると、コンポーネント内で状態を保持し、更新することができます。ただし、この場合でもPropsは読み取り専用であり、直接変更することはできません。

要約すると、ReactにおいてPropsは読み取り専用であり、子コンポーネント内で直接更新することはできません。Propsの値を変更するには、親コンポーネントの状態やプロパティを変更し、新しいPropsを子コンポーネントに渡す必要があります。

ReactのChildren propsとは何ですか？

コンポーネントがpropsを受け取り、レンダリングするchildren機能は、Reactの最も価値のある機能の1つです。それは再利用可能なコンポーネントの作成が非常に簡単になります。

つまり、`props.children`プロパティを使用すると、親コンポーネントが呼び出されたときに変更できる汎用のテンプレートコンポーネントを作成できます。

const Picture = (props) => {
  return (
    <div>
      <img src={props.src}/>
      {props.children}
    </div>
  )
}
このコンポーネントは呼び出されるたびに、`{props.children}` で指定された要素が表示されます。 dev-k.hatenablog.com

ReactのState(状態)とは何ですか？

Reactコンポーネントでは、組み込みのオブジェクトであるState（状態）が存在します。

State（状態）は、コンポーネントがレンダリングおよび動作する方法を決定するオブジェクトであり、コンポーネント自体によって管理されます。

State（状態）は、動的でインタラクティブなコンポーネントを作成するためのものです。

通常、関数が終了すると、一般的な変数は役割を終えて「消えます」が、State（状態）変数はReactによって常に保持され、状態が変更されるとコンポーネントが再レンダリングされます。

Reactの関数コンポーネントはプレーンなJavaScript関数ですが、React 16.8以降、Reactフックを導入して、開発者がステートフルな関数コンポーネントを記述できるようになりました。

関数コンポーネント内で状態変数を使用するためには、useStateメソッドを使用して状態を更新します。

制御・非制御コンポーネントとは何ですか？

Reactにおける制御されたコンポーネントは、フォームデータがコンポーネントの状態によって処理されるコンポーネントを指します。

一方、制御されていないコンポーネントは、フォームデータがDOM自体によって処理されるコンポーネントです。

これは、Reactの状態によってコンポーネントが制御されるのか、もしくはReactの状態によって制御されないのかの違いです。

制御されていないコンポーネントは、従来のHTMLフォームに非常に似ています。

それはフォーム要素のインスタンスを参照してDOMから値を取得するためです。

ただし、注意点として、制御されたコンポーネントと制御されていないコンポーネントという用語はReactの公式ドキュメントでは使われていないため、混乱を招く可能性があります。代わりに「制御されたフォーム要素」と「非制御フォーム要素」という用語がより一般的に使われています。

dev-k.hatenablog.com
Reduxとは何ですか？

Reduxは、アプリケーションの状態を管理するために使用されるオープンソースのJavaScriptライブラリです。

ReduxとReactは一般的にはよく一緒に使用されますが、互いに独立しています。

ReactコンポーネントはReduxストアからデータを読み取り、アクションをストアにディスパッチしてデータを更新できます。

つまり、Reduxはアプリ内の変数の状態を保存するための単なるストアとなります。

状態の管理をしてくれる方法でもあり、すべてのコンポーネントからアクセスできるストレージであるとも言えます。

アクセスは「レデューサー」と「アクション」を介して行います。

よくあるカウンターコンポーネントの例で流れを説明します。

まずはレデューサーからストアを作成します。値を初期化し、アクションをディスパッチして状態の値をインクリメントする流れとなります。

ReactでReduxを使用する場合、状態を解除する必要がなくなります。それにより、どのアクションが変更を引き起こしたかを簡単に追跡できます。

コンポーネントのデータを共有するための状態やメソッドは必要ありません。すべてReduxによって処理されるためです。

dev-k.hatenablog.com
setStateとuseStateの違いは？

useState()は、関数コンポーネント内で状態変数を含めるためのフックであり、状態はコンポーネント自体によって作成および維持されます。useState()フックを使用すると、前の状態を更新することができます。

クラスコンポーネントで状態を使用するには、状態オブジェクトを作成し、`this.setState()`を使用して状態を変更します

// useState()
const [count, setCount] = useState(0);
// setState()
constructor() {
  super();
  this.state = {
    val: 0,
  };
}

componentDidMount() {
  this.setState((prevState) => ({ val: prevState.val + 1 }));
}

useState()フックでは、状態がオブジェクトである必要はありません。単純な値を保持することもできます。関数コンポーネントでは、必要な数の状態を持つために、useState()を複数回呼び出すことができます。また、状態の遅延初期化も可能です。

useState()はフックの一種であり、使用する際にはフックのルールに従って書く必要があります。

状態管理はクラスコンポーネントと非常に似ていますが、更新の方法にはいくつかの違いがあります。

dev-k.hatenablog.com
Reactアプリをスタイリングする一般的なものは何ですか？

Reactでのコンポーネントスタイルの設定方法はさまざまです。

以下の方法が一般的に使用されます。

ただし、個々の方法には長所と短所があります。選択する方法は、個人やチームの好み、アプリケーションの複雑さ、保守性、パフォーマンスなどの要素に依存します。適切な方法を選択するためには、プロジェクトの要件と目標を考慮しながら、それぞれの方法の特性を理解する必要があります。

dev-k.hatenablog.com dev-k.hatenablog.com
Reactではどのようにイベント作成しますか？作成方法は？

Reactには、DOM要素でのイベントの処理と非常によく似た独自のイベント処理システムがあります。このイベント処理システムは一般的に合成イベントとして知られています。

Reactを使用したイベント処理は、本来のDOMイベントの処理と構文上の違いがあります。

Reactのイベントは、小文字ではなくキャメルケースとして名前が付けられます。

JSXでは、関数は文字列ではなくイベントハンドラーとして渡されます。

一般的なHTMLのイベントハンドリングは以下のように記述されるかと思います。 
<button onclick="showMessage()">
  Hello, welcome.
</button>
Reactでのイベントハンドリングは以下のように記述します。 
<button onClick={showMessage}>  
       Hello, welcome.
</button>

いくつかの違いがあります。まず、onclickの「C」が大文字になっていることに注意してください。つまり、onclickの代わりに`onClick`を使用します。また、関数を渡す際には中括弧`{ }`で囲みます。

Reactでは、デフォルトの動作を防ぐために`false`を返すことはできません。その代わりに、デフォルトの動作を防ぐためには`preventDefault`イベントを明示的に呼び出す必要があります。 以下は修正例です。 
const App = () => {
  function handleClick(e) {
    e.preventDefault();
    console.log('Hi, welcome.');
  }
  
  return (
    <div>
      <button onClick={handleClick}>  
        Click me
      </button>  
    </div>
  );
}

`handleClick`関数では、`e.preventDefault()`を呼び出してデフォルトの動作を防ぎ、コンソールにメッセージをログ出力しています。

Reactでのキーの重要性とは？

Reactコードを1度でも書いた事のある方でしたら、おそらく以下の警告を見た事があるかと思います。

Warning: Each child in a list should have a unique "key" prop.

// 警告: リストの各子要素には一意な "key" プロパティが必要です。

ほとんどのReactアプリでは、配列リストを表示する際には通常、`map`メソッドを使用します。Reactでは、各要素に一意の`"key"`プロパティを指定する必要があります。これは、リストからアイテムが変更、更新、または削除された場合に、それらを識別するために使用されます。

動的にコンポーネントを生成したり、ユーザーがリストを変更したりする場合に特に重要です。

単にタグに`key`プロパティを追加するだけですが、その重要性に疑問を持つ人もいるかもしれません。子要素にキーが指定されている場合、Reactは古い仮想DOMと新しい仮想DOMの子要素を比較するためにキーを使用します。

<li key={0}>アイテム0</li> // 新しいアイテム
<li key={1}>アイテム1</li> 
<li key={2}>アイテム2</li> 
<li key={3}>アイテム3</li>

これにより、Reactは他のアイテムが移動したことをすぐに認識できます。

キーを使用せずにリストアイテムの順序を変更すると（例：リストの並べ替え、アイテムの削除など）、アプリケーション自体はエラーをスローしませんが、予期しない動作が発生する可能性があります。

つまり、キーがなくてもバグは発生しませんが、リストが意図しない動作をする可能性があります。キーの主な目的は、Reactが要素を区別し、仮想DOMと実際のDOMを効率的に比較することです。

Reactでのコメントを書く方法は？

Reactコンポーネント内にコメントを追加したい場合は、JavaScriptのコメントに非常に似ています。 

const App = () => {     
  //これは行コメントです
  return <div>React App </div> 
}

以下はブロックコメントです。

const App = () => {
  /* これはブロックコメントです
   * これは複数の行に分割できます
   * したがって、複数行コメントとも呼ばれます */
  return <div>React App</div>;
};

・ JSX内でのコメントの書き方

JSX内でのコメントは、中括弧`{ }`内に JavaScript コメントを書くことで実現します。

const App = () => {
  return (
    <div>
      {/* これはJSX内の行コメントです */}
      <p>段落です</p>
      <p>段落です</p>
      <p>段落です</p>
    </div>
  );
};

また、複数行のコメントを書く場合も、ブロックコメントとして書く必要があります。

const App = () => {
  return (
    <div>
      {/* これは
        複数行のコメント
        JSX内 */}
      <p>段落です</p>
      <p>段落です</p>
      <p>段落です</p>
    </div>
  );
};
記号の入力を覚えて手動でも良いですが、コメントを追加するショートカットがあります。

・ VS Codeエディタ

Ctrl + /

Cmd + /

・ ATOMエディタ

Ctrl + Shift + /
Cmd + Option + /
ReactRouterを使用したコンポーネント間のデータ受け渡しをするには？
import { Link, useLocation } from 'react-router-dom';

const myData = {
  name: 'Taro',
  age: 30
}

/* ... */

<Link to={{
  pathname: "/some-where",
  state: myData
}}>Link</Link>
,p>上記のコードでは、react-router-domモジュールから`Link`と`useLocation`をインポートしています。そして、`myData`というオブジェクトを作成しています。

Linkコンポーネントは、`to`プロパティに渡されたオブジェクトを使用して、指定されたパス(/some-where)に遷移するリンクを作成します。`to`プロパティのオブジェクトには、`pathname`プロパティと`state`プロパティが含まれています。`pathname`はリンク先のパスを指定し、`state`は渡したいデータを指定します。上記のコードでは、`myData`オブジェクトが`state`プロパティに渡されています。

このようにして作成されたLinkコンポーネントは、クリックされたときに指定されたパスに遷移し、渡されたデータを保持します。

データを受け取るためには、`useLocation()`フックを使用します。

import { useLocation } from 'react-router-dom';

/* ... */

const location = useLocation();
const data = location.state;

console.log(data);

この、正しい方法でReact Routerを使用してデータを受け渡すことができます。

ReactでのRouterの必要性はなんですか？

ReactRouterは、主にシングルページアプリケーション（SPA）の開発に使用されることが一般的です。

ReactRouterは人気のあるルーティングライブラリの1つであり、多くのReactプロジェクトで使用されています。しかし、必ずしもすべてのReactプロジェクトで使用されているわけではありません。

ReactRouterは、SPAやマルチページアプリケーションの開発において、異なるビュー間のナビゲーションやルーティングを処理するために重要な役割を果たします。

一般的なソーシャルメディアやストリーミングサービスなど、複数のビューを持つWebアプリケーションでは、ReactRouterを使用して各ビューに対応するルートを設定し、ユーザーが異なるビュー間を切り替えることができます。

ReactRouterを使用しなくても、独自のルーティングシステムを実装することも可能ですが、ReactRouterは一般的にルーティングの管理を簡単にし、コードの再利用性や保守性を向上させるための便利なツールとして広く利用されています。

つまり、ReactRouterはReact開発において非常に重要な役割を果たし、多くの開発者にとって必須のツールとなっています。ただし、すべてのプロジェクトで必ずしも使用されているわけではないことに注意してください。

Reactで本番モードにするには？

本番ビルドを含むビルドディレクトリは、ルートプロジェクトフォルダ内に作成されます。以下のコマンドを実行して、静的サーバーでビルドバージョンを提供します。

npm install -g serve

serve -s build

アプリは本番モードで実行されます。

本番モードで実行されているかしっかりと確認したい場合は、Google Chromeの拡張機能である『ReactDeveloperTools』を使用します。ブラウザ拡張機能がアクティブになっていることを確認し、Reactアイコンの背景色が赤の場合、アプリは開発モードになっています。

逆に、アイコンの背景色が黒色の場合は、アプリは本番モードになっております。

dev-k.hatenablog.com
Reactコンテキストとはなんですか？

ContextAPIは、Reactのバージョン16.0で導入された機能です。

React ContextAPIを使用すると、アプリケーション全体または一部のコンポーネントツリーを通じてデータを簡単に渡すことができます。これにより、コンポーネントの深さに関係なく状態を子コンポーネントと共有できます。

ContextAPIを使用すると、Reduxと同様に、データが存在する中央ストアを作成できます。ただし、ContextAPIは完全なReduxの代替ではありませんので、注意が必要です。

アプリケーションにContextを統合する場合は、かなり複雑になる可能性があることを考慮してください。

dev-k.hatenablog.com
Reactの高階コンポーネント（HOC）とは何ですか？

高階コンポーネント（Higher-Order Component, HOC）は、Reactにおいて広く使用される手法であり、コンポーネントの再利用可能なロジックを実装するために利用されます。

HOCを使用することで、コンポーネントのロジックを再利用することなく、異なるコンポーネント間で共有することができます。高階コンポーネントは、Reactの構成上の特性から派生したパターンであり、引数としてコンポーネントを取り、新しいコンポーネントを返す関数です。

以下は、HOCの例です。

const higherOrderComponent = WrappedComponent => {
  class HOC extends React.Component {
    render() {
      return <WrappedComponent {...this.props} />;
    }
  }
  return HOC;
};

HOCは以下のように呼び出されます。

const EnhancedComponent = higherOrderComponent(MyComponent);

HOCは、元のコンポーネントをコンテナコンポーネントでラップすることによって機能を追加します。

HOCはさまざまな機能に使用されることができます。これらの純粋関数は、関数型プログラミングの本質を取り入れており、アプリケーションのメンテナンスやアップグレードを容易にする特徴があります。

Reactのエラー境界とはなんですか？

React v16以降で導入されたエラー境界は、レンダリングフェーズ中で発生するエラーをキャッチする方法を提供します。開発中にアプリで予期しないエラーが発生することは避けられません

存在しない、深くネストされたプロパティにアクセスしようとしている可能性がありますまたはAPIリクエストの失敗などは、 『ReactErrorBoundary』を使用して発生する可能性のあるすべての予期しないエラーを報告しましょう。

react-error-boundaryは、Reactのエラー境界のラッパーであり、開発者がエラー境界を最初から作成せずにコードに実装できるようにします。子コンポーネントツリーで発生する可能性のあるエラーをキャッチし、それらのエラーをログに記録して、フォールバックUIを表示できるようにするコンポーネントとなります。

dev-k.hatenablog.com
Reactでよく使用するCLIコマンドはなんですか？

なるべくCreateReactAppコマンドラインで使用する基本的なコマンドに限定して紹介していきます。

・ npxスクリプト

npx create-react-app my-react-app

・ npmまたはyarnパッケージコマンド

npm init react-app my-react-app

or

• yarn init react-app my-react-app

・ テンプレート選択

create-react-app my-app --template typescript

・ React依存関係パッケージのインストール

npmまたはyarnのパッケージコマンド

npm install --save react-router-dom

or

yarn add react-router-dom

・ アプリケーションの実行

npm start

or

yarn start

・ buildの実行

npm run build

・ ローカル展開

npm install -g server

↓

serve -s build

・ テストの実行

npm run test

or

yarn test

関数コンポーネント(フック)に関するよくある質問

Reactフックとは何ですか？

フック（Hooks）はReactの機能であり、関数コンポーネントを介して状態とライフサイクル機能をサポートし、コンポーネント階層を変更せずにステートフルロジックを再利用することができます。フックを使用することで、機能的なコンポーネントを使用してReactアプリケーション全体を構築することができます。また、フックはコンポーネント間やコミュニティと簡単に共有することもできます。

Reactフックはクラスコンポーネントで機能しますか？

いいえ。

残念ながらクラスコンポーネントではフックをサポートしていません。

しかしクラスと関数コンポーネントを1つのツリー内にフックと組み合わせることができます。コンポーネントがクラスであるか、フックを使用する関数であるかは、そのコンポーネントの実装の詳細となります。

またReactではクラスを削除する予定はありません。ただし、フックは柔軟性が高くコードの理解が容易であるため開発者はすぐにフックに移行する必要があります。

Reactフックが導入されたのはなぜですか？

フックを導入した理由はいくつかあります。

1. クラスコンポーネント内の複雑なthisキーワードの処理を回避するためです。以前の方法では、同じコードを複数の場所に記述する必要がありました。

1. フックを使用することで、関数コンポーネントを操作する際の複雑さを回避できます。クラスコンポーネントでは、状態や副作用を管理するためにコンポーネントの階層を変更する必要がありましたが、フックを使用すると関数コンポーネント内でこれらの機能を実現できます。

1. クラスコンポーネントでは、複数のライフサイクルメソッドが存在し、それらに依存する必要があります。たとえば、componentDidMount()、componentDidUpdate()、componentWillUnmount() などがあります。これらのメソッドはクラスコンポーネントでしか使用できず、クラスの扱いが難しかったり理解しづらかったりする場合があります。フックを使用することで、関数コンポーネントでも状態やライフサイクルメソッドなどのReactの機能を使用できるようになりました。

以上がフック導入の主な理由です。フックはReactの機能をより直感的に使いやすくし、関数コンポーネントでの状態管理や副作用の処理を容易にするための仕組みです。

DOM要素にアクセスする方法は？

DOM要素にアクセスするにはuseRef()フックを使用するのが最も一般的なケースです。

DOM要素を簡単に見つけその要素の参照を格納できます。

import  { useRef, useEffect } from "react";

const MyComponent = () => {

  const elementRef = useRef(null);
  
  useEffect(() => {
    console.log(elementRef.current); 
// MyComponent <div>
    console.log(typeof elementRef.current); 
// object
  }, []);
  
  return (<div ref={elementRef}>私はelementです。</div>);

useRef()フックはコンテンツがレンダリングされるまで参照が設定されません。ですのでフックに渡される初期値は`null`であることに注意してください。

そして`null`は参照によって上書きされます。

要素への参照を割り当てるための、特別な属性である`ref`が使用されます。要素の幅と高さを取得または、最初にレンダリングされたときに焦点を合わせたりするなど、便利な機能となっています。

dev-k.hatenablog.com
useState()フックはどのように機能し、また2番目の引数とは何ですか？

useState()は組み込みのReactフックの1つです。

このフックは、関数コンポーネントに状態値を格納するために使用されるものです。状態の初期値として引数を受け入れます、2つの要素を持つ配列を返します。

最初の要素では状態の現在の値です。2番目の要素は状態を更新する関数です。

const [stateValue, updateState] = useState(initialStateValue);

import { useState } from "react";

const Counter = () => {

  const [count, setCount] = useState(0);

  return (
    <div>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        Count: {count}
      </button>
    </div>
  );
}

上記の場合、初期値である0は最初の要素である`count`変数に格納されています。 2番目の要素`setCount`では初期値である0を更新する為の関数として使用します。

そしてコンポーネントのボタンがクリックされるたびに、setCount関数が呼ばれカウントが増加致します。

useState()フックを使用して配列操作するには？

Reactの配列状態に新しい値を追加する方法を説明します。

まず、配列の初期値を作成するために、useStateフックを使用します。

import { useState } from "react";

const testArray = ['a', 'b', 'c'];
const [myArray, setMyArray] = useState(testArray);

上記の例では、`testArray`をデフォルトの値として使用して配列状態を作成しています。また、空の配列として状態を作成することもできます。

const [myArray, setMyArray] = useState([]);

次に、状態配列に新しい要素を追加する方法について説明します。

通常のJavaScriptの配列では、`push()`メソッドを使用して新しい要素を配列に追加しますが、Reactの状態は不変であるため、直接的な`push()`は使用できません。

代わりに、`setMyArray`というメソッドを使用し、JavaScriptの`spread演算子`（...）を組み合わせる必要があります。

以下のように`setMyArray`を呼び出して新しい要素を追加できます。

setMyArray((arr) => [...arr, arr.length]);

上記の例では、現在の状態の配列を展開し、新しい要素を追加しています。`arr.length`は追加する新しい要素の値であり、新しい要素として状態に追加されます。

以下に、修正された完全な使用例のコードがあります。

import { useState } from "react";

const App = () => {
  const [myArray, setMyArray] = useState([]);

  const onClick = () => {
    setMyArray((arr) => [...arr, arr.length]);
  };

  return (
    <div>
      <input type="button" onClick={onClick} value="Update" />
      <div>
        {myArray.map((e) => (
          <div>{e}</div>
        ))}
      </div>
    </div>
  );
};

上記のコードでは、ボタンをクリックすると新しい要素が追加され、その要素が表示されるようになっています。

useState()フックがすぐに更新されないのはなぜですか？

クラスコンポーネントのsetState()同様にフックによって提供されるアップデータを使用した状態の更新も非同期であり、すぐには反映されません。したがって、Reactの状態を更新するプロセスはパフォーマンス上の理由から非同期となっており、変更はすぐに感じられません。

更新が要求された場合、更新がすぐに行われるという保証はありません。Reactでは状態が更新されるたびに、更新されるコンポーネントが再レンダリングされます。

再レンダリングはコストのかかる操作であるため、状態の更新を同期的に行うと、読み込み時間が長くなったり、アプリケーションがクラッシュしたりするなどの深刻なパフォーマンスの問題が発生する可能性があります。ですが状態の更新をバッチ処理することで、Reactは不要な再レンダリングを回避し、全体的なパフォーマンス向上が実現可能です。

useEffect()フックの目的は何ですか？

useEffectフックを使用すると、関数コンポーネント内で副作用を実行することができます。

副作用の例としては、データのフェッチリクエストやDOMの直接更新、タイマー関数などがあります。これらの副作用は、さまざまな問題の解決策として役立ちます。

useEffectフックを使用することで、関数コンポーネント内で状態や他の機能を使用できるだけでなく、クラスベースのコンポーネントで利用可能なライフサイクル機能を関数コンポーネントでも利用できるようになります。

さらに、複数のuseEffectフックを使用することで、コードのロジックを分割することも可能です。

useEffect()フックで1回だけ呼び出す方法は？

コンポーネントがマウントされたときにコールバックを1回だけフックさせるように実行するには、空の配列をuseEffectの第二引数に渡す必要があります。

const App = () => {

useEffect(() => {
  console.log('マウントされています');
  return () => console.log('unmounting...');
},[]) //空の配列を追加する

  return (
    <div>

    </div>
  )
}

このパターンでは、副作用がマウント時のみに制限され、アンマウント時にクリーンアップ関数が呼び出されます。これにより、コンポーネントが再レンダリングされるたびにコールバックが実行されるのを防ぐことができます。また、依存関係の変更に応じてコールバックを実行したい場合は、その依存関係を配列に含めることもできます。

コンポーネントがアンマウントされた時にコードを実行するのは可能ですか？

はい可能です。

useEffectフックを使用します。コンポーネントがアンマウントされたときにコードを実行するには、フックで関数を返すだけで実現可能です。

useEffect(() => {
    console.log("mounted");

    return () => {
      console.log("unmounted");
    };
  }, []);

アンマウントでのみコードを実行する場合は、空の依存関係配列を使用する必要があります。

import {useRef, useEffect, useState} from 'react';

const App = () => {

  const [mounted, setMounted] = useState(true);

  return (
<div>
      <button onClick={() => setMounted(current => !current)}>
 click me
      </button>

      <hr />

      {mounted && <Child />}
    </div>
  )
}

function Child() {
  const ref = useRef(null);

  useEffect(() => {
    const handleClick = e => {
      console.log('Button clicked');
    };

    const element = ref.current;

    element.addEventListener('click', handleClick);

 //コンポーネントがアンマウントされたときに実行される関数
    return () => {
      console.log('unmounted');
      element.removeEventListener('click', handleClick);
    };
  }, []);

  return (
    <div>
      <button ref={ref}>Click</button>
    </div>
  );
}

アンマウント時に実行されるのが確認できます、これは主にクリーンアップの目的で使用できます。

カスタムフックとは何ですか？何の為に使用しますか？

カスタムフックは、一部のコンポーネントロジックを再利用が可能な関数として作成します。

つまりカスタムフックを作成する主な理由は、コードの再利用性の為となり、コンポーネントを可能な限りシンプルに保ち、テスト可能なロジックをカスタムフック関数で分離し、コンポーネント間の共有ロジックを再利用可能に致します。他の様々なフックを呼び出すことができるJavaScript関数です。

接頭辞として`use`が付いています。

組み込みのフックを使用し、フックのルールにも準拠しているため、これは任意の数の引数を受け入れ、コンポーネントで使用できる値とメソッドを公開できます。

const [count, setCount] = useCustomHook()
dev-k.hatenablog.com
ステートフルロジックとはなんですか？

よく「コンポーネント間でステートフルロジックを共有する」や「ステートフルなコンポーネント」または「ステートレスなコンポーネント」という言葉を聞くことがあります。

ステートフルロジックは、コンポーネントの内部で状態を保持または管理することを指します。一方、ステートレスコンポーネントは状態を持たず、再利用可能なコンポーネントです。

Reactでは、一般的なプログラミングパターンの1つとして、ステートフルな親コンポーネントが状態を管理し、それを1つ以上のステートレスな子コンポーネントにプロパティとして渡す方法があります。

また、Reactではカスタムフックという機能も提供されています。カスタムフックは、JavaScriptの関数間でロジックを共有したい場合に使用されます。カスタムフックを使用することで、複数のコンポーネント間でステートフルなロジックを共有することができます。つまり、状態の変更を管理するためのツールとして利用されます。

カスタムフック関数は、共通のコードを別の関数に分離するためのものです。カスタムフックを使用することで、コンポーネント間でロジックを再利用し、内部の状態や副作用を分離することができます。

関数コンポーネントで複数の状態を使用する事は可能ですか？

はい、可能です。

関数コンポーネント内から複数の状態変数を使用および更新できます。

 //複数の状態変数を宣言します

const App = () => { 

const [age, setAge] = useState(19)

const [siblingsNum, setSiblingsNum] = useState(10)

const [count 、setCount] = useState(0);
}

1つの関数内で複数の状態を宣言しています。

Reactフックでフォーム作成はどのように作成しますか？

フォームの作成は、どのWebアプリケーション開発でも非常に一般的です。

HTMLでは、input、textarea、selectなどのフォーム要素は通常は独自の状態を維持し、ユーザー入力に基づいて更新します。

HTMLの場合と同様に、Reactはフォームを使用して、ユーザーがWebページを操作できるようにする事も可能です、それは制御されていないコンポーネントまたは非制御コンポーネントとなります。

ですが、これは一般的にReactで実現したいことではありません。

基本的にはReactにフォームを制御をさせる方法です、それが制御されたコンポーネントと言われています。

データが制御されたコンポーネントによって処理される場合、すべてのデータはコンポーネント状態で保持されます。

useState()フックを使用し、入力を管理します。onChange属性にイベントハンドラーを追加することで、変更を制御が可能となります。

const MyForm = ()  => {
  const [name, setName] = useState("");


  return (
    <form>
      <label>your name:
        <input
          type="text" 
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </label>
    </form>
  )
}

フォームの送信は、onSubmit属性にイベントハンドラーを追加することで、送信アクションを制御する事が可能となります。

const handleSubmit = (event) => {
    event.preventDefault();
    alert(`名前は？: ${name}`)
  }

  return (
    <form>

<input type="submit" />

    </form>
  )

しかし上記のようなコードが複雑で、独自でフォームを作成した場合、管理が大変となります。

その場合は、React Hook Formライブラリまたは他のライブラリを検討下さい。

またNetlify Formsフォームを活用すれば、サーバー側のコーディングを行う必要がなく、開発の時間を節約できます。

フックの計算をメモ化するにはどうすればいいですか？

計算を記憶するためには、Reactの組み込みフックである『useMemo()』を使用します。

useMemo()を使用することで、コンポーネントのパフォーマンスを向上させることができます。このメモ化手法は、以前の計算結果を記憶することで、複数のレンダリング間で計算をキャッシュします。

useMemo()は、2つの引数（計算コールバックと依存関係の配列）を受け入れます。

以下がuseMemo()の使用例です。

const memoizedValue = useMemo(() => {
  // expensiveValue(a, b)は高コストな計算の例です
  return expensiveValue(a, b);
}, [a, b]); // 依存関係の配列

初回のレンダリング中にuseMemo()を呼び出し、計算結果を記憶し、その後のレンダリングでコンポーネントに返します。

重要な点は、再レンダリング中に依存関係のいずれかが変更された場合にのみ、メモ化された値を再計算することです。

依存関係の配列には、計算コールバック内で使用されるプロパティや状態の値を含める必要があります。これにより、依存関係が変更されたときにのみ再計算が行われます。

dev-k.hatenablog.com
フックでPropsを渡すにはどうすればいいですか？

まずは親コンポーネントの作成をします。

const App = () => {
const greeting = 'Hello. Welcome.'
  return (
    <div>
      <Welcome text={greeting}/>
    </div>
  );
};

Propsを要素の属性として`text`設定にします。事前に子コンポーネントの名前は`Welcome`に決めておいたので作成します。

const Welcome = (props) => {

  return <h1>{props.text}</h1>;
};

Welcome関数の最初の引数として、Propsを受け取ります。その後JSXに`{props.text}`とすることで`Hello. Welcome.`と表示されます。

子コンポーネントのログに出力し確認してみましょう。

const Welcome = (props) => {

const result = props.text;

console.log(result) //Hello. Welcome.

  return <h1>{result}</h1>; 
};

ブラウザとログ両方で確認がとれたかと思います。

Propsを使用すると、あるコンポーネントからコンポーネントツリーの別のコンポーネントに値（データ）を渡すことができます。

また変数宣言をせずにPropsをインラインで渡す事も可能です。JavaScript文字列の場合では二重引用符または一重引用符内にPropsとして渡せます。

const App = () => {
  return (
    <div>
      <Welcome text={"Hello. Welcome."} />
//  または<Welcome text="Hello. Welcome." />
    </div>
  );
};

const Welcome = ({ text }) => {
  return <h1>{text}</h1>;
};

オブジェクトをインラインで渡す場合は以下の通りです

const App = () => {
  return (
    <div>
<Welcome text={{ greeting: 'Welcome to React' }} />

    </div>
  );
};

2つの中括弧`{ { } }`があるためややこしいかもしれません。1つ目はJSX用のオブジェクトです。２つ目がJavaScriptオブジェクト表記となります。

これが基本的なReactのコンポーネントからコンポーネントにPropsが渡される方法となります。PropsはReactアプリケーションのコンポーネント階層で上から下に渡され一方通行です、つまり親から子に渡されます。

ReactのPropsは読み取り専用(不変)であることに注意して下さい。親から子に渡されたPropsの値は、子コンポーネントでは変更できません。Propsは親から子へコンポーネントツリーにデータを転送するためだけの手段となります。

dev-k.hatenablog.com
Reactフックを使用する際に従わなければいけないルールはなんですか？

フックはJavaScriptの関数ですが、使用する際はフックのルールに厳守しながらコードを書いていく必要があります。

それらルールは下記となります。

・ Reactフックはトップレベル(最上位)でのみ呼び出すことができ、ループ、条件、またはネストされた関数の内部で呼び出すことはできません、つまりフックが呼び出される順序に依存している事になりますのでご注意下さい。

・ フックはReact関数またはカスタムフックでのみ呼び出すことができ、通常のJavaScript関数でフックを使用することはありません、またクラスコンポーネントではフックをサポートされておりません。

ですがクラスと関数コンポーネントを１つのツリー内のフックとして組み合わせは可能です。

dev-k.hatenablog.com

Reactのどのバージョンからフックが使用可能ですか？

Reactフックはバージョン16.8.0でReactに追加されました。

ですのでフックを有効にする場合は全てのReactパッケージが16.8.0以降であれば、使用可能となります。

ReactNativeではバージョン0.59からフックをサポートしております。

関数から状態の初期化は可能ですか？

はい、可能です。

Reactでは、状態の初期化方法は様々ありますが、特定の条件下で初期状態の設定にコストのかかる操作が必要な場合、useState()フックを使用することで、遅延初期化を行うことも可能です。

たとえば、以下のコードでは、ボタンを数回クリックすると、2秒ごとにカウンターが1ずつ増える遅延が発生します。

const App = () => {
  const [count, setCount] = useState(() => {
    // 初期状態のコストのかかる操作を実行する
    // この関数は初回のレンダリング時にのみ呼び出されます
    // その後は呼び出されません
    return expensiveInitialization();
  });

  const handleClickAsync = () => {
    setTimeout(() => {
      setCount(count => count + 1);
    }, 2000);
  };

  return (
    <div>
      {count}
      <button onClick={handleClickAsync}>Increase async</button>
    </div>
  );
};

useState()の初期値として関数を渡すことで、初回のレンダリング時にのみコストのかかる操作を実行し、その結果を初期状態として設定します。その後は、setCount()内でのカウントの更新は非同期に行われますが、再レンダリングが発生するたびにコストのかかる操作が実行されることはありません。

状態の遅延初期化が可能となり、パフォーマンスの向上が期待できます。ただし、実際の初期化処理やカウンターの増加ロジックは具体的な要件に合わせて適切に修正する必要があります。

useEffectとuseLayoutEffectフックの違いはなんですか？

これらフックはほとんど同じように動作します。

useEffectフックとuseLayoutEffectフックの違いは全ては、それらの呼び出しのタイミングにあります。主な違いは、useLayoutEffectフックは同期後に実行されます。

つまり、コンポーネントがマウントされる前に状態が更新されます。

使用する際は、DOMを直接変更する必要がある場合にのみ使用してください。useLayoutEffectフックは同期的であるため、使用する場合は注意が必要となります。パフォーマンスが低下する可能性があります、それはこのメソッドの実行が終了するまでUIは更新されないためです。

詳しくは以下で解説しておりますので参照ください。

dev-k.hatenablog.com

クラスコンポーネントでよくある質問

this.setState()とはなんですか？

Reactでは、一部のコンポーネントに状態を設定できます。これらのコンポーネントはステートフルコンポーネントと呼ばれます。

状態は、コンポーネントのUIのレンダリングに影響を与えます。状態が変更されると、ReactはUIを再評価し、必要な場合にのみ再レンダリングを行います。

Reactのクラスコンポーネントでは、状態オブジェクトを変更するためにsetState()メソッドを使用します。

setState()メソッドは、新しい状態を指定するオブジェクトを受け取ります。このメソッドは新しい状態を前の状態とマージするのではなく、前の状態を完全に置き換えます。

状態は、イベントハンドラーやサーバーの応答などの変更に応じて更新することができます。ただし、すべての状態の更新に必ずしもsetState()メソッドを使用する必要はありません。他の状態やプロパティに依存しない状態の更新では、setState()を使用せずに直接新しい状態を設定することもできます。

以下は、正しい使い方の例を示したコードです

import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "Taro",
      age: 30,
      city: "Tokyo",
      favoriteColor: "White"
    };
  }

  changeClick = () => {
    this.setState({
      favoriteColor: "Blue"
    });
  }

  render() {
    return (
      <div>
        <h1>My name is {this.state.name}.</h1>
        <p>
          City: {this.state.city}.<br/>
          Age: {this.state.age}.<br/>
          Favorite color: {this.state.favoriteColor}
        </p>
        <button type="button" onClick={this.changeClick}>Change</button>
      </div>
    );
  }
}

export default App;

`this.setState()`は、新しい状態を指定するオブジェクトまたは関数を受け取り、前の状態とマージせずに新しい状態を置き換えます。

this.setState()は非同期ですか？

はい、this.setState()の動作は非同期であり、パフォーマンスを向上させるためにバッチ処理されています。

これは同期させるとブラウザが応答しなくなる可能性があるので、状態を変更して再レンダリングを引き起こすためです。this.setState()メソッドが非同期なので、コードの問題をデバッグするのが難しいという事を忘れないようにしておいて下さい。

setState()に渡される2番目の引数の使用方法と目的は？

2番目の引数はsetState()が完了した後に呼び出されるコールバック関数です。このコールバック関数では、setState()の実行結果を確認することができます。

ただし、注意点があります。setState()は非同期で実行されるため、コールバック関数内でstateの値を直接参照すると正確な結果が得られない場合があります。そのため、stateの値に依存する処理を行う場合は、コールバック関数ではなく、Reactコンポーネントの適切なライフサイクルメソッドやフックを使用することを推奨します。

例えば、関数コンポーネントではuseEffectフックを使用し、クラスコンポーネントではcomponentDidUpdateやcomponentDidMountなどのライフサイクルメソッドを使用します。これらのメソッド内でstateの値を参照することで、正確なタイミングで処理を行うことができます。

以上の点に注意して、setState()のコールバック関数を適切に活用してください。

import React, { useState, useEffect } from 'react';

const App = () => {
  const [counter, setCounter] = useState(0);

  useEffect(() => {
    console.log(counter + 5);
  }, [counter]);

  const changeClick = () => {
    setCounter(1);
  };

  return (
    <div>
      <p>{counter}</p>
      <button type="button" onClick={changeClick}>
        Change
      </button>
    </div>
  );
};

export default App;

上記のコードでは、関数コンポーネントとuseStateフックを使用しています。useEffectフックを使用して、counterの値が変更されるたびにコールバック関数が実行されるように設定しています。これにより、正確なタイミングでstateの値に基づく処理を行うことができます。

クラスのsuper()にpropsが渡されるのはなぜですか？

Reactのクラスコンポーネントでは、コンポーネントのコンストラクター内で`super(props)`を呼び出す必要があります。`super(props)`は親クラスのコンストラクターを呼び出すためのものであり、propsを渡すことで親クラスのコンストラクターでpropsにアクセスできるようになります。

`super()`を引数なしで呼び出した場合でも、他のメソッド内でpropsにアクセスできることがありますが、これはJavaScriptのクラスの継承の動作によるものです。Reactでは、propsを直接使用するのではなく、constructor内で`super(props)`を呼び出すことが推奨されています。これは、将来的なReactのアップデートにおいても互換性が保たれるためです。

つまり、正確な理解としては、コンストラクター内で`this.props`を使用する場合は`super(props)`を呼び出す必要があります。ただし、`this.props`を使用しない場合や`super()`を呼び出した場合でも、コンポーネントが正常に動作する可能性がありますが、将来の互換性のために推奨される方法に従うことが重要です。

クラスのextendsとはなんですか？

Reactでは、クラスコンポーネントを定義する際にextendsキーワードを使用して継承を行うことができます。

サブクラスは、既存のクラスを拡張するためのクラスであり、既存のクラスの属性とメソッドに加えて独自の属性やメソッドを持つことができます。

つまり、Appクラスからメソッドを継承してApp2という名前のクラスを生成することができます。

以下にコード例を示します。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {  };
  }
  // ...
}

class App2 extends App {
  constructor(props) {
    super(props);
    // Appクラスのコンストラクタを呼び出す
  }
  // Appクラスから継承されたメソッドや独自のメソッドを定義する
  // ...
}

`extends`キーワードは、親クラスから別の子クラスを作成するために使用されます。

子クラスは、親クラスからすべてのメソッドを継承します。継承はコードの再利用性を高め、既存のクラスのプロパティとメソッドを再利用しながら新しいクラスを作成するための仕組みです。

constructor(props)の役割と目的は？

クラスのコンストラクターは、そのクラスのオブジェクトが作成されたときに自動的に呼び出されるメソッドです。

Reactでは、コンポーネントの作成中およびマウント前にコンストラクターが呼び出されますが、これはJavaScriptのクラスコンストラクターの機能です。React自体ではなく、JavaScriptの機能です。

Reactコンポーネントのコンストラクターを実装する場合、正しい手順は以下の通りです

constructor(props) {
  super(props);
  // コンストラクター内での状態の初期化
  this.state = {
    // 状態の初期値を設定
  };
  // その他の初期化コードやイベントハンドラーメソッドのバインド
}

コンストラクターでは、`super(props)`を最初に呼び出して親クラスのコンストラクターを実行し、`this.state`オブジェクトに初期値を設定することが一般的です。また、他の初期化コードやイベントハンドラーメソッドのバインドも行うことができます。

ただし、Reactでは、最新の言語仕様やReact自体のアップデートにより、コンストラクターを使用する必要がない場合もあります。代わりに、コンストラクターを省略し、クラスフィールド構文を使用して直接状態の初期化やイベントハンドラーメソッドの定義を行うこともできます。以下はその例です 

class MyComponent extends React.Component {
  state = {
    // 状態の初期値を設定
  };

  handleClick = () => {
    // イベントハンドラーメソッドの定義
  };

  render() {
    // コンポーネントの描画
  }
}

上記のように、最新のReactでは、コンストラクターの使用は必須ではなくなっていますが、過去のコードや特定の状況ではまだ使用される場合があります。

render()の役割と目的は？

React.jsのレンダリング関数は、コンポーネントに表示するHTMLを返すために使用されます。この際、`render`メソッド内に記述されたJSXコードは仮想DOM（Virtual DOM）に変換されます。仮想DOMはReactによって管理され、必要な場合にのみ実際のDOMに反映されます。

すべての`render`関数にはreturn文が必要です。`render`関数はコンポーネントが表示する要素を返すためのものであり、その結果をreturn文で返す必要があります。

CRAを使用している場合、Reactプロジェクトのルートディレクトリには「public」という名前のフォルダが存在します。このフォルダには「index.html」というファイルがあります。

「index.html」ファイル内のidが「root」である要素がReactアプリケーションのマウントポイントとなります。ここにReactアプリケーションがレンダリングされます。

クラスメソッドをクラスインスタンスにthisをバインドする必要があるのは何故ですか？

Reactクラスコンポーネントは、基本的にJavaScriptのクラスであり、Reactのコンポーネントクラスを継承して機能を利用します。

クラスで宣言された関数は、自動的にthisオブジェクトに追加されるわけではありません。関数内でthisを使用する場合は、適切にバインドする必要があります。

Reactコンポーネント内のthisは、コンポーネントのインスタンス自体を参照します。thisを使用してpropsやstateなどのクラス属性にアクセスできます。 Reactクラスコンポーネントでは、通常はコンストラクタ内でthisのバインドを行う必要はありません。JavaScriptのクラスメソッドは通常、自動的に正しいthisを参照します

thisをバインドする方法は？

Reactイベントリスナーでコンポーネントを作成した場合下記のコードを使用すると、目的の操作を実行できず、バインドが必要になります。

<button type="button" onClick={this.myHandler}>Hello</button>

この問題を解決するためのアプローチの1つは、ES6で導入されたアロー関数の使用法です。これらの関数には、デフォルトで。thisへのバインドがあります。

class App extends React.Component{
  myHandler = () => {
    console.log(this); 
  }

  render() {
    return(
      <button type="button" onClick={this.myHandler}>Hello</button>
    )
  }
}

または、通常はコンストラクター関数内で明示的にバインドするのが一般的です。これはインスタンス事に1回だけバインドされるようにすることを推奨します。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {  };

this.handleClick = this.handleClick.bind(this);

  }
//{…}
}

他にバインド方法はございます、以下で解説しております。

dev-k.hatenablog.com
Reactのライフサイクルの概念とメソッドとは？

Reactコンポーネントは、イベントのライフサイクルを通過するという概念がありますが、複雑ではないです。

すべてのReactコンポーネントは、マウント、更新、アンマウントの3つのフェーズを経ます。

マウントは初回のレンダリングで行われ、コンポーネントがDOMに追加されることを意味します。更新は2回目以降のレンダリングで行われ、コンポーネントが再度描画されます。

アンマウントはコンポーネントがDOMから削除されることを意味し、コンポーネントの終了です。

これらのフェーズは繰り返し行われ、誕生、成長、死という人間の人生のサイクルに例えることができます。

Reactコンポーネントは、それぞれのフェーズで特定のライフサイクルメソッドを提供します。

一般的によく使用されるメソッドは以下の通りです。

・ constructor()：コンポーネントがDOMにマウントされる前に呼び出され、状態の初期化やイベントハンドラーメソッドのバインドなどが行われます。

・ render()： コンポーネントがDOMに要素をレンダリングする場合に使用されます。通常、JSXを返す形で記述されます。

・ componentDidMount()： render()の後に呼び出され、コンポーネントがDOMにマウントされた直後に実行されます。このメソッドでは、コンポーネントがDOMノードを取得するなどの処理が行われます。また、setState()を使用することもできます。ただし、状態の更新が行われた場合でも、ブラウザがUIを更新する前に発生するため、ユーザーに二重のUI更新が表示されないように注意が必要です。

・ componentDidUpdate()： コンポーネントの更新が行われた直後に呼び出されます。このメソッドでは、setState()を使用することができますが、状態の変更を条件でラップする必要があります。誤った使い方をすると、無限ループが発生する可能性があります。

・ componentWillUnmount()：componentWillUnmount()では、タイマーのクリアやネットワークリクエストのキャンセル、キャッシュのクリアなど、コンポーネントの破棄前に必要な後処理を行うことが一般的です。 例えば、コンポーネントがタイマーを使用している場合、componentWillUnmount()内でタイマーをクリアすることで、不要なリソース使用を防ぎます。また、ネットワークリクエスト(API)が進行中の場合は、componentWillUnmount()でリクエストをキャンセルすることができます。 さらに、コンポーネントがキャッシュを使用している場合は、componentWillUnmount()内でキャッシュをクリアすることで、不要なデータの保持を防ぐことができます。 重要な点として、componentWillUnmount()ではコンポーネントが再レンダリングされないため、setState()を呼び出すことはできません。setState()は状態の変更を伴うため、破棄フェーズで使用することは適切ではありません。 ライフサイクルメソッドを正しく使用することで、Reactコンポーネントのマウント、更新、アンマウントのフェーズで必要な処理を適切に行うことができます。これにより、メモリリークやリソースの無駄な使用を防ぎ、快適なユーザーエクスペリエンスを提供することができます。

・ shouldComponentUpdate()：このライフサイクルメソッドは、Reactに状態やプロパティの変更によるレンダリングを行わないようにするために使用されます。shouldComponentUpdate()メソッドは、コンポーネントが状態やプロパティの変更の影響を受けていないかどうかをReactに通知するために使用されます。つまり、パフォーマンスの最適化に役立ちます。

・ static getDerivedStateFromProps：このメソッドは、React 17以降の比較的新しいReactライフサイクルメソッドであり、'componentWillReceiveProps'メソッドの代わりに設計されました。

このメソッドは、render()メソッドが呼び出される直前に実行されます。また、getDerivedStateFromPropsは静的メソッドであり、thisにアクセスすることはできません。、コンポーネントが使用するプロパティが変更され、以前の状態と異なるかどうかを確認するために使用されます。

そして、thisキーワードにアクセスできないため、this.setState()を呼び出すことはできません。したがって、状態の更新も行うことはできません。代わりに、新しい状態値を持つオブジェクトを返す必要があります。

以下は例です

static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.itemName === prevState.itemName) {
        return null;
    }
    return {
        itemName: nextProps.itemName
    };
}

もし変更がない場合は、nullを返す必要があります。

・ getSnapshotBeforeUpdate()：このメソッドも、比較的新しいReactライフサイクルメソッドの一つです。

このメソッドは、DOMが更新された後に、以前の状態の情報を保存するために使用されます。メソッドは直後に呼び出されます。これにより、開発者はDOMが変更される前にDOMに関する情報を取得することができます。

一般的には、このライフサイクルメソッドに到達することはめったにありませんし、使用する機会もほとんどありません。

this.setState()を使用せずにコンポーネントを強制的に再レンダリングする事は可能ですか？

はい、可能です。

クラスコンポーネントでは、『forceupdate』を呼び出して強制的に再レン​​ダリングするオプションがあります。ただし、一般的には強制更新の使用を回避するように努める必要があるという事は忘れないで下さい。

この方法はお勧めできません、新しいレンダリングを作成するには、常にPropsと状態を使用する必要があります。ですがその方法を示します。

class App extends React.Component {
  constructor(props) {
    super(props);
     this.state = {
       counter: 0
    };
this.changeClick = this.changeClick.bind(this)
  }

  changeClick = () => {
//強制的に再レンダリング
this.forceUpdate()

this.state.counter = + 1
   }
  render() {

    return (
      <div>
        <p>
          counter: {this.state.counter}.
        </p>
        <button
          type="button"
          onClick={this.changeClick}
        >Change</button>
      </div>
    );
  }
}

this.setState()を使用せず、ボタンをクリックするとReactのforceUpdate()メソッドで強制的に0から1へ再レンダリングさせている事が分かるかと思います。

Reactクラスでのデータ取得と状態の更新をするには？

サーバーからフェッチされたデータを使用してクラスコンポーネント内のコンポーネントの状態を更新する方法を解説します。

オブジェクト内の`users`は初期状態として空の配列に設定しときます。

class App extends React.Component {
    state = {
        users: []
    }
   
   render() {
        return (
            <ul>
                {this.state.users.map((user) => (
                    <li key={user.id}>{user.title}</li>
                ))}
            </ul>        
)
    }
}

ライフサイクルメソッドのcomponentDidMount()を使用します。このメソッドはサーバーにデータを要求するのに最適です。状態を設定すると2回目のレンダリングが発生しますが、ブラウザが画面を更新する前に発生します。

componentDidMount() {
        fetch('https://some-api.com/harry-potter')
       .then((response) => response.json())
        .then(usersList => {
            this.setState({ users: usersList });
       });
    }

componentDidMount()が正常に呼び出された後にsetState()が呼び出され、新しいレンダリングがトリガーされ、リストとして表示されます。

class App extends React.Component {
    state = {
        users: []
    }

componentDidMount() {
        fetch('https://jsonplaceholder.typicode.com/posts')
       .then((response) => response.json())
       .then((usersList) => {
            this.setState({ users: usersList });
       });
    }
   
   render() {
        return (
            <ul>
         {this.state.users.map((user) => (
        <li key={user.id}>{user.title}</li>
                ))}
            </ul>
)
    }
}



最後に

※React.jsのQ&Aはここで一旦、区切らせて頂きます、ご了承下さい。

この記事は随時更新していきます。

Reactに関するよくある質問と、それらに対する簡単な回答をすべて含めるように最善を尽くしました。

さらにReact関連の質問がある場合は、直接お問い合わせいただくか、またはコメントからお願い致します。

この記事が役に立ったら、ブックマークと共有をしていただけると幸いです。

プライバシーポリシー

© 2023 Icons8 LLC. All rights reserved.

© [deve.K], 2023. React logo is a trademark of Facebook, Inc. JavaScript is a trademark of Oracle Corporation and/or its affiliates. jQuery and the jQuery logo are trademarks of the JS Foundation. TypeScript and the TypeScript logo are trademarks of the Microsoft Corporation. Next.js and the Next.js logo are trademarks of Vercel, Inc. Firebase and the Firebase logo are trademarks of Google LLC. All logos edited by [deve.K].