React入門者必見！基本概念と機能の基礎を簡単に解説

Reactを初めて学ぶ人にとって、最初は多くの情報に圧倒されることがあるかもしれません。しかし、Reactの基本概念を理解することは、Web開発におけるスキルを向上させる上でも非常に重要です。React初心者が知っておくべき、React基本概念や機能の基礎について、現役のReactプログラマである筆者が簡単にまとめてみました。

React.jsとは？
- React Componentの種類

Reactに関連する欠点および歴史は、他の記事として取り扱っているので以下を参照ください。

dev-k.hatenablog.com

React.jsとは？

Reactは、Meta（旧Facebook）社によって開発されたJavaScriptライブラリで、UIコンポーネントを作成するために使用されます。

Reactは、コンポーネント指向のアプローチを採用しており、複雑なUIを構築する際に非常に有用です。Reactコンポーネントは、再利用可能で、他のコンポーネントと簡単に組み合わせることができます。また、Reactは、仮想DOMを使用するため、非常に高速でパフォーマンスが優れています。

Reactの特徴の一つは、JSXという独自の文法を採用していることです。JSXを使用すると、JavaScriptのコード内にHTMLのようなマークアップを直接書くことができます。これにより、UIコンポーネントを宣言的に記述することができ、可読性が向上します。

Reactは、シングルページアプリケーション（SPA）やモバイルアプリケーションの開発にも広く使用されています。React Nativeを使用すると、JavaScriptを使用してネイティブアプリケーションを開発することができます。

Reactは、ライブラリであるため、他のライブラリやフレームワークとの組み合わせも容易です。Reactは、仮想DOMを使用するため、他のライブラリとの互換性も高く、Reactコンポーネントを他のライブラリと組み合わせることも可能です。

React Componentの種類

Reactでは、2つの種類のコンポーネントがあります。

Class component
Functional component

これらのコンポーネントにはいくつかの違いがあります。

まず、Class Componentを見てみましょう。

// JSX
// クラスコンポーネント
import React, { Component } from 'react';

class MyClassComponent extends Component {
  render() {
    return <p>This is a Class Component.</p>;
  }
}

Class Componentは、React.Componentクラスを継承しているJavaScriptのクラスです。

Class Componentは、ライフサイクルメソッド（コンポーネントがマウント、更新、アンマウントされるときに自動的に呼び出されるメソッド）を持つことができます。

次に、Functional Componentを見てみましょう。

// JSX
// 関数コンポーネント
import React from 'react';

function MyFunctionalComponent() {
  return <p>This is a Functional Component.</p>;
}

Functional Componentは、JavaScriptの関数です。Functional Componentは、ライフサイクルメソッドを持たず、単純なUIのために使用されます。

これらのコンポーネントの主な違いは、Class Componentがクラスであるのに対し、Functional Componentが関数であることです。

unctional Componentは、Class Componentよりも簡潔であることが多いため、単純なUIの場合にはFunctional Componentが好まれることがあります。

ただし、ライフサイクルメソッドや状態を管理する必要がある場合には、Class Componentが必要になることがあります。

また、現代では関数コンポーネントが主流となっていることにも注意してください。

さらに明確に理解を望んでいるいる場合は、以下で詳しく解説していりますで、参照ください。

dev-k.hatenablog.com

StateとPropsの理解

StateとPropsは、Reactコンポーネント内で非常に重要な役割を果たします。

Reactコンポーネントで最も重要な役割を果たすStateとPropsについて説明します。

State

Stateは、コンポーネント内で状態を管理するために使用されます。

コンポーネントの内部で変更可能であり、変更が反映されると再描画されます。

これは、コンポーネント内部で扱う変数を格納するために使用されます。

また、Stateは、コンポーネントからコンポーネントへ渡されず、同じコンポーネント内でのみ使用されます。

Stateとは、Reactコンポーネントが持つ内部状態のことを指します。この状態が変更されると、Reactは自動的に再レンダリングを行い、画面を更新します。Stateは、コンポーネント内で定義され、setState()メソッドを使用して更新されます。

以下は関数コンポーネントで、useStateフックを使用をしようした状態の更新です。

