Vue NativeでHello World!!までのチュートリアルを解説【所要時間30分】

Vue Nativeがなんなのかはこちらをみてみてください。

Vue Nativeとは？React Nativeを知らなくてもスマホアプリができる？

今回は簡単にVue NativeでHello Worldを出力するまでをやります。

とりあえずここから始めましょう。

まずは開発環境を整えます。

環境開発

必要な環境

• version6.0以上のnode
• version 4.0以上の npm
• React Native CLI
• Expo CLI
• Xcode

これらをインストールしていきます。

Xcodeのインストール

nodeのインストール手順

npmのインストール手順

まず、グローバルにVue Native cli・expo-cliをインストールします

yarn global add expo-cli
yarn global add vue-native-cli

expo-cliというのは簡単に言えば開発を手助けしてくれる開発支援サービスのことです。作成したアプリを公開するときにApp StoreやPlay Storeにアップロードするのも助けてくれます。

プロジェクトの初期化をします。今回はsampleappという名前で作成します

vue-native init sampleapp

このようになったらexpo > name　の<The name of your app visible on the home screen>のところに、ホーム画面に表示させるアプリの名前を入力しろとあるので、slugと同じ名前のsampleappで大丈夫です。

依存関係をyarnでインストールしますかと聞かれているので、Y

プロジェクトが作成されるのでプロジェクトのディレクトリに移動

cd sampleapp/

最新のexpoでは、

Error running `xcrun simctl boot 1595CE13-3454-4390-9DF8-0C0948E117CC`: An error was encountered processing the command (domain=com.apple.CoreSimulator.SimError, code=164):

Unable to boot device in current state: Booted

このようなXcodeのエラーが出てしまうのでバージョンを落とします。コピペで大丈夫です。

app.json

{
  "expo": {
    "name": "sampleapp",
    "slug": "sampleapp",
    "privacy": "public",
    "sdkVersion": "33.0.0",
    "platforms": [
      "ios",
      "android",
      "web"
    ],
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    },
    "packagerOpts": {
      "config": "metro.config.js"
    }
  }
}

package.json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "^33.0.0",
    "react": "16.8.3",
    "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
    "vue-native-core": "0.0.8",
    "vue-native-helper": "0.0.11"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0-0",
    "babel-preset-expo": "^5.1.1",
    "vue-native-scripts": "0.0.16"
  },
  "private": true
}

変更が終わったら、起動！

yarn start

ターミナルはこのようになります。

ブラウザではこのように立ち上がります

ターミナルにこのように書いてあります。いろんなことができます。

Scan the QR code above with the Expo app (Android) or the Camera app (iOS).

(Expoアプリ（Android）またはカメラアプリ（iOS）で上記のQRコードをスキャンします。)

  • Press a for Android emulator, or i for iOS simulator.

(Androidエミュレータの場合はaを、iOSシミュレータの場合はiを押します。)

  • Press e to send a link to your phone with email.

(eを押して、リンクをメールで電話に送信します。)

  • Press s to sign in and enable more options.

(sを押してサインインし、さらにオプションを有効にします。)

なのでターミナルでiを押してiOSシュミレーターを起動します。

ブラウザではRun on iOS Simulatorをクリックすることで起動させることができます。

はい、無事起動することができました！！！

早速Hello World!!を出力させましょう。

最初の画面に出力されていた、”My Vue Native App”を”Hello World!!”に変更します。せっかくなので少し色とサイズを変更。htmlとcssとjsを書く感覚で簡単に作れるのは本当にありがたい。

App.vue

<template>
  <view class="container">
    <text class="text-color-primary">Hello World!!</text>
    </view>
</template>

<style>
.container {
  background-color: #333;
  align-items: center;
  justify-content: center;
  flex: 1;
}
.text-color-primary {
  color: red;
  font-size: 40px;
}
</style>

ファイルを保存したら自動でコンパイルされます。めっちゃ便利。

iOSシミュレータを確認してみてください。

こうなったと思います。これで完了です。

まとめ

いかがでしたか？とっても簡単ですよね？

いくつかアプリを作るチュートリアルを近々用意しますので乞うご期待。