スライド読むのがしんどい人のための「これから始めるVue.js / Nuxt.js」

こちらは2019/2/2にQiita:Teamに投稿したものをリライトした記事です。

背景

• 2019/1/31に「これから始めるVue.js / Nuxt.js」という技術セミナーに参加してきました。
  • スライド https://speakerdeck.com/asial_corp/20190131-2
• スライドが60枚程度あり、読むのしんどいなーって人がいると思ったので補足リンクを足しつつまとめようかなと。

Vue.jsについて

• オープンソースのJavaScriptフレームワーク
  • MVVMを採用
    • Model: JavaScriptで定義されたデータやメソッドなど
    • View: 実際に描画する DOM
    • ViewModel: Model、Viewで変更されたデータを反映
• 人気の理由
  • 日本語対応したドキュメントが充実
  • HTML、JavaScript、CSSが分離しているため書きやすい
  • コンポーネント化できる
• 他のフレームワークとの比較
  • Angular
    • 多機能だが、TypeScriptなど学習コストが高い
  • React
    • ライブラリが豊富。JSXの学習コストが高い
  • Vue.js
    • ライブラリが豊富。JavaScriptで書けるため、学習コストが低い
• .vueファイルを利用する
  • HTML、JavaScript、CSSを1ファイルに記載
• Vue.jsの拡張
  • Vuex: 状態管理用のライブラリ
  • Vue Router: SPAを作成するナビゲーションライブラリ
  • VeeValidate: バリデーションライブラリ
  • Vue-Lazyload: 遅延読み込みライブラリ
  • Vue-meta: メタ情報管理ライブラリ

Nuxt.jsについて

• Vue.jsベースのフレームワーク
  • 必要なライブラリが組み込まれている
    • Vue.js
    • Vuex
    • Vue Router
    • Vue Server Render
    • Vue-meta
    • Webpack
    • Vue-loader
• 統一の記述ルールがある
• 3つのモードを選択できる
  • SPA（シングルページアプリケーション）
  • SSR（サーバーサイドレンダリング）
  • Static Generate（静的ファイルの生成）
• PWAの導入が簡単

コンポーネントについて

• Atomic Design
  • コンポーネント単位でUIを定義していくデザイン手法
    • Atoms（原子）
      • 最小要素
        • 配色、フォントの定義、ボタン、ラベルなど
    • Molecules（分子）
      • Atomsを組み合わせて作る要素
        • 検索フォーム、メニューなど
    • Organisms（有機体）
      • Atoms、Moleculesを組み合わせて作る要素
        • ヘッダー、フッターなど
    • Templates（テンプレート）
      • Atoms、Molecules、Organismsを組み合わせて作る要素
        • ページの枠組み
    • Pages（ページ）
      • Atoms、Molecules、Organisms、Pagesを組み合わせて作る要素
• Storybook
  • コンポーネント管理ライブラリ

あとはAWSの話になるので割愛。。。