【ITニュース解説】Using Vue.js Directives to build a Cryptocurrency (web3, DEfi) Interface.

この記事では、Vue.jsのディレクティブ、特にv-bindディレクティブを使って、暗号通貨関連のWebインターフェースを構築する方法を解説する。Vue.jsの基本的な知識とCSSの理解があれば、v-bindディレクティブを用いてインタラクティブで機能的な条件を記述し、アプリケーションのリアクティビティを高める方法を習得できる。

Vue.jsのディレクティブは、DOM要素に機能を追加するためのショートカットであり、要素のターゲット、変更、拡張を行う。この記事では、数あるディレクティブの中でも、v-bindディレクティブに焦点を当てる。

v-bindディレクティブは、HTMLの属性（src、href、classなど）を動的に変更するために使用する。ユーザーの操作に応じてHTMLの一部を動的に変化させることで、ユーザーエクスペリエンス（UX）を向上させることが可能だ。

v-bindディレクティブは、HTML要素にスタイルや機能を追加するためにHTMLに結び付けられる。コードの動作を変更するのではなく、表現を簡素化し、可読性と管理性を向上させることを目的とする。特に大規模なプロジェクトではその効果を発揮するだろう。

v-bindディレクティブには、v-bind:styleディレクティブとv-bind:classディレクティブの2種類がある。この記事では、v-bind:styleディレクティブに焦点を絞り、基本的な構文から応用的な構文まで、段階的に解説する。暗号通貨アプリケーションの例を参考にしながら、v-bind:styleディレクティブの使い方を学ぶ。

v-bind:styleディレクティブは、HTML要素に直接スタイルを追加するために使用される。記述方法には、文字列構文、オブジェクト構文、配列構文の3種類がある。

文字列構文

文字列構文では、インラインCSSのように、スタイルを1つの文字列として記述する。

例えば、残高が400ドルで、それを緑色で表示したい場合を考える。まず、accountBalanceという名前の参照（ref）を作成し、その値を400に設定する。

Copy
1import { ref } from 'vue';
2const accountBalance = ref(400);

次に、v-bind:styleディレクティブを使ってスタイルを追加する。

Copy
1<p class="income-amount">
2  <span v-bind:style="'color: green'"> ${{ accountBalance }}
3  </span>
4</p>

このコードでは、v-bind:styleディレクティブを使って、span要素のcolorスタイルをgreenに設定している。

次に、ウォレットの残高に応じて色を変えることを考える。残高が1ドル以上であれば緑色、1ドル未満であれば赤色で表示したい。これは、三項演算子を使って実現できる。

Copy
1<p class="income-amount">
2  <span v-bind:style="accountBalance > 0 ? 'color: #00ff00' : 'color: #ff0000'"> ${{ accountBalance }} </span>
3</p>

このコードでは、accountBalanceが0より大きい場合、colorスタイルを#00ff00（緑色）に設定し、そうでない場合は#ff0000（赤色）に設定する。

v-bind:styleディレクティブでは、colorだけでなく、background-color、font-size、font-weightなど、さまざまなCSSプロパティを動的に設定できる。複数のスタイルを一度に設定する場合は、セミコロンで区切って記述する。

トランザクション履歴の構築

次に、Webアプリケーションのトランザクション履歴セクションを構築する。クレジット通知には左側に緑色の線、デビット通知には左側に赤色の線を表示したい。

まず、トランザクションを配列に格納する。

Copy
1const transactions = ref([
2  { id: "xy8723ougihk8o7ii", amount: 10 },
3  { id: "ww9732ougihk8wdvk", amount: -10 },
4  { id: "xy8723ougihk8o7ii", amount: 10 },
5]);

この配列では、amountフィールドの値が正の値であればクレジット、負の値であればデビットを表す。

次に、以下のコードを追加する。

Copy
1<div v-for="transaction in transactions" :key="transaction.id">
2  <div class="tracker-item"
3    v-bind:style="transaction.amount > 0 ? 'border-left: 4px solid #00ff00' : 'border-left: 4px solid #ff0000'">
4    <p>{{ transaction.amount > 0 ? 'Account Credited from ' : 'Account Debited for ' }} {{ transaction.id }}
5    </p>
6  </div>
7</div>

このコードでは、v-forディレクティブを使ってtransactions配列をループ処理し、各トランザクションのamountの値に応じて、tracker-itemクラスの左側の線の色を緑色または赤色に設定する。

v-bind:styleディレクティブの代わりに、省略形の:styleを使うこともできる。

オブジェクト構文

オブジェクト構文では、スタイルをJavaScriptオブジェクトとして記述する。複数のスタイルプロパティを動的に追加する場合に適している。

Copy
1<span :style="{ color: '#00ff00' }">
2  ${{ accountBalance }}
3</span>

このコードでは、colorスタイルを#00ff00（緑色）に設定している。

残高に応じて色を変える場合は、次のように記述する。

Copy
1<span :style="{ color: accountBalance > 0 ? '#00ff00' : '#ff0000'}">
2  ${{ accountBalance }}
3</span>

複数のスタイルを追加する場合は、カンマで区切って記述する。

配列構文

配列構文では、スタイルを配列として記述する。

まず、スタイルのオブジェクトを定義する。

Copy
1const accountBalanceColor = ref({
2  color: '#00ff00',
3  fontSize: '20px',
4})

次に、v-bind:styleディレクティブを使ってスタイルを追加する。

Copy
1<span :style="[accountBalanceColor]">
2  ${{ accountBalance}}
3</span>

条件に応じてスタイルを変える場合は、次のように記述する。

Copy
1<span :style="[accountBalance > 0 ? accountBalanceColor : insufficientBalance]">
2  ${{ accountBalance }}
3</span>

この記事では、Vue.jsのディレクティブを使ってDOM要素に機能を追加する方法、そしてそれがどれほど高速であるかを解説した。v-bindディレクティブの活用事例は数多く存在する。この記事が、v-bindディレクティブの可能性を理解する上で役立つことを願う。