Macにionicをインストールしてサンプルプロジェクトを作成する
by
クリエイターとエンジニアを応援するNP-Systems@個人開発
クロスプラットフォームアプリケーションのフレームワークであるIonicをMacにインストールする方法について紹介します。
まず、node.jsをインストールする必要があります。インストールしていない方はこちらに最も簡単なインストール方法を記載していますのでご覧ください。
Contents
hide
インストール方法
npm経由でのインストールとなりますので、sudo npm install -g @ionic/cliコマンドを打ちます。
% sudo npm install -g @ionic/cli
Password:
⸨ ░░░░░░░░░░░░░░░⸩ ⠇ loadDep:yallist: sill resolveWithNewModule smart-buffer@
ionic -vでバージョンが表示されたらインストール完了です。
% ionic -v
6.12.3アプリを作ってみる
ionic startコマンドで簡単なアプリを作ってみます。
% ionic start
Pick a framework! 😁
Please select the JavaScript framework to use for your new app. To bypass this
prompt next time, supply a value for the --type option.
? Framework: (Use arrow keys)
❯ Angular | https://angular.io
React | https://reactjs.org
今回はAngularを選びます。プロジェクト名やCapacitorがいるかなど聞かれますので、入力します。CapacitorはIonicのプロジェクトをAndroid,iOS,デスクトップアプリとして動作させる環境（ランタイム）です。Web用なら入りませんが、今回は入れておきます。
? Project name: my-first-app
Let's pick the perfect starter template! 💪
Starter templates are ready-to-go Ionic apps that come packed with everything
you need to build your app. To bypass this prompt next time, supply template,
the second argument to ionic start.
? Starter template: tabs
✔ Preparing directory ./my-first-app in 1.93ms
✔ Downloading and extracting tabs starter in 998.19ms
? Integrate your new app with Capacitor to target native iOS and Android? (y/N)
y
ダウンロードしたら、プロジェクトへ移動します。
% cd my-first-app/ionic serveコマンドでビルドしてみます。
% ionic serve
> ng run app:serve --host=localhost --port=8100アプリケーションが立ち上がったら完了です。
