Webアプリを作ってみよう

第8話 第6話のコードの説明

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

前書き

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

【第6話　初めてのプロジェクト編集(変数の表示・変更)】のサンプルを以下にアップしました。

https://aticlab.com/kakuyomu/webapp/test01/home/

　この投稿では、第6話のコードの内容について説明します。

・home.page.tsの構造

・データ定義

・データの表示

・データバインディングについて

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

home.page.tsの構造

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

　細かい所を話すときりが無いので、おおざっぱな説明です。

　まずblankをひな型にして作ったionicプロジェクトのソースコードが基本的な(しかし余分な部分の無い)作りになっています。

　このソースは3つの部分からなります。

・import　　　　　　　　：必要になった時に説明予定

・@Component　　　　　：触らなくても大丈夫

・export class HomePage　：最重要、Webアプリの本体

　importは色々なファイルから機能を”輸入”するのに使う部分で使う必要が出てきましたら説明しますので、今は忘れてください。

　@Componentは、使う必要が出てくる時は、それなりの上級者になっているかと思います。これもお忘れください。

　export class HomePageは、もっとも重要です。

　オブジェクト指向とかクラスとかいう言葉を聞いたことがあるでしょうか？

（二つ目の単語に"class"と書いて有りますね？）

　細かい事を抜きにして、この部分がプロジェクト（つまりWebアプリ）の"本体"になります。

　ですのでプロジェクト全体で使う変数や定数、関数をここで宣言すると覚えてください。

　この本体の中に、以下の表記があります。

constructor() {}

　これはコンストラクタと言う関数で、Webアプリを動かした時に、一番最初に一度だけ動く関数です。

　変数や定数はこのコンストラクタの上に書き、各関数はその下に書くと覚えておけば良いでしょう。

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

データ定義

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

　ここで一番重要な事は、上のexport class HomePage内で定義した変数や定数はWebアプリの画面に表示したり(変数なら)画面から変更出来たり出来るという事です。

　もし、これをJavaScriptだけで行うとすると簡単には行きません。なぜならば、画面上の項目とプログラム内の項目は完全に別なものなので、下の例のようになんらかのプログラムコードを書く必要があるからです。

画面のNameと言うテキストボックスの入力値

↓↑

やり取りするコードを自分で書く

↓↑

プログラムのName変数

　この画面とプログラムデータをやり取りするコードは、控えめに言っても、アプリでやりたい事ではないですよね？

　つまりionicとAngularを使ったプロジェクトでは、このような重要だけどアプリの機能とは関係ない部分を自動化してくれるわけです。

なお、これを知った瞬間、ゲームブックアプリにピッタリの機能だ！と私は思いました。実際、以前に書いたゲームブックアプリ(jQuery使用)をionic+Angularで書きなおすのは驚くほど楽でした。(以下に画面のデータとのやり取りが多かったかという事です)

　今回のサンプルでは、"home.page.ts"内で以下のように定義しました。

//変数を宣言しています

strPlaceHolder="なにか文字を入力してください！"

strText=""

strComment1="入力値："

strComment2="文字数："

strComment3="Go! Go! Go!"

//変数を宣言しました

　それぞれ以下のような目的で使われています。

・strPlaceHolder：テキストボックスに未入力の際に表示される文字列。

・strText ：プログラム保持データかつ画面入力・表示の文字列変数。

・strComment1 ：入力文字列のコメント文字列。

・strComment2 ：入力文字数のコメント文字列。

・strComment3 ：テキストボックスに5文字入力の際に表示される文字列。

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

データの表示

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

　次に"home.page.html"に使われているデータの部分についての説明を行います。

データを扱っている行のみを下に抜き出します。

１．strText およびstrPlaceHolder

<input type="text" size="30" [(ngModel)]="strText" placeholder={{strPlaceHolder}}>

２．strText およびstrComment1

<strong>{{strComment1}}</strong>

{{strText}}

３．strText およびstrComment2

<strong>{{strComment2}}</strong>

{{strText.length}}

4．strText およびstrText strComment3

<strong *ngIf='strText.length==5'>{{strComment3}}</strong>

１．は、2種類の方法でデータを表示しています。

　[(ngModel)]="strText" 　と言うのは、双方向バインディングと呼ばれる方法で”双方向”と言う名前の通り、表示だけでなく、このinputボックスに値を入力すると"strText"の値も入力値に自動的に変更されます。

　なおngModelのngModelは、このプロジェクトで使用しているフレームワーク(要は仕組み)Angularからの名称だと思われます。(プロジェクト作成時にngModelとstandaloneの選択をしたのを覚えているでしょうか？)

　{{strPlaceHolder}}は、もう一つの方法でhtml内で表示したいデータ名を"{{　}}"で囲む方法です。

　なおWebアプリの作成に限らず、プログラム一般で複数の種類のカッコが使われます。キーボード上の入力方法を記載します。(キーボードによっては若干違うかもしれません)

(　と　)：シフトキーを押しながら数字の８と９を押す

[　と　]：エンターキーの左横のキーを押す

{　と　}：シフトキーを押しながらエンターキーの左横のキーを押す

　２．は１．で説明済みの内容のみなので割愛します。

　３．は単なる変数の値ではなく、文字列の長さを表示させています。

{{strText.length}}

　ここでは文字列変数の長さを表示させましたが、表示可能な他のプロパティやJSONや配列の要素を指定して表示する事も出来ます。

　4．は単なる変数の表示ではなく、その値を条件に項目の表示・非表示をコントロールしています。

　日本語化すると『指定されている文字列の長さが5文字の時に作成表示する』となります。

　これについては似た機能を持つng-showと言う機能もあるので説明が必要です。違いは以下のようになります。

・ng-if　　：　条件がfalseの時、項目自体を削除

・ng-show ：　条件が真の時、表示する

　なかなか恐ろしい事が書いて有りますね、ng-if。

　実は、それほど問題の無い場合もあったりするのですが、複雑な構成のページを作っている時に致命的な問題(項目自体の再作成できなかった)を起こしたことがあるので、あまりお勧めは出来ません。

　次の投稿で解説予定の*ng-Forはゲームブックアプリでは多用しますが、いずれも存在を知っている程度で良いかもしれません。

　おそらく、この連載では同様の機能を持つ"[hidden]"(今後解説予定)が多くなると思います。(条件に合えば単純に非表示にする機能)

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

データバインディングについて

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

　上記の説明はAngularの重要機能であるデータバインディングについてのものです。

　データバインディングはAngularの強力な機能であるとともに、種類が多い上に混在する事も多くて初めての方は混乱するかと思います。

　私も熟知しているとは言い難いのですが、CSSスタイルを選んだり指定したイベントと起動する関数を結び付けたり便利な機能ですので、少しずつ覚えて頂ければと思います。

　当面は見様見真似で、自分で変更させて試していくのが学習の早道かもしれません。