blog/8 | ikuma-t.com

type-challenges 4日目: 14-First of Array

2022/5/31

に公開

問題 & 解答

type-challenges/README.md at main · type-challenges/type-challenges🔗

配列Tを受け取って、その配列の最初の要素の型をとるようなジェネリクスFirst<T>を実装する。

type arr1 = ['a', 'b', 'c']
type arr2 = [3, 2, 1]

type head1 = First<arr1> // expected to be 'a'
type head2 = First<arr2> // expected to be 3

Conditional Typesを利用して、要素がある場合には1番目の要素の型を返すようにする

type First<T extends any[]> = T extends [] ? never : T[0]

別解を見ていたら、inferを使っているケースもありました

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

inferキーワードを使ってfirstという名前で配列の1番目の要素の型を推論している。...infer _Restの部分はrest parametersを使って、配列の残りの要素の方を_Restに押し込んでいる。といっても今回は使用しない型なので_始まりにしているっぽいです。

調べたこと

Conditional Types（条件型）

条件に応じて動的に型を定義する方法

type IsString<T> = T extends string ? true : false

inferキーワード

条件の一部としてジェネリック型を宣言できる機能。conditional typesのextendsの条件部分に限定して使用することができる
infer Uの形式で推論した型情報をUとして扱うことができるようになる。

type SecondArg<F> = F extends (a: number, b: infer B) => string ? B : never

このサンプルでは、渡された関数Fが、number型の第1引数と何かしらの第2引数を持ち、stringを返す関数である場合、第2引数の型をinferで推論して返すというもの。

never型

neverは決して戻ることのない関数の型。無限ループや単純に例外をthrowするような関数の戻り値
他の全ての型のサブタイプであるbottom型：値を持たない型
どんな変数も入れることができない | どんな方にも入れることができる
無限ループや

Index Accessed Types

Lookup Typesと同じ。type-challenges 3日目: 11-Tuple to Object | ikuma-t🔗に書いてある「配列の要素の型を取得する」と同じ
公式：TypeScript: Documentation - Indexed Access Types🔗
Lookup Typesと同じであることのソース：TypeScript: Documentation - Overview🔗
- indexed access types, also called lookup types

感想

今日は条件分岐型を覚えました。1週間前くらいまではジェネリクス型見たら「うわっ」って感じだったんですけど、だいぶ慣れてきました。（感覚としてはギター始めたての頃のBm7-5に近い）

手元にオライリーのプログラミングTypeScriptをおいてリファレンス的に使っているんですが、第4版が2021年発行なので、ちょっと情報が古いかもと思い始めています。もう一冊くらい手元においておいてもよいかなあ。

type-challenges 4日目: 14-First of Array

公開日: 2022/5/31

type-challenges 4日目（その2）: 18-Length of Tuple

2022/5/31

に公開

問題 & 解答

type-challenges/README.md at main · type-challenges/type-challenges🔗type-challenges/README.md at main · type-challenges/type-challenges🔗

タプルが与えられるので、その長さを型とするLengthを実装する

type tesla = ['tesla', 'model 3', 'model X', 'model Y'] as const
type spaceX = ['FALCON 9', 'FALCON HEAVY', 'DRAGON', 'STARSHIP', 'HUMAN SPACEFLIGHT'] as const

type teslaLength = Length<tesla>  // expected 4
type spaceXLength = Length<spaceX> // expected 5

constアサーションが適用されているので、readonlyな配列Tを定義する。 Array.prototypeのインスタンスプロパティlengthを指定して、長さを取得する。

type Length<T extends readonly any[]> = T['length']

調べたこと

Array.prototype.length

Array.length - JavaScript | MDN🔗

length は Array 型のインスタンスであるオブジェクトのプロパティで、配列の要素の数を設定または取得します

感想

今回はIndex Accessed Typesとプロトタイプチェーンの復習でした。

最初にPickを解いた時は「これでeasyかよ！」と思ったりしていましたが、だんだん妥当に感じるようになってきました。でもeasyで高度な型がでているってことは、mediumはえげつないのかな。

type-challenges 4日目（その2）: 18-Length of Tuple

公開日: 2022/5/31

IkumaScriptと37進数

2022/5/30

に公開

ikuma, akuma, xkuma, ukuma…

JSやTSのサンプルコードで、よく自分の名前ikumaを一文字変えて使っているのだけれど、毎回入力するのも面倒なので、スニペット化しました。ikumaを複製するので、ECMAScriptを文字ってIkumaScriptです。

[...Array(26)].map((_, index) => `${(index + 10).toString(36)}kuma`)

