👨‍💻

【React】コードを書く前の基本概念を理解する

に公開
JavaScript
React
frontend
web開発
コンポーネント
idea

Reactの基本概念を理解しよう

はじめに

Reactは現在、世界で最も人気のあるフロントエンドライブラリの一つです。この記事では、Reactを初めて学ぶ方に向けて、Reactの基本的な概念をわかりやすく解説します。コンポーネント、JSX、アプリケーション構造など、Reactを理解する上で欠かせない要素を順番に見ていきましょう。

Reactとは

世界で最も人気のあるフロントエンドライブラリ

Reactは、Meta社(旧Facebook)が開発したJavaScriptライブラリで、ユーザーインターフェース(UI)を構築するために使用されます。WebサイトやWebアプリケーションの画面を効率的に作成できることから、多くの企業や開発者に支持されています。

Reactの特徴は、コンポーネントを組み合わせてUIを構築する点にあります。HTML、CSS、JavaScriptを組み合わせて「コンポーネント」という小さな部品を作り、それらを階層構造で組み合わせることで、大規模なアプリケーションを構築していきます。

Reactの基本思想

Reactの基本思想は「見た目と機能を一緒にする」ことです。従来のWeb開発では、HTML(構造)、CSS(見た目)、JavaScript(動作)を別々のファイルで管理することが一般的でした。しかしReactでは、UI部品ごとにこれらを一つにまとめて管理します。

この考え方により、コンポーネント単位で開発や保守がしやすくなり、再利用性も高まります。

コンポーネントという考え方

コンポーネントとは何か

コンポーネントとは、自分自身をHTMLにレンダリングする方法を知っている関数です。もう少し具体的に言うと、コンポーネントはJavaScriptの関数であり、その関数が返しているものがJSX(後述)になります。

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

上記の例では、Welcomeというコンポーネントが<h1>タグを返しています。このように、関数として定義されたコンポーネントが、HTMLのような見た目を返すのがReactの基本的な仕組みですね。

コンポーネントの階層構造

Reactでは、小さなコンポーネントを組み合わせて、より大きなコンポーネントを作っていきます。これは、レゴブロックを組み立てるようなイメージです。

この図のように、最上位のAppコンポーネントの下に、Header、Main、Footerといった子コンポーネントがあり、さらにその下に孫コンポーネントが配置されます。このような階層構造を作ることで、複雑なアプリケーションでも整理された状態を保てます。

コンポーネント設計の重要性

どのようにコンポーネントを分割するかを考えることは、Reactアプリケーション設計の重要な部分です。適切な粒度でコンポーネントを分割することで、コードの再利用性や保守性が向上します。

一般的には、以下のような基準でコンポーネントを分割します。

  • 単一責任の原則: 一つのコンポーネントは一つの役割だけを持つ
  • 再利用性: 複数の場所で使う可能性がある部分は独立したコンポーネントにする
  • 適切なサイズ: 大きすぎず小さすぎない、理解しやすいサイズに保つ

JSX - JavaScriptでHTMLを書く

JSXとは

JSXは、JavaScriptの文法を拡張してHTMLのような構文を使えるようにしたものです。つまり、JavaScriptの中にHTMLを書くことができるようになります。

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

一見するとHTMLのように見えますが、これは実際にはJavaScriptのコードです。この特殊な構文がJSXであり、Reactの大きな特徴の一つとなっています。

JSXの仕組み(Babel)

JSXは、ブラウザが直接理解できる文法ではありません。実際には、裏側でBabelなどのトランスパイラ(変換ツール)が動いていて、JSXを通常のJavaScriptに変換しています。

BabelがHTMLのように見えるJSXを、ブラウザが理解できるJavaScriptに変換してくれるのが重要なポイントです。そのため、Babelをインストールしていない環境ではJSXは使えません。

JSXの3つの重要なルール

JSXを書く際には、以下の3つのルールを守る必要があります。

ルール1: JSXは1つの親要素で囲む必要がある

JSXでは、単一の親要素しか返すことができません。ただし、子要素は何個あっても問題ありません。

// ❌ 間違い: 複数の親要素を返している
function Bad() {
  return (
    <h1>タイトル</h1>
    <p>内容</p>
  );
}

// ✅ 正しい: 1つの親要素で囲んでいる
function Good() {
  return (
    <div>
      <h1>タイトル</h1>
      <p>内容</p>
    </div>
  );
}

ルール2: コンポーネントは必ず閉じる

HTMLでは自己終了タグを省略できる場合がありますが、JSXではすべてのタグを/>で閉じる必要があります。

// ✅ 正しい
<img src="image.jpg" />
<br />
<input type="text" />

ルール3: クラスはclassName属性を使う

HTMLではclass属性を使いますが、JSXではclassNameを使います。これは、classがJavaScriptの予約語(特別な意味を持つ単語)であるためです。

// ✅ 正しい
<div className="container">コンテンツ</div>

