React

こんにちは、かつコーチです。前回はリスト表示とkey属性の重要性について解説しました。今回は、Reactでの開発において避けて通れない「フォーム」の作り方を扱います。ログイン画面や検索窓、お問い合わせフォームなど、ユーザーの入力を受け取る場...

こんにちは、かつコーチです。前回は条件分岐レンダリングのパターンを紹介しました。今回は、Reactアプリでほぼ必ず登場する「配列データを一覧表示する」方法を扱います。セットで必要になる key 属性についても、なぜ必要なのかをきちんと理解し...

こんにちは、かつコーチです。前回はイベントハンドリングを使って、ユーザー操作から状態を更新する方法を解説しました。状態が扱えるようになると、次に欲しくなるのが「状態によって表示を切り替える」機能です。ログイン状態によってボタンを出し分けたり...

こんにちは、かつコーチです。前回は useState を使って、コンポーネントに状態を持たせる方法を解説しました。状態を更新するには、ボタンを押す・文字を入力するといった「ユーザー操作」をきっかけにする必要があります。今回は、そのきっかけを...

こんにちは、かつコーチです。前回はPropsを使って、親から子へ値を渡す方法を解説しました。ただ、Propsだけでは「コンポーネント自身が持つ、変化する値」を扱うことはできません。たとえばボタンを押すたびに数字が増えるカウンターのような機能...

こんにちは、かつコーチです。前回は仮想DOMの仕組みを見ながら、Reactがなぜ速いのかを解説しました。今回は、React学習で最初につまずきやすいポイントの一つ「Props」を扱います。コンポーネントに値を渡すための仕組みなのですが、最初...

こんにちは、かつコーチです。前回はコンポーネントの作り方を解説しました。今回は少し視点を変えて、「Reactはなぜサクサク動くのか」という仕組みの話をしていきます。キーワードは仮想DOMです。やや中級者向けの内容にはなりますが、この後Pro...

こんにちは、かつコーチです。前回はJSXの基本的な書き方を解説しました。今回は、Reactの一番の核となる考え方である「コンポーネント」について、実際に手を動かしながら理解していきましょう。コンポーネントとは？UIを構成する「部品」の単位コ...

こんにちは、かつコーチです。前回はViteを使ってReactの開発環境を作りました。src/App.tsxを開くと、HTMLのようなタグがJavaScriptの中に書かれていて、「これは一体何の記法なんだろう」と感じた人もいるはずです。今回...

こんにちは、かつコーチです。前回は、Reactが「UIを部品化するライブラリ」であることを解説しました。今回は、実際に自分のパソコンでReactを動かせるようにする「環境構築」をやっていきます。環境構築は最初のハードルになりがちですが、今の...

こんにちは、かつコーチです。TypeScript基礎編、25記事お疲れさまでした。型注釈、インターフェース、ジェネリクス、そして既存プロジェクトの移行方法まで、盛りだくさんの内容を走り抜けてきましたね。ここからはいよいよ「React編」のス...