✅ はじめに
前回の記事では、Javaで「数当てゲーム」を作成しました。
前回の記事はこちら👇
そのときにふと、こう思いました🤔
これ、ブラウザでも動かせるのでは？
Javaはコンソールで動くプログラムですが、
JavaScriptを使えばブラウザ上で動かすことができます。
そこで今回は、Javaで作ったロジックをJavaScriptに移植してみました。
📝 結論
設計が理解できていれば、言語が変わっても応用できる
実際にやってみると、
書き方は違う
でも考え方は同じ
ということに気づきました。
🔗 JavaとJavaScriptの対応関係
まずは、ざっくりと対応関係を見てみます。
| Java | JavaScript |
|---|---|
| Random | Math.random() |
| Scanner | inputフォーム |
| while | イベント処理 |
| Map | オブジェクト |
| メソッド | 関数 |
「役割」はそのままで、「書き方」だけ変わります。
⚖️ 実際に比較してみる
🎲 ランダム数生成
🔹Java
Random random = new Random(); int answer = random.nextInt(100) + 1;
🔹JavaScript
answer = Math.floor(Math.random() * 100) + 1;
やっていることは同じです
「1〜100のランダムな数」を作っています
🔍 大きな違い（ここがポイント）
🔸Java：ループで進む
while (true) { // 入力 → 判定 }
🔸JavaScript：イベントで進む
button.addEventListener("click", () => { // 入力 → 判定 });
Javaは「流れをループで回す」
JavaScriptは「操作されたときに動く」
ここが最初に戸惑うポイントでした。
⚠️ 実装でつまずいたところ
なぜwhileが使えないのか？
JavaScriptでもwhileは使えますが、
画面が固まる（フリーズする）可能性があります
そのため、ユーザーの操作をきっかけに処理する「イベント処理」に変更する必要があります。
🟦 状態管理が必要になる
Javaではあまり意識しなかったのですが、
JavaScriptでは、
let answer; let count; let gameFinished = false;
状態を定義することが重要になります。
「今どんな状況か」を覚えておく必要があります。
たとえば、
答えの数字は何か（
answer）何回試したか（
count）ゲームが終わったか（
gameFinished）
これらをまとめて「状態」と呼びます。
なぜかというと、JavaScriptはブラウザ上で動くため、
ユーザーの操作に応じて処理が少しずつ進むからです。
🤔 設計の気づき
今回、一番大きな学びはこれです。
🔍 ロジックと見た目は分けるべき
✅ Javaの場合
ロジックだけを書けば動く
✅ JavaScriptの場合
処理（ロジック）＋画面（UI）を組み合わせて動く
でも、やっていることは同じです。
「数を当てる」「判定する」といったロジックは共通しています。
「どう動くか」を理解していれば、 「どう見せるか」にも応用できる。
つまり、
「設計（考え方）」が同じであれば、言語が変わっても再現できる
これが今回の一番の気づきでした。
💻 完成イメージ
ブラウザ上では、
難易度ボタン
入力フォーム
ヒント表示
回数表示
これらのUIを使って、ゲームを操作できるようになりました。
🎮 デモ
実際に遊べるデモはこちら👇
🎯 まとめ
📝 今回の学び
・ロジックは言語を超える
・
JavaとJavaScriptは考え方が共通している・イベント処理という新しい考え方を学べる
・設計が理解できると応用できる
最初は「JavaのコードをJavaScriptに移せるの？」と不安でしたが、 実際にやってみることで、理解が一気に深まりました。
今回の取り組みを通して、「ゲームを作る」だけでなく、 「どう応用するか」という視点を持つことができました。
コンソールで動くプログラムが、 ブラウザ上で“体験できるもの”に変わる。
そんな変化を実感できたことが、一番の収穫でした。
🎮【Javaの数当てゲームをJavaScriptに移植】シリーズまとめ
Javaのコンソールで動いていた「数当てゲーム」を、ブラウザ上で動く
JavaScriptへと移植（お引っ越し）していく開発の記録です。まずは
Javaでの基本的なゲームの作り方からスタートし、いざJavaScriptへ書き換えた際に直面した思わぬバグやエラー、そしてその解決策までを綴っています。初学者がつまずきやすい「言語の違いによる壁」をどう乗り越えたのか、プログラムと対話しながら進めたリアルな試行錯誤のプロセスをまとめてみました。
【プロフィール・作品置き場】
Javaの学習記録や、ビジュアルノベル風のオリジナルAI楽曲などをポートフォリオで公開しています！
