香川大学SLPからお届け！（Vol.98掲載）

著者：井上竜輔

最終回では、筆者が作成したプログラミング学習アプリの概要を紹介します。このアプリは、AIなどの外部APIを活用して、オンラインで動的に問題を生成、実行、評価できるものです。安全性を考慮して、ユーザーが提出したプログラムは「Judge0 CE」というオンラインコード実行システムで、実行、評価します。

シェルスクリプトマガジン Vol.98は以下のリンク先でご購入できます。

図7　「components/CodeEditor.tsx」ファイルのコード（抜粋）

import React from 'react';
import Editor from '@monaco-editor/react';
import { Select, MenuItem, FormControl, InputLabel, Box } from '@mui/material';
（略）
const CodeEditor: React.FC&lt;Props> = ({ language, setLanguage, code, setCode }) => {
    return (
        &lt;Box sx={{ mt: 2 }}>
            &lt;FormControl sx={{ mb: 1, minWidth: 120 }}>
                &lt;InputLabel>Language&lt;/InputLabel>
                &lt;Select
                    value={language}
                    onChange={(e) => setLanguage(e.target.value)}
                    label="Language"
                >
                    &lt;MenuItem value="python">Python&lt;/MenuItem>
                    &lt;MenuItem value="cpp">C++&lt;/MenuItem>
                    &lt;MenuItem value="javascript">JavaScript&lt;/MenuItem>
                &lt;/Select>
            &lt;/FormControl>
            &lt;Editor
                height="40vh"
                language={language}
                value={code}
                onChange={(value) => setCode(value || '')}
                theme="vs-dark"
            />
        &lt;/Box>
    );
};

import React from 'react';

import Editor from '@monaco-editor/react';

import { Select, MenuItem, FormControl, InputLabel, Box } from '@mui/material';

（略）

const CodeEditor: React.FC<Props> = ({ language, setLanguage, code, setCode }) => {

return (

<InputLabel>Language</InputLabel>

<Select

value={language}

onChange={(e) => setLanguage(e.target.value)}

label="Language"

<MenuItem value="python">Python</MenuItem>

<MenuItem value="javascript">JavaScript</MenuItem>

</Select>

</FormControl>

<Editor

height="40vh"

language={language}

value={code}

onChange={(value) => setCode(value || '')}

theme="vs-dark"

</Box>

);

};

図8　handleSubmitCode関数の定義コード

const handleSubmitCode = async () => {
    if (!problem) return;
    setIsSubmitting(true);
    let finalVerdict = "AC (Accepted)";
    // サンプルケースごとにコードを実行、検証
    for (let i = 0; i &lt; problem.samples.length; i++) {
        const sample = problem.samples&#91;i];
        try {
            // APIを呼び出してコードを実行
            const judgeResult = await submitCode(language, code, sample.input);
            // 結果を検証
            if (judgeResult.status.id === 3) {
                const userOutput = (judgeResult.stdout || '').trim();
                const expectedOutput = sample.output.trim();
                if (userOutput !== expectedOutput) {
                    finalVerdict = "WA (Wrong Answer)";
                }
            } else {
                finalVerdict = judgeResult.status.description;
            }
        } catch (error) {
        }
        // 最初の失敗で処理を中断
        if (finalVerdict !== "AC (Accepted)") {
            break;
        }
        // APIのレート制限を避けるための待ち時間
        if (i &lt; problem.samples.length - 1) {
            await new Promise(resolve => setTimeout(resolve, 1000));
        }
    }
    setResult(finalVerdict);
    setIsSubmitting(false);
};

const handleSubmitCode = async () => {

if (!problem) return;

setIsSubmitting(true);

let finalVerdict = "AC (Accepted)";

// サンプルケースごとにコードを実行、検証

for (let i = 0; i < problem.samples.length; i++) {

const sample = problem.samples[i];

try {

// APIを呼び出してコードを実行

const judgeResult = await submitCode(language, code, sample.input);

// 結果を検証

if (judgeResult.status.id === 3) {

const userOutput = (judgeResult.stdout || '').trim();

const expectedOutput = sample.output.trim();

if (userOutput !== expectedOutput) {

finalVerdict = "WA (Wrong Answer)";

}

} else {

finalVerdict = judgeResult.status.description;

}

} catch (error) {

}

// 最初の失敗で処理を中断

if (finalVerdict !== "AC (Accepted)") {

break;

}

// APIのレート制限を避けるための待ち時間

if (i < problem.samples.length - 1) {

await new Promise(resolve => setTimeout(resolve, 1000));

}

setResult(finalVerdict);

setIsSubmitting(false);

};

図9　フロントエンドからのリクエストを受け取るコード

import type { NextApiRequest, NextApiResponse } from 'next';
import axios from 'axios';
// Judge0 CEの言語IDをマッピング
const LANGUAGE_MAP: { &#91;key: string]: number } = {
    python: 71, // Python 3.8.1
    cpp: 54,    // C++ (GCC 9.2.0)
    javascript: 63, // JavaScript (Node.js 12.14.0)
};
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
    if (req.method !== 'POST') {
        return res.status(405).json({ error: 'メソッドはポストではありません。' });
    }
    const { language, code, stdin } = req.body;
    if (!language || !code || !stdin) {
        return res.status(400).json({ error: '要素が足りません。' });
    }
    const languageId = LANGUAGE_MAP&#91;language];
    if (!languageId) {
        return res.status(400).json({ error: `対応していない言語です。 ${language}` });
    }
（略）
}

