{"id":676,"date":"2021-07-27T17:16:57","date_gmt":"2021-07-27T08:16:57","guid":{"rendered":"https:\/\/weseek.co.jp\/tech\/?p=676"},"modified":"2023-04-17T10:28:52","modified_gmt":"2023-04-17T01:28:52","slug":"css-%e3%82%92-javascript-%e3%81%ab%e8%a8%98%e8%bc%89%e3%81%99%e3%82%8b%ef%bc%81next-js-%e3%81%a7-css-in-js-%e3%82%92%e4%bd%bf%e3%81%86%e6%96%b9%e6%b3%95","status":"publish","type":"post","link":"https:\/\/weseek.co.jp\/tech\/676\/","title":{"rendered":"CSS\u3092JavaScript \u306b\u8a18\u8f09\u3059\u308b-Next.js\u3067CSS-in-JS \u3092\u4f7f\u3046\u65b9\u6cd5"},"content":{"rendered":"

\u3053\u306e\u6295\u7a3f\u306f\u3001\u5f0a\u793e\u304c\u63d0\u4f9b\u3059\u308bWESEEK TECH\u901a\u4fe1<\/strong>\u306e\u4e00\u74b0\u3067\u3059\u3002
\nWESEEK TECH\u901a\u4fe1\u3068\u306f\u3001WESEEK\u306e\u30a8\u30f3\u30b8\u30cb\u30a2\u304c\u30ad\u30e3\u30c3\u30c1\u30a2\u30c3\u30d7\u3057\u305f\u6280\u8853\u306b\u95a2\u3059\u308b\u60c5\u5831\u3092\u3001tech\u30d6\u30ed\u30b0\u3092\u901a\u3058\u3066\u5b9a\u671f\u7684\u306b\u767a\u4fe1\u3057\u3066\u3044\u304f\u3082\u306e\u3067\u3059\u3002<\/p>\n

\u524d\u56de\u307e\u3067\u306e\u304a\u3055\u3089\u3044<\/h2>\n

\u7169\u308f\u3057\u3044\u8a2d\u5b9a\u306f\u4e00\u5207\u306a\u3057!Next.js\u3067CSS \u3092\u4f7f\u3046\u65b9\u6cd5<\/a>\u3067\u306f Next.js \u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u3068 Build-in \u3067\u30b5\u30dd\u30fc\u30c8\u3055\u308c\u3066\u3044\u308b CSS \u306e\u65b9\u6cd5\u3092\u7d39\u4ecb\u3057\u307e\u3057\u305f\u3002<\/p>\n

Next.js \u306f\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u3059\u308b\u3068\u7169\u308f\u3057\u3044\u8a2d\u5b9a\u3092\u3059\u308b\u3053\u3068\u306a\u304f CSS \u3092\u66f8\u3051\u307e\u3059\u3002
\n\u307e\u305f\u3001\u30b9\u30b3\u30fc\u30d7\u3092\u72ed\u3081\u305f CSS Modules \u306e\u8a18\u8f09\u65b9\u6cd5\u3082\u3054\u8aac\u660e\u3057\u307e\u3057\u305f\u3002<\/p>\n

\u4eca\u56de\u306e\u8a18\u4e8b\u3067\u306f\u524d\u56de\u306e\u8a18\u4e8b\u3067\u5b9f\u73fe\u3059\u308b\u74b0\u5883\u3068\u540c\u3058\u72b6\u6cc1\u3067 CSS-in-JS \u306e\u8aac\u660e\u3092\u3057\u307e\u3059\u3002<\/p>\n

<\/p>\n\n

CSS-in-JS \u3068\u306f<\/h2>\n

JavaScript\u3092\u4f7f\u7528\u3057\u3066\u30b9\u30bf\u30a4\u30eb\u3092\u9069\u5fdc\u3055\u305b\u308b\u65b9\u6cd5\u3092\u8a00\u3044\u307e\u3059\u3002 <\/p>\n

\u524d\u56de\u306e\u4f8b\u3060\u3068 css \u30d5\u30a1\u30a4\u30eb\u3092\u5225\u9014\u7528\u610f\u3057\u3066\u30b9\u30bf\u30a4\u30eb\u3092\u8a18\u8ff0\u3057\u3066\u307e\u3057\u305f\u3002
\nCSS-in-JS \u3060\u3068\u305d\u306e\u5fc5\u8981\u304c\u306a\u304f\u306a\u308b\u306e\u3067 1\u30d5\u30a1\u30a4\u30eb\u3067\u30c7\u30b6\u30a4\u30f3\u307e\u3067\u5b8c\u7d50\u3055\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n

\u5177\u4f53\u7684\u306a\u65b9\u6cd5\u3092\u898b\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n

\u30a4\u30f3\u30e9\u30a4\u30f3 \u30b9\u30bf\u30a4\u30eb<\/h2>\n
export const Button = () => {\n  return <button style={{ color: 'blue' }}>Click me!<\/button>\n};<\/code><\/pre>\n
\u3082\u3063\u3068\u3082\u30b7\u30f3\u30d7\u30eb\u306a\u65b9\u6cd5\u304c \u30a4\u30f3\u30e9\u30a4\u30f3 \u30b9\u30bf\u30a4\u30eb \u3067\u3059\u3002
\n\u6587\u5b57\u901a\u308a CSS\u3092 Component \u3001\u4eca\u56de\u3060\u3068 button \u30bf\u30b0\u306b style \u3068\u3057\u3066\u6e21\u3059\u3053\u3068\u3067 \u30b9\u30bf\u30a4\u30eb\u3092\u8a18\u8ff0\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002  <\/p>\n
\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u30ad\u30fc\u306e\u90e8\u5206\u306f\u3001Camel Case\u3067\u66f8\u304f\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002
\n\u4f8b\u3048\u3070 margin-top<\/code> \u3092\u4f7f\u7528\u3059\u308b\u3068\u304d\u306f marginTop<\/code> \u3068\u66f8\u304d\u307e\u3059\u3002<\/p>\n
\u307e\u305f px \u6307\u5b9a\u306e\u5834\u5408\u306f px \u3092\u7701\u7565\u3057\u3066\u8a18\u8f09\u3067\u304d\u307e\u3059\u3002<\/p>\n
button \u30bf\u30b0\u306e\u884c\u304c\u5e45\u3092\u53d6\u308a\u3059\u304e\u306a\u3044\u3088\u3046\u306b\u4e2d\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u90e8\u5206\u3092\u5909\u6570\u306b\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002<\/p>\n
\u4ee5\u4e0a\u306e\u3053\u3068\u3092\u8e0f\u307e\u3048\u3066\u8a18\u8f09\u3059\u308b\u3068\u6b21\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002\"\"<\/p>\n
export const Button = () => {\n  const buttonStyle = {\n    color: 'blue',\n    marginTop: 50,\n    marginLeft: 50,\n  };\n\n  return <button style={buttonStyle}>Click me!<\/button>\n};<\/code><\/pre>\n
styled-jsx<\/h2>\n
\u30a4\u30f3\u30e9\u30a4\u30f3 \u30b9\u30bf\u30a4\u30eb\u3067\u306f\u3001\u30b7\u30f3\u30d7\u30eb\u306b\u8a18\u8f09\u3067\u304d\u308b\u5206 searchability \u304c\u4f4e\u3044\u3067\u3059\u3002
\n\u4f8b\u3048\u3070\u4f8b\u306b\u51fa\u3057\u305f margin-top<\/code> \u3092\u691c\u7d22\u3057\u305f\u3044\u3068\u304d\u306b\u3001 marginTop<\/code> \u3067\u691c\u7d22\u3057\u306a\u3044\u3068\u8a72\u5f53\u306e\u7b87\u6240\u304c\u51fa\u3066\u3053\u306a\u3044\u3002<\/p>\n
\u958b\u767a\u8005\u304c\u6163\u308c\u3066\u3044\u308c\u3070\u554f\u984c\u306f\u306a\u3044\u3067\u3059\u304c\u3001\u30c7\u30b6\u30a4\u30ca\u30fc\u304c\u30b9\u30bf\u30a4\u30eb\u3092\u8a18\u8ff0\u3059\u308b\u5834\u5408\u306b\u6587\u6cd5\u3092\u77e5\u3063\u3066\u306a\u3044\u3068\u691c\u7d22\u3067\u304d\u306a\u3044\u306e\u306f\u56f0\u308a\u307e\u3059\u3002<\/p>\n
\u305d\u3053\u3067\u3088\u308a\u7d14\u7c8b\u306aCSS\u306e\u6587\u6cd5\u3067\u8a18\u8ff0\u3059\u308b\u65b9\u6cd5\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n
https:\/\/github.com\/vercel\/styled-jsx<\/a><\/p>\n
styled-jsx \u3067\u306f <style jsx><\/code> \u3068\u3044\u3046\u30bf\u30b0\u3092JSX\u4e0a\u3067\u5229\u7528\u3057\u3066 CSS \u3092\u8a18\u8ff0\u3067\u304d\u307e\u3059\u3002
\n\u5148\u7a0b\u306e\u30dc\u30bf\u30f3\u306e\u4f8b\u3067\u8a00\u3046\u3068\u6b21\u306e\u3088\u3046\u306b\u8a18\u8ff0\u3057\u307e\u3059\u3002<\/p>\n
export const Button = () => {\n  return (\n    <>\n      <button>Click me!<\/button>\n      <style jsx>{`\n        button {\n          color: blue;\n          margin-top: 50px;\n          margin-left: 50px;\n        } \n      `}<\/style>\n    <\/>\n  )\n}<\/code><\/pre>\n
\u3053\u308c\u306b\u3088\u3063\u3066\u6570\u5024\u306b px \u3092\u3064\u3051\u305f\u308a\u3001\u30b1\u30d0\u30d6\u30b1\u30fc\u30b9\u3067\u8a18\u8ff0\u304c\u3067\u304d\u307e\u3059\u3002
\nCSS \u306e\u6587\u6cd5\u306e\u307e\u307e\u3067\u8a18\u8ff0\u304c\u53ef\u80fd\u306b\u306a\u308a\u307e\u3057\u305f\u3002\"\"<\/p>\n
\u8a18\u8ff0\u3057\u305f CSS \u306f head \u306b\u751f\u6210\u3055\u308c\u307e\u3059\u3002
\njsx-3864162467<\/code> \u3068\u3044\u3046\u3088\u3046\u306b jsx \u3068\u6570\u5024\u304c\u4e0e\u3048\u3089\u308c\u3001\u4ed6\u306e\u8981\u7d20\u306b\u5f71\u97ff\u304c\u51fa\u306a\u3044\u3088\u3046\u306a CSS \u304c\u751f\u6210\u3055\u308c\u307e\u3059\u3002<\/p>\n
CSS-in-JS \u306e\u30e1\u30ea\u30c3\u30c8<\/h2>\n
CSS \u3092 JavaScript \u4e0a\u3067\u8a18\u8f09\u3059\u308b\u3053\u3068\u306b\u3069\u3093\u306a\u30e1\u30ea\u30c3\u30c8\u304c\u3042\u308b\u306e\u3067\u3057\u3087\u3046\u304b\u3002<\/p>\n
1\u3064\u306b\u306f JavaScript \u4e0a\u306b\u3042\u308b\u5024\u3092\u7c21\u5358\u306bCSS\u306e\u4e16\u754c\u3078\u6301\u3061\u8fbc\u3080\u3053\u3068\u304c\u53ef\u80fd\u3067\u3042\u308b\u3068\u8a00\u3046\u3053\u3068\u3067\u3059\u3002
\nuseState \u3092\u7528\u3044\u3066\u3001\u5024\u3092\u7ba1\u7406\u3059\u308b\u3053\u3068\u3067\u6b21\u306e\u3053\u3068\u304c\u53ef\u80fd\u3067\u3059\u3002<\/p>\n
import { useState } from 'react'\nexport const Button = () => {\n  const [isBlue, setIsBlue] = useState(false) \n  return (\n    <>\n      <button onClick={()=>setIsBlue(true)}>\u8272\u304c\u5909\u5316\u3059\u308b\u30dc\u30bf\u30f3<\/button>\n      <style jsx>{`\n        button {\n          color: ${isBlue ? 'blue' : 'black'};\n          margin-top: 50px;\n          margin-left: 50px;\n        } \n      `}<\/style>\n    <\/>\n  )\n}<\/code><\/pre>\n
\u30dc\u30bf\u30f3\u3092\u62bc\u3059\u3053\u3068\u3067 isBlue \u304c true \u306b\u306a\u308a\u307e\u3059\u3002
\nisBlue \u3092\u7528\u3044\u3066 color: ${isBlue ? 'blue' : 'black'};<\/code> \u3067\u8272\u3092\u5909\u5316\u3055\u305b\u3066\u3044\u307e\u3059\u3002<\/p>\n
\u3053\u306e\u3088\u3046\u306b\u4eca\u307e\u3067\u7169\u96d1\u306a\u5b9f\u88c5\u306b\u306a\u308b\u898b\u305f\u76ee\u306e\u5909\u5316\u3092\u3001\u3088\u308a\u76f4\u611f\u7684\u306b\u5b9f\u88c5\u3067\u304d\u307e\u3059\u3002<\/p>\n
\u307e\u3068\u3081<\/h2>\n
JavaScript\u306e\u77e5\u8b58\u304c\u5fc5\u8981\u306b\u306a\u308a\u307e\u3059\u304c\u3001CSS-in-JS \u3092\u7528\u3044\u308b\u3053\u3068\u3067\u3001CSS \u3092 JavaScript \u5185\u306b\u8a18\u8ff0\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n
\u4ed6\u306b\u3082 CSS-in-JS \u30e9\u30a4\u30d6\u30e9\u30ea\u306f\u6570\u591a\u304f\u3042\u308b\u305f\u3081\u53c2\u8003\u306b\u3057\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n