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の超初心者なのでここ違ってるなどあればコメントいただけたらと思います。

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

ABOUT ME
sakai
三重出身の28歳。前職はメーカーで働いていて、プログラミングスクールに通って未経験からWeb業界に転職しました。Railsをメインで使っていて、AWSも少しできます。音楽を聞くこととYoutubeを見るのが好きです。最近はへきトラ劇場にハマってます