未経験からエンジニア 奮闘記

未経験からエンジニアに自由に生きる途中

MENU

Ant Designのレイアウトについて

背景

仕事でAnt Design(antd)のフレームワークを使っていて、共通レイアウトをどう実装すべきか調べてみました。

結論

結論から言うと、layoutディレクトリに共通レイアウトのコンポーネントを作成し、childrenで変更したい内容を追加するのが良いと思いました。これで各ページごとにレイアウトを統一しつつ、内容を柔軟に変えることができます。

ディレクトリ構造の例

/src
  /components
    /layout
      CommonLayout.tsx
  /pages
    index.tsx
    about.tsx

サンプル

この添付したサンプルのレイアウトは良くある構成だと思います ヘッダーがあり、サイドバー、フッターは基本変わらず、ピンクの箇所だけを変更したい場合で考えていきます。

まずは共通レイアウトのコードを作成します。/src/components/layout/CommonLayout.tsxに以下のコードを書いてみました。

'use client'
import { Layout } from "antd"

const { Header, Footer, Sider, Content } = Layout

const styles = {
  header: {
    background: 'yellow',
    height: '50px'
  },
  body:{
    height: 'calc(100vh - 100px)', 
  },
  sider: {
    background: 'blue',
  },
  content: {
    background: 'pink'
  },footer: {
    background: 'green',
    height: '50px',
    padding: 0,
    margin: 0
  }
}

const CommonLayout = ({ children } : { children : React.ReactElement}) => {

  return (
    <>
      <Header style={styles.header}>ヘッダー</Header>
      <Layout style={styles.body}>
        <Sider style={styles.sider} width={50}>
          Sider
        </Sider>
        <Content style={styles.content}>
          {children}
        </Content>
      </Layout>
      <Footer style={styles.footer}>
        Footer
      </Footer>
      
    </>
  )
}

export default CommonLayout

解説

構造について説明すると、CommonLayoutコンポーネントはAnt DesignのLayoutコンポーネントを使用して、以下のように構成されています:

  • Header: ページのヘッダー部分。ここにはサイトのタイトルやナビゲーションメニューを置くことが多い。
  • Sider: サイドバー。ここにはナビゲーションリンクやその他の補助的な情報を配置。
  • Content: メインのコンテンツエリア。ここに各ページごとの内容が入る。
  • Footer: フッター部分。著作権情報やリンクなどを配置するのが一般的。

stylesオブジェクトを使って、それぞれの部分のスタイルを定義している。これにより、レイアウトの見た目を一箇所で管理できるのが便利です。

layout.tsxについて

Next.jsではlayout.tsxというファイルが存在します。このファイルから共通のレイアウトを作成することができるのですが、共通のレイアウトを複数持ちたい場合に分岐などが発生してしまうので、今回のようにlayoutのコンポーネントを用意して、ラップしてあげる方が拡張性があると思いました。

個人的な経験としては、layout.tsxを修正するケースとして多いのは認証のチェックなどの場合に利用する印象が多いです。

まとめ

Ant DesignのLayoutコンポーネントを使って共通レイアウトを作成し、各ページごとに柔軟に内容を変えることができます。この方法を使うと、コードの再利用性が高まり、メンテナンスも楽になります。ぜひ参考にして、自分のプロジェクトにも取り入れてみてください!