Diary 2018-08-16 Let's change!!

Today's workings

1. VTRyo さんのお手伝い
2. エイチワークス さんと skype 面談
3. Nuxt, Webpackと格闘

Details

1. VTRyoさんのお手伝い

アンケートに回答。事の発端のツイートはこちら。

#技術書典 執筆のために、ちょっとした取材をお願いしたいのだけど、ご協力してくれる優しい人はいないでしょうか🤔
bosyu使ってみようかな

— VTRyo@Growthfaction#技術書典5 (@3s_hv) August 15, 2018

ただし、現在は締め切った模様。少しでも力になれたのなら幸い。（本当はインタビューもあったが、私用でキャンセルしちゃった…💦）

こちら、おかげさまでたくさんの方からご連絡いただきました🥰
誠に勝手ながら一旦この時間で締め切らせていただきます！
みなさまありがとうございます！ https://t.co/u5qJMpXepH

— VTRyo@Growthfaction#技術書典5 (@3s_hv) August 15, 2018

2. エイチワークス さんと skype面談

ちょっと前にconnpass経由でいろんなコミュニティに連絡されていたようで、私がオーガナイザーをやる Riot.js Japan User Group にも来た。しかも既に終わった勉強会の告知画面のお問い合わせフォームから。

どういうことかと詳しく話聞きたかったので、戦法の日程に合わせて15分ほど skype で話した。最初はやり方がよろしくなかった事への謝罪をいただいた。

連絡してきた目的はメール本文でも記載いただいた通り、勉強会のサポート（運営や資金面）をし、その見返りとして宣伝をしたいとのこと。 メインターゲットは エイチワークス さんの公式ページでも記載のあるように「フリーランス」で、 近年ITエンジニア（特にWeb）の方でフリーランスに転向される方が多く、またそういう方は勉強会に多く参加されているだろうという予測から、 その機会を使わせていただきたいということだった。

サービスの内容や、話した感じはむしろ建設的で、とても好感を抱いたので、今後何かしらの勉強会を開催する場合はお声がけさせていただこうと思う。 お互いにメリットは有るし、相乗効果が生まれるのならばそれが一番。

3. Nuxt, Webpackと格闘

やりたかったことは、.vue ファイルで書かれたコンポーネントのDocを書き、それをマークダウンなどで出力したい。 ソースコードで言うとこんな感じ。

hoge.vue

<docs>
# ほげほげ
</docs>

<template>
  <!-- コンテンツ -->
</template>

<script>
export default {
  // 省略
}
</script>

<style>
  /* 省略 */
</style>

この <docs></docs> の部分がそれ。一応調べたら、カスタムブロック · vue-loader なるものがあったので、 まさにやりたいことはこれだ！と言うものが公式ドキュメントにあって嬉しかった。しかし、早速試したのだが上手く行かなかった…(´・ω・｀)

このドキュメントの例は素のvuejsでの利用だったので webpack.config.js （vue-cliからプロジェクトを生成した場合は build/vue-loader.js）をそのままいじれば良いが、自分の案件では Nuxt.js を使っているので、 nuxt.config.js で webpack のビルド実行ルールに追加する形で設定しないといけないのだが、これがまたくせ者。

const ExtractTextPlugin = require('extract-text-webpack-plugin')

module.export = {
  mode: 'spa',
  srcDir: 'src/',
  ...
（中略）
  ...
  build: {
    extend(config, { isDev, isClient }) {
      if (isClient) {
        // 省略
      }
      if (isDev) {
        // 本当はこう書きたいのだが…
        config.module.rules.push({
            test: /\.(vue)$/,
            loader: 'vue-loader',
            exclude: /(node_modules)/,
            options: {
              loaders: {
                docs: ExtractTextPlugin.extract('raw-loader')
              }
            }
          });
          // 一旦こう書いた。rules[0] が、もうね…
          // もっと綺麗な方法あるはず（と信じてる）
          Object.assign(config.module.rules[0].options.loaders, {
            docs: ExtractTextPlugin.extract('raw-loader')
          });
      }
    },
    plugins: [
      new ExtractTextPlugin('docs.md')
    ]
  }
}

何がクセなのかと言うと、nuxtで用意作った開発環境だともともと vue-loader による設定があるので、 config.module.rules.push でルール配列に追加すると同じ loader の複数のルールがセットされるので上手く動かなかった。

で、上記のように多少無理やりだがビルドは通るようになり、ブラウザからアプリにアクセスはできるようになったが、肝心の docs.md が出力されない… これをnuxtではなく、通常のvuejsのプロジェクトを新しく作って試してみた。こちらはドキュメント通りの設定でビルドは通ったが、 こちらもほしいドキュメントが生成されず、今日は時間切れ。悔しいが明日リベンジじゃ👊

ではでは(=ﾟωﾟ)ﾉ

P.S. ちなみに、皆さんはコンポーネントのドキュメントって書いてます？

Articles

• ドメインモデル貧血症
• Getter/Setterを避けて役に立つドメインオブジェクトを作る - かとじゅんの技術日誌
• P of EAA: Transaction Script