Ionicのデータ構造を図式化してみた【Ionic】

はじめまして、ますみです！

[![自己紹介.png](https://www.umi-mori.jp/wp-content/uploads/2023/02/introduction_banner_2-2048x533.png)](https://bit.ly/banner_intro_masumi_creator_qiita)


# はじめに
　Ionicのように、簡単にアプリを作れるような環境でも、ある程度のデータ構造をしっかりと知っておかないと、いざバグに遭遇した時やとても特殊なことを実装しようとした時に困ると思います。そのため、この記事では**最低限知っておく必要があると考えるデータ構造の知識**をなるべくわかりやすく説明したいと思います。
　また、今回の記事では、**Blankのテンプレート**の構造を紐解きます。本当に基本的なことしか扱わないため、**入門者向け**の記事となっています。

# 【保存版】データ構造のまとめ
解説の前に先にまとめを掲載させていただきます。

<img width="1067" alt="スクリーンショット 2018-11-01 16.01.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/affb5f45-c3f1-3359-4f4a-b7255c4d60c1.png">

詳しい解説は、次の通りです。

## ① 全体を捉えよう
まず、作成された新しいファイルを見てもらうと以下のようなデータ構造になっていると思います。

ここで、大切なこととして、基本的にアプリ開発をする上での操作は**`src`フォルダが大切**であり、ほとんどこのフォルダを編集することでアプリを作ることができます。

<img width="200" alt="スクリーンショット 2018-10-31 15.46.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/c4d51e25-3dc4-0a6c-8a9e-86ad13810608.png">

## ② `index.html`が初めの一歩
**アプリが始まった時、初めに読み込まれる**のは`index.html`です。
役割：**CSSやJavascriptなどの呼び出し**
大切なコードの解説：以下参照

```html:indexPartial.html
<!-- Ionic's root component and where the app will load -->
<ion-app></ion-app>
```

このコードは**ionic特有のコード**で、簡単に言うと**アプリ上の表示部分を担当するタグ**です。
タグの中に何も書かれていないのは、**同じ階層にいる`app`フォルダにこの`ion-app`タグの内容が書かれている**からです。

<img width="200" alt="スクリーンショット 2018-11-01 11.28.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/7155b814-6e62-2ef3-27f0-a30f13863a84.png">

## ③ `main.ts`でアプリを起動
**`app`フォルダが読み込まれた時、初めに読み込まれる**のは`main.ts`です。
役割：**アプリの起動**
大切なコードの解説：以下参照

```typescript: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';`より）

<img width="250" alt="スクリーンショット 2018-11-01 11.45.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/5d2def05-509c-581c-304b-c20a0653215a.png">

## ④ `app.module.ts`で利用する機能を登録
役割：**アプリ内で利用する機能の登録**
大切なコードの解説：以下参照

```typescript: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)`という同じ階層のファイルに定義されている**ことがわかります。

<img width="250" alt="スクリーンショット 2018-11-01 12.09.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/4d064cae-4a28-7e95-acf3-1c56dc87aad6.png">

## ⑤ `app.component.ts`が`app.html`を表示
役割：**`app.html`へのデータの受け渡しと表示**
大切なコードの解説：以下参照

```typescript:app.component.ts
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';`より）

<img width="250" alt="スクリーンショット 2018-11-01 12.28.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/4533a742-bd4f-defe-22b7-821cdf82d9a7.png">

## ⑥ `app.html`が`pages`を表示
役割：**実際の表示するページを`pages`から呼び出し**
大切なコードの解説：以下参照

```typescript:app.html
<ion-nav [root]="rootPage"></ion-nav>
```

ここで、**`<ion-nav>`タグは、アプリ上のメインの表示部分**で、**そこに`rootPage`を代入し、表示**しています。
この`rootPage`は先ほどの`app.component.ts`内で定義した変数であり、`HomePage`（一つ上の階層の`pages`フォルダ内の`home`というページ）が代入されています。

<img width="250" alt="スクリーンショット 2018-11-01 12.44.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/e5e420cd-e929-55e7-dd33-480c4adfed6e.png">

## ⑦ 実際の表示部分である`pages`の表示
`pages`の中には、`home.html`、`home.scss`、`home.ts`があり、それぞれ次のような役割をしています。

|ファイル|役割|
|:---:|:---:|
|home.html|テキスト情報（ボタンなどのUIも）|
|home.scss|htmlの細かい見た目を記述|
|home.ts|変数やデータの受け渡し|

ここで、`home`が`app.html`から呼び出された時、まず**はじめに`home.ts`が呼び出されます**。
その`home.ts`のコードは次の通りです。

```typescript: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`は次の通りです。

```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`した時の以下の部分にあたります。

<img width="778" alt="スクリーンショット 2018-11-01 13.37.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/27eaecc9-83f5-6dee-a904-227a1072527e.png">

# 最後に
最後まで読んでくださり、ありがとうございました！
いかがだったでしょうか？

この記事を通して、少しでもあなたの学びに役立てば幸いです！

:::note info
【仕事の相談はこちら】
お仕事の相談のある方は、下記のフォームよりお気軽にご相談ください。

[問い合わせフォームはこちら](https://forms.gle/G5g1SJ7BBZw7oXYA7)

もしもメールでの問い合わせの方がよろしければ、下記のメールアドレスへご連絡ください。

info*galirage.com（*を@に変えてご送付ください）

🎁 「生成AI活用の無料相談券」もしくは「生成AIの社内ガイドライン（無料PDF）」を『公式LINE』で配布中 🎁
『生成AIを業務に活用したいけど、どうしたらいいかわからない』といった声を多くいただきます。

Galirageでは公式LINEにて、チャットやオンライン会議で「完全個別の生成AI活用無料相談会」を実施しております！
（期間限定で実施しているため、ご興味ある方はお早めに以下のLINE公式アカウントをご登録ください^^）
https://lin.ee/rvz6lMN

※ 予告なく、キャンペーンを終了する可能性がございますが、ご了承ください。

【業務内容】
具体的には、以下のお仕事を中心に受け付けております！（[詳しくはこちら](https://galirage.notion.site/Galirage-AI-c2f3945fafb0433d8d2fd03e56927fd8)）
1. 受託開発（例：生成AIを使った社内システムの開発）
2. コンサルティング（例：技術戦略のアドバイス）
3. 講演（例：社内研修、イベント登壇）

※ 特に「生成AIを使ったシステム開発のご依頼」が多く、ご好評いただいております。

【これまでの相談事例】
以下のようなご相談が多くあります。

🔑 機密情報を漏洩させないための、生成AIのシステム構築をお願いしたい。
🤖 自社データを用いたFAQチャットボットの作り方を知りたい。
💡 ChatGPTを、自分たちの事業にどのように活かせるか、アドバイスやアイデアが欲しい。
:::
# おまけ
エンジニアの仲間（データサイエンティストも含む）を増やしたいため、公式LINEを始めました🎉

「**一緒に仕事をしてくれる方**」「**友だちとして仲良くしてくれる方**」は、友だち追加をしていただけますと嬉しいです！（仲良くなった人たちを集めて、「ボードゲーム会」や「ハッカソン」や「もくもく会」もやりたいなと考えています😆）

とはいえ、みなさんにもメリットがないと申し訳ないので、特典を用意しました！

友だち追加後に、アンケートに回答してくれた方へ「**エンジニア図鑑（職種20選）**」のPDFをお送りします◎

https://lin.ee/hFUN4TL

[![](https://www.umi-mori.jp/wp-content/uploads/2023/10/line_banner_v2.png)](https://lin.ee/hFUN4TL)
# 参考文献

https://www.amazon.co.jp/Ionic%E3%81%A7%E4%BD%9C%E3%82%8B-%E3%83%A2%E3%83%90%E3%82%A4%E3%83%AB%E3%82%A2%E3%83%97%E3%83%AA%E5%88%B6%E4%BD%9C%E5%85%A5%E9%96%80%E3%80%88Web-iPhone-Android%E5%AF%BE%E5%BF%9C%E3%80%89-%E6%A6%8A%E5%8E%9F/dp/4863542364