blog/6 | ikuma-t.com

v-modelとはなにか

2022/6/21

に公開

バージョンによる挙動の違いやカスタムコンポーネントで使用する際に、v-modelの挙動が5秒くらいわからないときがありました。

1秒以内でv-modelを利用したコードを読めるように、未来の自分に向けてv-modelを説明しておきます。

v-modelの概要

v-modelはVuejsのディレクティブの1つで、主にフォーム入力バインディングの文脈で利用されます。

v-bindディレクティブとv-onディレクティブをまとめて書くためのシンタックスシュガーであり、v-model="hoge"の形式でリアクティブな変数hogeにフォームの値を束縛し、入力相当のイベント（inputとかchangeとか）発火時に入力値をhogeに代入するという動きをします。

v-model理解のためにはシンタックスシュガーを分解するのがよいのですが、Vue2とVue3で使用する変数名が異なるので、別々に解説します。

Vue 2系におけるv-model

<input v-model="inputText">

これはVue2系の場合、次のシンタックスシュガーになります。

<input :value="inputText" @input="inputText = $event.target.value">

:valueはv-bind:valueのショートハンド、@inputはv-on:inputのショートハンドです。

読み下すと、「このフォームにvalueという変数を束縛し、inputイベント時に$event.target.value（入力値）をvalueに設定する」という意味になります。

Vue2系でのv-modelのデフォルト値は

プロパティ名：value
イベント名：input

となっています。これはあくまでデフォルトであって変更することもできますが、それは後述のカスタムコンポーネントの章で紹介します。

Vue 3系におけるv-model

<input v-model="inputText">

これはVue3系の場合、次のシンタックスシュガーになります。

<input :modelValue="inputText" @update:modelValue="inputText = $event.target.value">

Vue2系との差分はプロパティ名とイベント名です。

プロパティ名：modelValue
イベント名：update:modelValue

1つのコンポーネント内でシンプルにv-modelを使用している場合は問題ないのですが、複数のコンポーネントでv-modelで定義した値をやりとりしたり、イベントで発火する処理を変更する場合はVue2と同様にすると動かないので注意が必要です。

こちらもVue2同様、あくまでデフォルトの値ですが、それは後述のカスタムコンポーネントの章で紹介します。

カスタムコンポーネントでv-modelを使用する

ここまでは単一のコンポーネントで使用するケースを確認してきました。

<input v-model="inputText">

これだけならだいぶ理解もしやすいのですが、カスタムコンポーネントに対してv-modelを使用するとなると一瞬理解のスピードが落ちるのでここで解説します。

// カスタムコンポーネントでは値をどうやって受け取る?
<MyCustomComponent v-model="inputText" />

基本的な考え方は結局のところ「props down, event up」です。各バージョンごとに詳細を確認します。

Vue2系概要

先述のようにVue2ではv-modelは次のシンタックスシュガーです。

<MyCustomComponent :value="inputText" @input="inputText = $event.target.value">

そのため、子コンポーネント側でこのinputText（親でv-modelに渡した値）を変更するには、次の要件を満たす必要があります。

propsでvalueという名前でinputTextを受け取る（props down）
値が変更されたタイミングで、新しい値とともに、親コンポーネントのinputイベントを発火する（event up）

いくつか書き方があるので、それぞれ見ていきます。

Vue2: Optins API

愚直に受け取る

<template>
  <input :value="value" @input="$emit('input', $event.target.value)">
</template>

<script>
export default {
  name: 'MyCustomComponent',
  props: {
    value: {
      require: true,
      type: String
    }
  },
}
</script>

シンプルにvalueをpropsとして受け取り、子コンポーネント内のinputイベントで親のinputイベントをemitします。

modelオプションを指定して受け取る

Vue2系ではmodelオプションを指定することができます（Vue3では廃止）。これを指定することで、子コンポーネント側でv-modelを受け付ける際に、v-modelのプロパティ名とイベント名を変更することができるようになります。

<script>
// プロパティ名がvalueからvalueOfModelに、イベント名がinputからvalueOfModelEventに変更される
model: { prop: 'valueOfModel', event: 'valueOfModelEvent' }
</script>

これを利用することで、先程のコードを次のように修正することができます。

<template>
  <input :value="valueOfModel" @input="$emit('valueOfModelEvent', $event.target.value)">
