ゲームブックアプリを作りましょう

第2話 開発環境について(2024.05.02時点の最新ツール)

　シナリオはとても大事ですが、プログラム開発と言う側面は無視できないので、まず開発のためにいくつかのツールをインストールして開発環境を整えたいと思います。(手間はかかりますがIT技術の裏側を垣間見れる経験になるかと思います)

　ネット環境とPCは必要ですが、これらのツールは無料でダウンロードできるものばかりです。

　ただし、各ツールはアップデートなどがありますので、インストールや動作が、ここに記載した情報と異なる場合もある事にはご留意ください。

　なお筆者の環境がWindows11なので、それを前提として書きますが、他のOS(Windows10、MacやLinux)であっても大きくは異ならないと思います。

(そのOS向けのインストーラーを選んでください)

※インストール前の注意事項

　以下の点にご留意下さるとより安全かもしれません。

・可能ならば作業前にPCのバックアップを取る

・これらアプリのインストール作業は予期せぬ(しかし必要な)アプリのインストールを伴う場合がある

・その場合でもPCの設定などでアプリの一覧をインストール日付順で見る事で何がインストールされたかが判るのでトラブルが起きた時のアンインストールすべきアプリの参考になるかもしれない

　少し脅かしたかもしれませんが、問題の起きるリスクは0ではありませんので適度の緊張感と慎重さは必要です。（もっとも、私も先日経験したOSのアップデートトラブルのようにほぼ手の打ちようがない問題よりはましかもしれませんが）

　まず使用する４つのツールをインストールする順番に紹介します。具体的なインストールについては、それぞれ投稿を分けて行いますので、そちらをご参照ください。

１．Node.js

　初めにインストールするツールです。

　とても多才なツールですが、ここでは以下の機能を使います。

　・ネットから色々なツールや機能を取り込む

　・手元のPCを仮想Webサーバとして動かしアプリの開発テストを行う　

　なお、ほぼ2年ぶりにインストールしたのですが、このバージョン、インストール時に注意点が増えましたので少し注意が必要だと思います。(私は気づかずインストールして、正しく動くまでにかなりの時間を取られました）

２．Ionic CLIのインストール

　二番目にインストールするツールです。

　ionicはWebアプリのエンジン部分に該当します。

　例えば、アプリ内のデータの扱いについて考えましょう。

　ただのJavaScriptで生年月日から計算した年齢を表示するならば

・画面に生年月日を表示します

・ユーザーが表示している生年月日を変更します

・プログラムに変更した新しい生年月日を取り込みます

・生年月日からあらためて年齢を計算します

・計算した年齢を画面に表示します

　と言う手順になるかと思います。

　お気づきかと思いますが、画面とプログラムでやり取りしている”生年月日”は同じ値ですので、やり取りの部分を自動化できればより単純な作業になります。

　ionicは、まさにこのやり取り等を自動化します。

（画面の表示データとプログラムのデータを同一のものとして扱う仕組み）

ionicを用いた手順では

・画面に生年月日を表示します

・ユーザーが表示している生年月日を変更します

・年齢を(自動的に)変更して表示します

　となります。

　ゲームブックの例で考えれば、さらに単純で

・ボタンを押して新しいページに移動します

・新しいページを表示します

　だけで良いので、いかにゲームブックアプリに適したエンジンかが判るかと思います。(フラグチェックなどが入ればもう少し複雑になりますが)

３．Gitのインストール

　Gitは色々なファイルの変更履歴を管理するツールです。プログラミング以外の分野でも使われているようですね)

　特に複数の人が同じプロジェクトのデータを使って作業する場合、威力を発揮すると思います。

　個人的には一人で作業している分にはGit機能使いませんが、使う方も居るでしょうし何よりインストールしないで問題が起きると手に負えなくなると困るのでインストールします。

なおGit機能不要の方は”VisualStudioCode　Git無し”で検索をかけるとヒントが見つかるかも？

４．VisualStudioCodeのインストール

　ソースコードを編集するのに使いますが、とても便利です。

　公式からダウンロードしますが、注意点としては、VisualStudioと言うものもあるという事です！

（どちらもMicroSoft社製ですが、Code無しの”VisualStudio”は有料かつ用途が違う）