クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

【Vue.js】Vue CLIのプロトタイプとプロジェクトを作る

Vue.jsの続きです。前回はVue CLIをインストールしてみました。今回はプロトタイプとプロジェクトを作ってみます。それではどうぞ!

【目次】

前回の記事はこちら

※参考:【Vue.js】Vue CLIをインストールしてみる(CDN、Nuxe.jsとの違い) - クモのようにコツコツと

プロトタイプを作る

Vue CLIの導入については、これまでと同様、購入した書籍「Vue js & Nuxt.js超入門」を参考に進めてみる。

※参考:https://www.amazon.co.jp/Vue-js-Nuxt-js超入門-掌田津耶乃/dp/4798056596

.vueファイルを作る

まずは簡易アプリを作成する。こんなコード。

<template>
    <div class="app">
        <h1>Vueアプリの作成テスト</h1>
        <p>成功すればページが表示される</p>
    </div>
</template>

htmlは通常doctypeやhtmlタグ、headタグ、bodyタグが必須だが書かない。全体をtemplateタグで囲う。この状態を「プロトタイプ」というらしい。原型といった意味か。

なお、templateタグはページレンダリング時には読み込まれず、JSで実行するときに初めて読み込まれる。

※参考:<template要素> - テンプレート | HTMLのタグリファレンス

これを「app.vue」という名前でデスクトップに保存。拡張子は「.html」ではなく「.vue」!

これをブラウザで開いてみる。まだこの時点ではプレーンテキスト(.txt)ファイルと変わらない表示。まあ.htmlファイルじゃないから当然。

f:id:idr_zz:20191015054356j:plain

Vueアプリのフォルダにコマンドで移動

先ほど作ったファイルをフォルダに入れる。デスクトップに「vue_app」というフォルダを作り、そこにファイルを移動。

次にターミナル(黒い画面)を開く。

ターミナルに不慣れな方はこちら

※参考:黒い画面だけでWebページを作成する - 前編:ファイル、フォルダの作成 - クモのようにコツコツと

※参考:黒い画面だけでWebページを作成-後編:viエディタでコーディング! - クモのようにコツコツと

フォルダに移動する。cdコマンドでデスクトップに移動して…

$ cd DeskTop

さらに「vue_app」フォルダに移動

$ cd vue_app

プロトタイプを実行

プロトタイプを実行するvueコマンド

vue serve

おお、処理中みたいな表示になって成功!

f:id:idr_zz:20191015055618j:plain

下記のURLにアクセスしてみると

http://localhost:8080/

やた!ページが表示された!

f:id:idr_zz:20191015055718j:plain

フォルダを見ると「node_modules」というフォルダが作られていた。

f:id:idr_zz:20191015061108j:plain

ブラウザでソースを見るとページに表示されているテキストはない。app.jsを実行している。

f:id:idr_zz:20191015060700j:plain

デベロッパーツールで見るとapp.jsの実行によってDOMが作られているようだ。

f:id:idr_zz:20191015061124j:plain

動作確認できたので、アプリを終了する。Ctrlキーを押したままCを押す。

このようにvueファイルから簡易的なアプリが作れる。

プロジェクトを作る

次にVue CLIのプロジェクトを作る。

プロジェクト作成

ターミナルで「vue create プロジェクト名」を作成。例えばプロジェクト名「hajimete_project」にする場合。

vue create hajimete_project

プリセットの指定

こんな画面になる。プリセットを選んでとい意味のようだ。

f:id:idr_zz:20191015061721j:plain

Vue CLIをアップデートしてって言ってきてるなー。まあ今はいいか。

デフォルトは「default (babel, eslint) 」でBabelとESLintか。普段はこれでいいらしい。

今回は書籍に従って「Manually select features 」にしてみたい。矢印キーで下に移動。

f:id:idr_zz:20191015062020j:plain

組み込み項目の選択

すると次にこんな画面が開く。

f:id:idr_zz:20191015062253j:plain

  • Babel
  • TypeScript
  • Progressive Web App (PWA) Support
  • Router
  • Vuex
  • CSS Pre-processors
  • Linter / Formatter
  • Unit Testing
  • E2E Testing

TypeScriptとかPWAとかVuexとかいろいろ組み込めるのね。

今回はデフォルトで選ばれているBabelとESLintのみでOK。次に進む。

linter / formatterの選択

同じような選択画面が続く。

? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only 
  ESLint + Airbnb config 
  ESLint + Standard config 
  ESLint + Prettier 

ESLintとはJSの構文チェックをしてくれるツール。

※参考:JSプログラマーのイラッとする「クセ」はESLintを導入して対処しよう – WPJ

デフォルトではESLintを使い、何かあればエラーになる、という設定。このままで次に進む。

Lintの追加機能

次に出たのがこんな画面。

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i>
 to invert selection)
❯◉ Lint on save
 ◯ Lint and fix on commit

翻訳すると「追加のリント機能を選択します」デフォルトではLint on save。このまま次へ。

設定情報の記述場所

次の画面。

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow
 keys)
❯ In dedicated config files 
  In package.json 

翻訳すると「Babel、PostCSS、ESLintなどの設定を配置するのが好きな場所はどこですか?」 特に場所は変えなくていいので、このまま次へ。

プリセットの保存

お、次の画面、これが最後っぽい!

? Save this as a preset for future projects? (y/N) 

翻訳すると「 これを将来のプロジェクトのプリセットとして保存しますか? 」ああするとも!Y(イエス)!*1

Yを押すとしばらく、いろいろ処理をしている画面が続く…

🎉  Successfully created project hajimete_project.
👉  Get started with the following commands:

成功した!

プロジェクト実行

処理が終わったら、下記のコマンドでプロジェクを実行する

$ npm rum serve

おや、エラーになった

path /Users/(ユーザ名)/package.json
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall open
npm ERR! enoent ENOENT: no such file or directory, open '/Users/(ユーザ名)/package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent 

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/(ユーザ名)/.npm/_logs/2019-10-14T21_56_08_744Z-debug.log

翻訳するとpackage.jsonが見つからないと言っているようだ。

最初にプロジェクトのフォルダに移動する必要がある?

※参考:VueCLI3導入とできることまとめ - Qiita

hajimete_projectに移動して…

$ cd hajimete_project

リベンジ!

$ npm rum serve

おお、処理が始まった!しばらくまつ。

f:id:idr_zz:20191015070115j:plain やた!できたっぽい!

再度、下記のURLにアクセス

http://localhost:8080/

おお、Vueプロジェクトの初期画面が!!

f:id:idr_zz:20191015070302j:plain

最後に

ひとまずVueプロジェクトの初期画面にたどり着けました!次回はプロジェクトとはなんぞや、の部分に入っていきたく。それではまた!


※参考:Vue.jsの習得のためにやったことまとめ
qiita.com

*1:この、YとNで選ぶのは昔やってたMSXのゲームを思い出す