//JSX

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フックを使用して、Counterコンポーネント内でcountという状態を定義しています。

countは初期値0で、setCount関数を使用して更新することができます。この更新により、再レンダリングが発生し、ユーザーインターフェースが更新されます。

このように、Stateは、コンポーネント内で管理される内部状態であり、コンポーネントの振る舞いやユーザーインターフェースに影響を与えます。

Props

Reactにおいて、Props（プロップス）は、コンポーネントへ渡される引数のことを指します。親コンポーネントから子コンポーネントに値を渡すために使用されます。Propsは、不変（immutable）であり、コンポーネントが受け取る値を定義するために使用されます。

例えば、以下のように、コンポーネントにnameというPropsを渡すことができます。

// JSX
<Welcome name="John" />

上記の例では、コンポーネントにnameというPropsを渡しています。これにより、コンポーネントはJohnという値を受け取ることができます。

受け取ったPropsは、コンポーネント内でpropsオブジェクトとしてアクセスすることができます。以下は、コンポーネント内でPropsを使用する例です。

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

上記の例では、propsオブジェクトのnameプロパティを参照して、Hello, John!というテキストをレンダリングしています。

PropsはReactコンポーネントで非常に一般的に使用され、Reactアプリケーションの中核的な概念の1つです。

Reactにおいて、StateとPropsは、コンポーネントの状態や振る舞いを管理するために重要な概念です。適切に使用することで、より柔軟で再利用可能なコンポーネントを構築することができます。

Reactの基礎文法

次に、Reactの文法について知る必要があります。JSXは、JavaScriptの拡張構文であり、ReactでUIを表現するために使用されます。また、Reactでは、コンポーネントをインポートして使用する必要があります。

以下はReactのコンポーネントをインポートして使用する簡単な例です。

まず、MyComponentという名前のReactコンポーネントを作成します。

// JSX
import React from 'react';

function MyComponent() {
  return <div>Hello World!</div>;
}

export default MyComponent;

次に、App.jsファイルでMyComponentをインポートして使用します。

// JSX
import React from 'react';
import MyComponent from './MyComponent';

function App() {
  return (
    <div>
      <h1>My App</h1>
      <MyComponent />
    </div>
  );
}

export default App;

上記の例では、MyComponentをApp.jsファイルでインポートし、をAppコンポーネント内に追加しています。これにより、MyComponentのHello World!が表示されます。

このように、Reactコンポーネントをインポートして使用することで、コンポーネントを再利用し、コードを簡潔に保つことができます。

ReactでのES6 モジュールのインポート・エクスポートは当ブログで詳しく解説しておりますので、以下を参照ください。

dev-k.hatenablog.com

JSX内でコメントを書く場合は、中括弧{}でコメントを囲み、その前にスラッシュとアスタリスクの組み合わせ/* */をつける必要があります。また、return内の要素は必ずdivタグでグループ化する必要があります。そのため、以下のようにdivタグで囲むことが重要です。

// JSX
const App = () => {
  return (
    <div>
      <h1>テスト</h1>
    </div>
  )
}

JSXの属性は、HTMLの時とは異なり、キャメルケースでの命名規則となっております。

例えば、以下でのクラス属性は、classNameとなっています。

// JSX
const ChildComponent = (props) => {
const title = props.title;
return (
<div className="styles">
{title}
</div>
)
}

// JSX
<div style={{ backgroundColor: "red", color: "white" }}>...</div> // style属性: 要素に直接CSSスタイルを適用するために使用されます。

<label htmlFor="nameInput">Name:</label> // <label>タグにhtmlFor属性を設定し、その値を対応する<input>タグのid属性に設定します

<button onClick={() => console.log("Button clicked!")}>Click me</button> // onClick属性: 要素がクリックされたときに実行される関数を指定します。

<input type="text" onChange={(event) => console.log(event.target.value)} /> // onChange属性: フォームコントロールの値が変更されたときに実行される関数を指定します。

{items.map((item) => (// key属性: コンポーネントのリスト内で各要素を一意に識別するために使用されます。
  <div key={item.id}>{item.name}</div>
))}

