はじめに Rails 5.1ではJavaScript/index.html.erb周りのサポートが大きく改善されました。 これにより、Vue.jsやReactといったモダンなJSフレームワークをRails内で非常に扱いやすくなっています。 僕も実際に試してみましたが、本当にびっくりするぐらい簡単にVue.jsやReactを動かすことができました。 そこでこの記事ではRails 5.1とVue.jsを組み合わせたサンプルアプリケーションの作成方法をチュートリアル形式で、できるだけ詳しく説明します。 また、ローカルで動かしておしまい、ではなく、Herokuにデプロイしたり、テストコードを書いたりするところまでカバーします。 この記事自体は長いですが、実際に手を動かすと（スムーズに進んだ場合）30分以内で終わらせることができるはずです！ 今回作成するサンプルアプリケーション 今回は以下のリンク先

rbenvでRubyのバージョン管理 $ brew update $ brew install rbenv ruby-build $ rbenv --version rbenv 1.1.1 $ rbenv install --list $ rbenv install 2.4.1 $ rbenv global 2.4.1 $ rbenv rehash $ ruby -v ruby 2.4.1p111 (2017-03-22 revision 58053) [x86_64-darwin15] Railsを導入する $ gem install bundler $ mkdir new_app $ cd new_app $ bundle init # gem 'rails'のコメントアウトをはずす $ vi Gemfile # オプション指定でディレクトリ配下のvendor/bundleにインストー

はじめに 以前、Qiitaに書いた記事ですが、いくつか現行バージョンではうまくいかないという指摘があったため、やり直してみました。 各バージョンは、2018年3月24日時点の安定版で試しています。 作るもの 簡単なTODOアプリです。 TODOの管理はRailsのAPIで実施します。 前提条件、及び環境 Ruby、Rails、Node.jsの環境をご用意ください。 下記の記事などが分かりやすいです。 rbenvを利用したRuby環境の構築 Node.jsとnpm インストールとアップデート また、Webpack、およびVue.jsはyarnでインストールされるため、yarnもインストールしておいてください。 yarnを使ってみた 本記事を書くにあたり、下記の環境で実施しました。 Ruby 2.5.0 Ruby on Rails 5.1.5 Node.js 9.9.0 yarn 1.5.1

概要 Webpacker を利用してRails 5.1 + Vue.js で開発を行う方法を紹介。 本記事では、開発環境を整えるまで行う 次回の記事では、Vue.js を使って Ajax 通信を行います。 Rails 5.1 + Vue.js で開発を行う - part2 Ajax で GET しよう！から確認ください 全コードはこちらより確認いただけます 環境 ruby 2.4.1 Rails 5.1.1 Vue 2.3.4 webpacker のインストール はじめに webpacker を install します。 ※ Rails アプリをすでに作成済みという前提で話を進めます。 webpacker とは Webpacker makes it easy to use the JavaScript pre-processor and bundler Webpack 2.x.x+ to