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

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!
- review
今の自分に満足していますか?『持たざる者の逆襲 まだ何者でもない君へ』溝口勇児
- review
ついに語られた業界の裏側!『フジテレビの正体』堀江貴文が描くテレビ局の本当の姿
- review
愛する勇気を持てば人生が変わる!『幸せになる勇気』岸見一郎・古賀史健のアドラー実践編で真の幸福を手に入れる
- review
週末を変えれば年収も変わる!『世界の一流は「休日」に何をしているのか』越川慎司の一流週末メソッド
- review
新しい自分に会いに行こう!『自分の変え方』村岡大樹の認知科学コーチングで人生リセット
- review
科学革命から AI 時代へ!『サピエンス全史 下巻』ユヴァル・ノア・ハラリが予見する人類の未来