Vue NativeでHelloWorld しようとしたらハマった

2018/12/01 MonacaUG at Omiya

Ryoma HOSHINO

- 新卒3年目 24歳

- さいたま市のとあるSIer

- 約1年間の外部常駐でCordovaアプリ3案件遂行

- 社内でアプリ開発の勉強会をやっています

- 最近AWSで360ドル請求されました

- UGに社員を呼ぶ方法を教えてください

- 最近社内の開発サーバーを壊しました

- 社員向けアプリをMonacaで構築中

- 月末にリリース予定でいます!

What is Vue Native ?

・React NativeのAPIをVueからたたけるFW

・React NativeはJSからNative Codeをたたく

Vue.jsでネイティブアプリケーションが作れる!

リリースは2018/06です!

Get Started !

vue-cli の vue init とほぼ同じですね

npm install -g vue-native-cli
vue-native init hello-vnative 
cd hello-vnative
$ vue-native --help
  Usage: vue-native [options] [command]
  Options:
    -v, --version                 output the version number
    -h, --help                    output usage information
  Commands:
    init [options] <projectName>

vue-native-init でやっていること

- 2つのコマンドインストール

 ◯create-react-native-app

  react-nativeプロジェクトの作成CLI
 ◯expo

  react-nativeアプリmonacaデバッガー的な

  ネイティブの開発環境無しで動かせる

 

- vue-nativeアプリの雛形作成

実機での確認

yarn start

localでexpoのサーバーが立ち上がり、

管理画面とロガーが表示されます

 

今回はiOSシミュレータ、実機での確認をします。

ともにexpoアプリの上でサンプルアプリが動作します。

 

Monacaデバッガーとおんなじノリですね。

管理画面はこんな感じ

立ち上げると...

😭😭😭😭😭😭😭😭😭😭

😭😭😭😭😭😭😭😭😭😭

😭😭😭😭😭😭😭😭😭😭

😭😭😭😭😭😭😭😭😭😭

😭😭😭😭😭😭😭😭😭😭

😭😭😭😭😭😭😭😭😭😭

😭😭😭😭😭😭😭😭😭😭

立ち上げると...

11/30時点で潜在的なバグがあるようです。

Githubのissuesで活発な議論が繰り広げられていました

ひとまず、./rn-cli.config.js を修正で

コンパイルは通るようになります。

./rn-cli.config.js

.expoの設定を司る/app.jsonから呼ばれている

-module.exports = {
-  getTransformModulePath() {
-    return require.resolve("./vueTransformerPlugin.js");
-  },
-  getSourceExts() {
-    return ["vue"];
-  }
-};
+const { getDefaultConfig } = require("metro-config");
+
+module.exports = (async () => {
+  const {
+    resolver: { sourceExts }
+  } = await getDefaultConfig();
+  return {
+    transformer: {
+      babelTransformerPath: require.resolve("./vueTransformerPlugin.js")
+    },
+    resolver: {
+      sourceExts: [...sourceExts, "vue"]
+    }
+  };
+})();

気を取り直して...

yarn start

😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮

やめました

雛形に回収を加える

ことにしました

エラーの原因と思われる

package.json, app.jsonを修正

 

moduleのver., scriptコマンド

を触りました

 

泣きの1回

yarn start

☺️☺️☺️☺️☺️☺️☺️☺️☺️☺️☺️☺️☺️☺️☺️☺️☺️☺️☺️☺️☺️☺️☺️☺️☺️☺️☺️☺️☺️☺️☺️☺️☺️☺️☺️☺️☺️☺️☺️☺️☺️☺️☺️☺️☺️☺️☺️☺️

Hello, Worldしてみる

思ったこと

- ガチネイティブAppよりスタートしやすい

 expoの上で動かせばmonacaデバッガと同じ感覚で開発できる!

 

- Vueで書けるのがありがたい!

 react nativeが出たとき、reactやったことない...って感じだった

 →Vueならできる!

 初めてのJS FWにVueがおすすめされるように、

 初めてのNative ScriptにVue Nativeおすすめできる!

思ったこと

- ネイティブコンポーネントの学習が必要

 buttonタグでなく、touchable-opacityタグを使う必要がある etc

 

- Device APIなどのネイティブ機能

 あんまり情報が多くない...

 Cameraまで実装しようとしたけどできませんでした😭

 

- React Nativeの成熟に依存

 react-nativeやexpoに振り回されるので、

 bugトレースが難しいなって思いました。

 もうちょい今後の動向を見てもいいかもって思います

 

https://github.com/Ryoma0219/vuenative-sample

helloworld using vuenative

By ohoshi

Private

helloworld using vuenative

どハマりした