PythonのREPLが表示できた

Author: na-trium-144

app/terminal/python/page.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { TerminalComponent } from "../terminal";
+import { usePyodide } from "./pyodide";
+
+export default function PythonPage() {
+  const { isPyodideReady, runPython } = usePyodide();
+  return (
+    <div className="p-4">
+      <TerminalComponent
+        ready={isPyodideReady}
+        initMessage="Welcome to Pyodide Terminal!"
+        prompt=">>> "
+        sendCommand={runPython}
+      />
+    </div>
+  );
+}

app/terminal/python/pyodide.ts

@@ -0,0 +1,98 @@
+// Nextjsではドキュメント通りにpyodideをimportすると動かない? typeのインポートだけはできる
+import { type PyodideAPI } from "pyodide";
+import { useState, useEffect, useRef, useCallback } from "react";
+import { TerminalOutput } from "../terminal";
+
+declare global {
+  interface Window {
+    loadPyodide: (options: { indexURL: string }) => Promise<PyodideAPI>;
+  }
+}
+
+export function usePyodide() {
+  const pyodideRef = useRef<PyodideAPI>(null);
+  const [isPyodideReady, setIsPyodideReady] = useState<boolean>(false);
+  const pyodideOutput = useRef<TerminalOutput[]>([]);
+
+  useEffect(() => {
+    // next.config.ts 内でpyodideをimportし、バージョンを取得している
+    const PYODIDE_CDN = `https://cdn.jsdelivr.net/pyodide/v${process.env.PYODIDE_VERSION}/full/`;
+
+    const initPyodide = () => {
+      window
+        .loadPyodide({
+          indexURL: PYODIDE_CDN,
+        })
+        .then((pyodide) => {
+          pyodideRef.current = pyodide;
+
+          // 標準出力とエラーをハンドリングする設定
+          pyodide.setStdout({
+            batched: (str) => {
+              pyodideOutput.current.push({ type: "stdout", message: str });
+            },
+          });
+          pyodide.setStderr({
+            batched: (str) => {
+              pyodideOutput.current.push({ type: "stderr", message: str });
+            },
+          });
+
+          setIsPyodideReady(true);
+        });
+    };
+
+    // スクリプトタグを動的に追加
+    if ("loadPyodide" in window) {
+      initPyodide();
+    } else {
+      const script = document.createElement("script");
+      script.src = `${PYODIDE_CDN}pyodide.js`;
+      script.async = true;
+      script.onload = initPyodide;
+      script.onerror = () => {
+        // TODO
+      };
+      document.body.appendChild(script);
+
+      // コンポーネントのクリーンアップ時にスクリプトタグを削除
+      return () => {
+        document.body.removeChild(script);
+      };
+    }
+  }, []);
+
+  const runPython = useCallback<(code: string) => Promise<TerminalOutput[]>>(
+    async (code: string) => {
+      const pyodide = pyodideRef.current;
+      if (!pyodide) {
+        return [{ type: "error", message: "Pyodide is not ready yet." }];
+      }
+      try {
+        const result = await pyodide.runPythonAsync(code);
+        if (result !== undefined) {
+          pyodideOutput.current.push({
+            type: "return",
+            message: String(result),
+          });
+        } else {
+          // 標準出力/エラーがない場合
+        }
+      } catch (e) {
+        console.log(e);
+        if (e instanceof Error) {
+          pyodideOutput.current.push({ type: "error", message: e.message });
+        } else {
+          pyodideOutput.current.push({ type: "error", message: String(e) });
+        }
+      }
+      const output = [...pyodideOutput.current];
+      pyodideOutput.current = []; // 出力をクリア
+      return output;
+    },
+    []
+  );
+
+  // 外部に公開する値と関数
+  return { isPyodideReady, runPython };
+}

