そもそもなんでVue.js?
現在、WEBサイトのフロントエンド開発を主に仕事でしているのですが、フロントエンドエンジニアとしてJavaScriptのフレームワークのひとつぐらいまともにプログラミングできないとまずいよな〜と思ったのがきっかけです。
日本語のドキュメントもあり、フレームワークを調べてるときに比較的学習コストが少ないということで今回Vue.jsを選択しました。
現在は様々な機能が使えるVueCLIを使って開発するのがトレンドらしく、とりあえず触ってみよう的な試みです。
Vue.jsについてはこちらの記事に詳しく書いてありました。
環境セットアップのための予備知識
OS環境 | Mac OS 10.13.6(High Sierra) |
---|
VueCLI 3系をインストールするにあたり、以下のようなサイトを参考にしました。
10分で始めるVue.js(基本編)
Vue CLI 3 をインストールしプロジェクトを作成する方法
Homebrewからnodebrewをインストールして、Node.jsをインストールするまで
、、、。
いきなり、なじみのない言葉が、、、npm、homebrew、nodebrew、Node.js????
ということで調べて自分なりの解釈でざっくりと以下のように理解しました。
Node.js
WEBブラウザ以外でjsを動かすための環境のひとつ。
サーバサイドで動くJavaScriptのことでサーバサイドJavaScriptと呼ばれることもある。
従来のjavascriptととの違いは実行環境(内部的に構築されてるみたい)とライブラリからなっている(最初の時点である程度のモジュールが組み込まれているらしい)
Homebrew
Macのターミナル用の※パッケージ管理システム
※パッケージ管理システムとは
ターミナル用のAppleストアやgoogleストア的なもの。それらが目的に応じていろいろ用意されている。
Ruby→gem/PHP→compser/など
npm
タスクランナー/モジュール(webpackやbrowserifyなど)などの開発環境系のパッケージ管理するためのもの
nodebrew
node.jsのversion管理するためのパッケージ管理システム
パッケージはそれぞれ、依存関係にあり、Vue.jsをインストールするための流れはざっくりこんな感じ
HomebrewをインストールするためにX codeをインストール
↓
nodebrewをインストールするため、Homebrewをインストール
↓
Node.jsとnpmをインストールするため、nodebrewをインストール
↓
VueCLIをインストールするため、Node.jsとnpmをインストール
(node.jsをインストールする際にnpmをインストールされる)
↓
ようやく、VueCLIをインストール
セットアップ
それではいきましょうw
X codeをインストール
コマンドライン・デベロッパーツールをインストール
ターミナルから$ xcode-select --installコマンドを発行すると
以下のようにインストールを要求されて
$ xcode-select --install
xcode-select: note: install requested for command line developer tools
同時にポップアップが出てくるので"インストール"を選択し利用規約に同意します。
Homebrewをインストール
Homebrewの公式サイトからコードをコピペしてEnterを押します。
途中でEnterの入力/インストールユーザのOSパスワードの入力を求められるので入力して進んでください。
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
インストールが確認するには以下のコマンドを実行できればインストールされたことになります。
$ brew doctor
nodebrewのインストール
$ brew install nodebrew
インストールを確認するには
$ nodebrew -v
情報が表示されたらインストールされてます!!
Node.jsとnpmのインストール
Node.jsの最新版をインストール
$ nodebrew install latest
Node.jsを有効にします。
nodebrew use 先程インストールしたNode.jsのver
nodeコマンドを使用するため、パスを通します。
#zshの場合は
echo "export PATH=$HOME/.nodebrew/current/bin:$PATH" >> ~/.zshrc
#bashの場合は
echo "export PATH=$HOME/.nodebrew/current/bin:$PATH" >> ~/.bashrc
先程追加したパスが動くようになり、nodeコマンドが使えるようになります。
#zshの場合は
$ source ~/.zshrc
#bashの場合は
$ source ~/.bashrc
npmはNode.jsとともにインストールされます。
npmがインストールしたか確認
$ npm -v
Node.jsがインストールしたか確認
$ node -v
バージョンが表示されればOKです!!
Vue CLI(Vue.js)のインストール
npm install -g @vue/cli
vueコマンドを使うためのパスを確認
npm bin -g
#/Users/xxxxxxx/npm/bin
vue コマンドを使用するためにパスを通す
$ export PATH=/Users/xxxxxxx/npm/bin:$PATH
vueのインストールを確認
$ vue --version
バージョンが表示されればOKです!!
おしまい
とりあえず、Vueを動かす環境づくりはこんな感じでした。