じまろぐ

めめ

Vueコンポーネントのビルド時に不要な属性をtemplateから取り除く

テスト用にdata-test属性を使ってる

VueコンポーネントのテストをJest + vue-test-utilsで書いてる。

dataとかpropsの値によって状態が変化する要素のテストをするとき、要素の特定のためにクラス名使うといろいろ大変だからテスト用にdata-test属性を使ってる。

blog.kentcdodds.com

data-test属性を消したい

テストするときには便利だけど、あくまでテスト用で、リリースするときには消しておきたい。

特定の属性を消すReact用のbabelプラグインがあったけど、Vue用のは見つけられなかった。代わりにフォーラムで見つけたのがこれ。

forum.vuejs.org

vue-loaderのオプションで属性消せるよとのこと。

次のコードはフォーラムのコードからNODE_ENV の値見てるとことlodash依存を排除したやつ。

{
  compilerModules:  [{
    preTransformNode(astEl) {
      const { attrsMap, attrsList } = astEl
      if (attrsMap['data-test']) {
        delete attrsMap['data-test']
        const index  = attrsList.findIndex(x => x.name == 'data-test' )
        attrsList.splice(index, 1)
      }
      return astEl
    }
  }]
}

これでdata-test属性が消えて万歳🎉

nuxt.jsで同じことしたい

nuxt.config.jsbuild.extendでvue-loaderのオプションを指定する。

module.exports = {
  build: {
    extend (config, ctx) {
      if (!ctx.isDev) {
        const vueLoader = config.module.rules.find(rule => rule.loader === 'vue-loader')
        vueLoader.options.compilerModules = [{
          preTransformNode(astEl) {
            const { attrsMap, attrsList } = astEl
            if (attrsMap['data-test']) {
              delete attrsMap['data-test']
              const index  = attrsList.findIndex(x => x.name == 'data-test' )
              attrsList.splice(index, 1)
            }
            return astEl
          }
        }]
      }
    },
  }
}

Circle CI 2.0 timezoneの設定

config.ymlenvironmentTZ: Asia/Tokyo を指定する

version: 2
jobs:
  build:
    docker:
      - image: node:8.9.0
        environment:
          TZ: Asia/Tokyo

2017年買ってよかったもの

家電をアップグレードしてQOLが向上した年。

Switch * 2

自分用と妻用、2台のSwitchを必死こいて購入。スプラ2、マリオデ、DLソフトなどいろいろ楽しんだ。これによってゲーム熱が高まり、ゲーム用PCを購入するに至った。

ゲーム用Win機

Steamのゲームがやりたい、とくにCupheadがやりたくてゲーム用のWin機を購入。買ったのはこれ

メモリとHDD足してこんな感じのスペック

CPU: Core i5-7500 ( 3.40GHz 2400MHz 6MB )
メモリ: 24GB(8.0GB PC4-19200 DDR4 UDIMM 2400MHz * 3)
ストレージ: SSD 256GB + HDD 4T
グラボ: NVIDIA GeForce GTX 1060 6GB GDDR5

とりあえずどのゲームも快適にやれてる。3ヶ月で50くらいのゲーム購入。

Dead Cellsが一番のお気に入り。おもしろい store.steampowered.com

4Kモニタ

これ買った。作業が捗る。

こたつ

www.nitori-net.jp

オフィスにこたつが導入されたのに引っ張られる形でこたつを購入。毎日のようにこたつでダメになっている。

でかい冷蔵庫

日立の555のやつ。 kadenfan.hitachi.co.jp

真空チルドが最高な感じ。

容量がでかくなって買い置きも作り置きもいっぱいできるようになった。日本酒買いまくって材料が入れられないてのがなくなったのも最高。QOL👆👆。

ドラム式洗濯機

パナソニックのスリム型。

www.sharp.co.jp

乾燥までできるおかげで洗濯に使う時間が相当減った。その分の時間を仕事とか料理とかいろんなことに使えるようになったので、QOL👆👆。

別の一回り大きいやつ頼んだら洗濯機置き場が小さくて持って帰ってもらった。サイズは幅だけでなく奥行きも考えて通路の幅を測りましょう…。

Anova

New: Anova Precision Cooker - WIFI 2nd Gen (900 Watts)

New: Anova Precision Cooker - WIFI 2nd Gen (900 Watts)

セールで購入。紀伊国屋のうまい牛肉で作るとなんでもうまい。

豚肉は値段に関わらずうまくなってコスパが大変良い。

電気フライヤー

あげもの超うまい。

象印 あげあげ 電気フライヤー メタリックカカオ EFK-A10-TJ

象印 あげあげ 電気フライヤー メタリックカカオ EFK-A10-TJ

からあげととんかつおいしい☺

来年は

料理の腕を上げていきたい所存💪

2017年振り返り

今年はいろいろな面で成長を実感できた年でした。

今年作ったもの

GitHub風のdiffを生成するライブラリ

技術記事のコードブロックをdiffにしてみたらどうか、と思いたって作ったやつ。作ったといっても実際はライブラリを2つくっつけただけなんだけど。

github.com

Performance系のAPIで取れるデータを蓄積して可視化するツール

f:id:nakajmg:20171231153458p:plain

  • Performance系API
    • Navigation Timing API
    • User Timing API
    • Resource Timing

を使ってjson-serverをストアにしてローカル環境での開発時にクライアントサイドのパフォーマンスデータを蓄積してく。DevToolsでやりゃいいやつだけど、モバイルのブラウザとかSafariとか、クロスプラットフォームな感じでログを残せるようにしたい、というモチベで作ったやつ。

