1.1　Ionic（アイオニック）とは

　Ionic Framework（以降、Ionic）は、HTML5やCSS、JavaScriptを使用して、モバイルアプリケーションやデスクトップアプリケーションを開発するためのUIツールキットです。その作法にしたがってHTMLやJavaScriptを記述することで、シングルページアプリケーションといわれるWebアプリケーションを開発することができます。

　そして、作成したWebアプリケーションはCordovaやCapatitor（このあと説明しますよ！）という仕組みを使うことで、iOSやAndroid用のアプリケーションとしてストアで配信することも可能です！

　Ionicで用意されているUIコンポーネント（ボタンなどの部品のことです）はとても美しく、デザインは苦手だなあ……という方でも、手軽に見栄えのいいデザインを実現することができます。また、ネイティブアプリケーションのような表現が簡単にできることも、Ionicの特徴と言えるでしょう。

1.1.1　本書で扱うIonicのバージョンについて

　本書執筆時（2018年12月）に正式版としてリリースされているIonicはバージョン3系（以降、Ionic3とします）です。Ionic3を含め、これまでのIonicはAngularをベースとしたハイブリッドアプリケーション開発用のフレームワークでした。

　本書で扱うのは、2019年に正式リリースを予定しているIonicの新しいバージョンである、Ionicバージョン4系（以降、Ionic4とします）です。Ionic4では、Angular以外にもVue.jsやReactといったフレームワークを使用して開発ができるようになるようです。「なるようです」と書いたのは、現在はまだAngular以外で開発を行うのは、辛く厳しい道を歩むことが必要な状況だからです。

　そういった理由もあり、本書ではすでに環境が整備されているAngularを利用して、Ionicアプリケーションの開発を進めていきます。

1.2　CordovaとCapacitorをざっくり知ろう

　Cordova（コルドバ）とは、正式にはApache Cordovaという名称のモバイルアプリケーション開発用のフレームワークです。

　Ionic開発における役割は、Ionicで作られたWebアプリケーションをiOSやAndroid用に変換したり、iPhoneやAndroidといった実際の端末にしかないカメラの機能などを、アプリから利用できるようにすることです。Ionicでは、そのようなCordovaプラグインとの連係機能も標準で用意されています。

　そしてCapacitor（キャパシター）は、Ionicを開発しているIonic Teamが作った、新しいHTML5アプリプラットフォームです。HTML5ベースで作られたアプリケーションを、iOS／AndroidのモバイルアプリケーションやPWA（Progressive Web Apps）、Electron（デスクトップアプリケーション）に変換するためのものです。Cordovaへの後方互換性もあり、Cordovaプラグインも全て使用できるようです。現在はベータ版となっています。

　本書では、Cordovaを利用したアプリケーションのビルド方法を説明します。

1.2.1　Ionicを使うことの利点

　通常、Webアプリケーションとモバイルアプリケーションを別々に開発すると、次のような知識がそれぞれ必要です。

　・Webアプリケーション開発

　　─HTML

　　─CSS

　　─JavaScript

　・iOSアプリケーション開発

　　─Objectibe-C / Swift

　・Androidアプリケーション開発

　　─Java / Kotlin

　ひとつのアプリケーションを作るために、これらを全て習得するのはかなり大変です。そこでIonicとCordova、Capacitorを使用することで、Web開発の技術を使用してモバイルアプリケーションも同時に開発することができます。

1.3　Angularをざっくり知ろう

　この章のはじめに記述したように、本書ではAngular（アンギュラー）を利用してIonic開発を行います。これからIonicを学ぶ前に、Angularという存在が一体何かを認識しておくとIonicへの理解が進みやすいので、概要だけ少し説明します。

　Angularは、Googleとコミュニティーによって開発されている、JavaScriptで作られたフルスタックなフロントエンドWebアプリケーション用フレームワークです。

　何だかよく分からない言葉が出てきてしまいましたが、「フルスタックなフロントエンドWebアプリケーション用フレームワーク」というのは、【フロントエンドWebアプリケーションを開発するのに必要な機能がひととおり揃っている】という意味です。

　つまりAngularだけで、フロントエンドWebアプリケーションが必要とする大抵の機能を実装することができます。そして重要なのが、さきほどJavaScriptで作られたと書きましたが、もう少し詳しく書くと、AngularはJavaScriptを拡張した言語であるTypeScript（後述します）で作られています。つまり、IonicでAngularを使って開発を行う場合も、TypeScriptを使用して開発することになります。

