2026-01-11

スポンサーリンク
JavaScript

JavaScript | 1 日 90 分 × 7 日アプリ学習:入力チェックアプリ(初級編)

1日目のゴールと今日のテーマ1日目のテーマは「“入力された文字がOKかどうか”をプログラムに判断させる感覚をつかむこと」です。ただ文字を受け取るだけじゃなくて、未入力(空)のときに警告を出す。文字が長すぎるときに「長すぎます」と教える。こう...
JavaScript

JavaScript | 1 日 90 分 × 7 日アプリ学習:強化版カウンターアプリ(初級編)

1日目のゴールと今日のテーマ1日目のテーマは「シンプルだけど“設計の考え方”が入ったカウンターアプリを作ること」です。ただの「+1ボタン」ではなく、複数ボタンを持つ。ボタンごとに役割を分ける(イベント分離)。数値の管理をきちんと1か所で行う...
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.toUpperCase()); // エラー}...
TypeScript

TypeScript | 基礎文法:Union・基本型操作 – Discriminated Unionの考え方

まず「Discriminated Union」をざっくり日本語にすると難しいカタカナですが、意味はシンプルです。Discriminated Union(判別可能ユニオン)=「ある1つのプロパティの値によって、どの型なのかを“判別できる”Un...
TypeScript

TypeScript | 基礎文法:Union・基本型操作 – 型の絞り込み(narrowing)

「型の絞り込み」とは何かを一言でつかむ型の絞り込み(narrowing)は、「最初はざっくりした型だったものを、条件分岐などを通して“より具体的な型”に狭めていくこと」です。TypeScript では、よくこんな型が出てきます。let va...
TypeScript

TypeScript | 基礎文法:Union・基本型操作 – unionとintersectionの違い

まずイメージでつかむ:unionとintersectionは「または」と「かつ」最初に一番大事なことだけ頭に入れてください。A | B(union型)→ 「A または B」。どちらか一方ならOK。A & B(intersection型)→ ...
TypeScript

TypeScript | 基礎文法:Union・基本型操作 – intersection型の基本

intersection型は「AもBも両方持つ」型まず一言でいうと、intersection型(インターセクション型、&)は 「AかつB」=「Aの性質もBの性質も同時に持つ型」 です。対比でいうとこうなります。union型(|):A または...
TypeScript

TypeScript | 基礎文法:Union・基本型操作 – union型の共通プロパティ