// ❌ 間違い
<div class="container">コンテンツ</div>

JSXで変数を表示する

JSXでは、中括弧{}を使うことで、JavaScriptの変数や式を動的に表示できます。

const name = "React";
const year = 2024;

function Greeting() {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>今年は{year}年です</p>
      <p>来年は{year + 1}年になります</p>
    </div>
  );
}

この機能により、動的なコンテンツを簡単に表示できるようになります。

Reactフラグメントの使い方

複数の要素を1つの親要素で囲みたいが、実際にはDOMに余分な要素を追加したくない場合があります。そのような場合に使用するのがReactフラグメントです。

// divで囲むと余分なDOM要素が追加される
function WithDiv() {
  return (
    <div>
      <h1>タイトル</h1>
      <p>内容</p>
    </div>
  );
}

// フラグメントを使うとDOM要素を追加せずに複数要素を返せる
function WithFragment() {
  return (
    <>
      <h1>タイトル</h1>
      <p>内容</p>
    </>
  );
}

<></>という短縮記法を使うことで、余分なDOM要素を作らずに複数の要素をまとめることができます。

Reactアプリケーションの構造

Appコンポーネント - アプリケーションの起点

Reactアプリケーションには、エントリーポイント(起点)となるコンポーネントがあります。一般的にはAppという名前のコンポーネントがその役割を担います。

function App() {
  return (
    <div className="App">
      <Header />
      <Main />
      <Footer />
    </div>
  );
}

最上位にAppコンポーネントがあるので、この中に他のコンポーネントを組み込んでいくことでアプリケーション全体を構築していきます。

コンポーネントの階層構造を作る

Appコンポーネントを起点として、以下のような階層構造でアプリケーションを組み立てていきましょう。

このように、トップダウンでコンポーネントを配置していくことで、アプリケーション全体の構造が把握しやすくなります。

コンポーネントを分割して管理する

インポートとエクスポートの基本

他のファイルで定義されたコンポーネントを使用するためには、インポートとエクスポートの仕組みを理解する必要があります。

エクスポート(公開)する側のファイルでは、以下のように記述します。

// Header.jsx
function Header() {
  return <header>ヘッダー</header>;
}

export default Header;

インポート(使用)する側のファイルでは、以下のように記述します。

// App.jsx
import Header from './Header';

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

この仕組みにより、コンポーネントをファイル単位で分割して管理できます。

デフォルトエクスポートと名前付きエクスポート

JavaScriptのエクスポートには、デフォルトエクスポートと名前付きエクスポートの2種類があります。

デフォルトエクスポート

ファイルごとに1つだけ定義でき、インポート時に任意の名前を付けられます。

// Button.jsx
function Button() {
  return <button>クリック</button>;
}

export default Button;

// App.jsx
import Button from './Button';  // 任意の名前でインポート可能
import MyButton from './Button'; // これでもOK

名前付きエクスポート

1つのファイルから複数の要素をエクスポートでき、インポート時は同じ名前を使う必要があります。

// utils.jsx
export function formatDate(date) {
  return date.toLocaleDateString();
}

export function formatTime(time) {
  return time.toLocaleTimeString();
}

// App.jsx
import { formatDate, formatTime } from './utils';

ファイル名とコンポーネント名の関係

コンポーネントを管理しやすくするために、ファイル名とコンポーネント名は同じにすることが重要です。

Header.jsx  → Header コンポーネント
Footer.jsx  → Footer コンポーネント
Button.jsx  → Button コンポーネント

この規則に従うことで、どのファイルにどのコンポーネントが定義されているかが一目でわかり、開発効率が向上します。

CSSや画像のインポート

コンポーネントと同様に、CSSファイルや画像などのアセット(資材)もインポートして使用できます。

// Header.jsx
import './Header.css';        // CSSファイルのインポート
import logo from './logo.png'; // 画像ファイルのインポート

function Header() {
  return (
    <header className="header">
      <img src={logo} alt="ロゴ" />
      <h1>マイサイト</h1>
    </header>
  );
}

export default Header;

コンポーネントごとにCSSファイルを分けて管理することが一般的です。これにより、スタイルの適用範囲が明確になり、保守性が向上します。

まとめ

この記事では、Reactの基本概念について解説しました。重要なポイントをおさらいしましょう。

  • Reactはコンポーネントを組み合わせてUIを構築するライブラリである
  • コンポーネントは見た目と機能を一緒に管理する単位である
  • JSXはJavaScriptの中にHTMLのような構文を書ける仕組みである
  • Babelがjsxを通常のJavaScriptに変換している
  • Appコンポーネントを起点として階層構造でアプリケーションを構築する
  • インポートとエクスポートを使ってコンポーネントを分割管理する

これらの基本概念を理解することで、Reactでのアプリケーション開発の第一歩を踏み出せます。実際に手を動かしながら、少しずつReactに慣れていきましょう。

Discussion