はじめに

これからWebViewベースのアプリを作ろうと思いたち先日はReact Nativeの環境構築を行ったのですが、
考えてみればWeb側は（なんとなく）Vue.jsを使ってみたいなと思っていたのでした。
Vue.jsでReact Nativeっていうのも変だなと思い調べてみたところ、
Vue.jsのNative版はWeexとVue Nativeというものがあるとのことでした。
Vue Nativeは公式ドキュメント以外ほとんど検索で引っかからなかったのと、
そもそもベースがReact Nativeのようだったので、今回はWeexを試してみることにしました。

インストール

$ node -v
v8.8.1

npmを使って、weex-toolkit、webpack、webpack-dev-serverの3つをインストールします。

$ sudo npm -g i weex-toolkit webpack webpack-dev-server

iOSでもビルドする場合は、XCodeのコマンドラインツールをインストールしておきます。

$ xcode-select --install



プロジェクト作成

Weexプロジェクトを作成したいディレクトリに移動し、下記を実行します。

$ weex create （プロジェクト名）

すると、途中で色々聞かれます。

? Target directory exists. Continue? Yes　（同一名称のディレクトリがない場合は聞かれないと思います）
? Project name （プロジェクト名を入力します。大文字はNGのようです）
? Project description （プロジェクトの説明を入力します）
? Author （著者名を入力します）
? Select weex web render latest　（よくわかりませんがおすすめを）
? Babel compiler (https://babeljs.io/docs/plugins/#stage-x-experimental-presets) sta
ge-0　（これもよくわかっていませんがおすすめを...）
? Use vue-router to manage your view router? (not recommended) No　（よくわかりませんが非推奨だったのでNo...）
? Use ESLint to lint your code? Yes　（Lintツールは入れておいたほうがいいかなと）
? Pick an ESLint preset Standard　（ESLintの種類ですかね）
? Set up unit tests Yes　（テストコードを書くかは決めていませんでしたが、とりあえず入れてみました）
? Should we run `npm install` for you after the project has been created? (recommend
ed) npm　（勧められるがままに...）

最終的に、下記が表示されれば完了。

Success! Created （プロジェクト名） at （プロジェクトの作成時に指定したパス）

起動

プロジェクト作成の最後に、こんな文言。

To get started:

  cd （プロジェクト名）
  npm start

ということで、そのまま実施してみました。

$ cd （プロジェクト名）
$ npm start

> （プロジェクト名）@1.0.0 start （プロジェクトパス）
> npm run serve


> （プロジェクト名）@1.0.0 serve （プロジェクトパス）
> webpack-dev-server --env.NODE_ENV=development --progress

 10% 10% 10% 11% 11% 13%  13% 14 14 14% 14%  95% emitting
 DONE  Compiled successfully in 37323ms                                     16:26:16

最初にインストールしたwebpack-dev-serverを使って起動します。

こんな感じで、初期画面がブラウザで表示されました。



Weex Playground Appで確認する

どうやらWeexにはアプリがあり、
アプリ内のQRコードリーダーで読み取るとモバイルで簡単に確認することができるらしいので試してみました。

AppStoreからダウンロード。
Webサイトまでは英語だったのに、アプリのスクリーンショットや説明文はすべて中国語でドキッとしました。
そもそもVue自体が中国で主流ですもんね。

起動するとこんな画面。

Scan QR Codeをタップし、QRを読み込むと…

みれた！
なかなかいい感じです。
わざわざビルドしなくても簡単に確認できるのが助かりそうです。

おわりに

React NativeもWeexも環境構築においては大差なさそうです。
強いて言うなら、Play Groundがあるという意味でWeexのほうが上でしょうか。
ただしQiitaの投稿件数はReact Nativeが699件、Weexが15件なのでかなりの格差があります。
複雑なアプリを作る予定があるのであれば、React Nativeにしておいたほうが無難かもしれません。

スポンサーリンク