週報のように書いていく予定だったんですが、前回の更新から早1ヶ月。気を取り直して、 GitHub だったり、このブログでアウトプットしていきたいと思います。お山なブログも更新したいな。

2018/09/23 - 2018/10/21

今年は台風(2018年の台風)が多かった。多かったように思っていたが、発生数は例年とあまり変わりはなく、上陸したものが例年より多かったんだとか。

その頃僕はこんなことやっていた

Vue.js 入門を読んだ

業務ではNuxt.jsを使ってWebアプリケーションを作っています。 Vue.js を触ったこともないまま Nuxt.js を書きはじめた人なので、だいぶ Vue力に不安があり、日本のVue.js を牽引している方々が出版したと聞いて速攻で購入させていただきました。
gihyo.jp

ここでは、この本で新たに知った、事柄を記載していこうと思います。

コンポーネントの命名はケバブケースの利用を推奨

コンポーネントは、「ケバブケース」と「パスカルケース」で書くことができます。どちらでも書くことはできますが、著者はケバブケースで命名することを推奨していました。 Web ComponentsのCustom Elementsのドラフトの仕様が、ケバブケースで定義しており、 Vue.jsのコンポーネントは、Custom Elementsの仕様を元に作られているからです。

ケバブケース
　<kebab-component>けばぶ</kebab-component>
パスカルケース
　<PascalComponent>ぱすかる</PascalComponent>

参照: p.84, 93

v-modelの修飾子<.lazy>の挙動

v-onの.preventや.stopと同じように、v-modelにも修飾子があります。
そして、Vue.jsのガイドでは、.lazyの挙動は以下のように記載されています。

デフォルトでは、 v-model は各 input イベント (上記の IME 確定前を除いて) 後に、データと入力を同期します。 change イベント後に同期するように変更するために lazy 修飾子を追加することができます

.lazyの挙動を見てみると、リアルタイムにデータを更新するわけではなく、以下のようにデータを更新しています。

入力エリアからフォーカスを外したタイミング
入力してEnterキーを押下したタイミング

f:id:yagi_suke:20181021233853g:plain

参照: p.68

v-onの修飾子<.native>を使った親コンポーネントのイベントを発火

これまで子コンポーネントから親コンポーネントのイベントを発火するには、

propsを使用したイベントの発火
emitを使用したイベントの発火

の2通りだと思っていたんですが、.nativeを使ってもできるんですね。考えてみると、 <nuxt-link to="/" @click.native="onClick">リンク</nuxt-link> のように、ページ遷移前にイベント挟みたい時によく使う！！って後になって気づきました。

propsを使用したイベントの発火

// 親コンポーネント
<template>
  <BButton :on-click="onParentEvent" />
</template>
<script>
import BButton from '@/components/b-button'
export default {
  components: { BButton },
  methods: {
    onParentEvent() {
      console.log('親のイベント')
    }
  }
}
</script>

// 子コンポーネント
<template>
  <button type="button" @click="onClick">
    <slot>Bボタン</slot>
  </button>
</template>
<script>
export default {
  props: {
    onClick: {
      type: Function,
      default: () => {}
    }
  }
}
</script>

emitを使用したイベントの発火

// 親コンポーネント
<template>
  <BButton @on-click="onParentEvent" />
</template>
<script>
import BButton from '@/components/b-button'
export default {
  components: { BButton },
  methods: {
    onParentEvent() {
      console.log('親のイベント')
    }
  }
}
</script>

// 子コンポーネント
<template>
  <button type="button" @click="$emit('on-click')">
    <slot>Bボタン</slot>
  </button>
</template>
<script>
</script>

.nativeを使用したイベントの発火

// 親コンポーネント
<template>
  <BButton @click.native="onParentEvent" />
</template>
<script>
import BButton from '@/components/b-button'
export default {
  components: { BButton },
  methods: {
    onParentEvent() {
      console.log('親のイベント')
    }
  }
}
</script>

// 子コンポーネント
<template>
  <button type="button">
    <slot>Bボタン</slot>
  </button>
</template>

<script>
</script>

みんなどの方式で統一しているんだろう。

参照: p.101

リダイレクト・エイリアス

routingの設定のお話しです。リダイレクトはよく404ページの表示で使うと思うんですが、エイリアスの方は初めて知りました。

エイリアス

エイリアスは、URL上はアクセスした時のものを保持し、別のルートで定義したものとして遷移の処理を実行させたい時に使用します。以下だと、 /b にアクセスすると、URL上は /b のままですが、コンポーネントAがレンダリングされ、 /a にアクセスしたように振る舞います。

var router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' },
    { path: '/c', component: C, alias: ['/d', '/e'] }
  ]
})

リダイレクト

リダイレクトも載せておきます。きっと見れば理解できると思います。

var router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' },
    { path: '/b', component: B },
    { path: '/notfound', component: Notfound },
    { path: '*', redirect: '/notfound' }
  ]
})

参照: p.146

堅牢な開発スタイルを学ぶことができる

後半の8章からはTDDで簡単なアプリを作っていきます。単体テストは Chai, Mocha, Sinon, Karma を使用し、component、store、routingをそれぞれ作っていきます。また、NightWatchを使用したE2Eテストも行うので、現場以上に堅牢な開発スタイルを学ぶことができます。
写経したソース: GitHub

最後に

たらたらとダラダラと書きなぐって見ましたが、見づらいですね。
読み始めは、Vue.jsの日本語ガイド読めば読む必要のない本かなと思ったんですが、テストの書き方とかVue.jsによるWebアプリ開発のフローをまるごと学ぶことができる良書だと感じました。 Vue.jsに興味がある方は一回手にとることをオススメします。

もくもく会に参加

家では集中できないので、普段はカフェで作業しています。カフェだと、wi-fiがなかったり、コンセントがなかったり、狭苦しかったりでストレスフルになることもしばしば。なので最近は、connpassで募集されているもくもく会に参加しています。

最近参加したのだと、ここらへん。 crowdworks.connpass.com weeyble-creative.connpass.com weeyble-creative.connpass.com

同じエンジニアが休日に勉強しているのは、刺激もらえて良いですね。ただ、段々もくもく会を探すのもめんどくさく感じてきており、良さげなコワーキングスペースがあれば会員になっちゃおうかと検討しています。

Firebase Meetupに参加

業務で作っているアプリは、Firebaseをフル活用しているのでそろそろ自分もしっかりインプットせねばと思い、参加してきました。 firebase-community.connpass.com

来月14日には、今月末にプラハで開かれるFirebase Summitの報告会も行われるそうです。きっと新機能載せてくるだろうなー、楽しみです。 firebase-community.connpass.com