JavaScript
JavaScript | DOM 操作：イベント基礎 – マウスイベント（click / dblclick / mouseover）
フレームワーク
60日で身につけるReact モダンJavaScriptの基礎から始める挫折しないためのReact入門 60日コース | フォーム・コンポーネント設計 － DAY 40：コンポーネント設計演習
DAY 40：コンポーネント設計演習 前半 ― TODOアプリを4つのコンポーネントに分割するDAY 40の前半では、DAY 30で作成したシンプルなTODOアプリを題材にして、 コンポーネント分割の...
60日で身につけるReact モダンJavaScriptの基礎から始める挫折しないためのReact入門 60日コース | フォーム・コンポーネント設計 － DAY 39：Props Drilling
DAY 39：Props Drilling 前半 ― 「深い階層にPropsを渡す」ときに何が起きるかを知るDAY 39では、Reactでよく話題になる 「Props Drilling（プロップス・ド...
60日で身につけるReact モダンJavaScriptの基礎から始める挫折しないためのReact入門 60日コース | フォーム・コンポーネント設計 － DAY 38：Stateはどこに置くか
DAY 38：Stateはどこに置くか 前半 ― 「状態の居場所」を意識して設計するDAY 38では、フォーム・コンポーネント設計の中でもとても重要なテーマである 「Stateはどこに置くか」について...
60日で身につけるReact モダンJavaScriptの基礎から始める挫折しないためのReact入門 60日コース | フォーム・コンポーネント設計 － DAY 37：コンポーネント設計
DAY 37：コンポーネント設計 前半 ― 「責務」を軸に考える練習を始めるDAY 37は、フォームだけでなくReactアプリ全体の設計力に関わる、とても重要な回になります。 ここでは次の4つをテーマ...
60日で身につけるReact モダンJavaScriptの基礎から始める挫折しないためのReact入門 60日コース | フォーム・コンポーネント設計 － DAY 36：フォーム総合演習
DAY 36：フォーム総合演習 前半 ― 簡易ユーザー登録アプリの全体像をつかむDAY 36では、これまで学んできた入力フォームControlled Componentフォーム送信バリデーション一覧表...
60日で身につけるReact モダンJavaScriptの基礎から始める挫折しないためのReact入門 60日コース | フォーム・コンポーネント設計 － DAY 35：バリデーション
DAY 35：バリデーション 前半 ― 「入力を信じない」ための基本4セットを身につけるDAY 35では、フォーム・コンポーネント設計の中でもとても重要なテーマであるバリデーションを扱います。 前半の...
60日で身につけるReact モダンJavaScriptの基礎から始める挫折しないためのReact入門 60日コース | フォーム・コンポーネント設計 － DAY 34：フォーム送信
DAY 34：フォーム送信 前半 ― 「form＋onSubmit＋preventDefault」の基本を体に入れるDAY 34の前半では、 form・onSubmit・preventDefault ...
60日で身につけるReact モダンJavaScriptの基礎から始める挫折しないためのReact入門 60日コース | フォーム・コンポーネント設計 － DAY 33：複数フォーム
DAY 33：複数フォーム 前半 ― 「項目が増えても怖くない」フォームの基本設計DAY 33の前半では、 名前・メール・年齢・textarea・select をまとめて扱う「複数フォーム」を題材に、...
60日で身につけるReact モダンJavaScriptの基礎から始める挫折しないためのReact入門 60日コース | フォーム・コンポーネント設計 － DAY 32：フォームとState
DAY 32：フォームとState 前半 ― 「入力が画面に届くまで」の流れを理解するDAY 32の前半では、 フォームとStateの関係を 1本の流れとしてイメージできるようになること を目標にしま...
60日で身につけるReact モダンJavaScriptの基礎から始める挫折しないためのReact入門 60日コース | フォーム・コンポーネント設計 － DAY 31：フォーム基礎
DAY 31：フォーム基礎 前半 ― 「input＋value＋onChange」でフォームの土台を作るDAY 31では、Reactにおけるフォームの一番基本となる考え方、 input・value・o...
60日で身につけるReact モダンJavaScriptの基礎から始める挫折しないためのReact入門 60日コース | Stateを使いこなす － DAY 30：State総合制作
DAY 30：State総合制作 前半 ― TODOアプリ Ver.1 を作りながら復習するDAY 30では、これまで学んできた State・配列・オブジェクト・map・filter・一部更新 を総動...
60日で身につけるReact モダンJavaScriptの基礎から始める挫折しないためのReact入門 60日コース | Stateを使いこなす － DAY 29：オブジェクトState
DAY 29：オブジェクトState 前半 ― 「1つのまとまりとして状態を持つ」感覚を身につけるDAY 29では、これまで配列Stateを中心に扱ってきた流れから一歩進んで、 「オブジェクトをSta...
60日で身につけるReact モダンJavaScriptの基礎から始める挫折しないためのReact入門 60日コース | Stateを使いこなす － DAY 28：Stateの更新
DAY 28：Stateの更新 前半 ― 「一部だけ変える」感覚を身につけるDAY 28では、Stateの中の 「一部だけを更新する」 ことにフォーカスして学習していきます。 これまで「追加」「削除」...
60日で身につけるReact モダンJavaScriptの基礎から始める挫折しないためのReact入門 60日コース | Stateを使いこなす － DAY 27：Stateから削除
DAY 27：Stateから削除 前半 ― 「消す」という操作でState更新の本質をつかむDAY 27では、これまで追加してきたStateから 「削除する」 ことにフォーカスして学習していきます。 ...
60日で身につけるReact モダンJavaScriptの基礎から始める挫折しないためのReact入門 60日コース | Stateを使いこなす － DAY 26：Stateへの追加
DAY 26：Stateへの追加 前半 ― 「入力したものが画面に並ぶ」までの一本の流れを作るDAY 26では、いよいよ 「入力 → State → 配列に追加 → map → 画面表示」 という、R...
60日で身につけるReact モダンJavaScriptの基礎から始める挫折しないためのReact入門 60日コース | Stateを使いこなす － DAY 25：配列State
DAY 25：配列State 前半 ― 「Stateで配列を扱う」ための土台を固めるDAY 25では、Reactでとてもよく使うのに、つまずきやすいテーマである 「配列をStateで管理する」ことを丁...
60日で身につけるReact モダンJavaScriptの基礎から始める挫折しないためのReact入門 60日コース | Stateを使いこなす － DAY 24：keyを理解する
DAY 24：keyを理解する 前半 ― 「Reactがリストをどう見ているか」を知るDAY 24では、Reactのリスト表示で必ず登場する key を深く理解していきます。 ここは、mapによるリス...
60日で身につけるReact モダンJavaScriptの基礎から始める挫折しないためのReact入門 60日コース | Stateを使いこなす － DAY 23：mapによるリスト表示
DAY 23：mapによるリスト表示 前半 ― 「配列を画面に変える」Reactの超重要テクニックDAY 23では、React学習の中でも特に重要なテーマである 「mapによるリスト表示」を扱います。...
60日で身につけるReact モダンJavaScriptの基礎から始める挫折しないためのReact入門 60日コース | Stateを使いこなす － DAY 22：条件付きレンダリング
DAY 22：条件付きレンダリング 前半 ― 「状態によって画面を変える」力を身につけるDAY 22では、Reactでとても重要な考え方である条件付きレンダリングを学びます。 ここからが「Stateを...
60日で身につけるReact モダンJavaScriptの基礎から始める挫折しないためのReact入門 60日コース | Stateを使いこなす － DAY 21：イベント処理
DAY 21：イベント処理 前半 ― 「クリックで動くReact」を理解する最重要ステップDAY 21では、Reactでユーザー操作を扱うためのイベント処理の基礎を集中的に学びます。 ここで理解する内...
60日で身につけるReact モダンJavaScriptの基礎から始める挫折しないためのReact入門 60日コース | Reactの基本 － DAY 20：React基礎総合演習
DAY 20：React基礎総合演習 前半 ― じゃんけんアプリで基礎を一気に使ってみるDAY 20の前半では、これまで学んできたReactの基礎をまとめて使うために、じゃんけんアプリを制作していきま...
60日で身につけるReact モダンJavaScriptの基礎から始める挫折しないためのReact入門 60日コース | Reactの基本 － DAY 19：State更新
DAY 19：State更新 前半 ― 「いろいろな値を安全に更新する」感覚を身につけるDAY 19では、前日までに学んだ useState を一歩進めて、Stateの更新パターンを整理していきます。...
60日で身につけるReact モダンJavaScriptの基礎から始める挫折しないためのReact入門 60日コース | Reactの基本 － DAY 18：useState入門
DAY 18：useState入門 前半 ― 「Reactが“動く”仕組みの入口」DAY 18では、Reactで最重要と言ってよい State（ステート） と、その代表的なフックである useStat...
60日で身につけるReact モダンJavaScriptの基礎から始める挫折しないためのReact入門 60日コース | Reactの基本 － DAY 17：Props実践
DAY 17：Props実践 前半 ― 「一歩進んだProps」でコンポーネントをもっと柔軟にするDAY 17では、DAY 16で学んだ基本的なProps（String / Number / Bool...
60日で身につけるReact モダンJavaScriptの基礎から始める挫折しないためのReact入門 60日コース | Reactの基本 － DAY 16：Props
DAY 16：Props 前半 ― 「コンポーネントにデータを渡す」感覚を身につけるDAY 16は、Reactの中でも特に重要なテーマである Props を扱います。 ここから、コンポーネントが「ただ...
60日で身につけるReact モダンJavaScriptの基礎から始める挫折しないためのReact入門 60日コース | Reactの基本 － DAY 15：コンポーネント分割
DAY 15：コンポーネント分割 前半 ― 「親と子で画面を組み立てる」考え方を身につけるDAY 15では、これまで学んできたコンポーネントを どう分割し、どう組み合わせるか に焦点を当てていきます。...
60日で身につけるReact モダンJavaScriptの基礎から始める挫折しないためのReact入門 60日コース | Reactの基本 － DAY 14：コンポーネント
DAY 14：コンポーネント 前半 ― 「UIを部品として扱う」感覚を身につけるDAY 14は、React入門60日コースの中でも特に重要な回になります。 ここで扱う コンポーネント の考え方は、Re...
60日で身につけるReact モダンJavaScriptの基礎から始める挫折しないためのReact入門 60日コース | Reactの基本 － DAY 13：JSX
DAY 13：JSX 前半 ― 「Reactの見た目を作る言語」を理解する入口に立つDAY 13では、Reactで画面を作るときに必ず登場する JSX について学んでいきます。 この前半のゴールは、次...
60日で身につけるReact モダンJavaScriptの基礎から始める挫折しないためのReact入門 60日コース | Reactの基本 － DAY 12：Reactとは
DAY 12：Reactとは 前半 ― 「画面を部品として考える」入り口に立つDAY 12では、いよいよ Reactそのものの考え方に入っていきます。 この前半のゴールは、次のキーワードを「ふわっと」...
60日で身につけるReact モダンJavaScriptの基礎から始める挫折しないためのReact入門 60日コース | Reactの基本 － DAY 11：React開発環境
DAY 11：React開発環境 前半 ― 「Reactを動かす土台」を理解する回DAY 11から、いよいよ React本体に入っていきます。 まずは「Reactを書く前に絶対に知っておきたい開発環境...
60日で身につけるReact モダンJavaScriptの基礎から始める挫折しないためのReact入門 60日コース | モダンJavaScript基礎 － DAY 10：JavaScript総合演習
Day 10：JavaScript総合演習で「商品データ管理プログラム」を作るDay 10は、ここまで学んできた 関数・配列・map・filter・オブジェクト・Spread構文 を総合的に組み合わせ...
60日で身につけるReact モダンJavaScriptの基礎から始める挫折しないためのReact入門 60日コース | モダンJavaScript基礎 － DAY 9：分割代入・Spread構文
Day 9：分割代入・Spread構文で「きれいに扱う＆安全にコピーする」を身につけるDay 9では、ReactのState更新でほぼ必須になる 分割代入 と Spread構文 を扱います。 ここをし...
60日で身につけるReact モダンJavaScriptの基礎から始める挫折しないためのReact入門 60日コース | モダンJavaScript基礎 － DAY 8：オブジェクト
Day 8：オブジェクトで「意味のあるデータ」を扱えるようになるDay 8では、JavaScriptでもReactでも超重要な オブジェクト を扱います。 配列が「ただの並び」だとしたら、オブジェクト...
60日で身につけるReact モダンJavaScriptの基礎から始める挫折しないためのReact入門 60日コース | モダンJavaScript基礎 － DAY 7：filter・find
Day 7：filter・findで「欲しいデータだけ」を取り出す力を身につけるDay 7では、Reactでもよく使われる filter() と find() を扱います。 どちらも「配列から条件に合...
60日で身につけるReact モダンJavaScriptの基礎から始める挫折しないためのReact入門 60日コース | モダンJavaScript基礎 － DAY 6：map
Day 6：mapで「配列を変換する力」を身につけるDay 6では、Reactではほぼ必須と言っていい map() を扱います。 map() を理解すると、「配列 → 別の形の配列」に変換する感覚がつ...
60日で身につけるReact モダンJavaScriptの基礎から始める挫折しないためのReact入門 60日コース | モダンJavaScript基礎 － DAY 5：配列
Day 5：配列で「たくさんのデータ」をまとめて扱うDay 5では、JavaScriptでとてもよく使う 配列（array） を扱います。 Reactでも「一覧表示」「リストレンダリング」などで毎回の...
60日で身につけるReact モダンJavaScriptの基礎から始める挫折しないためのReact入門 60日コース | モダンJavaScript基礎 － DAY 4：Arrow Function（アロー関数）
Day 4：Arrow Functionで「現代的な関数の書き方」に慣れるDay 4では、Reactでめちゃくちゃよく登場する Arrow Function（アロー関数） をじっくり見ていきます。 見...
60日で身につけるReact モダンJavaScriptの基礎から始める挫折しないためのReact入門 60日コース | モダンJavaScript基礎 － DAY 3：関数
Day 3：関数で「処理のまとまり」をつくるJavaScriptの世界で、関数はとても重要な存在です。 「同じような処理を何度も書いているな…」と感じたとき、それをスッキリ整理してくれるのが関数です。...
60日で身につけるReact モダンJavaScriptの基礎から始める挫折しないためのReact入門 60日コース | モダンJavaScript基礎 － DAY 2：constとlet
Day 2：constとletで「変数の基本」をしっかり押さえるJavaScriptでプログラムを書くうえで、いちばんよく登場するのが「変数」です。 Day 2では、この変数をモダンJavaScrip...
60日で身につけるReact モダンJavaScriptの基礎から始める挫折しないためのReact入門 60日コース | モダンJavaScript基礎 － DAY 1：JavaScriptとReactの関係
Day 1：JavaScriptとReactの関係をやさしく理解するWeb開発の世界に足を踏み入れると、まず名前だけはよく聞くのが「JavaScript」と「React」です。 でも、「結局この2つっ...
Docker Docker | 2週間で実務レベルに到達するDocker学習：仕上げ（本番意識） － Day14
Day14：仕上げ（本番意識）前半テーマ：他人が“迷わず・詰まらず・再現できる”環境を作るための README を書けるようになるDay14 の前半では、「自分が作った Docker 環境を、他の人が...
Docker Docker | 2週間で実務レベルに到達するDocker学習：実務課題（重要） － Day13
Day13：実務課題（前半）テーマ：React＋API＋MySQLという“よくある現場構成”を、頭の中でちゃんと描けるようになるDay13 は、ここまで学んできた Docker・Dockerfile・...
Docker Docker | 2週間で実務レベルに到達するDocker学習：ログ・デバッグ － Day12
Day12：ログ・デバッグ（前半）テーマ：コンテナの“中で何が起きているか”を読み取り、原因を突き止める力をつけるDay12 の前半では、Docker を使った障害対応の基本であるdocker log...
Docker Docker | 2週間で実務レベルに到達するDocker学習：本番用Dockerfile － Day11
Day11：本番用Dockerfile（前半）マルチステージビルドの前半で最も重要なのは「ビルド用の重い環境」と「本番用の軽い環境」を分けるという発想です。これによりイメージが軽量化し、安全性も向上し...
Docker Docker | 2週間で実務レベルに到達するDocker学習：ネットワーク理解 － Day10
Day10：ネットワーク理解（前半）テーマ：まず「localhostの正体」と「コンテナ同士のつながり方」を腹落ちさせるDay10 の前半では、コンテナ間通信と service 名での接続に入る前提と...
Docker Docker | 2週間で実務レベルに到達するDocker学習：環境変数と設定管理 － Day9
Day9：環境変数と設定管理 前半テーマ：.env を使って「環境ごとの差」を吸収し、どこでも同じアプリを動かせるようにするDay9 の前半では、Docker 実務で必須となる環境変数（Environ...
Docker Docker | 2週間で実務レベルに到達するDocker学習：Docker Compose入門 － Day8
Day8：Docker Compose入門 前半テーマ：複数コンテナを「1つのアプリ」として扱う感覚をつかむまずは、今日のキーワードである Docker Compose が何者なのかを、イメージからつ...
Docker Docker | 2週間で実務レベルに到達するDocker学習：1週間まとめ（ミニ課題） － Day7
Day7：1週間まとめミニ課題の全体像Day7は「知識をバラバラで終わらせず、一本の線にする日」です。テーマは Node.js のAPIサーバを「完全にDocker化」すること。ここまで学んだ Doc...
Docker Docker | 2週間で実務レベルに到達するDocker学習：データ永続化（ボリューム） － Day6
Day6：データ永続化（ボリューム）前半テーマ：コンテナを消してもデータが残る“ボリューム”の本質を理解するDay6 の前半では、Docker の中でも実務で最重要の概念「データ永続化（ボリューム）」...
Docker Docker | 2週間で実務レベルに到達するDocker学習：開発効率化（マウント） － Day5
Day5：開発効率化（マウント）前半前半の核心は「マウント＝ホストのフォルダをコンテナに映し込み、コード変更を即反映させる仕組み」であることです。ホットリロードの土台になる重要概念です。テーマ：マウン...
Docker Docker | 2週間で実務レベルに到達するDocker学習：Dockerfile入門（最重要） － Day4
Day4：Dockerfile入門（最重要）前半テーマ：自分のアプリを“誰でも動かせる形”にするための Dockerfile の基礎を理解するDay4 の前半では、Docker 学習の中でも最重要テー...
Docker Docker | 2週間で実務レベルに到達するDocker学習：Webサーバ起動（実務の入口） － Day3
DDay3：Webサーバ起動（実務の入口）前半テーマ：ポートフォワーディングを“感覚で理解する”Day3 の前半では、Docker を使って nginx（Webサーバ）を起動し、外部からアクセスできる...
Docker Docker | 2週間で実務レベルに到達するDocker学習：基本コマンド完全習得 － Day2
Day2：基本コマンド完全習得（前半）前半では、Docker の「基本コマンド」を “意味から理解する” ことを目的にします。単にコマンドを覚えるのではなく、コンテナのライフサイクル（生まれる → 動...
Docker Docker | 2週間で実務レベルに到達するDocker学習：Dockerの全体理解と導入 － Day1
Day1：Dockerの全体理解と導入（前半）Dockerとは「アプリを入れるための小さな箱（コンテナ）を、設計図（イメージ）から作って動かす技術」であることを前半で理解するのがゴールです。Docke...
Next.js Next.jsで学ぶReact講座 | Reactの基本操作 – 入力した文字をそのまま画面にリアルタイム表示するフォーム
このテーマのゴールここで目指すのは、「入力欄に打ち込んだ文字が、そのままリアルタイムで画面に表示されるコンポーネント」を自分で作れるようになることです。これは一見シンプルですが、React でフォーム...
Next.js Next.jsで学ぶReact講座 | Reactの基本操作 – ボタンを押すと「表示／非表示」が切り替わるテキスト
このテーマのゴールここで身につけたいのは、「ボタンを押すとテキストが表示されたり消えたりする」コンポーネントを自分で作れるようになることです。この小さな動きの中に、React の重要ポイントがぎゅっと...
Next.js Next.jsで学ぶReact講座 | Reactの基本操作 – ボタンを押すと増えるカウンター
このテーマのゴールここでやりたいのは、「ボタンを押すと数字が増える」カウンターコンポーネントを通して、React の state とイベント処理の超基本を体で覚えることです。画面に数字が表示されていて...
Next.js Next.jsで学ぶReact講座 | Reactの基本操作 – 金額と税率を受け取って税込み価格を出すコンポーネント
このテーマのゴールここでやりたいのは、「金額」と「税率」を props で受け取り、コンポーネントの中で計算して「税込み価格」を表示することです。つまり、「見た目＋計算ロジック」をひとつの部品としてま...
Next.js Next.jsで学ぶReact講座 | Reactの基本操作 – 名前だけを変えて挨拶するコンポーネント
このテーマのゴールここでやりたいのは、「カード」という“部品”を1つ作って、タイトルと本文だけ差し替えて何度も使えるようにすることです。前の「名前だけ変えて挨拶」と同じ発想ですが、もう少し“実際のアプ...
Next.js Next.jsで学ぶReact講座 | Reactの基本操作 – 名前だけを変えて挨拶するコンポーネント
このテーマのゴール「名前だけを変えて挨拶するコンポーネント」は、React の いちばん基本的な“部品の考え方” をつかむための題材です。同じ「挨拶」という見た目・構造を使い回しつつ、「名前だけを変え...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日）演習問題・課題 | 第5章：仕上げ – 振り返り
この課題のねらいここは「学びをちゃんと自分のものにする」ための仕上げです。コードを書くことでもう一段うまくなりますが、振り返って言葉にすることでしか伸びない力もあります。自分が「何ができるようになった...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日）演習問題・課題 | 第5章：仕上げ – 最終アプリ実装
この課題のねらいここはいよいよ「全部つなげて、自分のアプリを最後まで作り切る」フェーズです。やることはシンプルで強いです。実装を最後までやり切る出てきたバグを自分で直す余力で UI を少しだけ“気持ち...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日）演習問題・課題 | 第5章：仕上げ – 最終アプリ設計
この課題のねらいここはいよいよ「自分のアプリをちゃんと設計する」フェーズです。コードを書く前に、仕様・ページ構成・ワイヤーフレームを言葉と簡単な図でまとめられるようになると、実装が一気にスムーズになり...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日）演習問題・課題 | 第5章：仕上げ – 設計練習
この課題のねらいここはいよいよ「コードを書く前に、頭と手で設計する」練習です。いきなりエディタを開かずに、紙とペンで画面構成・コンポーネント・state を考えられるようになると、バグも迷いも一気に減...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日）演習問題・課題 | 第5章：仕上げ – TypeScript
この課題のねらいここは「なんとなく動く React」から「型で守られた React」にステップアップするところです。TypeScript をちゃんと使えるようになると、props の渡し間違いstat...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日）演習問題・課題 | 第5章：仕上げ – デバッグ
この課題のねらいここは「React を書ける人」から「バグを直せる人」に変わる仕上げのステップです。どんなに上手いエンジニアでも、バグゼロで書くことはほぼありません。大事なのは「バグを出さないこと」で...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日）演習問題・課題 | 第4章：実用的React – ミニアプリ③
この課題のねらいここはいよいよ「実用的 React」の集大成です。テーマはミニ TODO アプリ──追加・削除・完了状態管理までを、自分の手で通しで作ること。state 設計親子コンポーネントと pr...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日）演習問題・課題 | 第4章：実用的React – 状態設計
この課題のねらいここは「React を“なんとなく書ける”から、“設計して書ける”に変わる」ポイントです。テーマは 状態設計（state をどこに持つか）。コンポーネントを増やしていくと必ずぶつかるの...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日）演習問題・課題 | 第4章：実用的React – フォーム
この課題のねらいここでは「フォーム入力をちゃんと React で扱う」ことがテーマです。キーワードは、state・onChange・onSubmit・バリデーション（入力チェック）。最終的に、「ユーザ...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日）演習問題・課題 | 第4章：実用的React – UX対応
この課題のねらいここは「ただ動くアプリ」から「ちゃんと気配りされたアプリ」に一段上げるところです。テーマは UX（ユーザー体験）対応──つまり、ローディング中に何も出さない“無言の時間”をなくすエラー...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日）演習問題・課題 | 第4章：実用的React – データ取得
この課題のねらいここはいよいよ「実用的 React」のど真ん中です。テーマは「API からデータを取ってきて、画面に表示する」という超・現場的な流れ。fetch でデータを取得する取得したデータを s...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日）演習問題・課題 | 第4章：実用的React – useEffect
この課題のねらいここからが「実用的な React」に一気に近づくところです。テーマは useEffect──「画面に表示する以外の処理（＝副作用）」を、いつ・どのタイミングで実行するかをコントロールす...
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 コン...
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章：仕上げと次の一歩 – 簡単な設計練習
設計練習って何をやる時間かここまで、コードの書き方そのものはかなり身についてきています。でも実務に近づくと、いきなり「この画面作って」と言われます。つまり、「何をどう書くか」の前に、「どう分解して考え...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日） | 第5章：仕上げと次の一歩 – TypeScript超入門（必要最低限）
この章でやる「TypeScript超入門」のゴールここでは、Next.js × React を「実務に耐えるレベル」にぐっと近づけるために、TypeScript の必要最低限だけを押さえます。やること...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日） | 第5章：仕上げと次の一歩 – エラーメッセージの読み方
エラーは「敵」じゃなくて「ヒント」ここまで来ると、もうあなたは「Next.js × React でアプリを作れる人」です。ここから先で一番“差”がつくのは、エラーが出たときにどう向き合うかです。エラー...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日） | 第4章：実用的React – ミニアプリ③
ここで作るTODOアプリのゴールここまでで、state・props・イベント・フォーム・配列表示・状態設計など、React / Next.js の「部品」は一通り触ってきました。ここではそれを全部まと...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日） | 第4章：実用的React – 状態設計の考え方
状態設計の全体イメージReact / Next.js を「とりあえず動かす」ところから一歩進むと、必ずぶつかるのが「状態（state）をどこに持つか問題」です。コンポーネントを分割すればするほど、どこ...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日） | 第4章：実用的React – フォーム処理
フォーム処理の全体イメージReact / Next.js で「実用的なアプリ」を作ろうとすると、必ず出てくるのがフォームです。ログインフォーム、問い合わせフォーム、検索フォーム、プロフィール編集画面…...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日） | 第4章：実用的React – ローディング・エラー処理
ローディング・エラー処理がなぜ「実務で必須」なのかアプリが「ちゃんと動く」ことと、「ちゃんと使える」ことは別物です。API からデータを取ってくるような画面では、必ずこういう瞬間が生まれます。データを...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日） | 第4章：実用的React – データ取得（fetch）
APIとは何か「データください」をお願いするための窓口React / Next.js で「データを画面に表示したい」とき、どこかからデータを「取ってくる」必要があります。そのときに話に出てくるのが A...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日） | 第4章：実用的React – useEffect入門
useEffectとは「画面の変化に合わせて“副作用”を実行する仕組み」ここまで扱ってきた useState は、「値（状態）を覚えておく仕組み」でした。useEffect は、それとは別の役割を持っ...
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 らしさ」がグッと出てくるところ――ページ遷移と複数ペー...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日） | 第2章：Reactの基本操作 – 簡単なミニアプリ①
簡単なミニアプリを作る理由ここまで、React の「部品」を一通り見てきました。JSXコンポーネントpropsuseState（状態管理）イベント処理条件分岐配列と mapコンポーネント分割いよいよ、...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日） | 第2章：Reactの基本操作 – コンポーネント分割
コンポーネント分割とはコンポーネント分割は、ざっくり言うと「画面を小さな部品に分解して、意味のある単位ごとに整理すること」です。ひとつのコンポーネントの中に、ヘッダーも、メインも、フッターも、ボタンも...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日） | 第2章：Reactの基本操作 – 配列の表示（map）
配列の表示（map）とはReact では、「同じ形のデータがたくさんある」ときに、それをまとめて画面に並べることがとても多いです。例えば、Todoリスト・商品一覧・コメント一覧などは、まさに「配列を画...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日） | 第2章：Reactの基本操作 – 条件分岐表示
条件分岐表示とは「状況に応じて表示内容を変える」ための仕組みReact では、画面に表示する内容を 状態（state） に応じて切り替えることがよくあります。例えば、ログインしているときだけユーザー名...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日） | 第2章：Reactの基本操作 – イベント処理
イベント処理とはイベント処理は、「ユーザーの操作に反応して、何かを実行するしくみ」です。ボタンをクリックしたり、入力フォームに文字を打ったり、Enterキーを押したり――これらはすべて「イベント」です...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日） | 第2章：Reactの基本操作 – useState（状態管理）
stateとは「時間とともに変わる値」を扱うための仕組みReact でいう state（ステート）は、ひと言でいうと「画面の中で変わる値」です。逆に言うと、「一度決めたら変わらないもの」は state...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日） | 第2章：Reactの基本操作 – props（データの受け渡し）
propsとは何か「コンポーネントに渡す“引数”のようなもの」props（プロップス）は、React コンポーネントに渡す「データの入れ物」です。少しプログラミング寄りに言うと、「コンポーネント版の関...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日） | 第1章：準備と超基礎 – Reactコンポーネントの基本
コンポーネントとは「画面を小さな部品に分けて再利用する考え方」コンポーネントは、ひと言でいうと「画面の部品」です。もっと言うと、「ある見た目と振る舞いをひとつのまとまりとして名前をつけたもの」です。例...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日） | 第1章：準備と超基礎 – JSXとは何か
JSXとは何か「JavaScriptの中でHTMLっぽく書ける特別な文法」JSX は、React で画面を作るときに使う「JavaScript拡張文法」です。ぱっと見は HTML にそっくりですが、正...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日） | 第1章：準備と超基礎 – Next.jsのフォルダ構造
Next.js のフォルダ構造の全体イメージNext.js は「フォルダの構造 ＝ URL の構造」という、かなり直感的な仕組みを持っています。特に新しい App Router（app ディレクトリ）...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日） | 第1章：準備と超基礎 – 開発環境の準備
Node.jsとは「ブラウザの外で動くJavaScriptエンジン」JavaScript はもともと「ブラウザの中で動く言語」でした。Node.js は、その JavaScript を「パソコンの中（...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日） | 第1章：準備と超基礎 – React / Next.js とは何か
プログラミング初心者向けに、できるだけ専門用語をかみ砕いて、「React」と「Next.js」の世界をゆっくり案内していきます。ただ知識として覚えるだけでなく、「自分なら何を作れるかな？」と想像しなが...
JavaScript JavaScript 逆引き集 | filter で条件抽出
JavaScript配列の条件抽出（filter）の基本と実践「条件に合う要素だけを取り出して新しい配列を作りたい」なら、filterが最短で安全。元の配列は変えず、判定関数がtrueを返した要素だけ...
JavaScript JavaScript 逆引き集 | map で配列変換
JavaScript配列変換（map）の基本と実践「配列の各要素を加工して、新しい配列を作りたい」なら map が最短ルート。元の配列には触れず、処理結果だけを返してくれるので、初心者でも安全に“変換...
JavaScript JavaScript 逆引き集 | 配列のループ（forEach）
JavaScript配列のループ（forEach）の基本と実践「配列の全要素に同じ処理をサッと当てたい」なら、forEachがいちばん手軽。カウンターや終了条件を意識せず、読みやすく安全に“全件処理”...
JavaScript JavaScript 逆引き集 | 配列のループ（for…of）
JavaScript配列のループ（for...of）の基本と実践最初は「インデックスって必要？」と迷うかもしれないけれど、値だけ順に扱いたいなら for...of がいちばん素直で読みやすい。配列から...
JavaScript JavaScript 逆引き集 | 配列のループ（for）
JavaScript配列のループ（for）の基本と実践最初の一歩って、つまずきやすい。でも「for」は味方。配列を順番に処理するためのいちばん素直なやり方で、仕組みがわかると一気に視界が開けます。ここ...
React React/Vue | Reactなどのフレームワークでの this とアロー関数の使われ方
では「Reactなどのフレームワークでの this とアロー関数の使われ方」を整理してみましょう。ReactはJavaScriptクラスや関数を多用するので、this の扱いが特に重要になります。⚛️...
JavaScript JavaScript | クラス内でアロー関数を使う理由
クラスの中でアロー関数を使う理由は、主に this の扱い にあります。初心者がよくつまずくポイントなので、例を交えて整理しますね。通常のメソッドとアロー関数の違い通常のメソッドclass Count...
JavaScript JavaScript | アロー関数とbindの違い
アロー関数とbindの違いを初心者向けに解説JavaScriptで「thisが思った通りにならない！」というときによく出てくるのが アロー関数 と bind。どちらも「thisを固定する」ために使われ...