Open2024/08/16にコメント追加2

Ionic Framework を始めてみた

Ionic Framework はオープンソースの UI ツールキット。Reactなどのフレームワークと併用することで、モバイルアプリやデスクトップアプリを作ることができます。（現時点での最新バージョンは8.2.x）
https://ionicframework.jp/docs/

Capacitorを利用することで、iOSアプリやAndroidアプリなどの作成も可能。

Hiro256

Ionic CLI をインストール。

npm install -g @ionic/cli

起動する。

ionic start

以降ウィザードにしたがって選択肢を選ぶ。

? Use the app creation wizard? (Y/n)

ここはn。

? Framework:
  Angular | https://angular.io
> React   | https://reactjs.org
  Vue     | https://vuejs.org

ここではReactを選択。

Every great app needs a name!

Please enter the full name of your app. You can change this at any time. To bypass this prompt next
time, supply name, the first argument to ionic start.

? Project name:my-ionic-app

プロジェクト名を決める。
ここではmy-ionic-appとしました。

? Starter template:
  blank        | A blank starter project
  list         | A starting project with a list
> my-first-app | A template for the "Build Your First App" tutorial
  sidemenu     | A starting project with a side menu with navigation in the content area
  tabs         | A starting project with a simple tabbed interface

ここではmy-first-appを選びました。
処理が開始します。

Your Ionic app is ready! Follow these next steps:

- Go to your cloned project: cd .\my-ionic-app
- Run ionic serve within the app directory to see your app in the browser
- Run ionic capacitor add to add a native iOS or Android project using Capacitor
- Generate your app icon and splash screens using cordova-res --skip-config --copy
- Explore the Ionic docs for components, tutorials, and more: https://ion.link/docs
- Building an enterprise app? Ionic has Enterprise Support and Features:
https://ion.link/enterprise-edition

終了したら、できたフォルダに移動します。

 cd .\my-ionic-app

サーバーを起動します。

ionic serve

ブラウザが立ち上がり、テンプレートのWebサイトが表示されます。