Vue.js初級編 株式会社TAM 知念昌史 2019/7/19

知念 昌史 @TAM inc. ● フロントエンドエンジニア（CSS、Vue.jsが好き） ● 沖縄出身、大学卒業後に上京。美容師からWeb業界に転職。Web未経験 からスタートしてフロントエンド8年目 6月から沖縄移住（フルリモートワーク） ● 得意分野：HTML / CSS設計 / JavaScript / Vue.js / PWA / Movable Type / WordPress ● 新人エンジニアのメンター ● 企業向けにGit導入レクチャー

まぁし@chocodogmagic（Twitter） ● 技術コミュニティ【PWA Night】自称アンバサダー ● 技術書典6でPWA初心者向け本「実践PWA」を共著で頒布 ● ポケモンが好き｜主に公式ゲーム（ソード欲しい） ● 映画も好き｜6/28公開スパイダーマン見てきました！

Vue.js 知っている人ー？？

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

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

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

実際にコードを見てみよう HTMLにVue.jsを読み込む シンプルに使いたい場合は、 CDNやローカルにダウンロードしたVue.js本体を読み込めばOK CDNで、 もしくはローカルにダウンロードして、 GitHub サンプル

Vueインスタンスを作成して設定していく 1. new Vue()でVue.jsの設定をしていく “ Vue.jsのコアとなる機能は、データを DOM に描画することを可能にするシステ ムです。（公式ドキュメント参照）” 2. Vueを適用するエリア（DOM）とデータ（data）の情報を記述する 3. Vue.jsのディレクティブで、if文やfor文も使える（v-if, v-for） DEMO

Vue.jsに向いているもの Webアプリケーション系 ● リアルタイム絞り込み ● 管理画面 ● 社内システム などなど コーポレートサイトやブランドサイトなど静的な画面であれば Vue.jsじゃなくてもjQueryで十分

Vue.jsを本格的に使う ● シングルファイルコンポーネント（SFC） ● ルーティング・・・Vue-router ● 状態管理・・・Vuex ● サーバーサイドレンダリング（SSR） Vue.jsを使ったフレームワーク Nuxt.js・・・SSR、SPA、PWAなどの対応も簡単にしてくれる

まずは簡単なものから導入！ どんどん試していきましょう！

ありがとうございました！！！ Twitter　良かったらフォローしてね！ まぁし@chocodogmagic PWAに興味ある人も 声かけてください！！