Reactフロントエンド開発入門

このサイトの目的

Web（World Wide Web。インターネット上で情報を共有する仕組み）フロントエンド（ユーザーが直接目にする部分）を開発するのに必要な知識をあなたに提供して、Webフロントエンド開発が始められる状態にすることです。

とりわけ、フロントエンドで重要な要素であるUI（ユーザーインターフェイス。利用者とシステムが相互に作用するための境界）を開発するライブラリであるReactを中心に扱います。

このサイトの使い方

今あなたが閲覧しているこのページが、このサイトのトップページです。ページには順序があり、サイドメニューが表示される環境では、上から下に向かってページの順序が構成されています。また、このページの下にある「次へ」のページリンクも同じ順序で構成されています。

Webフロントエンド開発を学ぶうえで適当な順序になるように構成していますが、すでに部分的に知識がある場合や、復習する場合などでは、好きな順番でページを閲覧しても構いません。

このサイトではReactコミュニティの学習コンテンツを活用しているので、リンクが示されている場合には、そのリンクを開いて読み進めてください。

このサイトのページにせよ、https://ja.react.dev/ にせよ、たくさんのコード（実行する処理の文字列）やサンプルが出てきます。それらは読むだけではピンとこないこともあるでしょう。そんなときのために、「コードが説明どおりに動くのか？」「コードをこんな風に変えたらどうなるのか？」を実際に自分で書いて、確かめられるプレイグラウンドを提供しています。

プレイグラウンドの使い方

プレイグラウンドは、コードの状態をURL（インターネット上の情報の在り処を示す文字列）に保存しています。例えば、次のように:

https://playground.lyceum-js.tuqulore.com/#eJyFVFFvG0UQ_ivLIktJ5LuLmzQkztnCblypiKq...

左側にコードを書くテキストエリアがあり、右側に実行結果が表示されます。テキストエリアの内容を変更すると、URLが変わります。このURLは、お手元にあるメモ帳などのテキストエディターに保存しておくと、あとで見返すことができます。また、「こんなものがつくれた！」と他人に共有することもできますし、うまくコードが動かないときに、より経験のある人にどこが動かないか診てもらうこともできます。

ウィンドウ（窓。あなたが今このページを見ている四角形の領域は窓のひとつ）の左下をよく見ると、「Open File Explorer」ボタンがあります。ここから、ファイル（データのまとまり）を追加したり、削除したり、編集するファイルを切り替えることもできます。