</template>

<script>
export default {
  name: 'MyCustomComponent',
  model: { prop: 'valueOfModel', event: 'ValueOfModelEvent' },
  props: {
    valueOfModel: {
      require: true,
      type: String
    }
  },
}
</script>

なお、この場合でも親コンポーネント側の呼び出し（v-model=xxx）は変わりません。あくまでカスタムコンポーネント側で受けたv-modelをどう処理するかの名前を変更するだけです。

v-modelと双方向算出プロパティで受け取る

算出プロパティcomputedを用いることで、カスタムコンポーネント内の記述でもv-modelを使用することができるようになります。

以下の手順で説明します。

computedのsetter
子コンポーネントでのprops直接編集禁止
v-modelと双方向算出プロパティで親のv-modelに子もv-modelでアクセスする

1.computedのsetter

computedはプロパティ名のみを指定した場合、getter関数として定義されますが、明示することでsetterを定義することもできます。

<script>
export default {
  // ...
  computed: {
    fullName: {
       // getterの定義
       get() {
         return `${this.firstName} ${this.lastName}`}
       },
       // setterの定義
       set(newValue) {
       const [newFirstName, newLastName] = newValue.split(' ')
         this.firstName = newFirstName
         this.lastName = new LastName
       }
    }
  }
}
</script>

この仕組みを利用すると、直接編集できないなんらかの値に対して、リアクティブ性を損なわずに参照と編集を行うことができるようになります。

2.子コンポーネントでのprops直接編集禁止

もともとサンプルとして出していたカスタムコンポーネントに戻りましょう。

<template>
  <input :value="value" @input="$emit('input', $event.target.value)">
</template>

<script>
export default {
  name: 'MyCustomComponent',
  props: {
    value: {
      require: true,
      type: String
    }
  },
}
</script>

inputタグの部分でやっていることがv-modelと同じっぽいのでこれをv-modelに置き換えてみます。

<template>
  <input :value="value" @input="$emit('input', $event.target.value)">
  <input v-model="value">
</template>

<script>
export default {
  name: 'MyCustomComponent',
  props: {
    value: {
      require: true,
      type: String
    }
  },
}
</script>

この実装をすると一見良さそうな感じもしますが、これではVue側で「親の値を直接変更すると、再レンダリングのたびに値が上書きされる」といった警告が出てしまいます。親から貰ってきた値を子が直接編集できてしまうと、複数のコンポーネントで同じようなことをやった時に収集がつかなくなります。

なので、v-modelのシンタックスシュガーの恩恵を受けつつ、算出プロパティを用いて間接的に値を編集します。

3.v-modelと双方向算出プロパティで親のv-modelに子もv-modelでアクセスする

まずはv-modelに直接紐づけられている親のvalueを別の値に変更します。

<template>
  <input v-model="value">
  <input v-model="innerValue">
</template>

<script>
export default {
  name: 'MyCustomComponent',
  props: {
    value: {
      require: true,
      type: String
    }
  },
}
</script>

このままでは定義が値の定義がされていないので、算出プロパティで「getterでは親のvalueの値を表示する、setterでは親のinputイベントを発火する」ように定義します。

<template>
  <input v-model="innerValue">
</template>

<script>
export default {
  name: 'MyCustomComponent',
  props: {
    value: {
      require: true,
      type: String
    }
  },
 computed: {
   innerValue: {
     get() {
       return this.value
     },
     set(newValue) {
       this.$emit('input', newValue)
     }
   }
 }
}
</script>

これによりこのコンポーネントのinnerValueは次のように動作するようになります。

（親の）v-modelで定義した値がpropsとして子に渡る
innerValueのgetterで親のvalueを表示する
inputタグに値を入力すると、innerValueのsetterでnewValueを引数に親のinputイベントが発火する
親コンポーネントのv-modelで定義した値が変更される

… 1に戻る

もちろんVue2系であれば、この方法の中でもmodelオプションを利用することもできます。

Vue2: Composition API

CompositionAPIの場合も同じです。modelオプションを使用することもできます。一例として算出プロパティを利用する例をComposition APIに書き換えてみます。

<template>
  <input type="text" name="name" v-model="innerValue">
</template>

<script>
import { computed } from '@vue/composition-api'

