[JavaScript] 分割代入された引数の名称変更とデフォルト値を同時に指定する方法

背景

基本的にコンポーネントの引数は分割代入で受け取ることが多く、デフォルト値も合わせて設定しているケースも多い。そうした際、さらに対象の変数名も関数内部の処理に合わせて変更しておきたい場合もある。
例えば、コンポーネントとしてはasというプロパティを受け取りたいが、コンポーネント内では分かりやすい変数名としてTagという名称で扱いたい場合などがある。

引数を分割代入する

まずは、基本的な分割代入による props の受け取り方法は以下の通り。

type Props = {
  as?: string;
  role?: string;
  children?: React.ReactNode;
  gap?: string;
};

export const Grid = ({ as, role, children, gap, ...props }: Props) => {
  return (
    <as role={role} {...props}>
      {children}
    </as>
  );
};

JSX 内で小文字から始まる <as> は HTML のタグとみなされる可能性がある点に注意が必要である。

デフォルト値の設定

分割代入と同時にデフォルト値を設定する方法は以下の通り。

export const Grid = ({ as = 'div', role, children, gap, ...props }: Props) => {
  return (
    <as role={role} {...props}>
      {children}
    </as>
  );
};

この例では、as プロパティに対して 'div' をデフォルト値として設定している。

プロパティ名称の変更とデフォルト値の同時指定

コンポーネント内部でより明確な名称を用いるため、分割代入時にプロパティ名の変更とデフォルト値の設定を同時に行う方法は以下の通り。

export const Grid = ({ as: Tag = 'div', role, children, gap, ...props }: Props) => {
  return (
    <Tag role={role} {...props}>
      {children}
    </Tag>
  );
};

外部から渡される as プロパティを内部では Tag という名称で扱い、デフォルト値として 'div' を設定している。

// `as: Tag`で名称変更、そこに`= 'div'`でデフォルト値を設定している。
{
  as: Tag = 'div';
}

補足だが、JSX 内で <Tag> と記述することにより、React はこれをコンポーネントとして解釈するため、意図した動的タグの指定が可能となる。