Reactの基本概念とJSXの実践ガイド

Reactの基本概念

Reactとは

Reactは主要なフロントエンドフレームワークの一つで、アプリケーションはコンポーネントで構成されます。コンポーネントは独自のロジックと見た目を持つUIの一部であり、ボタンのような小さなものからページ全体まで様々な規模があります。

開発環境のセットアップ

手順1: プロジェクトの作成

コマンドラインで以下のコマンドを実行します：

npx create-react-app react-project

npmコマンドが表示されれば成功です。

npx create-react-appは固定コマンドで、react-projectはプロジェクト名です
npxは一時的にcreate-react-appをインストールし、初期化後に自動で削除します

# プロジェクトの起動
npm start
# またはyarn start（yarnがインストールされている場合）

手順2: エディタでの開設

VS Codeなどでプロジェクトを開き、package.jsonファイルを確認します。

手順3: 不要ファイルの削除

テストファイルなど不要なファイルを削除し、主要なコード構造を理解します。

JSXの基礎

JSXの概要

概念：JSXはJavaScript XMLの略で、JavaScriptコード内にHTML構造を記述します。

利点：

HTMLに似た構文で学習コストが低い
プログラマブルなHTML構造の作成が可能

JSXは標準的なJavaScript構文ではなく、@babel/plugin-transform-react-jsxパッケージで解析されます。

JSX内でのJavaScript式の使用

構文：{JavaScript式}

// 変数の表示
const userName = 'React User'
// 関数の呼び出し
const calculateScore = () => 95
// 三項演算子
const isLoggedIn = true

function MainComponent() {
  return (
    <div className="main">
      {userName}
      {calculateScore()}
      {isLoggedIn ? 'ログイン中' : '未ログイン'}
    </div>
  )
}
export default MainComponent

使用可能な式：文字列、数値、オブジェクト、配列、関数呼び出しなど。if文や変数宣言などの文は使用できません。

JSXでのリスト表示

mapメソッドを使用します：

const itemList = [
  { code: 101, title: '最初の項目' },
  { code: 102, title: '二番目の項目' },
  { code: 103, title: '三番目の項目' },
]

function ListComponent() {
  return (
    <div className="list-container">
      <ul>
        {itemList.map(item => (
          <li key={item.code}>{item.title}</li>
        ))}
      </ul>
    </div>
  )
}
export default ListComponent

JSXでの条件付き表示

三項演算子または論理AND演算子を使用：

const showMessage = true

function ConditionalComponent() {
  return (
    <div className="conditional">
      {showMessage && <p>条件を満たしたメッセージ</p>}
    </div>
  )
}
export default ConditionalComponent

テンプレートの簡潔化

複雑な条件分岐は関数にまとめます：

const renderHeader = level => {
  if (level === 1) return <h1>見出しレベル1</h1>
  if (level === 2) return <h2>見出しレベル2</h2>
  if (level === 3) return <h3>見出しレベル3</h3>
}

function HeaderComponent() {
  return (
    <div>
      {renderHeader(1)}
      {renderHeader(2)}
      {renderHeader(3)}
    </div>
  )
}

JSXでのスタイル設定

インラインスタイルとクラス名スタイル：

import './styles.css'

const inlineStyles = {
  color: 'blue',
  fontSize: '14px',
}

function StyledComponent() {
  return (
    <div>
      <span style={{color: 'green', fontSize: '16px'}}>インラインスタイル</span>
      <span style={inlineStyles}>オブジェクトスタイル</span>
      <span className="highlight">クラススタイル</span>
    </div>
  )
}

JSXの注意点

単一のルート要素が必要（<></>で代替可能）
全てのタグは閉じる必要がある
属性名はキャメルケース（class → className）
複数行のJSXは括弧で囲む

タグ: React JSX フロントエンドコンポーネント javascript

6月6日 18:58 投稿

異端開発室

Reactの基本概念とJSXの実践ガイド