app/terminal/terminal.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import React, { useEffect, useRef, useState } from "react";
+import { Terminal } from "@xterm/xterm";
+import { FitAddon } from "@xterm/addon-fit";
+import "@xterm/xterm/css/xterm.css";
+
+export interface TerminalOutput {
+  type: "stdout" | "stderr" | "error" | "return"; // 出力の種類
+  message: string; // 出力メッセージ
+}
+interface TerminalComponentProps {
+  ready: boolean;
+  initMessage: string; // ターミナル初期化時のメッセージ
+  prompt: string; // プロンプト文字列
+  sendCommand: (command: string) => Promise<TerminalOutput[]>; // コマンド実行時のコールバック関数
+}
+export function TerminalComponent(props: TerminalComponentProps) {
+  const terminalRef = useRef<HTMLDivElement>(null!);
+  const terminalInstanceRef = useRef<Terminal | null>(null);
+  const [termReady, setTermReady] = useState<boolean>(false);
+  const inputBuffer = useRef<string>("");
+
+  const [initMessage] = useState<string>(props.initMessage);
+  const [prompt] = useState<string>(props.prompt);
+  const sendCommand = useRef<(command: string) => Promise<TerminalOutput[]>>(
+    props.sendCommand
+  );
+
+  useEffect(() => {
+    if (terminalInstanceRef.current && termReady && props.ready) {
+      // 初期メッセージとプロンプトを表示
+      terminalInstanceRef.current.writeln(initMessage);
+      terminalInstanceRef.current.write(prompt);
+    }
+  }, [initMessage, prompt, props.ready, termReady]);
+
+  // ターミナルの初期化処理
+  useEffect(() => {
+    const term = new Terminal({
+      cursorBlink: true,
+      convertEol: true,
+    });
+    terminalInstanceRef.current = term;
+
+    const fitAddon = new FitAddon();
+    term.loadAddon(fitAddon);
+    term.open(terminalRef.current);
+    fitAddon.fit();
+
+    setTermReady(true);
+    // TODO: loadingメッセージ
+    // TODO: ターミナルのサイズ変更に対応する
+
+    const onOutput = (outputs: TerminalOutput[]) => {
+      for (const output of outputs) {
+        // 出力内容に応じて色を変える
+        const message = String(output.message).replace(/\n/g, "\r\n");
+        switch (output.type) {
+          case "stderr":
+          case "error":
+            term.writeln(`\x1b[1;31m${message}\x1b[0m`);
+            break;
+          default:
+            term.writeln(message);
+            break;
+        }
+      }
+      // 出力が終わったらプロンプトを表示
+      term.write(prompt);
+    };
+
+    // キー入力のハンドリング
+    const onDataHandler = term.onData((key) => {
+      const code = key.charCodeAt(0);
+
+      if (code === 13) {
+        // Enter
+        term.writeln("");
+        if (inputBuffer.current.trim().length > 0) {
+          sendCommand.current(inputBuffer.current).then(onOutput);
+          inputBuffer.current = "";
+        }
+        // 新しいプロンプトは外部からのoutputを待ってから表示する
+      } else if (code === 127) {
+        // Backspace
+        if (inputBuffer.current.length > 0) {
+          term.write("\b \b");
+          inputBuffer.current = inputBuffer.current.slice(0, -1);
+        }
+      } else if (code >= 32) {
+        inputBuffer.current += key;
+        term.write(key);
+      }
+    });
+
+    // アンマウント時のクリーンアップ
+    return () => {
+      onDataHandler.dispose();
+      term.dispose();
+    };
+  }, [initMessage, prompt]);
+
+  return <div ref={terminalRef} style={{ width: "100%", height: "400px" }} />;
+}

next.config.ts

@@ -1,5 +1,6 @@
 import type { NextConfig } from "next";
 import { initOpenNextCloudflareForDev } from "@opennextjs/cloudflare";
+import { version as pyodideVersion } from "pyodide";
 
 initOpenNextCloudflareForDev();
 
@@ -11,6 +12,9 @@ const nextConfig: NextConfig = {
   typescript: {
     ignoreBuildErrors: true,
   },
+  env: {
+    PYODIDE_VERSION: pyodideVersion,
+  },
 };
 
 export default nextConfig;

package-lock.json

@@ -16,7 +16,10 @@
   "dependencies": {
     "@google/generative-ai": "^0.24.1",
     "@opennextjs/cloudflare": "^1.6.3",
+    "@xterm/addon-fit": "^0.11.0-beta.115",
+    "@xterm/xterm": "^5.6.0-beta.115",
     "next": "<15.4",
+    "pyodide": "^0.28.1",
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-markdown": "^10.1.0",