user icon

Framework7 Vue を調査する

以前の記事『Framework7のrouter.backで戻っても最新データに更新したい』でいろいろと調べてたときの手法をまとめてみるなど。

情報収集からデバッグ手法まで雑多なので曖昧な「調査する」というタイトルにしてみました。

そうそう、せっかくなので本家(https://framework7.io/)のスポンサーのところをキャプチャして貼っときますね。弊社が載ってます。

この記事にもスポンサーが更新されてない日本語サイト(https://framework7.jp/)しかでてこなかったりしますし、少しは主張を。

Framework7 Vue の事情

Framework7は決して薄くないフレームワークなのでFramework7側を調べたほうが良いことが多いと思います。もちろんVueの知識も必要になりますが(ちなみに今回はVueといったらVue3を指していると思ってください)

Framework7側の事情でVueでの一般的な書式と少し違う書き方を求められる事などもありますので注意しましょう。

なにはともあれ公式ドキュメントを読もう

Framework7もVueも日本語化された公式ドキュメントが充実しているのでまずはこれらをみましょう。必要情報を探すのもそうですが定期的に繰り返し全体を見返す位がいいと思います。よく「以前探してて見つからなかったヤツだ!出来たんかい!」とかなります。

Framework7の日本語化された公式ドキュメントは 日本語サイトのトップ(https://framework7.jp/)からたどることができます。

Framework7 Vue (https://framework7.jp/vue/)

前述の「Framework7側の事情でちょっと変わった書き方を求められる」などの情報は Framework7 Vue のドキュメントに情報があります。逆に「Framework7では簡単にできてたのにVueと組み合わせた場合にどうやったらいいかわからん!」といった場合もここのどこかに情報が埋まっていることが多いです。例えば

「あれ? v-model じゃだめなん?」

入力/フォーム要素 Vueコンポーネント(https://framework7.jp/vue/inputs.html)に以下の記述があります。気づかないとハマります。

f7-list-inputとf7-inputのVueコンポーネントは、valueのpropにv-modelをサポートしています。

<template>
  <p>Name is {{ name }}</p>
  <p>Email is {{ email }}</p>
  ...
  <f7-list-input
    label="Name"
    type="text"
    placeholder="Your name"
    clear-button
    v-model:value="name"
  />

  <f7-input
    type="text"
    placeholder="Your email"
    clear-button
    v-model:value="email"
  />
  ...
</template>
<script>
  export default {
    data() {
      name: '',
      email: '',
    },
    ...
  };
</script>

「Framework7のrouter、簡単に取得できないん?」

Vueコンポーネントの拡張機能(https://framework7.jp/vue/vue-component-extensions.html)に情報がありました。

ルーターのインスタンスと現在のルートは、ルーターコンポーネントにpropsを介して渡されます。

<template>
  ...
</template>
<script>
  export default {
    // コンポーネントが受け取れるようにpropsを定義します。
    props: {
      f7route: Object,
      f7router: Object,
    },
    ...
    mounted() {
      console.log(this.f7route.url)
    },
    methods: {
      navigate() {
        this.f7router.navigate('/some-page/')
      }
    }
  };
</script>

これ、気づくまでかなり困ってました。

Framework7 Core (https://framework7.jp/docs/)

Framework7自体のドキュメントです。Framework7 Vue のドキュメントだけでなくこちらについても読んだり情報を探したりすると良いです。以前の記事に書いたpage:reinit(pageReinit)イベントはこちらで見つけました。

まぁ、後で確認したらFramework7 Vueの方にも載ってたんですが(https://framework7.jp/vue/page.html)

どちらかというとpageのイベントということでなかなか気づかなかったんですよね。router調べてたので。

Vue.js devtools が便利すぎる

以前はVue3の場合beta版を使用する必要がありましたが、現在のバージョン(6.1.4)はVue3に対応しています。
ともかく便利なので使おう! というか、ないとやってられない。

私はChrome拡張のを使ってます。
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=ja

前述のpropsで受け取ったf7routerを覗いて構造やヒストリーを確認したりもできます。最高!

ソースコードを読んだりもする

router.backとrouter.navigateの動作を調べていた際はソースコードを読んでrouter.backがrouter.navigateにわたすオプションと追加処理の組み合わせで実現されているのを確認して「ヒストリー直接弄れそうなのでどうにかなるな」と思ったりしました。

ちょっと試して「これ全部navigateで書き直すのと変わらんのでは」と思い直して別の手段がないか調査に戻りましたが。

なんだかんだで console.log

「本当にこの処理通ってる?」とか「処理の順番どうなってる?」とか、なんだかんだでconsole.logしちゃうのが手っ取り早いですね。

結局は?

いろいろと試した末に「こういうイベントがあるといいんだけどなぁ」と思いつつ公式ドキュメントを頭から読み直してたら使えそうなイベントが見つかったのでした。

そんで console.log で動きを確かめて「使える! ひゃっほー!」となりましたとさ。

Facebooktwitterlinkedintumblrmail

タグ: ,

名前
E-mail
URL
コメント

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)