React 入門

TypeScript コメント掲示板アプリの開発

コメントの一覧表示とスタイリング

コメントのタイトルを Comment コンポーネントで表示できるようになったので，タイトルだけでなく本文なども表示し，更にスタイルシートを使ったスタイリングも行います．次の通り，コメントは全体を <article> ... </article> で囲うことにします（ <> ... </> でも構いません）．<article> ... </article> を利用することでコメント一つひとつが独立した内容であることが明確になります．

src/components/Comment.tsx
import React from 'react'

interface CommentProps {
  comment: {
    id: number;
    title: string;
    body: string;
    updated_at: string;
  };
}

const Comment: React.FC<CommentProps> = (props) => {
  return (
    <article>
      <div className="title">
        {props.comment.title}
      </div>
      <div className="body">
        {props.comment.body}
      </div>
    </article>
  )
}

export default Comment

さらに，上のコードでは title と body をそれぞれ <div> ... </div> で囲い className 属性を設定しています．この className はスタイルシート (CSS) の class に相当しますが，JavaScript の class と名前が重複するため JSX では className を使うことになっています．

また，CommentListPage.tsx で出力するコンテンツをスタイリングしやすくするため container クラスの <div> ... </div> で囲っておくことにします．

src/components/CommentListPage.tsx（抜粋）
const CommentListPage: React.FC = () => {

  ...

  return (
    <div className="container">
      <h1>コメント一覧</h1>
      {commentItems}
    </div>
  )
}

export default CommentListPage

現時点ではスタイルシートを準備していないので，表示結果は次のようになります．

続いてスタイルシートを準備します．App コンポーネント (App.tsx) には App.css があるように，Comment コンポーネント (Comment.tsx) 用に Comment.css を作成することができます．しかし，今回は index.tsx 用に準備されている index.css に全てまとめて記述することにします．index.css の内容はここの作業工程で一旦すべて削除していますが，もしも残っていたら全て削除してから次の内容を入力してください．

src/index.css
body {
  margin: 0;
  color: #333;
}

.container {
  margin: 20px 20px;
}

h1 {
  margin: 20px 0;
}

article {
  margin: 20px 0;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 16px;
}

article .title {
  font-size: 1.2em;
  font-weight: bold;
}

article .body {
  font-size: 0.9em;
  line-height: 1.5em;
}

なお，上の21行目 article .title のように空白でセレクタを区切ったものは子孫結合子と呼ばれます．この場合 article 要素の中にある .title クラスが選択されることになります．

スタイリングした結果は次のようになりました．ブラウザの横幅を変化させたときに表示がどの様に変化するか確認してください．

目次に戻る