フリーランス チャレンジ!!

フリーランス チャレンジ!!

現役フリーランスエンジニアが書く雑記ブログ

【Ionic】 Angularでモバイルアプリを開発してみる

スポンサーリンク

スポンサーリンク

Ionic

つい先日、Ionicの存在を知りました。

なんと、Angular、React、Vueなどで、モバイルアプリを開発できる?!

 

何でもっと早く教えてくれなかったのか。。。

 

「いや、そんな事はどうでおいい。早くコード書いてみよう」と思い、軽く調べてコード書いてみた。

 

 

Ionicとは?

この記事を見てる人は、Ionic知ってたりする人が来てると思うんだけど、自分が調べたことを簡単に記載。

 

  1. IonicはオープンソースのUIツールキット
  2. モバイルアプリを開発できる
  3. Angular、React、Vueフレームワークでも書ける

 

開発環境

下記が私の開発環境です。(PCはMac)

Ionic 開発環境

 

Ionic CLIのインストール

基本、ここに記載されているとおりに進めて行くぞ!!

CLIのインストール - Ionic Framework 日本語ドキュメンテーション

 

Ionic CLI インストール

 

npmが古いだと?!(wanningだからスルー)

 

アプリケーションの起動

えっ??

もう起動できるの? まだディレクトリの中身からっぽだけど??

 

起動してみる

Ionic 起動

 

なるほど、フレームワークを選べと

じゃあ、Angularで。

 

色々、インストールが始まって、3分くらいすると

 

y押下するとブラウザにIonicのサイトが表示されます。

自分はGithuでログインしました。

 

あと、myAppディレクトリに色々作成してくれましたね。

 

Ionic インストール完了

myAppディレクトリに移動してionic serveと打つとブラウザで見れるよう。やってみる。
※myAppやめてionic-first-appに変更しました。(後でgitに上げたいから)

 

gisteab69fb9eed07e056f18b8b97caff8ce

 

おぉー、勝手にブラウザに表示された!!

画面下にあるTab 1、 Tab 2、Tab 3をそれぞれ押すと表示も変わります。

ionic serve

 

よし、次はNativeアプリもやってみるか

ios選んでと

ionic capacitor add

 

なんかwarnが出てる

wwwディレクトリの起動に失敗??

 

この後、少し見てみたんだが、Xcodeが必要そう。でも自分のMacはSSDが128GBしかなく、容量が足りずインストールできなかった。。。

 

最後に

Nativeアプリの方も見たかったけど、今回はIonicってどんな感じかなというのを掴みたかったので、一旦ここまで。

 

Angular CLIと同じような印象で、始めやすい。

 

できればフロントと同じ言語でアプリも書ければ、覚えること少なくなるので今後普及して欲しい!!

 

※M1 Macbook Airは256Gでも15万切るのか。。。(欲しいな。ってか128GBはそろそろやめたい)

 

※11/22 ポチった(メモリは16GBに増設)

f:id:ksakae1216:20211122174154p:plain