そろそろ逃げるのをやめたい

何から逃げているのかよくわからないが、今までぼくは Vue+JS という環境でウェブサイトを運営してきました。

で、少なくともそれで特に問題はなかったわけです。

でもやっぱり React も触っておいたほうがいいよなあ、Vue じゃなくて Vite だよなあ、Javascript だけでなく Typescript も扱えないとダメだよなあって言うことで、重い腰を上げて取り組むことにしました。

どの技術も触るのはほとんど初めてなのですが、困ったときはつよつよエンジニアの方々がフォロワーにたくさんいるのでその方々にきけばいいやと大船に乗ったつもりで挑戦したいと思います。

セットアップ方法

yarnがインストールされているのであればyarn create viteでプロジェクトが作成できます。

今回はTypescriptで実装したかったのでreact-tsを選択しました。

$ yarn create vite
yarn create v1.22.17
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Installed "create-vite@2.7.2" with binaries:
      - create-vite
      - cva
✔ Project name: … salmonia3-web
✔ Select a framework: › react
✔ Select a variant: › react-ts

これだけでプロジェクトが完成します、楽でいいですね。

プロジェクトができたらディレクトリを移動してyarnでパッケージ類をインストールしてからyarn devで実際に動かしてみましょう。

プロジェクトの実行

vite v2.7.13 dev server running at:

> Local: http://localhost:3000/
> Network: use `--host` to expose

ready in 512ms.

たったの 512ms で開発環境が立ち上がってしまいます...

プライバシーポリシーを表示

Apple の審査の規約で、プライバシーポリシーを表示しなければいけない、というのがあります。

なので、プライバシーポリシーを表示できるようにします。

正直、React のポテンシャルを考えると「プライバシーポリシーを表示するだけなの」というきはしなくもないのですが、初心者なので勘弁してください。

この程度であればわざわざ複雑なコードを書かなくても Markdown 形式のファイルを読み込んで DOM なりで描画すればよいだけです。ただ、デフォルトでは React にはraw-loaderが入っていないため、テキストデータをそのまま読み込むことはできません。

読み込ませるようにしてもいいのですが、大した量ではないのでソースコード内にテキストを埋め込むことにします。

ソースコード

以下のような感じでコードを書きます。

事前にreact-markdownをインストールするのを忘れないようにしましょう。

コマンドはyarn add react-markdownで大丈夫です。

// Privacy.tsx
import React, { Component } from "react";
import ReactMarkdown from "react-markdown";
import "./App.css";

const md = `MARKDOWN TEXT`;

export default class PrivacyPolicy extends React.Component {
  render() {
    return (
      <div className="App">
        <ReactMarkdown>{md}</ReactMarkdown>
      </div>
    );
  }
}

このままだとベタ書きなので CSS を使ってそれっぽくします。

@font-face {
  font-family: "SF Pro Text";
  src: local("SFProText"), url(./fonts/SFProText.woff2) format("woff2");
}

.App {
  max-width: 1280px;
  margin: 0 auto;
  width: 87.5%;
  line-height: 1.47059;
  font-weight: 400;
  font-style: normal;
  font-family: "SF Pro Text";
  color: #1d1d1f;
  font-size: 17px;
  letter-spacing: -0.022em;
}

h2 {
  font-size: 32px;
  font-weight: 600;
}

h3 {
  font-size: 1.17em;
  font-weight: 600;
}

a {
  color: #06c;
  letter-spacing: inherit;
}

SFProTextがかっこいいとのことなので使ってみました。

するとそれっぽいページが完成します。

ジャンプ機能をつける

SPA でページをジャンプする機能を使うにはreact-router-domを利用します。

こちらも単純にyarn add react-router-domで問題ないです。

公式ドキュメント (opens new window)が大変充実しているので、これを読むと良いでしょう。

// App.tsx
import { useState } from "react";
import logo from "./logo.svg";
import "./App.css";
import { Routes, Route, Link } from "react-router-dom";
import Privacy from "./Privacy";
import EULA from "./EULA";

function App() {
  return (
    <div className="App">
      <h1>Salmonia3</h1>
      <Routes>
        <Route path="privacy" element={<Privacy />} />
        <Route path="agreement" element={<EULA />} />
      </Routes>
    </div>
  );
}

export default App;

今回はプライバシーポリシーと EULA を表示するようにしました。

リダイレクト問題

Netlify には直接 SPA のルータを踏むと 404 エラーが発生するという問題があります。

public/_redirectsというファイルを作成して、

/* /index.html 200

と書き込んで保存すれば、自動でトップページにリダイレクトしてくれます。こうすれば 404 エラーが出なくなります。

完成したもの (opens new window)はこれです。Vite なのでビルドサクサク、静的サイトなので描画もサクサクでストレスフリーです。 記事は以上。