はじめまして、ますみです！
はじめに
Ionicのように、簡単にアプリを作れるような環境でも、ある程度のデータ構造をしっかりと知っておかないと、いざバグに遭遇した時やとても特殊なことを実装しようとした時に困ると思います。そのため、この記事では最低限知っておく必要があると考えるデータ構造の知識をなるべくわかりやすく説明したいと思います。
また、今回の記事では、Blankのテンプレートの構造を紐解きます。本当に基本的なことしか扱わないため、入門者向けの記事となっています。
【保存版】データ構造のまとめ
解説の前に先にまとめを掲載させていただきます。
詳しい解説は、次の通りです。
① 全体を捉えよう
まず、作成された新しいファイルを見てもらうと以下のようなデータ構造になっていると思います。
ここで、大切なこととして、基本的にアプリ開発をする上での操作は**srcフォルダが大切**であり、ほとんどこのフォルダを編集することでアプリを作ることができます。
② index.htmlが初めの一歩
アプリが始まった時、初めに読み込まれるのはindex.htmlです。
役割：CSSやJavascriptなどの呼び出し
大切なコードの解説：以下参照
<!-- Ionic's root component and where the app will load -->
<ion-app></ion-app>
このコードはionic特有のコードで、簡単に言うとアプリ上の表示部分を担当するタグです。
タグの中に何も書かれていないのは、同じ階層にいるappフォルダにこのion-appタグの内容が書かれているからです。
③ main.tsでアプリを起動
appフォルダが読み込まれた時、初めに読み込まれるのはmain.tsです。
役割：アプリの起動
大切なコードの解説：以下参照
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
まず、3行目の**platformBrowserDynamic()がアプリを起動するためのコードです。
そして、次のbootstrapModule(AppModule)が、起動する際にAppModuleを呼び出して使う**ということを表しています。
では、AppModuleはどこで定義されているかというと、./app.module(.ts)という同じ階層のファイルに定義されています。
（import { AppModule } from './app.module';より）
④ app.module.tsで利用する機能を登録
役割：アプリ内で利用する機能の登録
大切なコードの解説：以下参照
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
@NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
まず、ここで重要なこととして、基本的に利用する機能は全て@NgModuleに書き込み、登録をしなくてはいけません。
次に、最後の行の export class AppModule {}というコードからもわかる通りAppModuleと言うクラスを先ほどのmain.tsへ渡していることがわかります。
このままでは、ただ機能を登録しただけのように見えますが、15行目の**IonicModule.forRoot(MyApp)というコード**によって、一番最初に立ち上げるページはMyAppであるということを書いています。
そして、６行目の**import { MyApp } from './app.component';というコードより、MyAppは./app.component(.ts)という同じ階層のファイルに定義されている**ことがわかります。
⑤ app.component.tsがapp.htmlを表示
役割：app.htmlへのデータの受け渡しと表示
大切なコードの解説：以下参照
import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { HomePage } from '../pages/home/home';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
rootPage:any = HomePage;
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
statusBar.styleDefault();
splashScreen.hide();
});
}
}
ここで、7行目の**templateUrl: 'app.html'によって、app.htmlを呼び出しています**。
また、10行目の**rootPage:any = HomePage;ではapp.html内で使うrootPageという変数を定義**し、HomePage（一つ上の階層のpagesフォルダ内のhomeというページ）を代入しています。
（import { HomePage } from '../pages/home/home';より）
⑥ app.htmlがpagesを表示
役割：実際の表示するページをpagesから呼び出し
大切なコードの解説：以下参照
<ion-nav [root]="rootPage"></ion-nav>
ここで、<ion-nav>タグは、アプリ上のメインの表示部分で、そこにrootPageを代入し、表示しています。
このrootPageは先ほどのapp.component.ts内で定義した変数であり、HomePage（一つ上の階層のpagesフォルダ内のhomeというページ）が代入されています。
⑦ 実際の表示部分であるpagesの表示
pagesの中には、home.html、home.scss、home.tsがあり、それぞれ次のような役割をしています。
| ファイル | 役割 |
|---|---|
| home.html | テキスト情報（ボタンなどのUIも） |
| home.scss | htmlの細かい見た目を記述 |
| home.ts | 変数やデータの受け渡し |
ここで、homeがapp.htmlから呼び出された時、まずはじめにhome.tsが呼び出されます。
そのhome.tsのコードは次の通りです。
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController) {
}
}
ここで、5行目の**templateUrl: 'home.html'より、home.htmlが呼び出される**ようになっています。
そして、home.htmlは次の通りです。
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
The world is your oyster.
<p>
If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
</p>
</ion-content>
ここで大切なこととして、<ion-header>と<ion-content>があり、それぞれionic serveした時の以下の部分にあたります。
最後に
最後まで読んでくださり、ありがとうございました！
いかがだったでしょうか？
この記事を通して、少しでもあなたの学びに役立てば幸いです！
【仕事の相談はこちら】
お仕事の相談のある方は、下記のフォームよりお気軽にご相談ください。
もしもメールでの問い合わせの方がよろしければ、下記のメールアドレスへご連絡ください。
info*galirage.com（*を@に変えてご送付ください）
🎁 「生成AI活用の無料相談券」もしくは「生成AIの社内ガイドライン（無料PDF）」を『公式LINE』で配布中 🎁
『生成AIを業務に活用したいけど、どうしたらいいかわからない』といった声を多くいただきます。
Galirageでは公式LINEにて、チャットやオンライン会議で「完全個別の生成AI活用無料相談会」を実施しております！
（期間限定で実施しているため、ご興味ある方はお早めに以下のLINE公式アカウントをご登録ください^^）
https://lin.ee/rvz6lMN
※ 予告なく、キャンペーンを終了する可能性がございますが、ご了承ください。
【業務内容】
具体的には、以下のお仕事を中心に受け付けております！（詳しくはこちら）
- 受託開発（例：生成AIを使った社内システムの開発）
- コンサルティング（例：技術戦略のアドバイス）
- 講演（例：社内研修、イベント登壇）
※ 特に「生成AIを使ったシステム開発のご依頼」が多く、ご好評いただいております。
【これまでの相談事例】
以下のようなご相談が多くあります。
🔑 機密情報を漏洩させないための、生成AIのシステム構築をお願いしたい。
🤖 自社データを用いたFAQチャットボットの作り方を知りたい。
💡 ChatGPTを、自分たちの事業にどのように活かせるか、アドバイスやアイデアが欲しい。
おまけ
エンジニアの仲間（データサイエンティストも含む）を増やしたいため、公式LINEを始めました🎉
「一緒に仕事をしてくれる方」「友だちとして仲良くしてくれる方」は、友だち追加をしていただけますと嬉しいです！（仲良くなった人たちを集めて、「ボードゲーム会」や「ハッカソン」や「もくもく会」もやりたいなと考えています😆）
とはいえ、みなさんにもメリットがないと申し訳ないので、特典を用意しました！
友だち追加後に、アンケートに回答してくれた方へ「エンジニア図鑑（職種20選）」のPDFをお送りします◎
参考文献