export default {
  name: 'MyInputComposition',
  model: { prop: 'modelValue', event: 'update:modelUpdate' },
  props: {
    label: {
      require: true,
      type: String
    },
    modelValue: {
      require: true,
      type: String
    }
  },
  setup (props, { emit }) {
    const innerValue = computed({
      get() {
        return props.modelValue
      },
      set(newValue) {
        emit('update:modelUpdate', newValue)
      }
    })

    return {
      innerValue
    }
  }
}
</script>

Vue3系概要

Vue3ではv-modelは次のシンタックスシュガーです。

<MyCustomComponent :modelValue="inputText" @update:modelValue="inputText = $event.target.value">

そのため、子コンポーネント側でこのinputText（親でv-modelに渡した値）を変更するには、次の要件を満たす必要があります。

propsでmodelValueという名前でinputTextを受け取る（props down）
値が変更されたタイミングで、新しい値とともに、親コンポーネントのupdate:ModelValueイベントを発火する（event up）

またVue2との変更点として、modelオプションが廃止されました。その代わりにv-modelに引数を取ることができます。

例えばカスタムコンポーネントの呼び出し側で

<MyCustomComponent v-model:title="inputText" >

とした場合、これは次と同じ意味になります。

<MyCustomComponent :title="inputText" @update:title="inputText" >

ちょうどデフォルト値のmodelValueの部分が指定した引数に置き換わるような形です。

次に各APIでのカスタムコンポーネントの書き方を見ていきます。簡略化のため、引数は用いずにデフォルト値で実装します。

Vue3: Options API

<template>
  <input type="text" name="options" v-model="innerValue">
</template>

<script>
export default {
  name: 'MyInputOptions',
  props: {
    modelValue: {
      type: String
    }
  },
  computed: {
    innerValue: {
      get() {
        return this.modelValue
      },
      set(newValue) {
        this.$emit('update:modelValue', newValue)
      }
    }
  }
}
</script>

算出プロパティを使用した形式ですが、Vue2で使用していた他の形式も使用できます（ただしmodelオプションは使えません）。

差分としては先述のプロパティ名とイベント名です。

Vue3: Composition API

Vue3.2.26からはscript setup構文が使えて、基本的にはこれが推奨されているので、その形式で書き直してみます。

<template>
  <input type="text" v-model="innerValue">
</template>

<script setup lang="ts">
import { computed, defineEmits, defineProps } from 'vue'

interface Props {
  modelValue: string;
}

