この記事ではVueNativeを使用したアプリの初期導入方法について解説していきます。

Table of Contents

語句の解説

今回解説するものは以下になります。

  • Nativeアプリ
  • VueNative

Nativeアプリとは

Webアプリ、スマホアプリ、など、

アプリと名がつく語句を聞いたことは数多いかと思います。

ざっと区分すると、

  • Webアプリ → ブラウザ上で動作するシステムのこと
  • Nativeアプリ → スマホやPCなど、インストールして使うシステムのこと

のように分けることができます。

実際に記述するコード内容に違いはほとんどないのですが、

環境構築方法が全く異なります。

Expoとは

Nativeアプリ(スマホアプリ)を開発するには、

以前はAndroid用とios用に分ける必要がありました。

Expoは開発効率を上げるサービスで、

  • Android, iosそれぞれのリリースが簡単に
  • Expoアプリ上で表示テストが可能に

などを行うことができます。

VueNativeとは

今回使用するVueNativeは、

Vue.jsの書き方でNativeアプリケーションを構築するためのものです。

また、ReactNativeとExpoがもとになって作れれており、

ReactNativeはReactを使用したNativeアプリ構築ツールです。

使用技術

インストール済のパッケージ

  • Node.js → v12.16.0
  •  npm → 6.13.4

本記事でインストールするパッケージ

  • expo-cli → 3.20.9
  • create-react-native-app → 3.2.4
  • vue-native-cli → 0.1.1

インストール必須なスマホアプリ

  • Expo

初期導入

Expoアプリ

Expoを使って動作確認をするときには、

スマホアプリとして提供されている「Expo」を使用します。

生成したプロジェクトを実行すると、QRコードが生成されます。

Expoアプリから読み込むことで、スマホからプロジェクトを表示することができます。

 

パッケージ

まず、VueNativeを起動するために必要なパッケージをインストールします。

下記を一括でインストールしてしまいます。

  • expo-cli
  • create-react-native-app
  • vue-native-cli

コマンドは以下をご参照ください。

npm i -g expo-cli create-react-native-app vue-native-cli

結構時間がかかります。

下記のように表示されればOKです。

finish-install

 

プロジェクト生成

インストールしたパッケージを使用して、

プロジェクトの生成をします。

vue-native init front

にて生成することができます。

必要なコードやパッケージもインストールしますので、ここもまたかなりの時間がかかります。

特にエラーの表示がなく、終了した場合は成功です。

エラーが表示された場合、何か事前インストールに必要なパッケージが抜けている可能性があります。

 

実行

ターミナルから生成したプロジェクトに、カレントディレクトリを移動します。

その後、起動コマンドである下記を実行してみます。

npm start

正常に立ち上がると、QRコードが生成されます。

finish-start

 

Expoアプリからアクセスして、表示をしてみましょう!!

 

既にエラーが起きている場合

起動したら、いきなりエラーが起こることもしばしば。

そして、起こるエラーも人によって異なることもまたしばしばあります。

私の場合は、こんなエラーが。

install-error

パッケージが足りなかったみたいです。

このようなパッケージが足りない場合のエラーは、追加して対応しましょう。

npm i vue-native-scripts

 

実行結果

正常に起動すると、以下のような画面がスマホに移ります。

vue-result

 

あとがき

謎のパッケージが足りないエラーが起きたものの、

比較的スムーズに導入が終わりました。

Vue楽しみ!


yoshiaki

ブログ管理者。現役SEで、MENTAや個人事業で活動中。 コミュニティで1つのブログを作成し、所属する皆さんと発信中。

0件のコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です