これまでVue.jsでいくつかサイトを作ったりしてきました。Firebaseを組み合わせたりして手軽に実装でき、まだまだ改良すべき点はありますが非常にいい成功体験となりました。次に作るものはバックエンド含めて自分で実装してみたいと思い、今回はRailsを選んで取り組んでいます。
今回は、RailsとVue.jsの環境構築についてです。
なお、RubyとRailsはすでに導入されているものとします。 自分は次の環境で実施しました。
ruby 2.5.3 Rails 5.2.3
環境構築
rails new rails_vue_todo --api --webpack=vue
rails newをして作成します。今回はオプションに--apiと--webpack=vueを使います。
--api
--api をつけることで、普通にnewをするよりか少ないファイルで作成することができます。
- 利用するミドルウェアを通常よりも絞り込んでアプリケーションを起動するよう設定します。特に、ブラウザ向けアプリケーションで有用なミドルウェア（cookiesのサポートなど）を一切利用しなくなります。
- ApplicationControllerを、通常のActionController::Baseの代わりにActionController::APIから継承します。ミドルウェアと同様、Action Controllerモジュールのうち、ブラウザ向けアプリケーションでしか使われないモジュールをすべて除外します。
- ビュー、ヘルパー、アセットを生成しないようジェネレーターを設定します。
--webpack=vue
--webpack=vue をつけることで、Webpackerを使う設定をいれることができます。Webpackerを使うと、JavaScriptプリプロセッサおよびwebpack を使う手間が省けるうえに、RailsでJavaScriptアプリケーションのような形で管理できます。
--webpack=vue の vueをつけることで、Yarnを使用してVueとその必要なライブラリを追加します。 サンプルコンポーネントはapp / javascriptでプロジェクトに追加されるので、すぐにVueを試すことができます。
--webpack=react にすることで、reactの設定を追加することもできます。
最後にwebpackerの導入とvueの導入をおこないます。
rails webpacker:install rails webpacker:install:vue
起動
./bin/webpack-dev-server を実行してコンパイルをします。
Windowsの場合は、ruby ./bin/webpack-dev-server を実行します。
rails sでサーバを起動して、ブラウザで画面を確認できれば終了です。
今後は、素振りとしてTodoアプリの作成をおこなっていきます。
