Vue.js のお勉強(備忘録)

2020年7月19日

Vue.jsとは

javascriptのフレームワークでSPA(SinglePageApplication)が作れる。
HTML・CSS・JavaScriptのみで構成され、サーバーとの通信を減らせるため動作が比較的軽い。

Vue.jsについて自分なりのまとめ

component(コンポーネント)を使い(ヘッダー,フッター,メインコンテンツなど)機能分けして管理する
・UIのデザインで困ったらVuetifyを検討する
・中〜大規模の場合Vuexで状態管理する
・公式リファレンスが充実しているので困ったら必ず確認する
・見られない書き方はディレクティブの省略記法である可能性があるので確認
・APIを叩く場合、form送信(json形式となる)する場合、ファイルアップロードなどには axios を使う
v-modelで入力フォームの入力値の保持やセレクトボックスの選択肢などを定義できる
Routerを親と子の入れ子にすると画面遷移でのデータを保持できる
・Vue.jsではレンダリング処理をクライアント側で行うためSEO対策するならNuxt.jsを使う

Vue-Cliで環境構築

Vue-CliはVueプロジェクトの初期セットアップで導入する環境を簡単に作成できるツール

VueCLIをインストール

プロジェクトの作成

プロジェクトの作成方法を選択

必要なプリセットの選択

Babel -   最新のJS構文を環境に応じたバージョンに変換する
Router  -   画面遷移など
Vuex  -   状態管理パターン
CSS-Preprocessors -   Scss

Vue.jsのフォルダ構成

node_modules -    リクエストを実行(デフォルトはGET)
public -     imgフォルダなど
src   -     ソースコード
.gitignore  -     gitに含めないディレクトリ
babel.config -     babelの設定
package.json -     関連パッケージスクリプトの定義
package-lock.json -     インストールパッケージのバージョン定義

ディレクティブ(公式リンク

以下については、dataに代入する事で反映できる。

#v-text

#v-html

#v-show
初期描画コストが高い。頻繁に何かを切り替える必要がある場合に使用する。
v-showディレクティブはcssのdisplay要素を切り替える。

#v-if
#v-else

#v-else-if 

#v-for
selectボックスの選択肢などに使った。属性keyとvalueを使い配列の要素を取得する。

#v-on 
2.4.0 からは、v-on は引数なしでイベント/リスナーのペアのオブジェクトへのバインディングもサポートしている。
修飾子の種類については公式サイトで確認。
以下省略記法

以下submit で使用した場合
.prevent でsubmit のデフォルト挙動を防いで実行する
.preventはevent.preventDefault()を呼び出す

例:

#v-bind

例:

例: HTML クラスのバインディング
パターン1 
※既にクラス名staticを指定している

↓  描画結果

パターン2
※インラインではない場合

↓  描画結果

#v-model

form の input 要素 や textarea 要素、 select 要素に双方向 (two-way) データバインディングを作成する

修飾子:
#.lazy
引用: デフォルトでは、 v-model は各 input イベント (上記の IME 確定前を除いて) 後に、データと入力を同期します。
 change イベント の後に 同期するように変更するために lazy 修飾子を追加することができます

#.number
入力値を自動的にnumber型に変換します

#.trim
ユーザーの入力値から自動的に空白をを取り除きます

#v-slot
※※※※※ 後ほど記載 ※※※※※

#v-pre
コンパイルがスキップされる。ソースコードなどを記載してもスキップされる。

↓ 描画結果

#v-cloak
v-cloak で囲った箇所はコンパイルが完了するまで不可視となる
css: 

html: 

特別な属性(公式リンク

#key 
v-forと合わせて使うことが多い説明は#v-forで確認

#ref
$refs を使う事で、htmlにてref属性をつけた要素を参照することができる。
リストレンダリングについても要素番号を指定して参照できる。

#is
componentを切り替えることができる

組み込みコンポーネント(公式リンク

#component
動的コンポーネント

#transition
CSSアニメーションを扱う際に使用

#transition-group
保留

#keep-alive
保留

Vuex

componentを分かりやすく管理する。
中〜大規模のアプリケーションに最適。

Nuxt.js

主に5点の利点がある。
・SSR  『Server Side Rendering(サーバサイドレンダリング)』という機能を利用してレンダリング処理をサーバー側で行うため、サイトの表示速度があがる。
 ただその分、サーバーにNode.jsの環境整備及びCPUに負荷がかかるためキャッシュの管理に気をつける必要がある
・ディレクトリ構成が予めされているため、ファイルの保存先に迷わずに済む
・Code Splitting によって各ページに必要なjavascriptのみ渡される
・ルーティングを自動で設定してくれる
・SEO対策にも有効で、vue-metaによるSEO対策ができる

Vuetify

Vue UI ライブラリ
画面のデザインに必要なサンプルが豊富に用意されている。

webpack

webpackとはモジュールバンドラーである。
複数のモジュールの依存関係を解決して一つにまとめるものである。
ブラウザ/サーバー間での通信プロトコルであるHTTP/1.1では一度に処理できるリクエストの数に限りがあるので、
リクエストの数をなるべく一つに減らすことで表示速度のパフォーマンスを向上させることができる。

メモリリーク

ライブラリを使った場合、メモリリークが起こる可能性がある。
その場合、意図的にメモリの開放をすることで解決する
beforeDestroy:Vueインスタンス破棄される前に呼び出される
destroyed:Vueインスタンスが破棄された後に呼び出される

axios を利用した API の使用

axiosで取得したデータはreponseで取得できる 呼び出しがうまくいかない場合はcatchでエラーハンドリング

VS Code によるデバッグ(Nuxt.js)

Nuxt.jsでサーバーレンダリングを行ったソースコードはブラウザに表示される際に最適化される為、
最適化される前のソースコードと紐付ける為にsourcemapを利用する

・Vusial Studio Code (VS Code)のextensionとしてDebugger for Chromeを追加する
・SourceMapを作成する

※SSR(サーバーレンダリング)ではない場合は、Vue.js devtoolsでもデバッグできる。 

Vue Test Utils

Vue Test UtilsはJest、Karma、Mochaなどのテストランナーと組み合わせて使う。
単体テストが行える。