JavaもSwiftも知らん素人がIonicでスマホアプリをつくる（その1 開発準備とテストアプリ作成編）

## スマホアプリが作りたくなる衝動

RubyでWEBサイトはつくれる。
でも最近のZ世代はスマホしか使わん。
そしてよく使うサービスはAppStoreとかGooglePlayからダウンロードしてる。
だからWEBサイトだけでなくこのスマホアプリが作りたいのだ。

## JavaもSwiftも知らん素人がIonicでスマホアプリをつくるには

Androidアプリの場合はJava、iOSアプリの場合はSwiftとなんで2言語も勉強せねばならんのか。
技術を磨くのではなく、アプリを作りたいだけで、AndroidアプリもiOSアプリも作る必要あるなら、
その選択肢の1つはIonicというヤツをつかえばよい。

IonicはHTML5でつくったアプリをWebだけでなく、iOSアプリやAndroidアプリとしてもリリースすることができる。

ようは、いままでRubyでWEBサイトつくってんなら、多分使ってる言語はHTML, CSS, Javascript, Rubyだろう。
で追加で言語勉強せずにスマホアプリも作れるってわけだ。

あんま難しいこと考えず、さっそく開発環境構築する。
ちなみに環境は`開発端末→Widows10、コマンドライン→Gitbush`だ。
それ以外のひとは雰囲気で応用してほしい。すまん。

## Node.jsのインストール

`Node.JS`っていうのは言語だ。PHPで開発したい時、事前にPHPをインストールするのとにたようなイメージだ。細かいことは気にするな。

まずはずでにNode.jsがインストールされているかチェックすべく、
下記コマンドを実行。

```
$ node -v
```

下記のようにバージョン表示されたらすでにインストールされてるのでOK

[![Image from Gyazo](https://i.gyazo.com/bd592c0900e85a8491ee8ce2d0d78281.png)](https://gyazo.com/bd592c0900e85a8491ee8ce2d0d78281)

もし反応しなかったら下記サイトにアクセス

https://nodejs.org/ja/

[![Image from Gyazo](https://i.gyazo.com/b5ca0e594cb6859a35196b9d3714fc93.png)](https://gyazo.com/b5ca0e594cb6859a35196b9d3714fc93)

インストーラをダウンロードして、実行して、インストール。
でコンソールで`node -v`を実行してバージョン表示されたらインストールは成功しているということ。

## Ionic CLIのインストール

`Ionic CLI`というのはionicコマンドをつかえるようにするヤツ。
下記コマンドで`Ionic CLI`をインストール。
※結構時間かかる。

```
$ npm install ionic cordova -g
```

[![Image from Gyazo](https://i.gyazo.com/ae713cf9f175d84fbb6cc190d1b92e34.png)](https://gyazo.com/ae713cf9f175d84fbb6cc190d1b92e34)

```
$ ionic -v
```

[![Image from Gyazo](https://i.gyazo.com/07f013742ba5e8d246ad98c3244a92dc.png)](https://gyazo.com/07f013742ba5e8d246ad98c3244a92dc)

## Gitのインストール

Gitは何やかんやいるんですよ。詳しくはしらん。とりあえずいるのでインストール必須。
すでにGitがインストールされてるか下記コマンドで確認。

```
$ git --version
```

[![Image from Gyazo](https://i.gyazo.com/cfe04898d2e20d33cbb890877e1afbdd.png)](https://gyazo.com/cfe04898d2e20d33cbb890877e1afbdd)

上のようにバージョンが表示されたらインストール済。
もし動かんかったら下記サイトにアクセスしてインストールしよう。

https://git-scm.com/downloads

[![Image from Gyazo](https://i.gyazo.com/719927cb9e8523b5e310a71afa361ab6.png)](https://gyazo.com/719927cb9e8523b5e310a71afa361ab6)

## Android Studioのインストール

Android StudioはAndroidアプリのリリース時に必要なので、しゃあなしでインストール。

下記サイトにアクセス。
信じられへんくらい時間かかるからカップ麺でもくいながらインストール推奨。

https://developer.android.com/studio

[![Image from Gyazo](https://i.gyazo.com/f937c425b6363414c3f83cd8e9a56ff0.png)](https://gyazo.com/f937c425b6363414c3f83cd8e9a56ff0)

## Xcodeのインストール

iOSアプリのっリースに必要だが、Macbookもってないので、いったん断念。スルー。

## Ionicプロジェクト作成

では早速テストアプリを作成する。
まずはテキトーに**ionic開発用のディレクトリを作成して、そのディレクトリの中で**下記コマンドを実行する。

```
$ ionic start test03 tabs --type=ionic-angular
# コマンドの構文としては ionic start アプリ名 テンプレート名  --type=ionic-angular
```

[![Image from Gyazo](https://i.gyazo.com/e14defd57c7e762acad485c128334415.png)](https://gyazo.com/e14defd57c7e762acad485c128334415)

そうするとアプリ名のディレクトリが出来上がっているので、そこに入って下記コマンドを実行

```
$ ionic serve
```

[![Image from Gyazo](https://i.gyazo.com/d208c7e484a911a96890dd0fa3b53724.png)](https://gyazo.com/d208c7e484a911a96890dd0fa3b53724)

すると勝手にブラウザがたちあがる。

[![Image from Gyazo](https://i.gyazo.com/4172dacff00bcafa7a3b6f300663b476.png)](https://gyazo.com/4172dacff00bcafa7a3b6f300663b476)

余裕やな。

[JavaもSwiftも知らん素人がIonicでスマホアプリをつくる（その2 アプリリリース編）](https://qiita.com/kakiuchis/items/20f5e2872a2b7a7ad107)に続く。。