【Slim】レンダリングされるscriptタグに属性を付与しつつ、2行以上のJavaScriptを書く方法【Rails】

Rails

小さなことですがハマったのでシェアです。

やりたいこと

以下のようなHTMLを、Slimを使ってレンダリングすること。

  • scriptタグで記載される要素
  • 要素のコンテンツは、Slim内で2行以上で書かれるJavaScriptコード
  • type属性に値を指定する

つまり、レンダリングしたいHTMLは以下のような感じです。

<script type="module">import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.mjs'
const swiper = new Swiper('.swiper', {})</script>

コードはスライダー用のJSのライブラリ「Swiper」の導入のためのものをお借りしました。

swiperjs.com

ハマったこと

Slimでは、javascript:という埋め込みテンプレートエンジン表記を使えば、scriptを使わずとも複数行のJSを書き、それらのコードをscriptタグで囲うことができます。

（本記事ではこれ以降、Slimコードとそのレンダリング結果を以下のように連続に並べます）

javascript:
  import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.mjs'
  const swiper = new Swiper('.swiper', {})
<script>import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.mjs'
const swiper = new Swiper('.swiper', {})</script>

ただこのscriptタグは内部でモジュールを扱っているので、type属性にmoduleを指定したいわけです。そこで以下のような感じで書けるかな？と思ったんですが、うまくいかなかったのです。

（type="module"がscriptタグのコンテンツに入ってしまう）

// javascript: の後にtype属性を指定するっぽく書いてみる

javascript: type="module"
  import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.mjs'
  const swiper = new Swiper('.swiper', {})
<script>type="module"
import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.mjs'
const swiper = new Swiper('.swiper', {})</script>

解決法1

埋め込み構文であるjavascript:ではなく、scriptタグを使い、コンテンツの記載でパイプ（|）を使う。

script type="module"
  |
    import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.mjs'
    const swiper = new Swiper('.swiper', {})

<script type="module">import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.mjs'
const swiper = new Swiper('.swiper', {})</script>

検索した際にヒットした以下の記事で紹介されていた方法です。大変助かりました🙏

tools.bigwave.biz

ただ、できればjavascript:を使って書けると、やっていることが明示的になってより嬉しい気がしたので、その後もいろいろ試したり調べたりしてみました。

解決法2

javascript 属性=値:と記載する。

javascript type="module":
  import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.mjs'
  const swiper = new Swiper('.swiper', {})
<script type="module">import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.mjs'
const swiper = new Swiper('.swiper', {})</script>

javascript: 属性=値ではないところがポイント（コロンの位置）。

これでOKでした。SlimのReadmeにしっかりと書いてあったので、やはり最初にあたるべきなのは公式Docですね🙇‍♂️

以下埋め込みエンジンの場合はHTMLのattributeも指定できます： Javascript CSS CoffeeScript LESS SASS SCSS 例：

scss class="myClass":
  $color: #f00;
  body { color: $color; }

github.com

CSSなどの埋め込み表記があることも知らなかったので、時間があるときにSlimのドキュメント全体にも目を通してみたいなと思います。