micro-template.js という2012年に作った embed JS 的なテンプレート処理ライブラリがある。コピペできるぐらい小さくて、早いことがコンセプト。
完全に放置してたけど、ちょっと手を入れはじめたらいろいろやりたくなってしまったので、だいぶ改修をいれてしまった。
いきなりトランスパイルの環境作って常時ビルドツールを動かして開発するのがいまいち性にあわず、いまだにそういうことをしないようにしてる。小さいプロジェクトだと管理が面倒くさい。
Vue3 はなんかいろいろさらに面倒になっており、公式のクイックスタートが全然クイックじゃねーよと思っていた。さらにクイックな方法を試行錯誤してたけど、現状の最小限サンプルを作っておくことにした。追記: 公式にも最小限サンプルあるわ……
最近のブラウザは ESM の import に対応しており、これ前提なら変なこと(ビルド)しなくても、このままに動く。ただブラウザで開くだけで良い。開発開始には十分だし、余計なことを考える必要はない。
一応ファイルを分けてるけど、app.js の内容は index.html に埋めこんでも良い。
「バニラJSだと面倒くさいUI状態があるが、いっぱいビルドとかはしたくない」みたいなことは多い。
以下は template 要素を使っている。template 要素を div 要素にして createApp に template を指定しなくても、mount("#app") でもいける。けど、template じゃない場合、table の td tr などで要素が消滅してハマることがある。
// app.js
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
createApp({
data() {
return {
counter: 0,
}
},
mounted() {
console.log('App mounted');
},
template: document.querySelector('#app').innerHTML
}).mount(document.body); <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello</title>
<script type="module" src="./app.js" defer></script>
</head>
<body>
<template id="app">
<h1>Hello</h1>
<button @click="counter++">Click me</button>
<p>Counter: {{ counter }}</p>
</template>
</body>
</html> petite-vue はメンテされてるのだろうか。どこかのタイミングでVue3の機能やらビルドをしたくなったときのことを考えると Vue3 そのまま使ってもいいと思う。
音価を維持して和音をペーストする MuseScore のプラグイン を書いてみた。(Claude Codeが書いた)
ギターの譜面を作ろうと思うと同じリズムでコードだけ違うのをいっぱい入力する必要がでてくる。MuseScore 標準だとコピペがかなり不自由で嫌気がさしていた。普通に考えて、コピーしているものをペースト先の音価を維持して置き換える機能があっていいと思うんだけど (もしかしてある?)
プラグインを起動するとコピーとペーストのボタンが出るので、コピー元の和音を1つ選択してコピーボタンを押し、ペーストしたい先の範囲を指定してペーストボタンを押す。すると音価は維持されたまま、指定した範囲の和音が置き換わる。