Angular2の開発を高速化するIonic Framework2(Ionic2)の機能概論

4月8日の明朝(現地時間7日)に、とうとうIonic2 beta.4がリリースされましたね!
「Ionic2(Angular2 UIフレームワーク)をはじめるにあたっての注意点まとめ」で書いたようにIonic2 beta.3ではAngular2本家のバージョンアップから随分取り残されていたので、ようやくこれでかなり実用的になった感があります。

beta.4リリースをきっかけにIonic2を使ってみようという方もこれから増えると思いますので、Ionic2とはそもそも何者であるかを簡単にまとめておこうと思います。

1. Angular2 UIフレームワーク

一番わかりやすい点としては、UIフレームワークとしてのIonic2です。
BootstrapやFoundationのように、Ionic2が指定するマークアップを行うことにより、デフォルトでデザインを当てることができます。例えば、

<ion-list>
  <ion-item>
    <ion-label fixed>Username</ion-label>
    <ion-input type="text" value=""></ion-input>
  </ion-item>
  <ion-item>
    <ion-label fixed>Password</ion-label>
    <ion-input type="password"></ion-input>
  </ion-item>
</ion-list>

と表記したら、以下のようなCSSスタイルが当たります。

スクリーンショット 2016-04-09 10.47.18
 
AngularJSにあった、Directive機能ですね。これをいろいろと積んでいます。一覧は、公式サイトをみてください。
もちろんのこと、Grid機能も積んでいますし、Modalもありますし、デフォルトの機能だけでほとんど作りこむことも可能です。
 

2. Mobile Appsフレームワーク

また、Wikipediaに「mobile app framework」と書かれているように、モバイルアプリ制作に強いメリットを持っています。
ハイブリッドアプリをつくるためには、”html/css/js”をラッピングして、スマホアプリ用にコンパイルしたり、Native機能(スマホ本来の機能/GPSやカメラ、通知機能など)にアクセスするために「Apache Cordova」を使うのが一般的なのですが、なかなかに設定が面倒です。
また、例えばタブのあるアプリは、iOSアプリではタブは下に配置するけど、Androidアプリでは上に配置するのが一般的・・・などの差異もあり、これを全部自分でやろうと思ったらどれだけ労力がかかるか・・・。

Ionic2はこれを一発で解決してくれます。
例えば、Native機能は、Ionic2ではこれだけサポートしています。また、もちろんのこと、Cordovaプラグインを利用すれば、更に様々な機能を使うことができます。

また、iOSアプリとAndroidアプリで、CSSを分岐するための機能がついてもいますので、作り分けは最小限で大丈夫です。ちなみに、上記で紹介したUIフレームワークはデフォルトでiOSとAndroidのstyleが分かれていたりします。以下では、わかりやすいのでアイコンを紹介します。

スクリーンショット 2016-04-09 11.01.47
 

Angular2をもっと書きやすく

Angular2、みなさんどれぐらいさわっていますか??
一度、Angular2で何かを作るとわかると思いますのですが、Angular2というフレームワークはメソッド群で、何かをしようと思うと、メソッド呼び出しが必須です。
 

import {bootstrap} from "angular2/platform/browser";
import {Component} from "angular2/core";
import {CORE_DIRECTIVES} from "angular2/common";

例えば上記の、Angular2を使って何かページをつくるならほぼ必ず呼び出すものだけでも3つあります。Angular2を起動するためのbootstrap、ページをつくるために必須のComponent、テンプレートDirective(Angukar1時代でいう、ng-if、ng-show、ng-hideなど)を呼び出すためのCORE_DIRECTIVES。
http通信しようとしたり、DIしようと思ったらこれはどんどん増えていきます。

もちろん、巨大アプリをつくるためには「必要ないメソッドを呼び出さない」ことは必須なのですばらしい機能ではあるのですが、ちょっと入門には難しいかも・・・。

Ionic2は、それをサポートします。例えば、上記のものでいえば

import {Page} from 'ionic-angular';

で全部一発で呼び出すことが可能です。
モバイルアプリをつくるために必須のものは、Ionic2がまとめて呼び出してくれますので、ここらへん楽することができます。

でも、Angular2としても書けるよ!

もちろん、「え、勝手に呼びだされたくない!」という時には、Ionic2の機能を使わずに、Angular2と同様の記法で呼び出しを抑えることも可能です。
ぶっちゃけた話、Ionic2で環境だけ作ってしまって、Ionic2を使わないというところまでできる。まぁ、その場合、Ionic2を使う必要性はどこにあるんだという問題はありますがw
 

起動環境まで一括構築

あなたがAngular2を使う時、webpackを使いますか?SystemJSの方がいいかな。Browserifyという手も。sassの設定は?typescriptのコンパイラはどうしよう・・・
とか正直Angular2構築の環境パッケージまで選び始めるときりがありません。そして、いざ起動したら失敗したり・・・。ここらへんのベストプラクティスは、Angular2のスペシャリストにお任せするとしまして、Ionic2ではじめると自動的に起動までの環境構築が行われます。

TypeScript(もしくはES6)のES5へのコンパイル、SCSSのCSSへのコンパイル、各構築ファイルの公開フォルダへの自動コピー機能、ライブリロード、サーバ起動まで全部やってくれますので、まずはさわってみたいという人にとてもおすすめです。
 

ついでに初期テンプレートまでついてくる

Ionic2の公式の通りにはじめると、以下のようなタブページが表示されます。

スクリーンショット 2016-04-09 11.24.34

このソースコードを読んでいくと大体のIonic2のテンプレート構築はできるようになっておりますので、ゼロから徒手空拳ではじめるなら、Ionic2いいですよ。
 

まとめ

以上、Ionic2の特徴的な機能についてまとめてみました。
またβ版ですので、バグが皆無というわけではありませんが、一通りの構築はできるようになっている
それでは、また。

お問い合わせ