点数
77点
感想
システム開発というよりはCSSなどデザイン系の内容が多かった。
この書籍の発売日は2022/7/30とそこまで古くはないのにも関わらず、Next.jsのバージョンが上がったことで本文とは異なる仕様になっている点がいくつかあった。
仕方がないことだが、フロントエンドの移り変わりは本当に速すぎると思う。
CSS
min()関数, max()関数, clamp()関数
メディアクエリを使って何行も書いていたコードを1行に短縮することができる。
すべてのモダンブラウザでサポートされている。
width: min(50%, 500px);とすると50%, 500pxの小さい方が適用される。
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は除去しない
],
});