React入門ガイド：ゼロから最初のユーザーインターフェースを構築する

2/19/2026
3 min read

React入門ガイド：ゼロから最初のユーザーインターフェースを構築する

Reactは、ユーザーインターフェースを構築するためのJavaScriptライブラリです。 Facebookによって開発およびメンテナンスされており、フロントエンド開発で最も人気のあるツールの1つになっています。 このガイドでは、ゼロから始めて、Reactの基本的な概念を段階的に理解し、簡単なユーザーインターフェースを構築します。

Reactを選ぶ理由？

Reactには次の利点があります。

  • コンポーネント化： Reactは、ユーザーインターフェースを独立した再利用可能なコンポーネントに分解します。 これにより、コードの保守と理解が容易になります。
  • 宣言型： Reactは宣言型プログラミングスタイルを使用します。これは、表示したいものを記述するだけで、Reactが更新とレンダリングを自動的に処理することを意味します。
  • 効率的： Reactは仮想DOMとスマートdiffアルゴリズムを使用しており、ユーザーインターフェースを効率的に更新し、不要なレンダリングを削減できます。
  • 大規模なコミュニティサポート： Reactには大規模なコミュニティと豊富なエコシステムがあり、開発を支援する多くのチュートリアル、ライブラリ、ツールを見つけることができます。
  • クロスプラットフォーム機能： React Nativeを使用すると、Reactを使用してネイティブモバイルアプリケーション（iOSおよびAndroid）を開発できます。

準備

始める前に、コンピューターに次のツールがインストールされていることを確認する必要があります。

  • Node.js： Node.jsは、React開発ツールを実行するためのJavaScriptランタイム環境です。 https://nodejs.org/ からダウンロードしてインストールできます。
  • npmまたはyarn： npm（Node Package Manager）とyarnは、Reactの依存関係をインストールおよび管理するためのJavaScriptパッケージマネージャーです。 通常、Node.jsをインストールすると、npmも一緒にインストールされます。 yarnはhttps://yarnpkg.com/からインストールできます。

最初のReactアプリケーションを作成する

create-react-appを使用して、Reactプロジェクトをすばやく作成します。

  1. npmを使用して作成：

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

  2. yarnを使用して作成：

    yarn create react-app my-first-react-app
cd my-first-react-app
yarn start

上記のコマンドを実行すると、create-react-appはmy-first-react-appという名前のディレクトリを自動的に作成し、そのディレクトリにReactプロジェクトを初期化します。 npm startまたはyarn startコマンドは開発サーバーを起動し、ブラウザでhttp://localhost:3000にアクセスしてReactアプリケーションを表示できます。

ディレクトリ構造

create-react-appによって作成されたプロジェクトのディレクトリ構造は次のとおりです。``` my-first-react-app/ ├── node_modules/ # プロジェクトが依存するライブラリ ├── public/ # 静的リソース（例：HTMLファイル） │ ├── index.html # アプリケーションのエントリポイントとなるHTMLファイル │ └── ... ├── src/ # Reactのソースコード │ ├── App.css # AppコンポーネントのCSSスタイル │ ├── App.js # Appコンポーネント │ ├── App.test.js # Appコンポーネントのテストファイル │ ├── index.css # グローバルCSSスタイル │ ├── index.js # アプリケーションのエントリポイントとなるJavaScriptファイル │ ├── logo.svg # Reactのロゴ │ └── ... ├── .gitignore # Gitの無視ファイル ├── package.json # プロジェクトのメタデータと依存関係 ├── README.md # プロジェクトの説明ドキュメント └── yarn.lock # 依存関係のバージョンロックファイル（yarnを使用する場合）


## Reactコンポーネントの理解

Reactアプリケーションはコンポーネントで構成されています。コンポーネントは、ユーザーインターフェースの特定の部分をレンダリングするための、独立した再利用可能なコードブロックです。

`src/App.js`ファイルでは、デフォルトの`App`コンポーネントを確認できます。

```javascript
import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    
      
        
        
          Edit `src/App.js` and save to reload.
        

        [
          Learn React
        ](https://reactjs.org)
      
    
  );
}

export default App;

コードの説明：

  • import React from 'react'; Reactライブラリをインポートします。
  • function App() { ... } Appという名前の関数コンポーネントを定義します。
  • return ( ... ) コンポーネントがレンダリングする内容を記述したJSX式を返します。
  • export default App; Appコンポーネントをエクスポートして、他のファイルで使用できるようにします。

JSX (JavaScript XML)

JSXはJavaScriptの構文拡張であり、JavaScriptコード内でHTMLのようなコードを記述できます。上記の例では、...がJSX式です。JSXコードはBabelによって標準のJavaScriptコードに変換され、ブラウザが理解できるようになります。

Appコンポーネントの修正

Appコンポーネントを修正して、簡単なカウンターを作成してみましょう。

import React, { useState } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(0);
  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    
      

# カウンター

      現在のカウント: {count}

      +
      -
    
  );
}

export default App;

修正点：

  • import React, { useState } from 'react'; useState Hookをインポート。useState は、関数コンポーネントで状態を追加するために使用されるReact Hookです。
  • const [count, setCount] = useState(0); useState Hookを使用して、countという名前の状態変数を作成し、0に初期化。setCount は、countの状態を更新するための関数です。
  • const increment = () => { setCount(count + 1); }; incrementという名前の関数を定義し、countの状態を1ずつ増加させます。
  • const decrement = () => { setCount(count - 1); }; decrementという名前の関数を定義し、countの状態を1ずつ減少させます。
  • 現在のカウント: {count} ページにcount状態の値を表示。{count} は、JSXコードにJavaScript変数を挿入するために使用されるJSX式です。
  • + と - incrementとdecrement関数をそれぞれバインドする2つのボタンを作成。onClick は、ボタンがクリックされたときに指定された関数を実行するためのイベントハンドラです。

