更新をした: VuejsのGUIジェネレーターを改良した話
はじめに
タイトルの通り作っているものがあるが、公開することで既にこれできるよみたいな情報も得られると思ったので公開しようと思った。
本当はもう少し作りこんでから公開したかった。
ただ、残業が多すぎてアプリケーションが作れないから転職しようとしていて、エージェントから公開しているGitHubとかQiitaのアカウントありますかと聞かれたからROM専から卒業しようと思った。
リポジトリ: GitHub
とりあえず動くもの
とりあえず動いている絵
作っている動機
基本的には READMEに書いておいたが、書きなぐりました感が強いのでもう少し丁寧に書く。
似ていたもの
既存のもので十分な人もいると思うので、作る前に調べていた時に触ったものを書いておく。
ほしかったもの
- 実用的なソースが出力される
- プロトタイピングに使ったあとで、じゃあこれで行こうとなった時に全部書き直すよりも一部直せば済むほうが嬉しい
- 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の導入
- ある程度機能がそろったら
- 残業が減ってアプリケーションを作れるようになる