サービスを作るのが好きで個人開発も日々やっているのでそれを載せるいわゆるポートフォリオサイト的なものや、 自己紹介的なもの、そしてせっかくならブログ的なものも、と思い、このサイトを作ってみました。

技術的な話

構成

主要どころとしては、以下を使いました。

• TypeScript
• Next
• Tailwind

仕事で使っているのでNextを、使ったことなかったのでTailwindを使ってみました。
Tailwindは噂通りだいぶ便利で、以前にCSSをゴリゴリ書いていたときの苦しみがかなり軽減されたように感じました。

Next13が少し前にリリースされましたが、App RouterをProduction環境で使うのはまだ非推奨の段階で会社では導入がPENDになっています。実際にどんな感じなのか色々触りたくて本サイトをNext13で作ってみました。まだ新機能をすべて盛り込めたわけではないので引き続き導入していきたいです。

マークダウン周りのライブラリ

以下ライブラリを使いました。

• gray-matter
• react-markdown
• react-syntax-highlighter

ざっくり以下の流れで処理しています。

1. posts/[slug]/xxx.mdに記事ファイルを配置
2. fsとgray-matterを使ってmdファイルからタイトルなどのメタ情報および本文を取得
3. react-syntax-highlighterでコードブロックにシンタックスハイライトをつけたコンポーネントを用意
4. 2の本文をreact-markdownの子要素として渡しつつ、3のコンポーネントをreact-markdownのpropsとして用意されているcomponentsに渡してあげて、レンダリング

このあたりは、「Nextでブログ作ってみた」みたいな記事が結構あったのと、マークダウンやシンタックスハイライト周りのライブラリも結構あったので、それらのリポジトリを参照しつつ、好みに応じて選んだ感じです。

これから

デザインをいい感じにしてみたり、オリジナリティのある機能を作ってみたり、新たな技術の実験場的な感じで使ったり、とフル活用していきたいです！