【年末年始のもくもく活動応援記事】Ionicアプリ開発ことはじめ

はじめに

会社が年末年始の休みに入りました。スタートアップである僕の会社のメンバーは、各自何かしらの課題を設定してじっくり取り組むようです。

僕が所属するモバイルアプリチームでは、来年からは事業の主軸のモバイルアプリの開発をよりスピーディに行うために、デザイナー出身者にも積極的にコードを書いてもらおうと考えています。

とはいえ「はい、頑張って！！」ではあまりにしんどいかと思ったので、足掛かりとしてハンズオン資料を作ってみることにしました。

対象となる環境は次の通りです。

• macOS Catalina
• VS Code

目指す状態は次の通りです。

• Homebrewをmacにインストールする
• nodenvをmacにインストールする
• Node.jsをmacにインストールする
• Ionicアプリを作る
• Ionicアプリのコードを修正する
• Ionicの標準コンポーネントを使ってみる

目標はさくっと動くところまで持っていって、「私でもいけそう！」「もうちょっと触ってみたい！」と思ってもらうことです。

Homebrewをインストールする

Homebrew（ホームブリュー）は、開発に必要なアプリをmacOSにインストールするためのアプリです。
App Storeのようなものですね。

ただ、一般的なアプリのように画面があるわけではなく、コマンドから利用します。

こんな感じです。

Homebrewをインストールするとこんなことできます

# 「nodenv」というアプリをインストールする
$ brew install nodenv

この brew コマンドがHomebrewです。

ターミナルで次のコマンドを実行してHomebrewをインストールします。

Homebrewをインストールするコマンド

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

nodenvをインストールする

先ほどインストールしたHomebrewを使って「nodenv」というアプリをインストールします。

Homebrewを使ってnodenvをインストール

$ brew install nodenv

これからの開発で「Node.js（ノード・ジェイエス）」というプログラミング言語を使います。ブラウザ上で動くJavaScriptをmacやLinuxで動くようにしたもの、という認識で大丈夫です。

Node.jsは日々アップデートされていて、最新バージョンは 13.5.0 です（2019/12/28現在）。
一つのmacで開発をしていると、あるアプリAではNode.jsのバージョン 10.14.0 を使っていて、別のアプリBではNode.jsのバージョン 13.5.0 を使う、なんてことがよくあります。

そんなとき、フォルダごとにNode.jsのバージョンを切り替えられるようにするアプリがこのnodenvになります。

「開発しているアプリ全部、最新のNode.jsを使っちゃいかんのか！？」と思うかもしれませんが、何も考えずにNode.jsのバージョンを上げると、古いNode.jsに合わせてインストールされている関連ライブラリや、古いNode.jsで動くようなコードが動かなくなります。

プログラミング言語や使っているライブラリのバージョンは適当に上げるのではなく、しっかりと計画を立てて、影響を考慮して慎重に行うのが鉄則です。

nodenvを使ってNode.jsをインストールする

今回はNode.js 12.7.0 を使います。
先ほどインストールしたnodenvを使ってNode.jsをインストールします。

nodenvを使ってNode.jsをインストールする

$ nodenv install 12.7.0
$ nodenv rehash

これでNode.js 12.7.0 がインストールできました。
macにインストールされているNode.jsのバージョンは次のコマンドで確認できます。

nodenvでインストールされているNode.jsのバージョンを確認

$ nodenv versions
* system (set by /Users/tetsushi/.anyenv/envs/nodenv/version)
  7.1.0
  10.4.1
  10.14.2
  12.7.0
  13.0.1

合計7個のNode.jsがインストールされています。

作業ディレクトリを作る

これからサンプルアプリを作っていくのに使うディレクトリを準備します。
（ちなみに「ディレクトリ」と「フォルダ」は同じものです。）

作業ディレクトリを作る

# ホームディレクトリに「tyotto」というディレクトリを作る
$ mkdir ~/tyotto

macOSでは、 ~/ は自分のホームディレクトリを表します。
僕のmacでは、僕のユーザー名は tetsushi にしてありますが、その場合 ~/ は /Users/tetsushi と同じです。

作業ディレクトリのNode.jsのバージョンを設定する

先ほどインストールしたnodenvを使って、 ~/tyotto のNode.jsのバージョンを設定します。

nodenvを使ってNode.jsのバージョンを指定

# カレントディレクトリを移動
$ cd ~/tyotto

# Node.jsのバージョンを指定
$ nodenv local 12.7.0

# Node.jsのバージョンを確認
$ node -v
v12.7.0

これで準備完了です！
今後、 ~/tyotto より下層のディレクトリでは、Node.js 12.7.0 が動作するようになります。

