Vue.js初級編 / v-okinawa meetup #1

v-okinawa Vue.js/Nuxt.js meetup #1 初心者歓迎のセッション資料です。

Transcript

1. Vue.js初級編 株式会社TAM 知念昌史 2019/7/19
2. 知念 昌史 @TAM inc. • フロントエンドエンジニア（CSS、Vue.jsが好き） • 沖縄出身、大学卒業後に上京。美容師からWeb業界に転職。Web未経験 からスタートしてフロントエンド8年目 6月から沖縄移住（フルリモートワーク） • 得意分野：HTML / CSS設計 / JavaScript / Vue.js / PWA / Movable Type / WordPress • 新人エンジニアのメンター • 企業向けにGit導入レクチャー
3. まぁし@chocodogmagic（Twitter） • 技術コミュニティ【PWA Night】自称アンバサダー • 技術書典6でPWA初心者向け本「実践PWA」を共著で頒布 • ポケモンが好き｜主に公式ゲーム（ソード欲しい） • 映画も好き｜6/28公開スパイダーマン見てきました！
4. Vue.js 知っている人ー？？
5. Vue.jsとは ユーザーインターフェイスを構築するためのプログレッシブフレームワークです。（公式ド キュメント参照） https://jp.vuejs.org/
6. Vue.jsとよく比較されるもの React Angular Vue.js （Facebook） （Google） （Evan You）
7. 特徴 1. 親しみやすい HTML・CSS・JavaScriptを知っていたらすぐに使える。 jQueryを使っていた人なら導入のハードルは高くない。 2. 融通が効く ページ内の1部分だけの導入も可能。1ページだけの導入もOK。 SPAフレームワークとしても使える。 3. 高性能 20kb（min+gzip） DOMの切り替えが早い。
8. 実際にコードを見てみよう HTMLにVue.jsを読み込む シンプルに使いたい場合は、 CDNやローカルにダウンロードしたVue.js本体を読み込めばOK CDNで、 <script src="https://cdn.jsdelivr.net/npm/vue"></script> もしくはローカルにダウンロードして、 <script src="js/vue.js"></script> GitHub サンプル
9. Vueインスタンスを作成して設定していく 1. new Vue()でVue.jsの設定をしていく “ Vue.jsのコアとなる機能は、データを DOM に描画することを可能にするシステ ムです。（公式ドキュメント参照）” 2. Vueを適用するエリア（DOM）とデータ（data）の情報を記述する 3. Vue.jsのディレクティブで、if文やfor文も使える（v-if, v-for） DEMO
10. Vue.jsに向いているもの Webアプリケーション系 • リアルタイム絞り込み • 管理画面 • 社内システム などなど コーポレートサイトやブランドサイトなど静的な画面であれば Vue.jsじゃなくてもjQueryで十分
11. Vue.jsを本格的に使う • シングルファイルコンポーネント（SFC） • ルーティング・・・Vue-router • 状態管理・・・Vuex • サーバーサイドレンダリング（SSR） Vue.jsを使ったフレームワーク Nuxt.js・・・SSR、SPA、PWAなどの対応も簡単にしてくれる
12. まずは簡単なものから導入！ どんどん試していきましょう！
13. ありがとうございました！！！ Twitter　良かったらフォローしてね！ まぁし@chocodogmagic PWAに興味ある人も 声かけてください！！