Java
Java Tips | 基本ユーティリティ：Optionalラッパー
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...