React x TailwindCSS で作成したウェブサイトを GitHub Pages に公開

## 🚀 はじめに
　React と TailwindCSS を用いて、GitHub Pages でウェブサイトを作成しました。ブラウザは React のコードを直接理解できないため、コンパイルが必要です。GitHub Pages は静的サーバーであり、サーバーサイドでのコンパイルはできません。そのため、事前にコンパイルするか、フロントエンドでコンパイルする必要があります。
 
　この記事の前半では、CDN を活用してフロントエンドでコンパイルする方法を紹介します。後半では Vite を用いて事前にコンパイルする方法を紹介します。

## ⛓ リンク集

### My Page

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2631481/44d38da5-26bd-7220-ad8f-b6e41cf8cd1d.png)

#### Repository

https://github.com/TakanariShimbo/my-github-pages-v1

### Templates

#### CDN

https://github.com/TakanariShimbo/cdn-react-tailwind-template

#### Vite

https://github.com/TakanariShimbo/vite-react-tailwind-template

## 🧑‍🏫 事前知識

### HTML
　HTML（HyperText Markup Language）は、ウェブページを構築するための基本的なマークアップ言語です。HTMLを使用して、テキスト、画像、リンク、フォームなどのコンテンツをウェブページ上で構造化し、表示します。HTMLはタグと呼ばれる特定のキーワードを使い、それらを<>で囲むことで、ウェブブラウザがどのようにコンテンツを表示すべきかを指示します。

　以下の例では、`<!DOCTYPE html>` 宣言がHTML5文書を示し、`<html>` タグでページ全体の内容が囲まれています。`<head>` セクションにはメタデータやタイトル、その他インポートが記載されます。、`<link>` タグを通じて外部のCSSファイルがリンクされ、ページのスタイリングが行われ、`<script>` タグを通じて、外部のJavaScriptファイルが読み込まれ、ページの動的な振る舞いが制御されます。`<body>` セクションにはページの主要なコンテンツが含まれます。`<script>` タグはこちらに記載される場合もあります。

```html:sample
<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <link rel="stylesheet" href="styles.css">
    <script src="script.js"></script>
</head>
<body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>    
</body>
</html>
```

### React

　React では、HTML を直接 JavaScript コード内に記述できる JSX（JavaScript XML）という構文を使用します。JSX により、UIをコンポーネントごとに管理することが可能になるため、開発者は HTML と JavaScript を結びつけて書くことができ、大規模なアプリケーションでも管理しやすくなります。

```jsx:sample
// 従来の関数定義を使用したReactコンポーネントの例
function App() {
  return <h1>Hello, React!</h1>;
}

// アロー関数を使用して定義したReactコンポーネントの例
const App = () => {
  return <h1>Hello, React!</h1>;
};
```

参考：https://ja.react.dev/

### Tailwind CSS

　Tailwind CSSは、ユーティリティファーストの CSS フレームワークであり、開発者が HTML に直接クラスを適用することによって、デザインを迅速かつ直感的に構築できるように設計されています。このアプローチは、開発者がスタイルシートに戻って CSS クラスを定義する必要がなく、一般的なスタイリングの要素（パディング、マージン、カラーなど）をインラインで迅速に適用することができます。コンポーネントのスタイルを直接 HTML 内に記述することができ、大規模なプロジェクトでの一貫性を保ちつつ、スタイルの再利用性を高める助けとなります。

```html:sample
<!-- Tailwind CSSを使用した簡単なボタンの例 -->
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Click me
</button>
```

参考：https://tailwindcss.com/

### Vite
　Vite は、モダンなフロントエンド開発のためのビルドツールです。Vite は、開発中にモジュールのオンデマンドロードを行い、変更が加えられたファイルのみを更新することで、素早いフィードバックを実現します。また、最終的なビルドでは、Rollup を使用して効率的なバンドルを行い、高速なロード時間を提供します。

参考：https://ja.vitejs.dev/

## 🌐 CDN

