Ionic、Vue.jsインテグレーションのαリリースを発表

VueConf Torontoにおいて、Ionicは@ionic/vueの最初のαリリースを発表した。これは任意のVue.jsプロジェクトにIonic 4を追加して、Vue.jsフレンドリーなやり方でIonicのAPIにアクセスできるようにする。

バージョン4以前、Ionicの主なフォーカスはAngularだったが、Ionic 4の目標は、Ionicを任意のフレームワークとシームレスに動くようにし、柔軟性のあるユーザーインターフェイスコンポーネント層を提供することだ。

IonicチームはAngularからの独立を確かにするため、Vue.jsとIonicのインテグレーションがうまくいくか検証する必要があった。IonicとVue.jsのインテグレーションがうまくいくかは、Modus Createとのコラボレーションによりテストされた。ModusはIonic Framework、Vue.js、Capacitorを利用して、電子メールが何らかのデータ侵害に関わっているかチェックするアプリBeepを作成した。

Vue.jsアプリケーション内でIonicを使うには、npmで@ionic/vueパッケージをインストールする。

npm install @ionic/vue

次に、アプリケーションのmain.jsでIonic Frameworkをインストールする。

import Vue from 'vue';
import App from './App.vue';

import { Ionic } from '@ionic/vue';

Vue.use(Ionic);
new Vue({
  render: h => h(App)
}).$mount('#app');

Ionicはオープンソースのフレームワークで、HTML・CSS・JavaScriptを用いたクロスプラットフォームアプリケーション構築のためのUIコンポーネントを備えている。Ionicアプリケーションは、iOSやAndroidデバイスに、Electronを用いてデスクトップに、またはプログレッシブWebアプリとして、ネイティブにデプロイできる。

IonicのMike Hartington氏によると、Ionicチームは@ionic.vueの改善に関する早期フィードバックを求めているという。

常々、Ionicの最大の資産は大規模で情熱的なコミュニティだと言ってきました。私たちは皆さんのフィードバックを必要としています。あなたがVueの大ファンでIonic Frameworkを試したければ、どうか私たちに教えてください。Ionicのフォーラム、Slack、GitHubからコンタクトできます。

Twitterを通じたコミュニティからの最初のフィードバックは概ねポジティブだ。MicrosoftでプリンシパルデベロッパーアドボケイトのJohn Papa氏は、vue-cli addコマンドでIonicをインテグレートする計画があるか質問し、Hartington氏からIonicは「私たちのcliからvueプロジェクトタイプと、追加するためのプラグインを提供するつもりだ」という返事を得た。

最近のNativeScriptのVue.jsサポートと今回のIonicで、フルスタック開発者のRich Klein氏は@ionic/vueへの関心を示した。

Vue.jsは快進撃だね。β版になったら絶対プロジェクトで試したいよ。

@ionic/vueはMITオープンソースライセンスで利用可能だ。@ionic/vue GitHubパッケージ経由でコントリビューションは大歓迎だ。ただし、Ionic コントリビューションガイドラインと行動規範に従わなくてはならない。