テキスト表示に関するコンポーネント
続いて、テキストに関するコンポーネントについて学んでいきましょう。表2の2種類のみです。
| コンポーネント | 概要 |
|---|---|
| Text | 文章を表示する。 |
| Heading | 見出しを表示する。 |
HTMLにおいて最も尊重されるのはテキストなので、本来であればテキストはタグで囲む必要がありません。しかし、Chakra UIの世界観でテキストのサイズなどを指定していくことを考えると、囲んでおくことにも一定のメリットがあるのです。
Text
<Text>は基本的に<p>要素にレンダリングされます。そのため、説明文や本文といった種類の文章を表示するために利用するとよいでしょう。
さて、<Text>にはfontSize属性で文字の大きさを指定できます。大きさの表現は具体的な数値ではなく、テーマで定められた文字列を使用することもできます。テーマで定められた文字列とは、"6xl" > "5xl" > "4xl" > "3xl" > "2xl" > "xl" > "lg" > "md" > "sm" > "xs"という、上下関係を持つ10種類のキーワードです。リスト6は実際に適用したサンプルです。
<Stack spacing={3}>
<Text fontSize="6xl">(6xl) じゅげむじゅげむ</Text>
<Text fontSize="5xl">(5xl) じゅげむじゅげむ</Text>
<Text fontSize="4xl">(4xl) じゅげむじゅげむ</Text>
<Text fontSize="3xl">(3xl) じゅげむじゅげむ</Text>
<Text fontSize="2xl">(2xl) じゅげむじゅげむ</Text>
<Text fontSize="xl">(xl) じゅげむじゅげむ</Text>
<Text fontSize="lg">(lg) じゅげむじゅげむ</Text>
<Text fontSize="md">(md) じゅげむじゅげむ</Text>
<Text fontSize="sm">(sm) じゅげむじゅげむ</Text>
<Text fontSize="xs">(xs) じゅげむじゅげむ</Text>
</Stack>
リスト6を表示すると、図10のようになります。
また、所定の行数に収まらなかった場合に省略するための属性も用意されています。
- isTruncated：1行に収まらなかった場合に末尾を省略する
- noOfLines：指定した行数に収まらなかった場合に末尾を省略する
実際に使ってみた例がリスト7です。
<Stack spacing="3">
<Text isTruncated>{/* (1) */}
じゅげむ じゅげむ ごこうのすりきれ かいじゃりすいぎょの
すいぎょうまつ うんらいまつ ふうらいまつ くうねるところにすむところ
やぶらこうじのぶらこうじ ぱいぽ ぱいぽ ぱいぽのしゅーりんがん
しゅーりんがんのぐーりんだい ぐーりんだいのぽんぽこぴーの
ぽんぽこなーの ちょうきゅうめいのちょうすけ
</Text>
<Text noOfLines={2}>{/* (2) */}
じゅげむ じゅげむ ごこうのすりきれ かいじゃりすいぎょの
すいぎょうまつ うんらいまつ ふうらいまつ くうねるところにすむところ
やぶらこうじのぶらこうじ ぱいぽ ぱいぽ ぱいぽのしゅーりんがん
しゅーりんがんのぐーりんだい ぐーりんだいのぽんぽこぴーの
ぽんぽこなーの ちょうきゅうめいのちょうすけ
</Text>
</Stack>
どちらも同じ文面で日本語の長文が記述されています。（1）は1行に収まるように表示され、（2）は2行に収まるように表示されるはずですね。それでは、実際の表示を見てみましょう（図11）。
期待していた通り、1つ目の文章は1行目の末尾で「...」と省略され、2つ目の文章は2行目の末尾で省略されました。<Text as="span">のように書くことで、レンダリング先のHTML要素を差し替えることもできるので、<p>要素以外の表現をしたい場合にも<Text>を使うことができます。
Heading
<Heading>は見出しに特化したコンポーネントで、できることはほとんど<Text>と同じです。<Heading>固有の違いとしては、デフォルトのレンダリング先が<h2>要素ということです。利用する場所に応じて<Heading as="h3">のように、別のヘッダー要素に差し替えるとよいでしょう。
メディア表示に関するコンポーネント
さて、次はメディア表示についてのコンポーネントについて解説します。このジャンルのコンポーネントは表3の3種類です。
| コンポーネント | 概要 |
|---|---|
| Image | 画像を表示する。 |
| Avatar | ユーザー画像を表示する。 |
いずれも画像を表示するコンポーネントで、アプリケーションを視認性高く彩ります。<Image>は<img>要素の名前が変わっただけのようにも見えますが、内部的には<Box>で包まれているので、Chakra UIらしいスタイル定義でレスポンシブデザイン対応をしたり、形を変えたりするのも容易です。
Avatarはユーザーアイコンを表示するためのコンポーネントです。画像リソースのセットの仕方は<Image>と同じですが、name属性を付けておくと、画像がない場合やロード中にイニシャルを代替表示してくれます。
リスト8は<Image>と<Avatar>を実際に使ってみたサンプルです。Webルートフォルダ（Create React Appなら/publicフォルダ）に、nkzn.pngという名前の画像を配置してあります。
<Image src="/nkzn.png" boxSize="100px" />
<Image src="/nkzn.png" boxSize="100px"
bgColor="pink.300" borderRadius="lg" p="2" />
<Avatar src="/nkzn.png" size="lg" p="1" />
<Avatar name="Yukiya Nakagawa" size="lg" p="1" />
リスト8を表示すると、図12のようになります。
<Image>で画像の表示周りを容易にカスタマイズできるほか、<Avatar>でサイズ変更や代替表示が容易にできるのがわかります。
まとめ
アプリケーション開発の基礎となる、レイアウト、テキスト表示、メディア表示に関するコンポーネントについて解説しました。今回解説した範囲だけでも、簡単なホームページは作れそうですね。次回はもっと複雑なアプリケーション開発で役立つ、各種コントロール用UIなどを解説します。
