スペースマーケットのマークアップについて

スペースマーケットのマークアップにおけるコーディングルールについてお話したいと思います。

スペースマーケットのマークアップは、主にReactでコンポーネントを作っており、スタイリングはstyled-componentsを採用しています。

一部古い環境でhtml + scssで作っているところもありますが、現在はあまり触ることはありません。

コーディングルール

ブレークポイント
ブレークポイントは、下記の4つになります。

xs: 350px
tablet: 768px
desktop: 1080px
xl: 1440px

主にtabletとdesktopを使用しており、xsはiPhoneSEなどの小さなデバイス用、xlはpcなどで画面を広げたときに使用するものなので、そこまで使用頻度は多くないです。

メディアクエリー
メディアクエリーは下記3つになります。

- mediaMin：@media (min-width: ○○px){}
- mediaMax：@media (max-width: ○○px){}
- mediaOn：@media (max-width: ○○px) and (min-width: ○○px){}

mediaMinとmediaMaxは、それぞれmin-widthとmax-widthの役割をします。
mediaOnは、指定したブレークポイントとその一つ上のブレークポイントの間という指定がされます。

例えば、tablet（768px）を指定した場合は、tabletからdesktop（1080px）までの指定になるといった感じです。

// mediaOn.tabletの場合
@media (min-width: 768px) and (max-width: 1079px) {
}

margin

marginは、原則topとleftにつけるというルールにしています。
理由としては、統一することでコードを読みやすくするというものもありますが、rightやbottomで指定するとことによりmarginがどこについているのかがわかりにくくなり、カラムの落ちの原因になったり、不要な余白が生まれしまうことを未然に防げるためです。

また、marginやpaddingに設定する値は、デザインに合わせて予め決められた値を入れるようにしており、決められた値以外のものを指定すると、アラートが出て知らせてくれるようにしています。

ただ、値についてもmarginの方向についても、デザインとブラウザでの差異はあったり、微調整のために使用することもあると思うので、例外も認める形にしています。（多用は🙅‍♀️）

font-sizeとz-index

font-sizeとz-indexについても、magin, paddingと同様予め決められた値を指定できる形にしていますが、magin, paddingのように例外は認めておらず、必ず決められた値のみが入るようになっています。

こちらも決められた値以外を入れるとアラートで怒られます😡

color

スペースマーケットは複数のサービスを運用しており、それぞれカラーがあります。

各サービスで使用するコンポーネントは、共通コンポーネントとして管理されているのですが、ボタンなどのコンポーネントはbackground-colorにprimaryカラーが指定されているので、それぞれのサービスで読み込まれた時に各サービスのカラーをコンポーネントに反映しなければなりません。

そのため、styled-componentsのThemeProviderを使用し、呼び出しもとの情報をコンポーネントに渡せば、自動で各サービスのカラーが指定されるようにしています。

<ThemeProvider theme={{ service }}>{props.children}</ThemeProvider>
// serviceに対して、サービスの情報(www,even)を渡します。

例えばメインとなるprimaryカラーを指定する場合は、このように指定します。

const hoge = styled.div`
  color: ${primary};
`

するとそのサービスでのprimaryカラーを、カラーを管理しているファイルから取ってきてくれます。

primary: {
  www: '#4abfe6',
  stay: '#dc4d6f',
  event: '#f47856',
}

wwwでprimaryカラーを呼び出した時は#4abfe6に、eventで呼び出した時は#f47856になるといった感じです。

同じ要領で、secondaryカラーなどもカラーリストの中に入れています。

最後に

いかがだったでしょうか？

個人的には、値が決められていることで、ありがちなz-index問題などで頭を悩ませることもなくなりますし、marginの値に関して言えばデザインファイル内でのズレにも気がつくことできるという点でメリットを感じています！

採用

スペースマーケットでは以下のポジションを募集しています！