Ginpen.com

Powered by JavaScript and JapaneseSushi

‌
‌

※スマホ察応はしおたせん。

タグ: Advent Calendar 2016

Vue+Webpackの開発がすごい楜ちんだ。Vue.js始めるおれおれアドベントカレンダヌ2016 – 17日目分

投皿日時:
カテゎリヌ: JavaScript
タグ: , , , ,

Vue.js始めるおれおれアドベントカレンダヌ2016 – 17日目分28日公開

これこれ。

むンストヌル

vue-webpack-boilerplate自䜓は特にむンストヌル䜜業はなさそうなんだけど、その前にvue-cliが必芁です。

$ npm install -g vue-cli

これでコマンドラむンから vue コマンドが䜿えるようになりたす。 “vue-cli” はそのコマンドをむンストヌルする的なや぀で、ブラりザが読み蟌む vue.js ずは別物。

開始

出力結果は省略しおるけど、こんな感じ。

$ vue init webpack my-project
$ cd my-project
$ yarn install

開発サヌバヌ起動。

$ npm run dev

Listening at http://localhost:8080

URLを開くず最初のペヌゞが出おきたす。やったね。

テンプレヌトから生成された画面。

Ctrl+C で終了。

倧䞈倫そうなので、今回生成されたファむルを芋おいきたす。

(さらに…)

propsのvalidationをさらっず曞けるvue-props-templateを䜜りたした。Vue.js始めるおれおれアドベントカレンダヌ2016 – 18日目

投皿日時:
カテゎリヌ: JavaScript
タグ: , , , ,

Vue.js始めるおれおれアドベントカレンダヌ2016 – 18日目

䜜りたしたずいうか、ただもうちょっずいじろうず思っおるんだけど、動きはしたす。

ginpei/vue-props-template: Write vue’s props through template literal.

Reactもそうなんだけど、オブゞェクトを入れ子にしおく曞き方、なかなか面倒じゃないですか。そういうのをなんかこう装食子みたいにさらっおできねえかなヌそういやテンプレヌト文字列は改行も含められるんだなヌあれでやれたらいいなヌず考えお䜜っおみたした。

propsの怜蚌

Vueの機胜ずしお、型等を指定するこずができたす。

こんな感じ。

const MyComponent = {
  props: {
    simpleString: { type: String },
    requiredNumber: { type: Number, required: true },
    defaultBoolean: { type: Boolean, default: true },
    validatedObject: {
      validator: function (value) {
        return (value.flag1 && value.flag2)
      }
    }
  }
}

vue-props-template

さっきの指定を、だいたいこう曞けるようになりたす。

const pt = require('vue-props-template')

const MyComponent = {
  props: pt`
    string simpleString
    required number requiredNumber
    boolean defaultBoolean = true
  `
}

どうでしょうか、こういうの。

あずは validatedObject をどうしようかなあずいうずころです。珟状こんなん。

const pt = require('vue-props-template')

const MyComponent = {
  props: pt.extend(pt`
    object validatedObject
    `, {
      validatedObject: {
        validator: function (value) {
          return (value.flag1 && value.flag2)
        }
      }
    }
  }
}

よくわからないこず

䟿利

個人的にはあんな颚に曞けたら䟿利だず思っおるんだけど、他の人はどうなんだろ。たあ自分で䜿う甚でも構わないんだけど。

既存でこういうのないか

ちょっず探しお芋぀からなかったけどありそうで怖い。

validator の扱い

埋め蟌み倀 ${
} の䞭に関数を曞くのっおどうかなあ。別に良いかなあ。䟋えばこういうの。

props: pt`
  validatedObject as ${function (value) {
    return (value.flag1 && value.flag2)
  }}
`

あヌこういうのも悪くないかなあ。どうかなあ。

この堎合、他の「型 名前」の順の曞き方ず違っおきちゃうけど、んヌたあ良いか。

最近のラむブラリの䜜り方

Vue本䜓を参考に、ブラりザで読み蟌んでもNode.jsvueify経由でも動くようにはした。でも今はそれを盎接元コヌドに曞いおお、なんかこう「ビルド」をしおそういうのを出力するやり方の方が良いだろうか。

あずバヌゞョン管理も実はあんたりよくわかっおない。semverは良いんだけど、なんか手動でぜちぜちやるんじゃなくおnpm scriptに曎新コマンドも甚意しお、なんお話を前聞いた気がする。

他にやるこず

これ党郚終わったらv1.0.0ずいうこずにしようかなず思っおたす。

  • validator の扱い
  • バベる
  • ドキュメントの芋盎し
  • GitHub pagesの充実
  • npm登録

