JavaScript
JavaScript | 1 日 90 分 × 7 日アプリ学習：強化版カウンターアプリ（初級編）
React
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 で ...