60日で身につけるReact

DAY 40：コンポーネント設計演習 前半 ― TODOアプリを4つのコンポーネントに分割するDAY 40の前半では、DAY 30で作成したシンプルなTODOアプリを題材にして、 コンポーネント分割の...

DAY 38：Stateはどこに置くか 前半 ― 「状態の居場所」を意識して設計するDAY 38では、フォーム・コンポーネント設計の中でもとても重要なテーマである 「Stateはどこに置くか」について...

DAY 37：コンポーネント設計 前半 ― 「責務」を軸に考える練習を始めるDAY 37は、フォームだけでなくReactアプリ全体の設計力に関わる、とても重要な回になります。 ここでは次の4つをテーマ...

DAY 36：フォーム総合演習 前半 ― 簡易ユーザー登録アプリの全体像をつかむDAY 36では、これまで学んできた入力フォームControlled Componentフォーム送信バリデーション一覧表...

DAY 35：バリデーション 前半 ― 「入力を信じない」ための基本4セットを身につけるDAY 35では、フォーム・コンポーネント設計の中でもとても重要なテーマであるバリデーションを扱います。 前半の...

DAY 34：フォーム送信 前半 ― 「form＋onSubmit＋preventDefault」の基本を体に入れるDAY 34の前半では、 form・onSubmit・preventDefault ...

DAY 33：複数フォーム 前半 ― 「項目が増えても怖くない」フォームの基本設計DAY 33の前半では、 名前・メール・年齢・textarea・select をまとめて扱う「複数フォーム」を題材に、...

DAY 32：フォームとState 前半 ― 「入力が画面に届くまで」の流れを理解するDAY 32の前半では、 フォームとStateの関係を 1本の流れとしてイメージできるようになること を目標にしま...

DAY 31：フォーム基礎 前半 ― 「input＋value＋onChange」でフォームの土台を作るDAY 31では、Reactにおけるフォームの一番基本となる考え方、 input・value・o...

DAY 30：State総合制作 前半 ― TODOアプリ Ver.1 を作りながら復習するDAY 30では、これまで学んできた State・配列・オブジェクト・map・filter・一部更新 を総動...

DAY 29：オブジェクトState 前半 ― 「1つのまとまりとして状態を持つ」感覚を身につけるDAY 29では、これまで配列Stateを中心に扱ってきた流れから一歩進んで、 「オブジェクトをSta...

DAY 28：Stateの更新 前半 ― 「一部だけ変える」感覚を身につけるDAY 28では、Stateの中の 「一部だけを更新する」 ことにフォーカスして学習していきます。 これまで「追加」「削除」...

DAY 27：Stateから削除 前半 ― 「消す」という操作でState更新の本質をつかむDAY 27では、これまで追加してきたStateから 「削除する」 ことにフォーカスして学習していきます。 ...

DAY 26：Stateへの追加 前半 ― 「入力したものが画面に並ぶ」までの一本の流れを作るDAY 26では、いよいよ 「入力 → State → 配列に追加 → map → 画面表示」 という、R...

DAY 25：配列State 前半 ― 「Stateで配列を扱う」ための土台を固めるDAY 25では、Reactでとてもよく使うのに、つまずきやすいテーマである 「配列をStateで管理する」ことを丁...

DAY 24：keyを理解する 前半 ― 「Reactがリストをどう見ているか」を知るDAY 24では、Reactのリスト表示で必ず登場する key を深く理解していきます。 ここは、mapによるリス...

DAY 23：mapによるリスト表示 前半 ― 「配列を画面に変える」Reactの超重要テクニックDAY 23では、React学習の中でも特に重要なテーマである 「mapによるリスト表示」を扱います。...

DAY 22：条件付きレンダリング 前半 ― 「状態によって画面を変える」力を身につけるDAY 22では、Reactでとても重要な考え方である条件付きレンダリングを学びます。 ここからが「Stateを...

DAY 21：イベント処理 前半 ― 「クリックで動くReact」を理解する最重要ステップDAY 21では、Reactでユーザー操作を扱うためのイベント処理の基礎を集中的に学びます。 ここで理解する内...

