ReactJS - インストール：ビギナーズガイド

こんにちは、未来のReact開発者さんたち！ReactJSの素晴らしい世界への旅にご案内できることを、とても嬉しく思います。私のようなコンピュータサイエンスの教師歴が長い人間として、Reactを学ぶことは自転車に乗るのと同じだと言えます。最初は難しいように見えるかもしれませんが、一度コツを抑えれば、すぐにスムーズに進むことでしょう！

ReactJS - Installation

ReactJSとは？

インストールに入る前に、ReactJSとは何か簡単に理解しましょう。Reactは、特にシングルページアプリケーションのためのユーザーインターフェースを構築するための人気のJavaScriptライブラリです。再利用可能なUIコンポーネントを作成し、それらが自身の状態を管理することに焦点を当てており、複雑なインターフェースの構築を容易にします。

では、手を汚してReactの設定を始めましょう！

ツールチェーン：あなたのReactツールキット

Reactを扱う際には、「ツールチェーン」と呼ばれる一連のツールを使用します。これをReactのスイスアーミーナイフと考えれば良いでしょう。素晴らしいウェブアプリケーションを構築するために必要な全てのものがここにあります。

ツールチェーンの主要なツール

ツール	目的
Node.js	JavaScriptランタイム
npm (Node Package Manager)	JavaScriptのパッケージマネージャー
Babel	JavaScriptコンパイラ
Webpack	モジュールバンドラー
ESLint	コードリンター
Jest	テストフレームワーク

これらの用語が未知の言語のように聞こえるかもしれませんが、焦らないでください。それぞれを詳しく説明していきます！

ステティックサーバー：あなたのローカル遊び場

複雑な設定に飛び込む前に、まず簡単なものから始めましょう。ステティックサーバーです。これにより、自分のコンピュータ上でローカルにReactアプリケーションを提供できます。

シンプルなステティックサーバーの設定

まず、Node.jsがインストールされていることを確認してください。nodejs.orgからダウンロードできます。
ターミナルまたはコマンドプロンプトを開き、以下のコマンドを実行します：

npm install -g serve

このコマンドは、システム全体に'serve'パッケージをインストールします。

プロジェクト用の新しいディレクトリを作成し、移動します：

mkdir my-react-app
cd my-react-app

シンプルなHTMLファイル「index.html」を作成します：

<!DOCTYPE html>
<html>
<head>
<title>私の最初のReactアプリ</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, React!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>

次に、serveコマンドを実行します：

serve

これで、アプリが提供されている場所を教えてくれるメッセージが表示されるはずです。通常は「http://localhost:5000」です。このURLをブラウザで開くと、最初のReactアプリが表示されます！

Babelコンパイラ：未来を翻訳する

ツールチェーンからBabelを思い出してください。この魔法の翻訳者との出会いの時間です！Babelは、ブラウザがまだサポートしていない最新のJavaScript機能を利用できるようにするJavaScriptコンパイラです。

なぜBabelが必要か？

異なる言語を話す友達に手紙を書いていると考えてください。Babelは、その手紙を友達の言語に即座に変換できる翻訳者です。Reactの世界では、Babelが現代のJavaScriptとJSX（Reactのシンタックス拡張）をすべてのブラウザが理解できるバージョンのJavaScriptに翻訳します。

プロジェクトでのBabelの使用

実際には、先ほどのシンプルなHTMLファイルにBabelをすでに含んでいます。その部分を分解してみましょう：

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
// あなたのReactコードここに
</script>

最初の行はBabelスタンドアロンライブラリを含んでいます。二つ目の行はBabelに、スクリプトタグ内のコードをコンパイルするように指示しています。

Create React Appツールチェーン：オールインワンソリューション

Reactの水を指先で試してみたところで、Create React Appツールチェーンで一歩進んでみましょう。これは、学習と新しいReactシングルページアプリケーションの構築に適した快適で機能豊富な環境です。

Create React Appの設定

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

npx create-react-app my-app

完了したら、新しいアプリに移動します：

cd my-app

開発サーバーを起動します：

npm start

新しいReactアプリが自動的にブラウザで開き、通常は「http://localhost:3000」で表示されます。

どのようなものが含まれている？

Create React Appは完全に設定された開発環境を提供します。中身を見てみましょう：

機能	説明
React	コアのReactライブラリ
webpack	コードと資産をバンドル
Babel	現代のJavaScriptをコンパイル
ESLint	コードのエラーをチェック
Jest	テストを書くことができる
Hot Reloading	ブラウザで即座に変更を確認

最初のコンポーネント

簡単なReactコンポーネントを作成してみましょう。src/App.jsを開き、以下の内容に置き換えます：

import React from 'react';

function App() {
return (
<div>
<h1>私のReactアプリへようこそ</h1>
<p>これは私の最初のコンポーネントです！</p>
</div>
);
}

export default App;

ファイルを保存し、ブラウザを確認します。新しいコンポーネントがレンダリングされているはずです！

結論

おめでとうございます！あなたはReact開発の素晴らしい世界への第一歩を踏み出しました。私たちは多くのことをカバーしました。シンプルなステティックサーバーの設定から、強力なCreate React Appツールチェーンの使用まで。

Reactを学ぶことは旅です。すべてがすぐに理解できない也不用惊慌。続けて練習し、構築し、最も重要なことは、楽しみ続けてください！

次のレッスンでは、Reactコンポーネントについて深く掘り下げ、より複雑なアプリケーションを構築します。それまでは、ハッピーコーディングを！

Credits: Image by storyset