// [ 'akuma', 'bkuma', 'ckuma', 'dkuma', 'ekuma', 'fkuma', 'gkuma', 'hkuma', 'ikuma', 'jkuma', 'kkuma', 'lkuma', 'mkuma', 'nkuma', 'okuma', 'pkuma', 'qkuma', 'rkuma', 'skuma', 'tkuma', 'ukuma', 'vkuma', 'wkuma', 'xkuma', 'ykuma', 'zkuma' ]

親の顔よりよくみた連番作成処理を行います。

[...Array(26)].map((_, index) => index)
// [ 0,  1,  2,  3,  4,  5,  6,  7, 8,  9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25 ]

実際には+ 10しているので10 ~ 35までの値を含む配列が取得できます。

ここからN進数を利用してアルファベットに変換を行っていきます。文字としての数字は0から9までの10種類しかないので、36進数に変換すると、10 ~ 35がそれぞれa ~ zに相当することになります（36 - 10 = 26個のアルファベットが必要になる）

37進数にはどの記号が採用されるのか

ここでふと疑問に思うのが、37進数以降の場合、アルファベットで賄えない部分はどうなるのかということです。実際にやってみました。

 (36).toString(37)
// Uncaught RangeError: toString() radix argument must be between 2 and 36
    at Number.toString (<anonymous>)

Number.prototype.toString() - JavaScript | MDN🔗にも記載がありましたが、37以上はエラーになるようですね。

Rubyでも試してみます。

36.to_s(37)
# => (irb):3:in `to_s': invalid radix 37 (ArgumentError)

Integer#inspect (Ruby 3.1 リファレンスマニュアル)🔗

こちらもリファレンスに記載がありましたが、37以上を指定するとエラーになるようです。

おわりに

ikumaという名前が名付けられた経緯には色々な意味があるのですが、時代背景的に悪魔ちゃん命名騒動 - Wikipedia🔗があったこともあり、あえて一文字ずらして「ikuma」になったみたいな理由もあると以前母から聞きました。

1文字どころかたくさんずらして遊んでます。 — 息子より

IkumaScriptと37進数

公開日: 2022/5/30

type-challenges 3日目: 11-Tuple to Object

2022/5/30

に公開

問題 & 解答

type-challenges/README.md at main · type-challenges/type-challenges🔗

タプルを受け取り、その各値のkey/valueを持つオブジェクトの型に変換する型を実装する

const tuple = ['tesla', 'model 3', 'model X', 'model Y'] as const

type result = TupleToObject<typeof tuple> // expected { tesla: 'tesla', 'model 3': 'model 3', 'model X': 'model X', 'model Y': 'model Y'}

文字列型の配列を受け取り、各要素をキーと値に持つオブジェクトとしてマッピングする。

type TupleToObject<T extends readonly string[]> = { [P in T[number]]: P }

// このテストケース特有なら以下の方がいいかもしれない
type TupleToObject<T extends readonly [string, string, string, string]> = { [P in T[number]]: P }

調べたこと

Tuple型

タプルは配列のサブタイプで、固定長の配列を片付けするための特別な方法
配列の各インデックスでの値は特定の既知の型を持つ
タプルと配列の構文は同じであり、またTypeScriptは配列に対して型推論するためのルールを持っているため、タプルを宣言する際には明示的に型を宣言する必要がある。

let a: [number] = [1]
let b: [string, string, number] = ['ikuma', 'takuma', 2]

参考：O’Reilly Japan - プログラミングTypeScript🔗

const assertion

