インストール - Ionic

概要

Ionicは、HTML、CSS、JavaScriptを使用してクロスプラットフォームのモバイルアプリケーションを開発するためのオープンソースフレームワークである。
2013年にDrifty社 (現Ionic) によって開発が開始され、現在も活発に開発が続けられている。

IonicはWebの標準技術をベースにしながら、ネイティブアプリのような見た目と操作感を実現できる点が挙げられる。
具体的には、Angular、React、Vue等の主要なJavaScriptフレームワークと組み合わせることができ、1度作成したコードからiOS、Android、Web向けのアプリケーションを生成できる。

Ionicの重要な技術的基盤として、Apache Cordovaがある。
Cordovaは、WebViewを使用してアプリケーションを実行して、デバイスのネイティブ機能 (カメラ、GPS、加速度センサ等) へのアクセスを可能にする。
また、最新バージョンではCapacitorという新しいクロスプラットフォームランタイムも導入されており、よりモダンな開発体験を提供している。

UIコンポーネントでは、Ionicは豊富なコンポーネントライブラリを提供している。
これらのコンポーネントは各プラットフォームのデザインガイドラインに準拠しており、例えば、iOSではiOS標準のデザイン、Androidではマテリアルデザインに自動的に適応する。
代表的なコンポーネントとしては、ナビゲーションバー、タブ、リスト、カード、フォーム要素等がある。

パフォーマンスに関しては、Ionicは最適化されたレンダリングエンジンを採用しており、スムーズなアニメーションや高速な画面遷移を実現している。
また、仮想スクロールやレイジーローディング等の機能により、大量のデータを扱う場合でも効率的な動作を可能にしている。

開発環境については、Ionic CLIを使用することにより、プロジェクトの作成からビルド、デプロイメントまでをコマンドラインから行うことができる。
また、開発中はライブリロード機能により、コードの変更がリアルタイムでプレビューに反映されるため、効率的な開発が可能である。

セキュリティ面では、WebViewベースのアプリケーションとして一般的な脆弱性対策が必要となるが、適切な実装を行うことにより十分なセキュリティレベルを確保できる。

競合となるフレームワーク

各フレームワークの特性を比較す

フレームワーク名	特徴
Ionic	Web技術に精通した開発者向けで開発の容易さに優れている。
React Native	パフォーマンスとネイティブ体験の提供に強みがある。
Flutter	独自の開発体験と高いパフォーマンスがある。

React Native

Facebookが開発したフレームワークであり、JavaScriptとReactの知識を活用しながら、実際のネイティブコンポーネントを使用してアプリケーションを構築できる。

IonicがWebViewベースであるのに対して、React Nativeはネイティブコンポーネントを使用するため、より高いパフォーマンスを実現できる点が特徴である。

Flutter

Googleが開発したフレームワークであり、Dart言語を使用する。
独自のレンダリングエンジンを採用しており、60FPSの滑らかなアニメーションと高いパフォーマンスを実現できる。

また、豊富なウィジェットライブラリとホットリロード機能により、効率的な開発が可能である。

NativeScript

Progress Softwareが開発したフレームワークであり、JavaScriptまたはTypeScriptを使用してネイティブアプリケーションを開発できる。

Angular、Vue.js、プレーンJavaScriptで開発可能で、直接ネイティブAPIにアクセスできる点が特徴である。

Ionicのインストール

NodeJSのインストール

インストール - Yarnのページにアクセスして、NodeJSをインストールする。

Ionicのインストール

まず、プロジェクトを作成するディレクトリに移動する。

Ionic CLIをインストールする。

npm install @ionic/cli
# または
npm install -g @ionic/cli

以前のバージョンのIonicをインストールしたことがある場合は、アンインストールする。

npm uninstall ionic
# または
npm uninstall -g ionic

npm install @ionic/cli
# または
npm install -g @ionic/cli

Ionicプロジェクトを作成するディレクトリに移動して、Ionicプロジェクトを作成する。

ionic start <プロジェクト名  例: ionicApp>
# または
npx ionic start <プロジェクト名  例: ionicApp>  # Ionicをグローバルインストールしていない場合

プロジェクトの作成において、Frameworkおよびテンプレートの種類　(blank / tabs / sidemenu)　についての質問がある。

• フレームワーク

  Anguler / React / Vue

• テンプレートの種類

  tabs / sidemenu / blank / list / my-first-app

• コンポーネントの選択

  StandaloneコンポーネントはAngularの新しいビルド方法であり、アプリケーションのビルド方法を簡素化する。

  Standalone / NgModules

Ionicアプリケーションの起動 (オプション)

作成したプロジェクトに移動する。

cd <プロジェクト名>

プロジェクトを起動する。
組み込まれているWebサーバが http://localhost:8100 として起動する。

ionic serve
# または
npx ionic serve

Ionicアプリケーションのビルド

Ionicのプロジェクトディレクトリにおいて、アセット等をビルドする。

ionic build          # 開発用の設定でアプリケーションをビルド (デバッグ情報やソースマップが含まれており、ファイルは最適化されていない状態)
ionic build --prod   # 本番環境向けのビルドを実行 (コードの最小化と圧縮を行い、不要なコードを削除)
ionic build --watch  # 開発モードでビルドを実行 (ファイルの変更を監視して、コードを変更すると自動的に再ビルドが実行されるため、ライブリロード開発に便利)

# または

npx ionic build          # 開発用の設定でアプリケーションをビルド (デバッグ情報やソースマップが含まれており、ファイルは最適化されていない状態)
npx ionic build --prod   # 本番環境向けのビルドを実行 (コードの最小化と圧縮を行い、不要なコードを削除)
npx ionic build --watch  # 開発モードでビルドを実行 (ファイルの変更を監視して、コードを変更すると自動的に再ビルドが実行されるため、ライブリロード開発に便利)

警告およびエラー

警告 : ionic serveコマンド

以下に示すような警告が出力される場合がある。

[ng] ▲ [WARNING] Unable to initialize JavaScript cache storage. [plugin angular-compiler]
[ng]   Cannot find module 'lmdb'
[ng]   This will not affect the build output content but may result in slower builds.
[ng] ▲ [WARNING] Unable to initialize JavaScript cache storage. [plugin angular-compiler]
[ng]   Cannot find module 'lmdb'

この警告は、AngularのコンパイラプラグインがJavaScriptのキャッシュストレージを初期化できないことを示している。
lmdb (Lightning Memory-Mapped Database) モジュールが見つからないことが原因である。

llmdをインストールすることにより、警告を解消することができる。
ただし、この警告は無視しても実際のアプリケーションの動作には影響しないため、ビルド時間が気にならない場合は対応は必須ではない。
もし、開発環境でのビルド時間を最適化する場合にのみ、lldbをインストールする。

npm install lmdb