Ionic6系を使ってみたのでとりあえずインストール手順についてメモしてます。
色々やってみようと思っているので試してみて別途記事にもまとめようと思います。

環境

Mac 11.1 Ionic 6.12.3

きっかけ

クロスデバイス間で利用できるWebベースのアプリを作ろうと思い
ハイブリッドアプリを検討。

最初はcordovaを試したがhmrなどの設定を個別に行う必要があたっため
もっと手軽に利用できるフレームワークを探した結果ionicへ行き着く。

検討の際にこちらのTakumonBlogさんの記事でわかりやすくまとめてあったため参考にさせていただきました。

https://takumon.com/ionic-summary-and-comparison-with-react-native-and-flutter-2020

ionicとは

Ionic FrameworkはオープンソースのUIツールキットで、Web技術（HTML、CSS、JavaScript）術使って、モバイルアプリやデスクトップアプリを作ることができます。 Angular やReact、Vue といった人気フレームワークと併用が可能です。

日本語ドキュメント
https://ionicframework.jp/docs/

Ionic6を取り敢えず動かす

今回は2021年1月現在最新バージョンのIonic6系を利用しています。 過去のバージョンと若干インストール手順などが変わっているようです。

ionicコマンドをnpmでグローバルへインストールし利用するアプリを指定して起動します。

Ionicをインストール

npmでグローバルにionic/cliを入れます。

rubyCopy code$ npm install -g @ionic/cli

プロジェクトの作成

Ionicコマンドでプロジェクト名とテンプレートと利用するフレームワークを選択します。 今回はtabsとreactを使ってます。

shellCopy code$ ionic start myApp tabs --type react

利用できるテンプレートについてはこちらのコマンドで確認できます。

sqlCopy code$ ionic start --list
Starters for @ionic/react (--type=react)

name         | description
--------------------------------------------------------------------------------------
blank        | A blank starter project
list         | A starting project with a list
my-first-app | An example application that builds a camera with gallery
sidemenu     | A starting project with a side menu with navigation in the content area
tabs         | A starting project with a simple tabbed interface
conference   | A kitchen-sink application that shows off all Ionic has to offer

プロジェクトについて

指定したプロジェクト名のディレクトリが生成されます。

luaCopy codels ./myApp
capacitor.config.json ionic.config.json     node_modules          package-lock.json     package.json          public                src                   tsconfig.json

指定したオプションに合わせてconfigファイルが生成されます。

myApp/ionic.config.jsonCopy code{
  "name": "myApp",
  "integrations": {
    "capacitor": {}
  },
  "type": "react"
}

日本語ドキュメント 設定
https://ionicframework.com/jp/docs/cli/configuration

起動

アプリケーションを起動します。

rubyCopy code$ ionic serve

確認

https://localhost:8100 でブラウザから確認できます。

その他yarnをデフォルトに変更

arduinoCopy code$ ionic config set -g yarn true
[OK] yarn set to true!