これらはReactで最も一般的に使用されるいくつかの属性の例です。他にも、さまざまな属性がありますが、それらはコンポーネントやアプリケーションのニーズに応じて異なります。

終了タグのない要素は、必ず末尾に( / )で閉じる必要があります。inputタグなどで終了タグがない場合、以下のように末尾に( / )を付ける必要があります。

// JSX
const App = () => {
return (
<input type="text" id="num" />
)
}

変数や関数などを埋め込む際には、中括弧{ }を使用します。

// JSX
const App = () => {
let myName = "Taro";
function Greeting() {
console.log("Hello")
}
return (
<div>
<div>{myName}</div>
<button type="button" onClick={Greeting}>Click me</button>
</div>
)
}

変数は全てキャメルケースで記述する必要があります。

// JSX
const App = () => {
const fooNumber = "Hello, Welcome";
return (
<div>
{fooNumber}
</div>
)
}

以上がReactの基礎文法についての説明です。注意点に気をつけながら、これらの文法を使いこなせるようになれば、Reactを使用してウェブアプリケーションを作成することができます。

ライフサイクルの仕組み

Reactのライフサイクルの仕組み

これは、概念の１つとなりますが決して複雑ではごさいません。

Reactのすべてのコンポーネントは、イベントのライフサイクルを通過します。

つまり各コンポーネントは、「マウント」、「更新」、「アンマウント」の3つのフェーズを経ます。

コンポーネントは、初めてレンダリングするときにマウントされます。そして2回目以降のレンダリングでコンポーネントはレンダリングされる度に更新されます。

その後コンポーネントがDOMから削除されたときが、アンマウントコンポーネントの破棄となります。

これらマウント、更新、アンマウントの3つのフェーズが繰り返し行われます。

私は例としてそれらを、誕生→成長→そして死のサイクルを経ていると考える例えは非常に分かりやすいと思っています。

人間の人生と同じサイクルであり、そのフェーズは繰り返し行われます。

コンポーネントがマウントされ、段階を踏んでアクションを実行するための特定のライフサイクルメソッドを提供します。

一般的に使用されるReactのライフサイクルメソッドには、constructor()、render()、componentDidMount()、componentDidUpdate()、componentWillUnmount()があります。

しかし、これらのメソッドはクラスコンポーネントでの場合に使用されるという事に注意してください。

これらのメソッドは、コンポーネントの状態やプロパティに基づいて動作します。

コンストラクターメソッドは、コンポーネントがマウントされる前に呼び出され、コンポーネントの状態を初期化し、イベントハンドラーメソッドをバインドします。

render()メソッドは、要素をDOMにレンダリングする場合に呼び出されます。

componentDidMount()メソッドは、render()が呼び出された後に呼び出され、コンポーネントがDOMにマウントされた直後に呼び出されます。

componentDidUpdate()メソッドは、更新が行われるとすぐに呼び出されます。

componentWillUnmount()メソッドは、コンポーネントのアンマウントフェーズ中に呼び出されます。このライフサイクルメソッドは、コンポーネントがマウント解除されて破棄される直前に呼び出されます。

このように、Reactのクラスコンポーネントでは、ライフサイクルメソッドが提供されており、これらのメソッドを使用して、コンポーネントがマウント、アンマウント、更新される際に、実行される特定のコードを定義できました。

しかし、Reactの関数コンポーネントでは、これらのライフサイクルメソッドを使用できませんでした。

そのため、React 16.8からは、関数コンポーネントにフックと呼ばれる概念が導入されました。フックは、関数コンポーネントにライフサイクルメソッドや状態管理の機能を追加するための特別な関数です。

フックを使用することで、以前のクラスコンポーネントで使用されていた複雑なライフサイクルメソッドの代わりに、関数コンポーネントで同じタイミングで実行するコードをシンプルに定義できます。

例えば、useStateフックを使用すると、関数コンポーネントで状態を管理できます。useEffectフックを使用すると、関数コンポーネントで副作用を実行することができます。これらのフックを使用することで、コンポーネントのライフサイクルを簡素化し、開発者はコードの可読性と保守性を向上させることができます