JavaScriptのReact入門！最初のコンポーネントを作ろう

1. Reactコンポーネントとは何か

1. Reactコンポーネントとは何か

Reactではウェブページを小さな部品に分けて作ります。この部品がコンポーネントです。コンポーネントはHTMLのタグとJavaScriptの処理を一緒に書ける便利な単位で、再利用も簡単にできます。例えばボタンを一つ作って、ページのどこでも同じ見た目や動きを使うことができます。

2. React環境の準備

2. React環境の準備

Reactを始めるにはNode.jsとnpm（パッケージ管理ツール）が必要です。Node.jsはJavaScriptをブラウザ以外で動かすためのソフトで、npmは便利なライブラリを簡単に追加できるツールです。

    npx create-react-app my-app
    cd my-app
    npm start
    

上記のコマンドでReactの開発環境が作れます。npm startを実行するとブラウザで自動的に開発中のアプリが表示されます。

3. 最初のコンポーネントを作ろう

3. 最初のコンポーネントを作ろう

Reactコンポーネントは関数で作ることが多いです。まずは簡単な「Hello, React!」を表示するコンポーネントを作ってみます。

    import React from 'react';

    function Hello() {
      return (
        <h1>Hello, React!</h1>
      );
    }

    export default Hello;
    

このコードで作ったHelloというコンポーネントを他の場所で呼び出すことで、「Hello, React!」の文字を表示できます。

4. コンポーネントを表示する方法

4. コンポーネントを表示する方法

作ったコンポーネントをブラウザに表示するには、App.jsに読み込んで使います。

    import React from 'react';
    import Hello from './Hello';

    function App() {
      return (
        <div>
          <Hello />
        </div>
      );
    }

    export default App;
    

これでHelloコンポーネントが画面に表示されます。Reactはコンポーネント単位で管理できるので、ページ全体を効率的に作ることができます。

5. JSXの基本

5. JSXの基本

ReactではJSXというJavaScriptとHTMLを混ぜて書ける記法を使います。JSXを使うことでHTMLタグを書いている感覚でコンポーネントを作れます。例えば、複数の要素をまとめるときは<div>タグで囲みます。

    function Greeting() {
      const name = "React初心者";
      return (
        <div>
          <p>こんにちは、{name}さん！</p>
        </div>
      );
    }
    

上記の{name}の部分はJavaScriptの変数をHTML内に表示する方法です。

6. コンポーネントにプロパティを渡す

6. コンポーネントにプロパティを渡す

コンポーネントにはプロパティ（props）というデータを渡すことができます。これにより同じコンポーネントでも内容を変えて使うことができます。

    function Welcome(props) {
      return <h2>ようこそ、{props.userName}さん！</h2>;
    }

    function App() {
      return (
        <div>
          <Welcome userName="太郎" />
          <Welcome userName="花子" />
        </div>
      );
    }
    

この例では、Welcomeコンポーネントを呼び出すたびにuserNameの値を変えて表示しています。

7. 状態を管理するstateの基礎

7. 状態を管理するstateの基礎

Reactではコンポーネントごとに状態を持つことができます。状態はstateと呼ばれ、ボタンを押したときに数字を増やすなどの動的な表示に使えます。

    import React, { useState } from 'react';

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

      return (
        <div>
          <p>カウント: {count}</p>
          <button onClick={() => setCount(count + 1)}>増やす</button>
        </div>
      );
    }
    

このCounterコンポーネントはボタンを押すたびにカウントが増える簡単な例です。useStateは状態を作るためのReactフックです。

8. Reactで学ぶメリットと今後のステップ

8. Reactで学ぶメリットと今後のステップ

Reactを使うとウェブアプリを部品ごとに管理できるため、保守性が高く大規模なアプリでも効率的に開発できます。次のステップとして、イベント処理やフォームの操作、APIとの連携などを学ぶと、より実用的なアプリを作れるようになります。

ReactはJavaScriptの知識を活かしつつ、ウェブアプリを直感的に作れる強力なライブラリなので、初心者でも段階を踏めば確実に使いこなせるようになります。

まとめ

まとめ

ここまで学んだ内容を振り返ると、Reactはウェブ開発で非常に効率的にコンポーネントを作り、再利用や保守を容易にするためのJavaScriptライブラリであることがわかります。Reactの基本はコンポーネントであり、コンポーネントを作ることでウェブページを小さな部品に分け、見た目や動作を管理できます。Node.jsとnpmを使った環境構築から始まり、npx create-react-appでプロジェクトを作成する手順、そして最初のHelloコンポーネントの作成方法を学びました。さらに、JSXを使ってHTMLとJavaScriptを混在させて書く方法、propsによってコンポーネントにデータを渡す方法、useStateフックを使った状態管理の基礎まで理解できました。

コンポーネントを使ったウェブアプリ開発は、ページ全体の構造を明確にし、動的な更新も簡単に行える点が大きなメリットです。小さな部品ごとに状態や表示を管理できるため、複雑なアプリケーションでもバグの発生を抑えやすくなります。また、propsやstateの活用でユーザーインターフェースを柔軟に制御でき、再利用可能なコンポーネントを作ることが可能です。Reactの学習を通じて、ウェブアプリ開発の効率化と保守性の向上、そして動的なユーザー体験を作るスキルを身につけることができます。

サンプルプログラムのまとめ

ここまで紹介したコードをまとめると、以下のようにReactの基本的な流れを押さえることができます。

    import React, { useState } from 'react';

    function Hello() {
      return <h1>Hello, React!</h1>;
    }

    function Welcome(props) {
      return <h2>ようこそ、{props.userName}さん！</h2>;
    }

    function Counter() {
      const [count, setCount] = useState(0);
      return (
        <div>
          <p>カウント: {count}</p>
          <button onClick={() => setCount(count + 1)}>増やす</button>
        </div>
      );
    }

    function App() {
      return (
        <div>
          <Hello />
          <Welcome userName="太郎" />
          <Welcome userName="花子" />
          <Counter />
        </div>
      );
    }

    export default App;
    

このコードはReactの基本コンポーネント、propsによるデータ受け渡し、useStateを用いた状態管理の例を一度にまとめたものです。これを基に、さらに複雑なウェブアプリや動的なUIを作る練習ができます。