JavaScript
JavaScript | 1 日 90 分 × 7 日アプリ学習：フォーム送信シミュレーター（初級編）
2026-01-13
Python Python | 1 日 60 分 × 7 日アプリ学習：超初級編
1日目のゴールと今日やること1日目のゴールは、たったこれだけです。自分で書いた Python のコードを実行して、画面に文字を出せるようになる。そのために今日は、この3つに集中します。プログラムって何...
JavaScript JavaScript | 1 日 90 分 × 7 日アプリ学習：ランダム表示アプリ（初級編）
1日目のゴールと今日のテーマ1日目のテーマは「ランダムに1つ選んで表示する感覚をつかむ」 ことです。目指すのは、とてもシンプルなランダム表示アプリ。ボタンを押すと「今日の運勢」や「おみくじ結果」がラン...
Java Java | Java 詳細・モダン文法：ラムダ式・関数型 – ラムダのスコープ
ラムダのスコープを一言でいうとラムダ式の「スコープ」は、「ラムダ式の“中から”“外のどこまで”見えるのか・アクセスできるのか」という話です。ここをちゃんと理解していないと、「ローカル変数をラムダの中で...
Java Java | Java 詳細・モダン文法：ラムダ式・関数型 – コンストラクタ参照
コンストラクタ参照を一言でいうとコンストラクタ参照（ClassName::new）は、「new クラス名(...) を、そのまま“関数”として渡すための短い書き方」です。ラムダ式で書くと() -> n...
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 コン...