- 投稿日:2021-02-28T22:08:23+09:00
fetchを使ってパラメータつきリクエストをキャンセルする
概要
ページ遷移をした際にレスポンスが返ってきていないものをキャンセルする方法をメモします。
今回はfetchを利用してキャンセルしたいと思います。実装
store
store/comment.jsconst state ={ controller: new AbortController() } const getters = { controller: state => state.controller ? state.controller: '', } const mutations = { setController(state, controller){ state.controller = controller } } const actions = { async getComment({commit, state}, {id}){ const { signal } = state.controller const params = { id: id } const query_params = new URLSearchParams(params) await fetch(`/api/comment?${query_params}`, { signal }) .then(result=> result.json()) .then(result=>{ //処理を記述 }).catch(error=>{ //処理を記述 }) }, //キャンセル処理 cancel({state}){ state.controller.abort() console.log('キャンセル完了') }, } export default { namespaced: true, state, getters, mutations, actions }Vue
comment.vue<script> export default{ beforeRouteLeave(to, from, next){ //ページを去った時にcancel()をする this.$store.dispatch('comment/cancel') //キャンセル処理後にstate.controllerにnew AbortController()を設置 this.$store.commit('comment/setController', new AbortController()) next() } } </script>
- 投稿日:2021-02-28T20:02:54+09:00
【チートシート】Vueの単一ファイルコンポーネントの命名規則まとめ
概要
Vue.jsの学習をしていると、キャメル、ケバブ、パスカル...と書き方のルールが記述場所によってまちまちで混乱してしまうことが多いですよね。自分用の備忘録 兼 同じ初学者の方の参考になればと思い執筆しました!
プロジェクト、人によりこの限りではないと思いますが、チートシートとして自分なりにまとめてみましたので、迷った時の参考にしていただければと思います。チートシート
(項目それぞれ◎が推奨の書き方です)
結論
まとめてみてわかったことですが
・Vueファイル名、は「パスカルケース」
・Javascript内では「キャメルケース」
・HTML内では「ケバブケース」という風に分けるのが一番シンプルでわかりやすいかなと思います!
間違っている点などありましたらご指摘頂けますと幸いです。
- 投稿日:2021-02-28T19:55:22+09:00
DjangoのtemplateのVuejsの変数を表示する
問題点
現場ではDjangoのフレームワークのtemplateにVuejsを導入しました。
DjangoのtemplatesにCDN方法でVuejsを導入すれば、Vuejsから渡したデータは表示されないことになります。
原因
Djangoでは、変数を表示するために{{ 変数名 }}という書き方を使われます。
それと、"Mustache"構文を利用したVuejsの表示方法は同じなので、
Vuejsの方は表示されないです。解決方法
Vuejsのdelimitersオプションを使用すれば、
Vuejsの表示方法を変更でき、データは表示されることになります。index.html... <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script> ... ... <body> <!--Vuejs--> <div id="app"> <p>[[ message ]]</p> </div> <script> const app = new Vue({ delimiters: ['[[',']]'], el: '#app', data: { message: 'hello Vuejs' } }); </script> </body>上記のVuejs表示方法を改修すれば、DjangoとVuejsお互いに影響がなく、変数を表示できます。
- 投稿日:2021-02-28T15:33:01+09:00
【Vue.js】v-modelでcheckboxの値の変更が反映されない
- 投稿日:2021-02-28T15:31:02+09:00
【Vue.js】v-bindでhref属性に文字列とコンポーネントのプロパティを指定する
- 投稿日:2021-02-28T12:18:19+09:00
Vue.js(Vuex)についてstoreについてまとめる
見て頂きありがとうございます。
今日はVue.jsの状態管理ライブラリであるVuexについてまとめたいと思います。
知識の定着のために書くもので、めちゃくちゃ基本的なことなので、参考にしないほうが良いと思います(笑)
そもそも状態管理とは
サービスがそれなりに大きくなってくる、コンポーネントが複数、当然親子関係にあるコンポーネントも作成されます。
その分コンポーネント間のデータの受け渡しも発生します。
Vuexを使用しない方法だとprops
で親から子へデータを受け渡し、$emit
で子から親にデータを送ることができます。
このようにデータの受け渡しが増えてことで、データがどこで変更されたのか等追いづらくなり、コードの可読性が悪くなってしまいます。このデータの状態流れを管理することを状態管理といい、上記のような問題を解決するために使用するのが、Vuexです。
Vuexの中心となるStoreについて
ストアはアプリケーションの状態(state)を管理するためのコンテナである。
データを保持しておく場所のことですね。
ストアの状態は直接変更することはできません。
後述するmutationをcommitすることによってのみ変更することができます。
Storeには4つの概念があります。
- state→アプリケーションの状態(情報)
- mutation→stateを更新(変化)させる
- action→非同期通信や外部APIとのやりとりを行う
- getter→stateの一部やstateから返された値を保持する
この4つをひとまとまりにしたものをモジュールといい、モジュールでこの4つを守っているイメージです。
state
stateはアプリケーション全体のデータの状態を管理します。
現在のデータの状態を確認したり、特定のデータの状態を見つけるために役立ちます。
呼び出し:store.state.state名
mutations
mutationsはstateの更新だけを行います。
stateの更新が行えるのはこのmutationだけです。
呼び出し:store.commit('mutation名', payload)
(引数)
mutation => 第一引数:state
(渡されたstateを更新)
commmit => 第二引数:payload
(第二引数のことをpayloadと呼び、これを使用することで同じmutationsで異なるstateを変更することができる)
※原則として、mutation以外でstateの更新を行うことは禁止されている。
stateの状態を追跡しやすくするため。
また、全ての処理は同期的である必要があり、非同期処理を行いたい場合はactionsで定義する。action
actionは非同期処理や外部APIとの通信を行い、最終的にmutationを呼び出す為に使われます。
呼び出し:store.dispatch(action名)
(引数)
ctx(context)
contextとは特別なオブジェクトで、次の内容が含まれています。
- state: 現在のstate
- getters: 定義されているgetter
- dispatch: 他actionを実行するメソッド
- commit:他のmutationを実行するメソッド
getter
getterはstateから別の値を算出する為に使われます。
gettersは算出プロパティcomputedと同様の働きをします
呼び出し:store.getters.getters名
Vuexの中心となるStoreの4つの概念についてまとめてみました。
- 投稿日:2021-02-28T10:33:18+09:00
【Vuetify】これだけ見れば済む色の設定方法まとめ
概要
Vuetifyでの色の指定方法は様々あります。コンポーネントのテーマ色・背景色・文字色などによって、指定方法が異なることがあります。細かい所を忘れがちなので、この記事を見れば全て思い出せるようにまとめます。
プロジェクト全体で一貫性を持って、適切に色の指定を運用すると、メンテナンス性・可読性がかなり上がるのでおすすめです。
TL;DR
忘れやすい文字による指定方法だけまとめると以下
<!-- コンポーネントテーマカラー --> <v-btn color="primary darken-1">...</v-btn> <!-- テーマカラーとVuetifyカラーリストのみいける --> <!-- 背景色 --> <v-btn class="mycolor darken-1">...</v-btn> <!-- テーマカラーとVuetifyカラーリストのみいける --> <!-- 文字色 --> <v-btn class="red--text text--darken-1">...</v-btn> <!-- テーマカラーとVuetifyカラーリストのみいける --> <!-- styleに直接書く --> <v-btn style="color: var(--v-mycolor-base);">...</v-btn> <!-- テーマカラーのみ、濃淡標準は-baseが必要 -->事前知識
Vuetifyの色について
Vuetifyでは元から色に名前がついています。
red
だと赤で、red lighten-1
だと1段階明るい赤、という具合にです。
これらをうまく利用するのがオススメです。色リストはこちら:
https://vuetifyjs.com/en/styles/colors/#sass-color-packテーマカラーについて
独自に色に名前をつけて、プロジェクト全体で使用することができます。
例えばbackground: #6200EE
と設定しておけば、プロジェクト内のCSSなどでbackground
と記述することで#6200EE
の色を設定できます。このような色をテーマと呼び、すべてのテーマカラーについてlightモードとdarkモードそれぞれ別々に色を設定できます(同じ色でも大丈夫です)。プロジェクトを作成したらデフォルトで
primary
,secondary
,accent
,error
,warning
,info
,success
の7つのテーマカラーが用意されています。各色は、次のようにして自由に書き換えられますし、新たに追加もできます。
特に上書きしなかったデフォルトのテーマカラーは、デフォルトの値が採用されます。指定方法は次の2パターンのみ
* Vuetify色リストから呼び出し(colors.色.濃淡度
)
* Hex形式vuetify.jsimport Vue from "vue"; import Vuetify, { colors } from 'vuetify/lib'; Vue.use(Vuetify); export default new Vuetify({ theme: { themes: { light: { primary: "#ff0000", secondary: colors.green, accent: colors.red.darken3, error: colors.red, warning: colors.yellow, info: colors.grey, success: "#795548", mycolor: "#e0e0e0", }, dark: { primary: "#ff0000" secondary: colors.green, }, }, }, });テンプレート内での色の指定方法
テンプレート内で実際に色を指定したいときの指定方法を、各場合において紹介します。
コーディング中に困ったら上から順に試していくと求める部分の色指定ができたりします。1. UIコンポーネント
VuetifyのUIコンポーネントを利用している場合、
color=
でコンポーネントのカラーを設定できることがあります。<!-- OK --> <v-btn color="red">...</v-btn> <!-- 赤色--> <v-btn color="red lighten-1">...</v-btn> <!-- 一段階明るい赤 --> <v-btn color="mycolor darken-1">...</v-btn> <!-- 独自テーマもいける --> <!-- NG --> <v-btn color="#66002E">...</v-btn> <!-- Hex等は使えない --> <v-btn color="lightgrey">...</v-btn> <!-- CSSのカラーネームは使えない -->この指定方法はコンポーネントがcolor=""に対応してる場合のみ使えて、しかも設計されてる部分の色しか変わらない(例えばv-btnでは背景色が変わるのみ)。
このやり方で思うように色を指定できなかったら2番以降を試しましょう。2. 背景色 -- classで指定
背景色を変えたい場合、次のようにclass指定でいける場合が多いです。
<!-- OK --> <v-btn class="red">...</v-btn> <!-- 赤色--> <v-btn class="red lighten-1">...</v-btn> <!-- 一段階明るい赤 --> <v-btn class="mycolor darken-1">...</v-btn> <!-- 独自テーマもいける --> <!-- NG --> <v-btn class="#66002E">...</v-btn> <!-- Hex等は使えない --> <v-btn class="lightgrey">...</v-btn> <!-- CSSのカラーネームは使えない -->3. 文字色 -- classで指定
文字色を変えたい場合、次のようにclass指定でいける場合が多いです
<!-- OK --> <v-btn class="red--text">...</v-btn> <!-- 赤色--> <v-btn class="red--text text--lighten-1">...</v-btn> <!-- 一段階明るい赤 --> <v-btn class="mycolor--text text--darken-1">...</v-btn> <!-- 独自テーマもいける --> <!-- NG --> <v-btn class="#66002E--text">...</v-btn> <!-- Hex等は使えない --> <v-btn class="text--lightgrey">...</v-btn> <!-- CSSのカラーネームは使えない -->急にちょっとややこしくなる。なんで色指定は
--text
なのに濃淡度指定はtext--
なんや4. 最後の手段 -- styleに書く
2と3のやり方で色指定できなかったら、styleに書くしかないですが、この場合もテーマカラーが使えます。
<!-- OK --> <v-btn style="color: var(--v-primary-base);">...</v-btn> <!-- primary --> <v-btn style="color: var(--v-mycolor-lighten1);">...</v-btn> <!-- 独自テーマもいける --> <v-btn style="color: #6200EE;">...</v-btn> <!-- 通常のCSSの指定方法は当然いける --> <!-- NG --> <v-btn style="color: var(--v-primary);">...</v-btn> <!-- baseがないとだめなので注意 --> <v-btn style="color: var(--v-red-base)">...</v-btn> <!-- Vuetifyのカラーネームが無理になる -->Vuetifyのカラーネームが無理になり、濃淡設定しない場合
-base
をつけないといけません。ただしこれを使えるようにするには次のようにcustomePropertiesをtrueにする必要があります。
vuetify.js//...略 export default new Vuetify({ theme: { themes: { light: { primary: '#FF7F51', // ... } }, options: { customProperties: true } } });styleで指定する場合も可能な限り文字(テーマカラー)を使ったほうがいいです。可読性が上がりますし、色を変えたいときのメンテナンス性が上がります。
まとめ
結論、Vuetifyの色指定周りは便利ですがちょっとややこしいですよね。
一貫性が生じるように、開発チームで色の指定方法はルールを決めておいたほうがいいかなと思います。
個人的おすすめ運用方法は下記です。
* プロジェクト内で頻繁に使う色はテーマカラーを設定して、可能な限り名前使って指定する
* 頻繁に使わない色は、class="red lighten-1"
のようにVuetifyで用意されてるカラーネームを使って可読性上げる
* どうしてもこだわりたいけどテーマカラー設定するほどじゃない色は、Hex形式等も許容他皆さんのおすすめ運用方法や、抜けてる指定方法あったらコメント欄からぜひ教えてくださいm(_ _)m
最後に
最後まで読んで頂きありがとうございました!
Twitterもやってます。プログラミングやテクノロジー関連広く話題にするのでよかったらフォローお願いします!@isasenth