Re:ゼロから始める文系プログラマ

未経験がプログラミングを通して人生を変える

Vue CLIとは？話題のVueコマンドラインツールを徹底解説

プログラミング プログラミング言語解説 vue.js

スポンサードリンク
　

f:id:ShotaNukumizu_1000:20211116111232p:plain

おはようございます。Shotaです。

「Vue CLIをインストールしてVueのアプリを作ってみたい」

「Vue CLIをインストールしてみたけど、どうすればいいのか見当つかない...」

本記事にたどり着いた人の中には、このようなことを考えている人も少なくないと思います。

そこで、今回ではVue CLIを通してVueプロジェクトの作成やファイル構造の仕組みを中心に徹底解説していきます。

ただし、今回の記事はVueの基本的な文法をある程度理解している人向けに解説します。Vueの基礎がまだ理解できていない人はコチラの記事を参照してください。

shotanukumizu-1000.hatenablog.com

それでは早速、本題に入りましょう。



Vue CLIとは

f:id:ShotaNukumizu_1000:20210924072234p:plain

CLIとはCommand Line Interfaceの略称で、コマンドラインを使ってVueで開発を行うための前準備を支援してくれるツールです。開発はプロジェクトという単位で行います。Vue CLIでプロジェクトを作るとき、プロジェクトで利用する機能のインストールも一緒にできます。


できること

Vue CLIを使うことで以下のようなことができます、それぞれの機能を自分で作ることもできますが、労力がかかります。Vue CLIではよく使用する機能をあからじめ用意してるのが最大の特徴です。

  • プロジェクトのテンプレートの作成
  • 複数のjsファイルを一つにまとめる
  • .vueファイルを.jsに変換する
  • トランスパイル
  • JavaScriptの構文チェック
  • テストツールの導入


トランスパイルとは？

トランスパイルとは、与えられたコードを別の言語に変換することを意味します。JavaScriptにおいては、古い書き方にしか対応していないブラウザ用に言語を変換することを意味します。


インストール

f:id:ShotaNukumizu_1000:20210924094721p:plain

Vue CLIを使うためにはVue CLIをインストールする必要があります。インストールする際にはnode.jsとnpmがどうしても必要になります。

node.jsとnpmがインストールされていることを確認するためには以下のコマンドをそれぞれ入力してください。

node -v(nodeの場合)
npm -v(npmの場合)

npmが使える環境でVue CLIをインストールします。インストールが終わった後は、vue -versionを実行しバージョン情報が表示されているか確認してください。

npm install -g @vue/cli
vue --version

インストールが失敗した場合は管理者としてsudoコマンドを利用してインストールを実行してください。

sudo npm install -g @vue/cli


プロジェクト作成

f:id:ShotaNukumizu_1000:20210924094808p:plain

Vue CLIのインストールが完了したらプロジェクトの作成を行います。vue createの後に任意のプロジェクト名を指定してください。今回はsampleというプロジェクト名を付けています。コマンドの実行は任意のディレクトリ下で行ってください。実行したフォルダにsampleというフォルダが作成されその下にVueの開発に必要なファイルがすべて保存されます。

vue create sample

実行の最後に表示されるメッセージの指示に従ってsampleに移動して、以下のコマンドを実行します。一度ビルド/コンパイルを行うためコマンド終了までに少し時間がかかります。

npm run serve

コンパイル後、LocalとNetworkの２つのURLが表示されます。ブラウザでlocalhost:8080にアクセスしてこの画面が表示されたらプロジェクトの作成は完了です。


CLIの構造

f:id:ShotaNukumizu_1000:20210915064721p:plain

vuew createコマンドでプロジェクトを作成しビルドした結果、ブラウザに「Welcome to Your Vue.js App」が表示されることが確認されました。でもこれから何をすればいいのでしょうか？コーディングしてアプリを作成する前にまずはプロジェクトを構成するファイルを確認して理解を深めましょう。


node_module

node_moduleフォルダにはnpmコマンドでインストールしたライブラリの情報がすべて保存されます。フォルダの中にはさらにフォルダが存在して様々なライブラリが用意されています。新しくnpmコマンドでライブラリを追加するとさらにnode_modulesフォルダの中に追加されます。


publicフォルダのindex.html

通常のWebサーバで表示されている内容は公開フォルダにあるindex.htmlを確認することで表示されている内容を確認できます。Vue.jsでも同様にブラウザに表示されている内容を確認するためにpublic/index.htmlを確認してみましょう。

残念ながらindex.htmlの中身を見てもブラウザに表示されていた内容はどこにも記述されていません。


main.js

Vueで記述したファイルを実行するためのファイルです。#appはindex.htmlファイルの中のdivタグに設定されているid="app"のappに対応します。idの値にappを持つ要素にVueアプリケーションをマウントしています。これを言い換えると、idにappを持つ要素の下にVueが操作できる環境を整えていると考えてもいいかもしれません。

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')


assetsフォルダ

assetsフォルダの中にはlogo.pngの画像ファイルが保存されています。画像ファイルが保存されており、Vueプロジェクトで利用する画像、スタイルシートなどを保存する場所です。


package.json

プロジェクトに関する情報が記載されています。Vue.js単体で利用するファイルではなく、npmコマンドでライブラリを活用する際に必要不可欠で、インストールしたライブラリのバージョンを確認できます。

新しくnpmコマンドでライブラリを追加した場合はここに追加されることになります。


App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

App.vueの拡張子.vueはvue専用のファイル尾を表している拡張子で、中身は３つのパーツで構成されています。(template, script, style)

.vueファイルはVue専用の拡張子でブラウザで直接処理できないので.jsファイルに変換する必要があります。


まとめ

f:id:ShotaNukumizu_1000:20210915061857p:plain

今回の記事では、Vueを使った本格的なWebアプリを構築するのに必要なVue CLIを徹底解説しました。

今回の記事を参考に、Vue CLIについて理解を深めていただければ幸いです。今回の記事は終了です。

【参考サイト】

reffect.co.jp

uiuifree.com