経緯
- Vue.js で構築している pizza-figlet を、試しに Browserify + Vueify してる
- all-vueify ブランチ (2015/04/01 現在)
View Logic と Markup の密結合、下の記事を読んで試してみたかった(React の記事だけど)
ところで、React.jsではComponentとして、マークアップとViewのロジックをcreateClassの中に書いていくのですが、他のフレームワークのようにマークアップはHTMLやmustacheで書いてViewのロジックをJSで書くみたいに分かれてなくて気持ち悪い!という人もいるのではないでしょうか? それに対して、React.jsの開発者であるPete Huntはそれは「関心の分離(Separation of concerns)」ではなくて「技術の分離(Separation of technologies)」だとしていて、マークアップとViewのロジックは密であるべきとしています。 reactjs - React.jsのComponentについて - Qiita
そんなこんなで .vue ファイルを書くのは良いのですが、問題は私が Emacs ユーザだということ。
vueify 、エディタの mode が無いことだけが不満。作ればいいんだけど。ちなみに SublimeText にはある
— Wataru MIYAGUNI (@gongoZ) 2015, 4月 1
vueify の特性上、いろんな言語が入り乱れることになるため、ここは昔懐しい mmm-mode を使ってみました。
その前に
.vue
内に書く <template>
や <script>
、<style>
で、lang=xxx
を使わない場合は、
mmm-mode
を使うまでもなく web-mode で何の問題もありません。
<script>
や<style>
の中は勝手に js, css と判断してくれる<template>
に関しては通常のHTMLタグ同様に扱うので問題無し
書いてみた
- dolist のネスト、
cl-loop
あたり使ったらもっと綺麗に書けるのかもしれないが、ひとまずこれで - template の部分は書いてません。jade とか使うことになったら追加すれば良さそう
こいつを eval しておくと、こんな感じになります。
とりあえずこれで大分楽になった。
まとめ
GitHub を見ると mmm-mode がまだ時々開発が行われているのと、最古のファイルが 15 years ago とか書いててすごい歴史っぽい。