ぐぇー。前回からあっという間に2ヶ月以上も過ぎてる…。ってゆうか年越しちゃってる…。何なら節分も…。なんつーか記憶喪失にでもなっていたかの様な心持ち。私何してたっけ…と半ば本気で回想してしまい、本業の方でやっぱり WordPress（をご指定）でとあるサイトを構築する事になり（やはり WordPress からは逃げられない事が明らかに…）すったもんだが始まったと思ったら（これはこれで別の記事にしよっと）久方ぶりに以前に作った Windows Form アプリケーションの改修が入り、C# と格闘していた事をうっすらと思い出した二月のとある一日、皆様如何お過ごしでしょうか？（なんだそれ）
自分で自分の記事を読み返してみて、あっそうそうここまでやったっけ（これがいいよね）と記憶喪失状態からだんだんと記憶が蘇ってきたところで 今回のお題は「CSS-in-JS」です。
では、早速公式を見てみましょう。
グローバルCSSファイル：Webサイトのスタイルを設定する従来の方法。CSSルールはグローバルに宣言され、スタイルは特異性と継承に応じて適用されます。
モジュラースタイルシート：CSSルールは従来から記述されていますが、JavaScriptで使用され、他の場所での意図しない副作用を回避するためにローカルでスコープされています。Gatsbyですぐに使用できます。
CSS-in-JS：JavaScriptで記述および使用されるローカルスコープのCSS。動的なスタイル設定やその他の機能をより簡単に使用できるようにします。サードパーティのライブラリを使用する必要があります。
https://www.gatsbyjs.com/docs/styling/
Google 先生に助けて頂きました（正確な情報は公式サイトでご確認いただけますのでお願いいたします）
グローバルCSSファイルとモジュラースタイルシートは以前に確認したので、今日は最後の CSS-in-JS を見てみたいと思います。
では再び公式サイトを見てみましょう。なになに？「CSS-in-JSは、スタイルを外部CSSファイルではなくJavaScriptで記述して…」ううむ。そもそもこの辺りの知識が致命的に足りていないので、そもそも「CSS-in-JS」とはなんぞや？と、言う事でまたしてもどんどんと本題から外れてしまうのですが、一旦 Gatsby から離れて「CSS-in-JS」を調べてみる事にします。
そもそもCSS-in-JSって何？
例によって例の如く、毎度 Web をグルングルンし続けていると、何やら朧げながら見えてきました。どうやら javascript で CSS を書くことが出来て、コンポーネントごとにスタイルを当てられる。ふむふむ。Vue.js の SFC みたいなのかしら。うん？ JS と CSS で変数を共有？ えっ関数も？ うーん。これは実際に手を動かしてみないと全く理解出来ません。早速やっていこうと思います。
まず、CSS-in-JS は単体の機能名ではなく、ライブラリとして複数存在している様です。どうやら Gatsby の公式サイトではCSS-in-JS ライブラリである Emotion と Styled-components でスタイルの当て方が記述されています。取り敢えず Emotion で試してみましょう。
Emotion を使ってみよう
と言う事で、早速やってみましょう。まずは Gatsby で Emotionを使うためのプラグインをインストールする必要がある様です。
npm install gatsby-plugin-emotion @emotion/react @emotion/styledプラグインを使う場合は gatsby-config.js と言う設定ファイルに記述する必要がある様です。場所は前回 destyle.css を記入した gatsby-browser.js ファイルがあるのと同じ場所です。
module.exports = {
plugins: [`gatsby-plugin-emotion`],
}で、本当ならいつもの様に公式コードをそのまま写経してからバラしたりして理解するのですが、今回はどうも理解が進みません。公式ページのコードが少し長くて、もうちょっと小さいコードが見たかったのです。
そこで Emotion の公式サイトを見てみます。
… うーん。コード自体は小さい物があるのですが、どうやら書き方が色々ある様で、どうも混乱してきました。
ここは一旦回り道をして Emotion の事をもう少し見てみましょう。
改めて、Emotionとは？
Emotionは、JavaScriptを使用してcssスタイルを作成するために設計されたライブラリです。ソースマップ、ラベル、テストユーティリティなどの機能を備えた優れた開発者エクスペリエンスに加えて、強力で予測可能なスタイル構成を提供します。文字列とオブジェクトの両方のスタイルがサポートされています。
https://emotion.sh/docs/introduction
との事で、分かった様な分からない様な…。
install の次にある The css Prop のページを見てみると「The primary way to style elements with emotion is the css prop.」とあります。主な方法らしいのでここから見ていきましょう（本当にもうちょっと英語力何とかならないかしら…）
四苦八苦しながら見ていくと react の文字のあるコードが見えてきました。
取り敢えずそのままペタリしてみましょう。
まずはテスト用のページを作ります。
import React from "react"
import {css} from "@emotion/react"
const color = 'darkgreen'
export default function Hoge() {
return (
<div
css={css`
background-color: hotpink;
&:hover {
color: ${color};
}
`}
>
This has a hotpink background.
</div>
)
}ページにアクセスしてみましょう。
ふんふん。良いですね。
どうやら、この記法だと CSS をそのまま書けるのかな？色々と試してみましょう。
それでは次にコンポーネントを作ってから配置してみましょうか。
まずは配置するコンポーネントをを作ります。
mport React from "react"
import {css} from "@emotion/react"
const HeadingStyle = css`
background: #6a5acd;
font-size: 1rem;
color: #ffffff;
padding: 10px;
`;
function Layout({ children }) {
return <p css={HeadingStyle}>{children}</p>
}
export default Layout次にコンポーネントを配置するページを作ります。
import React from "react"
import Layout from "../components/layout"
export default function Home() {
return <Layout>Emotio Test!</Layout>
} では、ページにアクセスしてみましょう。
ふんふんふん。良いじゃないですか。
ついでにも一つコンポーネントを作って配置してみよっと。
import React from "react"
import "typeface-fira-sans-extra-condensed"
const HeadingStyle = css`
width: 380px;
height: 80px;
background: #00ced1;
font-family: 'Fira Sans Extra Condensed';
font-size: 3rem;
color: #fff;
padding: 10px;
`;
function Heading({ children }) {
return <p css={HeadingStyle}>{children}</p>
}
export default Headingimport React from "react"
import Layout from "../components/layout"
import Block from "../components/block"
export default function Home() {
return (
<div>
<Layout>Emotio Test!</Layout>
<Block>Component Test!</Block>
</div>
)
}
うんうん。良きかな。良きかな。
では最後にそりゃっと。
一旦コンポーネントにしておくと、こう言うのが簡単に出来ちゃうから良いよねー。
まだ完全には理解出来ていないのですが、このタグ付きテンプレートリテラルでの書き方はとても分かり易くて気に入りました。取り敢えずこの書き方で始めてみよっと。だって Vue.js の SFC の様に一つのファイルにも出来るからあっちこっちに別れてなくて、自分的にはとても良いです。
まだまだ Global Styles や興味を引くモノが沢山ありますが、書き方が随分と色々ある様で、少しづつ見ていく事にします。
しかし、前回の記事が11月なので何やかやで３ヶ月近く経っちゃってるよ。ホントにトホホだな…。
コメント