【React】古い個人WikiをReact×PHPで全面リプレイスした裏話と、そこに込めたこだわり。

現在、個人開発として「自作のWikiシステム」の構築・アップデートに注力しています。

もともとはプライベート上で自分の思考をまとめるために、有名なフリープログラムを利用していました。ですが近年のアップデートが途切れてしまっているのと、自分の日々のログや知識をより快適に管理・カスタマイズしたいと考え、フロントエンドを「React」、バックエンドを「PHP」にするアーキテクチャで自分で作成してみることにしました。

今回の開発で、特にこだわったポイントが3つあります。

1. Markdownプレビューのリアルタイム表示

日々のログをストレスなく書き留めるため、入力したMarkdownがその場で綺麗にレンダリングされるよう、コンポーネントの設計と表示速度にこだわりました。

2. 異なる技術の連携と、CORSエラーとの戦い

ローカル開発環境から、独自ドメインの外部サーバー（本番環境）へ移行する際、ReactとPHPの間で発生するAPIのfetchエラーやCORSポリシーの壁にぶつかりました。AIをペアプロ相手として活用しながら、セキュリティと通信の仕様を1つずつデバッグし、無事に本番環境へデプロイできた時は大きな達成感がありました。

3. 自分が「毎日使い続けたい」と思えるUI/UX

カテゴリーマップの構造や、直感的に操作できるサイドバーのUIなど、「自分が本当に使いやすい知識ベースとは何か」を突き詰めて画面を設計しました。将来的にはリッチテキストエディタ、自動リンク生成機能なども実装していきたいと考えています。

【最後に】

ただチュートリアル通りのコードを書くのではなく、「自分が抱える課題を技術で解決し、本番サーバーへデプロイして動かす」という一連のプロセスを通じたことで、Reactでのモダンなコンポーネント設計の楽しさにどっぷりハマってしまったように思います。

これからも、この自作Wikiを相棒に、日々新しい技術をインプット＆アウトプットしていきます！