つい先日、Ionicの存在を知りました。
なんと、Angular、React、Vueなどで、モバイルアプリを開発できる?!
何でもっと早く教えてくれなかったのか。。。
「いや、そんな事はどうでおいい。早くコード書いてみよう」と思い、軽く調べてコード書いてみた。
Ionicとは?
この記事を見てる人は、Ionic知ってたりする人が来てると思うんだけど、自分が調べたことを簡単に記載。
- IonicはオープンソースのUIツールキット
- モバイルアプリを開発できる
- Angular、React、Vueフレームワークでも書ける
開発環境
下記が私の開発環境です。(PCはMac)
Ionic CLIのインストール
基本、ここに記載されているとおりに進めて行くぞ!!
CLIのインストール – Ionic Framework 日本語ドキュメンテーション
npmが古いだと?!(wanningだからスルー)
アプリケーションの起動
えっ??
もう起動できるの? まだディレクトリの中身からっぽだけど??
起動してみる
なるほど、フレームワークを選べと
じゃあ、Angularで。
色々、インストールが始まって、3分くらいすると
y押下するとブラウザにIonicのサイトが表示されます。
自分はGithuでログインしました。
あと、myAppディレクトリに色々作成してくれましたね。
myAppディレクトリに移動してionic serveと打つとブラウザで見れるよう。やってみる。
※myAppやめてionic-first-appに変更しました。(後でgitに上げたいから)
gisteab69fb9eed07e056f18b8b97caff8ce
おぉー、勝手にブラウザに表示された!!
画面下にあるTab 1、 Tab 2、Tab 3をそれぞれ押すと表示も変わります。
よし、次はNativeアプリもやってみるか
ios選んでと
なんかwarnが出てる
wwwディレクトリの起動に失敗??
この後、少し見てみたんだが、Xcodeが必要そう。でも自分のMacはSSDが128GBしかなく、容量が足りずインストールできなかった。。。
Xcodeインストールするのに40GBも必要ってホントに?!
— kotaro@フリーランスエンジニア (@beltway7) 2021年11月21日
最後に
Nativeアプリの方も見たかったけど、今回はIonicってどんな感じかなというのを掴みたかったので、一旦ここまで。
Angular CLIと同じような印象で、始めやすい。
できればフロントと同じ言語でアプリも書ければ、覚えること少なくなるので今後普及して欲しい!!
※M1 Macbook Airは256Gでも15万切るのか。。。(欲しいな。ってか128GBはそろそろやめたい)
※11/22 ポチった(メモリは16GBに増設)
コメント