list.thmlを調べる。Listを表示してみましょう。一覧が表示され、タップすると詳細ページへ移動します。このページを表示するファイルは/src/page/listlistにすべて入っています。データバインディングを覚えるこのリストがどこで作られているかを説明する前に、タイトルを変更してみましょう。List</ion-title>を変更すれば簡単なのですが今回は少し回りくどい変更の仕方を行います。{{変数名}}で囲む<ion-title>{{mytitle}}</ion-title>私の場合mytitleという変数名にしました。{の下の行にmytitleの変数を設定します。=”タイトル名”;となります。これで保存するとlist.htmlで設定した{{mytitle}}がlist.tsで設定した変数の文字列に置き換わります。これをバインディング、またはデータバインディングと言います。データバインディングとはデータバインディングはコンポーネントにおいてテンプレートとクラス内の要素を繋ぐ仕組みです。classの中に設定した変数はhtmlファイルとtsファイル(コンパイル後にはjs)間でデータ(値)を共有することが可能になります。その為list.tsで設定した文字列がhtmlに表示されます。ちなみに、共有できるということはhtml側からも操作可能という事です。formの値を変えるとts側の値も置き換わるなど。list.thmlを調べる。バインディングの説明も終わったところでさらっとhtml側を見ていきましょう。今回説明する箇所はこちらです。item)”>これは前回やったngForのループですね。~~>から</button>までitemsの分繰り返されると見て良いでしょう。item-left></ion-icon>この記述はionicが提供するアイコンファイルを決めています。name=の値で出力するアイコンを決めています。ループするのでここは入っている値次第で{{item.icon}}の中身が変わります。item-leftをつけることで左寄せにしています。ionicのアイコンはこちらから見れます{{item.title}}は、前回もやりましたがitemの中にtitleオブジェクトが入っているのでしょう。{{item.note}}</div>こちらに関してはdivタグで囲み、item-rightの属性をつけることで右寄せにしているようです。その中に、item変数に入っているnoteの値を表示している。これで全部説明が終わった気がします。分かりやすいようにSS撮りました。{{item.icon}}、{{item.title}}、{{item.note}}を頭に入れてlist.tsを見ていきましょう。見るべきポイントはlist.tslist.tsを開いて少しずつ見ていきましょう。string[];で、iconsを定義します。items変数を定義して、中に入る型を決めます。string}>title、note、iconすべて文字列で宣言してますね。その下を追ってみます。}}constructorの下から見ていきましょう。this.iconsに文字列をセット、合計10これが<ion-icon>にセットされてブラウザに出力した時にアイコンに変換されます。this.itemsをセットして、for文を見ていきましょう。{for文はngForと同じ感じで繰り返しです。letでiを定義、iの中に1を設定します。最後にiに1を追加)最初にiに1が入ってるので、1からカウントしていって、10まで繰り返します。ならないので10回繰り返した時点で終了です。{}の中を見ていきますね。this.items.push({pushは末尾に追加すると言う処理なので、itemsの末尾に追加していく、となります。i,itemsのtitleにItemとforで定義したiの中身が入ります。1回目の時iは1、5回目のループで5が入ります。8回目のループでtitleに入るのはItem8が入りますね。htmlで表示される個所は{{item.title}}になります。i,こちらも同じ様にiの数字が入ります。list.htmlの{{item.note}}の箇所に当ります。this.icons.length)]先にlist.htmlのどこかと言うと{{item.icon}}になります。this.iconsに入るのですが、Math.floorからすべてjavascriptの記述ですね。Math.floorデータバインディングとはMathオブジェクトのfloor()メソッドは、小数点以下を切り捨てます。★JavaScriptリファレンス小数点以外を返すと言うことですね。this.icons.lengthこの中身で、小数点を切り捨てたものを返します。Math.random()は0以上1未満のランダムな数値を返す。'build'];ここのthis.iconsで設定した数を数えて出力しています。buildiconsには10の文字列が入っています。this.icons.lengthには10が入ります。10)小数点切り捨てになります。これなら出てくる数字は0~9に限定されます。1は未満なので含みません。ここで注意しなければいけないのはthis.icons.lengthでは単純に数えて10個有ると出力しますがthis.iconsの配列に入っているキーワードの呼び出しは1~10ではありません。配列は0から計算します。2番にbeerが入っています。ここら辺は基本だよね。this.iconsの[何番目の数字]と言う風に指定しているのでthis.iconsでセットした0番目~9番目の文字列の中から該当する文字列をiconにセットします。this.icons[3]と、具体的に数字を直接書いてやっても良いです。この場合はiconにはiconsの3番に該当するfootballが入ります。上の様に直接指定した場合には全部がfootballのアイコンに染まります。データを追加してみようでは、itemのデータを追加してみましょう。list.tsのfor文で何回ループするかを追加してやればいいだけです。11より小さければなので10回繰り返していました。今回は15回繰り返してデータを作ってみましょう。for文の中のtitle、note、iconのデータも15回セットされます。中には15のデータが入ることになります。詳細ページの確認item-datelistリスト一覧からどれでも良いのでタップすると、簡単なリストの詳細ページを開きます。このページは/src/page/item-datelist/が該当します。item-datelis.htmlから見ていきましょう。言っても特に見るところは無いですね、list.htmlのように変数を受けとり表示しているだけです。今回はループもなにも有りません。唯一見るところと言えば、{{selectedItem.title}}selectedItemが変数名になっているんだな、と言うところでしょうか。item-datelis.tsを見ていきます。短いので全部張り付けます。}}コメントアウトにはこうかかれています。any;で変数を決めているまでは良いですよね。item-details.htmlにあったselectedItem.titleが無いんですが...でもページにitemが出ている。何が起きているかと言うと、item-detailsのページはlist.tsのリストデータからデータ(パラメーター)を受け取ってページを表示しています。}この部分になります。this.selectedItemにnavParams.get(‘item’);を入れていますね。navParamsってなんぞ詳細はここに書いてます。navParamsNavParamsは、ページ上に存在するオブジェクトであり、その特定のビューのデータを含むことができます。navParamsは別ページから送られたのパラメータの受け取りに使用します。その機能はどれが提供してくれているの?と思いますよね。ページ遷移はionic-angularが提供してくれるnavParamsでデータを受けってselectedItemに代入しているのはわかったけどnavParamsはどこで定義してるのかソースを見ればすぐわかると思います。意味合いは、NavParamsと言う機能をnavParamsと言う名前で使います。覚えにくければ自分で変えても良いですが、人が見てもわかる名前にしましょう。極端に書けばこれでも動きます。uketoriParams.get(‘item’);となります。有る程度慣れてくれば簡単ですね。'ionic-angular';ionic-angularが提供してくれています。これで受け取り側はパーペキですね。今度は送り側を見ていきます。list.tsへ戻りましょう。見るべき箇所はここです。item)と書いているのでitemTappedの名前は何でもokです。eventとitemを引数に持っているのでタップ、クリックした値(パラメーター)を持ってページを遷移します。this.navCtrl.pushnavCtrlはitem-datelisでも出てきました。{constructorで使用する名前を決めています。これもsousinCtrlとかでも動きますよ。navCtrlにpushをつけてやり、パラメーターの送信を定義します。ちなみにpopというのもあります。this.navCtrl.push(送るよ)(ItemDetailsPage(どこへ),{item:item(何を)}最初のitemは受け渡し名なので分かりにくければitemd:itemなどにして、item-datelis.tsの方でnavParams.get(‘itemd’);等にしましょう。これだとitemのtitleもnote、iconすべてを持っていくみたいです。今調べているんですが、一部だけ持っていきたい場合どうすれば良いんだろう?titleだけ持っていきたいとか。今回でページ作成から簡単なテキスト挿入程度まで作成できる情報がそろったと思います。次回辺りからは何かしら作ってみたいですね。2018.09.03前回まででionicを使う準備は完了しています。ここからはアプリをつく方法をひたすら積み上げていくだけですね。WordPress.。