JSXでReact要素を作成する方法

導入

このチュートリアルでは、JSX を使用して要素を記述する方法を学びます。JSX は、JavaScript コードで HTML のような構文を記述できる抽象化であり、標準的な HTML マークアップのように見える React コンポーネントを作成できます。JSX は React 要素のテンプレート言語であり、React がアプリケーションで提供するあらゆるマークアップの基盤となります。.

JSX を使用するとマークアップ内に JavaScript を記述できるため、配列マッピングや条件の短絡評価などの JavaScript 関数とメソッドを使用できます。.

このチュートリアルでは、ボタンのクリックイベントをマークアップ内で直接キャプチャし、CSSクラスなど、標準HTMLと構文が完全に一致しない要素をキャプチャします。このチュートリアルを完了すると、様々なJSX機能を使用して、クリックリスナーが組み込まれた要素のリストを表示するアプリケーションが完成します。これはReactアプリケーションでよく使用されるパターンであり、このフレームワークコース全体で頻繁に使用します。また、標準HTML要素とJavaScriptを組み合わせて、Reactを使って小さく再利用可能なコードを作成する方法も学習します。.

前提条件

Node.js を実行できる開発環境が必要です。
Create React App を使用してアプリを作成できるはずです。.
JavaScript の基本的な知識も必要です。

ステップ1 – React要素にマークアップを追加する

前述の通り、ReactにはJSXと呼ばれる特別なマークアップ言語があります。これはHTMLとJavaScriptの構文を組み合わせたもので、以下のような形式です。

<div>
{inventory.filter(item => item.available).map(item => (
<Card>
<div className="title"}>{item.name}</div>
<div className="price">{item.price}</div>
</Card>
))
}
</div>

.filterや.mapのようなJavaScript関数や、次のような標準的なHTML <div> ご存知でしょう。しかし、HTMLやJavaScriptのような他の部分もあります。 <card> およびクラス名。.

これは JSX です。JavaScript のパワーを使って React コンポーネントに HTML の感覚を与える特別なマークアップ言語です。.

このステップでは、既存のReact要素にHTML風のプリミティブ要素を追加する方法を学びます。まずは、JavaScript関数に標準的なHTML要素を追加し、ブラウザでコンパイルされたコードを確認します。また、Reactが最小限のマークアップでコンパイルし、クリーンなHTML出力を得られるよう、要素をグループ化します。.

まず、新しいプロジェクトを作成してください。コマンドラインで次のスクリプトを実行し、create-react-app を使用して新しいプロジェクトをインストールしてください。

npx create-react-app jsx-tutorial

プロジェクトが終了したら、次のディレクトリに移動します。

cd jsx-tutorial

新しいタブまたはターミナルウィンドウで、Create React App の起動スクリプトを使ってプロジェクトを開始します。ブラウザは変更を反映するために自動的に更新されるので、作業中は常にこのスクリプトを実行してください。

npm start

ローカルサーバーが起動します。ブラウザウィンドウでプロジェクトが開かない場合は、http://localhost:3000/ で確認できます。リモートサーバーから実行している場合は、アドレスは http://your_IP_address:3000 になります。.

ブラウザには、Create React App の一部として含まれている React アプリが読み込まれます。.

完全に新しいカスタムコンポーネントセットを構築するため、まずは定型コードをいくつか削除して空のプロジェクトを作成する必要があります。まず、テキストエディタでApp.jsを開きます。これがページに挿入されるルートコンポーネントです。すべてのコンポーネントはここから開始されます。.

新しいターミナルで、プロジェクトフォルダーに移動し、次のコマンドで src/App.js を開きます。

nano src/App.js

次のようなファイルが表示されます。

import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;

次に、関数内のimport logo from './logo.svg'の行と、return文以降のすべてを削除します。return nullに変更してください。最終的なコードは以下のようになります。

import React from 'react';
import './App.css';
function App() {
return null;
}
export default App;

保存してテキストエディターを終了します。.

最後に、ロゴを削除します。ターミナルウィンドウで、次のコマンドを入力します。

rm src/logo.svg

このSVGファイルはアプリケーションでは使用しないので、不要なファイルは適宜削除してください。長期的に見て、コードをより整理された状態に保つことができます。.

プロジェクトのこれらの部分が終わったので、JSX の側面を詳しく見ていきましょう。このマークアップ言語は React によってコンパイルされ、最終的にウェブページに表示される HTML に変換されます。細かい部分に立ち入ることなく説明すると、React は JSX を受け取り、ページの外観のモデルを作成し、必要な要素を作成してページに追加します。.

つまり、HTMLのように見えるコードを書けば、レンダリングされたHTMLも同じように表示されるということです。ただし、いくつか注意点があります。.

まず、サーバーを実行しているタブまたはウィンドウを見ると、次のように表示されます。

