モノラルログ

マツオ ( @matsuoshi / monaural.net ) のざっくりしたブログです

vue.js で v-for を使って <dl> リストを作るとき

今さら知ったメモ

前提

vue.js で、配列のデータを定義リスト (<dl><dt><dd>) として出力したい。

あれ、v-for でどう書けばいいんだっけ、となった

<template> というタグが使える

結論、こんな感じ

<dl>
  <template v-for="item in items">
    <dt>{{ item.title }}</dt>
    <dd>{{ item.description }}</dd>
  </template>
</dl>

<template> タグ自体は、実際のレンダリング時には出力されない。なのでこの例では <dl><dt><dd> のみが出力される形。

なるほど

公式ドキュメント

ふつうに <ul><li> での例が公式ドキュメントにも載ってた、1つのループ内で複数のリストを出力したい例

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider" role="presentation"></li>
  </template>
</ul>

jp.vuejs.org

読んでる途中「測りすぎ――なぜパフォーマンス評価は失敗するのか?」

読んでる途中。

まあ、タイトルが興味ひきますよね、「測りすぎ――なぜパフォーマンス評価は失敗するのか?」

そして第1章「簡単な要旨」に出てくるいくつかの格言の時点でグッときましたので、その格言を引用しておきます。


「測定執着」について

「測れないものは、改善できない」
「測定されるものは実行される」
「測定できるものはすべて改善できる」

という、測定に関する執着からの、

「数えられるもののすべてが重要なわけではなく、重要なものすべてが数えられるわけではない」
定量的な社会指標が社会的意思決定に使われれば使われるほど、汚職の圧力にさらされやすくなり、本来監視するはずの社会プロセルをねじまげ、腐敗させやすくなる」
「管理のために用いられる測定はすべて、信頼できない」

んむんむ。

というわけで続きが気になる。読む。

Nuxt.js で underscore.js を使う

Nuxt.js で underscore.js を使うためのメモ。

1. vue-underscore を入れる

yarn add vue-underscore

2. プラグイン化する

/plugins/underscore.js ファイルを作成、中身は以下3行

import Vue from 'vue'
import underscore from 'vue-underscore'
Vue.use(underscore)

3. nuxt.config.js で設定

さっき作ったプラグインファイルを指定しておく

  plugins: [
    { src: '@/plugins/underscore', ssr: false },
  ],

4. 使う

    mounted() {
      console.log(this.$_.range(10, 20))
    },

以上です

参考

github.com

github.com

pause//2005 (Spotify プレイリスト)

f:id:matsuoshi:20190808163105p:plain

2020年の5月頃によく聴いていた曲プレイリストです。Spotify にてどうぞ。

Remi Wolf, Wajatta, mxmtoon, Emoress Of, Model/Actriz, Jordana ほか

過去作ったプレイリストは、別ブログ (音楽ブログ "pause") のこのへんに置いています

pause.monaural.net

algolia でサイト内検索、オートコンプリートを実装する

f:id:matsuoshi:20200613101549p:plain

無料から使える爆速の全文検索サービス Algolia

www.algolia.com

別でやってる音楽ブログ "pause" のほうに導入してみました。(右上のメニューから検索できます)

pause.monaural.net

こちらブログは hugo + netlify でホスティングしているんですが、静的サイトジェネレータで作ったサイトにも簡単に全文検索を仕込めますね、便利……!

オートコンプリートを実装する

さて、Algolia の使い方。

バックエンド側、 indexデータ の登録方法なんかはググるとすぐ出てきます。一方フロントエンド側、オートコンプリートの実装方法についてはちょっと試行錯誤したので、メモを残しておこうかと。

InstantSearch.js を使う

具体的には、Algolia から提供されている InstantSearch.js を使います。ドキュメントはこちら

www.algolia.com

必要なパッケージとしては、algoliasearch と instantsearch.js の2つです。インストールしておきます。

npm install algoliasearch instantsearch.js

JavaScript を書く

ざっくりこんな感じ

import algoliasearch from 'algoliasearch/lite'
import instantsearch from 'instantsearch.js/es'
import {connectAutocomplete} from 'instantsearch.js/es/connectors'

// initialize
const search = instantsearch({
  indexName: 'algoliaのインデックス名',
  searchClient: algoliasearch('アプリID', 'APIキー')
})

// Helper for the render function
const renderIndexListItem = ({indexId, hits}) => `
  ${hits
  .map(
    hit =>
      `<li><a href="${hit.permalink}">${hit.title}</a></li>`
  )
  .join('')}
`

// Create the render function
const renderAutocomplete = (renderOptions, isFirstRender) => {
  const {indices, currentRefinement, refine, widgetParams} = renderOptions
  const $input = widgetParams.container.querySelector('#autocomplete_input')
  const $result = widgetParams.container.querySelector('#autocomplete_result')

  if (isFirstRender) {
    $input.addEventListener('input', event => {
      refine(event.currentTarget.value)
    })
  }
  $input.value = currentRefinement

  result.innerHTML = indices
    .map(renderIndexListItem)
    .join('')
}

// Create the custom widget
const customAutocomplete = connectAutocomplete(renderAutocomplete)

// Instantiate the custom widget
search.addWidgets([
  customAutocomplete({
    container: document.querySelector('#autocomplete')
  })
])

search.start()

algolia search のAPIキーなどは、管理画面から取得必要です。

この例だと renderIndexListItem() が、検索結果をレンダリングする部分になります。

html側の準備

オートコンプリートを入れたい部分に、こんな感じの html を追記

<div id="autocomplete">
  <input id="autocomplete_input">
  <ul id="autocomplete_result">
</div>

id名とかはてきとうにJS側と揃えておけばよし

以上で検索処理の実装は完了です、テキストフィールドに文字を入力することで、リアルタイムなオートコンプリートが行われると思います。

あとはいい感じにCSSで見た目を調整ですね


実装例

こちらのブログになります (右上のメニューから)

pause.monaural.net

追加でメニューの開閉処理とか、初期状態で検索を実施しないようにするとか、入力値が空の場合は検索結果を表示しないとか、こちょこちょコードを足して調整しています。