Reactで表示する文字に色をつける

• ホーム
• ブログ
• Firebase情報

Reactでイベント処理を行う

2022年5月26日

React で表示する文字に色をつける！

Vue の場合も表示する文字に色をつけるために、CSS の記述が必要でした。React でも同じように CSS の記述が必要です。React の場合は、別のファイルに CSS を記述して「部品」のファイルである、「xxxx.tsx」でインポートする方法を使います。

CSS で記述すれば簡単！

前回の連載のVue 公式チュートリアル（英語版）をご覧になった方ならば、今回の課題は簡単です。同じように CSS を記述すれば簡単に実現できます。 今回のステップ３の実装例です。

import React from "react";
import "./styles/step3.css";
export default function Step3(): JSX.Element {
  const titleClass: string = "title";
  return (
    <div className="step3">
      <h1 className={titleClass}>Make me red</h1>
    </div>
  );
}

この「部品」の記述は、「Make me red」を Web ブラウザで表示するための、HTML に対応する部分(JSX)を作っています。実際に文字を赤くするのは、HTML に対応する部分（JSX）に CSS で装飾を指定するためのタグ（className）をつけて、CSS ファイルで指定します。

今回は、「./styles/step3.css」をインポートしています。

.title {
  color: red;
}

これで文字は赤くなります！

今回のポイントは？

今回のポイントは、「文字を赤くする」というのが課題ですが、幾つか他にも理解しておくと役に立つことがあるので紹介します！

• CSS で利用するタグの指定のやり方
• Typescript での変数の宣言

この二点です。

最初の項目は、今回の CSS で利用しているタグは、「title」です。HTML に相当する JSX の記述では、JSX は Typescript(Javascript)のプログラムの一部として記述するので、Typescript(Javascrript)で使っている単語（予約語）は使えません。前の記事でも触れていますが、JSX では、「className」で指定します。

ここで、直接タグの名前、今回の例では、「title」を直接指定しても良いのですが、この例では、Typescript（Javascript）の変数を利用して指定しています。このようにする事で、例えば条件によって文字の色を変えるような処理が可能になります。

今回の例では利用していませんが、例えば、数値を表示する場合に、正の数の場合は「青」、負の数の場合は「赤」のような指定が可能になります。Vue のチュートリアルでも同じような形で実装していました。

二点目は、繰り返しになりますが、今回の例では Typescript の利用を前提としているので、定数（変数）の指定時は、「型」を一緒に宣言するという事です。これも以前に紹介していますが、こうする事で、宣言と違う型で使われた場合などをコンパイル時にチェックする事が可能になります。このようにコードを書くことでプログラムの品質が向上します。

CSS の適用範囲に注意！

これは、今回の例では特に問題になる事ではありませんが、CSS の適用範囲に注意する必要があります。 例えば、今回の例では、「title」というタグが CSS の記述のために利用されています。 ところが、他の「部品」（ページ）などで、同じタグが利用されている場合、意図しない CSS の修飾がされてしまう場合があります。

例えば、「step1.tsx」で「title」のような記述を使っている場合です。「step1.tsx」では文字は黒にしたいのに、「step3.tsx」では赤にしたいような場合には注意が必要です。 Vue の場合は、CSS 部分に記述にアトリビュート（attribute）で指定すると、そのファイル（部品）の中のみで有効な CSS の記述を書く事ができますが、React で CSS ファイルをインポートして利用する場合には、同じタグがあるとお互いに干渉してしまいます。

この場合少し工夫することで、こうした干渉を最小限にする事ができます。 一つの例としては、部品の名前を使ったタグを入れる事です。この例では、「step3」というタグをつけておいて、これを CSS の記述に追加しておくと、そうした干渉を回避できます。

.step3 .title {
  color: red;
}

のように記述すると、「step3」が他の「部品」で使われていない場合には他の「部品」の「title」のタグの修飾と干渉することはありません。部品の名前が重複しないように設計してある場合、このような方法で回避する事ができます。（最初のコードの例では、「step3」のタグを、「div」に入れてあります。）

実際の開発でよく起きる問題を考える

前回の Vue のチュートリアルの連載は、「基礎」に重点を置いたのであまり触れていませんでしたが、実際の開発ではよく起きる共通の問題があります。

今回挙げた、CSS の適用範囲の問題は実際にもよく起きる問題です。 特に複数の人が開発に関わる場合「title」のようなタグは他の人も使う可能性が高くなります。こうした、各個人では意図しない干渉はグループで行う開発ではよく起きる問題です。

今回の連載ではこうした問題にも触れながら進めていく方針です。

今回挙げた例では、CSS に「部品」の名前など固有と考えられる、タグをつけて範囲を限定する事で、他の部品に影響が出ないようにする例を紹介しています。これに加えて、例えば、設計者ごとにタグにつける「prefix」を決めるなどの方法も有効です。

この場合、設計全体で適用するタグには、「g」(Global)をつけるようにして、必要な者は共用します。それ以外は、設計者の番号やイニシャルを決めて重複しないように「prefix」をつけると解決します。例えば、イニシャルが「t」の人が他にいなけらば、その人が担当する部分のみで使うタグには「t」をつけるようにすると、重複が避けられます。

まとめ

今回は、React で表示する文字に色をつける方法を紹介しました。 内容が簡単なので、この例をもとに少し拡張して、実際の開発現場でよく起きる問題の紹介と対処方法も併せて紹介させて頂きました。

今回、Typescript を採用して紹介しているのも、その一環です。 複数の設計者で開発を担当する場合、お互いのインターフェースの型が一致しないなどの問題がおきやすくなります。Typescript で型のチェックをより厳格に行うことでこの手の問題をコンパイル時に発見しやすくなります。

このように、実際のプログラム開発の現場では、プログラムの機能の実現以外にも考慮した方が良い点がたくさんあります。今回の連載では、こうした部分も含めて紹介していく予定です。

Copyright(c) 2017-2021 by Silicon Valley Super Ware, all rights reserved.