checkbox component (チェックボックス コンポーネント)

export const CheckBox: React.FC<CheckBoxProps> = ({
  name,
  value,
  checked,
  error,
}: CheckBoxProps) => {
  // [参照] https://react-hook-form.com/jp/api/#register
  // (1) register: このメソッドを使用すると、input/select の Ref とバリデーションルールを
  //                React Hook Form に登録 (register) することができます。
  // (2) watch: これは指定された input/inputs を監視し、その値を返します。
  //            defaultValue が定義されていない場合、watch の初回のレンダリングは
  //            register の前に呼び出されるため undefined を返しますが、
  //            第2引数として defaultValue を設定して値を返すことができます。
  // (3) getValues: この関数は、フォームの値を読み取るのに役立ちます。
  //                watchの間はgetValuesはトリガーされません
  //                入力の変更を再レンダリングまたはサブスクライブします。機能は次のとおりです。
  const { register, getValues, watch } = useFormContext()
  const { error: contextError } = React.useContext(CheckBoxGroupContext)

  // 省略

  return (
    <>

      {/* https://qiita.com/HikaruSasaki/items/36032eb90f28c1e59d0b */}
      {/* [1] <input type="checkbox">自体を非表示にします。 */}
      {/* [2] 非表示にしてもチェック出来るようにする為、<input type="checkbox">を<label>タグで囲います。 */}
      {/* [3] チェックボックスを表示させる為、<input type="checkbox">の後ろに<span>要素を入れます。 */}
      {/* [4] チェックボックスが、チェックされてる時、されてない時に応じて<span>のbefore擬似要素に対して、任意のスタイルを指定してあげます。 */}

      {/* https://kredo.jp/media/css-symbol-meaning/ */}
      {/* 「+」は、指定した要素に隣接する要素にスタイルを適用します。 */}
      {/* 「>」と似ていますが、子要素ではなく「隣接する要素」にのみ適用します。 */}
      {/* https://github.com/react-hook-form/react-hook-form/tree/master/examples */}
      {/* https://codesandbox.io/s/checkbox-min-checked-forked-0tkjz?file=/src/App.js:378-618 */}

https://www.tutorialspoint.com/es6/es6_array_method_join.htm

className={checkbox.join(' ')}