src/App.jsファイルを保存すると、ブラウザが自動的に更新され、簡単なカウンターが表示されます。「+」ボタンをクリックするとカウントが増加し、「-」ボタンをクリックするとカウントが減少します。

CSSスタイルを使用する

CSSを使用してReactアプリケーションを美化できます。create-react-app は、CSS Modulesと通常のCSSファイルをサポートしています。

CSS Modulesを使用する：

CSS Modulesを使用すると、コンポーネントごとに独立したCSSスタイルを作成し、スタイルの競合を回避できます。コンポーネントでCSS Modulesを使用するには、.module.cssで終わるファイルを作成する必要があります。

たとえば、App.module.cssという名前のファイルを作成し、次のCSSスタイルを追加します。

.App {
  text-align: center;
}

.App h1 {
  color: blue;
}

.App button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: lightgreen;
  border: none;
  cursor: pointer;
}

次に、src/App.jsファイルでCSS Modulesをインポートします。

import React, { useState } from 'react';
import styles from './App.module.css'; // CSS Modulesをインポート

function App() {
  const [count, setCount] = useState(0);
```javascript
 const increment = () => {
 setCount(count + 1);
 };

 const decrement = () => {
 setCount(count - 1);
 };

 return (
 <>
 {/* stylesオブジェクトを使ってCSSクラスを参照する */}
 

 # カウンター

 現在のカウント: {count}

 +
 -
 

 );
}

export default App;

通常のCSSファイルの使用:

通常のCSSファイルを使ってグローバルスタイルを定義することもできます。src/index.cssファイルで、グローバルスタイルを定義できます。

例えば、以下のCSSスタイルを追加します。

body {
 font-family: sans-serif;
}

このスタイルはアプリケーション全体のbody要素に適用されます。

次のステップ

おめでとうございます。最初のReactアプリケーションが完成しました！次に、Reactについてもっと学ぶことができます。例えば：

  • コンポーネント間の通信: 異なるコンポーネント間で通信する方法を学びます。
  • フォーム処理: フォームを作成および処理する方法を学びます。
  • ルーティング: React Routerを使ってマルチページアプリケーションを作成する方法を学びます。
  • ReduxまたはContext API: アプリケーションの状態を管理する方法を学びます。
  • Hooks: useEffect、useContextなどのReact Hooksについて深く理解します。

Reactは常に練習と学習が必要な技術であることを忘れないでください。 楽しい学習を！

Published in Technology

You Might Also Like

📝
Technology

Claude Code Buddy 修正ガイド：どのようにしてシャイニングレジェンド級ペットを手に入れるか

Claude Code Buddy 修正ガイド：どのようにしてシャイニングレジェンド級ペットを手に入れるか 2026年4月1日、Anthropic は Claude Code 2.1.89 バージョンでひっそりとエッグ機能を追加しました——...

ObsidianはDefuddleを発表し、Obsidian Web Clipperを新たな高みへと引き上げたTechnology

ObsidianはDefuddleを発表し、Obsidian Web Clipperを新たな高みへと引き上げた

ObsidianはDefuddleを発表し、Obsidian Web Clipperを新たな高みへと引き上げた 私はObsidianのコア理念がとても好きです：ローカルファースト、すべてはファイル、そして単純なMarkdownテキストファ...

OpenAIが突然発表した「三合一」：ブラウザ+プログラミング+ChatGPTの統合、内部で過去1年の誤りを認めるTechnology

OpenAIが突然発表した「三合一」：ブラウザ+プログラミング+ChatGPTの統合、内部で過去1年の誤りを認める

OpenAIが突然発表した「三合一」：ブラウザ+プログラミング+ChatGPTの統合、内部で過去1年の誤りを認める 2026年3月19日深夜、OpenAI本社から内部メモが流出し、『ウォール・ストリート・ジャーナル』が真っ先に原文を入手し...

2026年、自分を「自律」に縛らない！この8つの小さなことを実践すれば、健康は自然にやってくるHealth

2026年、自分を「自律」に縛らない！この8つの小さなことを実践すれば、健康は自然にやってくる

2026年、自分を「自律」に縛らない！この8つの小さなことを実践すれば、健康は自然にやってくる 新しい年が始まりましたが、昨年立てた目標は達成できましたか？毎年「やる気満々」と「諦めたい」の間で揺れ動いていませんか？ 2026年、考え方を...

努力しても痩せられないママたち、絶対にここでつまずいているHealth

努力しても痩せられないママたち、絶対にここでつまずいている

努力しても痩せられないママたち、絶対にここでつまずいている 3月も半ばを過ぎましたが、あなたのダイエット計画はどうですか？痩せましたか？どれくらい痩せましたか？ 私のダイエット経験 2月末にダイエットを決意してから、実際にはどんどん体重...

📝
Technology

AIブラウザ 24時間安定運用ガイド

AIブラウザ 24時間安定運用ガイド 本チュートリアルでは、安定して長期間運用できるAIブラウザ環境の構築方法を紹介します。 対象 AIエージェント 自動化ブラウジング Web自動化 AIアシスタント 自動テストシステム 目標 ブラウザを...