【Vue.js】 Element UIのレイアウトコンポーネントをhtmlファイルで使いたい（Rails + Webpacker + Vue.js）

概要：Element UIではコンパイルが必要である。

Vue.jsとRailsを使用して、webアプリを作成しているが、UIライブラリとしてElement UIを採用した。
Element UIはbootstrapやbootstrap-vueなどと比べてデザインが非常に自分好みかなり気に入っている。コンポーネントの機能に関してもかなり充実している。

しかし、コンパイルが必要である等、いろいろ複雑な点もあり苦労している。

自分の現状としては、コンパイルに関してよく理解していない。
特にRailsにwebpackerを使ってvueを導入したため、自動でコンパイル関係の設定をやってくれたため、どこでコンパイルが必要で、どのタイミングでコンパイルが行われるのかよくわかっていない。
そもそも、コンパイルの意味を誤解しているかもしれない。
そのうえで、どうしたらhtmlに直接Elementを書けるのかを考えた結果がこの記事である。

問題：htmlではコンパイルされない？

アプリの開発に当たってはVue.jsのメリットを最大限に生かすべく*.vueファイルを活用してコンポーネントを積極的に行っているが、いろいろな都合があり、レイアウトに関してはhtmlで行いたい。
vueファイルでコンポーネントを作り、view（html）ファイルに組み込み、レイアウトはそのhtml上で行うということである。

Element UIには、bootstrapのようにレスポンシブなレイアウトを書く機能がある。
bootstrapではhtml上のタグのclassにレイアウトを書くが、Elementでは、vueファイルにレイアウトをタグそのものとして書き、それがコンパイルされてhtmlに反映される。

そこで、問題は発生した。
html上にElementのタグを書いてもコンパイルしてくれないのだ。（そりゃ、当たり前か...）

Element UIでのレイアウトの記述方法は以下の通りである。

sample.vue

<el-row type="flex">
  <el-col :span=12></el-col>
  <el-col :span=8></el-col>
  <el-col :span=4></el-col>
</el-row>

Elementはbootstrapと違い、レイアウトの指定をclassではなく、タグ自体で表現する。
なので、これをhtmlに適用させるにはコンパイルをする必要がある。
上記の様なタグ<el-col>をhtmlに書いても反応してくれない。
そこがbootstrapなどのcssフレームワークとの違いで、難しいところ。

解決策：タグをclass名に変換して書く！

そこで、考えた解決策がElementがコンパイルされた後のタグを書く方法である。
Elementでレイアウトを作ると、それはclass名に変換されるので、最初から、変換されたものを書くということ。
上記のレイアウトの例だと、以下の通りになる。

sample.html

<div class="el-row el-row--flex">
  <div class="el-col el-col-12"></div>
  <div class="el-col el-col-8"></div>
  <div class="el-col el-col-4"></div>
</div>

タグよっては変化の法則に例外はあるが、規則性がある。
（<el-container>は<section class="el-container">になるなどが少し例外）

このように、htmlファイルにElementを適用させるときには変換後のタグを調べて、classに書けば何とかなる。
こうすれば、ほとんどbootstrapと同じ感じで使える。

ならば、レイアウトにはbootstrapを使えばいいじゃん！とも思い試してみたが、それは大問題が発生した。
Elementで使用するclass名とbootstrapで使用するclass名が競合してしまい、Elementのコンポーネントのデザインがめちゃくちゃになってしまった。

なので、上記の通り、Elementのタグをclass名に変換して書く方法を採用することにした。
この方法が、スマートであるかは分からない。
そもそも、コンパイルについてしっかり理解して、設定をうまくできれば、htmlにも直接Elementが使えるのかもしれない。
詳しい人がいましたら、コメントで教えていただけると助かります。

おまけ

レイアウトまでvueファイルで作ればいいじゃん！思った（というか最初はそうやって書いていた）がそうすると、ファイルの構成が｛vueコンポーネント→vueコンポーネントをまとめたコンポーネント→html｝という3段構成になり、データの受け渡しとかでいろいろ複雑になってしまうので、レイアウトはhtmlで書きたいと思ったのが、この記事のきっかけです。

感想

RailsもElementもBootstrapも便利で機能モリモリのフレームワークが増えて私のような未熟者でもアプリやデザインが簡単に作れるようになっているが、その故に、内部でどんな処理が行われているかの把握は困難（知らなくてもどうにかなってしまう）になっている。
しかも、それぞれが高性能なために複数のフレームワークを同時に使うと競合してしまったりしてしまう。
なので、まずは、ライブラリやフレームワークに頼りすぎずに基礎となる知識をしっかり学ぶことが大事であると痛感させられました。