シリーズ目次

• 仕様説明編
• インストール他 準備編
• アプリを作ってみよう編

開発環境の準備

Ionic を使うためのツールのインストール

本項で説明を省略しているツール

以下のツールのインストールは 本項で説明を省略しています

• Node.js
• Git
• Xcode (MacでiPhoneアプリを作成する場合)
• Android Studio (Windowsでandroidアプリを作成するの場合)
• IDEエディタ (筆者はVisual Studio Code を使用しています。)
• ブラウザ　(筆者は Chrome を使用しています。)

Ionic CLI のインストール

Ionic CLI をインストールします。Ionic CLI をインストールすると, ionicコマンドを動かすことができるようになり, Ionicプロジェクトをコマンドひとつで自動構築したり、リリース用にビルドすることができるようになります。次のコマンドを実行してください

npminstallioniccordova-g

👁 test3.gif

インストールには 5分ほど時間がかかることもあります。完了したら、次のようにインストールした パッケージ名とバージョン情報が表示されました

+ionic@5.4.1+cordova@9.0.0added688packagesfrom392contributors

Ionic がインストールできなかったらバージョンを上げてみよう
npm update -g npm
npm update -g

Ionicプロジェクトを作ってみる

Ionicプロジェクトを作成

環境がととのったのでプロジェクトを作成してみます。
以下のコマンドを入力します。

ionicstart--type=ionic-angular

今回のプロジェクトは以下の仕様です

• Project name: MobileSkyWay
• Starter template: tutorial

👁 test3.gif

作成されたプロジェクトを起動してみる

VSCode で作成されたフォルダを開きターミナルで以下のコマンドを実行します。

ionicserve

👁 test3.gif

自動的にブラウザが立ち上がります。

次回

アプリを作ってみよう編