vuejsをrails7にimportmap経由でvenderにDLで導入

今回はvuejsをrails7にimportmap経由で入れる際の手順についてまとめます。今回はvenderにDLする形で使います。rails7になってjavascript周りが大きく変わりました。importmapがそもそもなんなのかから説明していきます。

rails7から導入されたimportmapとは？

importmapは、Rails 7で導入された新機能であり、JavaScriptの管理方法を大きく変えています。下記が特徴になります。

JavaScriptライブラリの読み込みの簡素化

importmapは、Rails 7で導入された新機能で、サードパーティのJavaScriptライブラリをデフォルトの方法でロードすることを可能にします。具体的には、これらのライブラリをそのベアモジュール指定子に単に参照することによって、WebpackやNode.jsをパッケージから削除することができます。

バンドルの必要がない

importmapによって、Node.jsやWebpackのようなツールを使用せずにJavaScriptライブラリを管理できます。これにより、バンドルの必要がなくなり、アプリケーションは多くの小さなJavaScriptファイルを提供することができます。

２つのやり方

importmap公式ドキュメント

https://github.com/rails/importmap-rails

importmapでjavascriptライブラリを使う方法は下記２つある。

importmap.rbでCDNのURLを指定
venderフォルダにDL

後者だとCDN側の通信に依存しないです。今回は後者のやり方で実装します。

全体の流れ

全体の流れとしては下記

importmapにvueのはいったファイルと変数をpinで設定する。今回はvueにファイルを紐付ける。
htmlのheadにimportmapの読み込みタグ設置。html生成時にimportmapタグが生成される。
app/javascript/application.jsに動作を記述（これはjavascriptフォルダ内なら他のフォルダでもいい
importmapにapplication.jsもpinで指定
htmlにvueの処理を書く。今回はhello vueと表示させる。

javascriptの処理はjavascriptフォルダ内にファイルごとに分けて書き、importmapで紐づけて管理する。vueなど重いものに関してはvenderフォルダに入れる。

importmap gemの導入

まずは下記でimportmapのgemを導入

gem 'importmap-rails'

gemの設定ファイルを作成するために下記コマンド

rails importmap:install

vueのファイルDL

docker-compose run web ./bin/importmap pin "vue/dist/vue.esm-browser.js" --download

docker配下の場合上記でvenderフォルダにvueをDL。

上記コマンドでnpmのパッケージをDLできるのでnpmのライブラリ名を使う。

https://github.com/rails/importmap-rails

上記記事にあるように下記のようなコマンドも。

https://www.npmjs.com/package/react

./bin/importmap pin react react-dom

vueのどのファイルを使うべきかは下記。
https://github.com/vuejs/core/tree/main/packages/vue#which-dist-file-to-use

importmap.rbへの記述

importmap.rbに下記を記述。

pin "application", preload: true

manifest.jsへの記述

app/assets/config/manifest.jsに下記記述

//= link_tree ../images
//= link_directory ../stylesheets .css
//= link_tree ../../javascript .js
//= link_tree ../../../vendor/javascript .js

viewへの記述

<div id="app">{{ message }}</div>

application.jsへの記述

import { createApp, ref } from 'vue'

  createApp({
    setup() {
      const message = ref('Hello Vue!')
      return {
        message
      }
    }
  }).mount('#app')

viewにscriptを書く場合は下記。type=”module”をつけるように。

    <div id="app">{{ message }}</div>
    <script type="module">
      import { createApp, ref } from 'vue'

  createApp({
    setup() {
      const message = ref('Hello Vue!')
      return {
        message
      }
    }
  }).mount('#app')
    </script>

まとめ

上記でhello vueを表示できたはず。