tedateコンテンツへスキップ夜の帳がおりています。良い時間をすごせますように。対象とした記事になります。インストールを試してみた記事もありますので、ぜひそちらもご覧ください。Betaをインストールしてみた件Vue.jsを使って制作をしているなら、ぜひおすすめのUIフレームワーク、Vuetify。今回は、スワイプされた方向を、Vuetifyの機能を使って検知する方法についての記事です。付与した要素に対してのスワイプ操作を検知することができます。具体的には、次の様に使います。</v-card></div>↑3〜8行目に注目してください。4方向のスワイプ操作が行われた時に実行される関数を指定することができます。ちなみにサンプルとしてv-cardに付与していますが、普通のdiv要素に付与してももちろん動きます。実行される関数は、たとえば次の様に指定しておけば良いです。...(省略)...↑スワイプ操作が行われた時に実行される関数を定義。実行されると、引数として指定した文言が帰って来るので、それをそのままdirectionというdata(名前はなんでも良いです)に格納。)で展開して表示している、というわけです。dataは、単純に次の様に用意しておけば良いです。等が続く)...上記の例では、単純に返ってきた値を表示しているだけですが、それぞれのスワイプの結果として実行される関数内に他の処理を割り当てておけば、任意の方向にスワイプされた時に自由な処理を実行させることが可能です。上記の例では上下左右すべて同じ関数を実行させていますが、それぞれ別の関数を割り当てることももちろんできます。使い道がありそうですね。スワイプ操作を検知するためのものですので、スマートフォンやタブレット等の「スワイプ操作を受け付けるデバイス」で正常に動作します。擬似的にスワイプが検知されていることを確認することができます。Vuetify公式ページは次になります。=>を使った書き方も紹介されています。一読すると、理解が深まるかと思います。ついて、記事を書きました。特定の方向にスワイプした時にヒントメッセージを表示してユーザー操作の補助となる情報を出したり、いろいろな使い方が想定できそうです。記事の中段でも書きましたが、ただメッセージを表示するだけではなく、スワイプの方向に応じて他の処理を指定する事ももちろん可能ですので、アイデア次第で自由度高く使えそうですね。当サイトでは、今後もVue.js、Vuetifyに関する記事を掲載していく予定です。※この記事は、内容の品質向上を目的に、随時更新を行う場合があります。