DAY 20：React基礎総合演習 前半 ― じゃんけんアプリで基礎を一気に使ってみるDAY 20の前半では、これまで学んできたReactの基礎をまとめて使うために、じゃんけんアプリを制作していきま...

DAY 19：State更新 前半 ― 「いろいろな値を安全に更新する」感覚を身につけるDAY 19では、前日までに学んだ useState を一歩進めて、Stateの更新パターンを整理していきます。...

DAY 18：useState入門 前半 ― 「Reactが“動く”仕組みの入口」DAY 18では、Reactで最重要と言ってよい State（ステート） と、その代表的なフックである useStat...

DAY 17：Props実践 前半 ― 「一歩進んだProps」でコンポーネントをもっと柔軟にするDAY 17では、DAY 16で学んだ基本的なProps（String / Number / Bool...

DAY 16：Props 前半 ― 「コンポーネントにデータを渡す」感覚を身につけるDAY 16は、Reactの中でも特に重要なテーマである Props を扱います。 ここから、コンポーネントが「ただ...

DAY 15：コンポーネント分割 前半 ― 「親と子で画面を組み立てる」考え方を身につけるDAY 15では、これまで学んできたコンポーネントを どう分割し、どう組み合わせるか に焦点を当てていきます。...

DAY 14：コンポーネント 前半 ― 「UIを部品として扱う」感覚を身につけるDAY 14は、React入門60日コースの中でも特に重要な回になります。 ここで扱う コンポーネント の考え方は、Re...

DAY 13：JSX 前半 ― 「Reactの見た目を作る言語」を理解する入口に立つDAY 13では、Reactで画面を作るときに必ず登場する JSX について学んでいきます。 この前半のゴールは、次...

DAY 12：Reactとは 前半 ― 「画面を部品として考える」入り口に立つDAY 12では、いよいよ Reactそのものの考え方に入っていきます。 この前半のゴールは、次のキーワードを「ふわっと」...

DAY 11：React開発環境 前半 ― 「Reactを動かす土台」を理解する回DAY 11から、いよいよ React本体に入っていきます。 まずは「Reactを書く前に絶対に知っておきたい開発環境...

Day 9：分割代入・Spread構文で「きれいに扱う＆安全にコピーする」を身につけるDay 9では、ReactのState更新でほぼ必須になる 分割代入 と Spread構文 を扱います。 ここをし...

Day 8：オブジェクトで「意味のあるデータ」を扱えるようになるDay 8では、JavaScriptでもReactでも超重要な オブジェクト を扱います。 配列が「ただの並び」だとしたら、オブジェクト...

Day 7：filter・findで「欲しいデータだけ」を取り出す力を身につけるDay 7では、Reactでもよく使われる filter() と find() を扱います。 どちらも「配列から条件に合...

Day 6：mapで「配列を変換する力」を身につけるDay 6では、Reactではほぼ必須と言っていい map() を扱います。 map() を理解すると、「配列 → 別の形の配列」に変換する感覚がつ...

Day 5：配列で「たくさんのデータ」をまとめて扱うDay 5では、JavaScriptでとてもよく使う 配列（array） を扱います。 Reactでも「一覧表示」「リストレンダリング」などで毎回の...

Day 4：Arrow Functionで「現代的な関数の書き方」に慣れるDay 4では、Reactでめちゃくちゃよく登場する Arrow Function（アロー関数） をじっくり見ていきます。 見...

Day 3：関数で「処理のまとまり」をつくるJavaScriptの世界で、関数はとても重要な存在です。 「同じような処理を何度も書いているな…」と感じたとき、それをスッキリ整理してくれるのが関数です。...

Day 2：constとletで「変数の基本」をしっかり押さえるJavaScriptでプログラムを書くうえで、いちばんよく登場するのが「変数」です。 Day 2では、この変数をモダンJavaScrip...

Day 1：JavaScriptとReactの関係をやさしく理解するWeb開発の世界に足を踏み入れると、まず名前だけはよく聞くのが「JavaScript」と「React」です。 でも、「結局この2つっ...