React でコメントを書くための複数の方法

役立つコメントを書くことは、より効率的なコーディングプロセスを実現するための鍵の 1つです。これらにより、既存の Web アプリケーションの保守、デバッグ、および構築がはるかに簡単になります。プログラマーはプロジェクトを終えると、さまざまなタスクに移り、今書いたコードの詳細を忘れてしまいます。プログラマーはコメントを使用して、自分の考えを説明し、コードの最も複雑な部分を説明できます。コメントを使用すると、後で戻ってコードを簡単に理解できます。機能を追加したり、デバッグしたり、既存のコードに基づいてビルドしたりする必要がある場合は、時間を大幅に節約できます。

React コンポーネントは、理想的なシナリオでは非常にシンプルで理解しやすいものでなければなりませんが、常にそうであるとは限りません。コンポーネントの目的と機能が不明確な場合があります。コメントを書くことで、難しいコードを少し説明することができます。

React のコメント-JSX 構文

JSX は、React アプリケーションの作成を容易にする HTML のような構文です。これにより、開発者は、React.createElement() メソッドを何十回も呼び出す代わりに、直感的にアプリを構築できます。コンパイラは、JSX コードをバニラ JavaScript に変換します。

React コンポーネントは、通常の JavaScript と JSX で構成されています。両方にコメントを書くことはできますが、JSX でコメントを書くには少し余分な作業が必要です。React の作成者は、JSX 内で通常の JavaScript コメントを許可しないことを決定しました。また、将来的に JSX に個別のコメント機能を追加する予定もありません。

通常の JavaScript では、コメントを書き込むために通常の構文を使用できます。JSX の外部でコメントを書く方法は次のとおりです。

class App extends Component {
  render() {
    // single line comment
    /*
    multi
    line
    comment 
    */
    return <h1>Hi! Try edit me</h1>;
  }
}

HTML と非常によく似ていますが、JSX でコメントを書き込むための構文は HTML とは異なります。コメントの開始と終了をマークするために <!-- および --> タグを使用することはできません。

代わりに、中括弧を使用する必要があります。これにより、JSX 内でバニラ JavaScript 式を記述できます。中括弧がないと、JSX のコメントは通常のテキストとして解析されます。中括弧で囲まれている限り、JSX で複数行の JavaScript コメントを入力できます。

次に例を示します。

class App extends Component {
  render() {
    return  (
    <div>
    <h1>Sample heading</h1>
    {/* The heading text is large */}
    </div>
    )
  }
}

終了タグを移動し、両方のタグが中括弧の間にある限り、複数行にコメントを書き込むこともできます。

JSX での 1 行コメントの記述は、もう少し複雑です。 //タグは、閉じ中括弧を含む行全体を自動的にコメントアウトするため、{//コメント} のようなものを書くことはできません。1 行コメントを追加する場合は、中括弧が次の行にあることを確認してください。例を見てみましょう：

class App extends Component {
  render() {
    return  (
    <div>
    <h1>Sample heading</h1>
    {// comment
    }
    </div>
    )
  }
}

この構文は少し混乱する可能性があります。ほとんどの React 開発者は、コメントの開始と終了を明確に区別するために複数行の構文に固執しています。

これについて詳しく知りたい場合は、JSX の playcode でコメントすることを検討してください。