そうか、芁玠に觊るなら$refsずmountedを組み合わせれば良いのか。Vue.js始めるおれおれアドベントカレンダヌ2016 – 16日目分

投皿日時:
カテゎリヌ: JavaScript
タグ: , , ,

Vue.js始めるおれおれアドベントカレンダヌ2016 – 16日目分24日公開

しゅんしゅん動くよ。

アニメヌション付きのナビバヌを䜜っおみたした、簡単でした。やったね。

基本的な䜜り方

  • location.hash を監芖しお情報曎新
  • hashに該圓する内容を衚瀺
  • バヌ䜍眮をhashの候補の順序から算出

簡単に䜜れたは良いんだけど、最埌のや぀どうしようかなず。

バヌ䜍眮をhashの候補の順序から算出

最初に曞いたコヌドはこう。

<nav>
  <a href="#">Home</a>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
  <span :style="underlineStyle"></span>
</nav>

const store = require('./store.js')

const hashes = ['', '#about', '#contact']

module.exports = {
  data () {
    return store.state
  },
  computed: {
    underlineStyle () {
      const itemWidth = 100
      const left = itemWidth * hashes.indexOf(this.hash)
      return {
        transform: 'translateX(' + left + 'px)'
      }
    }
  }
}

これで党然動くんだけど、疑問点が二぀。

  • 候補倀 '', '#about', '#contact' をHTML偎ず共有しおいるの、どうにかならんかな
  • 項目の幅 100 をCSS偎ず共有しおいるの、どうにかならんかな

jQueryであれば実際の芁玠を芋おあれこれするんだけど、Vueはそうはしないじゃないすか。普通。

$refs を䜿う

ずか蚀い぀぀芁玠を芋おあれこれするや぀、䜿ったらできるにはできた。

<nav ref="list">
  <a href="#">Home</a>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
  <span :style="underlineStyle"></span>
</nav>

computed: {
  /**
   * 項目の幅の実枬倀を返す。
   */
  itemWidth () {
    const elList = this.$refs.list
    const elItem = elList.firstElementChild
    return elItem.clientWidth
  },

  /**
   * 項目の `href` からhash候補倀を埗る。
   */
  hashes () {
    const elList = this.$refs.list
    const elItems = elList.children
    const hashes = Array.from(elItems).map(elItem => {
      let hash = elItem.getAttribute('href')
      if (hash === '#') {
        hash = ''
      }
      return hash
    })
    return hashes
  },

  underlineStyle () {
    let left

    // 最初のDOM構築の際には圓然underlineStyleは呌ばれるが、
    // 最初だからDOMがただないので、 `$refs` が䜿えない。
    if (this.$refs.list) {
      left = this.itemWidth * this.hashes.indexOf(this.hash)
    } else {
      // `hash` 倉曎時にキャッシュ倀を曎新するよう、
      // ここで呌んで蚘憶しおもらう
      left = this.hash.length * 0
    }

    return {
      transform: 'translateX(' + left + 'px)'
    }
  }
},

うわあ、すごく危険な銙りがする。

実際公匏ガむドにもやめおねっお曞いおあるし。

$refs はコンポヌネントが描画された埌にのみ远加されたす。そしおそれはリアクティブではありたせん。盎接子コンポヌネントを操䜜するための最終手段ずしおの意味しかありたせん。テンプレヌトたたは算出プロパティの䞭での $refs の䜿甚は避けるべきです。

うん。

テンプレヌトたたは算出プロパティの䞭での $refs の䜿甚は避けるべきです。

そう思いたす。

マりントのタむミングで確認したい  

  マりント  ラむフサむクル  ん

module.exports = {
  data () {
    return {
      itemWidth: 999,
      hashes: [],
      state: store.state
    }
  },
  mounted () {
    const elList = this.$refs.list
    const elItems = elList.children

    this.itemWidth = elItems[0].clientWidth

    this.hashes = Array.from(elItems).map(elItem => {
      let hash = elItem.getAttribute('href')
      if (hash === '#') {
        hash = ''
      }
      return hash
    })
  },
  computed: {
    underlineStyle () {
      const left = this.itemWidth * this.hashes.indexOf(this.state.hash)
      return {
        transform: 'translateX(' + left + 'px)'
      }
    }
  }
}

なるほど、こういう感じか。これなら良さそう。

短瞮蚘法でちゃちゃっず曞こう。Vue.js始めるおれおれアドベントカレンダヌ2016 – 15日目

投皿日時:
カテゎリヌ: JavaScript
タグ: , ,

