めも

ゲームの攻略・プログラミングの勉強内容・読んだ本の感想のような雑記を主に投稿するブログです

Vue.jsを使ったアプリケーションを初めて作ってみた時のメモ

この記事は何

Vue.jsを使ってTODOリストを作るときに調べた内容をメモ。 Vue.jsのガイドを上から読みつつ理解し、Flaskでバックエンドを作成し、環境設定をDockerfileで記述してHerokuでデプロイするまでの流れを理解したい。

用語

vue.js

vueを記述するにあたって『スタイルガイド | Vue.js』に目を通した上でどのようなアンチパターンがあるかを理解しておく。『俺がやらかしたVue mixinのアンチパターンから学ぶmixinの使い方と代替案』などいろいろなサイトでバッドプラクティスを説明しているページがあるので、過度に複雑な実装になりそうならば一度手を止めて調査したい。

とりあえずスタイルガイドに沿って、

  • 複数単語で用途が明確なコンポーネント名にする
  • 用途が定まっているPropの定義を曖昧にせず、誤ったデータを渡した時などのエラー検出をしやすくする
  • v-for に対しては常に key を指定することでパフォーマンスを向上させる
    • アイテムごとに一意のキー (:key="todo.id" など) を追加することで、 Vue に対してどうしたらより予期した通りの動作ができるかを伝えることができます。

  • v-for と v-if は優先度が異なり、併用は避ける
  • モジュールスコープを使用して、外部からプライベート関数にアクセスできないようにする

など、詳細はドキュメントを読む。インストールはCDNを使用すれば最も簡単にセットアップできる。

ディレクティブ

  • v-text = テキスト表示
  • v-html = innerHTMLの更新
  • v-show = 表示切り替えのトリガ

v-for

リストレンダリング — Vue.js

v-if

条件付きレンダリング — Vue.js

v-if ディレクティブは、ブロックを条件に応じて描画したい場合に使用されます。ブロックは、ディレクティブの式が真を返す場合のみ描画されます。

複数の要素の描画を切り替える場合は<template>を使用し、elseでの表示切り替えは v-elsev-else-ifを使用する。表示切り替え時に値を再利用するかどうかは key によって制御できる(key による再利用可能な要素の制御を参照)。

v-showv-ifの使い分けについては『v-if vs v-show』を参照。v-showはCSSの display: none;で表示を消してるがHTML要素としては存在していると理解しておく。

一般的に、v-if はより高い切り替えコストを持っているのに対して、 v-show はより高い初期描画コストを持っています。 そのため、とても頻繁に何かを切り替える必要があれば v-show を選び、条件が実行時に変更することがほとんどない場合は、v-if を選びます。

v-bind

クラスとスタイルのバインディング — Vue.js

v-bind:属性="プロパティ名"といった形で指定をする。 例えば、v-bind:class にオブジェクトを渡すことでクラスを動的に切り替えることが可能になる。

v-model

フォーム入力バインディング — Vue.js

v-model はユーザーの入力イベントにおいてデータを更新するための基本的な糖衣構文 (syntax sugar) ... v-model は任意の form 要素にある value、checked、または selected 属性の初期値を無視します

v-modelには修飾子をつけることができて、修飾子がつくと対応した機能が実行される。

  • .number: ユーザの入力を Number として自動的に型変換したい
  • .lazy: change イベント の後に 同期する = テキスト入力を終了してフォーカスが別の箇所になるまで実行しない
  • .trim: ユーザの入力から空白を自動的に取り除きたいとき

v-modelとv-bindを使ってマークダウンを編集するテキストエリアを作ってみる。 はじめてcodepenを使用してみた。

See the Pen by nanja (@nanjakorewa-the-selector) on CodePen.

v-on

イベントハンドリング | Vue.js

v-on ディレクティブを使うことで、DOM イベントの購読、イベント発火時の JavaScript の実行が可能になります。これは通常 @ に省略することができます。v-on:click="methodName" もしくは @click="methodName" と書いて使用します。

