Macにionicをインストールしてサンプルプロジェクトを作成する

by

クリエイターとエンジニアを応援するNP-Systems@個人開発

クロスプラットフォームアプリケーションのフレームワークであるIonicをMacにインストールする方法について紹介します。

まず、node.jsをインストールする必要があります。インストールしていない方はこちらに最も簡単なインストール方法を記載していますのでご覧ください。

インストール方法

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

アプリケーションが立ち上がったら完了です。

参考文献

https://ionicframework.com/docs/intro/cli


About Author: M. Shikishima

@Masaya04997245 会社員をしながら個人でシステム開発をしています.
this is single-default.php
最新記事
同カテゴリの記事 hacks-of-it