fromScriptToScript

シナリオライターからプログラマーになった人のブログ。要するにずっとスクリプト。

Vue.jsすごすぎて遠隔通信の水晶玉見つけた信長公みたいになった

ドリフターズ、面白いですよね。

知らない人向けにざっくりいうと、ファンタジーの世界に飛ばされた信長が、現地の魔術(=テクノロジー)を空気読まない使い方で使いまくって無双するお話です
※あらすじには諸説あります。 中でも、「石の壁を出現させる」という魔法を悪用して(どう使ったかは漫画読んでください)敵城を陥落させた直後のシーンが大好きなんですよね。
祝勝ムードで他全員が「石壁すげえ」ってなってる中、 何気なく魔術師が水晶玉で遠くの人間と話をしてたことに愕然とするんですよ。信長が。



いや石壁もすごいが、これ(水晶玉)の方がすごいだろ
どう考えても
伝令いらねぇ いや、何より伝達が即で時間差がねぇ
気づいてないのか術士どもは これがとんでもねぇ代物だと
恐らく思考の方向の差だ 奴ら思いもつかんのだ
日々の研究や報告をすぐできる便利な玉としか思っておらんのだ
隔絶した軍に相合の連携を可ならしめん とは思いよらないのだ

(作:平野耕太 『ドリフターズ」3巻より30幕より引用)





技術って使う人や使い方によって与える影響がガラリと変わりますよね。
先日Vue.jsのハンズオン参加してちょっと触って見たんですが、経験の浅く、あまりスキルが高く無い人で溢れる現場を経験してきた僕にとって、このライブラリは特に衝撃的でした。
そういうわけで以下、驚きベースでVue.jsを紹介していこうと思います。

その1:手軽に双方向データバインディング+VirtualDomで動作高速

最近のjsのトレンドは抑えつつ、無茶苦茶手軽に実装ができます。
1週間前に受けたvue.jsのハンズオン講義を思い出しながら情報を調べ(スライドもらいそびれた……)3時間ほどで実際に動くフォームを作ることができました。

isbnを入力するとtitleやauthorフォームの入力が不可になる書籍検索フォーム(isbnチェック付き)

<div id="jqObj">
</div>

<div id="app">
  <form>
    <label>isbn
      <input type="text" name="isbn" v-model="isbn" v-on:input="isbnInput">
      <span v-bind:class="{ caution : isCaution }">残り{{ countIsbnLength() }}文字</span>
    </label>
    <label>title
      <input type="title" name="title" v-model="title" v-bind:disabled="isbnMode">
    </label>
    <label>
      author
      <input type="author" name="author" v-model="author" v-bind:disabled="isbnMode">
    </label>
    <label>publisher_name
      <input type="publisher_name" name="publisherName" v-model="publisherName" v-bind:disabled="isbnMode">
    </label>
    <input type="submit" value="search" v-bind:disabled="submitDisable">
  </form>
</div>
label {
  display: block;
}

.caution {
  color: red;
}
$('#jqObj').html('Friednly jQuery')

var app = new Vue({
  el: '#app',
  data: {
    isbn: '',
    title: '',
    author: '',
    publisherName: '',
    isbnMode: false,
    isCaution:false,
    submitDisable:false
  },

  methods: {
    countIsbnLength: function() {
      return 13 - this.isbn.length
    },
    isbnInput: function() {
      this.isbnMode = !!this.isbn
      this.title = ''
      this.author = ''
      this.publisher_name = ''
      this.isCaution = (this.isbn.length > 13)
      this.submitDisable = !((this.isbn === '') || (this.isbn.length === 13))
    }
  }
});


実際に動くjsFiddleはこちら
完全一致検索ロジックを走らせたいisbn検索を行おうとすると、部分一致検索をしたい他のフォームをロックし入力不可能にし、さらに値を強制的に空白文字にするフォームです。
あと、isbnは13文字しか対応しないので中途半端な桁数だと検索ができなくなります。

ちなみに、うち1時間はhtmlのdisabled属性をstyleと勘違いしてハマっていた ので、jsについては調べながら正味2時間もあればできたんじゃ無いかと思います。この辺り経験の浅さが露呈しますねw なおこのUI、間違えてisbnフォームに値を入力すると、それまでの入力値全てが吹き飛ぶBadUIなのでそのまま使うのはお控えください。フォームの値をメメントに持って置いて、isbnが13桁になる前にフォーカスを外すと文字列が復活するとかにするとよさそうですが力尽きました。ぱたり。あとはisbn消去ボタン欲しい。

その2:jQueryと何も考えずに同居可能

その1のコードにいますよね。jQuery。そうなんです。
Vue.jsはjQueryと同居できる ようにできています。

var app = new Vue({
  el: '#app'
  ......

Vueはelで指定したオブジェクト以外を操作の対象にしないため、それ以外の部分は普通にjQueryが使えます。
ajaxやらアニメーションやらのjQueryの資産はそのままに、「とりあえずVueの方が楽そうなところだけVueでやる」という立ち回りが可能です。 というかそういう運用してる会社さんが実際にあるらしいです。(勉強会で聞きました。連絡先伺ってないので社名とかは控えさせていただきます)


その3:公式ドキュメントが日本語

ReactにせよAngular.jsにせよ、公式ドキュメント、英語ですよね。
なんとVue.jsは公式ドキュメントがもう日本語化されています。

Vue.js

しかも無茶苦茶読みやすい。 リファレンスとしては十分すぎるし、チュートリアルとしての完成度も非常に高いです。
英語残念芸人の自分としてはありがたい限りです。




その4:ES5で書ける

個人的にこれが一番驚きました。上記のコード見ていただければわかる通り、Vue.jsはES5(そのままブラウザで動く昔ながらのjavascript)で書くことができます。 つまり、es2015とか勉強するのがたるい人や、jsはjQueryしか触ったことのない人でもルールさえ覚えれば使うことができます。 thisのバインドいじっている関係でVueオブジェクトの一部ではアローファンクションが使えないという仕様だったり、公式リファレンスの変数宣言がconstじゃなくてvarになっているあたり、戦略的にES6のシンタックスを排除し、学習コストを爆下げしてるんじゃないかなぁと思ってます。


※ちなみにVue.jsはもちろんes2015でも書けます。

まとめ

信長公、曰く。 いやVirtualDomもすごいが、ES5で書けるのがすごいだろ
どう考えても
Nodeいらねぇ 何より公式ドキュメントが日本語で情報に時間差がねぇ
気づいてないのかWEB系エンジニアは これがとんでもねぇ代物だと
恐らく思考の方向の差だ 奴ら思いもつかんのだ
手軽に双方向データバインディングが実現できる便利なライブラリとしか思っておらんのだ
レガシーアプリのフロントに、ジュニアPGによるモダンJSの実装を可ならしめん とは思いよらないのだ




書いてて思いましたが、レガシーアプリの改修してる信長って嫌っすね…… 実際僕の方がVue.jsをちょっといけてるjQuery魔術師サイド説はある。

って、こんなブログ描いてたらReact.jsの案件参画決まりました。まじか! ES5で書けるのが素晴らしい? え? なんのこと?
スクランナーで自動ビルドしながらES2015で書ける方が生産性高いに決まってるヨネー