【ITニュース解説】Create a Simple Game with Python and JavaScript
2025年09月29日に「Dev.to」が公開したITニュース「Create a Simple Game with Python and JavaScript」について初心者にもわかりやすく解説しています。
ITニュース概要
PythonとJavaScriptを使い、シンプルな数当てゲームの作り方を解説する。Pythonでゲームの頭脳（ロジック）を、JavaScriptで見た目（UI）を作り、Flaskでつなぐことで、Web開発の基本を初心者でも体験できる。
ITニュース解説
PythonとJavaScriptを組み合わせて、ごく簡単なゲームを作る方法について説明する。システムエンジニアを目指す初心者にとって、このアプローチはWebアプリケーション開発の基礎を理解する上で非常に役立つだろう。Pythonはゲームの裏側で動く「ロジック」や「頭脳」を担当し、JavaScriptはプレイヤーが直接触れる「見た目」や「操作」を担当する。この二つの言語が協力し合うことで、ユーザーとやり取りできるアプリケーションが完成する。
まず、ゲームの核となる部分、つまりバックエンドをPythonで作る。ここでは「数当てゲーム」を例にとる。コンピューターがランダムな数字を一つ選び、プレイヤーはその数字を当てるというシンプルなゲームだ。
Pythonコードはgame_logic.pyというファイルに保存する。このファイルには二つの主要な関数が含まれる。一つはgenerate_random_numberで、これは1から100までの範囲でランダムな整数を生成する役割を果たす。もう一つはcheck_guessで、プレイヤーの推測が正解の数字よりも小さい（"low"）、大きい（"high"）、あるいは正しい（"correct"）かを判定し、その結果を文字列で返す。もしプレイヤーの入力が数字でなければ、"invalid"と判定するエラー処理も含まれている。
これらの関数はゲームのルールそのものであり、ユーザーインターフェースとは独立して動作する純粋なロジック部分だ。
次に、このPythonで作ったゲームロジックと、後で作成するJavaScriptのフロントエンドをつなぐ方法を考える。Webの世界では、通常、ウェブサーバーと呼ばれるプログラムがこの仲介役を担う。ここではPythonのウェブフレームワークであるFlaskを使って、簡単なAPI（Application Programming Interface）を作成する。APIは、異なるソフトウェア間で情報をやり取りするための取り決めのようなものだ。
Flaskを使ったapp.pyというファイルを作成し、game_logic.pyで定義した関数をインポートして利用する。このFlaskアプリケーションは、特定のURL（この例では/guess）にアクセスがあったときに、特定の処理を実行するように設定されている。
特に重要なのは@app.route('/guess', methods=['POST'])という部分で、これはウェブブラウザから/guessというアドレスへPOSTリクエストが送られてきた場合に、make_guessという関数を実行するという意味だ。POSTリクエストは、ウェブページからサーバーへデータを送信する際によく使われるHTTPメソッドの一つである。
プレイヤーの推測は、リクエストの本体（JSON形式）としてサーバーに送られる。サーバーはそれを受け取り、check_guess関数を使って推測を判定し、その結果をJSON形式でウェブブラウザに送り返す。
ここでflask_corsライブラリも使われているが、これはCORS（Cross-Origin Resource Sharing）というセキュリティ機能に対応するためのものだ。簡単に言えば、異なる場所（この場合はローカルのHTMLファイルとPythonサーバー）から安全にデータのやり取りを許可するために必要な設定である。もしプレイヤーの推測が正解だった場合、次のゲームのために新しいランダムな数字が再生成される仕組みも組み込まれている。
ここまでのPythonコードは、サーバーが起動されると、指定されたポート（通常は5000番）でリクエストを待ち受ける状態になる。
いよいよ、プレイヤーが実際に操作する部分、つまりフロントエンドをJavaScriptとHTMLで構築する。これはindex.htmlというファイルに記述する。
HTMLはウェブページの構造を定義する言語だ。このファイルには、ゲームのタイトル、説明文、プレイヤーが数字を入力するためのテキストボックス（input要素）、推測を送信するためのボタン（button要素）、そしてゲームの結果を表示するための段落（p要素）が配置されている。CSSも含まれており、これらの要素の見た目を整えている。
JavaScriptは、このHTMLで構成されたページに動きと対話性をもたらす。index.htmlの<body>タグの最後に埋め込まれた<script>タグ内にJavaScriptコードが記述されている。
このJavaScriptの主な役割は次のとおりだ。
まず、HTML要素（ボタン、入力ボックス、結果表示部分）をJavaScriptから操作できるように取得する。
次に、プレイヤーが「Guess（推測）」ボタンをクリックしたときの処理を定義する。具体的には、ボタンがクリックされたら、入力ボックスに入力された数字を取得し、それが空でないかを確認する。
そして、取得した数字をPythonのバックエンドへ送信する。この通信にはfetchというJavaScriptのAPIを使う。fetch('http://127.0.0.1:5000/guess', ...)の部分がそれにあたる。これは、先ほどFlaskで作ったPythonサーバーの/guessエンドポイントに、POSTメソッドを使ってJSON形式でプレイヤーの推測を送っている。
サーバーからの応答（これもJSON形式）を受け取ると、JavaScriptはその結果（"low", "high", "correct", "invalid"）を解析し、それに応じてウェブページのフィードバックメッセージを更新する。例えば、「Too low! Try again.」や「You got it! 🎉」といったメッセージが表示されるわけだ。もし正解した場合は、入力ボックスの値をクリアする処理も含まれている。
最終的に、このゲームを動かすには、いくつかの手順が必要だ。
まず、自分のコンピューターにPythonがインストールされていることを確認する。
次に、ターミナルやコマンドプロンプトを開き、「pip install Flask Flask-Cors」と入力して、必要なライブラリ（FlaskとFlask-Cors）をインストールする。
Pythonのコード（app.pyやgame_logic.py）を適切な場所に保存し、ターミナルでpython app.pyコマンドを実行してPythonサーバーを起動する。サーバーが正常に起動すると、通常は「Running on http://127.0.0.1:5000/」のようなメッセージが表示される。
最後に、作成したindex.htmlファイルをウェブブラウザで開く。これでゲームのフロントエンドが表示される。
あとは、入力ボックスに数字を入力し、「Guess」ボタンをクリックするだけでゲームをプレイできる。JavaScriptがプレイヤーの入力をPythonサーバーに送り、Pythonサーバーがその推測を判定し、結果をJavaScriptに返し、JavaScriptがその結果をウェブページに表示するという一連の流れが体験できるだろう。
このように、Pythonでゲームのロジック（頭脳）を作り、FlaskでAPIを提供し、JavaScriptとHTMLでユーザーインターフェース（見た目と操作）を作るというアプローチは、今日の多くのWebアプリケーションやサービスの基盤となっている。バックエンドとフロントエンドという異なる役割をそれぞれの得意な言語で分担することで、効率的かつ拡張性の高いシステムを構築できることを、このシンプルなゲームから学ぶことができる。