プロジェクト紹介

技術への情熱から生まれた、実用的で教育的なWebアプリケーション。
ここでは「なぜ作ったか」「どんな技術を使ったか」「どこにこだわったか」など、開発者視点のストーリーも交えて紹介します。

TypeScriptReactNext.jsTailwind CSSshadcn/ui

PICO-88 シミュレータ

8ビットコンピュータシミュレータ

ブラウザで動作する本格的な8ビットコンピュータシミュレータ。アセンブリ言語でプログラミングを学べます。

PICO-88は、教育目的で開発された8ビットコンピュータのシミュレータです。実際のCPUアーキテクチャを忠実に再現し、アセンブリ言語プログラミングの基礎から応用まで学習できます。レジスタ、メモリ、I/Oの概念を視覚的に理解できる設計になっています。

開発背景・こだわり

  • 「CPUの仕組みを体感的に学べる教材がほしい」という思いから開発。
  • UI/UXは「レトロ感」と「直感的操作」を両立。
  • アセンブリの実行ステップやレジスタ変化をリアルタイムで可視化。

技術選定理由

  • TypeScript+Reactで「状態管理」と「UI描画」を柔軟に実装。
  • Next.jsでSSR/SSG対応し、学習教材としても高速表示。

今後の展望

  • より多くのCPU命令セットやI/Oデバイスの追加。
  • ユーザー投稿型のサンプルプログラム集。

使用技術

TypeScriptReactNext.jsAssemblyCPU Simulation

主な機能

リアルタイムCPU状態表示
アセンブリコードエディタ
ステップ実行とデバッグ
豊富なサンプルプログラム
ソースコード

CHAR COUNT PRO

高機能マークダウンエディタ

リアルタイム文字数カウント、diff表示、タスク管理機能を備えた次世代テキストエディタです。

CHAR COUNT PROは、ライターや開発者のために設計された高機能なマークダウンエディタです。リアルタイムでの文字数・単語数カウント、変更差分の視覚化、タスクリスト管理など、テキスト作業を効率化する機能を豊富に搭載しています。

開発背景・こだわり

  • 「文章執筆やコーディングをもっと快適にしたい」という思いから開発。
  • リアルタイムでの文字数・差分・タスク管理を一画面で実現。
  • エディタ部分はTiptap+TailwindでカスタムUIを徹底追求。

技術選定理由

  • Tiptapで「拡張性」と「リッチな編集体験」を両立。
  • shadcn/uiでモダンなダイアログやボタンを実装。

今後の展望

  • LaTeX・PDFエクスポートやAI校正支援の追加。
  • カスタムショートカットやテーマ切替の強化。

使用技術

TypeScriptReactTiptapTailwind CSSshadcn/ui

主な機能

リアルタイム統計表示
リッチマークダウン対応
豊富なキーボードショートカット
高速・軽量動作
ソースコード

他のプロジェクトも見てみませんか?

ポートフォリオページで更多くのプロジェクトをご覧いただけます

ポートフォリオを見る