【初心者向け】React/React Native でコメントを活用する方法！コードを理解しやすく、デバッグも楽々

2024-04-02

React/React Native でコメントを使う方法

1行コメント

// これは1行コメントです
const MyComponent = () => {
  // ...
};

/*
  これは複数行コメントです。
  複数行にわたって記述できます。
*/
const MyComponent = () => {
  // ...
};

JSX 内のコメント

<div>
  {/* これはJSX内のコメントです */}
  <h1>Hello World!</h1>
</div>

コメントの活用例

コードの説明：変数や関数の役割、処理の流れなどを説明
TODO：未実装の機能や修正すべき箇所をメモ
警告・注意：潜在的な問題やバグの可能性を記述
作者情報：作成者や最終更新者、連絡先などを記載

コメントツール

Prettier：コードフォーマッター。コメントの整形も自動化
ESLint：コード静的解析ツール。コメントの書き方にルールを設定

補足

コメントはコードの一部として実行されないため、パフォーマンスに影響を与えません。
コメントはコードを理解しやすくするだけでなく、デバッグにも役立ちます。
チーム開発においては、コメントの書き方に統一性を持たせることが重要です。

以上、React/React Native でコメントを使う方法についての解説でした。

// ファイル名: MyComponent.js

// コンポーネントの説明
// このコンポーネントは、ユーザー名と年齢を表示するシンプルなコンポーネントです。
const MyComponent = ({ user }) => {
  // ユーザー名の取得
  const { name, age } = user;

  // 複数行コメント
  /*
    年齢に基づいて、ユーザーへの挨拶文を作成します。
  */
  const greeting = age >= 18 ? `こんにちは、${name}さん！` : `ようこそ、${name}さん！`;

  return (
    <div>
      {/* JSX内のコメント */}
      <h2>{greeting}</h2>
      <p>年齢: {age}歳</p>
    </div>
  );
};

// デフォルトプロパティ
MyComponent.defaultProps = {
  user: {
    name: 'John Doe',
    age: 20,
  },
};

export default MyComponent;