Vite + React + Sassの開発環境を作ってみた

参考にしたWebページ

Vite + React で新規プロジェクトの開発環境を作ろう

React + Unsplash APIで画像検索アプリを作ろう | Webクリエイターボックス

Viteは爆速だと聞いて試したら爆速だった(Next Generation Frontend Tooling)

導入したきっかけ

これそのまま動いた動機というか、この機会に導入することにした理由がいくつか。

スタティックにHTMLを書き、片手でSassコンパイルしていたんじゃ時間いくらあっても足りないー。React覚えたいー。な気持ちは以前からあったものの、他にやりたいことが多すぎて怠けていた。

フリーランスですから時給換算低くても自分が満足（不満を言わない・労を厭わない）なら、どうにかなってしまう。そして悪いことに私はこの仕事をはじめた当時、初めて知り合ったディレクターさんから「タダでも作るでしょ？」「本当にこの仕事好きですよねー」と微笑まれた恐いタイプの制作者だ。

放っておけばいくらでも独りブラックを推して参るが続く。黒い線路は何処までも。

ただここのところ、WordPressのブロックテーマを弄っていて、ブロックテーマをVs Codeで編集していると、ブロックエディタがそもReactで作られているため、HandBookとかGutenbergのリポジトリなど見漁っているうちに慣れてきちゃってたんですね。
この手法を自分の制作にも使った方が効率上がるな・・・を頭の片隅で想いながら手作業していた。

というワンクッションを挿んで次に作るものは、先に開発環境作ってからワーキングした方が低・時間コストで済むなと。

次に作りたいのはエンプティ・テーマからのブロックテーマ構築ではあるのだが、ダークモード対応を少し真面目にやろうかと腰が上がって、それはどのテーマでも使いまわすだろう部品なので先にやることにした。

成果物

ここでは、ベーシックな開発環境を作るところまで。なので構成はヘッダーとフッターとメインコンテンツをモジュール化してApp .tsxに読み込むまで。

    <div className="App">
	    <Header />
	    <MainContent />
	    <Footer />
    </div>

header / main / footer の縦積みを一目瞭然で見分ける色として
header は background: crimson;
footer は background: tomato;
main は body背景ままの黒・文字は白で、それぞれのモジュールの中には、h1・p要素を典型例としておいた。

実際の開発環境

最初に記事を読んでいた Vite + React で新規プロジェクトの開発環境を作ろうではプロジェクト作成を

npm create vite@latest

でやってますが、私は Viteは爆速だと聞いて試したら爆速だった(Next Generation Frontend Tooling) の作成手順を真似ました。

npm create vite@latest PROJECT_PATH -- --template react-ts

Webクリエイターボックスさんの記事はNode.jsのインストールから全部キャプチャつきで細かく説明されているので、はじめて触るときは一度はそっくりそのまま手順を真似て再現したら、要領が頭に入ります。

最初の記事では、それこそスタティックに文字やCSSを書き換えて、ローカルサーバーで反映されるのを目視するところまで。
React + Unsplash APIで画像検索アプリを作ろうでは動的にアプリを作るところまで。
これで十分じゃろってくらい説明されてますが、今回のお題はごくごく普通にHTMLとSassを時短で作れるベーシックな開発環境ということで、その備忘録。

Node.jsは最新バージョンが入っている環境で、プロジェクトフォルダを作り
当該フォルダにいるターミナルで

npm create vite@latest PROJECT_PATH -- --template react-ts

？Package name と促されてEnterすれば「PROJECT_PATH」と同名のフォルダが作られ
ルートの index.html や src/main.tsxファイルなど必要なものがマルッと一式作られます。

PROJECT_PATH を project にした場合

Done. Now run: ← これで完了

  cd project
  npm install
  npm run dev

ただしこのままだとmain.tsxなどが使うモジュールが用意されていない状態で、Vs Codeでファイルを開くと、赤い波線がいたる所に注意喚起しているのが目立ちます。

Done. Now run: 後のご指示の通り
チェンジ・ディレクトリで project に入り

cd project

モジュールをインストール

npm install

project フォルダの下に「node_modules」フォルダとその子どもたちがインストールされて「整いました」

npm run dev

で走ってねとお願いすると、vite がサーバーを走らせてるよーの応答とローカルホストへのリンクが出るので
⌘ + クリック

vite v2.9.9 dev server running at:

  > Local: http://localhost:3000/

Sassに切り替える

上の左画像が右に変わるまでが本題。
index.html をみるとmain.tsxを読み込んでいるので

<script type="module" src="/src/main.tsx"></script>

main.tsx を開くと、ReactDOMはrootエレメントIDでAppを書き出してるよみたいなことが書いてある（Java Script）んだけど、注目はimportされている要素

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

./App と読み込まれているApp.tsxにも import ‘./App.css’ とある、この.css をSassに切り替えたい。

ということで、下準備。
せっかくVs Codeのターミナル使っているのでserver running中のターミナルと別窓を開き、projectルートに mkdir コマンドでせっせと

mkdir assets
cd assets
mkdir scss
cd scss
mkdir base
mkdir layout
mkdir helpers
mkdir components
touch style.scss
cd layout
touch _body.scss

と普段のプロジェクトで要りそうな最小限のフォルダやファイルを書き出していく。
もちろんエディタの「新しいフォルダー」「新しいファイル」で作ってもよし。

そこそこ準備が出来たら、project/src/components フォルダも作る。
作りたいのは、HTMLの header / main / footer エレメントだけなので
project/src/components フォルダに header.tsx・footer.tsx・main.tsx 3ファイルを作成。

components %
touch header.tsx
touch footer.tsx
touch main.tsx

ファイルの中は、React + Unsplash APIで画像検索アプリを作ろうを参考に

const Header = () => {
	return(
			<header>
					<h1>Header Title</h1>
					<p>Header paragraph</p>
			</header>
	);
}

export default Header;

と書いていった。
main.tsx はsrcルートにあるので避けるべきかと思ったが、HTMLエレメント名ままが良い気もし
const 定数名をconst MainContent = としてお茶を濁した。

これであとは、Appファイルに header / main / footer を読み込んでもらう。

function App() {
  const [count, setCount] = useState(0)

  return (
    <div className="App">
	    <Header />
	    <MainContent />
	    <Footer />
    </div>
  )
}

export default App

と、ここまで来ても酷く重要なことが私はわかっちゃないんですが
拡張子.jsk .tsx では事情が違います。

参考にした記事では、.jsk 拡張子でサクッと読み込まれていますが
.tsx では明示的にimport を書かないと、全体表示してもらえません。

function App で命令がはじまる前に

import { useState } from 'react'
// import logo from './logo.svg'
// import App from './App'
import './../assets/scss/style.scss'
import Header from './components/header'
import MainContent from './components/main'
import Footer from './components/footer'

と、要らないものをコメントアウト＆必要なファイルをインポートで加筆。