Onsen UI for Vue 2 の最初の α 版(2.0.0-alpha.0
)をリリースしてから4週間ほどが経ちました。
Onsen UI for Vue 2 をお使いの皆さん向けに、最近のニュースをお知らせします。
2.0.0-alpha.1
以降にて、全てのメソッドを廃止します
2.0.0-alpha.0
では、Vue コンポーネントを読み出し・操作するための API として、
プロパティ、イベント、スロットに加えて、メソッドを提供していました。
しかし、メソッドを用いた書き方は、Vue.js のしきたりに沿うものではなく好ましくありません。
そのため、2.0.0-alpha.1
以降にて、全てのメソッドを廃止します。
2.0.0-alpha.1
以降では、代わりにプロパティ、イベント、スロットを使用して Vue コンポーネントを読み出し・操作します。
例えば v-ons-navigator
コンポーネントの場合は page-stack
プロパティを使用します。
<!-- プロパティを利用 (pageStack の初期値は [page1] とする) -->
<v-ons-navigator :page-stack="pageStack"></v-ons-navigator>
...
this.pageStack.push(page2);
このように、2.0.0-alpha.1
以降ではプロパティ、イベント、スロットのみを使用して UI を構築する必要があることに注意してください。
2.0.0-alpha.1
以降にて、カスタムディレクティブ v-ons-open
, v-ons-index
を廃止します
2.0.0-alpha.0
では、
v-ons-splitter-side
コンポーネントなどのために v-ons-open
ディレクティブを、
v-ons-carousel
コンポーネントなどのために v-ons-index
ディレクティブを提供していました。
しかし Vue.js のメイン開発者である Evan You 氏からのフィードバックを受けて、
v-ons-open
のような一部のカスタムディレクティブは廃止すべきであるとの結論に至りました。
今後はプロパティやイベントを用いて、変数値とコンポーネントの状態を同期します。
例えば v-ons-carousel
コンポーネントでは index
プロパティと swipe
イベントを使用します:
<!-- プロパティとイベントを利用 -->
<v-ons-carousel :index="carouselIndex" @swipe="carouselIndex = $event">
...
</v-ons-carousel>
バグ修正を行っています
2.0.0-alpha.0
リリースの後、私達はいくつかのバグを発見しました。
また、ユーザの皆さんからもいくつかのバグ報告をいただきました。
具体的には以下のようなバグがありました。
v-ons-tabbar
コンポーネントのpages
スロットに入れる Vue コンポーネントにおいてprops
を使用するとエラーが出る- Onsen UI for Vue 2 内部で使用している
Array.prototype.includes
がエラーを出す visibilityToggle
ミックスインがエラーを出す- Vue 2.2.0 以降で使用するとエラーが出る
そのため、API のブラッシュアップに並行して、これらのようなバグの修正も行っています。
今後の予定 — 2.0.0-beta.0
に向けて
以前の記事でお伝えしたように、最低限の機能が実装でき次第、α 版は β 版に移行します。
β 版への移行は、当初は2月中を予定していましたが、現在は3月中となる見込みです。
β 版までの作業としては以下のものを予定しています:
- Vue コンポーネントの API (プロパティ、イベント、スロット)をより改善します
- LazyRepeat を実装します
- Onsen UI Core の
ons
オブジェクトのラッパーを実装します - Vue 2.2 に対応します
- サンプルアプリを実装します
- E2E テストを拡充します
開発にご協力ください
私達は Onsen UI for Vue 2 を使いやすいものにしたいと思っています。
皆さんからのフィードバックを歓迎します。
何かお気付きの点があれば、GitHub レポジトリの Issues (英語) や Twitter (@Onsen_UI_ja) 等でお気軽にご指摘ください。
Onsen UI はハイブリッドアプリの UI 構築などに使えるオープンソースのライブラリです。詳しくは GitHub レポジトリ をご覧ください。Onsen UI が好きな方は、GitHub スターをつけるのをお忘れなく!★★★★★