ReactJS -厳格モード：初めてのガイド

こんにちは、未来のReact開発者さんたち！今日は、Reactの重要なしかししばしば見落とされる機能である厳格モードについて深く掘り下げます。プログラミングが新しい方でも心配しないでください。私はこの概念をステップバイステップでガイドします。カップの珈琲（またはあなたの好みの茶）を片手に、この学習冒険に一緒に飛び込みましょう！

ReactJS - Strict Mode

厳格モードとは？

具体的な詳細に入る前に、まずReactにおける厳格モードが何かを理解しましょう。運転を学ぶことを例にとってみましょう。厳格モードは、非常に厳しい運転教習師があなたの横に座り、あなたの小さな間違いを指摘するようなものです。それはあなたを叱るためではなく、より良い運転手（または、私たちの場合はより優れたReact開発者）になるための助けです。

厳格モードは、アプリケーション内の潜在的な問題を強調するためのツールです。それにより、子孫に対して追加のチェックと警告が有効になります。使い方を見てみましょう：

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);

この例では、私たちは全体のAppコンポーネントをReact.StrictModeでラップしています。これは、App内のすべてのコンポーネントがこれらの追加チェックを受けることを意味します。

では、厳格モードが実際に何をチェックするか見てみましょう。

不安全なライフサイクルの使用

ライフサイクルとは？

まず、不安全なライフサイクルについて話す前に、ライフサイクルとは何かを理解しましょう。Reactでは、コンポーネントは生成（マウント）から消滅（アンマウント）までの系列のステージを通ります。これらのステージをライフサイクルと呼びます。

不安全なライフサイクル

いくつかのライフサイクルメソッドは、非同期レンダリングにおいてバグを引き起こす可能性があるため、不安全とされています。厳格モードはその使用を特定するのに役立ちます。以下はその例です：

class OldComponent extends React.Component {
componentWillMount() {
console.log("このメソッドは不安全です！");
}

render() {
return <div>Hello, I'm an old component!</div>;
}
}

このコンポーネントを厳格モードで使用すると、コンソールに不安全なcomponentWillMountライフサイクルメソッドを使用している警告が表示されます。

その代わりに、より安全な代替を használjon.以下は不安全なメソッドとその安全な代替の表です：

不安全なメソッド	安全な代替
componentWillMount	componentDidMount
componentWillReceiveProps	static getDerivedStateFromProps
componentWillUpdate	getSnapshotBeforeUpdate

レガシーレフAPIの使用

レフとは？

レフは、レンダーメソッド内で作成された DOM ノードまたは React エレメントにアクセスする方法を提供します。UIの特定の部分への直接ラインのようなものです。

ストリングレフ（レガシー）

以前は、レフはストリングを使用して作成されていました：

class OldButton extends React.Component {
componentDidMount() {
this.refs.myButton.focus();
}

render() {
return <button ref="myButton">Click me!</button>;
}
}

この方法はレガシーであり、問題を引き起こす可能性があります。厳格モードでは、ストリングレフを使用していると警告が表示されます。

現代的なレフの使用

代わりに、createRef APIまたはuseRefフックを使用してください：

class ModernButton extends React.Component {
constructor(props) {
super(props);
this.myButton = React.createRef();
}

componentDidMount() {
this.myButton.current.focus();
}

render() {
return <button ref={this.myButton}>Click me!</button>;
}
}

この例では、React.createRef()を使用してレフを作成しています。これははるかに安全で効率的です。

Legacy findDOMNodeの使用

findDOMNodeとは？

findDOMNodeは、特定のReactコンポーネントインスタンスをDOMツリー内で検索するために使用されていたメソッドです。しかし、潜在的な問題を引き起こす可能性があるため、現在は非推奨されています。

findDOMNodeの使用例

class OldFinder extends React.Component {
componentDidMount() {
const node = ReactDOM.findDOMNode(this);
node.style.backgroundColor = 'red';
}

render() {
return <div>I'm going to be red!</div>;
}
}

このコードはdivの背景色を赤に変更します。しかし、このようにfindDOMNodeを使用することは推奨されていません。厳格モードでは警告が表示されます。

現代的な代替

代わりに、レフを使用してください：

class ModernFinder extends React.Component {
constructor(props) {
super(props);
this.myDiv = React.createRef();
}

componentDidMount() {
this.myDiv.current.style.backgroundColor = 'blue';
}

render() {
return <div ref={this.myDiv}>I'm going to be blue!</div>;
}
}

これは同じ結果を達成しますが、より安全でReactに親和性があります。

結論

そして、皆さん、ここまでReactの厳格モードについての旅を一緒にしました。不安全なライフサイクル、レガシーレフの使用、非推奨のfindDOMNodeメソッドに関する警告を探求しました。忘れてはならないのは、厳格モードはあなたの友好的な近所のReact開発者ツールで、より良い、より安全なコードを書くための助けです。

このまとめを迎えるにあたり、ある生徒が私に言った言葉を思い出します、「Reactは厳しいが愛情深い親のように、私たちを守るための規則を設け、同時に素晴らしいものを創造する自由を与えてくれます。」その通りだと思います！

練習を続け、学び続け、最も重要なのは、コードを書き続けてください。次回まで、ハッピーレクト！

Credits: Image by storyset