🔧

React+Vite+PWAの環境構築をまとめてみた

2024/01/23に公開

PWA

今後作って行きたいWebアプリの環境構築を備忘録としてまとめていきます。

なぜReactなのか

近年のFEはReactおよびReactをベースに開発されたNext.jsに勢いがある。

ReactとNext.js、どっちで作る？問題ですが、上の記事を参考にしながら、以下2点を理由にReactを選びました。

SPAを作りたい

もちろんNext.jsでもSPAは作れるようです。Next.jsの主なレンダリングであるSSRやSSGは、今回のプロジェクトでは使う必要がないと判断しました。

SEOはそこまで重視していない

今回作りたいものは社内で限定的に使用するものを想定しています。SEOよりもネイティブアプリのような使用感を重視して作っていきます。

それでは本題に入っていきます。

React+Vite+PWA

メインはReact、Vite、PWAになりますが、ESlint、Prettier、TailwindCSSについても軽く触れていきます。

プロジェクト作成

まずは以下の記事を参考にプロジェクトの作成までを行います。

作業したいディレクトリまで移動して、以下のコマンドを実行します。

npm create vite@latest

以下の3項目を対話型で聞かれるので答えていきます。

プロジェクト名
任意
フレームワーク
React
型
TypeScript + SWC

するとコマンドが３つ表示されるので上から順に実行していきます。

cd プロジェクト名
npm install
npm run dev

httpから始まるURLを開いて、ViteとReactのアイコンが表示されればOKです。

ESLintとPrettierについて

ESlint、に関してはこちらの記事が分かりやすかったです。
https://ics.media/entry/17030/

導入することでコードの整形や構文チェックが可能になります。

ESLintとPrettierを導入するメリット

VSCodeにアドオンとして導入も可能ですが、今回はプロジェクトに直接導入します。メリットとしては、ユーザーやマシンに依存しないことが挙げられると思います。開発者が多いほど恩恵を感じられると思います。

Prettierの導入

別のターミナルを開いて、以下のコマンドを実行します。

npm i -D prettier

続いてpackage.jsonのscripts内に以下の内容を追記します。

"format": "prettier --write src"

ESlintとPrettierをまとめる

ESlintとPrettierが共存しているとコンフリクトを起こすようなので、競合するルールはeslint-config-prettierを使って無効化します。

まずは以下のコマンドを実行します。

次に先程package.jsonのscripts内に追記した内容を以下の内容に差し替えます。

"format": "eslint src --fix && prettier --write src"

こうすることでeslint実行後に、prettierが実行するようになります。
実際にESlintとPrettierを走らせるには、以下のコマンドを実行するだけです。

npm run format

Tailwind CSSの導入

まずは以下のコマンドを実行してプロジェクト内にインストールします。

npm install -D tailwindcss postcss autoprefixer

次に以下のコマンドを実行してTailwind CSS用の設定ファイル(tailwind.config.js)を作成します。

npx tailwindcss init -p

設定ファイル中のcontentの中身を変更します。

/*省略*/
content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
/*省略*/

index.css内にデフォルトだとCSSの記述があると思いますが、全消しして以下の内容を記述します。

@tailwind base;
@tailwind components;
@tailwind utilities;

適当なTHMLタグ内にclassName="任意のスタイル"を記述してスタイルが変わるか確認してみましょう。

実際にスタイルを当てるときは、以下のサイトを参照すれば作業も捗るはずです。

残すはPWA

こちらを参考にしながら進めていきます。

vite-plugin-pwaのインストール

以下のコマンドを実行してインストールします。

npm install vite-plugin-pwa -D

vite.config.tsの編集

VitePWAをインポートします。

import {  VitePWA } from 'vite-plugin-pwa'

pluginsの中にVitePWAの設定を入力します。

VitePWA({
      registerType: 'autoUpdate',
      includeAssets: ['favicon.ico', 'apple-touch-icon.png'],
      injectRegister: 'auto', //ここの記述
      manifest: {
        name: 'PWA Sample Apps',
        short_name: 'PWAApps', 
        description: 'PWAサンプルアプリ',
        theme_color: '#ffffff',
        icons: [
          {
            src: 'pwa-192x192.png',
            sizes: '192x192',
            type: 'image/png'
          },
          {
            src: 'pwa-512x512.png',
            sizes: '512x512',
            type: 'image/png'
          },
          {
            src: 'pwa-512x512.png',
            sizes: '512x512',
            type: 'image/png',
            purpose: 'any'
          },
          {
            src: 'pwa-512x512.png',
            sizes: '512x512',
            type: 'image/png',
            purpose: 'maskable'
          }
        ]
      }
    })

こちらのコードのinjectRegister: 'auto'が重要なようで、この記述があることでvite-plugin-pwaの中に入っているWorkboxが働いて、以上の記述をデフォルトとしてServiceWorkerをbuild時に自動で登録してくれるようです。

画像の設置

上の記述の中にsrcと書いてある画像ファイルがいくつかありますが最低限必要なのは以下の2ファイルです・

512✕512.png
192✕192.png

※もちろん、こちらの数値は縦✕横のピクセル値になります。画像は予め準備しておきましょう。

src/publicディレクトリの中に画像を入れましょう。※ディレクトリやファイル名に注意。

デプロイ・動作チェック

PWAがうまく設定できているのかはローカル環境では確認できません。(※特殊な設定で可能のようですが、私の知識がないので触れません。)

今回はgithubでリポジトリを作って、vercelでデプロイしました。簡易にはなりますが説明していきます。

デプロイ

まずはgithub上でリポジトリを新しく作成します。リポジトリの作成後、リモートプッシュの手順が書かれていると思いますので、それに沿って実行します。

次にvercelにログインして先程作成したリポジトリをデプロイします。デプロイが完了したらサイトにアクセスしましょう。

動作チェック

サイトに訪れると、PCブラウザの場合であればURLの右端にインストールマークが、スマホブラウザの場合であれば、設定から「アプリのインストール」という表示が出ていると思います。それぞれインストールして、アプリを開いているような表示になればOKです。

まとめ

簡易的な表記になりますが、環境構築までのステップを自分の中にも落とし込めたかなと思います。