１課の技術書　React基礎用語について

こんにちは。mituです。

4月になり暦上では春になりましたが、朝はまだ肌寒い日もありますね。
お昼等の暖かい日は日向ぼっこやピクニックなどしてみても気持ちよさそうですね。

さて、前回のブログではreactを使用して入れ子構造のページを作成する方法を紹介しました。
今回は、実装部分から少し離れてreactで頻出する基本的な用語である以下3つを解説していきます!

・コンポーネント
・props
・useState

用語の説明していく前に、説明で使用するコンポーネントを以下に記載しておきます。

・App
・Greeting

それぞれのコンポーネントについて簡単に説明すると、Appコンポーネントは画面にコンポーネントを表示するための役割を持っています。一方Greetingコンポーネントは「こんにちは」＋変数で定義した名前＋「さん」という表示内容を定義しています。

では、さっそく用語について説明していきます!

▼ コンポーネントとは？

コンポーネントについて話す前にWebサイトの作り方の歴史について少し触れておきます。
昔はボタンや文章など画面の見た目部分を先に作り、その後でボタンを押したら画面遷移やデータが送信されるなどの動きがある処理をJavaScriptで追加するという流れでWebサイトが作られるのが一般的でした。
最近のWebサイトはボタンを押したときの動きなどユーザーの操作に反応する仕組みがとても重要です。

Reactでは、画面の見た目と動きをまとめた再利用可能な部品をコンポーネントと呼びます。
例えば、ボタンや入力フォームなど、画面の一部分を部品として作り、それらを組み合わせて画面を作ります。
部品として作っておくことで、同じUIを何度も作る必要がなくなり、コードの記述量が減り、他の画面でも再利用することができるようになります。

Reactの公式サイトではコンポーネントについて次のように説明されています。

React コンポーネントとは、マークアップを添えることができるJavaScript関数です。
引用:コンポーネントの定義について

ここで言うマークアップとは、画面にどんな要素を表示するかをタグ形式で書くコードをさしています。
例えば、次のような<h1>や<button>などがマークアップです。
尚、<h1>は見出しで<button>はボタン要素をさします。

<h1>タイトル</h1>
<button>次へ</button>

このようにタグを使って、画面の内容を書くHTMLというマークアップ言語があります。

Reactでは、このマークアップをjsxという記法を用いて記述します。
jsxはHTMLに似た見た目ですが、JavaScriptの中でUIを記述することができ、JavaScriptの値や処理を埋め込むことができるのが特徴です。

例えば、次のようなコンポーネントがあります。

export default function Greeting() {
  const name = "佐藤";
  return <h1>こんにちは{name}さん</h1>;
}

Greetingはコンポーネントの名前で、Reactでは、コンポーネント名は大文字にする必要があります。

上記のコードでは、Greetingというコンポーネントが、「こんにちは{name}さん」という見出しを表示するUIを定義しています。

こんにちは{name}さんの部分がjsxで、{name}のようにJavaScriptの値を埋め込むことができるのが特徴です。

この例では、名前をコンポーネント内で定義していますが、外から値を渡す仕組みがpropsです。

▼ propsとは？

propsとは一言で言うとコンポーネントにデータを渡すための仕組みのことです。
基本的に、親コンポーネントから子コンポーネントにデータが渡されます。

props は HTML の属性と似ていると思われるかもしれませんが、
props ではオブジェクトや配列、関数などのあらゆる JavaScript の値を渡すことができます。
引用:コンポーネントに props を渡す

子コンポーネント
function Greeting(props) {
return <h1>こんにちは、{props.name}さん</h1>
}

親コンポーネント
export default function App() {
return <Greeting name="佐藤" />
}

上記のコードでは、AppというコンポーネントがGreetingコンポーネントを呼び出すときにname=”佐藤”という値を渡しています。
Greetingコンポーネントでは、渡された値をprops.nameとして受け取ることができます。
そのため、画面には「こんにちは、佐藤さん」のように表示されます。

このように親コンポーネントから子コンポーネントへデータを渡す仕組みがpropsです。
propsは親から子の一方向にデータが流れるのが特徴です。

propsは、受け取った側で値を変更することは出来ません。
ユーザーの操作などで値が変わるデータはどのように管理するのでしょうか。
そこで、使われるのがuseStateというReactの機能です。

▼ useStateとは？

useStateとは一言で言うと状態を管理するためのReactの機能です。
propsでは、データの受け渡しが可能ですが、子コンポーネントで値を変更することはできません。

そのようなときに使われるのがuseStateというReactの機能です。

useState は、コンポーネントに state（状態）を追加するための React フックです。
（React公式ドキュメントより日本語訳)
useState

子コンポーネント
function Greeting(props) {
  return <h1>こんにちは、{props.name}さん</h1>
}

親コンポーネント
export default function App() {
 // "佐藤"はnameの初期値
  const [name, setName] = useState("佐藤");

  return (
    <div>
      <Greeting name={name} />
    </div>
  );
}

上記のコードでは、useState を使って name という値（画面の表示に影響するデータ）を管理しています。

Reactで頻出する基礎的な用語について解説していきましたが、いかがでしたでしょうか。
今回の記事でReactを触ってみたい、面白そうと思っていただけたら嬉しいです。
最後まで読んでいただきありがとうございました!

また次回の技術書でお会いしましょう!