React

【React】定数や画像を定義する

  /

今、Reactの学習をTechpitのRailsとReactでUberEats風SPAアプリケーションをつくってみよう！という教材を使ってやっているのですが、そこで勉強したことを書いていきたいと思います。

今回は、プロジェクト内で共通で参照される定数や、画像を配置するやり方についてです。

APIリクエストに関する定数を定義

定数がコンポーネントファイルにべた書きされているとファイルごとに定数の定義がバラバラになり、それらを比較できなくなりますし、可読性も悪いです。それを防ぐため1つのファイルに定数をまとめて定義して、それを参照するというやり方がよくとられます。

定数ということで、constants.jsというファイルをつくりそこに定義していきます。

export const REQUEST_STATE = {
  INITIAL: 'INITIAL',
  LOADING: 'LOADING',
  OK: 'OK',
}

export const HTTP_STATUS_CODE = {
  NOT_ACCEPTABLE: 406,
}
REQUEST_STATE

APIリクエストが今どういう状態なのかを知るための定数です。ローティング中であればくるくる回るUIを出せますし、完了したなら成功アラートを出すこともできます。

スタイルに関する定数を定義

スタイルについても定数にすることで、コンポーネントごとの色の差異をなくすことができます。

こんどはstyle_constants.jsというファイルをつくりそこに定義していきます。

export const COLORS = {
  MAIN: '#02A457',
  BORDER: '#e2e2e2',
  SUB_TEXT: '#545454',
  SUB_BUTTON: '#eeeeee',
}

export const FONT_SIZE = {
  STAND_BODY: '24px',
  BODY1: '16px',
  BODY2: '14px',
}

定義したスタイルは次のように使うことができます。

background-color: ${COLORS.SUB_BUTTON};
  • 定数は1つのファイルにまとめて定義してそれを使うようにする

さいごに

今回は定数の定義ということで簡単にまとめてみました。僕はReactの超初心者なのでここ違ってるなどあればコメントいただけたらと思います。

ここまで読んでいただきありがとうございました。

react 定数
ABOUT ME
sakai
東京在住の30歳。元々は車部品メーカーで働いていてましたが、プログラミングに興味を持ちスクールに通ってエンジニアになりました。 そこからベンチャー → メガベンチャー → 個人事業主になりました。 最近は生成 AI 関連の業務を中心にやっています。 ヒカルチャンネル(Youtube)とワンピースが大好きです！
BLOG：https://sakaishun.com
関連記事