「作って学ぶ Next.js/React Webサイト構築」の感想・備忘録

font-size: clamp(1rem, 2.5vw, 2rem);
width: clamp(400px, 50vw, 600px);
のようにclamp関数を使うと最小値、推奨値、最大値を指定することができ、最小値より大きく最大値より小さいときは推奨値が適用される。
推奨値はvw（ビューポートの幅に対する割合）で指定する。
例えばviewportの長さが2000pxの場合は100vw=2000pxとなり50vw=1000pxとなる。

フクロウセレクタ

* + *とすることで最初以外の要素（二番目以降全て）を指定するセレクタとなる。
+は隣接セレクタ（次の兄弟要素）

ul > * + * { margin-left: 30px; } とすると2番目以降のliにだけマージンを指定することができる。

styled-jsx

styled-jsxでのセレクタ指定方法

<styled jsx global>とするとスコープのないグローバルなセレクタとなる。
特定のセレクタのみグローバル扱いにする場合は:global()を使う。
.text h1は.text.jsx-695e1ef7d81dd1fd h1.jsx-695e1ef7d81dd1fdのようなCSSになるが、 .text :global(h1)は.text.jsx-695e1ef7d81dd1fd h1のようなCSSになる。

npmパッケージ

date-fns

かつてはJavaScriptで日付を扱うライブラリとしてMoment.jsが使われていた。
しかし、mutableである・サイズが大きい、などの理由から現在では非推奨となっている。
代替として使われているライブラリではdate-fnsが最も人気がある。

使い方

npm install date-fnsでインストール

import { ja } from 'date-fns/locale'
import { format } from 'date-fns'

const currentDate = format(new Date(), 'yyyy年M月d日(E)', { locale: ja })
console.log(currentDate) // 20223年4月21日(金)

html-react-parser

JSXのタグボディはHTMLがエスケープされるため、文字列をHTMLとして出力するにはdangerouslySetInnerHTM属性に__htmlをキーにしたオブジェクトを指定する必要がある。
<div dangerouslySetInnerHTM={{__html: '<p>aaa</p>'}} />

ただし、必ず<div>などの要素で囲まなければならない、<img>があった場合にnext/imageを使えない、などのデメリットがある。
html-react-parserを使うと階層が深くなることもなく、<img>をnext/imageの<Image>に置換することもできる。

使い方

npm install html-react-parserでインストール

import parse from 'html-react-parser'

const content = parse('<p>aaa</p>')
// contentはJSXの中で使える
// <div>{content}</div>

//<img>をの<Image />に書き換えるには、replaceオプションを追加する。
parse('<img src="/hoge.png" width="100" height="100" alt="">', { replace: (node) => {
  if (node.name === 'img') {
    const {src, alt, width, height} = node.attribs;
    return <Image src={src} width={width} height={height} alt={alt} />
  }
}})

html-to-text

HTMLから文字列だけを抜き出すことができる。
npm install html-to-textでインストール

import { convert } from 'html-to-text'

const text = convert('<a href="/">TOP</a>', {
  selectors: [
    {selector: 'img', format: 'skip'}, // <img>は除去しない
    {selector: 'a', options: {ignoreHref: true}, // <a>のhrefは除去しない
  ],
});