【インストール手順】Ionic6系を使ってみたのでインストールまでの手順についてをメモ

2021年1月22日

Ionic

【インストール手順】Ionic6系を使ってみたのでインストールまでの手順についてをメモ

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

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を入れます。

ruby$ npm install -g @ionic/cli

プロジェクトの作成

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

shell$ ionic start myApp tabs --type react

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

sql$ 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

プロジェクトについて

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

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

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

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

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

起動

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

ruby$ ionic serve

確認

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

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

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

T-CREATOR