Ionicアプリを作る

ようやく本題です。
Ionic CLI（Ionicの開発環境を整えてくれるアプリ）を使ってIonicアプリを作っていきます。

IonicCLIを使ってIonicアプリを新しく作る

# カレントディレクトリを移動
$ cd ~/tyotto

# Ionicアプリを新規作成
$ npx ionic start MyFirstApp

# 設定項目をどうするか聞かれるので、次のように設定していく

# どのJavaScriptフレームワークを使うか？：Angularを選択
Please select the JavaScript framework to use for your new app. To bypass this prompt next time, supply a value for the
--type option.

? Framework: (Use arrow keys)
❯ Angular | https://angular.io
  React   | https://reactjs.org

# 標準で用意されているアプリの雛形のうち、どれを使うか？tabsを選択
Starter templates are ready-to-go Ionic apps that come packed with everything you need to build your app. To bypass this
prompt next time, supply template, the second argument to ionic start.

? Starter template:
❯ tabs         | A starting project with a simple tabbed interface
  sidemenu     | A starting project with a side menu with navigation in the content area
  blank        | A blank starter project
  my-first-app | An example application that builds a camera with gallery
  conference   | A kitchen-sink application that shows off all Ionic has to offer

これでもう準備完了です。
早速アプリの開発環境を起動して、ブラウザで動作確認をしてみます。

# カレントディレクトリを移動
$ cd MyFirstApp

# 開発サーバーを起動
$ npx ionic serve

ちょっと待つと自動的にブラウザが起動して、次のような画面が開きます。

これでアプリの開発環境が整いました！

コードを変更してみる

では、Ionic CLIで生成されたコードを変更してみます。
エディタはVS Codeを使います。

VSCodeを起動

# カレントディレクトリは ~/tyotto/MyFirstApp の前提です。そうでない場合は以下のコマンドを実行して移動します。
$ cd ~/tyotto/MyFirstApp

# VS Codeを開く
$ code .

ここで -bash: code: command not found というエラーが出てしまう方はおそらくVS Codeの設定が済んでいません＞＜ VS Codeを開いて、 ⌘ + o（アルファベットのオー） を押して ~/tyotto/MyFirstApp を開きましょう。

VS Codeを開いたら、サイドバーで src/app/tab1/tab1.page.html をクリックしてソースコードを開きます。

これが、先ほど $ npx ionic serve コマンドを実行して開いた画面のソースコードになります。これを変更して保存すると、即座にブラウザに変更が適用されます。

tab1.page.html の内容を次のように変更してみました。

src/app/tab1/tab1.page.htmlの内容

<ion-header>
  <ion-toolbar>
    <ion-title>
      初めてのアプリ開発
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  Ionicを使ってアプリを開発してみました！
</ion-content>

保存すると、先ほど開いたブラウザが自動的に更新されます。

無事変更が適用されたものの、ちょっと素朴すぎますね...

HTMLとCSSをいじって多少見栄えを整えます。

src/app/tab1/tab1.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      初めてのアプリ開発
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="main_caption">
    Ionicを使ってアプリを開発してみました！
  </div>
</ion-content>

/app/tab1/tab1.page.scss

.main_caption {
  color: #3988f0;
  font-size: 24px;
  font-weight: bold;
  padding: 40px;
}

このようにソースコードを変更して保存すると、ブラウザは次のように変わります。

簡単ですね！あとはWebサイトを作るときと同じ要領でHTML/CSSを書いていけばOKです。

ステップアップ

さて、先ほどの変更の中で、HTMLファイルに見慣れない <ion-content> などのタグっぽいものがありました。これは何かというと、Ionicが提供してくれているタグです。

IonicはUIフレームワークでもあるので、このように提供されているタグを使うことで、独自のHTML/CSSを一切書かなくても美しいUIを作ることができます。

試しに以下のように <ion-list> や <ion-item> タグを使うと...

src/app/tab1/tab1.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      初めてのアプリ開発
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item>
      <ion-label>Pokémon Yellow</ion-label>
    </ion-item>
    <ion-item>
      <ion-label>Mega Man X</ion-label>
    </ion-item>
    <ion-item>
      <ion-label>The Legend of Zelda</ion-label>
    </ion-item>
    <ion-item>
      <ion-label>Pac-Man</ion-label>
    </ion-item>
    <ion-item>
      <ion-label>Super Mario World</ion-label>
    </ion-item>
  </ion-list>
</ion-content>

こんな感じのUIが出来上がります。

とても便利ですね。Ionicが提供しているタグ（コンポーネント）は以下のドキュメントから見ることができます。

ではでは、良いお年を！