質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

解決済

Rails, Vue.js で単一ファイルコンポーネントを使用したいときの設定ファイルの書き方

okutamatanuki
okutamatanuki

総合スコア0

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

1回答

0評価

1クリップ

23閲覧

投稿2020/07/24 23:30

何に困っているか

既存のRailsアプリにVue.jsを導入し、単一ファイルコンポーネントで一部のパーツをVue.jsのテンプレートで作成したいと思っています。

何とか動くようにはなったのですが、設定ファイルが非効率な書き方になっているので直したいと思っています。社内にVue.jsの知見のある人がおらず、調べても見つかりませんでしたので、何卒宜しくお願い致します。

前提条件・実行環境

  • Rails 5.2.4.2
  • Vue.js 3.0.1

rails new 時に webpacker は導入していますが、Vue.jsは導入していません。

rails new app_name --skip-coffee --skip-turbolinks --webpack

Vue.js は後から./bin/rails webpacker:install:vueで導入しています。

作成したファイル

レイアウトファイルに以下のコードを記述しています。

Ruby

# vews/layout/application.thml.haml = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'

コンポーネントはこのような形でviewに埋め込んでいます。(今回はトップに戻るボタンのコンポーネントなので、scroll_top_btn.vueというファイルを作成しています。)

Ruby

# viewファイル %scroll-top-btn

.vueのテンプレートファイルは、一度hello_vue.jsにまとめて、application.jsに読み込んでいます。

js

// javascript/packs/hello_vue.js import Vue from 'vue/dist/vue.esm' import ScrollTopBtn from '../components/scroll_top_btn.vue' document.addEventListener('DOMContentLoaded', () => { new Vue({ el: 'scroll-top-btn', components: { ScrollTopBtn } }) })

js

// javascript/packs/application.js import './hello_vue.js'

問題点

悩んでいるのは、このhello_vue.jsの記載方法で、

js

// javascript/packs/hello_vue.js document.addEventListener('DOMContentLoaded', () => { new Vue({ el: 'scroll-top-btn', components: { ScrollTopBtn } }) })

この書き方だと、コンポーネントが増えるたびに都度new Vue()hello_vue.js内に記載しないといけなくなってしまいます。何とか、もっとスマートに描く方法はありませんでしょうか?

ちなみに、単一ファイルコンポーネント内はこのようになっております。

vue

// javascript/componemts/scroll_top_btn.vue <template> <div class="scroll-top-btn"> <img src="/img/btn_img.svg" @click="scrollTop" /> </div> </template> <script defer> export default { methods: { scrollTop: function() { // 処理 } } } </script>

どうぞよろしくお願いいたします。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。