「union型の共通プロパティ」とは何かまず前提から整理します。union型は「A か B かどちらか」の型でした。type User = { id: number; name: string;};type Admin = { id: nu...
TypeScript

TypeScript | 基礎文法:Union・基本型操作 – union型とif分岐

union型とif分岐の関係をまずイメージでつかむunion型は「A か B かどちらか」という“選択肢のある型”でした。そして if 分岐は、「今この瞬間は A なのか B なのかを確かめるための問い」です。TypeScript は、if...
TypeScript

TypeScript | 基礎文法:Union・基本型操作 – union型の基本

union型は「AかBかどちらか」の型まずイメージからいきます。union型(ユニオン型)は、「この値は“これか、あれか”のどれかです」という“選択肢のある型」です。書き方はとてもシンプルで、型と型のあいだを | でつなぎます。let va...
TypeScript

TypeScript | 基礎文法:関数の基礎 – 関数でよく出る型エラー

はじめに:型エラーは「怒られている」のではなく「守られている」関数まわりで出る型エラーは、最初かなりストレスになりますよね。でも本質的には、「その書き方だと、実行時にバグる可能性が高いよ」と TypeScript が先に教えてくれているだけ...
TypeScript

TypeScript | 基礎文法:関数の基礎 – nullチェックの重要性

そもそも「nullチェック」って何のためにやるのかまず一番大事なところから。nullチェックは「そこに“あるはずのもの”が、本当にあるかを確認する行為」です。プログラムを書いていると、ついこう思いがちです。「この値は、まああるでしょ」「この...
TypeScript

TypeScript | 基礎文法:関数の基礎 – in演算子による型ガード

「in演算子による型ガード」は何をしてくれるのかin 演算子による型ガードは、「このオブジェクトは、このプロパティを持っているか?」を調べることで、型を絞り込む仕組みです。人間の感覚だと、こうです。「permissions というプロパティ...
TypeScript

TypeScript | 基礎文法:関数の基礎 – typeofによる型ガード

typeofによる型ガードとは何かtypeof による型ガードは、「値の実行時の型をチェックして、その結果をもとに TypeScript が変数の型を“狭くする”仕組みです。人間の感覚としてはこうです。「typeof value === "...
TypeScript

TypeScript | 基礎文法:関数の基礎 – 型ガードの基礎

「型ガード」とは何かを一言でつかむまずイメージからいきます。型ガードは、「この if を通ったなら、この変数は“この型”だと安全に言えるよ」ということを、TypeScript にちゃんと分かってもらうための「型の見張り役」です。人間は自然に...
TypeScript

TypeScript | 基礎文法:関数の基礎 – 条件分岐と型推論

「条件分岐すると型も変わる」という感覚から始めるTypeScript のおいしいところは、if や switch で条件分岐すると、「そのブロックの中だけ型が狭くなる」 ことです。「条件でチェックした内容を、TypeScript がちゃんと...
TypeScript

TypeScript | 基礎文法:関数の基礎 – 戻り値で型が決まるケース

「戻り値で型が決まる」ってどういうことかふつうは「引数の型 → 戻り値の型」という流れで関数を考えますが、TypeScript では 「戻り値の書き方や宣言のしかたが、逆に“型”を決める・変化させる」 場面がいくつかあります。ここでは特に初...
TypeScript

TypeScript | 基礎文法:関数の基礎 – 関数型エイリアス

関数型エイリアスってそもそも何?まず一言でいうと、関数型エイリアスは「関数の“形”に名前をつける仕組み」です。「この関数は、こういう引数を受け取って、こういう型を返す」という“関数の型”に、わかりやすいラベルをつけて再利用できるようにするも...
TypeScript

TypeScript | 基礎文法:関数の基礎 – 関数を変数に代入する型

「関数を変数に代入する」ときに型で何を約束しているかまず前提をそろえます。TypeScript では、「関数そのもの」も値として扱えて、変数に代入できます。function add(a: number, b: number): number...
TypeScript

TypeScript | 基礎文法:関数の基礎 – コールバック関数の型

「コールバック関数の型」とは何かまず、「コールバック関数」という言葉をちゃんと掴みましょう。コールバック関数は、「関数に“引数として渡される関数”」のことです。function doTwice(fn: () => void) { fn();...
TypeScript

TypeScript | 基礎文法:関数の基礎 – 関数式の型

「関数式の型」とは何かまず言葉の整理からいきます。TypeScript で「関数式の型」といったとき、だいたい次のようなものを指します。const add = function (a: number, b: number): number ...
JavaScript

TypeScript | 基礎文法:関数の基礎 – アロー関数の型

アロー関数でも「型の考え方」は普通の関数と同じまず一番大事なところから。アロー関数でも、「引数の型」と「戻り値の型」を決める考え方は、普通の function とまったく同じです。// 通常の関数function add(a: number...
TypeScript

TypeScript | 基礎文法:関数の基礎 – 可変長引数(rest)

可変長引数(rest)は「いくつ来るか分からない引数」を受け取る仕組みまずイメージから。可変長引数(rest 引数)は、「この関数、引数が 1 個かもしれないし、10 個かもしれない。数が決まっていないけど、全部まとめて受け取りたい」という...
TypeScript

TypeScript | 基礎文法:関数の基礎 – デフォルト引数

デフォルト引数は「来なかったときの標準値」デフォルト引数は、「この引数が渡されなかったときは、代わりにこれを使ってね」という“標準値”をあらかじめ決めておく仕組みです。書き方はシンプルで、引数に = で値をつけます。function gre...
TypeScript

TypeScript | 基礎文法:関数の基礎 – オプション引数

オプション引数は「渡してもいいし、渡さなくてもいい」引数まずイメージからいきます。オプション引数は、「この引数は“あってもなくてもいい”よ」ということを型で表すための仕組みです。書き方はとてもシンプルで、引数名のあとに ? を付けます。fu...
スポンサーリンク