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

2024.09.22
スポンサーリンク
スポンサーリンク
amazon
スマイルSALE
--:--:--
～
ad. 価格範囲を指定して商品を探せます

Reactとは？

Reactは、JavaScriptでユーザーインターフェース（UI）を構築するためのライブラリです。

もともとはFacebook（現在のMeta）によって開発され、現在はオープンソースプロジェクトとして多くの開発者に利用されています。

Reactでは画面をコンポーネントという小さな部品に分けて開発します。これにより、コードの再利用や保守がしやすくなります。

また、仮想DOM（Virtual DOM）を利用することで、必要な部分だけを効率良く更新できるため、高速な画面描画を実現しています。

Reactの基本構造

Reactでは、画面を複数のコンポーネントに分割し、それらを組み合わせてアプリケーションを作成します。

現在では、ほとんどのReactアプリケーションで関数コンポーネントが使用されています。

JSXとは？

JSX（JavaScript XML）は、JavaScriptの中へHTMLのような構文を書ける仕組みです。

ブラウザがそのまま理解できる構文ではなく、ビルド時に通常のJavaScriptへ変換されます。

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

このようにHTMLに近い書き方ができるため、UIを直感的に記述できます。

コンポーネントの定義

Reactには、関数コンポーネントとクラスコンポーネントがあります。

種類 特徴
関数コンポーネント 現在のReactで主流。Hooksを利用して状態管理もできる。
クラスコンポーネント 以前は一般的だったが、新規開発ではほとんど利用されない。

関数コンポーネント

現在もっとも一般的なコンポーネントです。

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

受け取ったpropsを利用して画面を表示します。

クラスコンポーネント

Reactの初期から利用されている書き方です。

class Welcome extends React.Component {
    render() {
        return <h1>Hello, {this.props.name}</h1>;
    }
}

現在でも既存プロジェクトでは見かけますが、新しくReactを学ぶ場合は関数コンポーネントを中心に覚えることをおすすめします。

PropsとState

Reactでは画面を更新するために、主にPropsとStateという2つの仕組みを利用します。

種類 説明
Props 親コンポーネントから渡されるデータ。読み取り専用。
State コンポーネント自身が管理する状態。変更すると画面が再描画される。

現在では、Stateの管理にはuseStateフックを利用することが一般的です。

Stateの使用例（関数コンポーネント）

import { useState } from "react";

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

    return (
        <button onClick={() => setCount(count + 1)}>
            {count}
        </button>
    );
}

この例では、ボタンを押すたびにcountが増え、画面も自動で更新されます。

ライフサイクル

Reactでは、コンポーネントの生成・更新・削除のタイミングで処理を実行できます。

クラスコンポーネントではライフサイクルメソッドを利用します。

メソッド 役割
componentDidMount() 画面表示後に実行される。
componentDidUpdate() 更新後に実行される。
componentWillUnmount() 画面から削除される直前に実行される。

現在では、これらの処理はuseEffectフックで記述することが一般的です。

useEffectの例

import { useEffect } from "react";

function App() {
    useEffect(() => {
        console.log("コンポーネントが表示されました");
    }, []);

    return <h1>Hello React</h1>;
}

初心者が知っておきたいポイント

  • Reactはライブラリであり、プログラミング言語ではない。
  • 現在は関数コンポーネントが標準的な書き方である。
  • State管理にはuseStateを利用することが多い。
  • ライフサイクル処理にはuseEffectを利用することが多い。
  • クラスコンポーネントは既存プロジェクトでは見かけるが、新規開発ではあまり利用されない。

まとめ

  • ReactはUIを構築するためのJavaScriptライブラリである。
  • 画面をコンポーネントに分割して開発できる。
  • JSXを利用するとHTMLのような構文でUIを書ける。
  • 現在では関数コンポーネントとHooks（useState・useEffect）が主流である。
  • Reactを理解すると、大規模なWebアプリケーションを効率良く開発できる。

スポンサーリンク