経緯
- 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月 1vueify の特性上、いろんな言語が入り乱れることになるため、ここは昔懐しい 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 とか書いててすごい歴史っぽい。
