見出し画像

コードが紡ぐ物語──メタフィクショナル・コードエディタ

たぬ

コードと物語。

一見、相容れない二つの概念のあいだに繋がりを見出そうとする試みです。
今回ご紹介するのは「メタフィクショナル・コードエディタ」と名付けた実験的なWEBアプリです。エディタにコードを入力すると、同時にそれをもとに「物語」が生成されるという、不思議なプロトタイプです。
ふと思い立ち、Claudeで作成しました。

一応断っておくと、プログラミングのお勉強を目的としたツールではありません。

なお、改造自由ですのでご自由に。元（このページ）を明記していただければ、それで構いません。

イメージ

「コード＝物語」という発想

プログラミング言語では、状況に応じて分岐処理をし、繰り返し処理を行い、ステート（状態）を変化させていきます。多くの物語でも、主人公が選択を迫られたり、同じような試練を繰り返し乗り越えたり、人や世界が変化していったり──こうした“コード的”な要素が見られます。

今回のプロジェクトは、あえて「プログラムの構文をキャラクターや舞台装置に見立てる」ことで、コードと物語の関連性を可視化する狙いがあります。もし、forループが“何度となく繰り返される試練”になり、if文が“運命の分岐点”になり、クラス定義が“古代の魔道書”になるのだとしたら、我々が普段こなれて使っているコードは、実はドラマチックな叙事詩なのかもしれません。

仕組みの概要

今回のコードは、シンプルなHTML/CSS/JavaScriptで構成されています。
（この辺はClaudeがいい感じに設計しています。）

  1. コードエディタ（テキストエリア）
    ユーザーがJavaScriptコードを入力する部分です。Prism.jsのみ使用しています。

  2. コード解析ロジック
    analyzeCode()という関数で、入力されたコード文字列を走査し、特定のキーワードが含まれているかどうかを判定。
    たとえば、

    • class → 「古代の魔道書が開かれた……」

    • async → 「時間の糸が揺らめき……」

    • if → 「運命の分岐点が姿を現す……」
      のように、事前に紐づけられた“物語の断片”を返す仕組みになっています。

  3. 物語の出力
    解析によって選び出された断片を配列に蓄積し、最後にHTMLとして出力。アニメーションでフェードインするように工夫しています。
    物語は複数のパラグラフで表示され、まるで一つの世界が立ち上がるかのような演出がされています。

以下はメインの解析部分の抜粋です（概要のみ）。

function generateStory(code) {
  const story = [];
  
  // クラス定義の検出
  if (code.includes('class')) {
    story.push('古代の魔道書が開かれた。その頁には、世界の真理が封印されている。');
  }

  // 非同期関数の検出
  if (code.includes('async')) {
    story.push('時間の糸が揺らめき、未来と過去が交錯する瞬間が訪れた。');
  }

  // ・・・
  // （各構文ごとに物語の断片を生成）

  if (story.length === 0) {
    story.push('白紙の本が開かれている。物語はこれから紡がれていく...');
  }

  return story;
}

このアプリの可能性

この仕組みはいわば“お遊び”のように見えますが、プログラムと物語を橋渡しする上で、まだまだ発展の余地があると思います。

  • 自然言語処理との組み合わせ
    ChatGPTなどの言語モデルを組み合わせれば(API経由で)、さらに奥深い物語生成ができるかもしれません。関数名や変数名から推測して、登場人物や世界観を自動生成するなど、夢のある拡張が考えられます。

  • 双方向性の拡張
    入力されたコードが物語を生成するだけでなく、生成された物語をもとに逆にコードを再構築する、なんてこともできるかもしれません。フィクションと現実を行き来する奇妙なプログラミング体験を味わえそうです。

  • ストーリーのカスタマイズ
    解析した内容をさらに細分化し、行数ごと、あるいは変数名ごとに物語を変化させる。ユーザーが独自の“物語辞書”を作り、その辞書を使って「自分だけの物語生成」を可能にするのも面白いですね。

使い方のデモ

サンプルは3つほどアプリ内に用意していますが、たとえば、エディタに以下のようなコードを入力してみると…

class 勇者 {
  constructor(名前) {
    this.名前 = 名前;
  }
  挑戦(敵) {
    if (敵 === '魔王') {
      console.log('魔王に挑む！');
    }
  }
}

古代の魔道書が開かれた。その頁には、世界の真理が封印されている。
運命の分岐点が姿を現す。選択が、物語の流れを変えていく。
物語の要素が具現化される。変わらぬ真実と、移ろいゆく現実が形を成す。

…となるはずです。

通常のコードにはなかなか現れない“ファンタジーの息吹”を、コードの構文やキーワードをトリガーにして呼び起こす体験は、プログラミングの新しい楽しみ方を感じることができます。

おわりに

コードが物語を生む、あるいは物語がコードを指し示す。
この「メタフィクショナル・コードエディタ」は、まさにプログラミングという行為と、ストーリーテリングが地続きにあることを示唆してくれます。技術的にはシンプルな仕組みですが、その着想は大いなる想像力の可能性を秘めています。

いつか、私たちが日常的に書くコードが、そのまま一編の詩や物語として記録される日が来るかもしれません。その時、エディタはただの作業ツールではなく、私たち一人一人の意識と対話しながら新たな世界を創造する“魔法の書”へと変貌するのではないでしょうか。

コードを書くだけでなく、そのコードが語る“物語”にも耳を澄ませてみる。きっと、プログラミングの新たな楽しみが見えてくるはずです。

余談

現在のプログラミングは、ChatGPTのような生成AIとの自然言語による対話が主流になりつつあります。この流れを考えると、今回の「コードと物語」のアイデアも、どこか不思議なつながりを感じさせますね。

いいなと思ったら応援しよう！