Webアプリを作ってみよう

第5話 プロジェクトの編集をする前に

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

＊＊＊　重要　＊＊＊

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

　前の投稿でプロジェクトの作成タイプにangular-standaloneを選んでいます。

　しかしながら、その後のテストで、このタイプは比較的初心者である私には荷が重すぎる(というか対応が出来ない)事が判りました。

　具体的にはブラウザ画面とプログラムの双方でデータの変更を行える双方向バインディングの部分がうまく行きませんでした。分離された機能をインポートすれば出来るかとは思うのですが、短期間で使えるのは無理と判断。

　今後、私の習熟が進めば追加する事はあると思いますが、しばらくはstandaloneタイプのangularには手を出さない予定です。

　ですので、ここまでの部分では問題ありませんが、以後のプロジェクト開発は、standalone抜きのangularで行います。

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

前書き

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

　プロジェクトの編集を行う前に、ある程度知っておいた方が良いと思われる情報をまとめました。

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

プロジェクト内のファイルについて

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

　前の投稿で初めてのionicプロジェクトの作成を行いました。

　しかし、文頭で書いたようにstandalone抜きのangularで新しいプロジェクトを作成する事にします。

　コマンドプロンプトを立ち上げ、以下のコマンドを打ちこんでください。

　cd c:\MyTest

　ionic start test01 blank --type=angular

　しばらくすると、NgModuleとstandaloneのいずれかを選択してきますので、上下の矢印キーでNgModulesを選択した上で(既定の値です)エンターキー押下で処理を進めてください。

　? Create free Ionic account? (y/N)と言う質問が来ますが、nを入力して処理を進めれば、処理は終了し、コマンド入力待ち状態になります。

　以下のコマンドで、今、作成したプロジェクトフォルダをカレントディレクトリに変更してください。

　cd .\test01

　ここで作られたプロジェクト名を持つフォルダの中には、数多くのサブフォルダとファイルが作られています。(ファイル数: 42,938、フォルダー数: 5,239)

　しかし当面は同じサブフォルダ内の2つのファイルのみを変更する予定です。

　よく使うファイル3つを以下に示します。

　・HTMLに相当するファイル(画面内のコントロールの配置)

　　test01\src\app\home\home.page.html

　・JavaScriptに相当するファイル(Webアプリのプログラム部分)

　　test01\src\app\home\home.page.ts

　・CSSに相当するファイル(配色や余白などデザイン設定)

　　test01\src\app\home\home.page.scss

　上記以外の他のファイルについては、例えば、デバイス上にデータを保存したり読み込んだりする機能のサンプル紹介などで、それ以外の設定ファイルを使う(数行の追加)予定ですが、とりあえず考えなくても大丈夫です。

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

ファイルの変更時の挙動について

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

　コマンドプロンプトで、ionicプロジェクトを起動(ionic serveコマンドの実行によりWebアプリがブラウザに表示されている)した状態で上記のようなファイルを変更した場合の挙動について説明します。

　もしコンパイルエラーの無い変更が行われた場合、ブラウザに表示されているWebアプリは再読み込みされ、変更が反映されます。

　この機能によりストレスの少ない開発が可能になります。

　なお余談になりますが、ファイルの変更はメモ帳で行っても、あるいはバックアップしたファイルで現行のファイルを上書きしてもWebアプリは再起動します。

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

3つのファイルについての簡単な説明

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

　上の【プロジェクト内のファイルについて】で取り上げた3つのファイルについて、もう少しだけ説明を加えます。

・home.page.htmlについて

　拡張子はhtmlで書いて有る内容もhtmlに似てはいますが、中身は別物です。

　簡単な記述で表示内容(データやメッセージなど)やデザインを状況に応じて自動的に変更する事が出来ます。

　例えば、私が作っている(しかし、いつまでたっても終わらない)プロジェクトにゲームブックアプリがありますが、一つのWebページで異なるページデザイン(選択肢から選んだりサイコロを振ったり)を表示することが出来ます。

　JavaScriptとは異なる頭の使い方が必要になるファイルです。

・home.page.ts

　拡張子のtsはTypescriptから来ています。

　TypeScriptは、規則の厳しいJavaScriptと思うのが判りやすいと思います。

　書いたことがある方なら同意してもらえると思いますが、JavaScriptは良くも悪くもいい加減に手早く書くことが出来ます。

　これがメリットになる事も無いとは言いませんが、予期せぬ動作を起こした時、原因究明や修正にかなりの時間を割く事を覚悟した方が良いです。

　TypeScriptの厳しさは、転ばぬ先の杖になると思います。

・home.page.scss

　まったく同じとは言いませんし、ionic独自部分もあるのですが、上の2つに比べるとCSSファイルやSCSSに近いと思います。

　ただし筆者はCSS(そしてSCSS)は初心者レベルなので話半分に聞いておいてください。

　配色テーマなどを統一的に使う場合、かなり役に立つように思います。

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

VisualStudioCodeについての簡単な説明

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

　ここではプロジェクトの編集ツールにVisualStudioCodeを使います。

　インストールについては、【第2話　開発環境を整える】で説明済みです。

　VisualStudioCodeはファイルあるいはフォルダを開きますが、ionicプロジェクトの編集はフォルダを選択して開きます。

　VisualStudioCodeで初めてフォルダを開く時、このフォルダを信頼できるかと聞いてきます。

　また、その画面の下のチェックボックスには、その親フォルダ(この場合、C:\MyTest)を信頼できるか？と記載があります。

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

　実際の使い方は以降の投稿で行います。