僕のイメージ(というか願望)としてはUIでComponentというからには下記ができて複数プロジェクトで使い回せてほしい。

  • コメント投稿
  • コメント編集
  • コメント削除

Image from Gyazo

昨今のWebアプリのUIに対しての要求は上がっているので

「今どきページ遷移しないで投稿・編集・削除したい」

という意見は最もだと思う。

vue.jsでいつも作ってるけど、いつもは以前のプロジェクトからcomments.vueなどのファイル一式(下記のようなやつ)をコピーしてきて編集する。

comments component

そこそこ工数かかる。こんなに編集とテストが必要ではComponentとは言えない(ように思う)。

外部からAPIのURLを渡すぐらいで上記が全部できるようになりたい。comments componentに関してはnpmでインストールしたい。

今のやり方ではAPIが違うだけでかなり変更が入る。APIやcommentが付く対象(postとか)が変わることに対応しようとすると、comment取得やコメント更新のXHR処理自体を外から注入する必要が出てくる。使いまわしたいJSコードの大半がそこなので、それを毎回書いて外から注入しなきゃいけないのでは全然楽になってない。

「今どきテキストエリアはMarkdownで書きたい」

という要求に対しては下記のようにnpmにできたので気軽に

「いいっすよ」

と言えるようになった。

textareaを画像アップ可能なmarkdown editorにするnpmモジュール - komagataのブログ

しかしコメント機能に関しては、

「できますが・・・ちょっとだけかかるかも・・・しれませんねぇ・・・」

という状態。vueだろうがreactだろうが同じだと思う。

何かいい方法は無いものかなぁ。

今までの流れはこうでした。

  1. @machidaがslimでモックとして作る。
  2. 僕がjsにするためにhtmlに翻訳してfoo.vueに移す。

これがクッソ面倒だったのですが、pugならslimとほとんど同じなのでコピペでいけました。

$ yarn add pug

templateタグにlang="pug"を追加する。

app/javascripts/packs/components/foo.vue:

<template lang="pug">
  header.content
    h1 トップページ
</template>
<script>
いろいろ
</script>
<style>
いろいろ
</style>

https://gyazo.com/749f392120b56c47372ffa524b5f06b1

「ヒューッ!」

webpackerの設定は一切無し。

RubyMineを使ってるなら、pugプラグインを入れればシンタックスハイライトもちゃんと動きますね。