はじめに

5日間でReactの基礎を習得する試みの1日目です。1日目は、Reactとは何かをざっくりと学び、新規プロジェクトを作ってみます。

私はC#やPythonを仕事で使っているため、オブジェクト指向の言語的な考え方や、Pythonでの例えを使って理解を進めます。同じような境遇の方の理解の助けになれば幸いです。

Reactとは

Meta社(Facebook社)が開発したJavaScriptのライブラリのことです。

ライブラリということは、pythonでいうところのpandasやnumpyのようなものですね。
つまり、pythonにおけるpandasのDataFrameのように、JavaScriptのコードを書きやすくするようなコードを提供してくれるのがReactというわけです。

Reactライブラリを使ってみる

Reactはただのライブラリなので、HTMLファイルにReactライブラリを読み込むコードをjavascriptで書けば、ブラウザ上で動きます。(必ずしもNode.jsなどをインストールする必要はありません。)

ChatGPTの協力のもと、以下のHTMLファイル(test.html)を作成しました。test.htmlをブラウザで開けば、"Hello World"と表示されます。

test.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>React Simple Example</title>
</head>
<body>
    <div id="root"></div>
    <!-- ReactとReactDOMのライブラリを読み込む -->
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    
    <script>
        'use strict';
        // React.Componentを継承してHelloWorldクラスを定義
        class HelloWorld extends React.Component {
            render() {
                // h1タグに'Hello, World!'と記載されたものが返る
                return React.createElement('h1', null, 'Hello, World!');
            }
        }
        // ReactDOMのrender関数を呼び出し、上で定義したHelloWorldコンポーネントを
        // idが'root'のdivタグに入れこむ
        ReactDOM.createRoot(document.getElementById('root'))
            .render(React.createElement(HelloWorld, null));
    </script>
</body>
</html>

コードの簡易解説

Reactライブラリが提供している2つのクラス(React.Component, ReactDOM)を使っています。
まず、React.Componentクラスを継承したクラスを定義します。そして、ReactDOM.renderの引数に[定義したクラスのインスタンス, 入れたいHTMLの要素] を指定すれば、そのインスタンスの内容が画面に描画されます。

用語整理

解説部分では、オブジェクト指向の言語で一般的に使われるインスタンス等の言葉を使ってしまいましたが、Reactでは以下のような言葉を使うようです。

React.Componentクラスを継承したクラスを"クラスコンポーネント"と呼びます
クラスコンポーネントのインスタンスのことを"React要素"と呼びます

コンポーネントアプローチ

上の例では、HelloWorldというクラスコンポーネントを作成しました。HelloWorldはただのh1タグを持つだけのコンポーネントですが、当然別のタグも持たせたり、h1タグに色指定をしておくこともできます。
このような、コンポーネントという細かい部品をたくさん作り、組み合わせてUI全体を作っていくというのがReactのコンポーネントアプローチです。

デザインが得意な方がコンポーネントという部品だけをたくさん作って、カタログにして配布すれば、みんなで良いデザインを使い回すこともできるわけですね！

npm, Node.jsの導入

ライブラリの依存関係

上ではReactを使うにあたって、Node.jsは必ずしも必要ないと書きました。
ただし、より高機能なUIを楽して作ろうと思ったとき、色々なライブラリを使う必要がでてきます(CSSを書きやすくするライブラリ, アニメーションを作りやすくライブラリなど)。これらのライブラリには、それぞれ依存関係があり、使用するライブラリの数が増えるほど依存関係の管理が複雑になります。

ライブラリマネージャーに任せよう

そこで、npmやyarnといったライブラリマネージャーを使う必要がでてきます(pythonでいうpipのようなものですね)。これらを使えば、自動的に依存関係を処理してくれます。いずれもNode.js上で動くため、Node.jsもインストールしないといけなくなります。

Node.jsとは、ブラウザの外でもjavascriptが動くようになる実行環境です。詳細が知りたい場合はhttps://qiita.com/non_cal/items/a8fee0b7ad96e67713eb を読みましょう。

Node.js, npmのインストール

Windowsの場合、以下の記事に従ってインストールしましょう。

Mac, Linuxの場合、以下の記事に従ってインストールしましょう。

Reactプロジェクトを作ってみる

Reactプロジェクトを作ってみましょう。
Reactの公式ホームページを読むと、"できる限りフレームワークを使いましょう"的なことが書いてありました。いくつかフレームワークが紹介されていますが、Next.jsに関する記事がよくQiitaに上がっている印象があったため、Next.jsを選ぶことにしました。

https://qiita.com/hukuryo/items/2c07c52ff3386d5d75b9 によると、Node.jsを使った方がフレームワークを使わずにReactを動かすよりも、読み込み速度が速くなるようです。

Next.jsの新規プロジェクトの作成

以下のコマンドを実行することで、Next.jsを使うための諸々の設定がされた新規のプロジェクトが作られます。

npx create-next-app@latest

このコマンドを実行すると、いくつかの質問が出てきましたが、以下のように回答しました。

✔ What is your project named? … my-app
✔ Would you like to use TypeScript? … No
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … No
✔ Would you like to use `src/` directory? … Yes
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the default import alias (@/*)? … Yes
✔ What import alias would you like configured? … @/*

これで、"my-app"というプロジェクトが作成されました。

プロジェクトの起動

my-appディレクトリにて、以下のコマンドを実行しましょう。

npm run dev

以下の画面が表示されたら成功です。

最後に

簡単なコードを動かしてみたことで、Reactが"ただのjavascriptのライブラリである"ということが理解できました。次回からは、Reactの記法・コンポーネントについて勉強します。

何か間違いがあれば、是非コメントを頂けると助かります！

参考文献