• トップ
  • ブログ一覧
  • Vuetify アプリを作成するための環境設定
  • Vuetify アプリを作成するための環境設定

    広告メディア事業部広告メディア事業部
    2020.03.10

    エンジニアになろう!

    Vuetifyとは?

    「Vuetify」とは、Vue.jsアプリケーションで、マテリアルデザインを使えるようにした、UIフレームワークです。

    WebアプリケーションのUIデザインについて、全く知識や経験がない人でも、簡単に「美しいモダンなUIデザイン」を実装することが出来るのです。

    日本でも、じわじわと人気が出始めてきている、フロントエンド用のフレームワークです。

    今回は、そんな Vuetify でアプリケーションを作る前の、「環境構築」を行いたいと思います!

    【Vuetify公式サイト】
    https://vuetifyjs.com/en/

    vue-cliのインストール

    まずは、「vue-cli」のインストールから進めていきます。

    【vue-cli公式サイト】
    https://www.npmjs.com/package/@vue/cli

    vue-cliモジュールとは

    「vue-cli モジュール」とは、Vue.js アプリケーションを、「cli(Command Line Interface)」を使って、便利に素早く構築する為の「Node.js 用のモジュール」です。

    従って、以下の手順を実行するには、あらかじめ Node.js がコンピュータにインストールされている必要があります

    インストール

    1. Windowsでは、コマンドプロンプトウィンドウ
    2. Mac や Linux では、ターミナル<端末>

    上記を開いて、下記のコマンドを実行します。

    $ npm install -g @vue/cli

    vue-cli は、Node.js 用の、いわゆるコマンドラインツールです。

    なので、npm を使ってインストールします。

    【オプション( -g )を付けている理由】
    「-g」はグローバルインストールの略。
    つまり、インストールされる、コンピュータ端末全体(即ち、グローバルに)で使用するものなので、付けています。

    インストールの確認

    インストールの確認は、次のようにコマンドを入力して行います。

    $ vue --version

    バージョン情報が表示されればOKです!

    「OSS(Open Source Software)」の場合、このようにインストールが正しく出来たかどうか確認するのが良いと思います。

    インストールに関しての補足

    1. npm(Node Package Manager)を使って、vue-cli をインストールしました。
    2. npm とは、Node.js のモジュールを管理する為の、Node.js に付随しているソフトウェアです。
    3. Node.js を使ってアプリケーション開発をする場合には、必ず npm を使ってアプリケーション開発に必要なモジュールをインストールします。

    yarnのインストール

    Vue.js のような新しいプラットフォームでは、「npm」の代わりに「yarn」という、同種のパッケージマネージャーが使われることが多くなっています

    それはなぜでしょう?

    npm は便利で手軽に使えるのですが、少し動作が重いことが挙げられます。

    インターネット接続環境によっては、全てのダウンロード及び、インストール作業を完了できずに、途中でハングアップしてしまう場合があります

    そういう時に、この yarn を使うと、ダウンロード&インストールのスピードが、劇的に上がる場合が多いのです。

    【なぜ yarm が速いのか?】
    yarn は npm と違い、一度ダウンロードしたものはキャッシュする仕組みがあり、そのキャッシュを再利用するのでムダなダウンロードが発生しにくいのです。
    ダウンロードの処理についても、npm のように逐次処理ではなく、並列処理を行っているので、実際の速度としては、npm の約1.5倍、と言われています。

    インストール

    ターミナルを開いて、次のコマンドを実行します。

    $ npm i -g yarn

    インストールの確認をします。

    $ yarn --version

    バージョン情報が表示されればOKです。

    インストールに関しての補足

    今回「npm install… 」を、「npm i… 」としています。

    install の代わりに、ショートカットとして、i というコマンドを使うことが出来るためです。

    Vue.jsアプリケーションの作成

    インストールが完了しました!

    早速、Vue.js アプリケーションを開発する準備を行います。

    開発準備

    vue-cliコマンドを使い、Vue.jsアプリケーションのフォルダを作ります。

    その中に、必要なモノ(Node.jsの依存ファイルを含む)を、コマンドラインにてインターネット経由でダウンロード、インストールします。

    今回は、vue-cliを使い、コマンドラインから、vuejsアプリケーションの雛型(スケルトン)を作る方法について説明します。

    コマンドの実行

    ターミナルを開いて、下記のコマンドを実行します。

    $ cd Desktop
    $ vue create sample

    デスクトップに移動し、「sample」というフォルダ名で、Vue.js アプリを作成するコマンドです。

    ※「sample」の部分は任意です。

    default を選択

    数秒後に、下の図の様に聞かれます。

    とりあえず、default を選んで Retrunキーを押します

    初めて vue-cli を使う場合には、パッケージマネージャーとして、npm を使うか、yarn を使うか、選択を迫るメッセージが出てきます

    yarn を選択しておきましょう。

    数分後にダウンロードが完了します。

    アプリケーションを起動

    次に、コマンドを実行します。

    $cd sample
    $ yarn serve

    yarn serve は、アプリケーションを起動する為のコマンドです。

    ※下の図の、赤い枠線で囲んだ部分にあたります。

    ビルド後

    開発サーバの起動、アプリケーションのビルドが終わった後は、下の図のような表示になります。

    Vue.jsアプリケーションのひな形が完成

    Webブラウザを立ち上げて、下記のURLを入力します。

    http://localhost:8080

    下の図のような、インターフェースが表示されればOKです!

    Vue.jsアプリケーションのひな形が完成して立ち上がりました

    上記の、yarn serve のコマンドの後に、yarn serve --open という風にオプションを付けて実行します。

    そうする事で、自動的にPC内でデフォルト設定になっているWebブラウザを開いて、上記URLにアクセスしてくれるので便利です。

    開発サーバの止め方

    開発サーバを止めるには、Ctrl + C キーを同時に押します。

    さいごに

    今回は、Vue.js アプリケーションのひな形まで完成させることが出来ました!

    機会があれば…

    出来上がった Vue.js アプリケーションに、Vuetify を追加インストールして、見た目を Vuetify アプリケーションにするという事をやってみたいと思います。

    お楽しみに!

    こちらの記事もオススメ!

    featureImg2020.08.07JavaScript 特集知識編JavaScriptを使ってできることをわかりやすく解説!JavaScriptの歴史【紆余曲折を経たプログラミン...

    featureImg2020.07.17ライトコード的「やってみた!」シリーズ「やってみた!」を集めました!(株)ライトコードが今まで作ってきた「やってみた!」記事を集めてみました!※作成日が新し...

    広告メディア事業部

    広告メディア事業部

    おすすめ記事