開発環境を決定：パズルプログラミング『okoze』の制作プロセスを公開
本記事は、パズルプログラミングゲーム「okoze」を開発するための具体的な開発環境と技術スタックを詳細に解説しています。筆者は、この連載を通じて、AIをプログラミングのパートナーとして活用しながら、Webアプリケーション開発の過程を記録していくことを目的としています。
「okoze」の形式を考慮し、開発環境は「Webアプリケーション」として決定されました。これは、複数のOS向けに別々のバージョンを用意する必要がなく、GitHub Pagesを通じて読者がソフトウェアをインストールすることなく、その時点のデモを実際に動かせるという大きな利点があるためです。
具体的な開発環境の構成要素は以下の通りです。開発マシンにはMac mini M4を使用し、プログラミング言語は初期段階でJavaScriptを採用し、将来的な拡張性を見越してTypeScriptへの移行を計画しています。開発ツールとして、Web開発で広く使われるVisual Studio Code（IDE）と、調査・デバッグに便利なChromium系のブラウザを使用します。グラフィックスの主要部分は、最初はブラウザ標準のCanvas APIを直接利用し、プロトタイプを構築します。バージョン管理にはGitとGitHubが用いられ、単なるコード置き場としてだけでなく、開発の各段階が完了するたびにGitのタグを付与し、その時点の「okoze」のデモ（Live Demo）として公開する仕組みを構築します。
さらに、開発プロセスにおいてAIを積極的に利用することが重要な実験要素として組み込まれています。筆者はCADや幾何処理が専門分野であり、Webアプリケーション開発経験は少ないことを開示しており、この連載では、Web開発における基本的な概念や素朴な説明が多く含まれる可能性があると述べています。この包括的な開発環境の構築と、AIを活用した開発の記録が、今後の連載の柱となります。
背景
本記事は、筆者が「okoze」というパズルプログラミングゲームを開発する過程を読者に公開する連載記事の一部です。開発環境の決定は、単に技術選定を行うだけでなく、AIとの協業や、開発の過程そのものを記録・共有するという、教育的かつ実験的な側面を持っています。
重要用語解説
- Webアプリケーション: インターネットブラウザ上で動作するアプリケーションのこと。インストール不要で、多くの環境で動作しやすく、今回のokozeの公開形式として最適と判断されました。
- Canvas API: HTML5で提供される、ブラウザ上で2Dグラフィックスを描画するためのAPI。初期プロトタイプでは、外部ライブラリを使わず直接利用することで、基本的な動作確認を行う目的があります。
- TypeScript: JavaScriptに静的型付けの機能を追加した言語。プログラムが大規模化し、複雑なロジックを持つようになった際に、開発の堅牢性を高めるために非常に有用な言語です。
今後の影響
本プロジェクトは、AIを単なるツールとしてではなく「プログラミングのパートナー」として位置づけ、その協業プロセスを可視化するという点で注目されます。この手法は、今後のソフトウェア開発教育や、AIを活用した開発ワークフローの新たなモデルケースとなる可能性を秘めています。