新しいページの追加をしてみよう2018.09.21ionicでは、サクッと新しいページを作ってみましょう。サイトを作るのもアプリを作るのもチュートリアルを使いまわすことはできないですからね。componentには何が入っているの?ionicでページを追加してみようページを追加するにはhtmlやcssなどを新規作成する必要は有りません。コンソールで1行書くだけです。generateと打っても大丈夫です。Terminalで下の方に新しくターミナルが表示されるはず。邪魔なら×ボタンで消してください。大体のことを操作できるのでターミナルとvscodeとの行き来が無くなるので結構便利ですよ。:)コマンドを打つとターミナルで選択画面が表示されます。選択項目が出てきますが、ページを追加したいのでpageを選択Enterを押して、ページの名前を決めてください。完了するとアナウンスが流れます。testMood!テストという名前のページを生成しました気分!うん、modeとmoodをナチュラルに間違えました。テストの気分なんです。pageなのでページが作成されたようですね。vscodeでファイルを見ていきましょう。ファイルがどこに作られるかと言うと、srcのpageの下へ作られます。基本的には全部pageの下です。ionicを使わないでhtmlを作るとしたら、エイリアス等を使わなければsunababox.com/page/testMood.htmlとかになるんでしょうか。vscodeでpageの中を見ると勝手に作られているファイルがあります。/page/test-mood/test-modeディレクトリが作られていてその中にtsとcss、htmlまでセットで入ってます。serveでブラウザを立ち上げて確認したいところですが、ファイルを作っただけでまだリンクは付いていません。確認してみると挙動が覚えやすいですよ。gで作ったファイルをメニューに登録しようではメニューにリンクをつけていきましょう。[content]=”content”>がメニュー部分なのでapp.htmlapp.component.ts辺りに該当しますね。先にapp.htmlを見ていきます。(click)=”openPage(p)”>{{p.title}}</button></ion-list>ここですかね。<ion-list>と<ion-item>はセットで出てくることが多いです。いうかほとんどセットで使います。イメージとしては<ul>と<li>でしょうかion-listがliのリストとして表示されます。pages”*ngForで繰り返しなさい、という命令それ以降の””の中に命令の内容を書いています。(pages)を”letとは変数に当ります。「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典とりあえず引用しておきます。変数とはなんぞやを雑記に書かなければ。簡単に書くと、pagesで定義されているものをpという値を入れておく箱(カラーボックスみたいなやつ)に取り出して表示する。pで定義されているtitleという商品名を表示させておいてね。ngForなのでそれを繰り返しなさいという命令です。ちなみに、なんでpなん?と疑問に思う事があるかもしれません。pタグかな?とか思いましたが、多分これpagesの省略です。別にpじゃなくて良いんです。bでもpageでもその代わり、letの後だけじゃなく残りもすべて書き換えてあげる必要があります。壊しても直せばいいし、一度やってみると覚えが早いです。(click)="openPage(peeejidesu)">{{peeejidesu.title}}click=”open~~”の事はまた後でね。ここでは説明の為にpに戻しておきます。app.htmlを制御しているapp.component.tsを見ていきます。app.component.tsはpagesがあるvscodeでapp.component.tsを開いてpagesという配列を探しましょう。importとコメントアウトを除いて、2件表示されます。any}>;型の定義ここで、pagesという配列を定義しています。定義しないと型は使えません。phpとかだといきなり使う事が出来るんですが、javascriptではなんでも定義しないと使えないんです。pagesっての使いますよ、という定義を行い{}の中で、何を入れても良いかを決めています。ここで出てきました、title{{p.title}}のtitleはここで決定されてたんですね。p.title2とか書いてもなにも出てきやせんのよね。ちなみに、stringは文字列の事を指します。{titleという型を作り、その中にはstring(文字列)を入れることをここに誓う}見たいになります。ちなみにcomponent:anyのanyは何でも入ります。訳すと”どれか”になるんですが、まあ何が入るか未定の場合とかで使っておけば良いんじゃない?ここら辺はいずれkwskする必要がありますね。配列とはなんぞや、みたいな。配列は容易したけど中身は?と言うと、もう一つのpagesに書かれています。今は別のサイトから引用させていただきましょう。わかりやすいのはここ。勝手に書いてごめんなさい。thisの値は、呼び出される際のコンテクストに依存して決まります。any}>;このpagesだと思ってください。その方がすんなり頭に入ってきます。そのうちthis.を使ってれば感覚的にわかってくる人もいるかも。考えるな、感じろと偉人も言ってました。}];という内容で伝わるかな。component:にはListPageをいれるよ}書かれてるのはこれだけです。titleの中身は、app.htmlに書かれてた{{p.title}}の部分に表示されるテキストが入ってます。href=””>title</a>こんな感じでしょうか。ここでapp.htmlへ戻ってみます。pages”で、pagesの中身がある分繰り返し、pを使って表示する。Listが入ってるので2回繰り返すぜ。いう結果がブラウザで表示できるはず。眠くてややこしくなってきた。混乱してきそうなので無理やり話しを進めますね。}これ、もう一行増やせばメニュー増えます。}こうじゃ追加したのは下の1行と、2行目の文末に,をつけました。{},括弧カンマで1つの区切りと認識させています。