小さく始めるVue.js

小さく始めるVue.js 2018/10/24 ever sense Inc. Ryuhei Shikanai

自己紹介

自己紹介・本名: 鹿内隆平(Shikanai Ryuhei) ・Twitter: 373.3(@373_3) ・github: @ryuhei4k9 ・所属:
ever sense Inc.（https://eversense.co.jp/） RailsとかSwiftを書いたりしています。メンダコが好きです。ドラムを叩きます。

前置き

前置き・具体的な実装の話はほとんどしません・「Vue.js楽しそうだな」という雰囲気を伝えたい

Vue.jsとは？私です

Vue.jsとは？・最近イケてるっぽい・モダンな感じ・名前をよく見る・Reactとよく比較されてる・etc…

Vue.jsとは？

Vue.jsとは？・公式のドキュメントを読むとよく分かる！日本語ドキュメントが充実！ https://jp.vuejs.org/v2/guide/

小さく始めてみよう

小さく始めてみよう・最小はJSFiddle（https://jsfiddle.net/boilerplate/vue） HTML / CSS / JS をオンライン上のエディタで書いてプレビューできる。ボイラープレートも用意されていて、簡単なTodoリストがどう実装されているか、すぐに確認できる。（上記リンク）
JSFiddleって凄い発明だと思う。

小さく始めてみよう・次はCDN 既存のアプリケーションで試してみたくなったら、CDNで一行足す CDNって凄い発明だと思う。

小さく始めてみよう・道具としてのコストが低い最近の技術は「試すだけ」の環境構築に結構コストがかかる。（※個人の感想です）本当に簡単に「試すだけ」をできるのは嬉しい。

使ってみた

使ってみた・Railsのviewに使ってみた - 弊社の、私が実装したアプリケーションの管理画面。 - 学習を兼ねて試したものであり、本番環境では動いていない。 - 目標は「jQueryを完全に代替する」

使ってみた・まずはCDN さっきも書いたけど、もう一行これを足すだけで使い始められる

使ってみた・イケてる！と思ったので、gemで導入

使ってみた・jquery-railsと同じように一行require宣言すればOK

使ってみた　雑感（※具体的な実装の話は省きます）

使ってみた　雑感・いいぞ - 導入が死ぬほど楽だった - メソッドが散らからず、コンポーネント内の役割として記述ができる - jQueryで使うためだけの`<div data-hoge=”fuga”>`とかjQueryで引っ掛けるためだけのid指定`<div
id=”js-hoge”>`が取っ払われた（個人的にこれが一番嬉しい） - DOM操作そのもののロジックがほとんど消えた - jQueryのものと全く同じ挙動が実現できた

使ってみた　雑感・うーん - 単一ファイルコンポーネント(.vueファイルでまとめるやつ)はRails MVCのレールの上に乗っかることはできない - `<%= image_tag %>`などのview
helperに`v-if`などのディレクティブ記述を行えない - erbの恩恵に与ろうとすると、erb内の<script>〜</script>にvueコンポーネントの記述をすることになるため、1ファイルの行数が増える - `<%= render partial: “hoge”>`を使えばコンポーネントごとの管理風にできるが、そもそも partialは遅いので多用したくない

使ってみた　感想 Railsに導入するには噛み合わない部分も多いが、jQueryを置き換えることはできたし、DOM操作そのものをあまり意識せず実装できたので、非常によかった。また、コンポーネントごとに役割（変数・メソッド）を持たせる形になるので、コードの見通しが良く、保守しやすいなと感じた。

そんな感じで

そんな感じで最近のフロントエンド技術だから環境作るの大変そう...... と尻込みせず、かる〜く始めてみよう！きっと楽しい！（弊社でも実導入できるプロジェクトないかな、やりたいな）

終わりですよろしくね

小さく始めるVue.js

小さく始めるVue.js

Ryuhei Shikanai

More Decks by Ryuhei Shikanai

Other Decks in Programming

Featured

Transcript