Onsen UI が Vue.js を完全サポート！

（この記事は JÚNIO SILVA が 2017年7月4日に英語版 Monaca x Onsen ブログに投稿した Onsen UI has full Vue.js support! の翻訳です。）

Onsen UIのVue.js インディングの改良に時間を費やすこと数か月、ついにVue.js向けバインディングの最終版をリリースすることができました。

Vueのユーザー数が急速に増えているのは皆様もご存知かと思います。
そのいった状況の中でVue.jsに興味を持たれ、Vue.jsアプリ開発時に使用できるUIフレームワークを探していた開発者様に朗報です。
Vue同様に簡素で、性能が良く、パワフルで、しかもさらに磨きのかかったOnsen UIをこの機会にお試しになってはいかがでしょうか。

はじめに

最初にOnsen UIのウェブサイトが大幅にリニューアルされたことをお伝えします。
リニューアル後のページでは初心者様向けの解説と基本機能・アドバンス機能に関する解説が充実し、Onsen UIの導入がよりスムーズに行えるように内容を構成しています。
また、各種JavaScriptフレームワーク（Angular、React、Vue.jsなど）とのバインディングおよびOnsen UIに関する理解を深めるための解説やFAQ項目も加えられました。

Onsen UIを一度も試したことがない方のために Onsen UIの概要をここで簡単に説明させていただきます。
Onsen UIのウェブサイトにも記載されているように、Onsen UIはiOSとAndroid向けUIガイドラインに準拠したUIコンポーネントを提供してくれるフレームワークです。
また、これらのコンポーネントは即利用可能な状態で提供され種類も豊富です。
ボタン・入力欄などからよりページ遷移機能を提供する複雑なメニューに至るまで各種コンポーネントを取り揃えています。
また、使用する端末（iOS/Android）に応じて操作性と外見が自動で切り替わります。

Onsen UIのVue.jsバインディングを使用すれば、洗練された美しさとネイティブさながらの外見を併せ持つ、高性能なハイブリッドアプリまたはプログレッシブウェブアプリを開発することができます。
それではOnsen UIを実際に使用してみましょう。最初にこちらのインストールガイドをご確認いただき、次にVue.jsバインディングに関するガイドをご確認ください。
また、お時間があれば以前の記事もご確認ください。この記事は「Onsen UI for Vue 2（ベータ版）」のリリース時に執筆したもので、「Kitchen Sinkアプリ」と呼ばれるデモ用アプリを使用して各コンポーネントの実装方式の詳細などを解説しています。

更新した点

ここからは、Onsen UIとVue.jsを使用したことのある上級者様向けのお話となります。

vue-onsenui パッケージのベータ版から最終版までの間にリリース候補版を1つだけリリースしました。
リリース候補版ではいくつかの点が変更されましたが、Onsen UIのコア部分に加えた最も大きな変更点は <ons-input> コンポーネントを、 <ons-input> 、 <ons-checkbox> 、 <ons-radio> 、 <ons-search-input> に細分化したことです。
これに伴い、 vue-onsenui パッケージの使用時には <v-ons-input type="checkbox"> と記述する代わりに <v-ons-checkbox> と記述します。radio と search-input に関してもこのような記述方法を使用します。

これにより、Onsen UI提供のカスタムディレクティブ v-ons-model を使用せずともVue.js提供の v-model を使用すればテンプレート側とのバインディングができるようになりました。また、これからは v-model を使用すればすべてのinputタイプに対応することができます。

また、 <v-ons-tabbar> で使用されている tabs プロパティ（配列型）では props プロパティが使用できるようになりました。これにより、各タブに関連づけされているページのコンポーネントへもプロパティを簡単に渡せるようになりました。

プログレッシブウェブアプリのサポート

Onsen UI開発陣の熱い思いをギュッと詰め込んだAPI（Vue.jsとOnsen UI のイイとこ取りをしつつ、Vue.jsアプリ用に最適化され、しかもプラグインとして組み込むことができ、それでいながら簡素！）を開発者様へお届けしたい一心で前述のような変更を施しました。

また、この更新により、Cordovaアプリだけではなく将来有望視されているプログレッシブウェブアプリ（詳細はこちら）も作成できるようになりました。
また、テンプレートも作成してみましたので、使用する場合は次のコマンドを vue-cli 上で実行してください。

// Cordovaアプリの場合
$ vue init OnsenUI/vue-cordova-webpack hello-world

// プログレッシブウェブアプリ（PWA）の場合
$ vue init OnsenUI/vue-pwa-webpack hello-world

上記を含む豊富なテンプレート、洗練されたデザイン性、多様で使いやすいツール群、充実したドキュメント・チュートリアル・サンプルアプリに至るまで、開発に必要なすべてが備わった私どものVue.js向けのUIフレームワーク「Onsen UI」を、ぜひ一度お試しください。（Monacaもよろしくお願いいたします）

また、Onsen UI開発チームが主催するコミュニティーを近日中に立ち上げる予定です。
Vue.js と Onsen UI にご興味をお持ちの方はぜひご参加ください。
いっしょに活発なコミュニティーを作っていきましょう！
また、お問い合わせ・ご意見に関してはコミュニティーフォーラムまたはGitterまでお寄せください。
Issue（問題などの報告）・enhancementリクエスト（機能強化の要望）に関してはGitHubページまでお寄せください。
どんな些細なことでも構いませんのでぜひご共有ください。

Onsen UIは、ハイブリッドアプリ向けのUIを作成するためのオープンソースのライブラリです。
詳細は、GitHubページをご確認ください。また、Onsen UIを応援してくれる方はぜひスター（★）をポチッとお願いいたします。

翻訳者紹介