CodeZine(コードジン)

特集ページ一覧

カスタマイズ性と生産性を両立する、React向けのUIライブラリ「Chakra UI」の魅力的な部品【中編】

現場で役立つ! React向けライブラリ詳説 第7回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2021/11/26 11:00
目次

テキスト表示に関するコンポーネント

 続いて、テキストに関するコンポーネントについて学んでいきましょう。表2の2種類のみです。

表2:テキストに関するコンポーネント
コンポーネント 概要
Text 文章を表示する。
Heading 見出しを表示する。

 HTMLにおいて最も尊重されるのはテキストなので、本来であればテキストはタグで囲む必要がありません。しかし、Chakra UIの世界観でテキストのサイズなどを指定していくことを考えると、囲んでおくことにも一定のメリットがあるのです。

Text

 <Text>は基本的に<p>要素にレンダリングされます。そのため、説明文や本文といった種類の文章を表示するために利用するとよいでしょう。

 さて、<Text>にはfontSize属性で文字の大きさを指定できます。大きさの表現は具体的な数値ではなく、テーマで定められた文字列を使用することもできます。テーマで定められた文字列とは、"6xl" > "5xl" > "4xl" > "3xl" > "2xl" > "xl" > "lg" > "md" > "sm" > "xs"という、上下関係を持つ10種類のキーワードです。リスト6は実際に適用したサンプルです。

[リスト6]fontSizeの例
<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のようになります。

図10:fontSizeの例
図10:fontSizeの例

 また、所定の行数に収まらなかった場合に省略するための属性も用意されています。

  • isTruncated:1行に収まらなかった場合に末尾を省略する
  • noOfLines:指定した行数に収まらなかった場合に末尾を省略する

 実際に使ってみた例がリスト7です。

[リスト7]文末を省略する
<Stack spacing="3">
  <Text isTruncated>{/* (1) */}
    じゅげむ じゅげむ ごこうのすりきれ かいじゃりすいぎょの 
    すいぎょうまつ うんらいまつ ふうらいまつ くうねるところにすむところ 
    やぶらこうじのぶらこうじ ぱいぽ ぱいぽ ぱいぽのしゅーりんがん 
    しゅーりんがんのぐーりんだい ぐーりんだいのぽんぽこぴーの 
    ぽんぽこなーの ちょうきゅうめいのちょうすけ
  </Text>
  <Text noOfLines={2}>{/* (2) */}
    じゅげむ じゅげむ ごこうのすりきれ かいじゃりすいぎょの 
    すいぎょうまつ うんらいまつ ふうらいまつ くうねるところにすむところ 
    やぶらこうじのぶらこうじ ぱいぽ ぱいぽ ぱいぽのしゅーりんがん 
    しゅーりんがんのぐーりんだい ぐーりんだいのぽんぽこぴーの 
    ぽんぽこなーの ちょうきゅうめいのちょうすけ
  </Text>
</Stack>

 どちらも同じ文面で日本語の長文が記述されています。(1)は1行に収まるように表示され、(2)は2行に収まるように表示されるはずですね。それでは、実際の表示を見てみましょう(図11)。

図11:文末を省略する
図11:文末を省略する

 期待していた通り、1つ目の文章は1行目の末尾で「...」と省略され、2つ目の文章は2行目の末尾で省略されました。<Text as="span">のように書くことで、レンダリング先のHTML要素を差し替えることもできるので、<p>要素以外の表現をしたい場合にも<Text>を使うことができます。

Heading

 <Heading>は見出しに特化したコンポーネントで、できることはほとんど<Text>と同じです。<Heading>固有の違いとしては、デフォルトのレンダリング先が<h2>要素ということです。利用する場所に応じて<Heading as="h3">のように、別のヘッダー要素に差し替えるとよいでしょう。

メディア表示に関するコンポーネント

 さて、次はメディア表示についてのコンポーネントについて解説します。このジャンルのコンポーネントは表3の3種類です。

表3:メディア表示に関するコンポーネント
コンポーネント 概要
Image 画像を表示する。
Avatar ユーザー画像を表示する。

 いずれも画像を表示するコンポーネントで、アプリケーションを視認性高く彩ります。<Image><img>要素の名前が変わっただけのようにも見えますが、内部的には<Box>で包まれているので、Chakra UIらしいスタイル定義でレスポンシブデザイン対応をしたり、形を変えたりするのも容易です。

 Avatarはユーザーアイコンを表示するためのコンポーネントです。画像リソースのセットの仕方は<Image>と同じですが、name属性を付けておくと、画像がない場合やロード中にイニシャルを代替表示してくれます。

 リスト8は<Image><Avatar>を実際に使ってみたサンプルです。Webルートフォルダ(Create React Appなら/publicフォルダ)に、nkzn.pngという名前の画像を配置してあります。

[リスト8]Image、Avatar
<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のようになります。

図12:ImageとAvatarの例
図12:ImageとAvatarの例

 <Image>で画像の表示周りを容易にカスタマイズできるほか、<Avatar>でサイズ変更や代替表示が容易にできるのがわかります。

まとめ

 アプリケーション開発の基礎となる、レイアウト、テキスト表示、メディア表示に関するコンポーネントについて解説しました。今回解説した範囲だけでも、簡単なホームページは作れそうですね。次回はもっと複雑なアプリケーション開発で役立つ、各種コントロール用UIなどを解説します。



  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:現場で役立つ! React向けライブラリ詳説

もっと読む

著者プロフィール

  • WINGSプロジェクト 中川幸哉(ナカガワユキヤ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5