wpionic.tokyo #1 Typescript入門 – Capital P

Capital Pはじまって以来の連載記事である。この連載では、筆者が月一で開催することにした勉強会 wpionic.tokyo のイベントリポートを行なっていく。

ionicとは？

ionicはモバイルアプリケーションを作成するハイブリッドアプリ作成フレームワークである。モバイルアプリとは、要するにiOSやAndroidで動作するアプリケーションのこと。

通常はiOSならSwift, AndroidならJavaやKotolinなどといった複数の言語を利用しなければならないが、ionicのようなフレームワークではHTML+CSS+JavascriptというWordPress開発者が慣れ親しんでいる言語でモバイルアプリ開発を行うことができる。

なぜそのようなことが可能かというと、こうしたフレームワークでは大半のUIをWebView（アプリ内ブラウザ）で描画し、OS独自の機能（ex. カメラの起動、ファイルシステムの操作、GPSの利用）のみ各種SDKを利用するからだ。

これを可能にするのがCordova（かつてはPhoneGapと呼ばれた）などのビルドツールで、ionicはそのアーキテクチャ上に成立するフレームワークである。

こうした背景についてはスライドにまとめたので、ご覧いただきたい。

新たに学ばなければならない技術

さて、慣れ親しんだ技術で開発できるといっても、何も学ばないで始められるわけではない。以下の知識習得が必要になる。

ionic framework

ionicはフレームワークであるため、様々な機能が提供されている。

コマンドラインツール。アプリのビルドやプロジェクトのひな形作成など、様々な機能がある。
コンポーネント（部品）。モバイルアプリで必要とされる部品の多くは簡単なタグ（ex. <ion-button> ）を記述するだけで画面に表示される。
ネイティブプラグイン。iOSにおけるHealthKitなど、OS固有の機能とのつなぎこみを実現するプラグインラッパーを提供している。
テーマ。ionicはsassベースのテーマシステムを持っているので、外見を変更するときはそのテーマシステムを押さえておかなくてはならない。ちょうど、twitter bootstrap のようなものだと考えておけば良い。
サービス。プッシュ通知やユーザー管理などのmBaas機能が有償で提供されている。これらをうまく使いこなすのもモバイルアプリ開発では重要である。

上記のほか、エコシステムや各種ユーザーグループなどの知識も身につけた方がよいだろう。

AngularJS

ionicはバージョン2以降からAngular2を採用している。Angularは1と2で大きく記法が異なり、まったく違った言語と呼んでいいぐらいに変わった。このため、Angular2をしっかりおさえておく必要がある。

また、ionicで利用できる機能のうち、Angularに備わっている機能は暗黙的に使用することができるので、たとえばHTTP通信（WP REST APIを叩くのに使う）などは @angular/http モジュールを利用する。したがって、どのような機能をAngularが持っているのかは知っておく必要がある。

なにより、テンプレートの記述方法がAngularなので、属性値をカッコでくくるような書き方 <ion-item (click)="clickHandler(i)"> になれる必要がある。

Typescript

Angularはバージョン2からTypescriptで記述することが推奨されるようになった。このため、Typescriptも身につけておく必要があるだろう。Typescriptを書くということは、必然的にES6以降での書き方になるということでもあるため、モダンJavascriptの作法に慣れておかないと、サンプルコードを読んでも意味がわからないということになってしまう。

Cordova

ionicはCordovaベースのフレームワークなので、当然ながらCordovaの制約を受けることになる。Cordova自体のプラグインを利用するケースもままあるので、それがなんであり、どのような仕組みになっているのかぐらいは押さえておきたい。

ただし、ionicはCordovaをうまい具合に隠蔽しているので、プラグイン以外では気にするところはあまりないだろう。

第一回 Typescript 入門でやったこと

これは筆者の思いつきなのだが、なにをするにせよ文法をとっとと覚えてしてしまった方が話が早いので、第一回はTypescriptを記述することにした。

利用した教材はRevised 型の国のTypeScriptである。こちらの教材を読みながら、じっさいにコードをトランスパイルして確認した。

反省点としては、勉強会参加者の目の光が徐々に失われていったことである。ちょうどC言語を勉強しても何も出来上がらないので面白くないのと同じように、もうちょっと形になるものを見せた方が良かったかもしれない。

ただし、文法などの基本をおろそかにする人間はいつまでたっても上達しないということもまた身に沁みているので、心を鬼にして写経をもくもくと続ける会にした。