このサイトについて

React Guideは、React開発の最新情報と、AIを使いながら学ぶ実習を届ける日本語サイトです。AIに実装や修正を任せながら、state・props・Effectなどの知識を自分にも残すことを目指します。作りたい仕様を決め、AIが生成したコードとの対応を読み解き、変更を依頼する実習を用意しています。

このサイトの使い方

最新情報では、公式発表の要点と開発・学習での確認ポイントを紹介します。発表日と当サイトへの掲載日を分けて表示します。

まずはAIと検索アプリを作る学習コースへ。AIへの依頼、生成コードの実行、Reactの読み解き、機能追加の順に、ひとつのアプリで学びます。自分が使っているAIに依頼文を渡して進めます。

学習中に調べたいことが出てきたら、参考書を使ってください。環境構築、Reactの基礎、Hooksの解説と実験をまとめています。

Reactを専門にする理由

対象は、Reactで作っていて仕組みも理解したい人です。stateによる表示の更新、propsを渡す責務、keyによる同一性、Effectによる外部との同期を、実際の画面と結びつけて学びます。Reactを学ぶべきだと全員に勧めるのではなく、Reactを学びたい人へ、AIを使いながら理解を確かめる方法を提供します。

教材検索の制作・検証記録では、実装の選択と自動テストの結果を掲載します。人による実機確認・読者による評価とは区別し、行っていない検証を済んだものとして扱いません。

理解をどう確かめるか

実習では、選んだ仕様に必要な値とイベントを説明し、仕様を変えるなら何を変更するか考えます。実験室ではコードの違いによる結果を比較します。解答を見たりAIへ質問したりして構いません。正解を読んだ直後の納得と、後で自分で考えられることを区別します。この教材による長期的な学習効果は、まだ検証できていません。

運営・連絡先

制作・公開・訂正の窓口は「React Guide 運営者」です。連絡先は protoparquedevelop@gmail.com。記事の誤り、掲載内容、サイトの不具合はお問い合わせページで受け付けています。

りこ・たけるなど記事中の人物は説明のための架空のキャラクターです。会話は教材として構成したもので、実在する専門家への取材や推薦を表すものではありません。当サイトはReactの公式サイトではありません。

制作方針と検証範囲

文章・翻訳・コード・キャラクターの挿絵の制作には生成AIを使用します。記事の会話や例示は、著者の実体験・実測結果を証明するものではありません。仕様を確認するときは、記事に挙げた公式資料と、利用しているバージョンを併せて確認してください。

  • 説明用の抜粋と、貼り付けて試せる完成コードを区別します。APIやバックエンドが必要な例では、その前提を記載します。
  • 実験的APIと安定版を区別します。外部サービスや導入コマンドは、公開後に変更されることがあります。
  • 検証済みと記載する場合は、その教材の検証対象と条件を示します。サイトのビルド成功は、すべての記事のコードを検証したことを意味しません。
  • 意味のある内容変更には更新日を付けます。更新日は、全記事の正確性を一括で保証する日付ではありません。

訂正の扱い

再現に必要な情報があると、説明と動作の違いを確認しやすくなります。記事URL、該当箇所、期待した動作、実際のエラー、ReactやNode.jsのバージョンをお知らせください。パスワードやAPIキーなどの秘密情報は送らないでください。

確認できた誤りは本文に反映し、重要な変更は記事内に訂正内容を残します。現在、全過去記事のサンプルを一括で実行検証しているわけではありません。

広告と学習コンテンツ

教材は無料で閲覧できます。広告を掲載する場合は本文や操作ボタンと区別します。広告サービスとアクセス解析についてはプライバシーポリシーをご覧ください。