はじめに
web開発では、jqueryの代わりにvue、react、angularが利用されていることが多くなっています。
今回は学習コストが低いと言われているvue.jsを利用してアニメーションを用いたrailsアプリを作ろうと思い、
既存のrailsプロジェクトにvueを導入しようと思いましたが、結構手こずったので記録を残しておきます。
手順
①nvm(Node Version Manager)をインストール
nvmとは、Node.jsのバージョンを管理するツールです。
nvmのバージョンは「Node.js リリース一覧」で確認できます。
nvm install 16.20
②Node.jsをインストール
Node.jsとは、javascriptの実行環境のことです。
詳しくは「Node.jsとはなにか？なぜみんな使っているのか？」の記事が非常に参考になります。
nvm install node
③npm(Node Package Manager)をアップデート
npmはNode.jsをインストール際に同時にインストルされます。
npmとは、Node.jsで使える色々な機能がつまったものを管理するツールです。
詳しくは「便利なパッケージ管理ツール！npmとは【初心者向け】」の記事が参考になります。
npm update -g npm
④webpackerをインストール
webpackerとは、ruby on rails上でwebpackを使用し、javascriptやcss、画像およびフォントを管理することができるものです。
Sprocketsと同様、アセットパッケージングツールです。
詳しくは「Railsガイド Webpackerの概要」が参考になります。
Gemfile
gem ‘webpacker’, ‘~> 4.0’
注）はじめは、githubのバージョンに頼るように以下のようにgemファイルに記入していましたが、
エラーが出てしまいました。なので、バージョン指定をするようにgemファイルに記入する方が
良いかと思います。
Gemfile
gem 'webpacker', github: "rails/webpacker"
⑤Yarnのインストール
Yarnとは、javascriptのパッケージを管理するツールです。
npmとYarnの違いについては「npmとは yarnとは」が非常に参考になります。
npm install -g yarnd
⑥webpackerのインストール
rails webpacker:install
⑦Vue.jsのインストール
rails webpacker:install:vue
これで完了です。
最後に
まだ、どのようにrailsアプリにvue.jsがどうやって反映されていくか、仕組みが分からないので、
rails×vue.jsのアプリを作成できるように、勉強していきます。
これからの気づきやつまづいたところについては、今後記事にしていきます。
参考:既存のRailsプロジェクトにVue.jsを導入する
↧