Vite で Ract のプロジェクトを作成する

Vite で Ract のプロジェクトを作成する

Vue のフレームワークを中心にお届けしてきましたが、React でやったらどうなるのというお問い合わせも多いので今回は、これまで Vue で紹介してきた事を React でやったらどうなるかということで、React の実施例をお届けします。

アメリカでは React の方が主流

Vue は便利なフレームワークで初心者でも React に比べると少しですが入りやすいという利点があります。しかし、アメリカの開発現場では React の方が利用されるケースも多く求人も多くなっています。

そこで、今回は、これまで Vue で紹介してきた事を React のフレームワークを使って書くとどんな感じになるかを紹介していく事にしました。

Vue の際は、Javascript を利用するケースを中心にお伝えしてきましたが、今回は、アメリカの開発現場で React と組み合わせて利用される事の多い、Typescript でプログラムを書く方針でお届けしていきます。

Typescript を利用する理由

Typescript は Javascript の拡張版です。記述自体はとても似ています。Typescript が利用される理由は、Javascript に比べると変数の「型」の制約が厳格で、大きなプロジェクトなどで、複数の人が開発に関わる場合、インターフェースなどをより厳格に決める事ができることを初め、コードを管理する上で型が厳密に管理されるので有利など幾つかの理由が挙げられています。

Typescript で記述されたコードはそのままでは、Web ブラウザなどで実行できないので、コードをコンパイルして Javascript の記述にして利用します。

Javascript との混在が一応可能になっているので、徐々に移行することも可能です。しかし、今回の連載では最初から Typescript を利用する前提で紹介していきます。

したがって今回の連載の前提は：

＊　React をフレームワークとして使用

＊　Typescript を利用

＊　プロジェクトの作成に Vite を利用

という前提です。前回の Vue に続いて、パッケージ管理アプリのnpmを利用して、Vite を使ってプロジェクトを作成します。

既に、NodeJSがインストールされている前提で紹介していきます。

プロジェクトの作成は以下のように行います。今回は、「react-ts-tutorial」という名前で作成しています。

% npm create vite＠latest react-ts-tutorial --template react

Need to install the following packages:

  create-vite＠latest

Ok to proceed? (y)

✔ Select a framework: › react

✔ Select a variant: › react-ts

Scaffolding project in /home/guest/Documents/react-ts-tutorial...

Done. Now run:

  cd react-ts-tutorial

  npm install

  npm run dev

% cd react-ts-tutorial

% npm install

以上でプロジェクトを作成して必要なモジュールをインストールできます。

React Router を使ってチュートリアルの例を表示

今回は、前回の Vue の公式チュートリアルのようにオンラインでチュートリアルを実行・表示できないので、実際にプロジェクトを作成して各チュートリアルをページ事に表示できるようにします。 ページ毎の表示ができるように、React Route を利用します。

まず、「react-router-dom」をプロジェクトにインストールします。

% npm install react-router-dom

インストールができたら、「App.tsx」を編集します。 React を Typescript を利用して開発する場合、Vue の部品に相当するファイルが「xxx.tsx」というファイルになります。

import React, { useState } from "react";

import { HashRouter, Route, Routes } from "react-router-dom";

import Step1 from "./tutorial/step1";

function App() {

  return (

    <React.Fragment>

      <HashRouter>

        <Routes>

          <Route path="/step1" element={<Step1 />} />

        </Routes>

      </HashRouter>

    </React.Fragment>

  );

}

export default App;

（＊）React Router の記述の方法が Version 6 から変更されています。以前は「Switch」を使っていた部分が Version 6 からは、「Routes」を使うようになっています。以前のバージョンで開発されていた方は注意が必要です。

なおこの例では、「ハッシュルータ(HashRouter）」を採用しているので、このページを Web ブラウザで指定する場合には、「localhost/#/step1」のように指定する必要があります。この方法だと、このサービスを公開する際に、Web サーバー側での特別な設定は必要ありません。（＃を使うことで、ページ内の場所を示すようになるので Web ブラウザが「違うページ」を Web サーバーにリクエストを送らないため）

通常のルータを利用する場合には、代わりに「BrowserRouter」を使用しますが、この場合は、Web ブラウザは別のページが指定されたと思って、Web サーバーにそのページのリクエスを送ってしまうので、Web サーバー側に同じページという事を教える設定が必要になります。（利用する Web サーバーによって設定方法が違います）

あとは、この部分で呼び出している「./tutorial/step1.tsx」というファイルを作成すれば良い事になります。

Hello World

Vue の公式チュートリアルのステップ１は「Hello World!」を表示する事でした。

今回は React で同じ事をするのに、「step1.tsx」というファイルを作成して、表示させるようにしています。 「tutorial」というフォルダを作ってその中に各ステップの例を実装していく事にします。

import React from "react";

import "./styles/step1.css";

export default function Step1(): JSX.Element {

  return (

    <React.Fragment>

      <h1 className="title">Hello World!</h1>

    </React.Fragment>

  );

}

これだけです！ React の場合、Typescript(Javascript)のプログラムの中に HTML の記述を書くイメージで記述します。 実際は、この HTML の記述は JSX と呼ばれる記述で、「仮想 DOM」と呼ばれる物です。したがって、本来の HTML とは違った部分も多いので、Vue よりは学習に時間がかかるされています。 しかし、実際は HTML の記述に非常に近く、慣れてしまえば実際には Vue と余り差がないと言えます。

Typescript なので関数（この場合「step1()」）が返すデータの型（この場合は「 JSX の記述（JSX.Element）」）を指定できます。この型が呼び出し元と一致しない場合は、コンパイル時にエラーになるので、このようなインターフェースの違いによる問題を事前に防ぐ事が可能になります。

Vue の場合は、「xxx.vue」のファイルには、HTML/Javascript/CSS を別々の場所に書く形式でしたが、React では、基本的に Typescript（Javascript）のファイルに全部書くような形になります。CSS は、通常は CSS ファイルを作成してインポートする形になります。上の例では「./styles/step1.css」をインポートしています。

CSS の例です。

.title {

  text-align: center;

}

今回の例では、HTML に相当する部分は以下の部分になります。

<h1 className="title">Hello World</h1>

この記述は Typescript（Javascript）の記述の中に書かれているので、本来 HTML では「class」を使って CSS のタグを指定しますが、Typescript（Javascript）では「class」という単語は予約されているので、「className」を代わりに利用するところが違っています。

まとめ

今回から、これまで Vue で紹介してきた事を React でやってみる事にします。 完全に同じことができない場合もありますが、ほぼ同じ事ができるのでできるだけ Vue で紹介した事に沿って紹介していく予定です。

今回はステップ１として、「Hello World!」を表示するケースを紹介しました。 このレベルでは、Vue も React も殆ど差がありません。違いは、基本的な「部品」の書き方が違うだけで、この基本を身につけてしまえば同じという事です。