LiBz Tech Blog

LiBの開発者ブログ

フロントエンド初心者がVueUIを使って爆速でVueアプリを立ち上げてみる

f:id:tkmiya34:20190419105210p:plain

はじめに

これまではPHPやRailsでのサーバサイドアプリケーションの開発がメインでしたが、最近はフロントエンドの開発も一部担当するようになってきました。

今の開発現場では一部Vue.jsを導入しているので、Vue.jsの勉強をしています。

はじめに — Vue.js

今は公式チュートリアルを一通りやってみて、そろそろ何かVue.jsを使ったアプリを自作してみようかという段階です。ただ、Vue.jsの基本的な機能は覚えてきたとはいえ、webpackなどのフロントエンド開発ツールの使い方や、ビルドの設定など、アプリを作るには開発環境周りで調べないといけないことがまだまだあります。

この開発環境の構築がフロントエンド初心者には最初つらい、、、

そんなときに知ったのが Vue UI の存在です

Vue UIとは?

Vue CLIに付属した機能で、Vue CLIでのプロジェクト作成や、プロジェクトのプラグイン管理 / タスク管理をGUIから操作できるツールです。

Vue CLI

リリースノートではプロジェクト作成/管理、サーバの立ち上げ、プラグインの管理などが全てWeb画面のクリック操作で実行できると説明されています。

Vue CLI 3.0 が来ました! — Vue.js

Vue UIを使うための準備

まずはVue CLIをインストールします

~/work/vue_ui ❯ npm install -g @vue/cli

準備はこれだけです!

プロジェクトの作成

インストールできたらVue UIのプロジェクトマネージャーを立ち上げてみましょう

~/work/vue_ui ❯ vue ui
🚀  Starting GUI...
🌠  Ready on http://localhost:8000

コマンド実行するとブラウザが立ち上がって http://localhost:8000 を開きます。

ちゃんと日本語化してくれているのが嬉しいですね。 Vue関連のプロジェクトはドキュメントも日本語対応されたものが多いのは初心者にポイント高いです。

新規プロジェクト作成

f:id:tkmiya34:20190418145826p:plain

「ここに新しいプロジェクトを作成する」を押すと、Vue UIを立ち上げたディレクトリをベースにプロジェクト作成が始まります。

最初にプロジェクト名、使用するパッケージマネージャー、Gitリポジトリとして初期化するかを選択できます。 パッケージマネージャーは今回npmを選択しました。

f:id:tkmiya34:20190418183508p:plain

次にプリセットの選択です。

「手動」を選んだ場合は次の画面でプラグインを選択できます。 Vueアプリケーションではよく使われるVueRouter/Vuexや、CSS pre-processor / PWA対応 / テストツールなどなど、去年公式対応したTypeScriptも入っていますね。

f:id:tkmiya34:20190418195158p:plain

デフォルトではbabelとeslintがインストールされるようです。 プラグインは後からでもVue UI上で追加できるようなので、今回は「デフォルト」で進めます。 プリセット選択を終わらせるとVue UIがプロジェクトの雛形作成をはじめます。

f:id:tkmiya34:20190418171646p:plain

雛形ができあがってプロジェクトのダッシュボードが開きました! 完了まで約3分くらい掛かりました。主にnode_modulesのインストールに時間が掛かっていそうです。

f:id:tkmiya34:20190418204643p:plain

作成されたプロジェクトの中身はこちら(node_modulesの中身は省略しています)

~/work/vue_ui/my_project [master] ❯ tree -L 1
.
├── README.md
├── babel.config.js
├── node_modules
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── App.vue
│   ├── assets
│   ├── components
│   └── main.js
└── yarn.lock

プロジェクト設定でGitリポジトリの初期化を行っていたので、.git/ .gitignore も出来上がっています。

.gitignoreではちゃんとnode_modulesや/distなどが除外されていますね。

~/work/vue_ui/my_project [master] ❯ cat .gitignore

.DS_Store
node_modules
/dist

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

プロジェクトをローカルで立ち上げてみる

では、さっそくプロジェクトをローカルのWebサーバで見てみましょう

Vue UIではwebサーバもGUIから操作できます。メニューからタスク > serve を選択してみましょう。

f:id:tkmiya34:20190418205614p:plain

タスクの実行を押すだけでWebサーバが立ち上がってブラウザから localhost:8080でアクセスできるようになります。

f:id:tkmiya34:20190418213529g:plain

プリセットで設定したeslintはちゃんと効いているでしょうか? 試しにコードにeslintで違反となるコードを入れてみましょう。

f:id:tkmiya34:20190418214309g:plain

ちゃんと警告をだしてくれますね。

これでVueアプリの開発準備が整いました!

本番公開用のソースをビルド

開発したアプリケーションを本番公開用にビルドするのもVue UIで グローバルメニューからbuildを選んでタスク実行で一発です。

実行すると /dist以下にビルドされたファイル出来上がります

~/work/vue_ui/my_project [master] ❯ tree dist                                                                                        ✭ [22:20:58]
dist
├── css
│   └── app.11c93175.css
├── favicon.ico
├── img
│   └── logo.82b9c7a5.png
├── index.html
└── js
    ├── app.7436a258.js
    ├── app.7436a258.js.map
    ├── chunk-vendors.ecd76ec1.js
    └── chunk-vendors.ecd76ec1.js.map

ここまでに実行したコマンドは

  • npm install -g @vue/cli
  • vue ui

の2つだけです。あとは全てGUI上での操作で完結してしまいました。

Vue UIは画面デザインも分かりやすく日本語化もしっかりされています。初心者が練習としてアプリを作るならまずはVue UIを使うことで、環境設定に迷うこと無くアプリケーション開発に辿り着けるのでおすすめです。

おまけ

最後にVue UIでアプリの雛形を作って、webで公開するまでのタイムアタックをしてみました。

タイムアタックの前提条件

  • vue-cliはインストール済み
  • webで公開するホスティングはfirebase hostingを使用する
  • firebaseのアカウントは作成済み

タイムアタックの結果

Vue UIの立ち上げからfirebase hostingでの公開まで、なんと5分20秒でした!

  • Vue UIの起動とプロジェクト作成
  • firebaseからプロジェクトの作成
  • コマンドラインでのfirebase初期設定
  • Vue UIからソースコードのビルド
  • firebase hostingへのデプロイ

今回はこれらの作業をシングルタスクで進めて、プロジェクトの初期化での待ち時間などは待機していましたが、待ち時間中にfirebaseのプロジェクト作成や初期設定を進めていれば5分以内にweb公開までできそうです✌🏻