import type { NextApiRequest, NextApiResponse } from 'next';

import axios from 'axios';

// Judge0 CEの言語IDをマッピング

const LANGUAGE_MAP: { [key: string]: number } = {

python: 71, // Python 3.8.1

cpp: 54, // C++ (GCC 9.2.0)

javascript: 63, // JavaScript (Node.js 12.14.0)

};

export default async function handler(req: NextApiRequest, res: NextApiResponse) {

if (req.method !== 'POST') {

return res.status(405).json({ error: 'メソッドはポストではありません。' });

}

const { language, code, stdin } = req.body;

if (!language || !code || !stdin) {

return res.status(400).json({ error: '要素が足りません。' });

}

const languageId = LANGUAGE_MAP[language];

if (!languageId) {

return res.status(400).json({ error: `対応していない言語です。 ${language}` });

}

（略）

}

図10　Judge0 CEのAPIにリクエストを送り、結果をフロントエンドに返すコード

const judge0ApiKey = process.env.NEXT_PUBLIC_JUDGE0_API_KEY;
const options = {
    method: 'POST',
    url: 'https://judge0-ce.p.rapidapi.com/submissions',
    params: {
        base64_encoded: 'false',
        wait: 'true', // 実行完了まで待機する
    },
    headers: {
        'x-rapidapi-host': 'judge0-ce.p.rapidapi.com',
        'x-rapidapi-key': judge0ApiKey, // 環境変数から読み込んだAPIキー
        'content-type': 'application/json',
    },
    data: {
        language_id: languageId,
        source_code: code,
        stdin: stdin,
    },
};
try {
    const submissionResponse = await axios.request(options);
    // Judge0 CEからの結果をフロントエンドに返す
    res.status(200).json(submissionResponse.data);
} catch (error) {/* エラーハンドリング*/}

const judge0ApiKey = process.env.NEXT_PUBLIC_JUDGE0_API_KEY;

const options = {

method: 'POST',

url: 'https://judge0-ce.p.rapidapi.com/submissions',

params: {

base64_encoded: 'false',

wait: 'true', // 実行完了まで待機する

headers: {

'x-rapidapi-host': 'judge0-ce.p.rapidapi.com',

'x-rapidapi-key': judge0ApiKey, // 環境変数から読み込んだAPIキー

'content-type': 'application/json',

data: {

language_id: languageId,

source_code: code,

stdin: stdin,

};

try {

const submissionResponse = await axios.request(options);

// Judge0 CEからの結果をフロントエンドに返す

res.status(200).json(submissionResponse.data);

} catch (error) {/* エラーハンドリング*/}

図11　Geminiに送信するプロンプトの例

あなたは優秀な競技プログラミングの問題作成者です。
以下の制約に従って、新しいプログラミング問題を1つ作成してください。

# 制約
- 難易度: AtCoder ProblemsのDifficulty基準で「B」レベル
- トピック: 配列の操作、または文字列の探索
- 入力: 標準入力から受け取ること
- 出力: 標準出力へ書き出すこと
- 形式: 以下のJSONフォーマットに従うこと

# JSONフォーマット
{
  "title": "問題タイトル",
  "statement": "問題文。背景やストーリーを簡潔に記述。",
  "constraints": &#91;
    "Nは1以上100以下の整数",
    "Sは英小文字からなる長さNの文字列"
  ],
  "input_format": "入力形式の説明",
  "output_format": "出力形式の説明",
  "samples": &#91;
    { "input": "入力例1", "output": "出力例1" },
    { "input": "入力例2", "output": "出力例2" },
    { "input": "入力例3", "output": "出力例3" }
  ],
  "solution_code": "Pythonによる解答例のコード"
}

あなたは優秀な競技プログラミングの問題作成者です。

以下の制約に従って、新しいプログラミング問題を1つ作成してください。

# 制約

- 難易度: AtCoder ProblemsのDifficulty基準で「B」レベル

- トピック: 配列の操作、または文字列の探索

- 入力: 標準入力から受け取ること

- 出力: 標準出力へ書き出すこと

- 形式: 以下のJSONフォーマットに従うこと

# JSONフォーマット

{

"title": "問題タイトル",

"statement": "問題文。背景やストーリーを簡潔に記述。",

"constraints": [

"Nは1以上100以下の整数",

"Sは英小文字からなる長さNの文字列"

"input_format": "入力形式の説明",

"output_format": "出力形式の説明",

"samples": [

{ "input": "入力例1", "output": "出力例1" },

{ "input": "入力例2", "output": "出力例2" },

{ "input": "入力例3", "output": "出力例3" }

"solution_code": "Pythonによる解答例のコード"

}