CSS
CSS Tips | 超実務コアCSSテクニック：基本文法・セレクタ － 疑似クラス :hover
TypeScript
TypeScript TypeScript | 関数・クラス・ジェネリクス：ジェネリクス基礎 － ジェネリクス設計の判断基準
ゴール：「ここはジェネリクスにする／しない」を自分で決められるようになることジェネリクスを“書ける”ようになった次のステップは、「どこで使うべきか」「どこでは使うべきでないか」を判断できることです。こ...
TypeScript TypeScript | 関数・クラス・ジェネリクス：ジェネリクス基礎 － 実務でよくある失敗例
ゴール：「“ありがちな事故パターン”を先に知っておいて、自分のジェネリクスを危険運転にしない」ジェネリクスは強力だけど、そのぶん「やらかしポイント」も多いです。しかも、やらかした瞬間はコンパイルが通る...
TypeScript TypeScript | 関数・クラス・ジェネリクス：ジェネリクス基礎 － 可読性の高いジェネリクス
ゴール：「型が強いのに“怖くないコード”としてジェネリクスを書けるようになる」ジェネリクスって、慣れてない人から見ると「T とか U とかよく分からん記号が飛び交ってて怖いコード」に見えがちです。でも...
TypeScript TypeScript | 関数・クラス・ジェネリクス：ジェネリクス基礎 － 過剰ジェネリクスの回避
ゴール：「ジェネリクスは“カッコいい飾り”じゃなくて、“必要なときだけ出す道具”だと理解するジェネリクスに慣れてくると、ほぼ確実に一度は通る道があります。それが 「何でもかんでも <T> を付けたくな...
TypeScript TypeScript | 関数・クラス・ジェネリクス：ジェネリクス基礎 － ジェネリクスの再利用設計
ゴール：「そのジェネリクス“だけ”で終わらせず、プロジェクト全体で使い回せる形に育てる感覚を持つここまでで、ジェネリクスそのものの書き方はかなり分かってきていると思います。ここから一歩進めて大事になる...
TypeScript TypeScript | 関数・クラス・ジェネリクス：ジェネリクス基礎 － interfaceのジェネリクス
ゴール：「interface は“型のテンプレート”であり、<T> で“穴あきテンプレート”にできると理解するクラスのジェネリクスが「インスタンス全体のルール」を決めるものだとしたら、interfac...
TypeScript TypeScript | 関数・クラス・ジェネリクス：ジェネリクス基礎 － クラスのジェネリクス
ゴール：「クラスにも <T> が付くんだ、しかも“インスタンス全体の型のルール”になるんだ、を体で覚える関数のジェネリクスはだいぶ見慣れてきたと思います。クラスのジェネリクスは、その 「型パラメータを...
TypeScript TypeScript | 関数・クラス・ジェネリクス：ジェネリクス基礎 － ジェネリクスとintersection
ゴール：「T & U は“足し算された型”だ、と直感でわかるようになる」ジェネリクスと intersection（交差型、&）を一緒に使うときのキーワードは、「型を“混ぜる”のではなく、“足し算する”...
TypeScript TypeScript | 関数・クラス・ジェネリクス：ジェネリクス基礎 － ジェネリクスとunionの併用
ゴール：「T なのに T | U もアリ？を“安全に混ぜる感覚”で理解するジェネリクスと union（|）を一緒に使うとき、最初に出てくるモヤモヤはだいたいこれです。「T って“1つの型”じゃないの？...
TypeScript TypeScript | 関数・クラス・ジェネリクス：ジェネリクス基礎 － ジェネリクス配列操作
ゴール：「配列操作は全部 any で書けるけど、あえてジェネリクスで“型を守る”感覚をつかむ配列操作は、正直 any[] でも全部書けます。でもそれをやると、バグも型の穴も“侵入し放題”になります。ジ...
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...
TypeScript TypeScript | 関数・クラス・ジェネリクス：関数設計の深化 – コールバック関数の型指定
まず「コールバック関数」をちゃんとイメージするコールバック関数は、ざっくり言うと「関数に“あとで呼んでね”と渡される関数」です。function doTwice(callback: () => voi...
TypeScript TypeScript | 関数・クラス・ジェネリクス：関数設計の深化 – 可変長引数の型安全化
「可変長引数」は型の世界だとどう見えるのかまず、可変長引数は JavaScript 的にはこうです。function sum(...numbers: number[]) { return number...
TypeScript TypeScript | 関数・クラス・ジェネリクス：関数設計の深化 – rest引数の型指定
rest引数ってそもそも何をしているのかまずは「rest引数」の正体からいきます。function sum(...numbers: number[]) { // numbers は「配列」として受け取...
TypeScript TypeScript | 関数・クラス・ジェネリクス：関数設計の深化 – デフォルト引数と型
「デフォルト引数」と「型」はセットで考えるものまず前提から整理します。TypeScript の「デフォルト引数」は、「引数が渡されなかったときに使う値を、関数の宣言側で決めておく仕組み」です。func...
TypeScript TypeScript | 関数・クラス・ジェネリクス：関数設計の深化 – 関数のオプション引数設計
まず「オプション引数って何者か」を整理するTypeScript で「オプション引数」と言うとき、だいたい次の2つの書き方を指します。function greet(name: string, title...
TypeScript TypeScript | 関数・クラス・ジェネリクス：関数設計の深化 – 戻り値型を省略すべき場面
前提：「全部書く」か「全部省略」か、の二択ではないまず大事なのは、戻り値型は「常に書くべき」でも「常に省略すべき」でもない、ということです。すでに話してきたように、外部公開の関数・複雑な処理・ジェネリ...
TypeScript TypeScript | 関数・クラス・ジェネリクス：関数設計の深化 – 戻り値型を明示すべき場面
まず前提：「いつも書け」ではなく「ここぞで書く」TypeScript は戻り値型をかなりうまく推論してくれます。だから「全部に : 型 を書け」という話ではありません。大事なのは、「推論に任せると“危...
TypeScript TypeScript | 関数・クラス・ジェネリクス：関数設計の深化 – 引数と戻り値の型関係
「引数の型」と「戻り値の型」はセットで設計するものまず一番大事な前提から。関数の型は、「何を受け取って（引数）、何を返すか（戻り値）」この2つの組み合わせで決まります。function add(a: ...
TypeScript TypeScript | 関数・クラス・ジェネリクス：関数設計の深化 – アロー関数の型推論
まず「アロー関数の型推論」で何が起きているかアロー関数はこういう形の関数です。const add = (a, b) => a + b;const add = (a, b) => a + b;TypeS...
TypeScript TypeScript | 関数・クラス・ジェネリクス：関数設計の深化 – 関数宣言と関数式の違い
まず「関数宣言」と「関数式」をざっくり区別する最初に形だけ見て違いを押さえましょう。関数宣言（function declaration）function add(a: number, b: numbe...
TypeScript TypeScript | 基礎文法：Union・基本型操作 – 「TypeScriptらしい書き方」の理解
「TypeScriptらしい書き方」って何を指しているのかまず前提をはっきりさせます。「TypeScriptらしい書き方」というのは、単に「: string とか : number をつけること」では...
TypeScript TypeScript | 基礎文法：Union・基本型操作 – 基礎段階での型設計ルール
「型設計ルール」を決めておく意味最初に、なぜ「ルール」を意識した方がいいかから話します。TypeScript は、とりあえず書いてもそれなりに動いてくれる言語です。でも「何となく型を付ける」だけだと、...
TypeScript TypeScript | 基礎文法：Union・基本型操作 – エラーにならないunion設計
なぜ「union型なのにすぐエラーになる」のかまず、よくあるつまずきから整理します。function printId(id: string | number) { console.log(id.toU...
TypeScript TypeScript | 基礎文法：Union・基本型操作 – Discriminated Unionの考え方
まず「Discriminated Union」をざっくり日本語にすると難しいカタカナですが、意味はシンプルです。Discriminated Union（判別可能ユニオン）＝「ある1つのプロパティの値に...
TypeScript TypeScript | 基礎文法：Union・基本型操作 – 型の絞り込み（narrowing）
「型の絞り込み」とは何かを一言でつかむ型の絞り込み（narrowing）は、「最初はざっくりした型だったものを、条件分岐などを通して“より具体的な型”に狭めていくこと」です。TypeScript では...
TypeScript TypeScript | 基礎文法：Union・基本型操作 – unionとintersectionの違い
まずイメージでつかむ：unionとintersectionは「または」と「かつ」最初に一番大事なことだけ頭に入れてください。A | B（union型）→ 「A または B」。どちらか一方ならOK。A ...
TypeScript TypeScript | 基礎文法：Union・基本型操作 – intersection型の基本
intersection型は「AもBも両方持つ」型まず一言でいうと、intersection型（インターセクション型、&）は 「AかつB」＝「Aの性質もBの性質も同時に持つ型」 です。対比でいうとこう...
TypeScript TypeScript | 基礎文法：Union・基本型操作 – union型の共通プロパティ
「union型の共通プロパティ」とは何かまず前提から整理します。union型は「A か B かどちらか」の型でした。type User = { id: number; name: string;};t...
TypeScript TypeScript | 基礎文法：Union・基本型操作 – union型とif分岐
union型とif分岐の関係をまずイメージでつかむunion型は「A か B かどちらか」という“選択肢のある型”でした。そして if 分岐は、「今この瞬間は A なのか B なのかを確かめるための問...
TypeScript TypeScript | 基礎文法：Union・基本型操作 – union型の基本
union型は「AかBかどちらか」の型まずイメージからいきます。union型（ユニオン型）は、「この値は“これか、あれか”のどれかです」という“選択肢のある型」です。書き方はとてもシンプルで、型と型の...
TypeScript TypeScript | 基礎文法：関数の基礎 – 関数でよく出る型エラー
はじめに：型エラーは「怒られている」のではなく「守られている」関数まわりで出る型エラーは、最初かなりストレスになりますよね。でも本質的には、「その書き方だと、実行時にバグる可能性が高いよ」と Type...
TypeScript TypeScript | 基礎文法：関数の基礎 – nullチェックの重要性
そもそも「nullチェック」って何のためにやるのかまず一番大事なところから。nullチェックは「そこに“あるはずのもの”が、本当にあるかを確認する行為」です。プログラムを書いていると、ついこう思いがち...
TypeScript TypeScript | 基礎文法：関数の基礎 – in演算子による型ガード
「in演算子による型ガード」は何をしてくれるのかin 演算子による型ガードは、「このオブジェクトは、このプロパティを持っているか？」を調べることで、型を絞り込む仕組みです。人間の感覚だと、こうです。「...
TypeScript TypeScript | 基礎文法：関数の基礎 – typeofによる型ガード
typeofによる型ガードとは何かtypeof による型ガードは、「値の実行時の型をチェックして、その結果をもとに TypeScript が変数の型を“狭くする”仕組みです。人間の感覚としてはこうです...
TypeScript TypeScript | 基礎文法：関数の基礎 – 型ガードの基礎
「型ガード」とは何かを一言でつかむまずイメージからいきます。型ガードは、「この if を通ったなら、この変数は“この型”だと安全に言えるよ」ということを、TypeScript にちゃんと分かってもらう...
TypeScript TypeScript | 基礎文法：関数の基礎 – 条件分岐と型推論
「条件分岐すると型も変わる」という感覚から始めるTypeScript のおいしいところは、if や switch で条件分岐すると、「そのブロックの中だけ型が狭くなる」 ことです。「条件でチェックした...
TypeScript TypeScript | 基礎文法：関数の基礎 – 戻り値で型が決まるケース
「戻り値で型が決まる」ってどういうことかふつうは「引数の型 → 戻り値の型」という流れで関数を考えますが、TypeScript では 「戻り値の書き方や宣言のしかたが、逆に“型”を決める・変化させる」...
TypeScript TypeScript | 基礎文法：関数の基礎 – 関数型エイリアス
関数型エイリアスってそもそも何？まず一言でいうと、関数型エイリアスは「関数の“形”に名前をつける仕組み」です。「この関数は、こういう引数を受け取って、こういう型を返す」という“関数の型”に、わかりやす...
TypeScript TypeScript | 基礎文法：関数の基礎 – 関数を変数に代入する型
「関数を変数に代入する」ときに型で何を約束しているかまず前提をそろえます。TypeScript では、「関数そのもの」も値として扱えて、変数に代入できます。function add(a: number...
TypeScript TypeScript | 基礎文法：関数の基礎 – コールバック関数の型
「コールバック関数の型」とは何かまず、「コールバック関数」という言葉をちゃんと掴みましょう。コールバック関数は、「関数に“引数として渡される関数”」のことです。function doTwice(fn:...
TypeScript TypeScript | 基礎文法：関数の基礎 – 関数式の型
「関数式の型」とは何かまず言葉の整理からいきます。TypeScript で「関数式の型」といったとき、だいたい次のようなものを指します。const add = function (a: number,...
TypeScript TypeScript | 基礎文法：関数の基礎 – アロー関数の型
アロー関数でも「型の考え方」は普通の関数と同じまず一番大事なところから。アロー関数でも、「引数の型」と「戻り値の型」を決める考え方は、普通の function とまったく同じです。// 通常の関数fu...
TypeScript TypeScript | 基礎文法：関数の基礎 – 可変長引数（rest）
可変長引数（rest）は「いくつ来るか分からない引数」を受け取る仕組みまずイメージから。可変長引数（rest 引数）は、「この関数、引数が 1 個かもしれないし、10 個かもしれない。数が決まっていな...
TypeScript TypeScript | 基礎文法：関数の基礎 – デフォルト引数
デフォルト引数は「来なかったときの標準値」デフォルト引数は、「この引数が渡されなかったときは、代わりにこれを使ってね」という“標準値”をあらかじめ決めておく仕組みです。書き方はシンプルで、引数に = ...
TypeScript TypeScript | 基礎文法：関数の基礎 – オプション引数
オプション引数は「渡してもいいし、渡さなくてもいい」引数まずイメージからいきます。オプション引数は、「この引数は“あってもなくてもいい”よ」ということを型で表すための仕組みです。書き方はとてもシンプル...
TypeScript TypeScript | 基礎文法：関数の基礎 – never型の基礎
never型は「絶対に起こらない」を表す型まず一番大事なイメージからいきます。never 型は、「ここには“値が存在しないはずだ”」「ここには“絶対に到達しないはずだ”」という場所を型で表すための特別...
TypeScript TypeScript | 基礎文法：関数の基礎 – void型
void型は「値を返さないつもり」を表す型void 型は、「この関数は“意味のある値”を返さない」という意図を型で表すための特別な型です。function print(message: string)...
TypeScript TypeScript | 基礎文法：関数の基礎 – 戻り値型の省略
「戻り値型の省略」って、していいの？ダメなの？まず結論から言うと、TypeScript では 「戻り値型は省略しても動く」 し、「でも省略しない方がいい場面もたくさんある」 です。function a...
TypeScript TypeScript | 基礎文法：関数の基礎 – 戻り値型
戻り値型って何を約束しているのか関数の「戻り値型」は、「この関数は、呼び出されたときに“最終的にどんな型の値を返すか”の約束を書く場所です。function greet(name: string): ...
TypeScript TypeScript | 基礎文法：関数の基礎 – 関数の引数型
関数の引数型って何をしているのかまず一番シンプルに言うと、「この関数は、どんな“形”の値を受け取るのかを約束する」のが引数型です。function add(a: number, b: number):...
TypeScript TypeScript | 基礎文法：オブジェクト基礎 – 実務でのオブジェクト設計感覚
実務でのオブジェクト設計は「現実世界のモデル化」から始まるまず大前提として、実務でのオブジェクト設計は、「TypeScript の文法をどう書くか」より前に、「現実の世界をどう切り取るか」から始まりま...
TypeScript TypeScript | 基礎文法：オブジェクト基礎 – オブジェクト型エラーの読み方
「オブジェクト型エラーの読み方」のゴールを決めるTypeScript のエラーメッセージは、最初は「英語の塊」にしか見えないと思います。でも、よく出るパターンは決まっていて、「どこを見れば“何がズレて...
TypeScript TypeScript | 基礎文法：オブジェクト基礎 – keyof typeof の組み合わせ
「keyof typeof」は値から「キーの型」を取り出す最強コンボまず結論からいきます。keyof typeof は、「実際のオブジェクト（値）から、そのプロパティ名の“型”を自動で作る」ための組み...
TypeScript TypeScript | 基礎文法：オブジェクト基礎 – typeof の基本
TypeScript の typeof は「値から型を取り出す道具」まず一番大事なポイントからいきます。TypeScript の typeof は、「ある値（変数・オブジェクトなど）から、その“型”を...
TypeScript TypeScript | 基礎文法：オブジェクト基礎 – keyof の基本
keyof は「プロパティ名だけを取り出すための型演算子」keyof は、「オブジェクト型から“プロパティ名”だけを取り出して、新しい型を作る」ための演算子です。まずは一番シンプルな例から見てみましょ...
TypeScript TypeScript | 基礎文法：オブジェクト基礎 – オブジェクトの分割代入
オブジェクトの分割代入って何をしているのかまずイメージからいきましょう。オブジェクトの分割代入は、「オブジェクトの中から、欲しいプロパティだけを“取り出して”変数にする書き方」です。const use...
TypeScript TypeScript | 基礎文法：オブジェクト基礎 – スプレッド構文と型
スプレッド構文ってそもそも何をしているのかスプレッド構文（...）は、「あるオブジェクト（や配列）の中身を“広げて”新しいオブジェクト（や配列）を作る記法」です。const user = { name...
TypeScript TypeScript | 基礎文法：オブジェクト基礎 – 型安全なオブジェクト更新
「型安全なオブジェクト更新」とは何を守ることかまずゴールをはっきりさせます。型安全なオブジェクト更新とは、「オブジェクトを書き換えるときに、存在しないプロパティ名を書いたり、間違った型の値を入れたりし...
TypeScript TypeScript | 基礎文法：オブジェクト基礎 – 部分一致が通らない理由
「部分一致が通らない」ってどういうことかまず、ここでいう「部分一致」はだいたいこんな状況を指しています。type User = { name: string; age: number;};const ...
TypeScript TypeScript | 基礎文法：オブジェクト基礎 – excess property check
excess property check とは何か（ざっくりイメージ）excess property check（余剰プロパティチェック）は、「その型に存在しないプロパティを、オブジェクトリテラルに...
TypeScript TypeScript | 基礎文法：オブジェクト基礎 – オブジェクトの再代入
「オブジェクトの再代入」とは何を指しているのかまず言葉の整理からいきます。ここでいう「オブジェクトの再代入」は、変数に入っているオブジェクトそのものを、別のオブジェクトに入れ替えることを指します。ty...
TypeScript TypeScript | 基礎文法：オブジェクト基礎 – ネストしたオブジェクト型
ネストしたオブジェクト型とは何か（まずはイメージから）ネストしたオブジェクト型は、「オブジェクトの中に、さらにオブジェクトが入っている形を、そのまま型で表現したもの」です。現実のデータって、ユーザーの...
TypeScript TypeScript | 基礎文法：オブジェクト基礎 – readonlyプロパティ
readonlyプロパティとは何か（「一度決めたら変えない」約束）readonly プロパティは、「このプロパティは一度値を入れたら、あとから書き換えてはいけない」という約束を型レベルで表す仕組みです...
TypeScript TypeScript | 基礎文法：オブジェクト基礎 – optionalプロパティ
optionalプロパティとは何か（「あってもなくてもいい」項目）オブジェクトのプロパティには、「必ず必要なもの」と「なくてもよいもの」があります。TypeScriptでは、「なくてもよいプロパティ」...
TypeScript TypeScript | 基礎文法：オブジェクト基礎 – type と interface の違い
まずざっくり：「どっちも“型を定義する道具”」type も interface も、「型に名前をつける」ための仕組みです。どちらもオブジェクトの形を表現できます。interface User { id...
TypeScript TypeScript | 基礎文法：オブジェクト基礎 – interface の基本
interface は「オブジェクトの設計図」interface は、オブジェクトの「形（どんなプロパティを持つか）」を表す設計図です。「このオブジェクトは、こういうプロパティを持っていて、その型はこ...
TypeScript TypeScript | 基礎文法：オブジェクト基礎 – 型エイリアスの作成
型エイリアスとは何か（ざっくり言うと「型にあだ名をつける」）型エイリアスは、既にある型に「別名（あだ名）」をつける仕組みです。type キーワードを使って、「この型をこれからはこの名前で呼ぶね」と宣言...
TypeScript TypeScript | 基礎文法：オブジェクト基礎 – オブジェクトリテラルの型推論
「オブジェクトリテラルの型推論」とは何をしてくれているのかオブジェクトリテラルとは、{ ... } で直接書いたオブジェクトのことです。const user = { name: "Taro", age...
TypeScript TypeScript | 基礎文法：オブジェクト基礎 – プロパティに型を付ける
「プロパティに型を付ける」とは何をしているのかオブジェクトは「名前付きの値の集まり」です。TypeScriptでは、その「名前付きの値」1つ1つに対して、「ここにはこういう型の値だけ入ってほしい」とい...
TypeScript TypeScript | 基礎文法：オブジェクト基礎 – オブジェクト型の基本
オブジェクト型とは何か（まずはざっくりイメージ）オブジェクト型は、「関連する複数の値を、1つのまとまりとして扱うための型」です。name や age のような「項目（プロパティ）」と、その型をセットで...
TypeScript TypeScript | 基礎文法：配列・タプル – 配列操作時の型エラー対処
よくある「配列操作の型エラー」はどこから来るのかTypeScriptで配列を触り始めると、かなりの確率で型エラーにぶつかります。でも、その多くは「TypeScriptが何を守ろうとしているか」が分かる...
TypeScript TypeScript | 基礎文法：配列・タプル – forEachと型
forEachは「配列をなめるだけ」のメソッドforEach は、配列の各要素に対して順番に処理を実行するだけのメソッドです。map や filter と違って、戻り値を使って新しい配列を作ったりはし...
TypeScript TypeScript | 基礎文法：配列・タプル – reduceの型指定
reduceの「型指定」とは何を決めるものかreduce は、配列を「1つの値」に畳み込むメソッドです。TypeScript的に一番大事なのは、「途中経過（累積値：acc）の型をどう扱うか」です。この...
TypeScript TypeScript | 基礎文法：配列・タプル – findの戻り値型
findの基本的な動きと戻り値のイメージfind は、配列の中から「条件を満たす最初の要素」を1つだけ返すメソッドです。もし条件を満たす要素が1つも見つからなかった場合は、undefined を返しま...
TypeScript TypeScript | 基礎文法：配列・タプル – filterの型推論
filterの型推論は「何が残る配列か」を推理してくれる仕組みfilter は、「条件を満たす要素だけを残して新しい配列を作る」メソッドです。TypeScript はここで、「元の配列の要素の型」と「...
TypeScript TypeScript | 基礎文法：配列・タプル – 配列mapの型推論
「配列mapの型推論」とは何をしてくれているのかmap は、「配列の各要素を変換して、新しい配列を作る」メソッドです。TypeScriptは、このときに「元の配列の要素の型」と「変換関数の戻り値の型」...
TypeScript TypeScript | 基礎文法：配列・タプル – スプレッド構文と型
スプレッド構文とは何か（型の世界でどう見えるか）スプレッド構文 ... は、配列やオブジェクトの「中身を展開する」ための記法です。配列なら「要素をバラして別の配列に入れ直す」、オブジェクトなら「プロパ...
TypeScript TypeScript | 基礎文法：配列・タプル – 可変長タプル
可変長タプルとは何か（「一部だけ長さが伸びるタプル」）タプルは本来「要素数が固定」の型ですが、「ここまでは固定、それ以降は同じ型がいくつでも続いていい」という形を表現できるのが「可変長タプル（可変長タ...
TypeScript TypeScript | 基礎文法：配列・タプル – タプルとreadonly
タプルとreadonlyの関係をざっくりイメージするタプルは「要素の数・順番・型が決まっている小さなセット」でした。ここに readonly を組み合わせると、「形も中身も変えない前提のタプル」を作れ...
TypeScript TypeScript | 基礎文法：配列・タプル – タプルの要素アクセス
タプルの要素アクセスは「位置ごとに型が決まっている」のがキモタプルは、「何番目に何の型が入るか」まで型で決まっている配列でした。だからこそ、要素にアクセスしたときも「どの位置を取るか」で型が変わります...
TypeScript TypeScript | 基礎文法：配列・タプル – タプルと配列の違い
まずざっくりしたイメージの違い同じ「[]」を使うのでややこしいんですが、役割はけっこう違います。配列：「同じ型の値が、いくつ並ぶか分からない入れ物」タプル：「要素の数・順番・型が決まっている、小さな“...
TypeScript TypeScript | 基礎文法：配列・タプル – タプルの型固定
「タプルの型固定」とは何かタプルの一番大きな特徴は、「要素の数・順番・型がすべて固定される」ことです。普通の配列は「number が何個でも」「string が何個でも」という“長さフリー”な構造です...
TypeScript TypeScript | 基礎文法：配列・タプル – タプルの基本構文
タプルの基本構文の全体像タプルは、「要素の数・順番・型が決まっている配列」を表すための構文です。基本形はとてもシンプルで、「配列リテラルの [] の中に、位置ごとの型をカンマ区切りで並べる」だけです。...
TypeScript TypeScript | 基礎文法：配列・タプル – タプルとは何か
タプルとは何か（「位置に意味がある配列」）タプルは、ざっくり言うと「要素の数と順番と型が決まっている配列」です。普通の配列は「同じ型の値がズラッと並ぶもの」ですが、タプルは「1番目はこれ、2番目はこれ...
TypeScript TypeScript | 基礎文法：配列・タプル – readonly配列
readonly配列とは何か（「中身を書き換えられない配列」）readonly配列は、一言でいうと「中身を変更できない配列」です。「参照はするけど、追加・削除・書き換えはさせたくない」というときに使い...
TypeScript TypeScript | 基礎文法：配列・タプル – union型配列
union型配列とは何か（まずイメージから）union型配列は、「この配列には“いくつかの型のどれか”が入る」ということを型で表現したものです。たとえば「number か string のどちらかが入...
TypeScript TypeScript | 基礎文法：配列・タプル – 配列に異なる型を入れた場合
「配列に異なる型を入れる」と TypeScript はどう解釈するかまず前提として、TypeScript は「配列の中身（要素）を見て、その配列の型を決める」言語です。なので、配列に異なる型を混ぜると...
TypeScript TypeScript | 基礎文法：配列・タプル – 配列の型推論
配列の型推論とは何かTypeScriptは、わざわざ「: string[]」のように型を書かなくても、初期値から配列の型を自動で推論してくれます。つまり、次のように書いた瞬間に、コンパイラは「これは ...
TypeScript TypeScript | 基礎文法：配列・タプル – string[] と Array<string>
string[] と Array<string> は「意味は同じ」最初に結論から言うと、string[] と Array<string> は意味はまったく同じです。どちらも「string 型の要素だけ...
TypeScript TypeScript | 基礎文法：配列・タプル – 配列型の書き方
配列型とは何かをまずイメージする配列は「同じ種類の値を、順番付きで並べたもの」です。TypeScriptでは、「この配列には何の型の要素が入るのか」を型として表現できます。const numbers ...
TypeScript TypeScript | 基礎文法：変数・基本型 – unknown型との違い
any型とunknown型は「似て非なるもの」どちらも「どんな値でも代入できる型」ですが、性格は真逆です。ざっくり言うと、any型：型チェックをほぼ無効化する「なんでもアリモード」unknown型：何...
TypeScript TypeScript | 基礎文法：変数・基本型 – any型の危険性
any型が「一番危険な型」と言われる理由any 型は、「何でも入るし、どこにでも代入できる」特別扱いの型です。一見すると「エラーが消えて便利」に見えますが、その代わりにTypeScriptの一番大事な...
TypeScript TypeScript | 基礎文法：変数・基本型 – any型とは何か
any型とは何か（TypeScriptの「なんでもアリ」モード）any 型は、一言でいうと「TypeScriptの型チェックをほぼ無効化するための型」です。number や string のように「こ...
TypeScript TypeScript | 基礎文法：変数・基本型 – 型エラーの典型パターン
型エラーの「典型パターン」を知っておく意味型エラーは無限にあるように見えて、実はよく出るパターンはかなり限られています。この「典型パターン」を押さえておくと、エラーを見た瞬間に「ああ、これはあのパター...
TypeScript TypeScript | 基礎文法：変数・基本型 – 型エラーの読み方
型エラーは「TypeScriptからの手紙」だと思って読むまず前提として、型エラーは「お前のコードがダメ」と責めてくるものじゃなくて、「ここがこうズレてるよ」と教えてくれるかなり親切な手紙です。だから...
TypeScript TypeScript | 基礎文法：変数・基本型 – as const の意味
as const は「この値をそのままの形で固定して」と伝えるスイッチas const は、TypeScript に対してこう宣言するためのものです。「この値は“変わらない前提”だから、できるだけその...
TypeScript TypeScript | 基礎文法：変数・基本型 – booleanリテラル型
booleanリテラル型とは何かbooleanリテラル型は、「true だけ」「false だけ」といった、特定の真偽値だけを許可する型です。普通の boolean 型は「true か false の...
TypeScript TypeScript | 基礎文法：変数・基本型 – 数値リテラル型
数値リテラル型とは何か数値リテラル型は、「特定の数値だけを許可する型」です。普通の number 型は「どんな数値でもOK」ですが、数値リテラル型は「この変数には 1 しか入れてはいけない」「0 か ...
TypeScript TypeScript | 基礎文法：変数・基本型 – 文字列リテラル型
文字列リテラル型とは何か文字列リテラル型は、「特定の文字列だけを許可する型」です。普通の string 型は「どんな文字列でもOK」ですが、文字列リテラル型は「この文字列“だけ”OK」という、もっと狭...
TypeScript TypeScript | 基礎文法：変数・基本型 – リテラル型とは
リテラル型とは何か（ざっくりイメージ）リテラル型は、「特定の値そのものを型として扱う」ための仕組みです。普通の string 型は「どんな文字列でもOK」、number 型は「どんな数値でもOK」です...
TypeScript TypeScript | 基礎文法：変数・基本型 – const時の型の固定
const は「値」と「型」をその場で固定する宣言const は「再代入できない変数」を宣言するキーワードですが、TypeScriptでは型の固定のされ方にも特徴があります。const で宣言した瞬間...
TypeScript TypeScript | 基礎文法：変数・基本型 – 再代入時の型チェック
「再代入時の型チェック」とは何をしているのかTypeScriptは「一度決めた型に対して、その後もずっと一貫しているか」をコンパイル時にチェックします。変数に最初に値を入れた瞬間、あるいは型注釈を書い...
TypeScript TypeScript | 基礎文法：変数・基本型 – 明示型と推論型の使い分け
「明示型」と「推論型」とは何かTypeScriptには、型を扱う2つのスタイルがあります。ひとつは「明示型」——自分で : string や : number のように型を書いて宣言するやり方。もうひ...
TypeScript TypeScript | 基礎文法：変数・基本型 – 型推論の仕組み
型推論とは何か型推論（type inference）は、「あなたが書いたコードから、TypeScriptが自動的に型を推測してくれる仕組み」です。毎回すべての変数や関数に型注釈を書かなくても、初期値や...
TypeScript TypeScript | 基礎文法：変数・基本型 – 型注釈の書き方
型注釈とは何か型注釈（type annotation）は、「この変数・この引数・この戻り値には、こういう型の値しか入れません」とコードの中で宣言するための書き方です。TypeScriptでは、変数名や...
TypeScript TypeScript | 基礎文法：変数・基本型 – null / undefined
null / undefined は「値がない」を表す特別な2人まず大枠からいきます。null と undefined は、どちらも「値がない状態」を表すための特別な値です。ただし、まったく同じ意味で...
TypeScript TypeScript | 基礎文法：変数・基本型 – boolean型
boolean型とは何かboolean型は、「真か偽か」を表すための型です。取れる値はたった2つ、true（真）か false（偽）だけ。「ログインしているか？」「在庫はあるか？」「エラーが起きたか？...
TypeScript TypeScript | 基礎文法：変数・基本型 – number型
number型とは何かTypeScriptのnumber型は、「数値」を表すための基本型です。整数も小数も、正の数も負の数も、すべてまとめてnumberとして扱います。JavaScript／TypeS...
TypeScript TypeScript | 基礎文法：変数・基本型 – string型
string型とは何かTypeScriptのstring型は、「文字列」を表すための基本型です。人の名前、メッセージ、住所、IDなど、「文字の並び」で表現されるものはすべてstringで扱います。Ty...
TypeScript TypeScript | 基礎文法：変数・基本型 – let / const の違い
let と const は「変えられるかどうか」を表すスイッチまず大事な前提として、TypeScript（というかモダンなJavaScript）では、変数宣言に var ではなく let と cons...
TypeScript TypeScript | 基礎文法：環境・前提理解 – VSCodeでのTypeScript補完確認
VSCodeはTypeScriptと相性がいい「賢いノート」VSCodeは、TypeScriptを使うときにほぼ標準と言っていいエディタです。理由はシンプルで、「TypeScriptの型情報を理解して...
TypeScript TypeScript | 基礎文法：環境・前提理解 – コンパイルの流れ（ts → js）
TypeScriptコードはそのままでは動かないまず大前提として、ブラウザも Node.js も TypeScript を「そのまま」実行することはできません。理解できるのはあくまで JavaScri...
TypeScript TypeScript | 基礎文法：環境・前提理解 – strict モードの意味
strict モードとは何かTypeScript の strict モードは、一言でいうと「型チェックを最大限きびしくするスイッチ」です。tsconfig.json の compilerOptions...
TypeScript TypeScript | 基礎文法：環境・前提理解 – tsconfig.json の役割
tsconfig.jsonとは何かtsconfig.json は、TypeScript プロジェクトの「設定ファイル」です。TypeScript コンパイラ（tsc）が「どのファイルを、どんなルールで...
TypeScript TypeScript | 基礎文法：環境・前提理解 – TypeScriptのインストール
TypeScriptをインストールする前に知っておく前提TypeScriptは単体で動くわけではなく、「Node.js」と「npm」が前提になります。npmはNode.jsに付属しているパッケージ管理...
TypeScript TypeScript | 基礎文法：環境・前提理解 – npm / npx の違い
npmとnpxは「似てるけど役割が違う道具」npmとnpxは、どちらもNode.jsをインストールすると一緒についてくるコマンドです。名前が似ているのでややこしいですが、役割はけっこう違います。ざっく...
TypeScript TypeScript | 基礎文法：環境・前提理解 – Node.jsの役割
Node.jsとは何かと、TypeScriptとの関係Node.jsは「ブラウザの外でJavaScriptを動かすための実行環境」です。中身では、もともとChromeなどのブラウザで使われている高速な...
TypeScript TypeScript | 基礎文法：環境・前提理解 – TypeScriptが解決する問題
TypeScriptが解決しようとしている世界の悩みTypeScriptは「かっこいい新しい言語を作りたかったから」生まれたわけではなく、「JavaScriptで本気の開発をするときに、みんながハマっ...
TypeScript TypeScript | 基礎文法：環境・前提理解 – JavaScriptとの違い
TypeScriptとJavaScriptの関係と前提理解TypeScriptは「JavaScriptを拡張した言語」で、よく「JavaScriptのスーパーセット」と呼ばれます。つまり、JavaSc...
TypeScript TypeScript | 基礎文法：環境・前提理解 – TypeScriptとは何か
TypeScriptとは何かTypeScriptは「JavaScriptをもっと書きやすく、安全にしたバージョン」と考えるとイメージしやすいです。技術的には「JavaScriptのスーパーセット（上位...