Vtuberとして目標をちゃんと決めなきゃいけないなぁと思ってたところ、マンダラチャート（マンダラート）なる方法を発見したので、せっかくだしVueで作ってみようかと思って作ってみました。マンダラチャートで作れますので、ぜひ使ってみてください。

ツールは以下の通りです。自分の脳に負担がかからないようなツールを選んでます。
・vuejs
・buefy
・typescript
・parcel
・pug
・stylus

ビルドツールとしてparcelを使いました。勝手に依存するライブラリをインストールしてくれるので、控えめに言って最高です。htmlは頭がこんがらがるので、すべてpugで書いてます。可読性かなり上がると思います。vueのtemplateとしても使えます。sylusはsassみたいなやつですが、可読性がいいです。もちろんvueでも使えます。

できたマンダラチャートは画像で保存できるようにするためhtml2canvasを使いました。画像が表示されなくなる現象が起きたんですが、原因は幅の設定をvminでやってたことでした。vwだとうまくいきますので、参考になれば。

最後に核になる部分のコードをのせておきます。vueでpugはほんとおすすめです！

    table#mandara(style="border: 1px solid black")
     tr(v-for="i in [0, 1, 2]")
       td(v-for="j in [0, 1, 2]")
         table(border=1 style="border-collapse: collapse")
           tr(v-for="k in [0, 1, 2]")
             td(v-for="l in [0, 1, 2]")
               div.mandara(@click="clicked(9 * (3 * i + j) +  3 * k + l, $event)" :i="3 * i + j", :j="3 * k + l")
                 b-field(v-if="toggle[9 * (3 * i + j) + 3 * k + l]")
                   b-input(@keydown.enter.native="submit(3 * i + j, 3 * k + l, $event)" @keydown.enter.shift.native="" :va
lue="text[9 * (3 * i + j) + 3 * k + l]" type="textarea")
                 span.wrap(v-else) {{text[9 * (3 * i + j) + 3 * k + l]}}