Go to Qiita Advent Calendar Top
LoginSignup
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@ktdatascience

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

Posted at

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に慣れていきましょう。

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?