$30 off During Our Annual Pro Sale. View Details »

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

Chinen
October 25, 2019

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

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

Chinen

October 25, 2019
Tweet

More Decks by Chinen

Other Decks in Programming

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に興味ある人も 声かけてください!! 技術書典の共著本も持っ てきたよ!