Another works Developers Blog

<h1>はじめに</h1>
<p>こんにちは！Another works でフロントエンドエンジニアをしている<strong>まっち</strong>です！</p>
<p>今回は汎用的なElementレイヤーのコンポーネントを作るときの Props設計はこうした方がよいのではないか、という話をしていきます！</p>
<p>※ここで言うElementレイヤーとは： input, button, label など、atomic design でいう atom の部分</p>
<h1>ComponentPropsを使おう</h1>
<p>このように一つ一つのプロパティを定義するより</p>
<pre><code class="language-tsx:input.tsx">type Props = {
  value: string;
  onChange?: React.ChangeEventHandler&lt;HTMLInputElement&gt;;
};
export const Input = ({ value, onChange }: Props) =&gt; (
  &lt;input value={value} onChange={onChange} /&gt;
);
</code></pre>
<p><code>ComponentProps</code>を利用して<br>
下記のようにした方がよい、ということです。<br>
（element が持つデフォルトの props を全て受け取れるように）</p>
<pre><code class="language-tsx:input.tsx">// input element が持つ props を全て受け取れるようになる
type Props = React.ComponentProps&lt;'input'&gt;;
export const Input = (props: Props) =&gt; &lt;input {...props} /&gt;;
</code></pre>
<p><code>ComponentProps</code>を利用することで、React が提供している Element が持つ Props を全てうけとれるようになります。</p>
<ul>
<li><code>ComponentProps</code></li>
<li><code>ComponentPropsWithRef</code>：refを許容</li>
<li><code>ComponentPropsWithoutRef</code>：refを許容しない</li>
</ul>
<p>※個人的には<code>ref</code>も許容したい場面が多いので<code>ComponentPropsWithRef</code>を利用することが多いです。</p>
<h1>ComponentPropsを使うメリット</h1>
<p>メリットは<strong>コンポーネントのメンテナンスコストが軽減される</strong>ことにあります</p>
<h3>ComponentPropsを使わない場合</h3>
<p>作成当初は<code>value</code>, <code>onChange</code>のみを受け取れるコンポーネントとして作成</p>
<pre><code class="language-tsx:input.tsx">type Props = {
  value: string;
  onChange?: React.ChangeEventHandler&lt;HTMLInputElement&gt;;
};
export const Input = ({ value, onChange }: Props) =&gt; (
  &lt;input value={value} onChange={onChange} /&gt;
);
</code></pre>
<p><code>type</code>や<code>onBlur</code>を利用する要件に対応させたくなった場合<br>
<code>props</code>を追加する必要があり、都度コンポーネントに手を加える必要があります。</p>
<pre><code class="language-tsx:input.tsx">type Props = {
  value: string;
  onChange?: React.ChangeEventHandler&lt;HTMLInputElement&gt;;
  type: string; // 追加
  onBlur?: React.FocusEventHandler&lt;HTMLInputElement&gt;; // 追加
};
export const Input = ({ value, type, onChange, onBlur, onKeyPress }: Props) =&gt; (
  &lt;input
    value={value}
    onChange={onChange}
    type={type} // 追加
    onBlur={onBlur} // 追加
  /&gt;
);
</code></pre>
<h3>ComponentPropsを使うと</h3>
<p><code>type</code>や<code>onBlur</code>を利用する要件に対応させたくなった場合も<br>
その都度<code>props</code>を追加する必要がなくなります。</p>
<pre><code class="language-tsx">/**
 * React.ComponentProps&lt;'input'&gt;; で
 * input要素が持つPropsを全て受け取れるようになる
 *
 * value?: string;
 * type?: string;
 * onChange?: React.ChangeEventHandler&lt;HTMLInputElement&gt;;
 * onBlur?: React.FocusEventHandler&lt;HTMLInputElement&gt;;
 * onFocus?: React.FocusEventHandler&lt;HTMLInputElement&gt;;
 * onKeyPress?: React.KeyboardEventHandler&lt;HTMLInputElement&gt;;
 * etc...
 */
