Vue.jsでSPA - [13] モバイル向けに OnsenUI に手をだす

# はじめに

もともとWebアプリのつもりだったので、`ElementUI` + `Vue.js` でやってたのだが、周りから「どうせやるならモバイルで使えるようにせえや」と言われてフロントを変更することにした。気にはなっていたのだが、`ElementUI` はレスポンシブ対応ではないのである。`Vue` は使い続けたいのでフロントだけ替えて、とりあえず昔からちょっと気になってた `OnsenUI` でいくことにする。

# スクリーンショット

ひとまずこれまでやってきた ElementUI のフロントを OnsenUI で作り替えてみたのがこれ。裏でやってることは基本的にこれまでと同じ。

![onsen-ui.gif](https://qiita-image-store.s3.amazonaws.com/0/32540/411bfb07-efae-83e8-1c0e-2008d45310bf.gif)


# OnsenUIやってみて

## メジャーなUIフレームワークのAPIが揃っている

`Vue`, `Angular`, `React` などメジャーどころはカバーされているので移行しやすい感じ。また iOS, Android 共に結構普通に見かけるUIパーツをすぐに使える。

## Pageという考え方

HTMLの中で`<v-ons-page>`タグで囲ったところがモバイル画面上での一つのページの扱いになる。

```html:index.html
<template id="page1">
  <v-ons-page>
    <!-- Page1 contents here -->
  </v-ons-page>
</template>

<template id="page2">
  <v-ons-page>
    <!-- Page2 contents here -->
  </v-ons-page>
</template>
```

## Vueをマップ

`template` を指定していつものように各ページに `vue` をマップ出来る感じ

```javascript:index.html
<script>
const page1 = {
  template: '#page1',
  data() {
    return {
      page1_data: [{msg: "A"}, {msg: "B"}]
    }
  },
  methods: {
    //your methods here
  }
}

const page2 = {
  template: '#page2',
  data() {
    return {
      page2_data: 1
    }
  },
  methods: {
    //your methods here
  }
}
</script>
```

## `vue-router` なしで画面遷移

これまでは`vue-router`で画面遷移を作ってきたが、OnsenUIだと`Navigation`というのがあり、これで基本的な画面遷移ができる。`vue-router`なしでもだいたいできる感じ。例えば `page1` から `page2` へはこんな感じ。ページ遷移のアニメーションもある程度モバイルっぽい動きがサポートされている

```javascript:index.html

  // a method in 'const page1'
  methods: {
    goToPage2() {
      this.$emit('push-page', page2);
    }
  }
```

## ページ間での情報の受け渡し

OnsenUIの `Navigation` だと例えば以下のように `page1` から `page2` へ `data()` を渡すことができる。

```javascript:index.html
  methods: {
   dataFromPage1ToPage2() {
      this.$emit('push-page', {
        extends: page2,
        data() {
          return {
            passing_value: 10
          };
        }
    }
```

今のところ使った機能、目立った違いはこのくらいだ。またアプリ開発を進める上で何か見つかったら書き足すかも。

# 今後

今回のようなアプリのフロントとしては OnsenUI は十分な感じがする。ひとまず UI はこの路線で、もう少し OnsenUI を使い込んでみることにする。あと、OnsenUI 使うなら Monaca で開発した方がいいのだろう。Monaca も試してみる。

## シリーズ

- [Vue.jsでSPA - [1] Element UIでベースの画面をつくる](https://qiita.com/narutaro/items/50d0e4714f93279502c9)
- [Vue.jsでSPA - [2] Element UIで各ペインの画面をつくる](https://qiita.com/narutaro/items/9abbf7881f692c985484)
- [Vue.jsでSPA - [3] vue-routerでルーティング ](https://qiita.com/narutaro/items/74178f4ea031b0ccfa44)
- [Vue.jsでSPA - [4] コンポーネントにしてみる ](https://qiita.com/narutaro/items/df793bb34129d113d9f2)
- [Vue.jsでSPA - [5] リアクティブになってる？](https://qiita.com/narutaro/items/bed4eab6e53e3b46c0b2)
- [Vue.jsでSPA - [6] サーバからのデータ取得](https://qiita.com/narutaro/items/82f4d9635c398524431c)
- [Vue.jsでSPA - [7] Vueからサーバデータ取得](https://qiita.com/narutaro/items/91da194788318c226e0e)
- [Vue.jsでSPA - [8] バックエンドとうまくやっていこうとして試したこと](https://qiita.com/narutaro/items/3b7135eed8f6e930a0e6)
- [Vue.jsでSPA - [9] 今更ながらCORSとそのエラーの回避方法](https://qiita.com/narutaro/items/26e4cbec386bc054bbd7)
- [Vue.jsでSPA - [10] Safari..お前か...3rd party cookie](https://qiita.com/narutaro/items/e53f653d73a6934046d0)
- [Vue.jsでSPA - [11] Element UIでログイン画面](https://qiita.com/narutaro/items/010009c0198371fee658)
- [Vue.jsでSPA - [12] ログイン：シングルペインからツーペインへ画面遷移](https://qiita.com/narutaro/items/fca953b3b2ed5c63360c)
- [Vue.jsでSPA - [13] モバイル向けに OnsenUI に手をだす](https://qiita.com/narutaro/items/bdc0e25c22369466bed3)
- [Vue.jsでSPA - [14] Vue.jsとOnsenUIを使ったオレオレなショッピングカートチュートリアル](https://qiita.com/narutaro/items/9502b90b565366911c57)
- [Vue.jsでSPA - [15] 世界中の人とミーティング時間を決める時に便利なやつ](https://qiita.com/narutaro/items/d6431f54050504bf1551)
- [Vue.jsでSPA - [16] へー、FirebaseでWebアプリのログインってこうやるのか](https://qiita.com/narutaro/items/3c37fe6c3b19a6143a07)