仕事辛い

まだ作業途中だけど、仕事で必要になったので書いてる。
Wordpressの記事を作るとき、ある程度決まったフォーマット上を与えて特定の箇所だけ、自由にかけたりするようなものがほしくて、それを結構な数用意しないといけない。(現状は4つだが・・・)

jQueryのゴリ押しで出来なくもないんだけど、ちょっとした改修が面倒だと嫌だし、他のデータをもとにして動的に画面が作られる部分も多い。例えばタイトルを変えるとパンくずの末端にあるタイトル部分も変わるとか。
それに、特定の項目は可変長で増えるので、そのテンプレートをどこかで保持しないといけない。jQuery一本でやるとなると、JavaScriptに持たせるかしないといけない。(WebComponentsはまだ未来の技術みたいだ。)


やりたいことは・・・

  • フォーマットは決まっているので、記事データはHTMLではなくてJSONで管理できる形にする
  • 見せ方を変えるぐらいの対応はできるようにしたい。(記事にデザインを含めると死ぬので。)

んでテンプレートエンジン的なものを使いたくなったので、Vue.jsを使ってできないか色々試してた。

https://jsfiddle.net/4e7qr7me/7/

今は2項目をテンプレートで出しているだけのしょぼいもんなんだけど、contenteditableの領域を変更するとJavaScriptのデータに反映される。
このおかげで保存時はこれを保存し、復元するときはテンプレートを元にhtmlを生成し埋め込む、といった事が出来る。

最初、Reactjsも調べてたけど、es6(es2015?)トランスパイラとかwebpackとかないと動かないし、なんか面倒。それにたぶんやりたいことにマッチしない感じがした。

Vue.jsでやってることは初歩の初歩だけど、覚えることが多いし、directiveを使うべきかcomponentにしてしまうべきか判断しにくい。
でも今回やりたかった双方向なデータバインディングが楽にかける。

最近の風潮では子で変更操作をするのは悪で「親から変更用コールバックもらって使え」とか「fulxに倣え」とかいろいろある。でも、それを使えば後からの見通しの良いコードが書けるのか凄い微妙だった。共通の知識がある人が来るなら別だけど、そうでないならVuejsというブラックボックスがあるとはいえコードは少なくて済む方が理解はしやすいと思う。

ちょっと脱線した。

後は、JavaScript+jQueryで項目を動的に追加できるようにしたり、
これをWordpressの記事編集画面に組み込まないといけないのだけど、この他にもいろいろいじる要件が出てて大分辛い。