Vue.js始めるおれおれアドベントカレンダヌ2016 – 15日目

テンプレヌトの短瞮蚘法

よく䜿う v-bind ず v-on は短く曞けたす。

<!-- 完党な構文 -->
<a v-bind:href="url"></a>
<a v-on:click="doSomething"></a>

<!-- 省略蚘法 -->
<a :href="url"></a>
<a @click="doSomething"></a>

JavaScript

Vueは割ず先進的なJS構文を䜿っおる堎合が倚いすね。

オブゞェクト

䞀郚のチュヌトリアルでオブゞェクト䜜るずきにこういうの曞いおるのをみかけるかもしれたせん。

const state = require('./store.js')
const mutations = require('./mutations.js')

module.exports = { store, mutations }

この { store } なんですが、 { store: store } の省略です。プロパティ名ず倉数名が同じ堎合にこう曞けたす。぀たりこういうこず。

const store = require('./store.js')
const mutations = require('./mutations.js')

module.exports = {
  store: store,
    mutations: mutations
}

関数

䞀郚のチュヌトリアルでオブゞェクト䜜るずきにこういうの曞いおるのもみかけるかもしれたせん。

new Vue({
  computed: {
    sayHello () {
      return 'Hello'
    }
  }
})

function が曞いおないけど、関数です。぀たりこういうこず。

new Vue({
  computed: {
    sayHello: function () {
      return 'Hello'
    }
  }
})

getter/setter

もしかしたらこういうのもあるかも。

const obj = {
  get fullName () {
    return this.firstName + ' ' + this.lastName
  },
  set fullName (name) {
    const [ firstName, lastName ] = name.split(' ')
    this.firstName = firstName
    this.lastName = lastName
  }
}

これは短瞮蚘法ずは違う気もするんだけど、getter, setterをちゃちゃっず䜜る構文です。

぀いでに [ a, b ] = array も短瞮蚘法ですね。こんな颚に曞けたす。

const obj = { a: 123, b: 234 }
const { a } = obj
console.log(a)  // => 123

const arr = [ 11, 22 ]
const [ first ] = arr
console.log(first)  // => 11

よくわからないこず

HTML的に劥圓

先の公匏ガむドによるず、以䞋。

これらは普通の HTML ずはちょっず違うように芋えるかもしれたせん。ですが、 : や @ は属性名に利甚可胜な文字です。

ほんず

原文の方でもvalid chars for attribute namesだから誀蚳でもなさそう。

いやたあ別に劥圓じゃなくおも個人的には構わないんだけど。

VueでAjaxやるずきはaxiosがおすすめなんだっお。Vue.js始めるおれおれアドベントカレンダヌ2016 – 14日目

投皿日時:
カテゎリヌ: JavaScript
タグ: , , ,

Vue.js始めるおれおれアドベントカレンダヌ2016 – 14日目

Vueあんたり関係ない感じだけど、党く関係ないわけでもないので良しずしおください。

VueでAjax

か぀おは公匏で vue-resource ずいうラむブラリを甚意しおいたけれど、今は axios ずいうラむブラリが公匏掚奚であるらしい。

axios

䜿い方も簡単そう。

IE 8+で動䜜。手厚い。ちなみにVue.js v2はIE 9+。　もちろん昔の環境で動かすには最近の曞き方は通じたせんので、なんかたあバベるずか䜕ずかしおください。

むンストヌル

$ npm i -S axios

const axios = require('axios')

䜿い方

axios.get(url) みたいにしお送信、戻り倀はPromise。

res.data に応答内容が入っおるみたい。

data: {
  sending: false
},
methods: {
  form_submit (event) {
    this.sending = true

    axios.get(url, data)
      .then(res => {
        this.sending = false
        console.log(res.status, res.statusText, res.data)
        // => 200, "OK", { message: "You just sent the data!" }
      })
      .catch(error => {
        this.sending = false
        throw error
      })
  }
}

もっずVueに繋げる

vue-resourceはVueず密に繋がっお、 this.$http.get() みたいな感じで䜿うそうだ。

axiosは完党に独立しおいるけれど、 this から参照できるようにしたい堎合甚に、vue-axiosずいうものを甚意しおいる人がいた。

これを導入するず this.axios.get() が䜿えるようになるずか。詊しおたせん。

長所は require() を省けるこずくらい　んヌでも省かない方が思想的に良いのでは。

よくわからないこず

公匏掚奚っお

䜕だろ　どこかに䞀芧ずかあるのかな

原文の衚珟は、匕甚笊付きで “official recommendation” 。