【インストール手順】Ionic6系を使ってみたのでインストールまでの手順についてをメモ
![【インストール手順】Ionic6系を使ってみたのでインストールまでの手順についてをメモ](/_next/image?url=https%3A%2F%2Ft-cr.jp%2Fassets%2Fimg%2Fpost%2Fthumb%2Fionic.jpg&w=3840&q=75)
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!
記事Article
もっと見る- article
Dockerの利用していないゴミを掃除しディスクスペースを解放するいくつかのやり方を紹介
- article
Next.js のバンドルサイズを可視化する@next/bundle-analyzer の紹介
- article
VSCodeでTypescriptファイルのimport補完で相対パスではなくエイリアスするための設定
- article
UUIDより短いユニークなIDを生成できるnpmライブラリnanoidの使い方
- article
【解決方法】TypeScript発生したTS2564 エラーの対処
- article
express で IP を取得する際などに利用する req.connection 非推奨(deprecated)の対処