React - Constantsの扱い方
背景
フロントのリファクタリングを行った際に軽く調べた内容を書き留めておきたいと思いました。
本記事では、一括更新時のReactにおけるConstantsに関する説明を簡単に解説していきます。
Constantsとは
ReactにはConstantsと呼ばれる、変数や値を定義する方法があります。
コード内で使用される値を一元管理でき、変更が必要になった場合にも、一箇所で変更するだけで済むため、コードの保守性を高めることができます。
課題 - 定数管理がまとめて管理されていないと可読性が悪い
定数がコンポーネントファイルにベタ書きされているとファイルごとに定数の定義がバラバラになり、WETなコーディングになってしまいます。
constantsという同じ定数を複数のファイルで共有することができます。また、可読性も向上するため、メンテナンス性が高まります。
使用方法
具体的には、以下のように定数を定義します。
export const API_URL = 'https://example.com/api'; export const MAX_ITEMS = 10;
このように定数を定義すると、他のファイルでこれらの値を使用する場合には、以下のようにimportして使用できます。
import { API_URL, MAX_ITEMS } from './constants';
fetch(`${API_URL}/users?max=${MAX_ITEMS}`);
スタイルにも活用できる
スタイルに関する定数を定義することで、コンポーネントごとの色の違いをなくすことができます。
この例では、style_constants.jsというファイルを作成し、そこに以下のような定数を定義します。
export const COLORS = {
PRIMARY: "#0088cc",
SECONDARY: "#0055cc",
TERTIARY: "#0011cc",
LIGHT: "#f2f2f2",
DARK: "#333333"
}
export const FONT_SIZES = {
SMALL: "12px",
MEDIUM: "16px",
LARGE: "20px"
}
export const SPACING = {
SMALL: "8px",
MEDIUM: "16px",
LARGE: "24px"
}
定数としてCSSの各種プロパティを定義することで、コンポーネントのスタイリングに利用することができます。例えばCOLORS.PRIMARYのように定数を参照することで、コンポーネント内で一貫したスタイリングを実現できます。
React以外でも一般的に使用される
ReactのConstantsは、主にReactコンポーネントで使用される定数や値を一元管理するために利用されます。
React以外でもJavaScriptのプログラム全般でConstantsを利用することはできますが、Reactコンポーネントで使用される定数や値を一元管理するための手法として、Constantsは特に有用です。
Railsエンジニアにとっても、Constantsはおなじみの概念であるかと思います。
Railsにも定数を定義する方法があり、その定数を利用して、例えばエラーメッセージを表示するコンポーネントを作成することができます。
ReactのConstantsも同様に、定数を一元管理することでコードの保守性を高めることができます。
おわりに
コメント
本記事の内容は以上になります！
参考になったり学びのきっかけになりますと幸いです。
間違いがありましたら修正いたしますので、ご指摘ください。
興味があれば他の記事も更新していきますので是非ご覧になってください♪
プログラミングスクールのご紹介 (卒業生より)
お世話になったプログラミングスクールであるRUNTEQです♪
こちらのリンクを経由すると１万円引きになります。
RUNTEQを通じて開発学習の末、受託開発企業をご紹介いただき、現在も双方とご縁があります。
もし、興味がありましたらお気軽にコメントか、TwitterのDMでお声掛けください。
