Web サイト制作における Vue.js

市ヶ谷Geek★Night #18 フロントエンド、マジ卍

@ktsn

受託で Web サイトからアプリまで幅広く作ってます

@ktsn

Vue

コアチーム

React

アプリ開発経験

Angular

Todo アプリ作った

Elm

Hello World した

ClojureScript

名前は知ってる

Vue を選んだ理由

複雑なアニメーションを
うまく扱えそうだったから

破綻せず DOM を触れるものがほしかった

実際に使ってみて

👍

アニメーション

https://vuejs.org/v2/guide/transitions.html

https://github.com/ktsn/vue-size-provider

https://codepen.io/ktsn/pen/dzNRjx

マークアップエンジニア
との協業

HTML に書けることは重要

• カスタムタグ的なのを作って普段どおりやってもらう
• jQuery 書けない人でもなんとかなる
• Pug などのプリプロセッサも使える

闇の要件に対する防衛術

「いただいたHTMLをこちらで更新します」

「XX 社のシステムに組み込む HTML を

用意してください」

HTML であればだいたいなんとかなる

👎

気を抜くと秩序が崩壊しがち

• どこを Vue でマウントしたかわからなくなる
• ゆるふわに書いてるといろいろ混ざってつらいことも

静的型

• v2.5 で改善されたけどまだつらいときがある
• Vuex + TypeScript で苦しんでる人しか見かけない
• コードを TypeScript に書き換えるなど前向きではある

XSS には気をつけろ！

https://speakerdeck.com/lmt_swallow/xss-in-the-era-of-star-dot-js-js-raiburarishi-dai-false-xss-zerokarashi-merusekiyuriteiru-men-mian-qiang-hui-number-15

その他

気軽に JSX で書いて良さそう

.babelrc

次に使いたいもの

Angular

Ivy 考えた人天才だと思う

Elm

ML 系言語やりたい

まとめ

• アニメーションが書きやすい
• HTML で書けることは大きなメリット
• 長く走らせたいなら秩序を保つ努力を
• 静的型はまだつらい
• XSS には気をつけろ！
• Vue でも気軽に JSX を使おう