Vuetify アプリを作成するための環境設定
2021.12.20
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 がコンピュータにインストールされている必要があります。
インストール
- Windowsでは、コマンドプロンプトウィンドウ
- Mac や Linux では、ターミナル＜端末＞
上記を開いて、下記のコマンドを実行します。
$ npm install -g @vue/cli
vue-cli は、Node.js 用の、いわゆるコマンドラインツールです。
なので、npm を使ってインストールします。
【オプション（ -g ）を付けている理由】
「-g」はグローバルインストールの略。
つまり、インストールされる、コンピュータ端末全体（即ち、グローバルに）で使用するものなので、付けています。
インストールの確認
インストールの確認は、次のようにコマンドを入力して行います。
$ vue --version
バージョン情報が表示されればOKです！
「OSS（Open Source Software）」の場合、このようにインストールが正しく出来たかどうか確認するのが良いと思います。
インストールに関しての補足
- npm（Node Package Manager）を使って、vue-cli をインストールしました。
- npm とは、Node.js のモジュールを管理する為の、Node.js に付随しているソフトウェアです。
- 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 アプリケーションにするという事をやってみたいと思います。
お楽しみに！
こちらの記事もオススメ！
書いた人はこんな人
- 「好きを仕事にするエンジニア集団」の（株）ライトコードです！
ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。
システム開発依頼・お見積もり大歓迎！
また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」「WEBディレクター」を積極採用中です！
インターンや新卒採用も行っております。
以下よりご応募をお待ちしております！
https://rightcode.co.jp/recruit
ライトコードの日常12月 1, 2023ライトコードクエスト〜東京オフィス歴史編〜- ITエンタメ10月 13, 2023Netflixの成功はレコメンドエンジン？
- ライトコードの日常8月 30, 2023退職者の最終出社日に密着してみた！
- ITエンタメ8月 3, 2023世界初の量産型ポータブルコンピュータを開発したのに倒産!?アダム・オズボーン
関連記事
採用情報
\ あの有名サービスに参画!? /
バックエンドエンジニア
\ クリエイティブの最前線 /
フロントエンドエンジニア
\ 世界を変える…！ /
Androidエンジニア
\ みんなが使うアプリを創る /
iOSエンジニア