interface Emits {
  (e: "update:modelValue", value: string): void;
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const innerValue = computed({
  get() {
    return props.modelValue
  },
  set(newValue: string) {
    emit('update:modelValue', newValue)
  }
})
</script>

一部tsが入ったことでPropsとEmitsの型が追加されましたが、冗長なreturn文が消えてスッキリしました。

v-modelの修飾子

v-modelではv-model.modifierの形式で修飾子を補うことで、v-modelにbindしている値を任意の形式に変換することができます。

Vue 2系

Vue2では組み込みの修飾子3種類のみが定義されています。

.trim：入力から空白を取り除く
.number：入力をnumberへ型キャストする。
.lazy：inputイベントではなく、changeイベントでイベントを発火する

Vue 3系

Vue3では上記の3種類の組み込み修飾子に加えて、カスタム修飾子を定義することもできるようになりました。

公式のサンプルにもある、最初の一文字を大文字にするcapitalize修飾子を実装します。

親コンポーネント

<script setup lang="ts">
import { ref } from 'vue'
import MyVModelModifier from './components/MyVModelModifier.vue'
const text = ref('')
</script>

<template>
  <MyVModelModifier v-model.capitalize="text"></MyVModelModifier>
  {{ text }}
</template>

子コンポーネント

<template>
  <input type="text" :value="modelValue" @input="emitValue" />
</template>

<script setup>
const props = defineProps({
  modelValue: String,
  modelModifiers: { default: () => ({}) }
})

const emit = defineEmits(['update:modelValue'])

const emitValue = (e) => {
  let value = e.target.value
  if (props.modelModifiers.capitalize) {
    value = value.charAt(0).toUpperCase() + value.slice(1)
  }
  emit('update:modelValue', value)
}
</script>

v-model.modifierの形式で記述すると、modelModifiersというpropが使用できるようになります。例えば、`capitalize“をmodifierの位置に指定すると、

modelModifiers = {
  capitalize: true
}

という具合にtrueを値に持つプロパティが作成されます。Vue側が提供するのはこのフラグ的な機能のみで、これを利用して実際にv-modelに紐づいたイベントで期待する処理（ここでは大文字にする処理）を実装する形式になります。

感想

ちょっと前までずっとscript setupで書いていたので、久しぶりにOptionsAPIだったり3.2.26以下のCompositionを触る機会でちょっと頭がこんがらがりました（「あれ、これVue3から使えるのか？CompositionAPIだから使えるのか？3.2.26以上で使えるのか？」など）。

今回整理したので、これでしばらくは大丈夫でしょう！

v-modelとはなにか

公開日: 2022/6/21

type-challenges 17日目: 15-last-of-array

2022/6/13

に公開

問題 & 解答

https://github.com/type-challenges/type-challenges/blob/main/questions/00015-medium-last/README.md🔗

配列Tをとって、最後の要素の型を返すLast<T>を実装する。

Variadic Tuple Typesが要素の最後でなくても使えるのがポイント。最後以外の要素を_Restとして受けて、最後の要素をLastで参照する。

type Last<T extends any[]> = T extends [...infer _Rest, infer Last] ? Last: never

類似の問題はこれ。

https://ikuma-t.work/posts/type-challenge-first-of-array🔗

別に参照する必要がないのであれば、inferにする必要もない

type Last<T extends any[]> = T extends [...any, infer Last] ? Last: never

そのうち、Lastを書くのも煩わしくなるくらいに慣れてきたら、これくらいが妥当なのかもしれない。

type Last<T extends any[]> = T extends [...any, infer L] ? L: never

感想

類似の問題とはいえ、久しぶりに解く問題でもスラスラと解けるようになっているので、これをやっている意味はあると思われる。

type-challenges 17日目: 15-last-of-array

公開日: 2022/6/13

type-challenges 16日目: 12-Chainable Options

2022/6/12

に公開

問題 & 解答

https://github.com/type-challenges/type-challenges/blob/main/questions/00012-medium-chainable-options/README.md🔗

option(key, value)を任意の数チェインして、最終的な結果をget()で呼び出すような 2 つの関数を提供する型を定義する。

type Chainable<Options = {}> = {
  option<K extends string, V>(
    key: K,
    value: V
  ): Chainable<Options & { [S in K]: V }>;
  get(): Options;
};

全然わからなくて答えをみたので、解析していく。まず、単純にoptionメソッドを持つオブジェクトを考える。

このメソッドの要件は

引数はkeyとvalueで、keyにstring、valueに任意の型を受ける
戻り値はここまで追加された option（オブジェクト）と、今回メソッドに渡された key と value で生成された option（オブジェクト）が合わさったもの。

// ここまでに定義されたOptionをチェーンする。何もOptionがなければ`{}`が初期値として設定される
type Chainable<Options = {}> = {
  option<K extends string, V>(
    key: K,
    value: V
  ): Chainable<Options & { [S in K]: V }>;
};

declare const base: Chainable; // Chainable<{}>

// Optionsは初期値`{}`
// Chainable<{} & { "require": boolean }>
// Chainable<{ require: boolean }>
const requireOptionAdded = base.option("require", false);

// optionで返されているOptionsは`{ require: boolean }`
// Chainable<{ require: boolean } & { old: boolean }>
// Chainable<{ require: boolean,  old: boolean; }>
const oldOptionAdded = requireOptionAdded.option("old", true);

あとは現在保持している Options を返すようにgetを実装する。

type Chainable<Options = {}> = {
  option<K extends string, V>(key: K, value: V): Chainable<Options & { [S in K]: V }>
  get(): Options;
}

調べたこと

アンビエント宣言（`declare`）

JavaScript コードを生成せずに、型推論のためだけの情報を渡すのに使用する。

declare;
a: number;

感想

再帰とはまた違った形式だけれど、地味に汎用性の高い型定義だと思うので覚えておこう

type-challenges 16日目: 12-Chainable Options

公開日: 2022/6/12

type-challenges 15日目: Tuple to Union

2022/6/11

に公開

問題 & 解答

タプル型を受け取って、その要素からなるユニオン型を返すTupleToUnion<T>を実装する。

type Arr = ['1', '2', '3']

type Test = TupleToUnion<Arr> // expected to be '1' | '2' | '3'

ルックアップ型を利用して、配列の要素の型を取得します。numberで取得すると配列の要素すべての型がユニオン型で返ります。

type TupleToUnion<T extends any[]> = T[number]

感想

TupleToObjectよりも簡単（Mapped Types使ってないし）と思ったんですけど、どうなんだろう。

type-challenges 15日目: Tuple to Union

公開日: 2022/6/11

type-challenges 14日目: Deep Readonly

2022/6/10

に公開

問題 & 解答

https://github.com/type-challenges/type-challenges/blob/main/questions/00009-medium-deep-readonly/README.md🔗

オブジェクトの各プロパティを再帰的にreadonlyにするDeepReadonly<T>を実装する。

前提：オブジェクトのみが渡される前提（クラスや配列、関数は考慮しなくてよい）

思考過程

単純にReadonlyにするのであれば、Mapped Typesで定義すれば良い。

type Readonly<T> = { readonly [P in keyof T]: T[P] }

再帰的にこの定義を実装していくので、Recursive Conditional Typesも使う。

type DeepReadonly<T> = { readonly [P in keyof T]: T[P] extends T[P]がオブジェクト ? DeepReadonly<T[P]>  : T[P]   }

T[P]がオブジェクトであるかどうかってどうやって判断するんだっけ？ここでいうオブジェクトには関数とか配列は含まなくて、単純な{ key: value }構造インデックスシグネチャを利用する？ブル本には推奨されていなかったけど、一旦これでやってみる。

type DeepReadonly<T> = { readonly [P in keyof T]: T[P] extends { [key: string]: unknown } ? DeepReadonly<T[P]>  : T[P] }

一応代入しようとすると、readonlyになっているんだけど、型定義を確認すると

type Expected = {
  readonly a: () => 22
  readonly b: string
　// DeepReadonlyは適用されているものの、展開されていない
  readonly c: <DeepReadonly {
    d: boolean
    // 略

となっていて、厳密な一致にはなっていない模様。

…というところでもうわからんとなったので、他の方の回答をみました。

type DeepReadonly<T> = keyof T extends never ? T : { readonly [k in keyof T]: DeepReadonly<T[k]> }

https://github.com/type-challenges/type-challenges/issues/187🔗

base caseをkeyof T extends neverで拾って、recursive caseでDeepReadonly<T>を呼び出しています。

感想

Objectの中でRecursive Conditional Typesを使うとなぜだめなのかがわかりませんでした。

ちゃんと代入しようとするとreadonlyになっているのに…。

type-challenges 14日目: Deep Readonly

公開日: 2022/6/10

type-challenges 13日目: 8-Readonly 2

2022/6/9

に公開

問題 & 解答

https://github.com/type-challenges/type-challenges/blob/main/questions/00008-medium-readonly-2/README.md🔗

二つの引数T、Kをとり、Kが指定されていればTのそのプロパティを、指定されていなければすべてのTのプロパティを読み取り専用に変換するMyReadonly<T, K>を実装する。

type MyReadonly2<T, K extends keyof T = keyof T> = { readonly [P in K]: T[P] } & Omit<T, K>

「readonlyなKで指定されているプロパティ & Tに含まれるK以外のプロパティ」を目指して作っていきます。

1. `readonly`な`K`で指定されているプロパティを作る

これが通常のReadonlyの実装です。

type MyReadonly2<T, K extends keyof T> = { readonly [P in T]: T[P] }

このままだとKの値がreadonlyにならないので、mapped typesでぐるぐるするところを変えます。

type MyReadonly2<T, K extends keyof T> = {
  readonly [P in T]: T[P]
  readonly [P in K]: T[P]
}

これによりKに渡されたプロパティはreadonlyになります。

2. `T`に含まれる`K`以外のプロパティ

これだけだとKに含まれるプロパティしか含まれていません。そのため、Kに渡されなかったプロパティの型を取得する必要があります。これはTの中からKに該当するプロパティを除いたものです。

例えば以下のようなTとKを渡すことを考えます。

// こっちがT
type Music ={
  name: string,
  artist: string,
  releaseYear: number
}

// こっちがK
type ReadonlyRequiredParams = "artist" | "releaseYear"

最終的にMyReadonly2に期待するのは次のような形式なので、name: stringを取り出せれば良いはずです。

type Expected = {
  name: string,  // TODO: これから取得したい
  readonly artist: string,  // { readonly [P in K]: T[P] } で表現される
  readonly releaseYear: number  // { readonly [P in K]: T[P] } で表現される
}

これは昨日出てきたOmit（組み込みの型の方です）を使用して、Omit<T, K>の形式で取り出すことができます。

type Music2 = Omit<Music, ReadonlyRequiredParams>
// type Music2 = { name: string; }

3. 1と2を合体

これらをインターセクション型で繋ぎこむと、解答を得ることができます。

type MyReadonly2<T, K extends keyof T> = { readonly [P in K]: T[P] } & Omit<T, K>

4. `K`のデフォルト値を設定する

…と思ったらまだエラーが出ています。この型はKを省略可能なのでそこでひっかります。Kは参照されるので何かしらの値を入れておく必要があります。

TypeScriptは型引数にデフォルト値を取ることができます。

https://typescriptbook.jp/reference/generics/default-type-parameter🔗

今回は「Kを指定しなかった場合、すべてのプロパティがreadonlyになる」ので、Kには「Tのプロパティすべて」を設定します。

type MyReadonly2<T,
  K extends keyof T
  K extends keyof T = keyof T
>

他の人の解答を見ていたら、Omit<T, K>の部分を& Tで繋ぎ込んでいる解答もあったのですが、これではだめでした。

interface Todo1 {
  title: string
  description?: string
  completed: boolean
}

interface Todo2 {
  readonly title: string
  description?: string
  completed: boolean
}

type TodoX = Todo1 & Todo2

const todoX: TodoX = {
  title: "JavaScriptを勉強する",
  completed: true
}

todoX.title = "TypeScript"  // titleはreadonlyではない。

感想

う〜ん、最後のインターセクション型の挙動についてはドキュメントをざっと読んだのですが、期待する記述は見つけられませんでした。readonlyだけならいいんですが、他にも自分が理解できていない部分があると怖いです。

type-challenges 13日目: 8-Readonly 2

公開日: 2022/6/9

type-challenges 12日目: 3-Omit

2022/6/8

に公開

問題 & 解答

組み込みのOmit<T, K>を実装する。Tのプロパティから、Kを除いた型を返す。

type MyExclude<T, U> = T extends U ? never : T;

type MyOmit<T, K extends keyof T> = { [P in MyExclude<keyof T, K>]: T[P] }

別解（こっちの方がナウい）

type MyOmit<T, K extends keyof T> = { [P in keyof T as Exclude<P, K>]: T[P]  }

調べたこと

Key Remapping in Mapped Types

Mapped Typesで使えるプロパティ名（キー）の再定義方法。

一例としてすべてのプロパティをreadonlyにするような型を書いてみます。（組み込み型としてReadonlyがありますが、理解のためにあえて再実装します）

// Mapped Typesを使って、各プロパティをreadonlyにする
type MyReadonly<T> = { readonly [P in keyof T]: T[P] }


// 以下はサンプル
type Book = {
  name: string,
  author: string,
}

const book: Book = {
  name: "ABC殺人事件",
  author: "アガサ・クリスティ"
}

const readonlyBook: MyReadonly<Book> = {
  name: "銀河鉄道の夜",
  author: "宮沢賢治",
}

book.name = "オリエント急行の殺人"; // OK

// Mapped Typesによってreadonlyになっているので、変更が禁止されている。
readonlyBook.name = "注文の多い料理店"; // TS2540: Cannot assign to 'name' because it is a read-only property.

このMapped Typesの使用法では、プロパティの属性は変わっていますが（指定なし→readonly）、プロパティ名自体は変わっていません（nameはnameのまま、authorはauthorのまま）。

TypeScript 4.1 以降で導入されたMapped Typesで使用できるasキーワードを使用すると、プロパティ名を変更することができるようになります。

// as キーワードを利用して、`keyof T`で取得される「name」「author」をそれぞれ「specialName」「specialAuthor」に変換する
type MySpecial<T> = { [P in keyof T as `special${Capitalize<string & P>}`]: T[P] }

// プロパティ名が変換されている
const specialBook: MySpecial<Book> = {
  specialName: "SPY FAMILY",
  specialAuthor: "遠藤達哉"
}

console.log(specialBook.name); // TS2339: Property 'name' does not exist on type 'My Special".

asの後ろに変換後の名前を指定します。今回はTemplate Literal Typesを利用して、動的にプロパティを組み立てています。

`special${Capitalize<string & P>}`  // "specialXxxxx..."に変換

:::message

Capitalizeについては、TypeScriptのコンパイラに組み込まれている型でその名の通り1文字目を大文字にして返します。定義としてはCapitalize<string>になりますが、keyofで取得しているのはオブジェクトのプロパティなのでstring | symbol | numberの可能性があるため、参照したプロパティ名をそのまま使用してしまうとエラーになります。

`special${Capitalize<P>}` //TS2344: Type 'P' does not satisfy the constraint 'string'. Type 'keyof T' is not assignable to type 'string'.Type 'string | number | symbol' is not assignable to type 'string'.Type 'number' is not assignable to type 'string'.

そのため、インターセクション型を利用して、stringに絞り込んでいます。

:::

ここまでの例では単純にプロパティ名を変換しているだけでしたが、asはneverを返した場合にそのプロパティを除外することもできます。これが今回の問題の別解です。

// Conditional Typesでそのまま実装した形式
type MyOmit<T, K extends keyof T> = { [P in keyof T as P extends K ? never : P]: T[P] }

// 組み込みのExcludeを使用する
type MyOmit<T, K extends keyof T> = { [P in keyof T as Exclude<P, K>]: T[P] }

参考

https://www.typescriptlang.org/docs/handbook/2/mapped-types.html#key-remapping-via-as🔗

https://www.typescriptlang.org/docs/handbook/2/template-literal-types.html🔗

感想

組み込みのExcludeを使っていいのかどうかわからなくて再実装しました。Excludeは過去回で登場しています。

https://ikuma-t.work/posts/type-challenge-exclude🔗

解いた後にantfuさんの解答のスレッドをみてasが使えることを知って色々と調べました。ワカラナイコトマダマダタクサンネ・・・。

type-challenges 12日目: 3-Omit

公開日: 2022/6/8

デスクを変えたのでモニターアームが使えるようになった

2022/6/7

に公開

月1で「Fika」をやっている

最近「Fika」と称して家族会議的なものを月1でやっています。

これは月に1度ただカフェに行って夫婦間で「そういえばこれ変えたいんだけど」とか「本当はこういう暮らしがしたい」みたいなことをただ言っていく試みです。「Fika」という名前はスウェーデン語のコーヒーブレイク的な意味で、「短い名前だと予定入れやすいし、可愛い名前だとテンション上がるよね」ということで命名しています。

https://ja.wikipedia.org/wiki/%E3%83%95%E3%82%A3%E3%83%BC%E3%82%AB🔗

もともとこういう夫婦感の課題解決みたいなところはだいぶ前から挑戦していて、TrelloやNotionにタスクを積んだりしていたのですが、如何せんそういうのが好きなのは私だけでして、妻はまったく見ず、何も解決に向かわないことからがっつり時間を設けてその中で発散し、アクションを決めていくスタイルに移行しました。This is Fikaです。

一応議事録の役割と話のフレームみたいなものがあった方が課題を見つけやすいので、Transnoを利用して1枚のマインドマップを毎回その場で更新しながら話をしています。

transnoで作成しているマインドマップ

Transnoについてはこちらの記事で紹介しています。

https://ikmbear.hatenablog.com/entry/20211215/1639551694🔗

今日のテーマは「家」から派生して「ものを減らす」だったので、アクションとしてあがったものを色々と整理した上でそのついでにリビングの机と作業用のデスクを入れ替えました。

デスク入れ替えでモニターアームが使えるように

もともと横長のそこそこ大きいデスクを使っていたんですが、机の各辺に12cmくらいの返しがあったため、モニターアームを購入しておきながら使えていませんでした（2年くらい倉庫に眠っていた）。

もともとの机は写真のデスクの2倍の長さがあったので、「モニターアームが使えるようになるのはいいけど、メモリが狭くなるのはいたしかたなしか〜」とややネガティブに捉えていたのですが、入れ替えてみると全然問題なし。

むしろ広いスペースにものがおけなくなったことで、本当に必要なものだけがおけるようになりました。これはパーキンソンの第N法則に掲げていいかと。

モニターアームを導入したことでモニター配下にクラムシェルのMacが配置できるようになったので、とても良い感じです。

来週から新しいお仕事が始まる予定なので、今回のデスク含めて現状の作業環境で使用しているものを近日中にまとめておいて、定点観測で何が不要で逆に何が必要だったかまとめたいと思います。

デスクを変えたのでモニターアームが使えるようになった

公開日: 2022/6/7

type-challenges 11日目: 2-Get Return Type

2022/6/7

に公開

問題 & 解答

組み込みのReturnType<T>を実装する。

inferで戻り値の型を取得して、あとはいつものU or neverです。

type MyReturnType<T extends (...args: any[]) => any> = T extends (...args: any[]) => infer U ? U : never

調べたこと

`ReturnType`

https://www.typescriptlang.org/docs/handbook/utility-types.html#returntypetype🔗

関数Fを渡すと、その戻り値の型を返す。

type T0 = ReturnType<() => string>
// type T0 = string

感想

昨日の問題の変化系ですね。

https://ikuma-t.work/posts/type-challenge-parameters🔗

任意の関数を示すのに、(...args: any[]) => anyがさらっと出てくるようになったのは成長の証です。

ところでMediumの問題とEasyの境目はなんなのでしょうか…。

type-challenges 11日目: 2-Get Return Type

公開日: 2022/6/7

Reactのchildrenとはなにか

2022/6/7

に公開

要約

Reactのchildrenはpropsが保持しているプロパティです。親コンポーネントのタグに入れられた要素を参照します。

Reactナニモワカラナイ

いままでVueとVanila JSしか触ってこなかったので、現在TypeScriptとReactのキャッチアップをしているのですが、まずはTypeScriptに時間を割いているためReactはちょっと後回し気味です（のわりにDenoやってるやんけワレ）。一応チュートリアルくらいはやっています。

いやでもReact と TSが目につくようにこのブログはNext.js + TypeScriptで作成しているのですが、カスタマイズにあたってReactの初歩的な知識でつまづいたのでまとめます。

Reactのchildren

対象バージョン

React v18.0

意味

Reactのchildrenはpropsが保持しているプロパティです。親コンポーネントのタグに入れられた要素を参照します。

例えばこのブログでは共通レイアウトをLayoutコンポーネントで定義しています。

type Props = {
  children: React.ReactNode
}

const Layout = ({ children }: Props) => {
  return (
    <>
      <Meta />
      <div className="min-h-screen flex flex-col">
        <main className="flex-1">{children}</main>
        <Footer />
      </div>
    </>
  )
}

Layoutコンポーネントは各所で使用されており、一例としてブログのトップページを示すpages/index.tsxでは次のように呼び出されています。

const Index = ({ allPosts }: Props) => {
  const morePosts = allPosts
  return (
    <>
      <Layout>
        <Head>
          <title>ikuma-t</title>
        </Head>
        <Container>
          <Intro />
          {<MoreStories posts={morePosts} />}
        </Container>
      </Layout>
    </>
  )
}

この時、<Layout> ~ </Layout>の間の部分がchildrenとなります。

        <Head>
          <title>ikuma-t</title>
        </Head>
        <Container>
          <Intro />
          {<MoreStories posts={morePosts} />}
        </Container>

Layoutコンポーネントでは最終的に次のような内容が描画されます。

    <div>
      <Meta />
      <div className="min-h-screen flex flex-col">
        <main className="flex-1">
    {// ここからchildrenの内容が描画されている}
          <Head>
            <title>ikuma-t</title>
          </Head>
          <Container>
            <Intro />
            {<MoreStories posts={morePosts} />}
          </Container>
    {// ここまでchildrenの内容が描画されている}
        </main>
        <Footer />
      </div>
    </div>

childrenの型

先のサンプルコードの通り、childrenの型はReact.ReactNodeです。どうもv18から仕様が変わったようで、明示的に型を指定していない状態でprops.childrenを使用すると、エラーになるようになったそうです。

参考：https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-typescript-definitions🔗

おわり

Reactのchildrenとはなにか

公開日: 2022/6/7