React初学者が最初に学ぶべき3つのこと

2024年7月8日 2024年7月16日

慶西川

Reactは、ユーザーインターフェースを作成するための人気のあるJavaScriptライブラリです。初めてReactを学ぶとき、どこから手を付ければよいのか迷うことがあります。この記事では、React初学者が最初に学ぶべき3つの基本的な概念について説明します。

ちなみに、私たちが運営するオンラインプログラミングスクール「CodeVillage」ではJavaScriptからReact,そのReactのフレームワークであるNext.jsまで学べます。
気になる方は、ぜひ一度カリキュラムをご覧いただき無料カウンセリングにお越しください。

目次：

この記事の対象者

Reactを学び始めた人
Reactの基礎を復習したい人
Reactをこれから学ぼうとしている人
JSの学習から次のステップに行きたい人

学ぶべき3つのこと

まず、React初学者が学ぶべき3つのことというのは、コンポーネントを中心とした概念になります。

コンポーネントとはUIを構成する再利用可能な部品のことを指し、その状態を管理するためのState、その部品へ情報を橋渡しするPropsについて理解を深めていきましょう。

コンポーネント

コンポーネントは、Reactの基本的な構成要素です。アプリケーションを小さな再利用可能な部品に分割することで、コードの整理と管理が容易になります。コンポーネントは関数またはクラスとして定義され、独自のstateやpropsを持つことができます。

関数コンポーネントとクラスコンポーネントの2種類がありますが、現在は関数コンポーネントが主流です。以下に、シンプルな関数コンポーネントの例を示します。

jsxコードをコピーする
function Welcome() {
  return <h1>Welcome to React!</h1>;
}

この例では、Welcomeという名前の関数コンポーネントが<h1>タグを返しています。非常にシンプルなコンポーネントですが、これを基に複雑なUIを構築することができます。

また、ReactのUIを形作る部分はJSXという書き方で記述されます。

JSX

JSX（JavaScript XML）は、ReactでコンポーネントのUIを定義するために使用される構文拡張です。HTMLと似た構文を使用して、JavaScriptコードの中でUIを記述できるようにします。JSXは、見た目はHTMLに近いですが、JavaScriptのパワーを持ち、より動的なUIの作成が可能です。

const element = <h1>Hello, world!</h1>;

このように、JSXはHTMLタグのように見えますが、JavaScriptコードの一部です。

もちろんJavaScriptですので以下のように変数などを埋め込むことも可能です。

const name = 'React';
const element = <h1>Hello, {name}!</h1>;

いくつか制約はありますが、とても便利にUIを構築できる構文ですのでぜひ覚えましょう！

コンポーネントの書き方

まず、コンポーネントは関数として書かれていますので、以下のようにUIはJSX、処理は関数のreturnの前の部分で書きます。

function ComponentName(){
    処理
  return (
    見た目(JSX)
  )
}

ですので、データを処理してそのデータを見た目で使っていくといった使い方ができます。

State

次にStateについて学んでいきます。

Stateは、コンポーネントの内部で管理されるデータのことを指します。ユーザーの操作や時間経過によって変化するデータを扱うために使用されます。たとえば、フォームの入力値やカウンターの値などがstateに該当します。

Reactでは、stateを設定するためにuseStateフックを使用します。以下に簡単な例を示します：


import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

この例では、useStateフックを使用してcountというstateを作成し、setCount関数でその値を更新しています。ボタンをクリックするたびにカウントが増えるシンプルなカウンターです。

useStateには状態の変化とともに表示しているものを更新してくれる機能が備わっております。ですので、単純に変数の切り替えをしただけでは見た目には反映されませんが、useStateを使用することで見た目まで更新してくれます。

Hooks

Reactには上記で説明したuseStateのようにReactを扱う上で便利な機能が備わっているものがあります。細かく言うと関数コンポーネント内で状態やライフサイクルのロジックを利用するための機能です。

それらをhooksと呼びます。useState以外にも以下のような種類のものがあるので良ければ次のステップに学習してみてください。

useState
useEffect
useContext

フックを理解することで、Reactの関数コンポーネントを使って、より柔軟で再利用可能なコードを書くことができます。

Props

Propsは、親コンポーネントから子コンポーネントへデータを渡すための手段です。Propsは読み取り専用であり、子コンポーネントから直接変更することはできません。これにより、データの流れが一方向に保たれ、アプリケーションの構造が明確になります。

以下に、propsの使用例を示します：


function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

function App() {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
    </div>
  );
}

この例では、AppコンポーネントがGreetingコンポーネントにnameというpropsを渡しています。Greetingコンポーネントは、受け取ったnameを表示するだけのシンプルなものです。

コンポーネントにデータを渡す書き方とデータを受け取る書き方はReactを使っている際何度も書くことになりますので、スムーズに書けるようになりましょう。

実際には書きませんが、以下のようにイメージするとわかりやすいかもしれません。

propsとしてデータを受け取る
function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

function App() {
  return (
    <div>
      Greeting関数を呼び引数にデータを渡す
      {Greeting({name:"Alice"})}
      <Greeting name="Alice" />
      {Greeting({name:"Bob"})}
      <Greeting name="Bob" />　
    </div>
  );
}