React の console.log()

console.log() は、開発者がコードをデバッグするための頼りになるメソッドです。これは、JavaScript 値をコンソールに記録するために使用されます。React は console.log() メソッドの使用を制限しませんが、その特別な JSX 構文のため、従う必要のあるルールがあります。

React console オブジェクト

console オブジェクトには、数十のデバッグメソッドを含むインターフェイスが付属しています。メソッドの正確なリストは、公式 MDNページにあります。この記事では、最も一般的なメソッドである console.log() に焦点を当て、それを最大限に活用する方法を検討します。

React にログインする

React で値を console.log() する方法はたくさんあります。コンポーネントが再レンダリングされるたびに値のログ記録を続行する場合は、sender() 呼び出しの下に console.log() メソッドを配置する必要があります。この実装は次のようになります。

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      input: ""
    }
  }
  render() {
    console.log('I log every time the state is updated');
    return <input type="text" onChange={(e) => this.setState({input: e.target.value})}></input>;
  }
}

テキスト <input> 要素に新しい値を入力するたびに、状態が変化し、コンポーネントが再レンダリングされます。そのたびに、指定されたテキストがコンソールに記録されます。

値を 1 回だけ console.log() する場合は、React クラスコンポーネントのライフサイクルメソッドを使用できます。実際のコードは次のようになります。

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      input: ""
    }
  }
  componentDidMount(){
    console.log('I log only once');
  }
  render() {
    return <input type="text" onChange={(e) => this.setState({input: e.target.value})}></input>;
  }
}

アプリをデバッグしたら、開発モードを終了する前に、必ず console.log() のすべてのインスタンスを削除してください。console.log() ステートメントは本番モードに何も追加しないため、削除する必要があります。

カスタマイズ

React 開発者は、通常の console.log() メソッドのスタイルをカスタマイズできます。たとえば、注意が必要なタスクに対して特別なメッセージを作成する場合は、console.log() のコア機能に基づいてカスタムの console.attention メソッドを作成できます。

アプリの任意の場所にこの定義を追加し、メッセージ引数を指定して console.important() メソッドを呼び出すと、コンソールに色付きのメッセージが表示されます。

console.important = function(text) {
console.log('%c important message', 'color: #913831')
}

色付きのコンソールメッセージの例を次に示します。