こんにちは!

作者の暇人です。

今回はReactで送信ボタン(SubmitButton)コンポーネントを作成するための下準備をしていきます。なお今回の環境はReact19以降の環境で作成されていますので、それ以前のバージョンの方はバージョンを19以降にしてください。

また、ボタンを操作不能にしてデータを送信しているようなアニメーションを加えるので、「headless ui」と「heroicons」といったライブラリや「Tailwind css」といったCSSフレームワークを導入していきますので、デザインの方もある程度綺麗に整える予定です。

さらに、コーディングのミスを減らすために筆者が愛用している「TypeScript」環境も整えて使用していきますので、よろしければ最初の環境構築から一緒にハンズオン形式で作成していくと、モダンな開発環境を整えることができるのでお勧めです。

というわけで、環境作成編をやっていきましょう。

1-1. Reactのボイラーテンプレートを作成する

ターミナルを開いて、「cd」コマンドを使用して、プロジェクトを作成したいディレクトリをカレントディレクトリとして、「create-react-app」コマンドを使用します。

$cd {プロジェクトを作成したいディレクトリ}

$ npx create-react-app {作成したいプロジェクト名} --template typescript

今回は「作成したいプロジェクト名」にはsandbox-tsと名付けたので、下記のコマンドになります。

$npx create-react-app sandbox-ts --template typescript

作成できたら、cdコマンドを使用して、プロジェクトディレクトリがカレントディレクトリになるようにコマンドを使用して移動していきます。

$cd sandbox-ts

今回はプロジェクト名が「sandbox-ts」なので上記のコマンドになりましたが、作成したプロジェクト名に移動してください。

1-2. 必要なライブラリをインストールしていく

ボイラーテンプレートにデフォルトで入っていないライブラリで今回使用するものは

・Tailwind CSS

・Headless Ui

・HeroIcons

・clsx

この4つになります。

まず初めに「Tailwind CSS」をインストールするために、プロジェクトがカレントディレクトリの状態で下記のコマンドを使用します。

$ npm install tailwindcss@latest

このライブラリはCSSのユーティリティクラスなどを提供してくれるライブラリになります。

そうしたら、これを有効にするために以下のコマンドを実行します。

 $ npx tailwindcss init -p

そうすると、プロジェクト直下に「tailwind.config.js」「postcss.config.js」が作成されますので、そこに必要な設定を書き込んでいきます。

tailwind.config.jsに以下のように書き込みます。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'], //追加した行
  theme: {
    extend: {},
  },
  plugins: [],
};

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

これであとは「App.tsx」ファイル内で「index.css」を呼び出せば、設定自体は完了になります。

ただ、今の状態だと設定が反映されているかわからないので「App.tsx」ファイルを下記のように書き換えます。

App.tsx

import './App.css';

function App() {
  return (
    <div>
      <span
        className='text-red-600 font-bold'
      >
        これはテストの文章になります。
      </span>
    </div>
  );
}

export default App;

このコードを打って、下記のコマンドをコマンドラインツールから実行します。

$ npm start

そうするとlocalhost:3000から現在のアプリケーションの画面を見ることができますので、確認していきます。

左上に赤文字で「これはテストの文章になります。」と表示されれば無事TailwindCSSの設定は完了したことになります。

同様にHeadless UiとHeroIconsもインストールしていきます。これら二つはインストールした時点で設定不要ですぐに使えるライブラリですので、同時にインストールしていきます。

コマンドラインツールで下記のコマンドを実行していきます。

$ npm install @headlessui/react @heroicons/react

これら二つをインストールしたら、同様に「clsx」をインストールします。

$ npm install clsx

App.tsxを以下のように変更します。

import { Transition, TransitionChild } from '@headlessui/react';
import { HomeIcon } from '@heroicons/react/16/solid'
import clsx from 'clsx';
import './App.css';
import { useEffect, useState } from 'react';

function App() {
  const [open, setOpen] = useState<boolean>(false)
  useEffect(() => {
    setOpen(true)
  }, [])
  return (
    <div
      className='flex justify-center w-full'
    >
      <Transition show={open}>
        <TransitionChild>
          <div className='fixed inset-y-0 left-0 w-80 rounded-md bg-gray-100 p-2 transition duration-300 data-[closed]:-translate-x-full'>
            <div className='flex justify-center items-center gap-x-4 '>
              <HomeIcon className='w-8 h-8 fill-gray-600' />
              <span className={clsx('text-2xl text-gray-700')}>
                テストアプリ
              </span>
            </div>
          </div>
        </TransitionChild>
      </Transition>
    </div>
  );
}

export default App;

とりあえず入れたライブラリがすべて動いていれば、問題なくアニメーションやアイコンが表示されます。下の画像のように画面が表示されれば環境作成は完了になります。

2. 最後に

ここまでご閲覧いただきありがとうございました！

次回記事では、この環境を使用して送信ボタンを作成していきます。