TypeScript
TypeScript | 基礎文法：環境・前提理解 – VSCodeでのTypeScript補完確認
JavaScript JavaScript | ES6+ 文法：関数の進化 – this の束縛差
this の束縛差とは何かthis は「関数が“どのオブジェクトを対象に動くか”を指す特別な値」です。ここが重要です：従来の function は“呼び出し方”で this が決まり、アロー関数は“定...
JavaScript JavaScript | ES6+ 文法：関数の進化 – アロー関数構文
アロー関数とは何かアロー関数（arrow function）は、ES6 で導入された“短く書けて、this が静的（レキシカル）に決まる”新しい関数記法です。ここが重要です：function キーワー...
Java Java | Java 詳細・モダン文法：ジェネリクス – ジェネリクスの制約
「ジェネリクスの制約」を一言でいうとJava のジェネリクスには、「こう書けたら便利そうだけど、仕様上あえて禁止されていること」 がいくつもあります。new T() が書けないT[]（ジェネリック配列...
Java Java | Java 詳細・モダン文法：ジェネリクス – ジェネリクスメソッド
ジェネリクスメソッドを一言でいうとジェネリクスメソッドは、「メソッドの“中だけ”で使える型パラメータを宣言して、そのメソッドを型安全に汎用化する仕組み」です。public static <T> T f...
Java Java | Java 詳細・モダン文法：ジェネリクス – PECS 原則
PECS 原則を一言でいうとPECS 原則は、ジェネリクスのワイルドカードを使うときの合言葉です。Producer Extends, Consumer Super「値を“生産する（取り出す）側”には ...
Java Java | Java 詳細・モダン文法：ジェネリクス – 下限境界（super）
下限境界（super）を一言でいうとジェネリクスの下限境界 ? super T は、「このコレクションは T か、その“親クラスたち”のどれかを要素型として持つ。だから、T を入れるのは安全だよ」と宣...
Java Java | Java 詳細・モダン文法：ジェネリクス – 上限境界（extends）
上限境界（extends）を一言でいうとジェネリクスの上限境界（extends）は、「この型パラメータには、あるクラス T か、そのサブクラスだけを許可します」と制限をかけるための仕組みです。<T e...
JavaScript JavaScript | 1 日 120 分 × 7 日アプリ学習：ToDoアプリ（設計力強化編）
この7日間のゴールと全体像この 7 日間は「ToDoアプリ」を題材に、ただ動くものではなく「設計できる人」になることを狙います。テーマは次の 3 つです。状態管理（state）：アプリの「今の状態」を...
Java Java | Java 詳細・モダン文法：ジェネリクス – ワイルドカード（?）
ワイルドカード（?）を一言でいうとジェネリクスのワイルドカード ? は、「ここには“何らかの型”が入るけど、具体的な型は気にしない・決めたくない」というときの “あいまいな型パラメータ”です。List...
Java Java | Java 詳細・モダン文法：ジェネリクス – ジェネリクスと配列の違い
テーマの全体像を先にまとめるジェネリクス（List<String> など）と配列（String[]）は、どちらも「同じ型の要素をたくさん持つ」ために使いますが、中身のルールやチェックのタイミングがかな...
Java Java | Java 詳細・モダン文法：ジェネリクス – 型消去の概念
型消去を一言でいうと型消去（type erasure）は、「ジェネリクスの <T> みたいな型情報は“コンパイル時だけ”に使われて、コンパイル後のクラスファイル（実行時）からは消えてしまう」という仕組...
Java Java | Java 詳細・モダン文法：ジェネリクス – 型パラメータの宣言
「型パラメータの宣言」を一言でいうと型パラメータの宣言は、「クラスやメソッドの“名前の横に” <T> などを書いて、ここには後で具体的な型をはめ込みますよ、と宣言すること」です。class Box<T...
Java Java | Java 詳細・モダン文法：ジェネリクス – ジェネリクスとは
ジェネリクスを一言でいうとジェネリクス（generics）は、「クラスやメソッドの中に “型の穴” を開けておいて、使うときにその穴に好きな型をはめられる仕組み」です。List<String> や M...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日） | 第3章：Next.jsらしさ – 簡単なミニアプリ②
ここで作る「Next.jsらしい」ミニアプリの全体像ここまでで、React の基本（コンポーネント・state・props・イベント）Next.js の基本（ページ分割・Link・layout・Met...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日） | 第3章：Next.jsらしさ – Metadata（SEO基礎）
Metadataとは何か（Next.jsでの位置づけ）まず「Metadata（メタデータ）」という言葉から整理します。これは、ページの「裏側の情報」です。HTML でいうと <head> の中に書く情...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日） | 第3章：Next.jsらしさ – 画像表示（Image）
Next.jsの画像表示の全体イメージ画像を出したいとき、ふつうのHTMLなら <img src="..."> を使いますよね。Next.js でも <img> は使えますが、「Next.jsらしさ」...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日） | 第3章：Next.jsらしさ – CSSの当て方
Next.jsでCSSをどう当てるかの全体像React / Next.js は「JSXで見た目を書く」ので、最初は「CSSはどこに書けばいいの？」となりがちです。Next.js ではいくつか方法があり...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日） | 第3章：Next.jsらしさ – レイアウト（layout.tsx）
Next.js のレイアウトの全体像React 単体だと、ページごとにヘッダーやフッターを書きがちです。でも実際のサイトを想像すると、ほとんどのページで「共通の部分」があります。画面の一番上にあるヘッ...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日） | 第3章：Next.jsらしさ – ページ遷移（Link）
「Next.jsらしさ」とページ遷移ここまでで「1ページの中で動く React」はかなりイメージできてきたと思います。ここからは「Next.js らしさ」がグッと出てくるところ――ページ遷移と複数ペー...
JavaScript JavaScript | ES6+ 文法：変数・宣言の進化 – グローバル汚染回避
グローバル汚染とは何かグローバル汚染は「意図せずグローバルスコープ（window/globalThis）に変数や関数が増えてしまい、別コードと衝突や上書きが起きる」状態です。衝突は“同じ名前”が複数フ...
JavaScript JavaScript | ES6+ 文法：変数・宣言の進化 – for 文での let
for 文での let とは何かfor 文での let は「ループの各反復ごとに“新しい束縛”を作る」宣言です。ここが重要です：i のようなインデックスを let で宣言すると、反復ごとに独立した値が...
JavaScript JavaScript | ES6+ 文法：変数・宣言の進化 – 定数オブジェクトの注意点
定数オブジェクトとは何かconst で宣言したオブジェクトは「変数がどのオブジェクトを指すか」が固定されます。ここが重要です：const は参照を固定するだけで、中身（プロパティや配列要素）は変更可能...
JavaScript JavaScript | ES6+ 文法：変数・宣言の進化 – 再宣言エラー
再宣言エラーとは何か再宣言エラーは「同じスコープ内で、同じ名前の変数をもう一度宣言しようとすると起きるエラー」です。ES6 以降、let と const は“同スコープの再宣言”を禁止します。ここが重...
JavaScript JavaScript | ES6+ 文法：変数・宣言の進化 – var との挙動差
var と ES6（let/const）の根本的な違いvar は“関数スコープ＋巻き上げ（hoisting）あり、再宣言可能”という古い挙動、let/const は“ブロックスコープ＋TDZ（宣言前ア...
JavaScript JavaScript | ES6+ 文法：変数・宣言の進化 – TDZ（Temporal Dead Zone）
TDZ（Temporal Dead Zone）とは何かTDZ は「let/const で宣言される変数が、宣言位置まで“存在しない扱い”になるゾーン」のことです。ここが重要です：TDZ 中にその変数へ...
JavaScript JavaScript | ES6+ 文法：変数・宣言の進化 – ブロックスコープ
ブロックスコープとは何かブロックスコープは「波括弧 { } で囲まれた“その範囲内だけ”有効な変数の生存範囲」です。ES6 以降、let と const はブロックスコープを持ち、宣言されたブロックの...
JavaScript JavaScript | ES6+ 文法：変数・宣言の進化 – 再代入不可の意味
再代入不可とは何か「再代入不可」は、同じ変数名に“別の値（参照）をもう一度割り当てることができない”という意味です。ES6 の const はブロックスコープで、宣言した後にその変数へ新しい値を入れ直...
JavaScript JavaScript | ES6+ 文法：変数・宣言の進化 – const の仕様
const とは何かconst は ES6 で導入された“ブロックスコープの再代入不可な変数宣言”です。ここが重要です：const は「宣言したブロック内でのみ有効」「同じスコープで再宣言できない」「...
JavaScript JavaScript | ES6+ 文法：変数・宣言の進化 – let の仕様
let とは何かlet は ES6 で導入された“ブロックスコープの再代入可能な変数宣言”です。ここが重要です：let は「宣言されたブロック内でのみ有効」「同じスコープで再宣言できない」「宣言前に使...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日） | 第2章：Reactの基本操作 – 簡単なミニアプリ①
簡単なミニアプリを作る理由ここまで、React の「部品」を一通り見てきました。JSXコンポーネントpropsuseState（状態管理）イベント処理条件分岐配列と mapコンポーネント分割いよいよ、...