1.4　TypeScriptもざっくり知ろう

　HTMLやCSS、JavaScriptを使って作れる！っていうからやってみようと思ったのに、さっそく知らない技術ばかりで不安になってきたぞ！という気持ちの皆様、ご安心ください。TypeScriptはあなたの味方です。TypeScript特有の構文などは都度説明していきますので、ここではTypeScriptというのが一体何者で、どんな特徴があるのかを説明します。

　TypeScriptは、Microsoftとコミュニティーによって開発されている、JavaScriptのスーパーセットといわれる言語です。スーパーセットというのは、JavaScriptの機能を全て含んでいる、という意味です。構文などもそこまで大きな違いはありません。TypeScriptの全ての機能を使いこなすのは中々大変ですが、本書で扱うような基本的な機能であれば、JavaScriptがある理解できていればすぐに慣れます。しかもTypeScriptのほうが後から作られている言語ですから、間違いなく便利です。むしろ筆者は、もうJavaScriptは全てTypeScriptで書きたいという気持ちです。

1.4.1　TypeScriptの特徴

　TypeScript最大の特徴は、変数などのデータ型を前もって決めておける「静的型付け」機能です。

　JavaScript自体にも型という概念はありますが、厳密に変数などに型を指定することはできません。文字列を格納するために用意した変数strに、数値を入れることもできてしまいますよね。

　TypeScriptでは変数strはstring型と指定することで、この変数strにはstring型以外のものは格納できなくなります。これが静的型付けという機能です。そして、TypeScriptはコンパイラによって最終的にJavaScriptのコードへ変換されます。指定した型以外のデータを入れようとした場合には、この変換時にエラーを発生させて教えてくれる(リスト1.1)というわけです。

リスト1.1: TypeScriptの静的型付けのサンプル

// JavaScript
let str = "string以外も入っちゃう…";
let str = 100; // ほら…数字なのに…
// TypeScript
// 変数名の後に【: 型名】と書いてあげると、型に合ってない場合エラーが発生します
let str: string = "stringしか入らない！"; // OK
let str: string = 100; // NG

　他にもたくさんの便利な機能があるのですが、ここでまとめて説明すると本書がTypeScriptの本になってしまうので、必要なときに説明していきます。

2.1　Node.jsのインストール

　昨今、フロントエンド開発を行うには、何かにつけてNode.jsが必要です。

　Node.jsというのは、サーバーサイドでJavaScriptを実行する環境です。そしてNode.jsには、npm^*1というパッケージ管理ツールがあります。npmでは、Node.js環境で動作する便利なパッケージがたくさん公開されていて、本書で利用するパッケージもnpmからインストールすることになります。難しいことは考えず、まずはNode.jsをインストールしましょう。

[*1] npmはNode Package Managerの略です

　もうすでにNode.jsはインストールしてあるよ！という方はここは飛ばして下さい。

　あれ…前にインストールしたっけなあ……忘れたな……という方は、ターミナル（Windowsの場合はコマンドプロンプトやPowerShell）を開いてください。そして次のように入力してエンターキーを押してみて下さい。（ちなみに最初の$マークは入力しなくて大丈夫です！Windowsだと>マークになっています。）

　エンターキーを押した結果、

　のようなバージョン番号が表示されれば、インストールが完了しています。

　のような表示になった場合は、インストールされていないということです。インストールしましょう！

2.1.1　Node.jsのインストール方法

　実は、Node.jsのインストールにはさまざまな方法があるのですが、ここでは一番分かりやすい公式サイトからのインストール方法を説明します。

　まずはNode.jsの公式サイト^*2を開いてみましょう。ダウンロードボタンがふたつあるので、LTSと付いているバージョンをダウンロードします。(図2.1)ちなみに画像では10.14.1 LTSとかかれているほうです。

[*2] https://nodejs.org/ja/

　リンクをクリックすると、インストーラーがダウンロードできます。これを開いてインストールしましょう。インストール手順は特に難しいところはないので、そのまま次へ次へと進んで下さい。インストールが完了したら、ひとつ前の項目で説明したコマンドをターミナルで入力して、バージョン番号が表示されることを確認してください。