Linux上にyarnとnodenvで作るVue.jsの開発環境

Vue.jsは、ReactやAngularと同じく、オープンソースのJavaScriptフレームワークの一つ。ReactやAngularが、フルスタックフレームワーク志向なのに対し、Vue.jsは、主に、MVC(Model View Controller)モデルの View層(発音もViewとVueは同じ)を扱うことに特化(もちろんフルスタックフレームワークとしても使えるが)している。

このため、Ruby on RailsやLaravelなど、MVC型のWebフレームワークがVue.jsに熱い視線(当然、温度差はあると思うが)を送っている。

ということで、Vue.jsの開発環境をLinux(主にUbuntu 18.04 LTS)上に構築してみた。

nodenvのインストール

Vue.jsの開発環境を構築するためには、先ずは、次の3つが必要となる。

  1. 最新のNode.js
  2. JavaScriptのパッケージマネージャ(npm又はyarn)
  3. Vue CLI

Node.jsは、最新のDebian/Ubuntu系のディストロにも、標準でインストールされているが、バージョンが少々古い。Node.jsの開発速度がとても早いため、あっという間にバージョンが古くなっていくのだ。

そこで、必要になるのが、Nodeのバージョン管理ツールだ。Nodeのバージョン管理ツールには、nodebrewを始めとして、複数の選択肢があるが、そのなかでも、nodenvはRubyのrbenvから派生したツールということもあって、コマンドの使い方がほとんどいっしょという利点(Ruby使う予定のない人には高機能であることが利点かも)がある。

インストールは、次のコマンドを順番に実行すれば完了する。

$ git clone git://github.com/nodenv/nodenv.git ~/.nodenv 
$ echo 'export PATH="$HOME/.nodenv/bin:$PATH"' >> ~/.bash_profile 
$ echo 'eval "$(nodenv init -)"' >> ~/.bash_profile 
$ source ~/.bash_profile

node-buildのインストール

続いて、nodenvのプラグインnode-buildをインストールする。Rubyでいうところのrbenvとruby-buildの関係(と言われて分からなくても問題なし)と同じで、指定したバージョンのNodeをインストールしたり、削除したりできるようになる。

node-buildは、次のコマンドでインストールできる。

$ git clone https://github.com/nodenv/node-build.git ~/.nodenv/plugins/node-build 

インストールが完了したら、次のコマンドでインストール可能なNode.jsのバージョンを確認する。

$ nodenv install -l

現時点での最新版は、12.12.0となっているので、先ずはこのバージョンをインストールして、これをデフォルトに設定する。

$ nodenv install 12.12.0
$ nodenv rehash
$ nodenv global 12.12.0

最後に、Node.jsのバージョンが12.12.0になっていることを確認する。

$ node -v

ここまでところは、主にコチラ(この記事はMac向け)の投稿を参考にさせてもらった。

Yarnのインストール

最新のNode.jsがインストールできれば、JavaScriptのパッケージマネージャのnpmが使えるようになる。

npmでもパッケージマネージャとして十分な機能を有しているが、ここでは、npmよりさらに、高速、高機能を謳っているパッケージマネージャyarnをインストールしておく。

yarnは、Debian/Ubuntu系のディストロの標準リポジトリにもあるが、こちらはバージョンが古いので、次のコマンドを順次実行し、最新版のyarnをインストールする。

$ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
$ echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
$ sudo apt update 
$ sudo apt install yarn

Manjaro LinuxなどのArch Linux系では、次のコマンドを実行。

$ pacman -S yarn

最後にyarnのバージョンを確認しておく。

$ yarn --version

Vue CLIのインストール

続いて、yarnコマンドを使い、Vue.jsのコマンドラインの開発ツールVue CLIをインストールする。

$ yarn global add @vue/cli 

Vue CLIのインストールが完了したら、試しにプロジェクトを作成してみよう。

$ vue create hoge-app

完成したプロジェクト(ここではhoge-app)からビルトインサーバーを立ち上げる。

$ cd hoge-app
$ yarn run serve

ブラウザからhttp://localhost:8080にアクセスして、次の画面が表示されればインスールはひとまず完了。

JavaScriptフレームワークとVue.jsの今後

数年前から、JavaScriptの世界では、AngularとReactの二大フレームワークに第三のフレームワークが挑戦しては敗れ去っていくという構図が続いていた。

こうしたなか、最近のVue.jsの躍進は、JavaScriptの世界がいよいよ三大フレームワークの時代に突入したことを示しているのかもしれない。

激烈な開発競争のなかで、フロントエンドでのJavaScriptフレームワークの役割はこれからもますます大きくなっていくのは間違いないだろう。

実際、今、この記事は、WordPressで書いているこのの新エディタGurtengurgで書いているのだが、この新エディタはJavaScript三大フレームワークのひとつReactで開発されている。

jQueryがあれば何とかなるだろうと様子見を決め込んでいた人(私がその典型)も、そろそろ、本気でJavaScriptフレームワークと付き合わなければならない時代に突入したということかもしれない。

先ずは、Vue.jsをさまざまなMVC型Webフレームワークと組み合わせてみて、その実力を探ってみたい。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク