Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

はじめに

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

【保存版】データ構造のまとめ

解説の前に先にまとめを掲載させていただきます。

スクリーンショット 2018-11-01 16.01.41.png

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

① 全体を捉えよう

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

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

スクリーンショット 2018-10-31 15.46.09.png

index.htmlが初めの一歩

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

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

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

スクリーンショット 2018-11-01 11.28.53.png

main.tsでアプリを起動

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

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';より)

スクリーンショット 2018-11-01 11.45.16.png

app.module.tsで利用する機能を登録

役割:アプリ内で利用する機能の登録
大切なコードの解説:以下参照

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であるということを書いています。

そして、6行目のimport { MyApp } from './app.component';というコードより、MyApp./app.component(.ts)という同じ階層のファイルに定義されていることがわかります。

スクリーンショット 2018-11-01 12.09.35.png

app.component.tsapp.htmlを表示

役割:app.htmlへのデータの受け渡しと表示
大切なコードの解説:以下参照

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';より)

スクリーンショット 2018-11-01 12.28.36.png

app.htmlpagesを表示

役割:実際の表示するページをpagesから呼び出し
大切なコードの解説:以下参照

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

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

スクリーンショット 2018-11-01 12.44.40.png

⑦ 実際の表示部分であるpagesの表示

pagesの中には、home.htmlhome.scsshome.tsがあり、それぞれ次のような役割をしています。

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

ここで、homeapp.htmlから呼び出された時、まずはじめにhome.tsが呼び出されます
その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は次の通りです。

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

スクリーンショット 2018-11-01 13.37.16.png

参考文献

  少し値段はしますが、わかりやすくて個人的にお勧めの本です。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした