# Topページの作成2 tailwindを使用してTopページを作成していきます。 TopPageというコンポーネントを作成していくのですが、今回コンポーネントを**Atomic Design**を用います。 **Atomic Design**は、コンポーネントの粒度に応じて、5つのディレクトリに分けて取り扱っていく設計手法になります。分けるディレクトリ名は決まっており、小さい順から * atoms * molecules * organisms * templates * pages の5つになります。画像は

各ディレクトリに関して説明していきます。 ### atoms 最小単位のコンポーネントを格納します。入力欄やボタン等にあたります。

### molecules atomsを組み合わせたグループで、フォームのラベルと入力欄を組み合わせたもの等になります。次のorganismsと違うところとして、**ドメイン（サービス）の知識を持っていないこと**になります。

### organisms atomsやmoleculesを組み合わせて、特定の意味合いを持った集合体になります。こちらは**ドメインの知識を持っており**、ヘッダーやフッターに当たります。

### templates atomsやmolecules、organismsを組み合わせて、ページ全体のレイアウトを構築するものになります。

### pages templatesをより具体化させて、ユーザーに最終的に見せるページになります。

では、実際にatomic designにてコンポーネントを設計していきます。 `src`配下に`components`ディレクトリを作成し、`components`配下にあと`atoms`, `molecules`、`organisms`、`templates`、`pages`ディレクトリを作成しましょう。そして、`pages`ディレクトリに、`TopPage.tsx`を作成しましょう、 ``` src/ components/ atoms/ molecules/ organisms/ templates/ pages/ TopPage.tsx ``` TopPage.tsxを編集していきます。 VSCodeの場合、`rafc`と入力し`Enter`を押すと、以下のようなテンプレートが出力されるかと思います。ちなみに一行目に`import React from 'react'`は昔のversionの際に必要な記述っだったのですが、現在では不要ですので、削除しちゃって大丈夫です。 {% code title="pages/TopPage.tsx◎" %} ```tsx import React from 'react' export const TopPage = () => { return (

TopPage

) } ``` {% endcode %} まずheader部分を作成していきます。以下のような記述しましょう。ヘッダーの左側にロゴを表示し、右側にナビゲーションメニューを配置するような構成にします。

export const TopPage = () => {
  return (
    <div>
      <header>
        <div>
          <p>スケジュール管理APP</p>
          <nav>
            <ul>
              <li>ご利用方法</li>
              <li>ログイン</li>
            </ul>
          </nav>
        </div>
      </header>
    </div>
  )
}

こちらのコンポーネントを表示するようにしましょう。main.tsxを以下のように編集します。

import React from 'react'
import ReactDOM from 'react-dom/client'
import './styles/index.css'
import "./styles/output.css"
import "./styles/destyle.css";
import { TopPage } from './components/pages/TopPage';

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

こちらでブラウザにて確認しましょう。動作確認する際は以下二つを実行するようにしましょう。 ```bash npm run dev ``` ```bash npx tailwindcss -i ./src/styles/index.css -o ./src/styles/output.css --watch ``` ブラウザにて以下のように確認できるかと思います。destyle.cssにてタグのデフォルトのcssが全て消えているかと思います。

ではこちらにtailwindcssを当てていきましょう。ますは、ロゴとナビゲーションメニューを横並びにして、各ナビゲーションメニューを横並びにしましょう。 class名を調べる際は、以下サイトの左上の検索欄から変更したいプロパティ名から検索するのが良いかと思います。 {% embed url="" %}

横並びにする際は、`class`名に`flex`を使用します。

export const TopPage = () => {
  return (
    <div>
      <header>
        <div className="flex">
          <p>スケジュール管理APP</p>
          <nav>
            <ul className="flex">
              <li>ご利用方法</li>
              <li>ログイン</li>
            </ul>
          </nav>
        </div>
      </header>
    </div>
  );
}

こちらで横並びになったかと思います。次に、ロゴとナビゲーションメニューの間にスペースを開けて、左右に配置するようにします。 cssでいう`justify-content: space-between`をしたいので、こちらは`justify-between`を使用します。

export const TopPage = () => {
  return (
    <div>
      <header>
        <div className="flex justify-between">
          <p>スケジュール管理APP</p>
          <nav>
            <ul className="flex">
              <li>ご利用方法</li>
              <li>ログイン</li>
            </ul>
          </nav>
        </div>
      </header>
    </div>
  );
}

ナビゲーションメニューの方は、各メニューの間を`gap-5`(gap: 20px)てスペースを空けます。

export const TopPage = () => {
  return (
    <div>
      <header>
        <div className="flex justify-between">
          <p>スケジュール管理APP</p>
          <nav>
            <ul className="flex gap-5">
              <li>ご利用方法</li>
              <li>ログイン</li>
            </ul>
          </nav>
        </div>
      </header>
    </div>
  );
}

こちらをブラウザにて確認すると、次のように表示されているかと思います。