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

第9話 初めてソースコードを見る

　【第8話　初めてのアプリ起動】で作成したプロジェクトソースを見て見ます

　今回の投稿の内容は

・ソースファイルを開く

　以上になります。

　項目は一つと少ないですが、確実に習熟したい内容です。(仮にシナリオの作成のみを行うとしてもです)

　ソースファイルを開いたり編集するには【第6話　VisualStudioCodeのインストール】でインストールしたVisualStudioCodeと言うツールを使います。

　このツールは単独のファイルを開いて編集する事も出来ますが、【第8話　初めてのアプリ起動】で作ったプロジェクトフォルダを開く事で真価を発揮します。

　Windows10やWindows11でしたらスタート＝＞すべてのアプリから見つかると思います。

　もし以前にこのツールを使ったことがあるならば、その時のまま、開いているかもしれません。その場合はファイルメニューから開いているフォルダやファイルを閉じ、リリース情報などのタブも閉じてください。

　また、もしメニュー等が英語表記になっていて、これを日本語表記に変更したいのならば、以下の操作を行ってください。

※VisualStudioCodeの表示を日本語表記にする

----------------------------------------------------------------------

　・Ctrl+Shift+Pを押す

　・displayと入力してフィルターをかけ”Configure Display Language”を押す。

　・各言語の中から日本語を選ぶ

　・Restart(再起動）して良いか聞いてくるのでRestartボタンを押す。

　・再起動する。(再起動後、上記設定が有効になる)

----------------------------------------------------------------------

　ファイルメニューから、フォルダを開くを選び【第8話　初めてのアプリ起動】で作成した C:\MyTest\GameBook01 と言うフォルダを開いて下さい。初めて開く場合は、フォルダ作成者の信頼についての質問がありますので、下記を参考にして信頼できるで進めてください。

※フォルダ作成者の信頼についての質問

----------------------------------------------------------------------

　もしこのフォルダを初めて開くならば、VisualStudioCodeはこのフォルダの作成者を信頼できるかと尋ねてきます。

　また、その画面の下のチェックボックスには、その親フォルダ(この場合、C:\MyTest)の作成者を信頼できるか？ともあるかもしれません。(いずれも初回のみ)

　どちらも信頼できる（Yes, I trust the authors）で進めてください。

----------------------------------------------------------------------

　次にVisualStudioCodeの画面の説明を行います。

　プロジェクトフォルダが開いたでしょうか？

　初めて開く場合は、タブは表示されず、左側にエクスプローラーバーにGameBook01直下のフォルダとファイルが表示されているはずです。

　エクスプローラーバーが表示されていない場合は、一番左のサイドバーの一番上のアイコンをクリックで表示できます。

※サイドバーの説明

----------------------------------------------------------------------

画面一番左端にサイドバーがあります。

この連載で主に使うのは上の2つ、エクスプローラーバーと検索バーの表示です。

該当アイコンをクリックで表示・非表示が切り替わります。

----------------------------------------------------------------------

　ionicのプロジェクトフォルダには数万のファイルが存在しますが、この連載で触るのは片手（せいぜい両手）で間に合う数のファイルだけです。

　エクスプローラーバーのGameBook01から数えて、上から6番目に"src"と言うフォルダがあるので、クリックして展開してください。（もう一度クリックで閉じます）

　さらに、その一番上にある"home"をクリックして開いてください。よく似た名前のファイルがあります。しばらくは、このうちの以下の３つのファイルのみを触ることになります。

・home.page.ts

・home.page.html

・home.page.scss

　いずれかのファイルをクリックするとファイルの中身が画面に表示されます。(複数のファイルをタブごとに表示できます)

※各ファイルの簡単な説明

----------------------------------------------------------------------

・home.page.ts

　拡張子のtsはTypeScriptを示します。

　JavaScriptの進化版とでも思ってください。

・home.page.html

　一見するとhtmlファイルに似ていますが、自動的なデータの表示やionicが用意した見栄えよく便利なコントロールを使えます。

・home.page.scss

　一見するとcss(あるいはscss)に似ていますが、ionic独自の設定が利用できます。

----------------------------------------------------------------------

　今回はVisualStudioCodeでプロジェクトのソースコードを見るところまで行いました。

　実際には、コマンドプロントからプロジェクトを起動しながら編集作業を行います。（VisualStudioCodeからも起動は可能ですが設定が必要になる場合もあり割愛）

　ソースコードの変更が短時間でブラウザに表示されているWebアプリに反映するので開発の効率は良いと思います。

　次の投稿に続きます。VisualStudioCodeはこのまま使いますので開いたままでも構いません。