ReactでSPAサイト作成記録

はじめに

• SPAとは、Single Page Applicationのことで、これを使うことでシームレスなページ遷移を実現できます。
• 以前から興味があったので、勉強中のReactでできるか試してみました。
• 完成物は、リンクメニュー付のシンプルな画面です。

使用技術など

Vite, React, TypeScript, Tailwind CSS

やったことと解説

1. 環境作成と進め方

• 環境はViteでReact + TypeScriptなどを選んで環境作成しました。

• そして、ある程度調べた上で、react-router-domおよび、Reactライブラリ「react-slide-routes」を使用すると、スライドなどアニメーションを用いたSPA実装が簡単そうで、これを採用しました。

qiita.com

reactjsexample.com

github.com

2. ポイント

• 上記２つの記事どおり進めることで、ほぼ問題なく進められますが、ポイントを見ていきます。

ルーティング設定

main.tsxのルーティング機能を適応させたいコンポーネントを、
react-router-domから読み込んだ＜BrowserRouter＞コンポーネントで挟んであげます。

react\src\main.tsx

(中略)
import { BrowserRouter } from 'react-router-dom';
(中略)

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    {/* # ここからRouting設定（適応させたいコンポーネントをBrowserRouterで挟む。） */}
    <BrowserRouter>
      <App />
    </BrowserRouter>
    {/* ここまでRouting設定 */}
  </React.StrictMode>,
);

スライド機能設定

App.tsxにて、react-slide-routesから読み込んだ＜SlideRoutes＞コンポーネントで挟んであげます。
div id="content"の部分です。
属性（プロパティ）の書き方は、react-slide-routes公式Githubを見て設定したらうまくできました。
プロパティは他にも、切り替え時間、イージング、アニメーション種類（デフォルトは横スライド）など設定できるようでした。
GitHub - nanxiaobei/react-slide-routes: 🏄‍♂️ The easiest way to slide React routes

react\src\App.tsx

import { Route, NavLink } from 'react-router-dom';
import SlideRoutes from 'react-slide-routes';

const Home = () => (
  <div className="card home">
    <h2 className="heading">Home ホーム</h2>
    <p className="text">
      <strong>Homeページです。</strong>
      <br />
      テキストテキスト...
    </p>
  </div>
);
const About = () => (
  （中略）
);
const News = () => (
  （中略）
);

function App() {
  return (
    <>
      <h1>ReactでSPAの練習サイト</h1>

      <nav>
        <NavLink to="/" end>
          Home
        </NavLink>
        <NavLink to="/about">About</NavLink>
        <NavLink to="/news">News</NavLink>
      </nav>

      <div id="content">
        <SlideRoutes animation="slide" duration={300}>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/news" element={<News />} />
        </SlideRoutes>
      </div>
    </>
  );
}

3. 完成物

github io での公開がうまくいかなかったので、リポジトリのみ貼ります。
GitHub - kaiyoshida57/react-spa

こんな感じです

終わりに

• SPAのアニメーション使ったライブラリは他にも、react-springなどがありましたが、このreact-slide-routesは実装はわかりやすく導入しやすかったです。
• 遷移時に付与されるclassも公式にサンプルがあるのですが、それを元に書き換えることで効果も工夫できました。