Knowledge Center
技術情報などを公開しています
en ja zh
React入門 全12回シリーズ

開発環境構築と最初のコンポーネント作成（第1回）

By Author
image
Reactは、ユーザーインターフェースを構築するためのJavaScriptライブラリであり、コンポーネントベースのアプローチで効率的な開発を可能にします。本連載では、Reactの基礎から応用までをハンズオン形式で学びます。第1回では、macOS環境でのReact開発環境の構築方法と、最初の関数コンポーネントを作成してレンダリングの仕組みを理解することを目指します。本記事は、プログラミングの基礎知識を持つ読者を対象としており、実際にコードを書きながらReactの基本を習得します。

開発環境の準備

Reactアプリケーションを開発するには、Node.jsとnpm（Node Package Manager）をインストールする必要があります。Node.jsはJavaScriptの実行環境を提供し、npmはパッケージ管理を行います。macOSでのインストールは、公式ウェブサイトからNode.jsをダウンロードする方法が一般的です。LTS（長期サポート）バージョンを選択し、指示に従ってインストールを完了します。インストール後、ターミナルで以下のコマンドを実行し、バージョンが正しく表示されることを確認します。

node -v    
npm -v

これにより、Node.jsとnpmが正常に動作していることが確認できます。次に、Reactプロジェクトを作成するためのツールであるCreate React Appを導入します。Create React Appは、Reactアプリケーションの初期設定を簡略化し、すぐに開発を始められる環境を提供します。

Create React Appによるプロジェクトの作成

プロジェクトを作成するには、ターミナルで以下のコマンドを実行します。このコマンドは、my-react-appという名前の新しいReactプロジェクトを生成します。

npx create-react-app my-react-app    
cd my-react-app

プロジェクトフォルダが作成された後、cdコマンドでディレクトリに移動します。プロジェクトの構造を確認すると、srcフォルダ内にReactコンポーネントやスタイルシートが含まれていることがわかります。開発サーバーを起動するには、以下のコマンドを実行します。

npm start

このコマンドにより、ブラウザが自動的に開き、http://localhost:3000 でReactの初期画面が表示されます。これで、Reactアプリケーションの開発環境が整いました。

最初の関数コンポーネントの作成

Reactでは、UIをコンポーネントと呼ばれる再利用可能な単位で構築します。コンポーネントには、クラスコンポーネントと関数コンポーネントの2種類がありますが、本連載ではモダンなReact開発で推奨される関数コンポーネントを中心に扱います。関数コンポーネントはシンプルで、フックを活用して状態や副作用を管理できます。

ここでは、最初の関数コンポーネントを作成します。srcフォルダ内にApp.jsを開き、以下のコードに置き換えます。

import React from 'react';    
    
function App() {    
  return (    
    <div>    
      <h1>ようこそ、Reactの世界へ</h1>    
      <p>これは私の最初のReactコンポーネントです。</p>    
    </div>    
  );    
}    
    
export default App;

このコードでは、Appという名前の関数コンポーネントを定義しています。return文内でJSX（JavaScript XML）と呼ばれる構文を使用し、HTMLに似た形式でUIを記述します。JSXは、ReactがJavaScript内でUIを表現するための方法です。export default Appにより、このコンポーネントを他のファイルからインポート可能にしています。

コンポーネントのレンダリング

Reactアプリケーションでは、コンポーネントがレンダリングされてブラウザに表示されます。このプロセスを理解するために、srcフォルダ内のindex.jsを確認します。通常、index.jsには以下のようなコードが含まれています。

import React from 'react';    
import ReactDOM from 'react-dom/client';    
import App from './App';    
    
const root = ReactDOM.createRoot(document.getElementById('root'));    
root.render(    
  <React.StrictMode>    
    <App />    
  </React.StrictMode>    
);

このコードでは、ReactDOM.createRootを使用して、HTMLのroot要素にReactアプリケーションをマウントしています。<App />はAppコンポーネントを呼び出し、ブラウザにレンダリングします。React.StrictModeは、開発中に潜在的な問題を検出するためのモードです。

ブラウザで http://localhost:3000 にアクセスすると、App.jsで定義した「ようこそ、Reactの世界へ」という見出しとパラグラフが表示されます。これにより、コンポーネントが正しくレンダリングされたことを確認できます。

ハンズオン：コンポーネントの変更を試す

実際にコードを編集して、Reactの動作を体感します。App.jsを以下のように変更し、別のメッセージを表示します。

import React from 'react';    
    
function App() {    
  return (    
    <div>    
      <h1>Reactハンズオンへようこそ</h1>    
      <p>このコンポーネントを自由に編集してみましょう。</p>    
    </div>    
  );    
}    
    
export default App;

ファイルを保存すると、開発サーバーが自動的に変更を検出し、ブラウザに新しい内容が即座に反映されます。このホットリローディング機能により、効率的に開発を進められます。試しに、見出しやパラグラフのテキストを自由に変更し、ブラウザでの表示を確認してください。

次のステップに向けて

本記事では、macOSでのReact開発環境の構築と、最初の関数コンポーネントの作成を通じて、Reactの基本を学びました。関数コンポーネントはシンプルでありながら、Reactアプリケーションの基盤となる重要な要素です。第2回では、JSXの構文を詳しく学び、HTMLライクなコードでUIを効率的に構築する方法を紹介します。これにより、Reactの表現力と柔軟性をさらに理解できます。

おすすめの記事