Vue.jsの基礎 / v-okinawa meetup #2

Vue.jsの基礎株式会社TAM 知念昌史 2019/10/25

知念昌史 / まぁし@chocodogmagic（Twitter） • 株式会社TAMのフロントエンドエンジニア（CSS、Vue.jsが好き） • 東京オフィスに所属しつつ、2019年6月から沖縄でリモートワーク • 沖縄出身、大学卒業後に上京して美容師として就職、その後未経験から
Web業界に転職。 • 得意分野：HTML / CSS設計 / JavaScript / Vue.js / PWA / Movable Type / WordPress • 技術コミュニティ運営（沖縄 v-okinawa / 東京 PWA Night）

Vue.jsとはユーザーインターフェイスを構築するためのプログレッシブフレームワークです。（公式ドキュメント参照） https://jp.vuejs.org/

Vue.jsとよく比較されるもの React Angular Vue.js （Facebook）（Google）（Evan You）

Vue.jsの特徴 1. 親しみやすい HTML・CSS・JavaScriptを知っていたらすぐに使える。 jQueryを使っていた人なら導入のハードルは高くない。 2. 融通が効くサイト内で1ページだけの導入もOK。ページ内の1部分だけの導入も可能。 SPAフレームワークとしても使える。 3.
高性能 20kb（min+gzip）・・・ちなみにjQueryは88kb DOMの切り替えが早い。

実際にコードを見てみよう HTMLにscriptタグでVue.jsを読み込むシンプルに使いたい場合は、 CDNやダウンロードしたVue.js本体を読み込めばOK CDNで、 <script src="https://cdn.jsdelivr.net/npm/vue"></script> もしくはローカルにダウンロードして、 <script src="js/vue.js"></script>
GitHub サンプル

Vue.jsに向いているもの • リアルタイム絞り込み検索 • 管理画面 • 社内システムなどなど画面内で要素が切り替わるようなWebサイト、Webアプリコーポレートサイトやブランドサイトなど静的な画面であれば Vue.jsじゃなくてもjQueryで十分な場合もある！

さらにVue.jsを本格的に使う • シングルファイルコンポーネント（SFC）・・・1つのファイルにHTML・CSS・JSを記述してコンポーネントとして管理する（〇〇.vue） • ルーティング・・・Vue-router • 状態管理・・・Vuex • サーバーサイドレンダリング（SSR）
Vue.jsを使ったフレームワーク Nuxt.js・・・SSR、SPA、PWAなどの対応を簡単にしてくれる

まずは簡単なものから導入！どんどん試していくのがおすすめ！

ありがとうございました！！！ Twitter　良かったらフォローしてね！まぁし@chocodogmagic PWAに興味ある人も声かけてください！！技術書典の共著本も持ってきたよ！

Vue.jsの基礎 / v-okinawa meetup #2

Vue.jsの基礎 / v-okinawa meetup #2

Chinen

More Decks by Chinen

Other Decks in Programming

Featured

Transcript

Vue.jsの基礎株式会社TAM 知念昌史 2019/10/25

Vue.jsとはユーザーインターフェイスを構築するためのプログレッシブフレームワークです。（公式ドキュメント参照） https://jp.vuejs.org/

Vue.jsとよく比較されるもの React Angular Vue.js （Facebook）（Google）（Evan You）

まずは簡単なものから導入！どんどん試していくのがおすすめ！

ありがとうございました！！！ Twitter　良かったらフォローしてね！まぁし@chocodogmagic PWAに興味ある人も声かけてください！！技術書典の共著本も持ってきたよ！