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

導入

こんにちは。
最近までOSS-DB GOLD の勉強をしておりましたが、無事に合格でき、今年の資格取得目標は到達したので息抜きがてらスマホアプリを作っていこうと思います。
4年位前にAndroid Studioで貯金を管理するスマホアプリを作ったことがあるんですが、、、
（僕の各口座のガチ貯金額が表示されているのでモザイクにしておきます。）

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

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

FW選び

題名にもある通り最終的にはIonic + Vueでスマホアプリを作ることにしました。

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

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

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

環境準備

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

Node.jsインストール

参考

Node.jsから最新バージョンのインストーラーを持ってきてインストール。
ググれば死ぬほどインストール方法は出てくるので当記事では割愛。

C:\Users\sskno>node -v
v18.16.0

Ionic CLIインストール

参考

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インストール

参考
なくても大丈夫そうなのでいったんスキップ。

プロジェクト作成と起動

プロジェクト作成

参考
（色んなサイトをみたんですが、普通に公式サイトが充実してるのでそれで充分そう。）
今回は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

↓こんな感じでブラウザで起動します。

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

Jsで構築できるようにリソースを編集

参考

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

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

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