　特徴は、フロントエンドでコンパイルするため、nodejs が必要ないところです。nodejs やその他のフレームが登場しないため、React に集中できます。React の入門時に最適な手法だと思います。

 ![cdn-react-tailwind.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2631481/cc7d4999-3b6f-2a04-a054-92976ca46ec7.png)

　まずは、以下のコマンドを実行し、リポジトリをクローンしてください。

```sh
git clone https://github.com/TakanariShimbo/cdn-react-tailwind-template.git
 ```

### index.html
　head 内の script で、React, React-DOM, Tailwindcss, Babel をCDNでインポートします。Babel がコンパイラで、ブラウザが React が理解できるようにコンパイルする役目を担っています。body 内の script で、data-plugins, type を以下のように設定することでコンパイルされます。他にも、jsx, js ファイルがある場合は同様に記載してください。


```html:/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CDN + React + Tailwind</title>
    <script src="https://cdn.tailwindcss.com/3.4.4"></script>
    <script src="https://unpkg.com/@babel/standalone@7.24.7/babel.min.js"></script>
    <script src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script data-plugins="transform-modules-umd" type="text/babel" src="./src/App.jsx"></script>
    <script data-plugins="transform-modules-umd" type="text/babel" src="./src/main.jsx"></script>
  </body>
</html>
```

### /src/main.jsx

body 内の script でコンパイルされたスクリプトの一方です。ReactDOMで root にレンダリングします。

```jsx:/src/main.jsx
import App from "./App.jsx";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
```

### /src/App.jsx

body 内の script でコンパイルされたスクリプトのもう一方です。Hello World をスタイリングして表示するコンポーネントです。

```jsx:/src/App.jsx
export default function App() {
  return <h1 className="text-3xl font-bold underline">Hello world!</h1>;
}
```

### ローカルでのテスト

プロジェクト直下で以下コマンドを実行するとサーバーが起動し、http://localhost:8000 でアクセスできます。

```sh
python -m http.server 8000
```

## ⚡ Vite
　この特徴は、Vite を使用して、事前にコードをコンパイルしておくことで、クライアントへのページのレンダリングの高速化が期待されます。nodejs が必要であり、Viteに関する知識も必要になりますが、その分、UX・開発効率が向上します。

 ![vite-react-tailwind.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2631481/2135aa3d-5e8a-f9ef-5554-a7c390045583.png)

　まずは、以下のコマンドを実行し、リポジトリをクローンしてください。

```sh
git clone https://github.com/TakanariShimbo/vite-react-tailwind-template.git
 ```

 　その後、以下コマンドを実行すると、モジュールがダウンロードされ、コードがビルドされます。ビルドされたコードは docs 内に生成されます。

```sh
# install modules
npm ci

# build codes
npm run build
```

### package.json

　先ほどは index.html に CDN で、React, React-DOM, Tailwindcss, Babel をインポートしていましたが、今回は npm でローカルにインストールします。Babel は記載されていませんが、自動でインストールされます。

```json:package.json
{
  "name": "vite-react-tailwind-template",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "vite-preview": "vite preview --port 8000 --host",
    "static-preview": "http-server docs -p 8000 -c-1"
  },
  "dependencies": {
    "http-server": "^14.1.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@vitejs/plugin-react": "^4.3.1",
    "autoprefixer": "^10.4.19",
    "postcss": "^8.4.39",
    "tailwindcss": "^3.4.4",
    "vite": "^5.3.1"
  }
}
```

### ローカルでのテスト

プロジェクト直下で以下コマンドを実行するとサーバーが起動し、http://localhost:8000 でアクセスできます。

```sh
# on vite server
npm run vite-preview

# on static server
npm run static-preview
```

## 🙇 おわりに
　React と TailwindCSS を用いた Web サイトの構築方法を二つの異なるアプローチで紹介しました。CDN を利用したフロントエンドでのコンパイル方法は、サーバーサイドの設定なしで React アプリケーションを実行する初学者に最適です。一方で、Vite を用いた事前コンパイルは、開発の効率化と高速なページレンダリングを実現するために最適な技術です。この記事が、React や TailwindCSS の入門者の足掛かりになれば幸いです。