ショートストーリー 限られた計算リソースで一体何ができるんだ？
東京の夜、主人公であるプログラマーのケンジは、限られたリソースで最大限の力を発揮しようと考えていた。彼のデスクにあるのはブラウザとメモ帳アプリだけ。PCにPythonがインストールされていないため、プログラムを書いて動作を確かめるには制限があった。
「この限られた計算リソースで一体何ができるんだ？」と彼は心の中で問いかけた。与えられたものだけで何とか突破口を見出さなければならない。それが主人公に与えられたミッションであった。
ケンジは考え抜いた末に、JavaScriptの力を借りることを思いついた。彼はJavaScriptのライブラリを調べ、Pythonコードをブラウザ上で実行できる仕組みを模索し始める。そして、ついにその瞬間が訪れた。いくつもの試行錯誤の末、彼はJavaScript上でPythonコードを実行できる仕組みを完成させたのだ。
プログラムを実行すると、画面上には彼が書いたPythonのコードが、エラーもなく見事に動き始めた。例えば、関数やループ、条件分岐がスムーズに動作する様子を目にし、ケンジは自分の成果に小さくガッツポーズをした。
「これで、どこにいてもPythonのコードが書ける…！」
限られたブラウザ環境で、Pythonの柔軟なコーディングスタイルとJavaScriptの表現力を兼ね備えた環境を作り上げたケンジは、その日一歩成長した自分を感じた。与えられたミッションを果たし、新たな可能性を手に入れた彼は、この経験を胸に、新しいプロジェクトに取り組むことを決意し、再びキーボードを打ち始めた。
サンプルコード
このコードを使って、以下のようなPythonコードを実行できます。
# 2つのベクトルの内積を計算
def dot_product(vec1, vec2):
return sum(x * y for x, y in zip(vec1, vec2))
vec1 = [1, 2, 3]
vec2 = [4, 5, 6]
dot_product(vec1, vec2)
上記のPythonコードをテキストエリアに入力して「実行」ボタンを押すと、内積が計算されて結果が表示されます。
ブラウザ上でPythonコードを実行するために使えるJavaScriptライブラリとして、Pyodide があります。これは、WebAssembly（Wasm）を使ってPythonのランタイムをブラウザで動作させるライブラリで、ブラウザ内でPythonコードをインタプリタとして実行できるようにします。
Pyodideの特徴
完全なPython環境：ほとんどのPython標準ライブラリが利用可能です。
ブラウザ上で動作：サーバーを介さず、クライアントサイドでコードを実行します。
科学計算ライブラリのサポート：NumPyやPandas、Matplotlibなどの科学計算ライブラリも使用可能です。
JavaScriptとの相互運用性：JavaScriptからPythonコードを呼び出すことや、PythonからJavaScriptの関数を呼び出すこともできます。
このため、HTMLやJavaScriptのプロジェクトにPyodideを追加するだけで、Pythonコードをそのまま実行できるようになり、ウェブアプリやデモでPythonコードを直接実行するユースケースに便利です。
Pythonのサンプルコードを5つ。
- 基本的な四則演算と変数
Pythonの基本的な四則演算と変数の使い方。
# 基本的な四則演算
a = 10
b = 5
addition = a + b # 足し算
subtraction = a - b # 引き算
multiplication = a * b # 掛け算
division = a / b # 割り算
print("足し算:", addition)
print("引き算:", subtraction)
print("掛け算:", multiplication)
print("割り算:", division)
- 条件分岐とループ
条件分岐とforループを使って、1から10までの数値の偶数・奇数を判定します。
for i in range(1, 11):
if i % 2 == 0:
print(i, "は偶数です")
else:
print(i, "は奇数です")
- リストとループ
リストとforループを使って、リスト内の要素を合計するコードです。
numbers = [1, 2, 3, 4, 5]
total = 0
for num in numbers:
total += num
print("合計:", total)
- 関数の定義と再帰
関数と再帰を使って、階乗（factorial）を計算するコードです。
def factorial(n):
if n == 0 or n == 1:
return 1
else:
return n * factorial(n - 1)
print("5の階乗:", factorial(5))
- 辞書とリストの使い方
リストと辞書を使い、学生の名前と得点を管理し、平均点を計算するコードです。
students = [
{"name": "Alice", "score": 85},
{"name": "Bob", "score": 78},
{"name": "Charlie", "score": 92}
]
total_score = 0
for student in students:
total_score += student["score"]
average_score = total_score / len(students)
print("平均点:", average_score)
これらのコードを通じて、変数、四則演算、条件分岐、ループ、リスト、辞書、関数、再帰など、Pythonの基本的な構文やデータ構造の使い方が学べます。
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コードとビューポートの設定 -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Python Code Executor</title>
<!-- Pyodideライブラリの読み込み：Pythonコードをブラウザ上で実行するためのJavaScriptライブラリ -->
<script src="https://cdn.jsdelivr.net/pyodide/v0.21.3/full/pyodide.js"></script>
<!-- スタイル設定：ページ全体の見た目を設定 -->
<style>
/* 基本設定：フォント、背景色、中央揃え */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
color: #333;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
/* コンテナのデザイン */
.container {
background-color: #ffffff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
max-width: 600px;
width: 100%;
}
/* 見出しのスタイル */
h2 {
color: #4a90e2;
font-size: 1.5em;
margin-bottom: 10px;
}
/* Pythonコード入力エリアのスタイル */
#pythonCode {
width: 100%;
border: 1px solid #ccc;
border-radius: 4px;
padding: 10px;
font-family: monospace;
font-size: 1em;
resize: vertical;
background-color: #f7f7f9;
color: #333;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}
/* 実行ボタンのスタイル */
button {
background-color: #4a90e2;
color: #fff;
border: none;
border-radius: 4px;
padding: 10px 20px;
font-size: 1em;
cursor: pointer;
transition: background-color 0.3s;
margin-top: 10px;
}
/* ボタンのホバー時のスタイル */
button:hover {
background-color: #357abd;
}
/* 結果見出しのスタイル */
h3 {
color: #4a90e2;
margin-top: 20px;
font-size: 1.2em;
}
/* 実行結果表示エリアのスタイル */
#output {
background-color: #f7f7f9;
border: 1px solid #ccc;
border-radius: 4px;
padding: 10px;
font-family: monospace;
font-size: 1em;
white-space: pre-wrap;
min-height: 50px;
color: #333;
}
</style>
</head>
<body>
<!-- コンテナ開始 -->
<div class="container">
<!-- ページのタイトル -->
<h2>Pythonコード実行</h2>
<!-- Pythonコードを入力するためのテキストエリア -->
<textarea id="pythonCode" rows="8" placeholder="ここにPythonコードを入力してください..."></textarea><br>
<!-- 実行ボタン：クリックするとPythonコードを実行する -->
<button onclick="executePython()">実行</button>
<!-- 結果表示エリア -->
<h3>結果:</h3>
<pre id="output"></pre>
</div>
<!-- JavaScriptの開始 -->
<script>
// Pyodideの読み込み：ページが読み込まれたときに実行される
async function loadPyodideAndExecute() {
window.pyodide = await loadPyodide(); // Pyodideを読み込んでグローバル変数に保存
}
// Pythonコードを実行する関数
async function executePython() {
// 入力されたPythonコードを取得
const code = document.getElementById("pythonCode").value;
const output = document.getElementById("output"); // 結果表示エリア
output.textContent = "実行中..."; // 実行中のメッセージを表示
try {
// Pythonコードを非同期で実行
const result = await pyodide.runPythonAsync(code);
// 結果がundefinedでなければ出力、なければ成功メッセージを表示
output.textContent = result !== undefined ? result : "コードが正常に実行されました。";
} catch (err) {
// エラーハンドリング：エラーメッセージを出力
output.textContent = "エラー: " + err.message;
}
}
// ページ読み込み時にPyodideを読み込む
loadPyodideAndExecute();
</script>
</body>
</html>
pyodide.jsライブラリを使って、Pythonコードをブラウザ上で直接実行しています。
スタイル: ページ全体のデザインを設定し、ユーザーが見やすく操作しやすいようにスタイルを整えています。
JavaScript関数: loadPyodideAndExecute関数でpyodideライブラリを読み込み、executePython関数で入力されたPythonコードを実行します。
エラーハンドリング: 実行時にエラーが発生した場合、エラーメッセージが表示されます。
注意。
Pyodideはブラウザ内でPythonコードを実行できるようにするライブラリですが、PCにPythonを直接インストールして使う場合と比べて、いくつかの制約があります。主な制限は以下の通りです。
- ライブラリとパッケージの制限
Pyodideはブラウザに組み込まれて動作するため、標準ライブラリの一部や、軽量なサードパーティーライブラリの多くがサポートされていますが、すべてではありません。
特に、TensorFlowやPyTorchなどの大規模な機械学習フレームワークや、OpenCVのような画像処理ライブラリは動作しません。また、ブラウザがファイルシステムやハードウェアへのアクセスを制限するため、GPUアクセラレーションも利用できません。 - ブラウザ環境での制約
ブラウザはサーバーやPCとは異なり、動作できるメモリやCPUのリソースが限られています。そのため、メモリ使用量が多いコードや長時間実行が必要な処理はパフォーマンスが低下する可能性があります。
また、ブラウザではユーザーが操作するまでにインターネット接続が途切れたり、タブが閉じられたりすることがあるため、長時間かかるタスクには不向きです。 - ファイルシステムアクセスの制約
Pyodideでは一時的な仮想ファイルシステムが利用でき、fetch APIを介してブラウザで提供されるデータを操作できますが、PC上のファイルシステムと直接やりとりすることはできません。
ユーザーにファイルをアップロードしてもらい、そのファイルを扱うことは可能ですが、保存や書き込みには制限があります。 - ネットワークとセキュリティの制限
Pyodideはサーバーと同様にネットワークリクエストを送信できますが、ブラウザの同一生成元ポリシーやCORSに従う必要があるため、外部APIと通信する際には制限があります。
一部のリクエストにはHTTPSが必須となり、認証が必要なAPIを使用する場合はブラウザでAPIキーを安全に扱う工夫が必要です。 - マルチスレッドと並列処理の制約
PyodideはJavaScriptで動作するため、Pythonでの並列処理やスレッド処理に制限があります。
通常のPython環境でサポートされるマルチスレッド機能（multiprocessingなど）は、ブラウザ環境では制限されるため、重い計算処理を並列化することは難しい場合があります。 - パフォーマンスと速度
PyodideはWebAssembly上でPythonを実行するため、ネイティブPython環境に比べるとパフォーマンスが劣ります。特に、計算量の多いアルゴリズムや、リアルタイム処理が求められるアプリケーションには向きません。
まとめ
Pyodideは、学習や簡易的なプロトタイプの構築には非常に便利で、ブラウザで手軽にPythonを試せる環境を提供しますが、PC上のネイティブなPython環境と比較すると、上記のような機能的な制約があります。