
AWS なんもわからん状態はまずいなと思い、最近話題の aws-cdk を使って Next.js のコンテナを AWS ECS(on Fargate)上にデプロイしてみた。
備忘録として過程をメモっておく。

## aws-cdk とは

- AWS のクラウドインフラストラクチャをコードとして定義できる
- 定義したコードをもとに AWS CloudFormation を通じてインフラをデプロイ（リソース作成）することができる

## やったことログ

### Dockerfile の作成と ECR への push

公式に Docker Image のサンプルがあるのでそのまま使った。

experimental の `outputStandalone` を有効にすると、production 環境に必要なファイルのみをコピーした `.next/standalone` が作成される。

- [Deployment | Next.js](https://nextjs.org/docs/deployment#docker-image)
- [Output File Tracing | Next.js](https://nextjs.org/docs/advanced-features/output-file-tracing#automatically-copying-traced-files-experimental)

### CloudFormation

[【CloudFormation 入門】5 分と 6 行で始める AWS CloudFormation テンプレートによるインフラ構築 | DevelopersIO](https://dev.classmethod.jp/articles/cloudformation-beginner01/) を読んで CloudFormation の概要をを頭に入れて用語を整理した。

- テンプレート：yaml or json で記述するインフラ定義のファイル
- スタック：テンプレートから作成/破棄をまとめて実行するリソースの集合
  - 1 つのスタック内に VPC, EC2, S3, RDS などのプロダクトを 1 つ動かすために必要なリソースをまとめて定義するｋとができる

### aws-cdk インフラを構築

#### セットアップ

```bash
$ npm i -g aws-cdk
cdk init app --language=typescript
```

#### CdkStack を定義する

ECS を動かすための最小限の Stack を定義した。

```ts
import { Stack, StackProps } from 'aws-cdk-lib';
import { Construct } from 'constructs';
import { Role, ServicePrincipal } from 'aws-cdk-lib/aws-iam';
import { TaskDefinition, Compatibility, ContainerImage, AwsLogDriver, Protocol, Cluster } from 'aws-cdk-lib/aws-ecs';
import { Vpc } from 'aws-cdk-lib/aws-ec2';
import { Repository } from 'aws-cdk-lib/aws-ecr';
import { ApplicationLoadBalancedFargateService } from 'aws-cdk-lib/aws-ecs-patterns';

export const defaultProps: StackProps = {
  env: {
    region: 'ap-northeast-1',
    account: process.env.AWS_ACCOUNT,
  },
};

export class CdkStack extends Stack {
  constructor(scope: Construct, id: string, props?: StackProps) {
    super(scope, id, props);

    const taskRole = new Role(this, 'ecs-task-role', {
      assumedBy: new ServicePrincipal('ecs-tasks.amazonaws.com'),
    });

    const taskDefinition = new TaskDefinition(this, 'ecs-task-definition', {
      taskRole,
      executionRole: taskRole,
      compatibility: Compatibility.FARGATE,
      cpu: '512',
      memoryMiB: '1024',
    });

    const repository = Repository.fromRepositoryArn(this, 'repo', process.env.ECR_ARN);
    const container = taskDefinition.addContainer('ecs-task-container', {
      image: ContainerImage.fromEcrRepository(repository),
      logging: new AwsLogDriver({
        streamPrefix: 'ecs-task-log-prefix',
      }),
    });

    container.addPortMappings({
      containerPort: 3000,
      hostPort: 3000,
      protocol: Protocol.TCP,
    });

    const vpc = new Vpc(this, 'ecs-task-vpc', {
      maxAzs: 2,
      natGateways: 1,
    });

    const cluster = new Cluster(this, 'ecs-task-cluster', { vpc });

    new ApplicationLoadBalancedFargateService(this, 'FargateService', {
      cluster,
      cpu: 512,
      desiredCount: 2,
      taskDefinition,
      memoryLimitMiB: 512,
      publicLoadBalancer: true,
    });
  }
}
```

#### デプロイ

以下を実行するとインフラが構築できた。

```sh
$ yarn build
$ yarn cdk bootstrap
$ yarn cdk deploy
```

## 感想

- CloudFormation だとクソ長 yaml を書くのがしんどそうだったが、cdk だと TypeScript で数十行でかけたので開発体験が良かった
- AWS コンソールでポチポチ設定したことがあるが、それと比較すると、どのリソースをどのように使うのかを cdk だと明確に書けるので AWS への理解が深まった。コードなのであとから見返すこともできて良い。

## 参考

- [AWS クラウド開発のよくある質問](https://aws.amazon.com/jp/cdk/faqs)
- [【CloudFormation 入門】5 分と 6 行で始める AWS CloudFormation テンプレートによるインフラ構築 | DevelopersIO](https://dev.classmethod.jp/articles/cloudformation-beginner01/)
- [cdk コマンドの機能を 実際に叩いて理解する 【 AWS CDK Command Line Interface 】 | DevelopersIO](https://dev.classmethod.jp/articles/aws-cdk-command-line-interface/)
- https://docs.aws.amazon.com/cdk/api/v2/docs/aws-construct-library.html


aws-cdkでNext.jsを動かすためのECS環境を構築したメモ


アプリケーションの状態管理は、フロントエンド開発で注目されているトピックの 1 つです。
React のグローバル状態管理ライブラリといえば、2，3 年前は Redux 一強でしたが、2021 年現在は、[Apollo Client](https://www.apollographql.com/docs/react/), [Recoil](https://recoiljs.org/), [jotai](https://jotai.pmnd.rs/), [SWR](https://swr.vercel.app/) 等、様々なものがあります。

私は、2020 年の 3 月頃まで約 2 年ほど Redux を使った開発を経験していましたが、その後は SWR や Apollo Client を採用したプロジェクトで開発していたため、しばらく Redux から離れていました。
ですが、この度新卒エンジニアとして、9 月から Redux を使っているプロダクトの開発チームに本配属され、再び Redux と真剣に向き合うことになりました！

そんな中、先日参加した[Souzoh Tech Talk #03: Frontend](https://mercari.connpass.com/event/221978/)の中で紹介された、["feature pattern"](https://redux.js.org/style-guide/style-guide#structure-files-as-feature-folders-with-single-file-logic) という Redux 推奨のディレクトリ構成の話がきっかけで、Redux のドキュメントが 2020 年当時より大幅にアップデートされていることを知りました。

これは Redux を学び直す良い機会だなと思い、ここ 1 週間くらい、公式チュートリアルの Redux Essentials を読みながら、JavaScript を TypeScript に変換しつつ写経することで、redux-toolkit を使ったモダンな 書き方や RTK Query について学びました。

- https://github.com/YTakahashii/redux-essentials-example-app-ts

Redux Essentials は、全 8 回に渡る内容で、結構ボリューミーだったため、今回は Part1 と第して、第 1 回〜第 6 回までから得た学びをピックアップしてまとめます。

- [Redux Essentials, Part 1: Redux Overview and Concepts](https://redux.js.org/tutorials/essentials/part-1-overview-concepts)
- [Redux Essentials, Part 2: Redux App Structure](https://redux.js.org/tutorials/essentials/part-2-app-structure)
- [Redux Essentials, Part 3: Basic Redux Data Flow](https://redux.js.org/tutorials/essentials/part-3-data-flow)
- [Redux Essentials, Part 4: Using Redux Data](https://redux.js.org/tutorials/essentials/part-4-using-data)
- [Redux Essentials, Part 5: Async Logic and Data Fetching](https://redux.js.org/tutorials/essentials/part-5-async-logic)
- [Redux Essentials, Part 6: Performance and Normalizing Data](https://redux.js.org/tutorials/essentials/part-6-performance-normalization)

## 1. どのような状況で Redux を使うべきか

[Part 1: Redux Overview and Concepts の When Should I Use Redux?](https://redux.js.org/tutorials/essentials/part-1-overview-concepts#when-should-i-use-redux)に、Redux が役立つ状況は以下の 4 つであることが述べられていました。

- アプリ内の多くの場所で必要とされる大量の State がある場合
- State が時間の経過とともに頻繁に更新される場合
- State を更新するロジックが複雑な場合
- アプリのコードベースが中規模または大規模で、多くの人が作業する可能性がある場合

「このデータは Redux で管理すべきか」を考えるときに、「アプリ内で多く参照されること」以外にも、state の更新頻度、複雑性、規模感も重要であることを明確に理解できました。

## 2. redux-toolkit を使った Modern Redux

Redux Essentials の Part 3 からは、ユーザが記事を投稿できるサンプルアプリの開発を通して、redux-toolkit を使った Redux アプリの構築を学びます。
代表的な API は以下の 3 つです。

- `createSlice()`
- `createAsyncThunk()`
- `createEntityAdapter()`

以下は、これらの API の要約です。

### createSlice() で Reducer に 集中したコードを書ける

`createSlice()` は `reducers` で定義された Reducer を元に、Action や ActionCreator を自動生成してくれます。

```ts
const postsSlice = createSlice({
  name: 'posts',
  initialState,
  reducers: {
    postAdded: {
      reducer: (state, action: PayloadAction<Post>) => {
        // note: prepare -> reducer
        state.push(action.payload);
      },
      prepare: ({ title, content, userId }: Pick<Post, 'title' | 'content'> & { userId: string }) => {
        // note: action creator相当のfunction
        // note: reduxはpostsSlice.actions.postAdded({ title, content }) がdispatchされるとprepareを実行し、reducerのactionに受け渡す
        return {
          payload: {
            id: nanoid(),
            title,
            content,
            user: userId,
            date: new Date().toISOString(),
            reactions: initialReactions,
          },
        };
      },
    },
  },
});

export const { postAdded } = postsSlice.actions;
export default postsSlice.reducer;
```

Redux のしんどかった要素として、Action や ActionCreator 等のボイラープレートの記述がだるい問題がありましたが、slice を使用することで解決できます。

Action は、React 内では、`dispatch(postAdded({ title, content, userId }))` のように dispatch します。
また、`store.dispatch(initiate())` のように、store の初期化時に React の外で dispatch することもできます。

手書き時代の ActionCreator 内部 で行っていたような処理は、`prepare()` を定義して実行することができます。

`createSlice()` 内部では Immer が使用されているため、`state.push(action.payload)` のように Mutable に state の更新を記述できる点もポイントですね。

### 非同期的な state の更新は createAsyncThunk() で簡単に書ける

データのフェッチ等の非同期処理は `createAsyncThunk()` を使います。

```ts
export const fetchPosts = createAsyncThunk('posts/fetchPosts', async () => {
  const response = await client.get('/fakeApi/posts');
  return response.data as Post[];
});

const postsSlice = createSlice({
  //省略
  extraReducers: (builder) => {
    builder
      .addCase(fetchPosts.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchPosts.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.posts = state.posts.concat(action.payload);
      })
      .addCase(fetchPosts.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.error.message ?? null;
      });
  },
});
```

`createSlice()` の外部で定義された ActionCreator に紐づく reducer は `extraReducers` で定義します。
TypeScript で記述する場合は `builder.addCase()` 使って `state` と `action` の型を推論させる必要があります。

`createAsyncThunk()` で生成した thunk は `pending/fulfilled/rejected` パターンを dispatch するので、必要に応じてそれぞれの reducer を定義します。

### データの正規化は createEntityAdapter() にお任せ

データを正規化したい場合は、 `createEntityAdapter()` を使います。
デフォルトでは、 `{ ids: [], entities: { [id]: value } }` の形式で変換されます。

```ts
const postsAdapter = createEntityAdapter<Post>({
  sortComparer: (a, b) => b.date.localeCompare(a.date),
});

const initialState = postsAdapter.getInitialState<AsyncState>({
  status: 'idle',
  error: null,
});

const postsSlice = createSlice({
  name: 'posts',
  initialState,
  reducers: {
    // 省略
  },
  extraReducers: (builder) => {
    builder.addCase(fetchPosts.fulfilled, (state, action) => {
      state.status = 'succeeded';
      postsAdapter.upsertMany(state, action.payload);
    });
    builder.addCase(addNewPost.fulfilled, postsAdapter.addOne);
  },
});

export const {
  selectAll: selectAllPosts,
  selectById: selectPostById,
  selectIds: selectPostIds,
} = postsAdapter.getSelectors<RootState>((state) => state.posts);
```

adapter の役割は、データの正規化、正規化データの更新メソッドの提供、ids のソート、initialState の提供、selector の提供等、多岐に渡ります。

`getSelectors()` で取得できる selector は Reselect によってメモ化されているのも嬉しいポイントです。

手書き時代の Redux では、データの正規化のために`normalizr`による変換処理を定義する必要がありましたが、adapter にすべてが集約されていて開発者体験がとても良くなった印象です。

## 3. React のレンダリングパフォーマンスの最適化

[Redux Essentials, Part 6: Performance and Normalizing Data](https://redux.js.org/tutorials/essentials/part-6-performance-normalization) では、React のレンダリングパフォーマンスを向上するための手法が丁寧に解説されており、非常に学びになりました。

### コンポーネントを React.memo() でラップする

以下のように、親コンポーネントがリストデータを配列で持っている場合、その中の要素 1 つが更新されると配列全体が更新されてしまうため、結果的にリスト全体の再レンダリングが発生してしまいます。

これは、親コンポーネントが再レンダリングされると、子コンポーネントも再レンダリングしてしまうため、一つのアイテムを更新したのにも関わらず、リスト全体が再レンダリングされてしまうためです。

子コンポーネントを `React.memo()` でラップすることで、更新がなかった子コンポーネントは再レンダリングを回避することができます。

ただし、`<PostsList />` は `posts` が変わってしまうため再レンダリングを回避できないことに注意する必要があります。

```tsx
const PostExcerpt: React.NamedExoticComponent<{ post: Post }> = React.memo(({ post }) => (
  <article className="post-excerpt">
    <h3>{post.title}</h3>
    <div>
      <PostAuthor userId={post.user} />
      <TimeAgo timestamp={post.date} />
    </div>
    <p className="post-content">{post.content.substring(0, 100)}</p>
    <ReactionButtons post={post} />
    <Link to={`/posts/${post.id}`} className="button muted-button">
      View Post
    </Link>
  </article>
));

export const PostsList: React.VFC = () => {
  const posts = useTypedSelector(selectAllPosts);
  const postStatus = useTypedSelector((state) => state.posts.status);
  const error = useTypedSelector((state) => state.posts.error);

  const orderedPosts = useMemo(
    () => (postStatus === 'succeeded' ? posts.slice().sort((a, b) => b.date.localeCompare(a.date)) : posts),
    [postStatus, posts]
  );

  return (
    <section className="posts-list">
      <h2>Posts</h2>
      {postStatus === 'loading' ? (
        <Spinner text="loading..." />
      ) : postStatus === 'succeeded' ? (
        orderedPosts.map((post) => <PostExcerpt key={post.id} post={post} />)
      ) : postStatus === 'failed' ? (
        <div>{error}</div>
      ) : null}
    </section>
  );
};
```

### リストの親コンポーネントではアイテムの ids 配列だけを参照する

リストデータを正規化することのメリットの一つは、リスト型コンポーネントのアイテムが更新される際に、リストの親コンポーネントの再レンダリングを防ぐことが可能なことです。

上述の `posts` を正規化することで、親の `<PostsList />` は ids だけを参照すれば良くなり、アイテムの一部の値が更新されても `id` が更新されない限りは再レンダリングされなくなります。

```tsx
const PostExcerpt: React.VFC<{ postId: EntityId }> = ({ postId }) => {
  const post = useTypedSelector((state) => selectPostById(state, postId));

  if (!post) {
    return <div>Post not found.</div>;
  }

  return (
    <article className="post-excerpt">
      <h3>{post.title}</h3>
      <div>
        <PostAuthor userId={post.user} />
        <TimeAgo timestamp={post.date} />
      </div>
      <p className="post-content">{post.content.substring(0, 100)}</p>
      <ReactionButtons post={post} />
      <Link to={`/posts/${post.id}`} className="button muted-button">
        View Post
      </Link>
    </article>
  );
};

export const PostsList: React.VFC = () => {
  const dispatch = useTypedDispatch();
  const orderedPostIds = useTypedSelector(selectPostIds);
  const postStatus = useTypedSelector((state) => state.posts.status);
  const error = useTypedSelector((state) => state.posts.error);

  return (
    <section className="posts-list">
      <h2>Posts</h2>
      {postStatus === 'loading' ? (
        <Spinner text="loading..." />
      ) : postStatus === 'succeeded' ? (
        orderedPostIds.map((postId) => <PostExcerpt key={postId} postId={postId} />)
      ) : postStatus === 'failed' ? (
        <div>{error}</div>
      ) : null}
    </section>
  );
};
```

### メモ化されたセレクタ関数を useSelector に渡す

`useSelector()` は Action が dispatch されるたびに再実行され、そこで新しい参照値を返すとコンポーネントが再レンダリングされます。

select 関数で配列やオブジェクトが生成される場合は、値の内容が変化していなくても常に新しい参照値となってしまうため、不要な再レンダリングを発生させてしまいます。

例えば、下記の`<UserPage />` で計算されている`postsForUser` は `allPosts.filter()` によって常に新しい参照が返されてしまうので、どこかしらで Action が dispatch される度に、`<UserPage />`は再レンダリングしてしまいます。

```tsx
export const UserPage: React.VFC<Props> = ({ match }) => {
  const { userId } = match.params;

  const user = useTypedSelector((state) => selectUserById(state, userId));

  const postsForUser = useTypedSelector((state) => {
    const allPosts = selectAllPosts(state);
    return allPosts.filter((post) => post.user === userId);
  });

  // 省略
};
```

これを解決するためには、メモ化されたセレクタ関数を `useSelector()` に渡す必要があります。
redux-toolkit では、セレクタ関数をメモ化するための `createSelector()` が提供されており、上記の `postsForUser` の セレクタは下記のようにメモ化することができます。

```ts
export const selectPostsByUser = createSelector(
  [selectAllPosts, selector((_, userId: string) => userId)], // input selectors
  (posts, userId) => posts.filter((post) => post.user === userId) // output selector
);
```

`createSelector()` の第一引数は input selectors 配列で、メモ化対象の値を返します。
第二引数は output selector で、input selector の配列が順に引数として渡される関数です。
output selector で return した値がこのセレクタが返す値となります。
こうすることで、`posts` か `userId` のどちらかが変化したときのみ、新しい参照が返されるため、結果として、不要な再レンダリングを防ぐことができます。

上記の`selector((_, userId: string) => userId)` 内の`selector()`は、自分で定義した util 関数です。
TS で純粋なセレクタを記述するときに、第一引数の`RootState`の型を省略できます。

```ts
// src/app/selector.ts
import { RootState } from './store';

type Extras<T extends unknown[]> = T extends [RootState, ...infer Extras] ? Extras : [];

export const selector = <T extends (state: RootState, ...extras: any[]) => unknown>(
  select: T
): T extends (...params: infer Params) => infer Return
  ? (state: Params[0], ...extras: Extras<Params>) => Return
  : never => select as any;
```

## おわりに

Redux Essentials を読むことで、Redux 公式の推奨アプローチや React のレンダリングパフォーマンスの最適化について学ぶことができました。

redux-toolkit を使ったコードは、ボイラープレートなコードをすべて手書きで書いていた頃と比べて、格段に少ない記述量で書くことができます。しかし、非同期処理の扱いは `pending/fulfilled/rejected` パターンを reducer に記述しなければならず、現代の hooks ベースの API（Apollo 等）と比較するとまだ冗長であると感じます。

次回は、Part2 ということで、そこら辺の悩みも解決できる RTK Query についての学びをまとめようと思います。

（ブログ作っただけで終わりにならなくて良かった〜〜〜〜）


Redux Essentials から学ぶ Part1：Modern Redux とパフォーマンス最適化


**世はまさに、自作技術ブログ時代！** という訳で、Next.js 等を使って技術ブログを作りました。

一旦、きりの良いところまで実装が終わったので、公開しようと思います！

このブログでは、趣味で触った技術のことについて、ざっくばらんに記事を投稿していく予定です。
また、私は Web Frontend が好きなので、関連技術の実験場にも活用していきます。

ゴールデンウィークから作り始めて、休日にちまちまやっていたので、随分時間がかかってしまいましたが、いい感じに仕上がってとりあえず満足しています。

```twitter
1389551048017080322
```

以降のセクションでは、技術スタックと、実装に一番の時間を要した Markdown ファイルから React コンポーネントに変換するまでの処理の詳細について振り返ります。

## 技術スタック

本ブログの開発に使用した技術は以下の通りです。（みんな使ってそうな構成）

- [Next.js](https://nextjs.org/)：言わずと知れた React のフレームワーク
- [Chakra UI](https://chakra-ui.com/)：tailwind like に React コンポーネントのスタイリングができるコンポーネントライブラリ
- [jonschlinkert/gray-matter](https://github.com/jonschlinkert/gray-matter)：Markdown に yaml でメタ情報を埋め込めるやつ
- [unifiedjs/unified](https://github.com/unifiedjs/unified)：構文木を使用してテキストを処理するためのインターフェース
- [shiki](https://shiki.matsu.io/)：コードハイライター
- [vercel/og-image](https://github.com/vercel/og-image)：OGP 画像の生成
- [GitHub Pages](https://pages.github.com/)：サイトのホスティング

## やったこと＆学び

最初のゴールとして、Markdown から記事を生成可能かつ、それを見てもらうための最低限の機能に絞って開発を進めました。
やったことを大別すると以下の 3 つになるのかなと思います。

- Markdown ファイルからの記事ページ生成とレイアウト設定
  - MD を変換する処理を実装することで、構文木の世界を学べた
- プライベート記事機能
  - [ブログのトップページ](/)や Google 検索の結果に載せないプライベート記事（例：[Playground](/_playground)）を公開する機能
- メタタグの設定
  - これまで業務的な Web アプリばかりを開発してきたため、学びが多かった

## Markdown ファイルの内容を React コンポーネントに変換する

### 1．Next.js で全 Markdown ファイルを取得して記事ページを生成する

記事ページの生成は Next.js の SSG を使います。

具体的には、[pages/[slug].tsx](https://github.com/YTakahashii/blog/blob/573224fa61a263d26c861aaea6696ad22f0a5469/src/pages/%5Bslug%5D.tsx#L1)内で、 `getStaticPaths` を使って Markdown のファイル名から記事ページの URL を生成し、

```tsx
export const getStaticPaths: GetStaticPaths<Params> = async () => {
  const posts = getAllPosts('all');

  return {
    paths: posts.map((post) => ({
      params: {
        slug: post.slug,
      },
    })),
    fallback: false,
  };
};
```

`getStaticProps` を使って render する 記事の情報を取得し、Page コンポーネントの Props として渡します。

```tsx
export const getStaticProps: GetStaticProps<{ post: Post }, Params> = async ({ params }) => {
  const post = getPostBySlug(params.slug);

  const html = await markdownToHtml(post.content ?? '');

  return {
    props: {
      post: {
        ...post,
        content: html,
      },
    },
  };
};
```

### 2．unified で Markdown を整形して HTML の文字列に変換する

上記の `getPostBySlug()` では、Markdown ファイルの中身（`post.content`）を文字列で取得します。

続く`markdownToHtml()`では、`unified` を使って、ファイルの中身を HTML の文字列に変換していきます。

```ts
export async function markdownToHtml(markdown: string) {
  const result = unified()
    .use(remarkParse)
    .use(remarkRehype, { allowDangerousHtml: true })
    .use(rehypeRaw)
    .use(rehypeShiki, {
      highlighter: await getHighlighter({
        theme: 'github-dark',
      }),
    })
    .use(rehypeStringify)
    .processSync(markdown);

  return result.toString();
}
```

変換処理の概要は以下の通りです。

- `remarkParse`：Markdown の文字列を[mdast](https://github.com/syntax-tree/mdast)（Markdown Abstract Syntax Tree format）に変換する
- `remarkRehype`：mdast を [hast](https://github.com/syntax-tree/hast)（Hypertext Abstract Syntax Tree format）に変換する，`{ allowDangerousHtml: true }` により、生の HTML はそのまま残す
- `rehypeRaw`：hast 内の生 HTML を hast に変換する
- `rehypeShiki`：コードハイライターの shiki を使って 複数行のコードブロック をハイライトするスタイルを適用する
- `rehypeStringify`：hast を HTML の文字列に変換する

### 3．HTML の文字列を React コンポーネントに変換する

最後に `markdownToHtml()` で取得した HTML 文字列を [remarkjs/react-markdown](https://github.com/remarkjs/react-markdown)を使って React コンポーネントに変換します。（[components/markdowns/Markdown.tsx](https://github.com/YTakahashii/blog/blob/main/src/components/markdowns/Markdown.tsx)）

```tsx
import ReactMarkdown from 'react-markdown';
import rehypeRaw from 'rehype-raw';
import * as components from 'src/components/markdowns/_components';

...

export const Markdown: React.VFC<Props> = ({ rawHtml }) => (
  <ReactMarkdown rehypePlugins={[rehypeRaw]} children={rawHtml} components={components} />
);
```

このとき、`components` に React コンポーネントを渡すことで、任意のタグを自由に変換することができます。今回は、変換するコンポーネントを[components/markdowns/\_components](https://github.com/YTakahashii/blog/tree/main/src/components/markdowns/_components)の中に定義しました。

変換する対象は、[`<table />`](https://github.com/YTakahashii/blog/blob/573224fa61a263d26c861aaea6696ad22f0a5469/src/components/markdowns/_components/table.tsx#L1)のように、Chakra UI のコンポーネントに置き換えるタグと、[`<a />`](https://github.com/YTakahashii/blog/blob/573224fa61a263d26c861aaea6696ad22f0a5469/src/components/markdowns/_components/a.tsx#L1)のように、Props に応じて、レンダリングするコンポーネントを出し分けるタグです。

スタイルだけ当てたいタグについてはここでは変換せず、 [Chakra UI のテーマを設定](https://github.com/YTakahashii/blog/blob/main/src/theme/index.ts)しました。

また、今回は変換対象の文字列（`children`）が HTML の形式であるため、`rehypePlugins` に `rehypeRaw` を指定して、hast に変換する処理を加える必要がありました。ピュアな MD 形式の文字列である場合は、`rehypeRaw` は不要です。

## 今後実装したい機能

- タグ機能
  - 記事が増えていくにつれて探すのが大変になりそうなので、そのうち実装したいお気持ち
- 目次機能
  - この記事みて思ったけど、やっぱり目次あったほうが見やすいですね
- ダークモードや PWA
  - 新しい Web の機能をどんどん使っていきたいお気持ち
- カッコいい OGP 画像の作成
  - 今のデザインが超適当なので、どこかで気合を入れて作り込みたい

## おわりに

これからは、ブログをもっと良くしたり、学んだ内容を定期的にアウトプットしていきたいと思います！

最初は、「ブログなんて今更自分で作ってもな〜」とか思ってたのですが、車輪の再発明をすることで学べることも多いなと感じました。


最新の投稿

aws-cdkでNext.jsを動かすためのECS環境を構築したメモ

Redux Essentials から学ぶ Part1：Modern Redux とパフォーマンス最適化

Next.jsで技術ブログを作った話