JavaScript
JavaScript | 1 日 90 分 × 7 日アプリ学習：入力チェックアプリ（初級編）
@lifehacker
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 を触って「ここがトップページなんだ」と実感する...