python実行の排他制御

Author: na-trium-144

app/terminal/python/embedded.tsx

@@ -6,14 +6,15 @@ import { usePyodide } from "./pyodide";
 
 export function PythonEmbeddedTerminal({ content }: { content: string }) {
   const initCommands = useMemo(() => splitContents(content), [content]);
-  const { init, initializing, ready, runPython, checkSyntax } = usePyodide();
+  const { init, initializing, ready, runPython, checkSyntax, mutex } = usePyodide();
 
   return (
     <TerminalComponent
       initRuntime={init}
       runtimeInitializing={initializing}
       runtimeReady={ready}
       initCommand={initCommands}
+      mutex={mutex}
       prompt=">>> "
       promptMore="... "
       language="python"

app/terminal/python/page.tsx

@@ -4,7 +4,7 @@ import { TerminalComponent } from "../terminal";
 import { usePyodide } from "./pyodide";
 
 export default function PythonPage() {
-  const { init, ready, initializing, runPython, checkSyntax } = usePyodide();
+  const { init, ready, initializing, runPython, checkSyntax, mutex } = usePyodide();
   return (
     <div className="p-4">
       <TerminalComponent
@@ -16,6 +16,7 @@ export default function PythonPage() {
         promptMore="... "
         language="python"
         tabSize={4}
+        mutex={mutex}
         sendCommand={runPython}
         checkSyntax={checkSyntax}
       />

app/terminal/python/pyodide.tsx

@@ -11,6 +11,7 @@ import {
   useContext,
 } from "react";
 import { SyntaxStatus, TerminalOutput } from "../terminal";
+import { Mutex, MutexInterface } from "async-mutex";
 
 declare global {
   interface Window {
@@ -19,9 +20,12 @@ declare global {
 }
 
 interface IPyodideContext {
-  init: () => void;
-  initializing: boolean;
-  ready: boolean;
+  init: () => void; // Pyodideを初期化する
+  initializing: boolean; // Pyodideの初期化が実行中
+  ready: boolean; // Pyodideの初期化が完了した
+  // runPython() などを複数の場所から同時実行すると結果が混ざる。
+  // コードブロックの実行全体を mutex.runExclusive() で囲うことで同時実行を防ぐ必要がある
+  mutex: MutexInterface;
   runPython: (code: string) => Promise<TerminalOutput[]>;
   checkSyntax: (code: string) => Promise<SyntaxStatus>;
 }
@@ -55,13 +59,14 @@ export function PyodideProvider({ children }: { children: ReactNode }) {
   const [ready, setReady] = useState<boolean>(false);
   const [initializing, setInitializing] = useState<boolean>(false);
   const pyodideOutput = useRef<TerminalOutput[]>([]);
+  const mutex = useRef<MutexInterface>(new Mutex());
 
   const init = useCallback(() => {
     // next.config.ts 内でpyodideをimportし、バージョンを取得している
     const PYODIDE_CDN = `https://cdn.jsdelivr.net/pyodide/v${process.env.PYODIDE_VERSION}/full/`;
 
     const initPyodide = () => {
-      if(initializing) return;
+      if (initializing) return;
       setInitializing(true);
       window
         .loadPyodide({
@@ -109,6 +114,10 @@ export function PyodideProvider({ children }: { children: ReactNode }) {
 
   const runPython = useCallback<(code: string) => Promise<TerminalOutput[]>>(
     async (code: string) => {
+      if (!mutex.current.isLocked()) {
+        throw new Error("mutex of PyodideContext must be locked for runPython");
+      }
+
       const pyodide = pyodideRef.current;
       if (!pyodide || !ready) {
         return [{ type: "error", message: "Pyodide is not ready yet." }];
@@ -165,6 +174,10 @@ export function PyodideProvider({ children }: { children: ReactNode }) {
    */
   const checkSyntax = useCallback<(code: string) => Promise<SyntaxStatus>>(
     async (code) => {
+      if (mutex.current.isLocked()) {
+        throw new Error("mutex of PyodideContext must not be locked for checkSyntax");
+      }
+
       const pyodide = pyodideRef.current;
       if (!pyodide || !ready) return "invalid";
 
@@ -191,6 +204,7 @@ export function PyodideProvider({ children }: { children: ReactNode }) {
         ready,
         runPython,
         checkSyntax,
+        mutex: mutex.current,
       }}
     >
       {children}

app/terminal/terminal.tsx

@@ -6,6 +6,7 @@ import { FitAddon } from "@xterm/addon-fit";
 import "@xterm/xterm/css/xterm.css";
 import { highlightCodeToAnsi } from "./highlight";
 import chalk from "chalk";
+import { MutexInterface } from "async-mutex";
 
 export interface TerminalOutput {
   type: "stdout" | "stderr" | "error" | "return"; // 出力の種類
@@ -23,6 +24,8 @@ interface TerminalComponentProps {
   promptMore?: string;
   language?: string;
   tabSize: number;
+  // コードブロックの実行全体を mutex.runExclusive() で囲うことで同時実行を防ぐ
+  mutex: MutexInterface;
   // コマンド実行時のコールバック関数
   sendCommand: (command: string) => Promise<TerminalOutput[]>;
   // 構文チェックのコールバック関数
@@ -45,6 +48,7 @@ export function TerminalComponent(props: TerminalComponentProps) {
     tabSize,
     sendCommand,
     checkSyntax,
+    mutex,
   } = props;
 
   // bufferを更新し、画面に描画する
@@ -237,13 +241,15 @@ export function TerminalComponent(props: TerminalComponentProps) {
             command: string;
             output: TerminalOutput[];
           }[] = [];
-          for (const cmd of props.initCommand) {
-            const outputs = await sendCommand(cmd.command);
-            initCommandResult.push({
-              command: cmd.command,
-              output: outputs,
-            });
-          }
+          await mutex.runExclusive(async () => {
+            for (const cmd of props.initCommand!) {
+              const outputs = await sendCommand(cmd.command);
+              initCommandResult.push({
+                command: cmd.command,
+                output: outputs,
+              });
+            }
+          });
           // 実際の実行結果でターミナルを再描画
           terminalInstanceRef.current!.clear();
           for (const cmd of initCommandResult) {
@@ -264,6 +270,7 @@ export function TerminalComponent(props: TerminalComponentProps) {
     onOutput,
     props.initCommand,
     sendCommand,
+    mutex,
   ]);
 
   const keyHandler = useCallback(
@@ -294,7 +301,9 @@ export function TerminalComponent(props: TerminalComponentProps) {
               terminalInstanceRef.current.writeln("");
               const command = inputBuffer.current.join("\n").trim();
               inputBuffer.current = [];
-              const outputs = await sendCommand(command);
+              const outputs = await mutex.runExclusive(() =>
+                sendCommand(command)
+              );
               onOutput(outputs);
             }
           } else if (code === 127) {
@@ -331,7 +340,7 @@ export function TerminalComponent(props: TerminalComponentProps) {
         }
       }
     },
-    [updateBuffer, sendCommand, onOutput, checkSyntax, tabSize]
+    [updateBuffer, sendCommand, onOutput, checkSyntax, tabSize, mutex]
   );
   useEffect(() => {
     if (terminalInstanceRef.current && termReady && runtimeReady) {

package-lock.json

@@ -18,6 +18,7 @@
     "@opennextjs/cloudflare": "^1.6.3",
     "@xterm/addon-fit": "^0.11.0-beta.115",
     "@xterm/xterm": "^5.6.0-beta.115",
+    "async-mutex": "^0.5.0",
     "chalk": "^5.5.0",
     "next": "<15.4",
     "prismjs": "^1.30.0",