- [Trim Left](#trim-left)
- [Trim](#trim)
- [Capitalize](#capitalize)
- [Replace](#replace)
- [ReplaceAll](#replaceall)
- [Append Argument](#append-argument)
- [Permutation](#permutation)
- [Length of String](#length-of-string)
- [Flatten](#flatten)
- [Append to Object](#append-to-object)
- [Absolute](#absolute)
- [String to Union](#string-to-union)
- [Merge](#merge)
- [CamelCase](#camelcase)
- [KebabCase](#kebabcase)
- [Trim Left 〜 KebabCase の感想](#trim-left-〜-kebabcase-の感想)



### Trim Left

`\n`, `\t` も取り除く必要がある。

```ts
type TrimLeft<S extends string> = S extends `${" " | "\n" | "\t"}${infer U}`
  ? TrimLeft<U>
  : S;
```

### Trim

TrimLeft は作ったのでそれを応用して TrimRight を作り両方適用すればいいだけ。やってる順番が並んでるバッジの順なので後ほど TrimRight を作る問題がある。

```ts
type TrimLeft<S extends string> = S extends `${" " | "\n" | "\t"}${infer U}`
  ? TrimLeft<U>
  : S;
type TrimRight<S extends string> = S extends `${infer U}${" " | "\n" | "\t"}`
  ? TrimRight<U>
  : S;
type Trim<S extends string> = TrimRight<TrimLeft<S>>;
```

### Capitalize

文字列操作用に Uppercase, Lowercase, Capitalize, Uncapitalize がある。
Capitalize を自分で実装しようというやつ。Uppercase 使えば一発。

```ts
type Capitalize<S extends string> = S extends `${infer First}${infer Other}`
  ? `${Uppercase<First>}${Other}`
  : S;
```

### Replace

最初は以下のように Head と Tail に From が挟まれており、To に入れ替えれば良いと考えた。

```ts
type Replace<
  S extends string,
  From extends string,
  To extends string
> = S extends `${infer Head}${From}${infer Tail}` ? `${Head}${To}${Tail}` : S;
```

これだと `Replace<'foobarbar', '', 'foo'>` のケースが満たせなかったが、空白が来た場合は単に元の文字列を返せばいいので

```ts
type Replace<
  S extends string,
  From extends string,
  To extends string
> = From extends ""
  ? S
  : S extends `${infer Head}${From}${infer Tail}`
  ? `${Head}${To}${Tail}`
  : S;
```

簡単。

### ReplaceAll

From までで S を分割して処理を分ける。そうしないと変換したものを再度変換して期待通りの結果にならなかったりする。

```ts
type ReplaceAll<
  S extends string,
  From extends string,
  To extends string
> = S extends `${infer Head}${From}${infer Tail}`
  ? `${Replace<`${Head}${From}`, From, To>}${ReplaceAll<Tail, From, To>}`
  : S;
```

### Append Argument

Parameters の実装の応用みたいな感じ。

```ts
type AppendArgument<Fn extends (...args: any[]) => any, A> = Fn extends (
  ...args: infer R
) => any
  ? (...args: [...R, A]) => ReturnType<Fn>
  : Fn;
```

### Permutation

元の形変数は T だけだが、これだとどうにもならない。
初期値として T と同じ値を持つ型変数を与えてやることで `A` と `A | B` を両方利用することができるっぽい...
サンプルは以下

```ts
type Test<T, U = T> = T extends U ? [T, U] : [];
type Result = Test<1 | 2>;
// => [1, 1 | 2] | [2, 1 | 2]
```

上記のような挙動を使うと解ける。
普通にわからなかった...

### Length of String

string を tuple に変換して length を取得すれば OK

```ts
type StringToTuple<S extends string> = S extends `${infer First}${infer Tail}`
  ? [First, ...StringToTuple<Tail>]
  : [];
type LengthOfString<S extends string> = StringToTuple<S>["length"];
```

### Flatten

愚直に解く感じ。

```ts
type Flatten<T extends any[]> = T extends [infer U, ...infer K]
  ? U extends any[]
    ? [...Flatten<U>, ...Flatten<K>]
    : [U, ...Flatten<K>]
  : [...T];
```

### Append to Object

簡単。 in で入れたいキーに U も混ぜて conditional type で T のキー以外のときには V を value に入れればいい。

```ts
type AppendToObject<T, U extends string | symbol | number, V> = {
  [Key in keyof T | U]: Key extends keyof T ? T[Key] : V;
};
```

### Absolute

template literal に突っ込んで infer を利用して-を除けば良い。楽勝。

```ts
type Absolute<T extends number | string | bigint> = `${T}` extends `-${infer U}`
  ? U
  : `${T}`;
```

### String to Union

考え方は String of Length と同じだと思い、

```ts
type StringToUnion<T extends string> = T extends `${infer Head}${infer Tail}`
  ? Head | StringToUnion<Tail>
  : T;
```

としたがゼロ文字、一文字しか渡されないケースで死ぬ。0 文字のときは never を返してやる必要がある。

```ts
type StringToUnion<T extends string> = T extends ""
  ? never
  : T extends `${infer Head}${infer Tail}`
  ? Head | StringToUnion<Tail>
  : T;
```

### Merge

愚直にやった。キーが被った場合は後勝ち。

```ts
type Merge<
  F extends Record<string, unknown>,
  S extends Record<string, unknown>
> = {
  [Key in Exclude<keyof F, keyof F & keyof S> | keyof S]: Key extends Exclude<
    keyof F,
    keyof F & keyof S
  >
    ? F[Key]
    : Key extends keyof S
    ? S[Key]
    : never;
};
```

### CamelCase

ケバブケースをキャメルケースにする。
注意点としては `hoge-Fuga-Piyo` のようなものは変換しない。

```ts
type CamelCase<S> = S extends "-"
  ? S
  : S extends `${infer Head}-${infer Tail}`
  ? `${Head extends "" ? "-" : Head}${Tail extends ""
      ? "-"
      : Tail extends Uncapitalize<Tail>
      ? `${CamelCase<Capitalize<Tail>>}`
      : `-${CamelCase<Tail>}`}`
  : S;
```

-を挟んでいる infer で取った型変数が`''` のときは`-` を返すのもポイントかも

### KebabCase

パスカルケースをケバブケースにする。

```ts
type KebabCase<S> = S extends `${infer Head}${infer Tail}`
  ? `${Uncapitalize<Head>}${Tail extends ""
      ? ""
      : Capitalize<Tail> extends Uncapitalize<Tail>
      ? KebabCase<Tail>
      : Tail extends `${Capitalize<Tail>}`
      ? `-${KebabCase<Tail>}`
      : KebabCase<Tail>}`
  : S;
```

CamelCase に続いてゴリ押し感がすごい

## Trim Left 〜 KebabCase の感想

Permutation の挙動が本当にわからなかった。直感的には `[A, A | B]` じゃなくて `[A, A]` になりそうな気がするんだけどそうではないのはかなり学びになった。(実際利用するかと言われるとしないと思う。)
後は、純粋に入れ子が多くなってきていて管理するのが大変。

type challengesのmediumを埋める(2)

- [解き方と考えたこと](#解き方と考えたこと)
  - [Get Return Type](#get-return-type)
  - [Omit](#omit)
  - [Readonly 2](#readonly-2)
  - [Deep Readonly](#deep-readonly)
  - [Tuple to Union](#tuple-to-union)
  - [Chainable Options](#chainable-options)
  - [Last of Array](#last-of-array)
  - [Pop](#pop)
  - [Promise.all](#promiseall)
  - [Type Lookup](#type-lookup)
- [Get Return Type から Type Lookup までの感想](#get-return-type-から-type-lookup-までの感想)



## 解き方と考えたこと

easy と同じようにまとめます。簡単だと思ったところにはそう書いてあります。

### Get Return Type

これは easy にいてもいいのでは？

```ts
type MyReturnType<T> = T extends (...args: any) => infer R ? R : never;
```

### Omit

Exclude を使う。ビルトインの`Exclude`を使いたくない場合は easy でやった `MyExclude` を引っ張ってくればいいと思う。
簡単

```ts
type MyOmit<T, K> = { [Key in Exclude<keyof T, K>]: T[Key] };
```

### Readonly 2

特定のプロパティのみ readonly にするやつ
デフォルト型引数をちゃんと考えてやると良い

```ts
type MyReadonly2<T, K extends keyof T = keyof T> = {
  readonly [Key in K]: T[Key];
} & { [Key in Exclude<keyof T, K>]: T[Key] };
```

### Deep Readonly

Record 型を忘れてなければ大丈夫だと思う。簡単

```ts
type DeepReadonly<T> = {
  readonly [Key in keyof T]: T[Key] extends Record<string, unknown>
    ? DeepReadonly<T[Key]>
    : T[Key];
};
```

### Tuple to Union

簡単

```ts
type TupleToUnion<T extends any[]> = T[number];
```

### Chainable Options

ちょっと答えみないとわからなかった...
型引数にデフォルト値を設定するのが肝で、そこに気づけば簡単かなぁ...
自力だと無理だったのでコードは残さないでおく

### Last of Array

簡単

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

### Pop

簡単

```ts
type Pop<T extends any[]> = T extends [...infer E, infer L] ? E : never;
```

### Promise.all

- `values`の型に`readonly` を与えるのに気づかないと無理

```ts
declare function PromiseAll<T extends any[]>(
  values: readonly [...T]
): Promise<{ [K in keyof T]: T[K] extends Promise<infer U> ? U : T[K] }>;
```

### Type Lookup

type フィールドが T であればいいのでそれをチェックする。
簡単だと思う。

```ts
type LookUp<U, T> = U extends { type: T } ? U : never;
```

## Get Return Type から Type Lookup までの感想

easy レベルの問題が普通にある。Type Lookup までの中では Chainable Options が一番難易度が高く、その次に Readonly 系、Promise.all が同じくらいに感じた。

type challengesのmediumを埋める(1)


[type-challenges](https://github.com/type-challenges/type-challenges) の easy を埋めたので解き方、どこで詰まったかなど残す。

## 解き方と考えたこと

### 前提

`@ts-expect-error` がついているケースは与えたパラメータではエラーが出るケース。
どこにも注釈がなかった気がするし使ったことがないのでわからなかった。

### Pick

T, K が与えられるので K が T のキーであると制約をかけておく。
`Hoge in Fuga` のようにすると`Piyo[Hoge]` のようにアクセスすることもできる。

```ts
type MyPick<T, K extends keyof T> = { [Key in K]: T[Key] };
```

### Readonly

deep にやる必要はないし、 Pick ができれば難しくない

```ts
type MyReadonly<T> = { readonly [key in keyof T]: T[key] };
```

### Tuple to Object

`@ts-expect-error` に注意

- case を満たせばいいので`any` を変更すればいい

```ts
type TupleToObject<T extends readonly string[]> = { [K in T[number]]: K };
```

### First of Array

テストケースの`Expect<Equal<First<[]>, never>>`が厄介

- 単に先頭にアクセスするだけなら`T[0]`
- `T[0]` が `T[number]` にいるかチェックする

```ts
type First<T extends any[]> = T[0] extends T[number] ? T[0] : never;
```

### Length of Tuple

注意点

- Array オブジェクトがどういうプロパティを持っているか考える
- any を extends している場合は変更できるか考える

```ts
type Length<T extends readonly any[]> = T["length"];
```

### Exclude

簡単

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

### Awaited

少し考える必要がある。

- infer
- Z が`Promise<Promise<string | number>>`であることに気をつける

```ts
type MyAwaited<T extends Promise<any>> = T extends Promise<infer R>
  ? R extends Promise<any>
    ? MyAwaited<R>
    : R
  : never;
```

### If

簡単
`@ts-expect-error` に注意

```ts
type If<C extends boolean, T, F> = C extends true ? T : F;
```

### Concat

簡単

```ts
type Concat<T extends unknown[], U extends unknown[]> = [...T, ...U];
```

### Includes

easy の中で一番難しかった。自力では無理だった...
ヒントだけおいておくと

- `{ readonly a: 'A' }, { a: 'A' }` は違う方なので判別する必要がある
- infer を複数利用する

### Push

簡単

```ts
type Push<T extends unknown[], U> = [...T, U];
```

### Unshift

簡単

```ts
type Unshift<T extends unknown[], U> = [U, ...T];
```

### Parameters

infer の使い所に気がつけば解けると思う。

```ts
type MyParameters<T extends (...args: any[]) => any> = T extends (
  ...args: infer R
) => any
  ? R
  : never;
```

## 難しかったと感じた問題

### Awaited

easy の中で初めて infer を使う問題(のはず)。
正直 easy の問題で infer 使うとは思ってなかった。だからだいぶ考えることになった。

### Includes

一番難しい。正直わからなかったので Issue 覗いた。
Issue を見てもいくつかケース漏れてるパターンが結構あったのでできなくてもしょうがないかもしれない。

## まとめ

Includes が自力で解けなかったのは純粋に実力不足と感じました。TS の型に慣れるのにかなり良い問題でした。ただ、easy の中でも難易度に差がありすぎると感じたので本当に easy としてやってもらうなら Awaited は `infer`を利用すると事前に伝えた上で、Includes はなしでいいんじゃないかなと思いました。


type challengesのeasyを埋めた

毎年書いているような気がするので簡単に一年を振り返ろうと思います。



- [仕事](#仕事)
- [私生活](#私生活)
  - [趣味](#趣味)
  - [旅行](#旅行)
  - [引っ越し](#引っ越し)
  - [学習](#学習)
- [健康](#健康)
- [まとめ](#まとめ)



## 仕事

2021 年 3 月末で前職を退職し、現職にいます。(現職を知りたい方がいれば[Twitter](https://twitter.com/mt_coff)の DM ください)
転職(退職)した理由は挙げればキリがない状態なので記載しません。

さて、現職で何をやっているか詳細は書きませんが、ポジションとしては Web フロントエンドエンジニアです。
現職であった大きなトピックとして

- プロジェクトにおいて技術選定を行った
- 採用イベントで登壇

といったものがあります。
技術選定に関しては今年の 4,5 月時点ではチャレンジングな構成を選んだと思います。

そして、採用イベントです。基本表に出て話せる人間ではないと自分では思っています。
しかし、この手の話から逃げているのも良くないと考えチャレンジしてみました。結果が良かったのかは自分ではいまいちよくわかっていませんが、悪くはなかったと思いたい。

前職では大学時代からの知り合いと基本は仕事をしていたのでコミュニケーションに問題が...みたいなのはなかった(はず)ですが、環境も変わったこともあり、相手の反応を見てから動いていたらなかなか動けなかったりしました。
あまり良くない動きだったので継続して改善していきたい。

なにはともあれ転職してよかったです。

## 私生活

### 趣味

Apex ばかりやってました。
目標としていたダイアモンドには到達したので燃え尽きた感じはあります。誰か一緒に遊んでください。本当に

### 旅行

コロナ禍ではありますが、旅行は楽しかったです。
行ったところだけ並べておきます。

- 東京ディズニーシー
- 沖縄
- 熱海
- iZoo
- 軽井沢
- 鴨川シーワールド
- 東京タワー

めっちゃあちこち行ってるな...

### 引っ越し

新宿から千葉に引っ越しました。
リモートワークなので特に問題なく家賃も下げれてハッピーです。

### 学習

できていない。
正確に言えば書籍から情報を得ることができていない。
全くやっていないわけではないが、将来を考えると自己投資ができていないことになるので、ここは課題。

## 健康

不健康の極み。
一応転職後にストレスはかなり軽減されたようで前職時代の健康診断の結果から今年の健康診断の結果は随分改善したように思います。
が、依然として不健康なままではあるのでなんやかんや継続できているジム通いを今後も継続していきたいです。
一応ジム通いの成果です。

- ベンチプレスが 100kg 挙げられた
- スクワットは計算上では 160kg~挙がる(らしい)
- もともと広かった肩幅が余計広くなった

筋力に関してはしっかり伸びました。同様に、体重も増えたので来年は体重を落としつつ重量はキープかなといったところ。

## まとめ

- 転職したよ
- Apex 誰か一緒にやってくれ
- 旅行もした
- 不健康だった

以上です。
総じて感触的にはプラスな年だったと思っています。
来年はもっとちゃんとやりたいです。

2021年振り返り


Playwright を使って HTML をレンダリングをしたかったのですが、`goto` を利用して localhost にアクセスする方法ばかりヒットするのでメモとして残しておきます。

## setContent を使う

`setContent` を使えばそれで任意の HTML を Playwright 上でレンダリングすることができます。

一連の流れをコードで残します。`playwright-chromium` を利用しているので `playwright/core` を利用している場合いい感じに置き換えてください。

```js
import { chromium } from "playwright-chromium"

const browser = await chromium.launch();
const ctx = await browser.newContext();
const page = await ctx.newPage();
await page.setContent('<div>Hello World</div>');
```

これだけです。

ドキュメントのリンクは以下

[https://playwright.dev/docs/api/class-frame#frame-set-content]()

PlaywrightだけでHTMLをレンダリング


<AdventCalendar
  calendar={{
    name: "Aizu Advent Calendar 2021",
    url: "https://adventar.org/calendars/6636",
  }}
  prev={{
    author: "natumn",
  }}
  next={{
    author: "n04ln(NoahOrberg)",
  }}
  day={17}
/>

---

何も各ネタがなかったので TypeScript の型の入門編みたいな形でなにか書けないかと思っていたところ唐突に思いついたので型でじゃんけんできるかやってみようと思います。

思いついて 5 分でできるくらいには簡単なので TypeScript 初心者でも大丈夫です。

## Step1 手の形の型を定義する

まずはじゃんけんの手(グー、チョキ、パー)を定義しないと始まりません。

今回は Rock, Scissors, Paper でやりますが、置き換えてもらって大丈夫です。

```ts
type Rock = "Rock";
type Scissors = "Scissors";
type Paper = "Paper";

type Hand = Rock | Scissors | Paper;
```

以上で Rock, Scissors, Paper それぞれ定義できました。

Rock を例にすると

```ts
// Ok
const rock: Rock = "Rock";
// エラー
const hoge: Rock = "hoge";
```

のように Rock は文字列`Rock`のみ受け付ける型です。簡単ですね。

そして、`Hands` は Union 型で定義されています。`Rock`か`Scissors`か`Paper`のみ受け付けます。

```ts
// Ok
const rock: Hand = "Rock";
const scissors: Hand = "Scissors";
const paper: Hand = "Paper";
// エラー
const notHand: Hand = "Mud Hand";
```

ここまででじゃんけんの手が型で表現できました。

## Step2 引き分けになったこと、勝利したことを型で表現

じゃんけんは必ず勝敗と引き分けがあります。

今回は簡単にするためにどの手が勝利したかを型で表現します。(引き分けを除けばどちらかが必ず勝利するため)

```ts
type Won<T extends Hand> = `${T} won`;
```

`<T extends Hand>`と`${T}`といった表現が出てきました。一つずつ簡単に説明します。

`<T extends Hand>` に関しては Generics で、`T`は任意の型を取取ることができます。`T extends Hand` としているため`T`は`Hand`型のみ受け取るように制限されます。

そして`${T} won`ですが、Template Literal Types を利用しています。利用するとどうなるかというと、

```ts
type Rock = "Rock";
type Won<T extends Hand> = `${T} won`;
type RockWon = Won<Rock>;
// RockWonは `Rock won`となる
```

といった形で変数の埋め込みのようにできます。
若干難しいですがじゃんけんくらいならざっくりとした理解で大丈夫です。

あいこの存在を忘れていましたね。

```ts
type Drawn = "Drawn";
```

これでいいでしょう。

## Step3 勝敗の判定を型で表現する

さて最後は勝敗を判定する型です。
ここで利用するのは Conditional Type です。
どんなものかというと、

```ts
type Condition<T, U> = T extends U ? "T can inherit U" : "T cannot inherit U";
```

単に T に U が代入可能であれば`:` の左、代入不可能であれば右側を評価するものです。三項演算子と同じです。

これを使って勝敗を判定する型を定義します。気合さえあれば誰でもできます。

```ts
type Judge<T extends Hand, U extends Hand> = T extends Rock
  ? U extends Rock
    ? Draw
    : U extends Scissors
    ? Win<T>
    : Win<U>
  : T extends Paper
  ? U extends Rock
    ? Win<T>
    : U extends Scissors
    ? Win<U>
    : Draw
  : U extends Rock
  ? Win<U>
  : U extends Scissors
  ? Draw
  : Win<T>;
```
長い！
やっていることは単純で`Judge<T extends Hand, U extends Hand>`でそれぞれ手を受け取ります。

その後は `T extends Rock ? U extends Rock ? Drawn : U extends Scissors ...` と勝ち、引き分けをConditional Typeで判別していきます。 

そうすると
```ts
type Result = Judge<Rock, Scissors>
const result: Result = "Rock won"
```
といった感じに出来て`Result`型として定義した変数には結果である`Rock won` しか入らなくなります。

誰かと対戦できるわけはありませんが一応じゃんけんは型で表現できたことになるはず...?

## まとめ
じゃんけんを型で表現できました。(?)

動作確認したい方は [TypeScript Playground](https://www.typescriptlang.org/play?#code/C4TwDgpgBASg9gYwNZQLxQET2Rg3AKFEigGUEBLAZ0rgCdK1Myqb69DxoAFAQ0lsYZe-dh2IB1cgDsAPABUoEAB7AIUgCYMAEjw0A+RgAMAJAG85AXygB3OFMMEx0HRsbYUAH1IVqdBl+EIWgIiaAARWh5rKUEIqKlRUKgAKQBXdQBzCHlFFTVNKBd1ABooAFVc1Q1tXXUDdAVlKoL3fCgoAH5yyvyGVvb2rrjotoGALm6m3u8WP1HBqElZOT15qAmlmTLV9onGvOqoQNpRroqpw-6Brs2VtYnzg4LmX3o1m+ktnfGoYalRh49S6IJCnRafbYAyZPBgvViUMF-KG3PSOJIwCCUVIAG2AjDSmWy7lKx1R+HwCDslDxtExOOAEwxWNxgmONjsoiAA) へ！


blog.mt_coff

type challengesのmediumを埋める(2)

type challengesのmediumを埋める(1)

type challengesのeasyを埋めた

2021年振り返り

PlaywrightだけでHTMLをレンダリング

TypeScriptの型だけでじゃんけん