TypeScript

スポンサーリンク
TypeScript

TypeScript | 関数・クラス・ジェネリクス:ジェネリクス基礎 - 明示的に型を指定するケース

ゴール:「ふだんは推論に任せる。でも“ここだけは型を言語化したい”場面を見抜けるようになる」ジェネリクスは基本的に「型推論に任せる」のが正解です。それでも、あえて <T> を書いた方がいい場面がいくつ...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:ジェネリクス基礎 - 関数とジェネリクスの推論

ゴール:「<T> を書かなくても、勝手に T を決めてくれる感覚をつかむジェネリクスの一番おいしいところのひとつが、「型パラメータをほとんど書かなくていい」ことです。TypeScript が、関数の引...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:ジェネリクス基礎 - デフォルト型パラメータ

ゴール:「毎回 <T, string> と書かなくても済む“親切なジェネリクス”を書けるようになるデフォルト型パラメータは一言でいうと、「ジェネリクスに“デフォルトの型”を用意しておく仕組み」です。関...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:ジェネリクス基礎 - 制約付きジェネリクス関数

ゴール:「なんでも T」ではなく「こういう T だけOK」を自分でコントロールできるようになる制約付きジェネリクス関数は一言でいうと、「ジェネリクスの“自由さ”に、ちょっとだけ“条件”を足した関数」で...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:ジェネリクス基礎 - 型パラメータの制約(extends)

ゴール:「T はなんでもアリ」から「T は“こういう型だけ”に絞る」感覚をつかむジェネリクスに制約(extends)をつける一番の目的は、「T はなんでもいいわけじゃなくて、“この条件を満たす型だけ”...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:ジェネリクス基礎 - 複数型パラメータ

ゴール:「T だけじゃ足りないときに、自然に型パラメータを増やせるようになる」ジェネリクスに慣れてくると、「T だけじゃ足りないな…もう1種類、型を扱いたい」という場面が必ず出てきます。複数型パラメー...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:ジェネリクス基礎 - ジェネリクスとanyの違い

ゴール:「どっちも“なんでも受け取れる”のに、なぜジェネリクスが偉いのか」を腑に落とすジェネリクスも any も、一見どちらも「どんな型でも受け取れる」ように見えます。だからこそ初心者ほどこう思いやす...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:ジェネリクス基礎 - 型パラメータの命名規則

ゴール:「T って何?を“意味のある名前”にできるようになる」ジェネリクスを書き始めると、まず最初に出てくる疑問がこれです。「T って、なんでみんな T って書いてるの?U とか K とか、あれ何?」...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:ジェネリクス基礎 - ジェネリック関数の基本

ゴール:「型だけ違う同じ関数」を、1本のジェネリック関数で書けるようになるジェネリック関数の本質はとてもシンプルです。「型だけ違って、やっていることは同じ関数」を、1本にまとめるための書き方です。<T...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:ジェネリクス基礎 - ジェネリクスとは何か

