Zenn
Closed9

100日チャレンジ day38 (CPUビジュアライザー)

llmバックエンド100日チャレンジ
riddle_tecriddle_tec

昨日
https://zenn.dev/gin_nazo/scraps/148f40cdb27127

https://blog.framinal.life/entry/2025/04/14/154104

100日チャレンジに感化されたので、アレンジして自分でもやってみます。

やりたいこと

  • 世の中のさまざまなドメインの簡易実装をつくり、バックエンドの実装に慣れる(dbスキーマ設計や、関数の分割、使いやすいインターフェイスの切り方に慣れる
  • 設計力(これはシステムのオーバービューを先に自分で作ってaiに依頼できるようにする
  • 生成aiをつかったバイブコーティングになれる
  • 実際にやったことはzennのスクラップにまとめ、成果はzennのブログにまとめる(アプリ自体の公開は必須ではないかコードはgithubにおく)

できたもの

https://github.com/lirlia/100day_challenge_backend/tree/main/day38_cpu_visualizer

riddle_tecriddle_tec

はい、承知いたしました。Day33のCPUビジュアライザーですね！面白そうです。実際にコードがどのようにCPUで処理されるのかをステップ実行で見られるのは学習に役立ちますね。

バックエンドなし、フロントエンドのみでの実装、承ります。デザインはグラスモーフィズムでいきましょう。

プロジェクトの仕様

  1. テーマ: CPUビジュアライザー (グラスモーフィズムデザイン)
  2. 主な機能:
    • 簡単なJavaScriptコード（四則演算、変数代入、基本的な関数呼び出しを想定）を入力できるテキストエリア。
    • 入力されたJSコードを、簡略化されたアセンブリ風コードに変換して表示。
    • アセンブリ風コードを、簡略化されたマシンコード風（例: 16進数）に変換して表示。
    • 「ステップ実行」ボタンで、処理を1行ずつ進める。
    • 現在実行中の行を、JS、アセンブリ、マシンコードの各表示エリアでハイライト。
    • 主要なCPUレジスタ（プログラムカウンタ(PC)、アキュムレータ(ACC)など）の現在の値を表示。
    • 簡略化されたメモリ空間（スタック領域など）の内容を表示。
  3. 表示エリア構成:
    • JavaScript入力エリア
    • アセンブリコード表示エリア
    • マシンコード表示エリア
    • レジスタ状態表示エリア
    • メモリ状態表示エリア
    • コントロールボタン（ステップ実行、リセットなど）
  4. 技術スタック:
    • Next.js (App Router)
    • TypeScript
    • Tailwind CSS
    • 状態管理: React Context API (または Zustand)

作業手順案

以下のような流れで進めさせていただきます。

  1. プロジェクト初期化:

    • template ディレクトリをコピーして day37_cpu_visualizer を作成します。
    • package.json の name を day37_cpu_visualizer に変更します。
    • README.md に今回のアプリの基本設計（上記仕様や目的）を記述します。
    • cd day37_cpu_visualizer で作業ディレクトリに移動します。

  2. 基本レイアウト作成 (グラスモーフィズム風):

    • app/layout.tsx と app/globals.css を編集し、全体の背景やフォントを設定します。
    • app/(pages)/cpu/page.tsx を作成し、各表示エリアの骨組みをTailwind CSSで配置します。グラスモーフィズムのスタイル（背景ブラー、半透明パネルなど）を適用します。

  3. CPUコアロジックの設計と実装 (app/_lib/cpuEngine.ts):

    • 型定義 (app/_lib/types.ts): 命令セット、レジスタ、メモリ構造などの型を定義します。
    • 簡易JavaScriptパーサー: 入力されたJSコードを解析し、内部的な命令列に変換するロジック。最初は非常に限定的な構文（例: let x = 10; let y = 20; let z = x + y;）のみを対象とします。
    • アセンブラ: 内部命令列を、定義した簡易アセンブリコードに変換します。
    • マシンコードジェネレータ: アセンブリコードを、対応するマシンコード（数値表現）に変換します。
    • CPUシミュレータ:
      • レジスタ（PC, ACCなど）とメモリ空間を保持。
      • マシンコードを1命令ずつ解釈・実行する step() 関数を実装。
      • PC、レジスタ、メモリの状態を更新する。

  4. UIコンポーネント実装 (app/(pages)/cpu/components/):

    • CodeInputArea.tsx: JSコード入力用。
    • AssemblyView.tsx: アセンブリコード表示用。ハイライト機能付き。
    • MachineCodeView.tsx: マシンコード表示用。ハイライト機能付き。
    • RegistersView.tsx: レジスタ状態表示用。
    • MemoryView.tsx: メモリ状態表示用。
    • Controls.tsx: ステップ実行、リセットボタン。

  5. 状態管理と連携:

    • React Context API を用いて、CPUの状態（レジスタ、メモリ）、各コード（JS、アセンブリ、マシン）、現在の実行行などをグローバルに管理します。
    • Controls.tsx から cpuEngine.ts の step() 関数を呼び出し、その結果を各Viewコンポーネントに反映させます。

  6. 機能拡張と調整:

    • 対応するJavaScriptの構文を少しずつ増やします（例：簡単な条件分岐、関数呼び出し）。
    • 表示の調整、グラスモーフィズムのディテールアップ。

  7. テストとデバッグ:

    • さまざまなJavaScriptコードスニペットを入力し、ステップ実行時の動作、各表示エリアの更新、ハイライトが正しく行われるかを確認します。
    • コンソールログを活用してデバッグします。

  8. ドキュメント作成:

    • README.md を更新し、アプリの使い方、実装した機能、簡略化したCPUモデルの詳細などを追記します。
    • .cursor/rules/knowledge.mdc を更新します。

ディレクトリ構成案:

day37_cpu_visualizer/
├── app/
│   ├── (pages)/
│   │   └── cpu/
│   │       ├── page.tsx
│   │       └── components/
│   │           ├── CodeInputArea.tsx
│   │           ├── AssemblyView.tsx
│   │           ├── MachineCodeView.tsx
│   │           ├── RegistersView.tsx
│   │           ├── MemoryView.tsx
│   │           └── Controls.tsx
│   ├── _lib/
│   │   ├── cpuEngine.ts  // CPUシミュレータ、パーサ、アセンブラ等
│   │   └── types.ts      // CPU関連の型定義
│   ├── layout.tsx
│   └── globals.css
├── components/
│   └── ui/               // 共通UIコンポーネント (今回は使わないかも)
├── lib/
│   └── utils.ts          // 汎用ユーティリティ (今回は使わないかも)
├── public/
├── .gitignore
├── next.config.mjs
├── package.json
├── postcss.config.mjs    // Tailwind CSS v4以降は不要かも
├── tailwind.config.ts
├── tsconfig.json
└── README.md
riddle_tecriddle_tec

オリジナルアセンブラコードだけどなんとなく理解は進んだ

riddle_tecriddle_tec

フロントエンドだけだと特にこまらないな〜〜

このスクラップは2ヶ月前にクローズされました