JavaScript
JavaScript | 1 日 90 分 × 7 日アプリ学習：入力チェックアプリ（初級編）
@lifehacker
JavaScript JavaScript | ES6+ 文法：関数の進化 – 高階関数との相性
高階関数とは何か高階関数は「関数を“引数として受け取る”、または“関数を返す”関数」のことです。関数を値として扱えることで、ロジックの差し替え・再利用・合成が簡単になります。ここが重要です：ES6+ ...
JavaScript JavaScript | ES6+ 文法：関数の進化 – パラメータ分解
パラメータ分解（分割代入）とは何かパラメータ分解は、関数の引数に「オブジェクトや配列をその場で分解して、必要な部分だけ取り出す」ES6の構文です。ここが重要です：関数シグネチャ（引数の書き方）に“必要...
JavaScript JavaScript | ES6+ 文法：関数の進化 – 残余引数（…args）
残余引数（...args）とは何か残余引数（rest parameters）は、関数の仮引数に ...args のように書くと、渡された引数を“配列としてまとめて”受け取る仕組みです。ここが重要です：...
JavaScript JavaScript | ES6+ 文法：関数の進化 – デフォルト引数
デフォルト引数とは何かデフォルト引数は、関数のパラメータに「未指定（または undefined）のときに使われる初期値」を直接書ける仕組みです。ここが重要です：未指定・undefined のときだけ既...
JavaScript JavaScript | ES6+ 文法：関数の進化 – メソッド短縮記法
メソッド短縮記法とは何かメソッド短縮記法は、オブジェクトやクラスの「関数プロパティ」を function キーワードなしで、name() { ... } の形で簡潔に定義できる ES6 の構文です。こ...
JavaScript JavaScript | ES6+ 文法：関数の進化 – コールバックでの利点
コールバックとは何かコールバックは「関数に“後で呼んでね”と渡しておく関数」です。ES6+ では、アロー関数・レキシカル this・Promise/async との相乗効果で、コールバックが短く安全に...
JavaScript JavaScript | ES6+ 文法：関数の進化 – 暗黙の return
暗黙の return とは何か暗黙の return は、アロー関数で本体が“1つの式”だけのときに、return キーワードを書かなくてもその式の評価結果が返る仕組みです。ここが重要です：波括弧 {}...
JavaScript JavaScript | ES6+ 文法：関数の進化 – arguments 非対応
arguments 非対応とは何かアロー関数は「自分専用の arguments（可変長引数の擬似配列）」を持ちません。ここが重要です：従来の function なら arguments で渡された全引...
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 は参照を固定するだけで、中身（プロパティや配列要素）は変更可能...