Output
...
./src/App.js
Line 1:8: 'React' is defined but never used no-unused-vars
...

これは、インポートしたReactコードを使用していないことを示す行です。コードにReactのインポート行「react」を追加すると、JSXをReactコードに変換するJavaScriptコードをインポートすることになります。JSXが存在しない場合は、インポートする必要はありません。.

少しJSXを追加して変更してみましょう。まずはnullをHello, Worldの例に置き換えてみましょう。

import React from 'react';
import './App.css';
function App() {
return <h1>Hello, World</h1>;
}
export default App;

ファイルを保存します。サーバーを起動した状態でターミナルを開くと、警告メッセージは消えます。ブラウザでアクセスすると、メッセージがh1要素として表示されます。.

そして、タグの下に <h1>に、I'm writing JSXという文字列を含む段落タグを追加します。コードは次のようになります。

import React from 'react';
import './App.css';
function App() {
return(
<h1>Hello, World</h1>
<p>I am writing JSX</p>
)
}
export default App;

JSX は複数行にまたがるため、式を括弧で囲む必要があります。.

ファイルを保存します。保存すると、サーバーを実行しているターミナルにエラーが表示されます。

Output
./src/App.js
Line 7:5: Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?
5 | return(
6 | <h1>Hello, World</h1>
> 7 | <p>I am writing JSX</p>
| ^
8 | )
9 | }
10 |

関数またはディレクティブからJSXを返す場合、単一の要素を返す必要があります。その要素はネストされた子要素を持つことができますが、最上位の要素がなければなりません。この場合、2つの要素を返します。.

解決策は、コードを少し変更することです。コードを空タグで囲みます。空タグとは、何も文字のないHTML要素のことです。例: <> 。.

エディターで、./src/App.js に戻り、空のタグを追加します。

import React from 'react';
import './App.css';
function App() {
return(
<>
<h1>Hello, World</h1>
<p>I am writing JSX</p>
</>
)
}
export default App;

空タグは要素を作成しますが、コードのコンパイル時に最終的なマークアップには追加されません。これにより、Reactに単一の要素を提供しながら、コードを簡潔に保つことができます。.

コードを保存し、ファイルを終了します。ブラウザがリロードされ、段落要素を含む更新されたページが表示されます。また、コードが変換されると、空のタグは削除されます。

コンポーネントに基本的な JSX を追加し、すべての JSX をコンポーネント内にネストする方法を学習しました。次の手順では、コンポーネントにスタイルを追加します。.

ステップ2 – 属性を使って要素にスタイルを追加する

このステップでは、コンポーネント内の要素にスタイルを適用し、HTML属性がJSXでどのように機能するかを学びます。Reactには多くのスタイル設定オプションがあります。JavaScriptでCSSを記述するものもあれば、プリプロセッサを使用するものもあります。このチュートリアルでは、CSSクラスとインポートしたCSSを操作します。.

コードが完成したら、スタイルを追加しましょう。テキストエディタでApp.cssを開きます。

nano src/App.css

新しいJSXから始めるため、現在のCSSは存在しない要素を参照します。このCSSは不要ですので削除できます。.

コードを削除すると、空のファイルになります。.

次に、テキストにスタイルを追加します。src/App.css に次のコードを追加します。

.container {
display: flex;
flex-direction: column;
align-items: center;
}

このコードブロックでは、 .container という CSS クラスセレクターを作成し、 display: flex を使用してコンテンツを中央に配置しました。.

ファイルを保存して終了します。ブラウザは更新されますが、何も変わりません。変更を確認するには、ReactコンポーネントにCSSクラスを追加する必要があります。コンポーネントのJavaScriptコードを開いてください。

nano src/App.js

CSS コードは、インポートライン「./App.css」ですでにインポートされています。つまり、Webpack はコードをインポートして最終的なスタイルシートを作成しますが、CSS を要素に適用するには、クラスを追加する必要があります。.

まず、テキストエディタで空のタグを見つけます <> に <div> 変化。.

import React from 'react';
import './App.css';
function App() {
return(
<div>
<h1>Hello, World</h1>
<p>I am writing JSX</p>
</div>
)
}
export default App;

このコードでは、空タグ（<>）をdivタグに置き換えました。空タグは、追加のタグを追加せずにコードをグループ化するのに便利ですが、空タグはHTML属性を受け入れないため、ここではdivタグを使用する必要があります。.

次に、クラス名を追加する必要があります。ここからJSXはHTMLと異なります。通常のHTML要素にクラスを追加する場合は、次のように記述します。

<div class="container">

しかし、JSXはJavaScriptであるため、いくつかの制限があります。その一つは、JavaScriptには予約語があることです。つまり、JavaScriptコードでは特定の単語を使用できないということです。例えば、nullという変数は既に予約語になっているため、作成できません。.

