リニューアル振り返り - MDX 編

---
title: リニューアル振り返り - パフォーマンス編
tags: 
  - パフォーマンス
  - Web Vitals
draft: false
---

## Core Web Vitals

パフォーマンス最適化で基本となるのは Core Web Vitals の以下の 3 つの指標です。

- **LCP**（Largest Contentful Paint、最大視覚コンテンツの表示時間）
- **FID**（First Input Delay、初回入力までの遅延時間）
- **CLS**（Cumulative Layout Shift、累積レイアウトシフト数）

LCP は `2.5s` 以下、FID は `100ms` 以下、CLS は `0.1` 以下が良好なスコアのボーダーラインです。

## 自動リンク

www.example.com
https://example.com
[email protected]

## 脚注

GFM[^1]によって Markdown の機能を拡張することができます。

[^1]: GFM は GitHub Flavored Markdown の略称です。

## 打ち消し線

~3月13日公開予定~ 3月20日公開

## 表組み

| 指定なし | 左揃え | 右揃え | 中央揃え |
| --- | :--- | ---: | :---: |
| a | b | c | d |

## タスクリスト

- [ ] タスク 1
- [x] タスク 2

<!-- コンポーネントの読み込み -->
import SvgDemo from '@components/post-helpers/blog/how-to-use-svg/SvgDemo.astro';

<!-- 同一のコンポーネントを異なるプロパティで読み込み -->
<SvgDemo 
  alt="「SVG」の文字を使用したタイポグラフィで「V」の文字は錯視効果を取り入れた三角形になっている"
  caption="SVG デモのコンポーネント 1"
/>

<SvgDemo
  alt="錯視効果を取り入れた三角形のイラスト"
  caption="SVG デモのコンポーネント 2"
  onlyTriangle={true}
/>

<Aside>
### Custom Media Queries

将来的に `@custom-media` が使用できるようになれば、メディアクエリに CSS 変数を指定できない問題は解消します。
</Aside>

<Aside>
### Custom Media Queries

将来的に `@custom-media` が使用できるようになれば、メディアクエリに CSS 変数を指定できない問題は解消します。

<CodeBlock caption="Custom Media Queries の例">
```css
@custom-media --breakpoint (width >= 768px);

@media (--breakpoint) {
  /* ... */
}
```
</CodeBlock>
</Aside>

import { defineConfig } from 'astro/config';

export default defineConfig({
  markdown: {
    syntaxHighlight: 'shiki',
    shikiConfig: {
      theme: 'github-dark',
      wrap: true,
    },
  },
});

シンタックスハイライトは shiki を選択しており、shikiConfig でテーマを theme: 'github-dark' と指定し、wrap: true でコードの折り返しを許容しています。

ただ、github-dark テーマの CSS コードなどのカラーリングがしっくりこないので、他のテーマに乗り換えるか、独自にカスタマイズするか思案しているところです。

また、コードの折り返しはモバイルだと可読性が著しく低下することがあるので、こちらもモバイルのみ折り返しを禁止して横スクロールできるように、設定を変更するかもしれません。

import { defineConfig } from 'astro/config';
import { h } from 'hastscript';
import rehypeSlug from 'rehype-slug';
import rehypeAutolinkHeadings from 'rehype-autolink-headings';

export default defineConfig({
  markdown: {
    rehypePlugins: [
      rehypeSlug,
      [rehypeAutolinkHeadings, {
        behavior: 'after',
        properties: {
          class: 'anchor'
        },
        group: (node) => {
          return h('.heading.--lv' + node.tagName.charAt(1))
        },
        content: (node) => {
          const heading = node?.children[0]?.value;
          const headingText = (typeof heading === 'string') ? `見出し「${heading}」` : 'この見出しのリンク';

          return [
            h(
              'svg.anchor-icon',
              {
                width: 27,
                height: 27,
                viewBox: '0 0 27 27',
                ariaHidden: 'true'
              },
              h('path', {
                d: 'M20.6,12l0.4-2h-3.3l0.7-4h-2l-0.7,4h-3l0.7-4h-2l-0.7,4H7l-0.4,2h3.6l-0.5,3H6.1l-0.4,2h3.6l-0.7,4h2l0.7-4h3l-0.7,4h2 l0.7-4h3.3l0.4-2h-3.3l0.5-3H20.6z M14.7,15h-3l0.5-3h3L14.7,15z',
              }),
            ),
            h(
              'span.sr-only',
              headingText
            )
          ];
        }
      }]
    ]
  },
});

<div class="heading --lv2">
  <h2 id="markdown" tabindex="-1">Markdown</h2>
  <a class="anchor" href="#markdown">
    <svg class="anchor-icon" width="27" height="27" viewBox="0 0 27 27" aria-hidden="true">
      <!-- ... -->
    </svg>
    <span class="sr-only">見出し「Markdown」</span>
  </a>
</div>

<h1 tabindex="-1" dir="auto">
  <!-- `<a>` に `aria-hidden="true"` が指定されている -->
  <a id="user-content-heading" class="anchor" aria-hidden="true" href="#heading">
    <svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">
      <!-- ... -->
    </svg>
  </a>
  Heading
</h1>