小さく始めるVue.js

BIT VALLEY -INSIDE- Vol.2( https://www.facebook.com/bitvalleyinside/ )でのLTで使用したスライドです

1. 小さく始めるVue.js 2018/10/24 ever sense Inc. Ryuhei Shikanai
2. 自己紹介
3. 自己紹介 ・本名: 鹿内 隆平(Shikanai Ryuhei) ・Twitter: 373.3(@373_3) ・github: @ryuhei4k9 ・所属: ever sense Inc.（https://eversense.co.jp/） RailsとかSwiftを書いたりしています。 メンダコが好きです。ドラムを叩きます。
4. 前置き
5. 前置き ・具体的な実装の話はほとんどしません ・「Vue.js楽しそうだな」という雰囲気を伝えたい
6. Vue.jsとは？ 私です
7. Vue.jsとは？ ・最近イケてるっぽい ・モダンな感じ ・名前をよく見る ・Reactとよく比較されてる ・etc…
8. Vue.jsとは？
9. Vue.jsとは？ ・公式のドキュメントを読むとよく分かる！日本語ドキュメントが充実！ https://jp.vuejs.org/v2/guide/
10. 小さく始めてみよう
11. 小さく始めてみよう ・最小はJSFiddle（https://jsfiddle.net/boilerplate/vue） HTML / CSS / JS をオンライン上のエディタで書いてプレビューできる。 ボイラープレートも用意されていて、簡単なTodoリストがどう実装されている か、すぐに確認できる。（上記リンク） JSFiddleって凄い発明だと思う。
12. 小さく始めてみよう ・次はCDN 既存のアプリケーションで試してみたくなったら、CDNで一行足す CDNって凄い発明だと思う。
13. 小さく始めてみよう ・道具としてのコストが低い 最近の技術は「試すだけ」の環境構築に結構コストがかかる。 （※個人の感想です） 本当に簡単に「試すだけ」をできるのは嬉しい。
14. 使ってみた
15. 使ってみた ・Railsのviewに使ってみた - 弊社の、私が実装したアプリケーションの管理画面。 - 学習を兼ねて試したものであり、本番環境では動いていない。 - 目標は「jQueryを完全に代替する」
16. 使ってみた ・まずはCDN さっきも書いたけど、もう一行これを足すだけで使い始められる
17. 使ってみた ・イケてる！と思ったので、gemで導入
18. 使ってみた ・jquery-railsと同じように一行require宣言すればOK
19. 使ってみた　雑感 （※具体的な実装の話は省きます）
20. 使ってみた　雑感 ・いいぞ - 導入が死ぬほど楽だった - メソッドが散らからず、コンポーネント内の役割として記述ができる - jQueryで使うためだけの`<div data-hoge=”fuga”>`とかjQueryで引っ掛けるためだけのid指 定`<div id=”js-hoge”>`が取っ払われた（個人的にこれが一番嬉しい） - DOM操作そのもののロジックがほとんど消えた - jQueryのものと全く同じ挙動が実現できた
21. 使ってみた　雑感 ・うーん - 単一ファイルコンポーネント(.vueファイルでまとめるやつ)はRails MVCのレールの上に乗っか ることはできない - `<%= image_tag %>`などのview helperに`v-if`などのディレクティブ記述を行えない - erbの恩恵に与ろうとすると、erb内の<script>〜</script>にvueコンポーネントの記述をするこ とになるため、1ファイルの行数が増える - `<%= render partial: “hoge”>`を使えばコンポーネントごとの管理風にできるが、そもそも partialは遅いので多用したくない
22. 使ってみた　感想 Railsに導入するには噛み合わない部分も多いが、jQueryを置き 換えることはできたし、DOM操作そのものをあまり意識せず実装 できたので、非常によかった。 また、コンポーネントごとに役割（変数・メソッド）を持たせる形にな るので、コードの見通しが良く、保守しやすいなと感じた。
23. そんな感じで
24. そんな感じで 最近のフロントエンド技術だから環境作るの大変そう...... と尻込みせず、かる〜く始めてみよう！ きっと楽しい！ （弊社でも実導入できるプロジェクトないかな、やりたいな）
25. 終わりです よろしくね