Vue.js の勉強してるけどなんかなぁ…って感じ。どうも文法というか書式というかに馴染めない感じ。自分の頭がオブジェクト指向じゃないからなんだろうけど。MVVM の解説読んでみたけど初歩的なことやってないから View とか Model とかよくわからない。
さて、Elasticsearch に貯めたデータをほぼそのまま Vue.js に持ってきてるんだけども、設計のミスもあったせいでちょっと困った。
大抵の書籍の場合、一つの書籍に対して一人の著者が結び付く 1:1なんだけど、書籍やストアによっては一つの書籍に対して複数の著者が結びつく 1:nになっていることがある。
xpathで取り出しているせいもあって、初期段階では全ての項目が配列になっているところを、配列の長さが 1のものは文字列に変換する処理をかけていた。
1:1 のデータ
{"hits": {"_source": {"book_name": "五等分の花嫁", "author_name": "春場ねぎ", "author_url": "https://booklive.jp/focus/author/a_id/123817" }}}
1:n のデータ
{"hits": {"_source": {"book_name": "転生したらスライムだった件", "author_name": ["川上泰樹", "伏瀬", "みっつばー" ], "author_url": ["https://booklive.jp/focus/author/a_id/121592", "https://booklive.jp/focus/author/a_id/110906", "https://booklive.jp/focus/author/a_id/110907" ]}}}
Pythonであれば zip(author_name, author_url)で２つの配列を紐付けることができるんだけど Vue.js というか JavaScriptでその方法がわからない。
じゃあインデックスは一致してるんだから片方のインデックス使って参照すればいいんじゃないの、と思ったけど、1:1の方は文字列で入っているので v-forに入れてしまうと1文字ずつに分割されてしまう…Oh。
というわけで v-if="Array.isArray()"で条件分岐すればいいんじゃないかと思ったけどネット上にうまいことやってるお手本が無かった。個人的にはこういう情報がネットにあると嬉しいんだけどなぁと思う。言語によって説明が上手い人もいたりいなかったり。言語の好みはこういうところから分かれていくのだろうか。
v-forはインデックスも取れるようなので author_nameのインデックスを index変数に入れて、そのインデックスを使って author_urlの値を拾ってくる。
<!-- author_name が配列の場合 --><ul v-if="Array.isArray(hits._source.author_name)"><li v-for="author_name, index in hits._source.author_name"><a v-bind:href="hits._source.author_url[index]">{{ author_name }}</a></li></ul><!-- author_name が文字列の場合 --><ul v-else><li><a v-bind:href="hits._source.author_url">{{ author_name }}</a></li></ul>
Vue.js の公式サイトも翻訳されててまぁいいんだけどどうも説明の仕方が微妙。MDN はわかりやすいんだけどなぁ…。最近は文章読んでも理解できないし、いまから JavaScript思い出すのもしんどい…(；´Д｀)
久しぶりに Web サイト作ってみたものの、内容が至極個人的なものなので見た目とか自分がわかればどうでもいいじゃんよって思うようになりこれ以上モチベーションが上がらない。
対象ストアも増えてきちゃったし。ていうかお前 Amazonしか使ってないじゃん？しかもランキングなら Kibana とか Grafana で推移見ながらの方が楽しいじゃない？とかなんとか。
昨日、ニュースに出ていた「アル」というサービスはとても良いものだと思う。自分にはこういうアイデア思いついたりとか実際に作ろうという行動力が無いのですごいなと思う。
さぁこの下がり続けるモチベーションをどうしようか…。