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

v-okinawa meetup #2の紹介資料です。
初回#1と同じ内容です。

Transcript

1. Vue.jsの基礎 株式会社TAM 知念昌史 2019/10/25
2. 知念 昌史 / まぁし@chocodogmagic（Twitter） • 株式会社TAMのフロントエンドエンジニア（CSS、Vue.jsが好き） • 東京オフィスに所属しつつ、2019年6月から沖縄でリモートワーク • 沖縄出身、大学卒業後に上京して美容師として就職、その後未経験から Web業界に転職。 • 得意分野：HTML / CSS設計 / JavaScript / Vue.js / PWA / Movable Type / WordPress • 技術コミュニティ運営（沖縄 v-okinawa / 東京 PWA Night）
3. Vue.jsとは ユーザーインターフェイスを構築するためのプログレッシブフレームワークで す。（公式ドキュメント参照） https://jp.vuejs.org/
4. Vue.jsとよく比較されるもの React Angular Vue.js （Facebook） （Google） （Evan You）
5. Vue.jsの特徴 1. 親しみやすい HTML・CSS・JavaScriptを知っていたらすぐに使える。 jQueryを使っていた人なら導入のハードルは高くない。 2. 融通が効く サイト内で1ページだけの導入もOK。ページ内の1部分だけの導入も可能。 SPAフレームワークとしても使える。 3. 高性能 20kb（min+gzip）・・・ちなみにjQueryは88kb DOMの切り替えが早い。
6. 実際にコードを見てみよう 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 サンプル
7. Vue.jsに向いているもの • リアルタイム絞り込み検索 • 管理画面 • 社内システム などなど画面内で要素が切り替わるようなWebサイト、Webアプリ コーポレートサイトやブランドサイトなど静的な画面であれば Vue.jsじゃなくてもjQueryで十分な場合もある！
8. さらにVue.jsを本格的に使う • シングルファイルコンポーネント（SFC）・・・1つのファイルにHTML・CSS・JSを記述 してコンポーネントとして管理する（〇〇.vue） • ルーティング・・・Vue-router • 状態管理・・・Vuex • サーバーサイドレンダリング（SSR） Vue.jsを使ったフレームワーク Nuxt.js・・・SSR、SPA、PWAなどの対応を簡単にしてくれる
9. まずは簡単なものから導入！ どんどん試していくのがおすすめ！
10. ありがとうございました！！！ Twitter　良かったらフォローしてね！ まぁし@chocodogmagic PWAに興味ある人も 声かけてください！！ 技術書典の共著本も持っ てきたよ！