</code></pre>
<pre><code>type InputProps = React.ComponentProps&lt;'input'&gt;;
export const Input = (props: InputProps) =&gt; {
  // 分割代入で全ての値を渡すことができる
  return &lt;input {...props} /&gt;;
};
</code></pre>
<p><code>props</code>を全てそのまま渡すのではなく、特定の <code>props</code> ではコンポーネント独自の振る舞いをさせたいときは、<code>{...props}</code> の下にその<code>props</code>を渡します。</p>
<p>ex)<code>onChange</code> では特定の振る舞いを強制させたいとき</p>
<pre><code class="language-tsx:input.tsx">type Props = React.ComponentProps&lt;'input'&gt;;
export const Input = (props: Props) =&gt; {
  const handleChange = (e: ChangeEvent&lt;HTMLInputElement&gt;) =&gt; {
    // このコンポーネントで onChange 発火時に必ず実行したい振る舞いを書く
    props.onChange?.(e);
  };
  return (
    &lt;input
      {...props} // &lt;- onChange が含まれるものの
      onChange={handleChange} // &lt;- こちらの handleChange が優先される
    /&gt;
  );
};
</code></pre>
<h1>より実践的な使い方</h1>
<p>より実践的な使い方として下記のようなインプットコンポーネントを例に考えてみます。</p>
<p><strong>デフォルト</strong><br>
<img src="https://storage.googleapis.com/p_6370f30cc5584de95b79f07e/9ad99afc-7127-4b49-b577-05fd70962934%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-01-2810.11.32.png" alt="スクリーンショット2023-01-2810.11.32.png"></p>
<p><strong>エラー</strong><br>
<img src="https://storage.googleapis.com/p_6370f30cc5584de95b79f07e/05e4b263-855f-4b1a-97f1-0a31a61d5b95%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-01-2810.12.01.png" alt="スクリーンショット2023-01-2810.12.01.png"></p>
<p>先ほどとは異なり、コンポーネント独自のPropsをもたせる必要がでてくるかと思います。</p>
<pre><code class="language-tsx:input.tsx">type InputElementProps = React.ComponentProps&lt;'input'&gt;;
type Props = {
  title: string; // コンポーネント独自のprops
  errorMessage?: string; // コンポーネント独自のprops
  inputElementProps?: InputElementProps; // inputElementのprops
};
export const InputComponent = ({
  title,
  errorMessage,
  inputElementProps,
}: Props) =&gt; {
  const handleChange = (e: ChangeEvent&lt;HTMLInputElement&gt;) =&gt; {
    // このコンポーネントで onChange 発火時に必ず実行したい振る舞いを書く
    inputElementProps?.onChange?.(e);
  };
  return (
    &lt;div style={rootStyle}&gt;
      &lt;p style={titleStyle}&gt;{title}&lt;/p&gt;
      &lt;input {...inputElementProps} onChange={handleChange} /&gt;
      &lt;p style={errorStyle}&gt;{errorMessage}&lt;/p&gt;
    &lt;/div&gt;
  );
};
</code></pre>
<p><strong>コンポーネントを利用するとき</strong></p>
<pre><code class="language-tsx:index.tsx">const Index = () =&gt; {
  const [value, setValue] = useState('');
  return (
    &lt;div&gt;
      &lt;InputComponent
        title=&quot;タイトル&quot;
        errorMessage=&quot;エラーメッセージ&quot;
        inputElementProps={{
          value,
          onChange: (e) =&gt; setValue(e.target.value),
        }}
      /&gt;
    &lt;/div&gt;
  );
};
</code></pre>
<h3>Element がもつ props の仕様を変更したい場合</h3>
<p>さらに、<code>input</code> の <code>value type</code> を <code>password</code> と <code>email</code> だけに限定させたい、というユースケースがあったとします。</p>
<p>その場合、<code>input</code>が持つデフォルトの<code>props</code>である<code>type</code>をコンポーネントで独自に型定義して、<code>InputElementProps</code>は<code>type</code>を除いた型にします。</p>
<pre><code class="language-tsx:input.tsx">type InputElementProps = Omit&lt;React.ComponentProps&lt;'input'&gt;, 'type'&gt;; // input element の props から type が除外される
type Props = {
  title: string;
  type: 'password' | 'email'; // password と email に限定（inputのデフォルトでは string型）
  errorMessage?: string;
  inputElementProps?: InputElementProps; // inputElementのprops
};
export const InputComponent = ({
  title,
  type,
  errorMessage,
  inputElementProps,
}: Props) =&gt; {
  const handleChange = (e: ChangeEvent&lt;HTMLInputElement&gt;) =&gt; {
    // このコンポーネントで onChange 発火時に必ず実行したい振る舞いを書く
    inputElementProps?.onChange?.(e);
  };
  return (
    &lt;div style={rootStyle}&gt;
      &lt;p style={titleStyle}&gt;{title}&lt;/p&gt;
      &lt;input 
        {...inputElementProps}
        type={type} // ここで渡すのを忘れずに
        onChange={handleChange}
      /&gt;
      &lt;p style={errorStyle}&gt;{errorMessage}&lt;/p&gt;
    &lt;/div&gt;
  );
};
</code></pre>
<p><strong>コンポーネントを利用するとき</strong></p>
<pre><code class="language-tsx:index.tsx">const Index = () =&gt; {
  const [value, setValue] = useState('');
  return (
    &lt;div&gt;
      &lt;InputComponent
        title=&quot;タイトル&quot;
        errorMessage=&quot;エラーメッセージ&quot;
        type='password' // password or email しか渡せない
        inputElementProps={{
          value,
          onChange: (e) =&gt; setValue(e.target.value),
          type: 'number' // error: 除外しているのでここでは渡せない
        }}
      /&gt;
    &lt;/div&gt;
  );
};
</code></pre>
<h1>最後に</h1>
<p>自分自身もコンポーネント設計は、現状迷いながら実装している部分が多いです！</p>
<p>最後までお読みいただきありがとうございました！</p>
<h3>参考資料</h3>
<p>ありがとうございました。</p>
<ul>
<li><a href="https://github.com/kufu/smarthr-ui">smarthr-ui</a></li>
<li><a href="https://github.com/mui/material-ui">mui</a></li>
<li><a href="https://zenn.dev/takepepe/articles/atoms-type-definitions">Takepepeさん記事</a></li>
</ul>