勉強がてらにReact+MobXで作成した。

github.com

esa-pages.io

Slackのユーザーステータスの変更を可視化するやつ

Electron + Vue + Slack API

詳しくは過去のエントリで

nakajmg.hatenablog.com

github.com

ほか

privateなリポジトリのままで公開してないのがいくつか。完成させるのはやはり勢いが必要だ。

今年印象に残ったライブラリとか

お仕事、個人プロジェクトを通して使ったもろもろ。中でも👇のやつが印象深い。

  • Vue
  • Nuxt
  • Firebase

去年から引き続き、案件のほとんどでVueを採用した。慣れているというのが一番の理由だが、悩むことなく進められるのはやはり良い。

Nuxtは個人プロジェクトで少しさわったあと、案件で採用してみた。今のところ開発体験を向上させてくれる良いもの、という印象。2018年はNuxtに乗っかっていく年になりそう。

Firebaseには大変お世話になりました。連載で解説も書いた。

app.codegrid.net

個人プロジェクトで何かつくるとき、バックエンドのデータストアを用意する手間も悩みも解消。functionsに色々と処理を任せられるのも大きい。

OAuthで認証するAPIとかはコールバックURLの登録が必須で、Electronで使う場合に困ってたのが、functionsに丸投げすることで解消できて最高だった。

プライベートのはなし

5月に入籍しました。大変幸せに暮らしております。

2018年もいい年になりますように🙏

GitHub API v4のGraphQLをaxiosとApolloで叩いてみる

ググっても最小限のサンプルがなかったので調べて試した。node環境を想定。

axiosで叩いてみる

npm i axios しておく。

const axios = require('axios')
const accessToken = 'xxxxxxxxxxxxxxxxxxxxxx'

axios({
  url: 'https://api.github.com/graphql',
  headers: {
    Authorization: `bearer ${accessToken}`,
    Accept: 'application/vnd.github.v4.idl'
  },
  method: 'POST',
  data: {
    query: `query { 
       repository(owner: "vuejs", name: "vue") { 
        name,
        description,
        license
      }
    }`
  }
})
.then(res => res.data)
.then(console.log)

実行すると👇のが返ってくる

{ data: 
   { repository: 
      { name: 'vue',
        description: 'A progressive, incrementally-adoptable JavaScript framework for building UI on the web.',
        license: 'MIT License' } } }

accessToken

accesTokenAPIの認証用のトークン。こことかcurlで取得しておく。

漏れるとダメなやつなのでpublishするときは環境変数とかに入れときましょう。

Apolloで叩く

www.apollographql.com

package.json

パッケージがいろいろ必要。npm iしておく。

{
  "dependencies": {
    "apollo-cache-inmemory": "^1.1.4",
    "apollo-client": "^2.0.4",
    "apollo-link": "^1.0.7",
    "apollo-link-http": "^1.3.2",
    "graphql": "^0.12.3",
    "graphql-tag": "^2.6.1",
    "node-fetch": "^1.7.3"
  }
}

コード

const gql = require('graphql-tag')
const access_token = 'xxxxxxxxxxxxxxxxxxxx'
const {ApolloClient } = require('apollo-client')
const {HttpLink } = require('apollo-link-http')
const {ApolloLink, concat} = require('apollo-link')
const {InMemoryCache } = require('apollo-cache-inmemory')
const fetch = require('node-fetch')

const authMiddleware = new ApolloLink((operation, forward) => {
  operation.setContext({
    headers: {
      Authorization: `bearer ${access_token}`,
      Accept: 'application/vnd.github.v4.idl',
    }
  })
  return forward(operation)
})

const httpLink = new HttpLink({ uri: 'https://api.github.com/graphql' , fetch})
const client = new ApolloClient({
  link: concat(authMiddleware, httpLink),
  cache: new InMemoryCache()
})

client.query({ query: gql`{
  repository(owner: "vuejs", name: "vue") { 
    name,
    description
  }}`
}).then(console.log)

headerの設定が若干めんどくさい。

実行すると👇のが返ってくる。

{ data: 
   { repository: 
      { name: 'vue',
        description: 'A progressive, incrementally-adoptable JavaScript framework for building UI on the web.',
        __typename: 'Repository' } },
  loading: false,
  networkStatus: 7,
  stale: false }

graphql-tag

github.com

graphql-tag がGraphQLのquery書くのに便利なやつぽい雰囲気。

コンポーネント思考なCSSの命名規則

Qiitaに書いた。

qiita.com

SFCSSは.vueファイルという1ファイルにtemplate script style の全てが詰め込めるからこそできる命名。

外部ファイルでCSSを書くときにSFCSSを適用するのはあまり利点がないように思う。

コンポーネントの粒度

コンポーネントの粒度、Vueではtemplatestyleを一緒に書くのでこの辺りの乖離が少なく済むような感じがしている。

resolve mongoose warning

version

4.12.5

warning

DeprecationWarning: open() is deprecated in mongoose >= 4.11.0, use openUri() instead, or set the useMongoClient option if using connect() or createConnection()

and

DeprecationWarning: Mongoose: mpromise (mongoose's default promise library) is deprecated, plug in your own promise library instead: http://mongoosejs.com/docs/promises.html

fix

mongoose.connect(mongoURL, {
  useMongoClient: true
})

and

mongoose.Promise = require('bluebird')

link

https://github.com/Automattic/mongoose/issues/5399

https://github.com/Automattic/mongoose/issues/4951

f:id:nakajmg:20171128172739p:plain

Upgrading is not always the best option.

lol