Reactの基本構造 | フレームワークの導入 | JavaScript 超完全入門 基本から発展までのすべて

現在作成中です。今後加筆修正してまいります。
スポンサーリンク
スポンサーリンク

Reactとは?

Reactは、Facebookによって開発されたフロントエンドライブラリで、UIコンポーネントを作成するために使用されます。Reactは、仮想DOM(Virtual DOM)を使った効率的なレンダリングが特徴で、大規模なアプリケーションでもパフォーマンスが優れています。

Reactの基本構造

Reactでは、UIをコンポーネントとして分割し、それらを組み合わせてアプリケーションを構築します。コンポーネントは主に、JSX(JavaScript XML)で記述されます。

JSXとは?

JSXは、HTMLライクな構文でJavaScript内にHTMLを記述できるものです。JSXはコンパイル時にJavaScriptのReact.createElement()に変換され、Reactコンポーネントが生成されます。


// JSXの基本構造
const element = <h1>Hello, React!</h1>;

このように、JSXを使うことで、JavaScriptの中にHTMLのような構文で要素を記述できます。これにより、コンポーネントの作成が直感的で簡単になります。

コンポーネントの定義

Reactコンポーネントは、主に2つの方法で定義されます。

コンポーネントタイプ 説明
関数コンポーネント 最もシンプルな形式で、関数として定義されたコンポーネント。状態を持たず、受け取ったプロパティに基づいてUIを描画する。
クラスコンポーネント ES6クラスで定義され、状態(state)やライフサイクルメソッドを持つことができる。

関数コンポーネントの定義

Reactで最もシンプルなコンポーネントは、関数コンポーネントです。これは、関数として定義され、JSXを返します。


// 関数コンポーネントの定義例
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

この例では、Welcomeという関数コンポーネントを定義しており、propsを受け取ってUIを描画します。

クラスコンポーネントの定義

より複雑なコンポーネントは、クラスコンポーネントとして定義されます。クラスコンポーネントは、状態(state)やライフサイクルメソッドを持ち、より柔軟な処理が可能です。


// クラスコンポーネントの定義例
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

この例では、React.Componentを継承して、renderメソッド内でJSXを返しています。クラスコンポーネントは、関数コンポーネントよりも複雑なロジックを実装できます。

Reactの状態(State)とプロパティ(Props)

Reactコンポーネントは、2つの主要なデータモデルでUIを更新します。それがstatepropsです。

モデル 説明
props コンポーネント間でデータを渡すために使用。親コンポーネントから子コンポーネントへデータを渡す。
state コンポーネント自身が管理する状態。ユーザーの操作やアプリケーションの動作に応じて更新される。

Stateの使用例


class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

この例では、クラスコンポーネント内でstateを管理し、setStateを使ってコンポーネントの状態を更新しています。

Reactのライフサイクル

Reactコンポーネントには、ライフサイクルメソッドがあり、コンポーネントの生成、更新、破棄のタイミングで特定の処理を実行できます。

ライフサイクルメソッド 説明
componentDidMount コンポーネントがDOMに挿入された後に呼ばれる。データの取得やタイマーの設定などに使う。
componentDidUpdate コンポーネントの更新が完了した後に呼ばれる。再レンダリング後に必要な処理を実行する。
componentWillUnmount コンポーネントがDOMから削除される直前に呼ばれる。タイマーのクリアなどのクリーンアップ処理に使う。

ライフサイクルメソッドは、コンポーネントの挙動をより制御するために活用されます。

まとめ

Reactは、コンポーネントベースのフロントエンドライブラリであり、仮想DOMを使用して効率的にUIをレンダリングします。JSXを使用することで、JavaScript内に直感的にUIを記述でき、関数コンポーネントやクラスコンポーネントを活用して動的なアプリケーションを構築できます。また、状態管理やライフサイクルメソッドを通じて、より複雑な動作も簡単に実装できます。

Amazonロゴ
   
ad.価格範囲を指定して商品を探せます。セールで助かる便利ツール
超完全入門
スポンサーリンク
このページをメモ、または、シェア