予約語の一つにclassがあります。Reactでは、この予約語を少し変更することで回避しています。classプロパティを追加する代わりに、classNameプロパティを追加します。経験則として、プロパティが期待どおりに動作しない場合は、キャメルケース版を追加してみてください。少し異なるもう一つのプロパティは、タグに使用するforプロパティです。他にもいくつかありますが、幸いなことにリストは比較的短いです。.

Reactでclass属性がどのように使われるかがわかったので、コードを更新してスタイルを追加しましょう。テキストエディタで、divタグにclassName="container"を追加してください。

import React from 'react';
import './App.css';
function App() {
return(
<div className="container">
<h1>Hello, World</h1>
<p>I am writing JSX</p>
</div>
)
}
export default App;

ファイルを保存します。保存すると、ページが再読み込みされ、コンテンツが中央に配置されます。.

className属性はReact固有のものです。ほとんどのHTML属性は、変更を加えることなくJSXに追加できます。例えば、テキストエディタに戻って、要素にgreetingというIDを追加してみましょう。 <h1> 独自のコードを追加してください。標準的なHTMLのようになります。

import React from 'react';
import './App.css';
function App() {
return(
<div className="container">
<h1 id="greeting">Hello, World</h1>
<p>I am writing JSX</p>
</div>
)
}
export default App;

ページを保存してブラウザをリロードしてください。これで完了です。.

ここまではJSXは標準的なマークアップのように見えますが、JSXの利点は、HTMLのように見える一方でJavaScriptのパワーを備えていることです。つまり、変数を割り当ててプロパティ内で参照できるということです。プロパティを参照するには、引用符ではなく中括弧（{}）で囲みます。.

テキストエディターで、機能を参照するために次の強調表示された行を追加します。

import React from 'react';
import './App.css';
function App() {
const greeting = "greeting";
return(
<div className="container">
<h1 id={greeting}>Hello, World</h1>
<p>I am writing JSX</p>
</div>
)
}
export default App;

このコードでは、return ステートメントの上に、値 "greeting" を持つ greeting という変数を作成し、それをタグの id 属性の変数に割り当てました。 <h1> あなた自身を参照しました。.

ファイルを保存して終了します。ページは同じですが、IDタグが追加されます。.

これまではいくつかの要素を単独で操作してきましたが、JSX を使用すると多くの HTML 要素を追加し、それらをネストして複雑なページを作成できます。.

これを実証するために、絵文字リストを含むページを作成します。これらの絵文字.

まず、ページにいくつか要素を追加する必要があります。テキストエディタでsrc/App.jsを開いてください。この時点では開いたままにしておいてください。.

nano src/App.js

まず、次のハイライトを追加して絵文字のリストを追加します。

import React from 'react';
import './App.css';
function App() {
const greeting = "greeting";
return(
<div className="container">
<h1 id={greeting}>Hello, World</h1>
<p>I am writing JSX</p>
<ul>
<li>
<button>
<span role="img" aria-label="grinning face" id="grinning face">😀</span>
</button>
</li>
<li>
<button>
<span role="img" aria-label="party popper" id="party popper">🎉</span>
</button>
</li>
<li>
<button>
<span role="img" aria-label="woman dancing" id="woman dancing">💃</span>
</button>
</li>
</ul>
</div>
)
}
export default App;

ここにタグがあります。

これは別個に配置され、.
タグ付きの絵文字も使えます。 <span> いくつかのプロパティで囲んでいます。各span要素には、imgロールに設定されたrole属性があります。これは、アクセスするソフトウェアに、その要素が画像のように動作することを知らせます。さらに、各 <span> ariaタグとemojiというid属性があります。ariaタグは、スクリーンリーダーを使用する訪問者に表示されている内容を伝えます。このidは、後でイベントを記述する際に使用します。.
このようにコードを記述すると、セマンティック要素を使用することになり、スクリーンリーダーでページにアクセスしやすく解析しやすくなります。.
ファイルを保存して終了します。ブラウザが更新され、次のような画面が表示されます。
スタイルを追加します。テキストエディタでCSSコードを開きます。
```
nano src/App.css
```
フォントサイズを大きくしながらボタンのデフォルトの背景と境界線を削除するには、次の強調表示されたコードを追加します。
```
.container {
display: flex;
flex-direction: column;
align-items: center;
}
button {
font-size: 2em;
border: 0;
padding: 0;
background: none;
cursor: pointer;
}
ul {
display: flex;
padding: 0;
}
li {
margin: 0 20px;
list-style: none;
padding: 0;
}
```
このコードでは、フォントサイズ、マージン、その他のパラメータを使用してボタンの外観を調整し、フォントを変更しています。また、リストスタイルを削除し、要素に display: を追加しています。