小さなことですがハマったのでシェアです。
やりたいこと
以下のような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」の導入のためのものをお借りしました。
ハマったこと
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>
検索した際にヒットした以下の記事で紹介されていた方法です。大変助かりました🙏
ただ、できれば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; }
CSSなどの埋め込み表記があることも知らなかったので、時間があるときにSlimのドキュメント全体にも目を通してみたいなと思います。