以前、[こちら](/posts/2023-08-16nextjs-blog)で説明したサイトの実装内容から、改善を行った点があるので、紹介していきたいと思います。

改善内容としては、これまで、MarkdownからHTMLに変換する処理のうち、一部をクライアント側で処理するようにしていましたが、全てビルド時にするように改善しました。

これによって、アクセス時にHTMLをASTに変換するparserをダウンロードする必要がなくなったため、通信料も減りました。

具体的には、
<dl>
<dt>Before<dt>
<dd>
一度ビルド&amp;デプロイ時にHTML変換したものを、ユーザーがアクセスするときに再びrehype-parseで分解して、コードのハイライトをしたり、画像をnext/imageに置き換えたり
</dd>
</dl>
を、
<dl>
<dt>After</dt>
<dd>
ビルド時にすべて行えるようにrehypeプラグインを作る
</dd>
</dl>
に改善しました。

作ったrehypeプラグインを順に紹介していきたいと思います。

## 画像のサイズをimgタグに付与するプラグイン
該当のコードは[ここ](https://github.com/saki-orange/blog-saki-orange-public/blob/main/src/libs/myrehype/rehype-image-size.ts)で、以下の様になっています。
``` javascript
export default function rehypeImageSize(): Transformer {
 return (tree) => {
 visit(tree, "element", (node: Element) => {
 if (["img"].includes(node.tagName)) {
 const { width, height } = sizeOf("public" + node.properties!.src);
 node.properties!.width = width;
 node.properties!.height = height;
 }
 });
 };
}
```
挙動としては、画像のサイズ(縦横の解像度)を取得し、imgタグのプロパティとして登録しています。これによって、意図したサイズで記事内に画像を表示できます。

## コードのハイライトを行うためのプラグイン
該当のコードは[ここ](https://github.com/saki-orange/blog-saki-orange-public/blob/main/src/libs/myrehype/rehype-mycodeblock.ts)で、以下のようになっています。
``` javascript
export default function rehypeMyCodeBlock(): Transformer {
 return (tree) => {
 visit(tree, "element", (node: Element) => {
 if (["pre"].includes(node.tagName)) {
 // block
 const preEl = node;
 if (preEl.properties) {
 preEl.properties.className ??= [];
 Array.isArray(preEl.properties.className) &&
 preEl.properties.className.push("codeblock group");
 }
 const codeEl = node.children[0] as Element;
 if (codeEl.properties) {
 codeEl.properties.className ??= ["hljs"];
 Array.isArray(codeEl.properties.className) &&
 codeEl.properties.className.push("codeblock__txt");
 }
 preEl.children.unshift(copyBtnHst as Element);
 }
 if (["code"].includes(node.tagName)) {
 if (!node.properties!.className) {
 // inline
 node.properties!.className = ["codeblock__inline"];
 }
 }
 });
 };
}
```
挙動としては、`sample`のようなインラインのコードでない上のようなコードブロックにclass`hljs`を追加し、コードのbutton要素を追加し、コードのコピー機能を実現するために必要なclassの付与を行っています。

コピー機能自体は、[ここ](https://github.com/saki-orange/blog-saki-orange-public/blob/1173b6f7430047ace64538cbae305e8913630bde/src/pages/posts/%5Bslug%5D.tsx#L23C1-L34C10)の実際に記事のレンダリングを行う箇所に`useEffect`として実装しています。

コード内容は以下のとおりです。
``` javascript
useEffect(() => {
 const codeBlockEls = document.querySelectorAll(".codeblock");
 codeBlockEls.forEach((el) => {
 const copyBtn = el.querySelector<HTMLElement>(".codeblock__btn");
 const txt = el.querySelector<HTMLElement>(".codeblock__txt")?.textContent || "";
 copyBtn?.addEventListener("click", () => {
 navigator.clipboard.writeText(txt);
 copyBtn.innerHTML = "Copied!";
 setTimeout(() => (copyBtn.innerHTML = "Copy"), 2000);
 });
 });
}, []);
```
先程紹介したプラグインで付与したclassを目印に、コード内容を取り出し、クリップボードにコピーしています。

これまでは、ここまでの処理をreact-syntax-highlighterやreact-copy-to-clipboardを用いて実装していました。

しかし、このように、良いコードであるかどうかは別として、出来上がったHTMLをあとから分解してコピー機能を実装したコンポーネントに置き直さなくても、コピー機能を実装できることが分かります。

## その他
その他に作ったプラグインとしては、以下の3つがあります。

### detailsタグのスタイル修正
detailsタグとは、以下のようなMarkdown表現です。
<details>
<summary>見出し</summary>

- 本文1
- 本文2
- 本文3
</details>

このdetailsタグのスタイルを変更する際に、ボタンのクリック可能範囲が狭まってしまう問題がありました。

これを解決するにはcssだけでは無理で、中の要素をdivタグ囲むような処理が必要だったため、rehypeプラグインを作って対応しました。

コードは[こちら](https://github.com/saki-orange/blog-saki-orange-public/blob/main/src/libs/myrehype/rehype-mydetail.ts)です。


### 外部リンクであれば新しいタブで開くようにする
内部リンクでは同じタブで、外部リンクであれば新しいタブで開くようにして、UXの改善に取り組みました。

コードは[こちら](https://github.com/saki-orange/blog-saki-orange-public/blob/main/src/libs/myrehype/rehype-mylink.ts)です。

### テーブルを横スクロール可能に
特にスマホの画面だと、[この記事](/posts/2023-10-14chrome)などではテーブルが横スクロールできず、見にくいという問題があったため、テーブルをdivタグで囲み、そのdivと中のtableにこのプラグインで目印となるクラスを付与しています。

その目印を元に、親となるdivには`whitespace-nowrap`を、子となるtableタグには`overflow-x-auto`を適用することで、横スクロールを可能にしました。

コードは[こちら](https://github.com/saki-orange/blog-saki-orange-public/blob/main/src/libs/myrehype/rehype-mytable.ts)です。

## まとめ
今回は、rehypeプラグインだけで実装できる機能は全て実装することで、通信料とパフォーマンスを改善しました。

このブログ自体そもそも軽いので、これをしなくても実際のところあんまり変わらないのですが、気分的に要らない通信を省けるというのは良いのでやってよかったと思います。

ただ、rehypeプラグインを多用すると複雑性が増すような感じがするので、大きなプロジェクトでは素直にReactコンポーネントを用意して、アクセス時に置き換える実装にするべきかも知れません。

このサイトのパフォーマンス改善を行ったので、改善内容と実装コードを紹介しています

サイトのパフォーマンス改善を行いました

個人的によく使う Chrome の便利機能・ショートカット・拡張機能をまとめていきます。

## ショートカット(よく使う順)

| 機能 | キー | 備考 |
| -------------------------- | ----------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
| 今開いてるタブを閉じる | Win : `Ctrl`+`W` Mac : `Command`+`W` 　 | タブ機能のある他のソフト(VSCodeなど)でも使用可能な場合が多い |
| 新しいタブを開く | Win : `Ctrl`+`T` 　 Mac : `Command`+`T` 　 | タブ機能のある他のソフト(VSCodeなど)でも使用可能な場合が多い |
| 直近で閉じたタブを再度開く | Win : `Ctrl`+`Shift`+`T` Mac : `Command`+`Shift`+`T`　 | タブ機能のある他のソフト(VSCodeなど)でも使用可能な場合が多い |
| URL バーに移動 | Win : `Ctrl`+`L` Mac : `Command`+`L` | 新しいタブを開く(`Command`+`T`)とセットで即ググれる |
| 右のタブに移動 | Win : `Ctrl`+`Tab` Mac : `Ctrl`+`Tab` | タブ機能のある他のソフトでも使用可能な場合が多い(VSCodeはショートカットキーの設定が必要) |
| 左のタブに移動 | Win : `Ctrl`+`Shift`+`Tab`Mac : `Ctrl`+`Shift`+`Tab` | ・タブ機能のある他のソフトでも使用可能な場合が多い(VSCodeはショートカットキーの設定が必要) ・Win :使いにくい |
| リロード | Win : `Ctrl`+`R` Mac : `Command`+`R` | `Command`+`Shift`+`R` で キャッシュクリアとリロードが可能 |
| ページ内検索 | Win : `Ctrl`+`F` Mac : `Command`+`F` | |
| ブックマークに追加 | Win : `Ctrl`+`D` Mac : `Command`+`D` | ブックマークをよく使うなら必須 |
| ページを保存 | Win : `Ctrl`+`S` Mac : `Command`+`S` | PDFファイルを開いている時などに便利 |
| 閲覧履歴を開く | Win : `Ctrl`+`H` Mac : `Command`+`Y` | |
| 設定を開く | Win : なし Mac : `Command`+`,` | |
| 印刷メニューを開く | Win : `Ctrl`+`P` Mac : `Command`+`P` | |

## 機能(よく使う順)

- 複数タブ選択機能
 - WindowsのエクスプローラーやMacのFinderと同じように、Chromeのタブを複数選択して一括でリーディングリストへの追加、タブグループへの登録、別ウィンドウへの移動等が可能
 - 隣り合うタブ同士を一括選択なら`Shift`押しながらクリック、一個ずつ対象タブを選択する際は`Command`+クリックで可能
 ![複数タブ選択機能のgif](/images/posts/2023-10-14chrome/multi_select.gif)
- タブグループ機能
 - 複数のタブを一つのグループにまとめることができる。調べ物をしているときに便利。複数タブ選択機能とセットで使うと効率UP
 ![タブグループ機能](/images/posts/2023-10-14chrome/tab_group.webp)

## 拡張機能

- Raindrop.io

 - [公式サイト](https://raindrop.io/)
 - [Chromeストア](https://chrome.google.com/webstore/detail/raindropio/ldgfbffkinooeloadekpmfoklnobpien?hl=ja)
 - クラウド上にブックマークをタグ付けして保存できる
 - クラウドなのでChrome/Safari/Edge関係無く同期しながらブックマーク追加していける
 - URLバーで検索するときにブックマークがサジェストされずに済む
 - タグで整理する分、大量にブックマークしてもごちゃごちゃしないので、ちょっと気になるけどブックマークするほどでもないようなサイトもどんどんブックマークしてます

- Distill Web Monitor

 - [Chromeストア](https://chrome.google.com/webstore/detail/distill-web-monitor/inlikjemeeknofckkjolnjbpehgadgge?hl=ja)
 - 設定したページの更新情報を自動で取得し、差分を表示してくれる

- Stylus
 - [Chromeストア](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne)
 - 指定したサイトの訪問時のスタイルの一部を変更可能
 - YoutubeやX(Twitter)を見すぎてしまうので、関連動画やトレンドの欄を非表示`display:none`にするのに使っている

個人的Chrome便利機能・ショートカット・拡張機能をまとめてます

個人的Chrome便利機能まとめ


PDF形式で購入した書籍やスキャンした書類など、見開き1ページになっているPDFをMacやLinuxで2ページに分割したい場合は、以下のような操作を行うとできます。

まず、以下のようにhomebrewで`mupdf-tools`をインストールします。Linuxの方はhomebrewではなくaptでインストールできるはずです。

```bash
brew install mupdf-tools
```

分割する際には以下のコマンドを実行します。

```bash
mutool poster -x 2 (分割したいPDFファイル名).pdf (出力ファイル名).pdf
```

参考：[Splitting a PDF page in two](https://askubuntu.com/questions/56853/splitting-a-pdf-page-in-two)


Mac・Linuxでの見開きPDFの分割方法

このブログの開発中、tailwind typographyとreact-syntax-highlighterを組み合わせて実装していると、
![競合の解決前の画像](/images/posts/2023-08-16nextjs-styleconflict/typography_before.webp)
のように、tailwind typographyとreact-syntax-highlighterのスタイルが競合するためおかしな表示になってしまいました。

これを回避するため、tailwind typographyのコードブロックに関するスタイルを無効化する方法を探していた所、以下のような方法が見つかりました。

tailwind.config.jsで、

```javascript
module.exports = {
 // ...
 theme: {
 // ...
 extend: {
 // ...
 typography: {
 DEFAULT: {
 css: {
 pre: null,
 code: null,
 "code::before": null,
 "code::after": null,
 "pre code": null,
 "pre code::before": null,
 "pre code::after": null,
 },
 },
 },
 },
 },
 plugins: [require("@tailwindcss/typography")],
};
```

のようにコードブロックに関するスタイルを`null`に上書きします。

参考：[[Blog post] Introducing Tailwind CSS Typography #2021](https://github.com/tailwindlabs/tailwindcss/discussions/2021)

こうすることで、以下のように表示がスッキリしました。
![競合の解決後の画像](/images/posts/2023-08-16nextjs-styleconflict/typography_after.webp)
しかし、中のコードと背景の間に余白がほしいので、以下の通りreact-syntax-highlighterのオプションでpaddingとborder-radiusを付与しました。

```javascript
<SyntaxHighlighter
 customStyle={{
 padding: "20px",
 borderRadius: "8px",
 }}
 style={stackoverflowLight}
 language={lang}
>
 {children}
</SyntaxHighlighter>
```

参考：[Is there a simple way to apply a custom theme to react-syntax-highlighter?](https://stackoverflow.com/questions/66079503/is-there-a-simple-way-to-apply-a-custom-theme-to-react-syntax-highlighter)

最終的には以下のようになります。

```javascript
<Image
 className="mx-auto w-full object-contain "
 src={src}
 alt={alt}
 width={0}
 height={0}
 sizes="100vw"
/>
```

他に、オプションで行番号をつけたりすることもできます。オプション一覧は以下のリンク先の通りです。

参考：[react-syntax-highlighter](https://github.com/react-syntax-highlighter/react-syntax-highlighter#use)

tailwind typographyとreact-syntax-highlighterのスタイルが競合する問題の一解決方法を紹介しています。

tailwind typographyとreact-syntax-highlighterのスタイルが競合する問題

※2023-10-05追記
ブログのソースコードを以下の公開用のリポジトリを作り公開しました。
[blog-saki-orange-public (GitHub)](https://github.com/saki-orange/blog-saki-orange-public)

※2023-11-23追記
当サイトのコードを少し改善したので、改善点を記事にしました。
[サイトのパフォーマンス改善を行いました](/posts/2023-11-22nextjs-blog-ver2)

---

フロントエンドの練習がてらNext.jsでブログを作成しました。その際につまずいたポイントをまとめようと思います。



基本的には、以下の記事を参考に作成しました。詳細に、ステップバイステップでNext.jsでのブログの作り方を解説されているのでとてもおすすめです。

参考：[Next.jsを利用した初めての本格的Markdownブログサイトの構築](https://reffect.co.jp/react/nextjs-markdown-blog/)

## 主な使用技術

- Next.js
- Tailwind CSS
- tailwindcss/typography
- remark/rehype
 | プラグイン名 | 目的 |
 | ---- | ---- |
 | remark-gfm | markdown表現の拡張 |
 | remark-math | KaTeXを利用可能にする |
 | remark-slug | 目次からh2,h3タグにリンクを飛ばすためのidを付与 |
 | rehype-raw | markdown内でhtmlタグを使えるようにする |
 | remark-katex | KaTeXを利用可能にする |
 | remark-react | imgタグをnext/imageに変換したり、コードのコピーボタン実装のため |

なお、markdown内でhtmlタグを使えるようにするには、

```javascript
.use(remarkRehype, { allowDangerousHtml: true })
```

のような形でremark-rehypeのオプションで`allowDangerousHtml: true`を追加する必要があります。

参考：[Example: supporting HTML in markdown properly](https://github.com/remarkjs/remark-rehype#example-supporting-html-in-markdown-properly)

ブログのように他者からの投稿がない場合はあまり気にしなくてもいいかもしれませんが、zennやQiitaのように誰でもmarkdownを使って記事を投稿できるwebサービスではXSSの危険性があるので上のようなhtmlタグが自由に使える設定を避けるか、rehype-sanitaize等を使って適切にサニタイズしましょう。

rehype-react以外はgetStaticProps内で実行し、rehype-reactに関してはコードのコピーボタン実装にstateを使うためクライアントサイドで実行するように実装しました。

## 躓いたポイント

### 目次の作成

目次の作成について、最初rehype-tocの使用も考えましたが、markdownの内容が表示される領域の外(aside)に目次を表示したかったため断念しました。

asideでも目次が生成できるようにするため、最初はremark/rehypeでhtmlに変換した文字列をcheerioで読み込み、h2,h3タグを抽出してgetStaticPropsから渡すように実装していましたが、やはりrehypeで完結できるようにしたいと思い、以下のようにrehypeプラグインを自作しました。

```javascript
export default async function markdown2html(content) {
 const toc = [];
 const result = await unified()
 // ...
 .use(() => {
 return (tree) => {
 visit(tree, "element", (node) => {
 if (["h2", "h3"].includes(node.tagName)) {
 toc.push({
 id: node.properties.id,
 tag: node.tagName,
 text: node.children[0] ? node.children[0].value : "",
 });
 }
 });
 };
 })
 // ...
 .process(content);
 return { html: result.toString(), toc };
}
```

プラグイン内から外部の配列を編集しているので良い実装とは言えませんが、これ以外に実装の仕方が思いつきませんでした。

処理内容としては、hastからh2,h3タグを検索しidとh2,h3などのタグ名、中身のテキストをオブジェクトとして外部の配列`toc`にpushするというものです。`toc`はgetStaticPropsで戻り値として渡され、目次の表示に使われます。

### コードハイライトでインラインのコードかそうでないかを判断できない

`hoge`のようなインラインのコードとそうでないコードブロックを識別するには、codeタグの親要素にpreタグがあるかどうかを見れば識別できます。

しかし、このブログではremark-reactでcodeタグをコードのコピー機能を備えた別のコンポーネントに置き換える処理を行っており、置き換える段階で親要素がpreタグかどうか調べるのは難易度が高いため、codeタグの`className`がundefinedかどうかで識別することにしました。

ただ、これには例外があって、

````
```
hoge fuga
```
````

のように言語を指定せずにコードブロックが書かれた場合、`className`がなしになるのでインラインのコードとして認識されてしまいます。そこで、markdownからhtmlに変換する段階で`className`がないかつインラインでないコードブロックには`className`に`language-plaintext`を付与するrehypeプラグインを作成しました。

プラグインの実装例は以下のとおりです。

```javascript
export default function rehypeCodeBlockIdentifier() {
 return (tree) => {
 visit(tree, "element", (node) => {
 if (["pre"].includes(node.tagName) && !node.children[0].properties.className)
 node.children[0].properties.className = ["language-plaintext"];
 });
 };
}
```

markdownからhtmlに変換する段階であれば、子要素にcodeタグを持つpreタグを探すことでインラインであるかどうか判定でき実装がしやすく、先程述べた例外も回避することができます。

### next/imageでサイズ不定の画像をどう扱うか

今回のブログ制作では、markdown内で画像を扱うに当たって、

1. 常に横幅いっぱいor画像のサイズに合わせて画像を表示したい
1. いちいちmd内でwidth,heightは指定したくない
1. 目次の内部リンクで飛んだときに表示がずれてほしくない

という気持ちがありました。1と2は以下のようにnext/imageを設定すれば解決できます。

```javascript
<Image
 className="mx-auto w-full object-contain "
 src={src}
 alt={alt}
 width={0}
 height={0}
 sizes="100vw"
/>
```

参考：[How can I use next.js 13 image without providing width and height?](https://stackoverflow.com/questions/74251314/how-can-i-use-next-js-13-image-without-providing-width-and-height)

しかし、これだとheightがないため表示がずれ、3が満たせません。



そこで、以下の記事を参考にimage-sizeというライブラリを用いて画像からwidth,heightを取得し、imgタグに付与するrehypeプラグインを実装することで回避しました。

参考：[Next.js で Markdown 中の画像を next/image に対応させる](https://zenn.dev/elpnt/articles/c17727e9d254ef00ea60)

### Footnote(脚注)のリンクが効かない

Footnoteとは[^1]のような注釈を入れるための記法で、僕の実装の仕方だと[^1]から脚注に飛ぶことはできるのですが、脚注から[^1]に飛ぶことができませんでした。理由を調べてみると、aタグを置き換えたあとのMyLinkコンポーネント

```javascript
export default function MyLink(props) {
 let { children, href } = props;
 if (href === "") href = "/";
 return href.startsWith("/") || href.startsWith("#") ? (
 <Link {...props} href={href} className="hover:text-cOrange">
 {children}
 </Link>
 ) : (
 <a href={href} target="_blank" rel="noopener" className="hover:text-cOrange">
 {children}
 </a>
 );
}
```

において、Linkタグにpropsの中身を展開していなかったのが原因でした。[^1]にもidが振られており、`{...props}`がないとidが省かれてしまうようです。

[^1]: Footenote

### tailwind typographyとreact-syntax-highlighterのスタイルが競合する

以下の記事にまとめました。

[tailwind typographyとreact-syntax-highlighterのスタイルが競合する問題](/posts/2023-08-16nextjs-styleconflict)

Next.jsでこのブログを作る際につまずいたポイントをまとめています。

記事一覧

カテゴリ一覧