ゴール:「型を“あとから差し込める穴”として扱う感覚をつかむ」ジェネリクス(Generics)は一言でいうと、「型に“変数”を導入して、あとから具体的な型を差し込める仕組み」です。関数でいうと、(x:...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:クラス設計 – 実務でのクラス設計判断

ゴール:「この処理、本当にクラスにすべき?」を自分で判断できるようになる実務で一番大事なのは、「クラスの書き方」よりも、「そもそも、ここはクラスにすべきか?」を判断できることです。TypeScript...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:クラス設計 – ConstructorParameters の利用

ゴール:「コンストラクタの引数の型を“そのまま再利用する”感覚をつかむConstructorParameters<T> は一言でいうと、「コンストラクタ型 T から、引数の型だけをタプルとして抜き出す...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:クラス設計 – InstanceType の利用

ゴール:「クラス“側”だけ知っていても、インスタンスの型を安全に扱える」ようになるInstanceType<T> は一言でいうと、「コンストラクタ型 T から、new したときの“インスタンスの型”だ...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:クラス設計 – インスタンス型の取得

ゴール:「“クラスそのもの”から“インスタンスの型”だけをきれいに取り出す」感覚をつかむここでのテーマは、「クラス(コンストラクタ)から、そのインスタンスの型だけを取り出す」です。TypeScript...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:クラス設計 – typeof Class の意味

ゴール:「typeof Class は“クラスそのものの型”を取る」と腑に落とすまず一番大事な一文からいきます。typeof クラス名 は、「インスタンスの型」ではなく「クラスそのもの(コンストラクタ...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:クラス設計 – クラスの型としての扱い

ゴール:「クラスには“2つの顔(値としての顔/型としての顔)”がある」と腑に落とすTypeScript のクラスで一番つまずきやすいポイントは、「クラスは“値”でもあり、“型”でもある」という二重の顔...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:クラス設計 – クラスを返す関数

ゴール:「クラスも“値”として扱えて、関数から返せる」と腑に落とすまず一番大事なポイントはこれです。クラスは「型」でもあり、「値」でもあるということです。「型」としては User 型などに使い、「値」...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:クラス設計 – Factoryパターン

ゴール:「new の場所を“工場”に集めて、作り方のルールを1カ所に閉じ込める感覚をつかむ」Factory(ファクトリ)パターンは一言でいうと、「オブジェクトの new をあちこちで書かず、“作る専門...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:クラス設計 – Singletonパターン

ゴール:「アプリ全体で“そのクラスは1個だけ”をコードで保証する感覚をつかむ」Singleton(シングルトン)パターンは一言でいうと、「このクラスのインスタンスは、アプリ全体で“必ず1つだけ”にする...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:クラス設計 – private constructorの用途

ゴール:「new させないクラス」に意味を持たせる感覚をつかむprivate constructor は一言でいうと、「このクラスは、外から new してほしくない」と宣言するための仕組みです。「え、...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:クラス設計 – クラスの再利用設計

ゴール:「このクラス、別の場面でもそのまま使えるな」と思える設計感覚を身につけるクラスの再利用設計は、一言でいうと、「今この機能だけ動けばいい」ではなく、「あとで別の場所でも気持ちよく使える形」にして...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:クラス設計 – クラス間の責務分離

ゴール:「このクラスは“何だけ”をやるのか?」と説明できるようになるクラス間の責務分離は、一言でいうと、「1つのクラスに“何でもかんでも”やらせず、“役割ごと”にクラスを分けること」です。ここができて...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:クラス設計 – 多重interface実装

ゴール:「1つのクラスに“複数の役割”を約束させる感覚をつかむ」多重 interface 実装は一言でいうと、「このクラスは A という顔も B という顔も、両方ちゃんと持ちますよ」と約束させる仕組み...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:クラス設計 – implementsの役割

ゴール:「implements は“この約束は必ず守ります”という宣言」だと理解するimplements は一言でいうと、「このクラスは、この interface が決めた“形(契約)”を必ず守ります...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:クラス設計 – interfaceでクラスを縛る

ゴール:「interface は“クラスに守らせる約束”」だと理解するここでのテーマは、「interface を使って、クラスに“こういう形であれ”と約束させる」という感覚をつかむことです。クラスの継...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:クラス設計 – 抽象メソッドの定義

ゴール:「抽象メソッド=“ここは必ず子クラスが実装して”という穴あきメソッド」と理解する抽象メソッドは一言でいうと、「このメソッドは“存在すること”だけ決めておいて、中身は子クラスに必ず書かせる仕組み...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:クラス設計 – 抽象クラスの設計

ゴール:「抽象クラスは“共通の型と骨組みだけを持つ設計図”」だと理解する抽象クラスは一言でいうと、「new できないけれど、“こういうクラスであってほしい”という共通ルールを決めるクラス」です。共通の...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:クラス設計 – メソッドオーバーライド

ゴール:「同じメソッド名でも“クラスごとに振る舞いを変える”感覚をつかむ」メソッドオーバーライドは一言でいうと、「親クラスと同じ名前・同じ型のメソッドを、子クラス側で“書き直す”こと」です。これができ...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:クラス設計 – superの役割

ゴール:「super は“親クラス側の自分”を呼び出すキーワードだ」と腹で理解するsuper は、継承しているときだけ出てくる特別なキーワードです。一言でいうと、「親クラス側の自分を呼び出すためのスイ...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:クラス設計 – 継承の基本(extends)

ゴール:extends で「共通部分をまとめる」感覚をつかむ継承(extends)は、「似たようなクラス同士で、共通部分を親クラスにまとめる」ための仕組みです。ここでは、「書き方」だけでなく「どういう...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:クラス設計 – クラスの初期化順序

ゴール:「クラスが new されたとき“何がどの順番で動くか”をイメージできるようになる」クラス設計がうまくいくかどうかは、「初期化の順番」をちゃんと理解しているかにかなり左右されます。フィールド初期...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:クラス設計 – staticメソッド

ゴール:「これは“インスタンスのメソッド”か“クラスのメソッド”か」を自分で選べるようになるstatic メソッドは一言でいうと、「new した“個体”ではなく、“クラスそのもの”にぶら下がる関数」で...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:クラス設計 – staticプロパティ

ゴール:「static は“インスタンスじゃなくてクラスに属するもの”だと腹で理解する」static を一言でいうと、「new した“個体”ではなく、“クラスそのもの”にぶら下がるもの」です。ここがふ...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:クラス設計 – getter / setter の型

ゴール:「getter / setter の“型”を見て、どう使うかイメージできるようになる」getter / setter は、クラスのプロパティに「振る舞い」をくっつける仕組みです。でも、ただ「便...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:クラス設計 – readonlyプロパティの活用

ゴール:「この値は“変わらない”」を型で約束できるようになるreadonly プロパティは、クラス設計でめちゃくちゃコスパのいい武器です。一言でいうと、「この値は、作ったあとに書き換えちゃダメ」をコン...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:クラス設計 – public / private / protected

ゴール:「どこまで外に見せるか」を自分でコントロールできるようになるpublic / private / protected は、「クラスの中身をどこまで外に見せるか」を決めるスイッチです。ここをなん...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:クラス設計 – メソッドの型指定

ゴール:「メソッドの型だけ見て“何をするか”がだいたい分かるように書ける」クラスのメソッドって、書こうと思えば何でも書けます。だからこそ「型をどう付けるか」で、読みやすさと安全性が大きく変わります。こ...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:クラス設計 – コンストラクタ引数と型

ゴール:「コンストラクタの引数に“どんな型をつけるか”を意識して設計できるようになることクラスを書くとき、コンストラクタは「インスタンスをどう初期化するか」を決める、とても重要な場所です。ここでの型設...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:クラス設計 – プロパティの型設計

ゴール:「クラスのプロパティに“どんな型をつけるか”を意識して設計できるようになること」クラスを書くとき、「プロパティ名」だけでなく「プロパティの型」をどう設計するかで、そのクラスの使いやすさ・安全さ...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:クラス設計 – クラスの基本構文復習

クラスってそもそも何者?「設計図」と「new」の関係から整理するまずイメージからいきます。クラスはざっくり言うと、「オブジェクトを量産するための設計図」です。設計図(class)を書いておいて、new...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:関数設計の深化 – 実務での関数分割ルール

ゴール:「どこまでを1つの関数にして、どこから分けるか」を自分の基準で判断できるようになる実務で一番モヤっとしやすいのがここです。「この関数、長い気はするけど、どこで分ければいいの?」「分けたら分けた...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:関数設計の深化 – 可読性の高い関数型設計

ゴール:「関数の“型”を見ただけで、何をするかだいたい分かる」状態を目指す可読性の高い関数型設計って、難しい言い方をしているけれど、やりたいことはシンプルです。その関数の「型」だけを見たときに、何を受...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:関数設計の深化 – 関数設計での型肥大対策

ゴール:「型がデカくなってきた…」と感じたときに、落ち着いて“細く・分けて・名前をつける”発想を持てるようにするTypeScript を真面目に書けば書くほど、そのうち必ずこうなります。「型、でかすぎ...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:関数設計の深化 – 非同期関数への移行準備

ゴール:「あとで async にしたくなっても困らない関数設計」を身につけるいきなり全部 async/await にする必要はありません。むしろ大事なのは、「今は同期処理だけど、いつでも非同期(asy...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:関数設計の深化 – assert関数の型定義

ゴール:「assert 関数の型」を“道具として設計できる”ようになるまずイメージからいきます。assert 関数は一言でいうと、「この条件が成り立たないなら、ここで止まってくれ」「この時点で、値はも...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:関数設計の深化 – ユーザー定義型ガード

ゴール:「ユーザー定義型ガード」を“自分で設計して使いこなせる”ようになるここで目指したいのは、「ユーザー定義型ガードって何?」から一歩進んで、「いつ・どう設計するとコードが楽になるか」までイメージで...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:関数設計の深化 – 型ガード関数の設計

まず「型ガードって何を守ってくれるのか」をイメージする型ガード関数は一言でいうと、「この値は〇〇型だよ、と TypeScript に“証拠付きで教える”ための関数」です。普通の if だと、TypeS...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:関数設計の深化 – 条件分岐による戻り値型変化

ゴール:「if や switch で分岐した結果、戻り値の型がどう変わるか」を意識して設計できるようになる関数の戻り値って、「常に同じ型」だけじゃなくて、条件によって“中身の型”が変わることがあります...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:関数設計の深化 – エラーを投げる関数の型

まず「エラーを投げる関数」を2種類に分けて考えるいきなり型の話に行く前に、役割で分けます。エラーを投げる関数には、大きく言って次の2パターンがあります。1つ目は、「必ずエラーを投げて、絶対に呼び出し元...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:関数設計の深化 – neverを返す関数設計

ゴール:「never を返す関数」が“設計上どういう意味を持つか”を理解するnever は、初心者から見ると一番「意味不明な型」に見えます。でも、関数設計の文脈では、「ここには絶対に到達しない」「この...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:関数設計の深化 – void戻り値の設計判断

ゴール:「とりあえず void」から卒業するまず一番大事なことを先に言います。多くの初心者は、「戻り値を使わないから、とりあえず void」と書きがちです。でも、本当にそうしていい場面と、「void ...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:関数設計の深化 – bind / call / apply と型

ゴール:bind / call / apply を「型の目」で理解するここで目指したいのは、「bind / call / apply が“何をするメソッドか”」だけでなく、「TypeScript 的に...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:関数設計の深化 – thisパラメータの明示

「thisパラメータを明示する」とは何をしているのかまず言葉の整理からいきます。TypeScript でいう「thisパラメータ」とは、関数の一番最初の引数の位置にだけ書ける、特別な仮引数のことです。...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:関数設計の深化 – this を使う関数の型指定

まず「this を型として扱う」という発想からJavaScript ではおなじみの this ですが、TypeScript では 「this そのものにも型を付けられる」 というのがポイントです。fu...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:関数設計の深化 – 関数を返す関数の型

「関数を返す関数」って、まず何者?いきなり型の話に行く前に、イメージを固めましょう。function createAdder(a: number) { return (b: number) => a ...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:関数設計の深化 – 関数を引数に取る設計

「関数を引数に取る」とは、責任を“相手に渡す”設計まずイメージからいきます。function doTwice(fn: () => void) { fn(); fn();}doTwice(() => {...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:関数設計の深化 – 関数型interfaceの書き方

前提:関数にも「interface で形を決める」という発想があるまず押さえたいのは、「関数の型は type だけじゃなく、interface でも書ける」ということです。type FnByType ...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:関数設計の深化 – 関数型エイリアス設計

まず「関数型エイリアス」とは何かをはっきりさせる関数型エイリアスは、かんたんに言うと「よく使う関数の“形”に名前をつけること」です。type StringToNumber = (value: stri...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:関数設計の深化 – map / filter / reduce 用関数型

ゴール:map / filter / reduce の「関数型」を言葉で説明できるようになるまず目標からはっきりさせます。map / filter / reduce は、「配列に対して“どう変換するか...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:関数設計の深化 – 高階関数の型付け

まず「高階関数」をちゃんと定義しておく高階関数(higher-order function)は、ざっくり言うと「関数を受け取る」か「関数を返す」か、あるいはその両方をする関数のことです。functio...
スポンサーリンク