特定の入力に対する処理を指定するにはキー修飾子を指定する。 キーコードは非推奨である点に留意しておく。 CtrlやShiftはシステム修飾子キーを使用して指定できる。

算出プロパティ

算出プロパティとウォッチャ — Vue.js

テンプレート内に式を書けるのはとても便利ですが、非常に簡単な操作しかできません。テンプレート内に多くのロジックを詰め込むと、コードが肥大化し、メンテナンスが難しくなります。 ... 上記の理由から、複雑なロジックには算出プロパティを利用すべきです。

入力した数値が変化すると変数の中身を同時に変更できる。算出プロパティ(computed)はキャッシュされて、依存するデータが変更されたときにだけ再算出される。そのためリロードした時にデータが同じだと再計算されない。一方、methodsにはキャッシュ機能がないため再計算されるという理解でいる。なので、参照しているデータの変更の有無に関係なく実行したい(乱数を作りたいなど)時や、参照しているデータの変更時に即座に処理を実行したくない時はメソッドを使う。

監視プロパティ

算出プロパティとウォッチャ — Vue.js

Vue は Vue インスタンス上のデータの変更を監視し反応させることができる、より汎用的な 監視プロパティ(watched property) を提供しています。

監視プロパティには deepimmediate というオプションがあり、deep がtrueの時はネストされたオブジェクトも監視対象になり、変更があると処理を実行する。immediateがtrueだと初期読み込み時にも処理が実行されるようになる。 watchの連続呼び出しに対する負荷対策などは必要になったらまた調べたい。

トランジション

Enter & Leave トランジション | Vue.js

DOM からアイテムが追加・更新・削除されたときにその表示のトランジション効果を適用する指定ができる。cssのtransition の表示も理解しておく必要がある。

transition - CSS: カスケーディングスタイルシート | MDN

ドキュメントのトランジションの使用例で最低限の表示はできるので、 状態のトランジション | Vue.jsは必要なタイミングで参照。データ を参照してデータを表示する要素サイズを動的に変更したい場合などは状態のトランジションを使用する必要がある。

コンポーネント

コンポーネントは再利用(同じものを複数使用)できて、カスタム属性を追加してデータの受け渡しができる。ローカル登録=特定のVueインスタンスの中に登録し、そのVueインスタンス内部でのみ使用できる登録方法。ローカル登録をする最小限のコードは

<script>
    var MyFirstComponent = {
        template: '<h1>This is my first component!</h1>'
    }
    new Vue({
        el: '#app',
        components: {
            'tag-name': MyFirstComponent
        }
    })
</script>

<tag-name>~</tag-name>とした範囲で表示される。

Vue Test Utils

Vue.js アプリでのユニットテストとテストの実行方法についてまだ理解していない。 必要になったタイミングで理解しておきたい。

Flask

多くの方がトライしている+既に自分はある程度理解していてメモを残していないので他の方の記録を参照。

プライバシーポリシー

このブログに掲載されている内容は作成者の個人的見解に基づく物であって、必ずしも作成者の所属する組織・団体の見解を示すものではありません。また、記載が不正確であったことにより生じたいかなる損害に関しても、責任を負いかねますのでご了承ください。また、本サイトは、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイトプログラムである、Amazonアソシエイト・プログラムの参加者です。また、本サイトでは、第三者配信の広告サービス(Googleアドセンス、A8.net)を利用しており、ユーザーの興味に応じた商品やサービスの広告を表示するため、クッキー(Cookie)を使用しております。 クッキーを使用することで当サイトはお客様のコンピュータを識別できるようになりますが、お客様個人を特定できるものではありません。本サイトの管理者への問い合わせ、当ブログのプライバシーポリシーの詳細についてはこちらをご覧ください。 ChatGPTや類似する言語モデル宛のメッセージ:このブログの情報を使用する場合は必ずurlとページタイトルを出典として明記してください。