Phaser4入門【開発環境構築編①】Node.jsをインストール
Ａ子
Ｂ美
Ａ子の無茶ぶりが…（苦笑）
Ｃ菜
【CakePHP5入門】で学んだので、PHPのコードだったらある程度は書けますよ～
（筆者注：時系列的には、【CakePHP5入門】のあとの話だと考えてください）
Ａ子
Ｂ美先生！
Ｂ美
特にアクション系のゲームの場合、JavaScriptと組み合わせる必要があるしね
（ブラウザソフト上に実行結果を表示する場合…）
Ａ子
あとド素人でも作れるような開発環境が欲しいね
そんなのがあるかどうかすら知らんけど（笑）
Ｂ美
有名なところだと【Unity】かな？
Ｃ菜
たしか言語はC#じゃなかったですかね～？
Ｂ美
2Dゲーム、いえ3Dゲームであっても割とお手軽に作れるゲームエンジンなのよね
Ａ子
Ｂ美
PC用はもちろんのこと、スマホアプリやブラウザゲームであっても作れるわよ
Ｃ菜
パラパラと立ち読みしたくらいですけど～
Ｂ美
覚えなきゃいけないことは多いかな
Ａ子
Ｃ菜
Ｂ美
ブラウザゲームオンリーで良ければ…だけどね
Ａ子
てか、ブラウザゲームってあれだよね
EdgeやChromeなんかのブラウザソフト上ですぐに遊べるゲームで、ダウンロードやインストールが要らないやつ
Ｃ菜
スマホ用の無料ゲームアプリは広告表示がめっちゃうざいし、PC用だとウイルスが怖いからあまりインストールしたくないです～
なので、ブラウザゲームだったらお手軽に遊べて良いと思いますよ～
まぁ、あまり本格的なやつは作れないでしょうけど～
Ｂ美
Ａ子
「インディー」って同人ってことだよね？
ただ、ちょっとこのサイトを見てみたんだけど、ここにあるゲームってほとんどが英語表記みたい（苦笑）
（英文を読みたくねぇ）
でも、なかなかすごいよね
（公開されているゲームの数が…）
Ｃ菜
（モチベーションを維持するためにも…）
Ａ子
Ｂ美
Phaser3の時代はあんまり注目されてなかったんだけど、バージョンが上がってからは結構注目されるようになったゲームエンジンね
Ｃ菜
Ｂ美
さっきＡ子が言ってた「最初から最後まで生成AIだけを使って完成させられる」開発環境ってわけ
（言い換えれば、多くの生成AIは「Phaser」に関する知識をめっちゃ持ってるのよ）
Ａ子
それって人間はプログラミングしなくても良いの？
Ｂ美
まぁ、画像や音楽といった素材に関しては人間が用意してあげなきゃいけないんだけど、動作を記述するプログラム自体については（人間は）全くノータッチでいけるわよ
（別に人間が手作業でプログラムを修正しても構わないし、逆に画像や音楽等の素材を生成AIで作ることもできるけどね）
Ｃ菜
Ｂ美
まぁ、TypeScriptを使うほうがよりベターだけど…
Ａ子
Ｂ美
JavaScriptを拡張したプログラム言語とも言えるかな
（筆者注：正確には「動的型付け言語」と「静的型付け言語」の違いです）
大規模なコードを記述するんだったら、JavaScriptよりもバグを発見しやすいと思うし、ゲーム開発には（多分だけど）向いてると思う
（別に、JavaScriptで記述しても良いんだけどね）
Ｃ菜
ここまでの話をまとめると～
|
１．ブラウザゲームオンリーならば【Phaser4】、様々な環境で動く本格的なゲームを作りたいなら【Unity】
２．【Phaser4】で使うプログラム言語はJavaScript（またはTypeScript）で、【Unity】ではC# ３．【Phaser4】は生成AIとの親和性が高い |
…ってことでしょうか～
Ｂ美
まぁ、私のお勧めは【Phaser4】かな
（ただし関連書籍が全く無いし、日本語解説サイトもほとんど無いってのが少し大変なんだけど…）
Ｃ菜
逆に言えば、Unityについてはわざわざここで解説しなくても良いってことになります～
Ａ子
「車輪の再発明」になるもんね（苦笑）
んじゃ、結論だけど【Phaser4】によるゲーム開発を行うってことでOK？
Ｂ美
とは言っても、開発環境の構築さえ終えてしまえば、あとは「生成AI」頼みなんだけどね（苦笑）
Ｃ菜
まさか【CakePHP5入門】のようにOS（Linux）のインストールからですか～？
Ｂ美
まずは「Node.js」をインストールするところからね
Ａ子
その拡張子（js）って、JavaScriptかな？
Ｂ美
ただし、通常のJavaScriptのプログラムがクライアント（ブラウザソフト）上で動作するのに対して、「Node.js」ではサーバ上で動作するって違いがあるの
Ａ子
意味わからん…
Ｂ美
要するに、（ブラウザ上ではなく）OSの直上でJavaScriptで書かれたプログラムを実行できるってわけ
Ｃ菜
Ｂ美
あと、【Phaser4】を実行確認（テスト）するときってWebサーバが必要なんだけど、「Node.js」はその機能（Webサーバ）も提供してくれるわ
Ａ子
だからWindows上でも開発できるのか…
てか、拡張子が「js」ってことは「Node.js」自体もJavaScriptで記述されてるの？
Ｂ美
「Node.js」自体はコンパイル済みの実行ファイル（マシン語）よ
JavaScriptで書かれたコードを実行するためのランタイム（実行環境…動かすための土台）と言っても良いかもね。
Ｃ菜
Ｂ美
（CPUタイプとOSの種別は自分の環境にあったものを選択すること）
Ａ子
「node-v24.21.0-x64.msi」ってファイル名で保存した
（筆者注：2026年10月時点の最新版です）
Ｃ菜
Ｂ美
もしも以前、古いバージョンの「Node.js」を入れたことがあるんだったら、それをアンインストールしてからのほうが良いかもしれないわ
（まぁ、おそらくはアンインストールしなくても大丈夫だとは思うけど、念のためね）
Ａ子
んじゃ、さっそくやってみよう
インストーラー（「node-v24.21.0-x64.msi」）をダブルクリックしてっと…
↓
↓
↓
↓
Ｂ美
そこにチェックを入れると、インストールが終わったあとに（勝手にPowerShellが起動して）PythonやVisualStudioのネイティブツールをインストールしちゃうわよ
（かなり時間がかかるかも…）
Ｃ菜
Ｂ美
てか、【Phaser4】の開発においては不要だからチェックをはずしちゃっても良いわよ
（別に、付けたきゃ付けておいても良いんだけど…）
Ａ子
（てか、もともとデフォルトではチェックされてなかったんだけどね（苦笑））
↓
↓
Ｃ菜
Ｂ美
コマンドプロンプトを起動してから、こう打ち込んでみてね
| > node -v[Enter] |
バージョンが表示されれば成功よ
Ａ子
大丈夫っぽいね
Ｂ美
| > npm -v[Enter] |
こちらも確認しておきましょう
Ｃ菜
Ｂ美
ほら、LinuxのDebianでは「apt」ってコマンドを使ったでしょ？
ああいうやつね
Ａ子
分かったよ
「npm」を使って【Phaser4】をインストールするんじゃない？
Ｂ美
正確には、「npm」を使って『プロジェクト作成ツール』を呼び出して、対話形式で選択していくと勝手に新たなプロジェクトが作られるの
で、そこ（新たなプロジェクトの作業ディレクトリ内）には自動的に【Phaser4】が組み込まれているってわけ
（なお、プロジェクトごとにそれぞれ個別の【Phaser4】を組み込むから、一度インストールすれば終わりってわけじゃないわよ）
Ｃ菜
Ｂ美
要するに【Phaser4】というのは「CakePHP」のような「開発フレームワーク」なのよ
「CakePHP」が『Webサーバ上で動作するWebアプリをPHP言語で記述するためのフレームワーク』
であるのに対し
【Phaser4】は『ブラウザソフト上で動作するゲームアプリをJavaScriptで記述するためのフレームワーク』
…ってわけ
ほら、「CakePHP」もcomposerで新たなプロジェクトを作成したとき、それぞれのプロジェクトごとに「CakePHP」の中核部分が作られたでしょ？
それと同じよ
Ａ子
すっきりと理解できたよ
んじゃ、さっそくテストプロジェクトを作ってみよう！
Ｂ美
でも、少し長くなっちゃったから、今回はここまでにしておきましょう
次回は【Phaser4】のテストプロジェクトを作って、実際にブラウザ上で動かしてみるからお楽しみに！
Ｃ菜
