はじめに

二年目の竹村です。
最近、Reactを触り始めまして、今回は自宅のPCに色々と試せる環境を作ってみました。
参考となるサイトもあるので、比較的容易にできたのかなと思っています。
OSはUbuntu Studio 22.04なのですが、バージョンの管理がやりやすいnodejsのディストリビューションのnodebrewの導入から、初期構築、ページとURLを対応させるrouterの導入までやってみました。

homebrewのインストール

homebrewが入っていない場合は、こちらの公式サイトから導入してください。
コマンド実施後、「==> Next steps:」に出てくるコマンドまで実施する必要があります。
ubuntuのインストール例はこちら。かなり丁寧に説明されています。
https://qiita.com/dev-cho/items/7a75e3852c4074a7db63

nodebrewのインストール

このページのコマンドを実行するとインストールできます。
基本的にはコマンド叩くだけでいいのですが、
私の環境では、パスを通す必要がありました。
nodeは既存のnodeのパスと紐付いていて、npmコマンドなどは使えない状態でした。
nano ~/.bashrc
を実行して、一番下の行に次の1行を追加して保存。
export PATH=$HOME/.nodebrew/current/bin:$PATH
下記コマンドで反映させました。
source ~/.bashrc
これら、問題なくパスがるようになりました！！
ChatGPTさんありがとう。
ただし、環境によっては不具合が出る可能性もあるので、すでにnodeを使っている場合なんかは気をつける必要がありそうです。
こんな形で出てきたら大丈夫です。

$ which node
/home/XXXXXX/.nodebrew/current/bin/node
$ which npm
/home/XXXXXX/.nodebrew/current/bin/npm
$ which npx
/home/XXXXXX/.nodebrew/current/bin/npx

nodebrewはプロジェクトごとに使用するnodeのバージョンが違っていても、容易にバージョンを切り替えることができるのがメリットです。

ViteとReactの導入

こちらのページを参考としました。
言語選択のところでは、TypeScript+SWCを選びました。
npm installは結構時間がかかり、何回か私は取り消しして再度コマンド実行しました。
もしかしたら、気長に待つべきだったのかもしれません。
npm installを実施してnode_modulesディレクトリまで作られた状態で、VSCodeで開いてみました。
キャプチャはサンプルが記載されているページです。App.tsxにサンプルは記載されています。

node run devで起動させてブラウザで表示するとこんな感じです。

ひとまず、今回はクリーンアップの前のところまで実施しました。

react routerの導入

react-router-domは、URLと呼び出されるクラスの対応づけを行うライブラリです。

App.jsがまずは呼び出されるのですが、そのApp.jsの中に分岐処理のように、URLと対応させたいページのクラスを記述することで、ページに対応するURLを設定できます。
今回は、App.tsxに記載されていたサンプルをHomeに移植し、/homeと対応づけてみました。
また、複数のページが正しくルーティングさせるか確認するため、/sample1に対応した、Sample1クラス（こちらは、サンプルのカウントアップを押されるたびに2倍されるように書き換えただけ）を用意し、アクセスしてみました。
簡単に、ルーティングできますね。
App.tsxのコードはこんな感じです。

import './App.css'
import { BrowserRouter, Route, Routes } from 'react-router-dom'
import Home from './pages/home'
import Sample1 from './pages/Sample1'

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/home" element={<Home />} />
        <Route path="/sample1" element={<Sample1 />} />
      </Routes>
    </BrowserRouter>
  )
}

export default App

画像だと見にくいですが、pagesというディレクトリを用意して、ページを増やしています。

URLの末尾をhomeにするとこのようにHomeクラスの内容が表示されます。

今後の使い道

今回、ルーティングまで作成したので、今後は随時ページを追加してライブラリやロジックなどを試す環境として使用して行きたいと思っています。
以前、メディアアート系のP5.jsやサウンド系のTone.js触っていたので、その辺りも試してみたいですね。