自分だけのコンポーネントのデモページを作った

前々から「サンプルで作ったコンポーネントを一か所にまとめておきたいな～～～」と思っていたので超突貫作業で作りました。

作ったもの

作ったコンポーネントを実際に動かして、同じサイト上でそのコードが確認できる。ただそれだけのサイトです。
https://my-component-viewer.vercel.app/

使用した技術など

• React 18.3.1
• TypeScript 5.6.2
• vite 6.0.5
• react-syntax-highlighter 15.5.13
• vercel

他にもフレームワークを使っていますが、サンプルコードのために追加したので、ここではメインで使っているものだけ書きます。

作ろうと思ったきっかけ

一番最初にも書いた通り「サンプルを一か所にまとめておきたい」と思ったこともそうですが、この記事で使っていたCodeSandboxがエラーになっていたからです...。
CodeSandboxはwebブラウザひとつでサンプルの作成～動作確認が簡単にできて楽ですが、サンプルが増えるごとにメンテナンスするものが多くなるのが嫌だったのでひとつにしてしまえ！となり作りました。

ちょっと紹介

サイトのデザインはシンプルなものにしました。

左側にサンプルの一覧を表示、見たいサンプルをクリックしたら右側にそのデモを表示します。
コードタブをクリックするとデモのコードを表示します。

「デモとそのコードを表示する」というのが一番やりたかったことなので色々調べたりしてみました。
これを実現するために試したことはここに書いてます。

最後に

ひとつ記事にしてみましたが完全に自分用のサイトですね...。
これから手元にあるメモを追加しつつ自分が使いやすいサイトにしていきたいです。

もし「何を作ったらいいか分からない」という人がいればこれくらいのサイトでも良いのだぞ！という目印になったら泣いて喜びます。ではﾉｼ