ionicを試す ４日目 プログラムを動かして文字を変更する
ソースコードの変更はわずかですが、説明が長くなります。
前回までにionicプロジェクトの以下の2つのファイルの変更をしました。
表示を担当するファイル
"src\app\home\home.page.html"
スタイルを担当するファイル
"src\app\home\home.page.scss"
今度は、機能を担当するファイル"src\app\home\home.page.ts"に変更を加えたいと思います。
(なお比較的単純なアプリでしたら、この3つのファイルの変更のみで作れると思います。)
まず"src\app\home\home.page.ts"の中を見て見たいと思います。
------------------------------------------
import { Component } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
constructor() {}
}
------------------------------------------
"html"や"css"と違い、よく判らない事が書いて有りますね。
なんとなく覚えるだけでも、今後調べものをする役に立つかと思いますので、ごく簡単に説明します。
1行目：'@angular/core'から'Component'機能を使うためにインポート(輸入)する。
angularと言うのは、このプロジェクトを作る時に使った最後の"--type=angular"の事です。
これは様々な機能の詰め合わせ(フレームワークと呼びます)で、その中の主要な（つまりcore）機能である'Component'機能を使うための宣言です。
3～7行目：1行目でインポート宣言をした'Component'機能の定義をしています。
'selector'と言うのは、他所から呼ぶ時の名称(山口さんちのつとむ君ならば、山口さんに相当)の事で、もう少し複雑なアプリで使います。
・'templateUrl'は表示を担当するファイルを示しますが、すでに触ってます。
・'styleUrls'もスタイルを担当するファイルを示し、これも触っていますね。
8～12行目：'HomePage'と言うクラスの定義を行います。
(先頭の'export'は他所のプログラムが'import'出来るよと言う宣言です)
アプリの機能をここで記述する事だけは覚えてください。
さて、さっそくアプリで表示される文字を変更してみたいと思います。
"src\app\home\home.page.ts"の'HomePage'クラスの定義部分を以下のように変更します。
------------------------------------------
export class HomePage {
//表示文字列の変数
dispText:string;
constructor() {
//表示文字列のセット
this.dispText = 'プログラムからセット';
}
}
------------------------------------------
まず、表示文字列の変数を定義します。
"dispText"と言うのが名前で、string型(文字列を入れる時に使う型)です。
型にはいくつも種類がありますが、
・string 文字列を入れる
・number 数値を入れる
・boolean trueあるいはfalseを入れる
で、かなりの部分はカバーできると思います。
次に、"constructor()"の下の行を見ます。
constructor(コンストラクタと読む)ですが、これは特別な関数で、クラスが呼び出されるときに最初に一回のみ動きます。
その中で、先ほど定義した変数に値をセットします。
------------------------------------------
//表示文字列のセット
this.dispText = 'プログラムからセット';
------------------------------------------
頭に'this.'とついていますが、これはこのクラスの中で宣言したモノを使う時の約束と思ってください。
これで"src\app\home\home.page.ts"側の変更は終わりです。
次に"src\app\home\home.page.html"を以下のように変更します。
------------------------------------------
<ion-content [fullscreen]="true">
<div id="container">
<p>{{dispText}}</p>
</div>
</ion-content>
------------------------------------------
前回、”初めてのionic”と書いた部分を”{{dispText}}”に変更します。
これは、この部分に"src\app\home\home.page.ts"で定義した変数"dispText"の内容を表示せよと言う指示を意味しています。
2つのファイルをセーブして、ブラウザアプリの表示を見ましょう。
コマンドプロンプトを起動して以下の２つのコマンド入力してください。
(すでに起動しているならば不要です)
------------------------------------------
"cd c:\MyTest\test000"
"ionic serve"
------------------------------------------
”プログラムからセット”と大きく表示されていますね。
変数の内容を表示したい位置に表示する。とてもシンプルで魔法のようです。
説明が長くなりましたが、今回はここまでとします。
