Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

06753262e041911692e9a771b1877036?s=47 Chinen
July 19, 2019

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

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

06753262e041911692e9a771b1877036?s=128

Chinen

July 19, 2019
Tweet

More Decks by Chinen

Other Decks in Technology

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に興味ある人も 声かけてください!!