[僕のlonicでスマホアプリ開発]#1 環境準備とプロジェクト作成

# 導入
こんにちは。
最近までOSS-DB GOLD の勉強をしておりましたが、無事に合格でき、今年の資格取得目標は到達したので息抜きがてらスマホアプリを作っていこうと思います。
4年位前にAndroid Studioで貯金を管理するスマホアプリを作ったことがあるんですが、、、
（僕の各口座のガチ貯金額が表示されているのでモザイクにしておきます。）
<img width="300" src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549748/eeba8680-1443-e5b5-31a3-f4971e952fdb.jpeg>

当時は見様見真似でなんとかアプリとして形を保ったものを作った程度だったんですが、今回はもう少し見た目がシャレオツなスマホアプリを作りたいと思います。

作るアプリ自体は前回と同じ貯金を管理するandroidのスマホアプリで。


# FW選び
題名にもある通り最終的には[Ionic](https://ionicframework.com/) + Vueでスマホアプリを作ることにしました。

お仕事でVueを使うことがあるので、せっかくならVueを使ってスマホアプリが作れるFWがいいなと思っておりました。
以前に[Tauri](https://tauri.app/)を使ってデスクトップアプリを作ったことがありまして、Tauriはスマホアプリも作れるのでTauriでいいかなと思ったんですが、TauriってバックエンドがRustになるって縛りがあるんですよね。趣味でスマホアプリ作りたいだけのに、私的に学習コストがでかい&仕事でも一切使わないRustを覚える気力が湧かず、今回はTauriは却下です。

ググってたらIonicとかいうFWが良さげというのがわかり、どうやらVueを使えるらしいということがわかったので今回はIonicでスマホアプリを作ることにしました。

仕事で使ってるのは2系のVueなんですが、今年末でサポート終了しますし、3系に対応してるIonicはその練習にちょうどいいですね。

# 環境準備
開発環境はwindowsです。
開発で一番苦戦するのがいつも環境構築な私。。。

## Node.jsインストール
[参考](https://bicyclist.info/ionic/#Nodejs%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB)

[Node.js](https://nodejs.org/ja)から最新バージョンのインストーラーを持ってきてインストール。
ググれば死ぬほどインストール方法は出てくるので当記事では割愛。
```
C:\Users\sskno>node -v
v18.16.0
```

## Ionic CLIインストール
[参考](https://bicyclist.info/ionic/#Nodejs%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB)

`npm install -g @ionic/cli@latestg`のコマンドを実行するだけ。

```
C:\Users\sskno>npm install -g @ionic/cli@latest
C:\Users\sskno>ionic -v
7.1.1
```

## Gitインストール

いつ入れたものかわからないけど、入ってました。
ソース管理に使うらしい。
```
C:\Users\sskno>git -v
git version 2.39.0.windows.2
```

## android studioインストール
[参考](https://sunababox.com/ionic/android-studio-ionic/)
なくても大丈夫そうなのでいったんスキップ。

# プロジェクト作成と起動
## プロジェクト作成
[参考](https://ionicframework.com/docs/ja/v6/vue/quickstart#ionic-cli%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E6%96%B0%E8%A6%8F%E4%BD%9C%E6%88%90)
（色んなサイトをみたんですが、普通に公式サイトが充実してるのでそれで充分そう。）
今回は`balance_recorder`というプロジェクト名にします。

```
rem カレントディレクトリをプロジェクトを作りたいディレクトリに移動してコマンド実行
C:\ssknok_work\05_development\balance_recorder>ionic start balance_recorder tabs --type vue

? Create free Ionic account? No

Your Ionic app is ready! Follow these next steps:

- Go to your new project: cd .\balance_recorder
- 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
```

## プロジェクト起動
```
C:\ssknok_work\05_development\balance_recorder>cd ./balance_recorder

C:\ssknok_work\05_development\balance_recorder\balance_recorder>ionic serve
```
↓こんな感じでブラウザで起動します。
<img width="500" src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549748/81ecb078-3262-fdc5-b8d2-0f2e159c7004.png>


android studio 入れなくてもこれでUI確認できるんであれば、別にandroid studioは要らないかな。
androidアプリにビルドするときにどっちみち必要になるのかな？

## Jsで構築できるようにリソースを編集
[参考](https://ionicframework.com/docs/ja/v6/vue/quickstart#typescript-%E3%81%A8-javascript-%E3%81%AE%E3%81%A9%E3%81%A1%E3%82%89%E3%81%A7%E6%A7%8B%E7%AF%89%E3%81%99%E3%82%8B%E3%81%8B%E3%82%92%E9%81%B8%E3%81%B9%E3%81%BE%E3%81%99)

こちらは任意ですが、私はTypescriptが一切わからない&この趣味のために調べる気もないので`参考`に記載の内容に従ってリソースを編集してJsで構築できるようにします。

`参考`に記載の手順で行けるかと思いきや、じみに`index.html`内の`src/main.ts`を読み込んでいる箇所も修正しないといけないので注意が必要。

とりあえず、Jsで構築できるようにしたうえで起動はできたからひとまず良しとしておこう。（この後のビルドとかで何かが起こる気がしてならないけど、、、）