# Rails

- [Rails7.2のマイナーフィーチャーで気になったところ](https://gist.github.com/willnet/3cc38e20d44fb821209cb8a93c1310a5#%E3%83%AD%E3%82%B0%E3%81%8B%E3%82%89%E7%89%B9%E5%AE%9A%E3%81%AE%E3%82%A2%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%A7%E3%82%AF%E3%82%A8%E3%83%AA%E3%81%8C%E4%BD%95%E5%9B%9E%E5%AE%9F%E8%A1%8C%E3%81%95%E3%82%8C%E3%81%9F%E3%81%8B%E3%81%99%E3%81%90%E7%A2%BA%E8%AA%8D%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%9F)
  - `ログから、特定のアクションでクエリが何回実行されたかすぐ確認できるようになった`


2024年9月のブックマーク

# 背景

- →[はじめに](https://work.aoi-life.link/posts/67)
- 自分はかつてはページのタイトルの文字列のみがページヘッダの要素だと思っていたが、調べるとそれだけでなさそう
    - パンくずやアクションやフィルタ、ソート機能の要素もページヘッダとすることが多い

# 目的

- ページヘッダのコンポーネント開発方針を決める

# デザインシステムの比較

## Primer

- [Components→Page header→Anatomy](https://primer.style/components/page-header#anatomy)
- 下記4つのエリアからなる
    - Context bar
        - パンくずや親ページへのリンクなど
        - 狭い画面サイズでないと表示しないと書いてあるが、その理由は分からなかった
            - Githubを見る限り、PCサイズでもContext barは表示されているように思えた
    - Title bar
        - ページタイトルやバックボタンなど
    - Description
        - 説明文
    - Navigation
        - タブなど

## Atlassian

- [Components→Page header→Usage](https://atlassian.design/components/page-header/usage)
- 4つのエリアからなる
    - Breadcrumbs
    - Title
    - Actions
    - Search bar and filters

# 自分のページヘッダ方針

- Primerに合わせる

# 自分のコンポーネント開発方針

- PegeHeaderコンポーネントを作成し、下記スロットを持たせる
    - Context bar
    - Title bar
        - スロットとしてLeading action（もどるボタンなど）、Title、Actionsを持つ
    - Description
    - Navigation

# 次やること

- 一覧ページレイアウトのコンポーネントを作成する

コンポーネント開発方針決め-ページヘッダ

# 背景

- →[はじめに](https://work.aoi-life.link/posts/67)
- ページのレイアウトは要素が多く、どう整理すれば良いか分からない
    - 「ページタイトル-コンテンツ」ぐらいであれば迷わないが、実際は2つの間に説明文があったりする
    - ページの横にサブメニュー的なものや検索フォームを置くことも多く、ますますどう整理すれば良いか分からない

# 目的

- ページレイアウトのコンポーネント開発方針を決める

# デザインシステムの比較

各デザインシステムのサイトの「Layout」や「Pattern」などを確認した。

## Primer

- [Foundation→Layout→Page types](https://primer.style/foundations/layout#page-types)
- 主に3種類としている
    - Full pages
        - 基本的なタイプ
        - Header、Content、Pane、Footer
    - Split pages
        - Pane、Content
    - Interstitial pages
        - Header、Content
- コンポーネントとして[Page layout](https://primer.style/components/page-layout/react/alpha)を提供している

## Material Design

- [Foundations→Overview](https://m3.material.io/foundations/layout/canonical-layouts/overview)
- 主に3種類としている
    - Feed
        - ページいっぱいにグリッドレイアウト
    - List-detail
        - ListとDetailの2エリア
        - 親子関係があるコンテンツの表示に使う
    - Supporting pane
        - プライマリコンテンツとセカンダリコンテンツの2エリア
        - 親子関係はないが、関連のあるコンテンツの表示に使う

## Polaris

- [Patterns](https://polaris.shopify.com/patterns)
- ページレイアウトについては主に3種類としている
    - App settings layout
        - 2カラム
            - ラベルや説明があるカラム
            - 入力欄のカラム
    - Resource index layout
        - 1カラムで、下記の3エリアに分かれる
            - タイトルやアクション
            - フィルタやソート
            - リスト
    - Resource details layout
        - 1カラムで、ページヘッダとメインコンテンツの2エリアに分かれる
        - メインコンテンツは下記の2カラム
            - プライマリコンテンツ
            - セカンダリコンテンツ

# 自分のページレイアウト方針

- PrimerのInterstitial pagesとPolarisを合わせたようなページレイアウトを作成する
    - 命名はPolarisに合わせる
    - Material Designのようにリストと詳細を同時に表示する実装は多くやるわけではないので、今回は考えない

# 自分のコンポーネント開発方針

- 4つのページレイアウトコンポーネントを作成する
    - InterstitialPageLayout
        - スロットとして、Header、Contentがある
        - 中央揃えにする
    - SettingPageLayout
        - スロットとして、Header、Contentがある
    - IndexPageLayout
        - スロットとして、Header、Content、Paneがある
    - DetailPageLayout
        - スロットとして、Header、Content、Paneがある

# 次にやること

- PageHeaderコンポーネントの開発方針を決める

最近の投稿