ReactJS - 例：初学者の包括ガイド

こんにちは、将来の開発者さんたち！ReactJSの素晴らしい世界への興奮的な旅にあなたのガイドとして参加できることを嬉しく思います。コンピュータサイエンスを10年以上教えてきた者として、Reactの力を理解したときに無数の生徒が輝く姿を見てきました。では、一緒に素晴らしいものを作り上げましょう！

ReactJS - Example

ReactJSとは？

まず、例に進む前にReactJSとは何か簡単に説明しましょう。レゴブロックで家を建てているとしましょう。ReactJSは、自分で形や色を変えられる魔法のレゴブロックのようなものです！これは、ユーザーインターフェース（ウェブサイトやアプリで見たり操作したりする部分）を非常に賢く効率的に構築するのに役立つJavaScriptライブラリです。

ReactJSの特徴

Reactの特別なポイントをいくつか見てみましょう：

特徴	説明
コンポーネントベース	Reactは、コンポーネントという再利用可能なパーツを使ってUIを構築できるようにします
仮想DOM	実際のDOMの軽量コピーで、更新がより速くなります
JSX	HTMLのようなコードをJavaScriptで書けるシンタックスエクステンション
単方向データフロー	データは一方向に流れるため、アプリがより予測可能になります
React Native	Reactを使ってモバイルアプリを構築できる

概要を理解したところで、簡単なReactの例を作成して、これらの特徴を実践で見てみましょう！

React環境の設定

まず第一に、開発環境を設定する必要があります。心配しないでください、意外と簡単です！Create React Appというツールを使って、一命令ですべてを設定します。

ターミナルを開き、以下のコマンドを入力します：

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

これで、初めてのReactアプリを作成しました。ブラウザを開き、http://localhost:3000にアクセスすると、デフォルトのReactアプリが動作しているはずです。

初めてのコンポーネントを作成する

さあ、初めてのReactコンポーネントを作成しましょう。簡単な挨拶コンポーネントを作って、誰かに「Hello」と言います。

src/App.jsファイルを開き、以下の内容に置き換えます：

import React from 'react';

function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}

function App() {
return (
<div className="App">
<Greeting name="React Learner" />
</div>
);
}

export default App;

これを分解すると：

Reactをインポートします（明示的に使っていないけれど、JSXのために必要です）。
Greetingコンポーネントを定義し、props（プロパティ）を引数として受け取ります。
GreetingコンポーネントはJSXを返します。これはHTMLのように見えますが、実際にはJavaScriptです。
AppコンポーネントでGreetingコンポーネントを使い、nameプロパティを渡します。

このファイルを保存すると、ブラウザに「Hello, React Learner!」が表示されるはずです。おめでとうございます、あなたは初めてのReactコンポーネントを作成しました！

コンポーネントに状態を追加する

さあ、アプリを少しインタラクティブにして、状態を追加しましょう。クリックすると名前が変わるボタンを作成します。

App.jsを以下のように更新します：

import React, { useState } from 'react';

function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}

function App() {
const [name, setName] = useState('React Learner');

const changeName = () => {
setName('React Expert');
};

return (
<div className="App">
<Greeting name={name} />
<button onClick={changeName}>エキスパートになる</button>
</div>
);
}

export default App;

新しい部分は以下の通りです：

useStateをインポートし、状態をコンポーネントに追加します。
useStateを使ってname状態変数とsetName関数を作成します。
changeName関数を作り、name状態を更新します。
ボタンを追加し、クリック時にchangeNameを呼び出します。

今、\"エキスパートになる\"ボタンをクリックすると、挨拶が\"Hello, React Learner!\"から\"Hello, React Expert!\"に変わるはずです。これはReactの単方向データフローを示しています：状態の変更がコンポーネントの再レンダリングを引き起こします。

仮想DOMの使用

クリックしたときにページ全体がリロードしない理由は何でしょうか？ここでReactの仮想DOMが役立ちます。状態を変更すると、Reactは新しい仮想DOMツリーを作成し、前のものと比較して、実際のDOMの変更が必要な部分だけを更新します。これにより、アプリが超高速かつ効率的になります！

結論

それでは、皆さん！簡単なReactアプリを作成し、Reactの主要な特徴であるコンポーネント、プロパティ、状態、仮想DOMを実践で体験しました。Reactの可能性はまだまだ浅いところしか触れていませんが、この例がその力と柔軟性を感じていただけることを願っています。

コードを学ぶことは新しい言語を学ぶのと同じです。時間、練習、忍耐が必要です。すぐにすべてが理解できない場合はくじけず、続けて実験し、構築し、そして最も重要なのは、楽しむことです！

次のレッスンでは、より高度なReactの概念に進みます。それまでに、ハッピーコーディングを！そして、あなたのコンポーネントが常にスムーズにレンダリングされることを祈っています！

Credits: Image by storyset