Java
Java | Web 基礎・HTTP・REST：Web 全体像 － Web アプリの仕組み
プログラミング
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（余剰プロパティチェック）は、「その型に存在しないプロパティを、オブジェクトリテラルに...
JavaScript JavaScript | 1 日 60 分 × 7 日アプリ学習：超初級編
1日目のゴールと全体の流れ1日目のテーマは「JavaScriptに触ってみて、“動いた！”を体で感じること」です。理解度は50％で十分。それよりも「自分の手で打ったコードが反応した」という経験を作りた...
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 のような「項目（プロパティ）」と、その型をセットで...
JavaScript JavaScript | ES6+ 文法：分割代入 – 安全な分割
安全な分割とは何か分割代入は「欲しい値だけ」を短く取り出せますが、未定義（undefined）や欠落、深いネスト、null、宣言順の問題で簡単にエラーになります。ここが重要です：安全な分割の基本は「外...
JavaScript JavaScript | ES6+ 文法：分割代入 – 値の入れ替え
値の入れ替え（スワップ）とは何か分割代入を使うと、2つ以上の変数の値を“一時変数なし”で入れ替えられます。ここが重要です：左側のパターンに「新しい並び」を書き、右側に「古い並び」を配列で渡すだけ。読み...
JavaScript JavaScript | ES6+ 文法：分割代入 – rest 要素
rest 要素とは何かrest 要素（残余要素）は、分割代入の左側で ...rest のように書き、“取りきれなかった残り全部”を配列やオブジェクトとしてまとめて受ける記法です。ここが重要です：配列な...
JavaScript JavaScript | ES6+ 文法：分割代入 – 一部要素のスキップ
一部要素のスキップとは何か配列の分割代入では、左側のパターンにカンマだけを書いて「その位置の要素を受け取らない」ことができます。ここが重要です：スキップは“要素の位置”で意味を表すので、読み手が「どこ...
JavaScript JavaScript | ES6+ 文法：分割代入 – 関数引数での使用
関数引数での分割代入とは何か関数のパラメータ部分で分割代入を使うと、渡された配列・オブジェクトから「必要な値だけ」を直接取り出して、引数の宣言に“意図（何を使うのか、欠けたらどうするのか）”を明示でき...
JavaScript JavaScript | ES6+ 文法：分割代入 – ネスト分割
ネスト分割とは何かネスト分割（ネストした分割代入）は、オブジェクトや配列の“入れ子構造”から、必要な値だけを階層に沿って取り出す書き方です。ここが重要です：左側のパターン（構造の形）に合わせて、右側の...
JavaScript JavaScript | ES6+ 文法：分割代入 – 変数名変更
変数名変更（エイリアス）とは何か分割代入の「変数名変更」は、オブジェクトのプロパティ名を“別名の変数”へ取り出す書き方です。ここが重要です：{ prop: alias } の形で「右側のオブジェクトの...
JavaScript JavaScript | ES6+ 文法：分割代入 – デフォルト値
デフォルト値（既定値）とは何か分割代入のデフォルト値は、「取り出そうとした場所に値が無い（undefined）」とき、代わりに使われる“埋め草”です。ここが重要です：デフォルト値は undefined...
JavaScript JavaScript | ES6+ 文法：分割代入 – オブジェクトの分割代入
オブジェクトの分割代入とは何かオブジェクトの分割代入は、オブジェクトから「欲しいプロパティだけ」を取り出し、同名の変数に一気に割り当てる ES6 の書き方です。ここが重要です：左側のパターン { id...
JavaScript JavaScript | ES6+ 文法：分割代入 – 配列の分割代入
配列の分割代入とは何か配列の分割代入は、配列の「位置」に合わせて、複数の変数へ一気に値を取り出す書き方です。ここが重要です：左側のパターン に、右側の配列の先頭から順に対応します。足りない要素は un...
JavaScript JavaScript | 1 日 120 分 × 7 日アプリ学習：フォームバリデーションアプリ
この7日間のゴールと全体像この 7 日間は「ログインフォーム風のミニアプリ」を題材に、メールアドレスとパスワードの入力チェックを通して、正規表現での形式チェックエラー表示と submit 制御ユーザー...