as constを末尾に記述することで、再帰的にreadonly`にする仕組み

参考：constアサーション「as const」 (const assertion) | TypeScript入門『サバイバルTypeScript』🔗

インデックスシグネチャ

{ [key: T]: U }：このオブジェクトの型Tのすべてのキーは型Uの値を持たなければならない
オブジェクトのキーを抽象的に定義する方法。

配列の要素の型を取得する

number型の添字を使うと配列から要素の型を取得することができる。
タプルの場合は、0、1またはアクセスしたいインデックスを表す数値リテラル型を使う

readonlyな配列

いくつかの定義方法がある

// readonly T[]
const names: readonly string[] = ['akuma', 'bkuma', 'ckuma']

// ReadonlyT[]>
const names: Readonly<string[]> = ['akuma', 'bkuma', 'ckuma']


// ReadonlyArray<T>
const names: ReadonlyArray<string> = ['akuma', 'bkuma', 'ckuma']

タプルの場合は次のように定義する

// readonly
const names: readonly [number, string] = ['akuma', 'bkuma', 'ckuma']

// Readonly
const names: Readonly<[number, string]> = ['akuma', 'bkuma', 'ckuma']

感想

解いた後に回答をみたら、any[]で受け取っている人もいたり、string[]で受け取っている人もいたり、何がいいんだろうと思いました。自分はもともと「タプルなんだから、[string, string, string, string]で受け取るだろう」と思ってやっていたのですが、そういう感じでもないんですかね。

type-challenges 3日目: 11-Tuple to Object

公開日: 2022/5/30

Next.jsで作成したブログにRSS機能を追加する

2022/5/29

に公開

このブログにRSS機能を実装したので、メモを残しておきます。

RSSについて

RSSの概要

具体的な実装の前にRSSそのもの仕組みを確認していきます。

RSSとは、“Rich Site Summary”の略で、サイトの概要を記述する為のXML形式の文書のこと
提供されたRSSのことをRSSフィードという

RSSの拡張子

以下の2種類がある
- RDF：Resource Description Framework🔗
- XML

RSSの歴史

RSS 0.9：NexScape社が自社のポータルサイトで使用したのが始まり。元々はRDFを使用していたので、「RDF site summary」と呼ばれていた
RSS 0.91：XMLで記述される。より多くの情報が配信できるようになったため、「rich site summary」と呼ばれるようになる
RSS 1.0：NetScape社がRSS開発から撤退したことにより、「RSS-DEV Working Group」と「Dave WinnerとUserLand Software社」の二派に分かれる。1.0は前者により実装されたもので、RDFで実装されている
RSS 2.0：RSS1.0の実装方針（拡張子、名前空間の複雑化）は一部層から不満があるものであったため、UserLand Software社はRSS 0.91からの派生（≠RSS 1.0の後継）としてRSS 0.92~0.94をXMLで実装した。2003年にDave Winnerが移籍したことにより、この流れを汲むRSS 2.0系はハーバード大学へ移管された。

Atom

Atomも配信形式の一つである　
RSSは上記のような論争があるため、しがらみのないところで始めたいという動悸もあってAtomが生まれた。
RFC 4287 - The Atom Syndication Format🔗

参考

RSS機能の実装

このブログはSSGを利用しているため、getStaticPropsの中でfeedを作成するように追加します。実際に行った変更は以下の部分です。

https://github.com/IkumaTadokoro/blog/pull/1/files🔗

タスクとしてはこんな感じです。

RSSフィードを生成する処理を作成する（generateRssFeed）
- feed - npm🔗を導入する
- FeedクラスをnewしてRSSフィードの基本設定をする
- Feed#addItemで記事のRSSフィードを登録する
- public/rss配下に各仕様ごとのRSSフィードを出力する
getStaticPropsの中でgenerateRssFeedを呼び出す

RSS自体の仕様がよく分からなくてとりあえずで作ってみたら、リーダーの中でコンテンツが表示されず、RSS 2.0 Specification 日本語訳 - futomi’s CGI Cafe🔗を参考にして値を設定し直しました。

そのため、Feedlyに一度コンテンツがないRSSフィードが載っかってしまったのですが、どうもFeedlyは一度載っかったフィードはFeedly側でキャッシュされてしまうらしく、今もFeedly上の最初の数本の記事のコンテンツはなくなったままです…。どこか別のところで試せばよかった…。

Next.jsで作成したブログにRSS機能を追加する

公開日: 2022/5/29

type-challenges 2日目: 7-Readonly

2022/5/29

に公開

問題 & 回答

type-challenges/README.md at main · type-challenges/type-challenges🔗

組み込みのユーティリティ型Readonlyを使用しないで、Tのすべてのプロパティを読み取り専用にする

interface Todo {
  title: string
  description: string
}

const todo: MyReadonly<Todo> = {
  title: "Hey",
  description: "foobar"
}

todo.title = "Hello" // Error: cannot reassign a readonly property
todo.description = "barFoo" // Error: cannot reassign a readonly property

mapped typeを利用して、Tをすべて読み取り専用にします。

type MyReadonly<T> = { readonly [K in keyof T]: T[K] }

調べたこと

readonly修飾子

オブジェクトのフィールドを読み取り専用に指定するための修飾子

Readonly型

Readonly<T>は、オブジェクト型Tのプロパティをすべて読み取り専用にするユーティリティ型。挙動は今回実装したMyReadonly<T>と同じ
参考：TypeScript: Documentation - Utility Types🔗

感想

今日は昨日の発展系だったので、自力で解けました！ TypeScript初めて数日の身からすると、まずは型の見た目に拒絶反応を起こさないようにすることが大切なので、このtypechallengesはいいですね〜。明日も頑張ります。

type-challenges 2日目: 7-Readonly

公開日: 2022/5/29

「今日のesa」という自分用のChrome拡張を作ってみた

2022/5/28

に公開

FJORD BOOT CAMPを卒業したことにより日報の提出先がなくなってしまったので、自分でesaに登録するようにしていたのですが、今日の分の日報を作るのが面倒 & 結構頻繁に別のページに飛んでしまって、今日の日報ページに戻るのが面倒だったので、とても雑にChrome拡張を作りました。

IkumaTadokoro/kyo-no-esa: (Chrome Extension) Add kyo-no-esa button in the sidebar of esa.io that opens or create today’s diary🔗

GitHubはREADMEすら治してません…自分用なので。

使い方

上記PJをcloneして、npm run buildでdistフォルダに出力します。
Chrome側で「パッケージ化されていない拡張機能を読み込む」でdistフォルダを指定します。
「拡張機能のオプション」からオプションページを開き、諸々設定します。
esaのページのサイドバーに「今日のesa」がでてくるのでクリックします。今日の日報があればそれを、なければ新規作成画面に移ります（テンプレートがある前提）

感想

「Chrome拡張作ってみたいな」と前々から思っていたので、Vite + TypeScript + Vueで作ってみました。

これくらいの規模の拡張機能なら割とあっさりできるんですが、結構ゴリ押しで進めてしまったので、次はもう少ししっかり設計を練ってから挑みたいです。

「今日のesa」という自分用のChrome拡張を作ってみた

公開日: 2022/5/28

RubyとJavaScriptにおける正規表現

2022/5/28

に公開

正規表現系のメソッドがいつもごちゃごちゃになって、その場その場でリファレンスを見ているので、このタイミングでまとめてみます。

正規表現に対するメソッド体系

用途	Ruby	JavaScript
正規表現のパターンにマッチした最初の部分を文字列に置換する	String#sub	String.prototype.replace
正規表現のパターンにマッチしたすべての部分を文字列に置換する	String#gsub	String.prototype.replaceAll
正規表現のパターンにマッチする文字のインデックスを返す	String#=~	String.prototype.search
正規表現のパターンにマッチする文字列を返す	String#match or Regexp#match	String.prototype.match
正規表現のパターンにマッチするかどうかをbooleanで返す	String#match? or Regexp#match?	RegExp.prototype.test
正規表現のパターンにマッチする文字列すべてを返す	String#scan	String.prototype.matchAll

ちょっと試してみた

正規表現のパターンにマッチした最初の部分を文字列に置換する

'ikuma-t, yamada-d, tanaka-p, okurag, tarou-d'.sub(/-/, '~')
#=> "ikuma~t, yamada-d, tanaka-p, okurag, tarou-d"

'ikuma-t, yamada-d, tanaka-p, okurag, tarou-d'.replace(/-/, '~')
// 'ikuma~t, yamada-d, tanaka-p, okurag, tarou-d'

正規表現のパターンにマッチしたすべての部分を文字列に置換する

'ikuma-t, yamada-d, tanaka-p, okurag, tarou-d'.gsub(/-/, '~')
#=> "ikuma~t, yamada~d, tanaka~p, okurag, tarou~d"

'ikuma-t, yamada-d, tanaka-p, okurag, tarou-d'.replaceAll(/-/g, '~')
//  'ikuma~t, yamada~d, tanaka~p, okurag, tarou~d'

JavaScriptのString.prototype.replaceAllを使用する際には、グローバルフラグを持つRegExpオブジェクトを指定する必要がある。

正規表現のパターンにマッチする文字のインデックスを返す

'ikuma-t' =~ /.*-./
# => 0

'ikumat' =~ /.*-./
# => nil

'ikuma-t'.search(/.*-./)
// 0

'ikumat'.search(/.*-./)
// -1

正規表現のパターンにマッチする文字列を返す

# Regexp#matchの方を使っています
/.*-./.match('ikuma-t')
# => #<MatchData "ikuma-t">

/.*-./.match('ikumat')
# => nil

'ikuma-t'.match(/.*-./)
// [ 'ikuma-t', index: 0, input: 'ikuma-t', groups: undefined ]

'ikumat'.match(/.*-./)
// null

正規表現のパターンにマッチするかどうかをbooleanで返す

/.*-./.match?('ikuma-t')
# => true

/.*-./.match?('ikumat')
# => false

/.*-./.test('ikuma-t')
// true

/.*-./.test('ikumat')
// false

正規表現のパターンにマッチする文字列すべてを返す正規表現のパターンにマッチする文字列すべてを返す

'ikuma-t'.scan(/[aiueo]/)
# => ["i", "u", "a"]

['ikuma-t'.matchAll(/[aiueo]/g)]
// [ [ 'i', index: 0, input: 'ikuma-t', groups: undefined ], [ 'u', index: 2, input: 'ikuma-t', groups: undefined ], [ 'a', index: 4, input: 'ikuma-t', groups: undefined ] ]

JavaScriptのString.prototype.matchAllを使用する際には、グローバルフラグを持つRegExpオブジェクトを指定する必要がある。

RubyとJavaScriptにおける正規表現

公開日: 2022/5/28

remarkでtableのMarkdownを解釈できるようにする

2022/5/28

に公開

tableはCommonMarkdownではない

このブログはremarkを使用してMarkdownをパースしているわけですが、tableを投稿してみたところ原文のまま表示されてしまいました。

なんでかな〜と思って調べてみると、unifiedjsのドキュメント🔗に

Tables are a non-standard feature in markdown: they are not defined in CommonMark and will not work everywhere.

という記述を見つけました。tableのスタイルってGitHub Flavored Markdownなんですね〜。というわけでGitHub Flavored Markdownもパースできるように改修していきます。

remark-gfmを適用する

yarn add remark-gfm

import { remark } from 'remark'
import html from 'remark-html'
import prism from 'remark-prism'
// remarkGfmを追加する
import remarkGfm from 'remark-gfm'

export default async function markdownToHtml(markdown: string) {
  const result = await remark().use(html, { sanitize: false }).use(prism).use(remarkGfm).process(markdown)
  return result.toString()
}

ここまでで、tableタグとして解釈されるようになりました。

スタイルを適用する

シンプルにtable関連タグが適用されているだけなので、それに従ってスタイルを適用します。このブログではTailwind CSSを利用しているので、次のような感じです。

table {
  @apply w-full text-sm text-left text-gray-500 overflow-x-auto shadow-md sm:rounded-lg;
}

thead {
  @apply text-sm text-gray-700 bg-gray-50;
}

th {
  @apply px-6 py-3;
}

tr {
  @apply border-b;
}

td {
  @apply px-6 py-3;
}

これでいい感じにテーブルが表示されるようになりました。

remarkでtableのMarkdownを解釈できるようにする

公開日: 2022/5/28

type-challenges 1日目: 4-Pick

2022/5/28

に公開

問題 & 回答

type-challenges/README.ja.md at main · type-challenges/type-challenges🔗

Pick<T, K>：Utility Typesの一つ。既に存在するT型の中からKで選択した一部のプロパティのみを含んだ新たな型を構築する。
これを独自に実装すると次のような形式になる

type MyPick<T, K extends keyof T> = { [S in K]: T[S] }

調べたこと

ルックアップ型

定義済みの型["キー"]とすることで、指定したキーに対応する型を取り出すことができる。

type Todo = {
  id: number
  title: string
  comment: string
}

// キー`id`の型`number`を取得する
type Id = Todo['id']

const id: Id = '1' // TS2322: Type 'string' is not assignable to type 'number'.

`keyof`演算子

オブジェクトの全てのキーを、文字列リテラル型のUnion型として取得する。

type Todo = {
  id: number
  title: string
  comment: string
}

type TodoKeys = keyof Todo // type TodoKeys = "id" | "title" | "comment"

マップ型（`mapped type`）

オブジェクトのキーの型と値の型をマッピングするための方法。どの値の型がどのキーの名前に対応するかを制約できる

// P：Parameter（引数型）
// K：Constraint（制約型）
// T：Template（テンプレート型）
{  [P in K]: T}

ここまでの内容を踏まえると次のようになる。

interface Todo {
  title: string
  description: string
  completed: boolean
}

type MyPick<T, K extends keyof T> = { [S in K]: T[S] }

// { 'title': string, 'completed': boolean }
// keyofを使用しているので、`contents`とかTodoにないキーを指定するとエラーになる
type TodoPreview = MyPick<Todo, 'title' | 'completed'>

const todo: TodoPreview = {
    title: 'Clean room',
    completed: false,
}

感想

初日から全然とけなかったんですが…。型を理解するためにこれを始めたので、根気強くやっていきたいと思います！

type-challenges 1日目: 4-Pick

公開日: 2022/5/28