更新をした: VuejsのGUIジェネレーターを改良した話

はじめに

タイトルの通り作っているものがあるが、公開することで既にこれできるよみたいな情報も得られると思ったので公開しようと思った。

本当はもう少し作りこんでから公開したかった。
ただ、残業が多すぎてアプリケーションが作れないから転職しようとしていて、エージェントから公開しているGitHubとかQiitaのアカウントありますかと聞かれたからROM専から卒業しようと思った。

リポジトリ: GitHub

とりあえず動くもの

とりあえず動いている絵

作っている動機

基本的には READMEに書いておいたが、書きなぐりました感が強いのでもう少し丁寧に書く。

似ていたもの

既存のもので十分な人もいると思うので、作る前に調べていた時に触ったものを書いておく。

Vuegg
- いいツールだったのだが、次に書く私のほしかったものには合わなかった
Grapes
- 初めはこれのプラグインを作ろうとしたのだが、無理やり感が出てきて断念した

ほしかったもの

実用的なソースが出力される
- プロトタイピングに使ったあとで、じゃあこれで行こうとなった時に全部書き直すよりも一部直せば済むほうが嬉しい
- Vueggはコンポーネントの配置が絶対座標だった。絵を作るのには適していたのだけど、出力をそのまま使う気にはならなかった
任意のコンポーネントを利用できる
- Vuetifyや、Elementなどたくさんコンポーネントフレームワークがあるので、任意のものが使えてほしい
- 自分が作ったコンポーネントも利用できるようになっていてほしい
- Vueggは単一のコンポーネントフレームワークしか利用できなかった (Issueにもなっている)

どうするか

任意のコンポーネントを利用するという点はアプリケーションを構築に利用しているVueインスタンスと、アプリケーション内で構築されるプロトタイプで利用するVueインスタンスが同一であると絶対に解決できないと考えた。

初めはインスタンスを複数作って Shadow DOMを使えば何とかなるとも考えたけど素直にiframeを使うことにした。

iframe要素内でscriptタグでvuejsを読み込み、アプリケーションからiframe内のVueインスタンスを参照する
メインのアプリケーション部分でvnodeに相当するツリーを構築する
iframe内のvueに渡して renderメソッドで描画

これができれば、iframe内で任意のスクリプトを読ませる機能を作ることで、『ほしかったもの』に書いた、任意のコンポーネントが利用できるの要件を満たせる。

面倒だったこと

Vuex Store は複数のインスタンスで共有できない

アプリケーションで構築するvnodeデータをVuexで管理して、そのデータをiframe内のvueでも共有して renderでstateを参照できれば一番シンプルだと考えて、Vuexベースで作ってた。(入門したてのTypeScriptでstoreに型つけるにはどうすればいいんだとか調べてまぁまぁ時間かかった)。
いざ描画しようと思ったら、できないということを知って困った困った。

結局 Rx を併用して無理やりやっている感がある。

Vueに登録されている全コンポーネントが知りたい

アプリケーションの性質的に利用できるコンポーネントがリストされていて、選択できないといけないが、それを取得するためのインターフェースが見つからなかった。

devtoolsとか見ていたら方法がありそうだったので調べたら、Vue.options.components に入っていた。

おわりに

Vuejsでのプロトタイピングを簡単にできるアプリを作っているという話でした。
もしも、上に書いた『ほしかったもの』をカバーするサービスやアプリケーションがあれば教えていただけると嬉しいです。

以下が、今後やりたいこと。

追加したい機能
- 任意のコンポーネントフレームワークを使えるようにする (いまはvuetifyのみだけど仕組み的には可能なのですぐやりたい)
- 複数ページへの対応 (vue-routerで)
- 作成途中の保存・読み込み
機能以外で対応したいこと
- リファクタリング
- CI・CDの導入
  - ある程度機能がそろったら
残業が減ってアプリケーションを作れるようになる