【React初心者入門】Vite + styled-componentsを使ったプロジェクト構築の手順

React + Viteを使ったプロジェクト構築手順、コーディング事前準備について解説します。今回は、CSS-in-JSライブラリのstyled-components、styled-componentsの構文をハイライトするvscode-styled-components、リセットCSSのstyled-resetを使用してみます。それではいってみましょう！

前提条件

• Mac M1
• VSCode
• Node.js　v20.9.0

React + Vite でプロジェクト作成

まずターミナルアプリを開いて、プロジェクトを作成したい場所へ移動します。現在は/Users/goにいるとして、その直下にある/Users/go/projectに移動する場合は以下のコマンドを打ってください。

移動したら、Viteプロジェクトの作成を始める為に、以下のコマンドを打ってください。

「続行しますか？」と聞かれたらEnterを押します。（yはyesという意味）

任意のプロジェクト名を入力してEnterを押します。今回はvite-testと入力します。

下 or 上矢印キーで移動してReactを選択後、Enterを押します。

JavaScriptを選択してEnterを押します。
※SWCはより高速にビルドできますがファイル容量が重いです。

以下が表示されて、vite-testディレクトリが生成されていればOKです。次の実行すべきコマンドを教えてくれているので上から順に実行していきます。

vite-testディレクトリに移動します。

移動したら、一旦このタイミングでVSCodeを開いてみましょう。（どのタイミングでも構いません）

VSCodeを開いたら、node modulesディレクトリやpackage-lock.jsonを生成します。

開発環境を立ち上げます。

ターミナルに以下が表示されたら、URLの部分をCommand + クリックします。ブラウザにReact + Viteの表示がされたら開発環境立ち上げ完了です。※止めるときは、Mac : Control + C

styled-componentsをインストール

styled-componentsとは、JavaScript内にCSSを記述する記法CSS-in-JSのライブラリです。

以下コマンドで、styled-componentsをインストールします。

vscode-styled-componentsをインストール

vscode-styled-componentsとは、JavaScriptやTypeScriptファイル上でstyled-componentsを使用して記述したCSSにハイライトをつけるVSCode拡張機能です。

VSCodeのサイドバーにある拡張機能の検索欄で「styled-components.vscode-styled-components」を検索してインストールして下さい。

styled-resetをインストール

styled-resetとは、styled-components用のリセットCSSです。全てのブラウザではユーザーエージェントのデフォルトスタイルが適用されているので、それを無効にしたりブラウザ間の差異を無くしたりする為に、リセットCSSを使うのが一般的です。

以下コマンドで、styled-resetをインストールします。

コーディング前の事前準備をする

先ほどReact + Vite で作成したvite-testディレクトリ内にmain.jsxやApp.jsxが入っており、それぞれ雛形が記述されている状態なので、コーディング前の事前準備をします。リセットCSS含むグローバルなCSSは、GlobalStyles.jsxを作成して読み込みます。

main.jsxを編集する

main.jsxは、不要な記述を削除して以下のように書き換えます。StrictModeは、事前に1回空回しでコンポーネントを実行して、バグになるコードが混入してないかを確認する仕組みです。これは開発モードでのみ動き、本番ビルドでは動きません。

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

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

App.jsxを編集する

App.jsxは、先ほどインストールしたstyled-components、次項で作成するGlobalStyles.jsxを読み込む記述など、以下のように書き換えます。ブラウザに表示されたHello Worldの文字が赤色になっていたら、定数StyledH1に定義したCSSがちゃんと当たっているということになります。ちなみに、styledオブジェクト内に格納されたプロパティは、htmlタグに一致する数だけ用意されています。

import styled from "styled-components";
import GlobalStyles from "./GlobalStyles";

const StyledH1 = styled.h1`
  color: red; // 確認用
  /* ここに追加したいCSSを記述する */
`;

function App() {
  return (
    <div>
      <GlobalStyles />
      <StyledH1>Hello World</StyledH1>
    </div>
    
  );
}

export default App;

GlobalStyles.jsxを作成する

GlobalStyles.jsxを新たに作成して、styled-componentsの機能であるcreateGlobalStyle（グローバルなCSSをReactで書けるAPI）と、先ほどインストールしたstyled-resetを読み込みます。

GlobalStylesにはリセットCSSを定義した後に追加したいグローバルCSSを記述します。グローバルなCSSは記述量が少なければApp.jsxにまとめて書いてもいいかも知れません。

import { createGlobalStyle } from "styled-components";
import reset from 'styled-reset';

const GlobalStyles = createGlobalStyle`
  ${reset}
  /* ここに追加したいグローバルCSSを記述する */
`;

export default GlobalStyles;

プロジェクト作成＆事前準備完了

お疲れ様でした。これですぐにコーディングに取り掛かれる状態になっているはずです。CSS-in-JSライブラリやリセットCSSは他にも色々あるので好きなものを試してみてください。

それでは創造の彼方へいってらっしゃい。