React.ComponentPropsを使ったコンポーネントの Props 設計

<h1>はじめに</h1>
<p><code>TypeScript</code>での<code>null</code>と<code>undefined</code>の使い分け方に対する考えと、<code>null</code>と<code>undefined</code>の違いについて、自分なりに調べて学んだことを書いていきます。</p>
<h1>どっちを使うべき？</h1>
<p><strong><code>undefined</code>を積極的に利用していくべき</strong><br>
（<code>null</code>の利用を避けられない場合を除いて）</p>
<p>ではないか、という結論になりました。</p>
<p><code>TypeScript</code>開発チームのGithub wiki にあるコーディングガイドにも</p>
<blockquote>
<p>Use undefined. Do not use null.</p>
</blockquote>
<p>「<code>null</code>は使用せず、<code>undefined</code>を使用してください。」<br>
と記載されています。<br>
（あくまで<code>TypeScript</code>の開発チーム内での決め事ではありますが、）</p>
<p>https://github.com/Microsoft/TypeScript/wiki/Coding-guidelines#null-and-undefined</p>
<h1>null と undefined の違い</h1>
<p><code>null</code>も<code>undefined</code>もプリミティブ型の値の一つ。<br>
どちらも「値が存在しない」ことを表現するものであるものの、<code>null</code>と<code>undefined</code>には明確な違いがある。</p>
<h2>意味合いでの違い</h2>
<p><strong>null</strong>: 代入すべき値が存在しないため、値がない（変数がメモリに対する参照を保持しない）<br>
<strong>undefined</strong>: 値が代入されていないため、値がない（変数が未定義である、初期化されていない）</p>
<h2>言語使用上での違い</h2>
<h2>nullは自動的に設定されないが、undefinedは自動的に設定される</h2>
<p><strong>null</strong>: 開発者が意図的に設定しない限り設定されない。<br>
<strong>undefined</strong>: 開発者が意図しなくても、自動的に設定される。</p>
<pre><code class="language-js">// 変数を宣言したときに初期値が存在しなければ、その変数にundefinedが設定される。
let value;
console.log(value); //=&gt; undefined
</code></pre>
<pre><code class="language-js">// オブジェクトに存在しないプロパティや配列にない要素にアクセスしたときも、自動的にundefinedになる。
const obj = {};
console.log(obj.foo); //=&gt; undefined
const arr = [];
console.log(arr[0]); //=&gt; undefined
</code></pre>
<pre><code class="language-js">// 戻り値がない関数の戻り値を取得したときもundefinedになる。
function func() {}
console.log(func()); //=&gt; undefined
</code></pre>
<h2>nullはリテラル、undefinedは変数</h2>
<p><strong>null</strong>: <a href="https://wa3.i-3-i.info/word15346.html">リテラル</a>なのでnullという名前の変数を作ることはできない。<br>
<strong>undefined</strong>: 変数なので<code>undefined</code>という変数を作ることができる。（グローバルより内側のスコープに限る）</p>
<p>※ ちなみに<code>window</code>オブジェクト（グローバルオブジェクト）は<code>undefined</code>というプロパティを持っている。この初期値は<code>undefined</code>。</p>
<table>
<thead>
<tr>
<th>コンソール（Google Chromeディベロッパーツール）</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621162/7c7bab83-0ee4-18e6-7b19-2c2f3ae481a2.png" width="300" /></td>
</tr>
</tbody>
</table>
<h2>typeof の挙動</h2>
<pre><code class="language-js">typeof null          // &quot;object&quot; (歴史的な理由で &quot;null&quot; ではないらしい)
typeof undefined     // &quot;undefined&quot;
</code></pre>
<h2>isNaN の挙動</h2>
<pre><code class="language-js">isNaN(1 + null)      // false
isNaN(1 + undefined) // true
</code></pre>
<h2>JSON での挙動</h2>
<p><strong>null</strong>: 設定できる。<br>
<strong>undefined</strong>: 設定できない。</p>
<pre><code class="language-js">console.log(JSON.stringify({ foo: undefined })); //=&gt; {}
console.log(JSON.stringify({ foo: null })); //=&gt; {&quot;foo&quot;: null}
</code></pre>
<h1>おまけ</h1>
<h2>== と === で比較</h2>
<pre><code class="language-js">null === undefined   // false
null  == undefined   // true
</code></pre>
<h1>まとめ</h1>
<p>冒頭でも述べた通り、<code>TypeScript</code>での開発では<br>
<code>null</code>の利用を避けられない場合を除いて、<code>undefined</code>を積極的に利用していくべき、かなと考えました。</p>
<p>理由としては、<br>
「値が存在しない」ことを表現する方法を、「自動的に発生してしまう<code>undefined</code>」に寄せた方が統一しやすいから、と思いました。（日本語難しい...）</p>
<p>ただ一方で、<code>null</code>を返すAPIなどのハンドリングをする場合などは<code>null</code>の利用を避けられなかったりするので、完全に<code>null</code>を利用しないことは難しいのかもしれない。</p>
<p>いろいろと調べてきたものの、</p>
<blockquote>
<p>使い分け意識を育てる労力は、それに見合うメリットが少ない</p>
</blockquote>
<p>との意見もありました。</p>
<h2>参考</h2>
<p>ありがとうございました！</p>
<ul>
<li>https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/null</li>
<li>https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/undefined</li>
<li>https://typescriptbook.jp/reference/values-types-variables/undefined-vs-null</li>
<li>https://typescript-jp.gitbook.io/deep-dive/recap/null-undefined</li>
<li>https://github.com/Microsoft/TypeScript/wiki/Coding-guidelines#null-and-undefined</li>
<li>https://www.amazon.co.jp/%E7%8B%AC%E7%BF%92JavaScript-%E6%96%B0%E7%89%88-CodeMafia-%E5%A4%96%E6%9D%91-%E5%B0%86%E5%A4%A7/dp/479816027X/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&amp;keywords=%E7%8B%AC%E7%BF%92JavaScript&amp;qid=1639187025&amp;s=books&amp;sr=1-1</li>
</ul>


Articles by まっち / match

React.ComponentPropsを使ったコンポーネントの Props 設計

【JavaScript / TypeScript】null と undefined の違いと比較