プログラミング

React入門ガイド

Last Updated: 07/03/2025
10 1 minute read

Reactは、ユーザーインターフェース（UI）を構築するためのJavaScriptライブラリであり、Facebookによって開発され、現在はオープンソースとして広く使用されています。Reactを使用すると、動的でインタラクティブなWebアプリケーションを効率的に作成できます。この記事では、Reactの基本的な使い方から、実際のアプリケーション開発までの流れを詳しく説明します。

Related Articles

Reactの基本

Reactはコンポーネントベースのライブラリです。これは、UIを「コンポーネント」という小さな部品に分割し、それらを組み合わせてアプリケーションを作るという考え方に基づいています。コンポーネントは、状態（State）やプロパティ（Props）を管理し、UIを更新します。

1. Reactのインストール

まずは、Reactを開発するために必要なツールをインストールしましょう。最も簡単な方法は、create-react-appというツールを使用することです。このツールを使うことで、Reactの基本的な設定を自動で行ってくれます。

  1. Node.jsとnpm（Node Package Manager）がインストールされていることを確認してください。
  2. コマンドラインで以下を実行して、Reactアプリケーションを作成します。
bash
npx create-react-app my-app
cd my-app
npm start

これで、ブラウザに「Welcome to React」の画面が表示されるはずです。

2. Reactコンポーネントの作成

Reactの中心的な構成要素は「コンポーネント」です。コンポーネントは、JavaScriptの関数またはクラスとして定義され、UIの一部を描画します。ここでは、関数型コンポーネントを作成します。

jsx
function Greeting() {
  return <h1>Hello, World!h1>;
}

上記の例では、Greetingというコンポーネントを作成しています。returnステートメントでHTMLを返すように見えますが、実際にはこれがReactの「JSX」という構文です。

3. JSXとは？

JSX（JavaScript XML）は、Reactで使用される特別な構文です。HTMLのようなコードをJavaScriptに埋め込むことができます。これにより、UIを宣言的に記述できます。JSXは実際にはJavaScriptに変換されるため、最終的にブラウザが理解できる形で表示されます。

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

JSXでは、HTMLタグのような構文を使用しますが、class属性はclassNameとして記述する必要があります。

4. コンポーネントのプロパティ（Props）

コンポーネントは、親コンポーネントから「プロパティ（Props）」を受け取ることができます。Propsは、コンポーネントに渡す情報で、コンポーネントの表示内容を動的に変更するために使用します。

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

// 使用例
<Greeting name="Taro" />

この例では、nameというプロパティをGreetingコンポーネントに渡しています。このプロパティを使って、ユーザーに挨拶を表示します。

5. コンポーネントの状態（State）

Reactでは、コンポーネントが状態を持つことができます。この状態を使って、コンポーネントの表示内容を動的に変更したり、ユーザーの入力を管理したりします。

関数型コンポーネントでは、useStateフックを使用して状態を管理します。

jsx
import { useState } from 'react';

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

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

この例では、useStateフックを使用してcountという状態を管理しています。ボタンがクリックされるたびに、setCountを呼び出して状態を更新し、UIが再描画されます。

Reactのイベントハンドリング

Reactでは、DOMイベントの処理はJavaScriptの標準的な方法と似ていますが、少し異なる点があります。例えば、onclickイベントはonClickとしてキャメルケースで記述します。

jsx
function Button() {
  const handleClick = () => {
    alert('Button clicked!');
  };

  return <button onClick={handleClick}>Click Mebutton>;
}

この例では、ボタンがクリックされると、handleClick関数が呼び出され、アラートが表示されます。

コンポーネントのライフサイクル

Reactのコンポーネントにはライフサイクルがあり、特定のタイミングでメソッドが呼び出されます。例えば、コンポーネントが作成される時、更新される時、削除される時にそれぞれ特定の処理を行うことができます。

クラスコンポーネントでは、ライフサイクルメソッドを使用しますが、関数型コンポーネントでは、useEffectフックを使って同様のことを実現します。

jsx
import { useEffect } from 'react';

function Timer() {
  useEffect(() => {
    const timer = setInterval(() => {
      console.log('Timer running');
    }, 1000);

    // クリーンアップ関数
    return () => clearInterval(timer);
  }, []); // 空の配列は一度だけ実行することを意味します

  return <p>Check the console for timer outputp>;
}

useEffectは副作用（サイドエフェクト）を管理するために使用されます。ここでは、1秒ごとにconsole.logを実行し、コンポーネントがアンマウントされるときにタイマーをクリアします。

React Routerによるページ遷移

Reactで複数のページを持つアプリケーションを作成するためには、react-router-domを使ってルーティングを設定します。

bash
npm install react-router-dom

次に、ルーティングを設定して、異なるページに遷移できるようにします。

jsx
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';

function Home() {
  return <h2>Home Pageh2>;
}

function About() {
  return <h2>About Pageh2>;
}

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">HomeLink>
        <Link to="/about">AboutLink>
      nav>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      Switch>
    Router>
  );
}

このコードでは、を使ってページリンクを作成し、でページごとのコンポーネントを設定しています。

まとめ

Reactは強力なツールであり、Webアプリケーションの開発を効率化します。コンポーネント、プロパティ、状態、イベントハンドリングなどの基本的な概念を理解することで、より高度なアプリケーションを作成する準備が整います。また、react-router-domを使ったルーティングや、useEffectフックを使った副作用の管理も非常に便利です。

Reactの習得は、特に大規模なWebアプリケーションを構築する際に大きな力となるでしょう。

Last Updated: 07/03/2025
10 1 minute read
Back to top button