JavaScript
JavaScript | 1 日 120 分 × 7 日アプリ学習：API通信アプリ（Nager.Date APIで祝日一覧アプリ）
2026-01
Java Java | Java 詳細・モダン文法：ラムダ式・関数型 – メソッド参照
メソッド参照を一言でいうとメソッド参照（::）は、「すでに存在するメソッドやコンストラクタを、“ラムダ式の代わりに”そのまま関数として渡すための短い書き方」です。例えば、names.forEach(s...
Java Java | Java 詳細・モダン文法：ラムダ式・関数型 – Supplier
Supplier を一言でいうとjava.util.function.Supplier<T> は、「引数は何も受け取らずに、T 型の値を 1 つ“供給する（用意してくれる）”関数」を表す関数型インター...
Java Java | Java 詳細・モダン文法：ラムダ式・関数型 – Consumer
Consumer を一言でいうとjava.util.function.Consumer<T> は、「T 型の値を 1 つ受け取って“何かする”けれど、結果（戻り値）は返さない関数」 を表す関数型インタ...
Java Java | Java 詳細・モダン文法：ラムダ式・関数型 – Function
Function を一言でいうとjava.util.function.Function<T, R> は、「T 型の値を 1 つ受け取って、R 型の値を 1 つ返す“変換処理”を表す関数型インターフェー...
Java Java | Java 詳細・モダン文法：ラムダ式・関数型 – Predicate
Predicate を一言でいうとjava.util.function.Predicate<T> は、「T 型の値を 1 つ受け取って、true / false を返す“条件判定関数”を表す関数型イン...
Java Java | Java 詳細・モダン文法：ラムダ式・関数型 – @FunctionalInterface
@FunctionalInterface を一言でいうと@FunctionalInterface は、「このインターフェースは“関数型インターフェース”として使うつもりですよ」とコンパイラに宣言するた...
Java Java | Java 詳細・モダン文法：ラムダ式・関数型 – 関数型インターフェース
関数型インターフェースを一言でいうと関数型インターフェースは、「たった1つだけ“抽象メソッド”を持つインターフェースで、その1つのメソッドを“関数”として扱うための入れ物」です。ラムダ式は「単体では宙...
Java Java | Java 詳細・モダン文法：ラムダ式・関数型 – ラムダ式の構文
ラムダ式とは何か（まずイメージから）ラムダ式は、Java 8 から入った「小さな“処理そのもの”を値として書くための記法」です。「このタイミングで、こういう処理を実行してほしい」という“やりたいこと”...
JavaScript JavaScript | ES6+ 文法：スプレッド構文 – 旧構文との比較
スプレッド構文と「旧構文」をざっくり比較するとES6 のスプレッド構文 ... は、「配列やオブジェクトの中身をその場でバラして並べる」ための新しい書き方です。旧構文（ES5 まで）は、concat ...
JavaScript JavaScript | ES6+ 文法：スプレッド構文 – 不変データ作成
「不変データ」とは何か（まずここを押さえる）不変データ（immutable data）とは、「一度作ったデータを書き換えず、変更したいときは新しいデータを作る」という考え方です。ここが重要です：配列....
JavaScript JavaScript | ES6+ 文法：スプレッド構文 – 浅いコピーの理解
「浅いコピー」とは何か（まずイメージを掴む）スプレッド構文のコピー（ や { ...obj }）は「浅いコピー（shallow copy）」です。ここが最重要ポイントです：外側の「箱」（配列そのもの・...
JavaScript JavaScript | ES6+ 文法：スプレッド構文 – 上書き順序
スプレッド構文の「上書き順序」とは何かスプレッド構文では、... を使って配列・オブジェクトの中身を「左から右へ」順番に展開していきます。ここが最重要ポイントです：オブジェクトの { ...a, .....
JavaScript JavaScript | ES6+ 文法：スプレッド構文 – 結合処理
スプレッド構文による「結合処理」とは何かスプレッド構文での結合処理は、... を使って「配列やオブジェクトの中身をバラして並べ直し、新しい配列／オブジェクトを作る」書き方です。ここが重要です：配列なら...
JavaScript JavaScript | ES6+ 文法：スプレッド構文 – 関数引数展開
関数引数展開とは何かスプレッド構文の「関数引数展開」は、fn(...array) のように書いて「配列（や配列っぽいもの）をバラして、関数の複数の引数として渡す」書き方です。ここが重要です：... が...
JavaScript JavaScript | ES6+ 文法：スプレッド構文 – オブジェクトコピー
オブジェクトコピーとスプレッド構文の関係オブジェクトのスプレッド構文は、{ ...obj } のように書いて「オブジェクトの中身（プロパティ）を展開して、新しいオブジェクトを作る」書き方です。ここが重...
JavaScript JavaScript | ES6+ 文法：スプレッド構文 – 配列コピー
スプレッド構文で「配列コピー」とは何かスプレッド構文を使うと、 のように書いて「配列の中身だけを取り出して、新しい配列を作る」ことができます。ここが重要です：const copy = arr; は“同...
JavaScript JavaScript | ES6+ 文法：スプレッド構文 – オブジェクト展開
オブジェクトのスプレッド構文とは何かオブジェクトのスプレッド構文は、{ ...obj } のように書いて「オブジェクトの中身（プロパティ）をその場に展開する」書き方です。イメージとしては、「そのオブジ...
JavaScript JavaScript | ES6+ 文法：スプレッド構文 – 配列展開
スプレッド構文の「配列展開」とは何かスプレッド構文の配列展開は、...array の形で「配列をバラして、その場に1個ずつ並べる」書き方です。ここが重要です： と書くと「arr の中身だけ」が新しい配...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日）演習問題・課題 | 第3章：Next.jsらしさ – ミニアプリ②
この課題のねらいここまで学んできた内容をぜんぶつないで「小さな Next.js アプリ」を完成させるステップです。特に意識してほしいのは次の2点です。複数ページ（URL）があるアプリを、自分で構成でき...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日）演習問題・課題 | 第3章：Next.jsらしさ – Metadata
この課題のねらいこの演習は、「Next.jsらしいメタデータの設定」に慣れることが目的です。特に、title（ブラウザタブや検索結果のタイトル）description（検索結果の説明文）を、Next....
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日）演習問題・課題 | 第3章：Next.jsらしさ – 画像
この課題のねらいこの演習は、「Next.js らしい画像の扱い方＝Imageコンポーネント」を体験するのがテーマです。ふつうの <img> ではなく next/image を使うことで、高速表示（自動...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日）演習問題・課題 | 第3章：Next.jsらしさ – CSS
この課題のねらいこの演習のテーマは「Next.js での CSS Modules の基本を、自分の手でちゃんと通すこと」です。ポイントは次の3つです。CSS Modules用のファイルを作るclass...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日）演習問題・課題 | 第3章：Next.jsらしさ – レイアウト
この課題のねらいこの演習は「Next.js らしいレイアウト」の感覚をつかむことが目的です。特に大事なのは、ページごとに毎回ヘッダーを書くのではなく、共通ヘッダーを layout.tsx にまとめるど...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日）演習問題・課題 | 第3章：Next.jsらしさ – ページ遷移
この課題のねらいこの演習は「Next.jsならではのページ遷移の感覚」をつかむのがテーマです。やることはシンプルですが、アプリっぽさが一気に増えるポイントでもあります。2つのページを作るLink コン...
JavaScript JavaScript | 1 日 90 分 × 7 日アプリ学習：簡単 ToDo アプリ（初級編）
1日目のゴールと今日のテーマ1日目のテーマは「配列でタスクを管理して、画面を“描き直しながら”ToDoリストを動かす感覚をつかむこと」です。作るのは、ほんとにシンプルな ToDo アプリです。テキスト...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日）演習問題・課題 | 第2章：Reactの基本 – ミニアプリ①
この課題のねらいここまでの「useState」「props」「コンポーネント分割」をぜんぶまとめて、小さな「カウンターアプリ」を完成させます。単なる練習問題ではなく、state で「今の値」を持つpr...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日）演習問題・課題 | 第2章：Reactの基本 – コンポーネント分割
この課題のねらいこの演習のテーマは「コンポーネント分割」と「props を使った汎用化」です。つまり、こういう流れを体で覚えてもらうことが目的です。最初は 1 つのコンポーネントにベタ書きリスト表示部...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日）演習問題・課題 | 第2章：Reactの基本 – 配列とmap
この課題のねらいこの演習は「配列 × map × React の描画」に慣れるためのものです。ここがわかると、「APIから取ってきた配列を一覧表示する」といった“実務のド真ん中”が一気にイメージしやす...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日）演習問題・課題 | 第2章：Reactの基本 – 条件分岐
この課題のねらいこの演習は「React で条件分岐して表示を切り替える」感覚をつかむのがテーマです。やることはシンプルですが、実務でめちゃくちゃ使う考え方です。true / false で表示を切り替...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日）演習問題・課題 | 第2章：Reactの基本 – イベント処理
この課題のねらいこの演習は「イベント処理 × useState」のセットに慣れることがテーマです。つまり、ボタンを押したら何かが変わる入力欄に文字を打ったら state に反映されるその state ...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日）演習問題・課題 | 第2章：Reactの基本 – useState
この課題のねらいこの演習は「useState を使って、画面が“動く”体験を自分の手で作る」のがテーマです。やることはシンプルですが、React の本質がギュッと詰まっています。useState で ...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日）演習問題・課題 | 第2章：Reactの基本 – props
この課題のねらいこの演習は、「props の感覚を体に入れる」ためのものです。親コンポーネントから子コンポーネントへ値を渡す子コンポーネントでその値を使って表示する必要なら console.log で...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日）演習問題・課題 | 第1章：準備と超基礎 – コンポーネント
この課題のねらいこの演習のテーマは「コンポーネントに慣れること」です。やることはシンプルで、関数コンポーネントを自分で作るそれを画面に表示する慣れてきたら、コンポーネントを別ファイルに分けて再利用する...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日）演習問題・課題 | 第1章：準備と超基礎 – JSX基礎
この課題のねらいこの演習は、React の「見た目を書く言語」である JSX に慣れるためのものです。難しいことは一切いりません。JSXでただ文字を出すJSXの中でちょっとした計算をするJSXの中で変...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日）演習問題・課題 | 第1章：準備と超基礎 – フォルダ構造
この課題のねらいこの演習は「Next.js のフォルダ構造が頭の中でつながっているか」を確認するためのものです。特に大事なのは、app/page.tsx を触って「ここがトップページなんだ」と実感する...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日）演習問題・課題 | 第1章：準備と超基礎 – 開発環境構築
開発環境構築の演習のねらいこの課題は「Next.js を使えるようになる」ための一番最初の関門です。コードを書く前に、まずは1つ目に、Next.js プロジェクトを自分の PC 上に作る2つ目に、開発...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日）演習問題・課題 | 第1章：準備と超基礎 – React / Next.jsの理解
React / Next.js の理解を深める演習問題学習の最後に、あなた自身の言葉で理解を整理するための課題です。ここでは、ただ答えを書くのではなく、「なぜそう言えるのか」までかみ砕いて説明します。...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日） | 第5章：仕上げと次の一歩 – 振り返りと次の学習
ここまでで「できるようになったこと」この講座、かなりのボリュームを一気に駆け抜けました。まずは、あなたが今もう「できるようになっていること」を、あえて言語化しておきます。Reactまわりでできることコ...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日） | 第5章：仕上げと次の一歩 – 最終アプリ実装
この章でやることの全体像ここまで「最終アプリ設計」までやってきたので、いよいよそれを実装 → デザイン調整 → 動作確認 → 修正の流れで形にしていきます。ここでは、前章の「講座管理ミニアプリ」（講座...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日） | 第5章：仕上げと次の一歩 – 最終アプリ設計
「最終アプリ設計」でやることの全体像ここまでで、単発の画面やミニアプリは作れるところまで来ています。ここから一歩進めて、複数画面があるデータを共通の前提で扱う実装の順番まで見通すという「小さいけれど一...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日） | 第5章：仕上げと次の一歩 – 簡単な設計練習
設計練習って何をやる時間かここまで、コードの書き方そのものはかなり身についてきています。でも実務に近づくと、いきなり「この画面作って」と言われます。つまり、「何をどう書くか」の前に、「どう分解して考え...
JavaScript JavaScript | 1 日 90 分 × 7 日アプリ学習：入力チェックアプリ（初級編）
1日目のゴールと今日のテーマ1日目のテーマは「“入力された文字がOKかどうか”をプログラムに判断させる感覚をつかむこと」です。ただ文字を受け取るだけじゃなくて、未入力（空）のときに警告を出す。文字が長...
JavaScript JavaScript | 1 日 90 分 × 7 日アプリ学習：強化版カウンターアプリ（初級編）
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.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 では 「戻り値の書き方や宣言のしかたが、逆に“型”を決める・変化させる」...