なくてはならない5つのVue.jsライブラリ

経験豊富な開発者は、他の誰かが作成したパッケージを使用して時間を節約し、プロジェクトの問題を解決しようとすると、節約された時間よりも多くの時間を費やしてしまう可能性があることを知っています。特定のメカニズムの実装を厳密に規制し、著者が正しいと思う以上の助けを借りて異常なタスクを解決することを許可しないライブラリは、文字通りそれらをインストールした直後に、私たちがそれらを試してみることにしたことを後悔しています。







これは私に頻繁に起こりますが、私はまだ多くのプロジェクトで使用していて、長年にわたって非常に有用であることが証明されているお気に入りのライブラリの小さなリストを持っています。私はこれらのライブラリが解決する問題を解決するために多くのアプローチを試みました。私の選択は、ライブラリを操作する便利さ、その機能の多様性、それを使用したときに得られるものの見栄えに影響されました。その結果、私はあなたと共有したいリストを持っています。

1.要素の外側をクリックして要素を非表示にする

ユーザーが要素の外側をクリックしたときにイベントをトリガーする必要がある場合があります。ほとんどの場合、ドロップダウンリストまたはダイアログボックスを閉じることができるように、必要なときにこれを行う必要があります。私が開発するほとんどすべてのアプリケーションで使用するこの動作を実装するための1つのパッケージがあります。



これはvue-clickawayライブラリです。





要素の外側をクリックしたときに要素を非表示にする

▍vue-clickawayの使用

私は通常、このパッケージをに含めmain.jsます。これにより、アプリケーション全体で使用できるようになります。1ページまたは2ページにのみ適用される場合は、必要な場所にのみインポートすることを決定する可能性があります。



個別にインポートする場合は、コンポーネントではなくディレクティブをインポートすることに注意してください。つまり、正しいことは次のとおりです。

directives: { onClickaway }

しかし、これは好きではありません：

components: { onClickaway }

ディレクティブをグローバルに（でmain.js）使用できるようにする方法は次のとおりです。

import { directive as onClickaway } from 'vue-clickaway'
Vue.directive('on-clickaway', onClickaway)

テンプレートでこのディレクティブを使用する方法は次のとおりです（簡単にするために、コードの短縮バージョンを次に示します）。

<button 
    v-on-clickaway="closeYearSelect"
    class="select_option gray"
    @click="toggleYearSelect"
>
    <span class="txt">{{ selectedYear }}</span>
    <span class="arrow blind">Open</span>
</button>

アイテムのリストを含む、アイテムを選択するための本格的なフィールドがあると想像してください<li>（コードには表示されていません）。上記のボタンは、画面にリストを表示するために使用され、この要素の外側をクリックすると、リストを閉じるメソッドを呼び出します。これにより、要素の隅にある閉じるボタンを常にクリックするよりもはるかに優れたユーザーエクスペリエンスが可能になります。ボタンの説明に次の構造を追加することで、この機能を利用できます。

v-on-clickaway="closeMethodName"

vue-clickaway要素を表示および非表示にするメソッドではなく、常に何かを閉じるメソッドを使用する必要が あることに注意してください。つまり、に接続されているメソッドはv-on-clickaway次のようになります。

closeMethod() {
 this.showSomething = false
}

しかし、この方法は次のようにすべきではありません。

toggleMethod() {
 this.showSomething = !this.showSomething
}

メソッドのようなものを使用する場合toggleMethod、要素の外側をクリックすると、クリックした場所に関係なく、要素を開いたり閉じたりします。あなたはおそらくそれを必要としないでしょう。したがってv-on-clickaway、要素を非表示にするメソッドで使用するだけです。

2.ポップアップ通知

さまざまなツールを使用してトースト通知を作成できますが、私はvue-toastificationライブラリの大ファンです。





vue-toastificationで実装された通知



開発者は、さまざまなニーズを満たす通知を実装するために使用できる多数のカスタマイズを提供します。通知用のライブラリのスタイリングおよびアニメーション機能を使用すると、他のパッケージで作成するよりも優れた、魅力的でユーザーフレンドリーなソリューションを作成できます。

▍vue-toastificationの使用

ライブラリvue-toastificationはさまざまな方法で使用できます。詳細については、彼女のドキュメントを参照してください。そのため、アプリケーションの状態の変化やサーバーに関連するアクションに基づいて通知を表示する必要がある場合は、コンポーネントレベル、グローバルレベル、またはVuexと組み合わせて適用できます。



このライブラリのグローバルな使用例を次に示します（main.js）：

import Toast from "vue-toastification"
//  
import "vue-toastification/dist/index.css"
Vue.use(Toast, {
  transition: "Vue-Toastification__bounce",
  maxToasts: 3,
  newestOnTop: true,
  position: "top-right",
  timeout: 2000,
  closeOnClick: true,
  pauseOnFocusLoss: true,
  pauseOnHover: false,
  draggable: true,
  draggablePercent: 0.7,
  showCloseButtonOnHover: false,
  hideProgressBar: true,
  closeButton: "button",
  icon: true,
  rtl: false,
})

通知スタイルは、コンポーネントごとに設定することで個別に制御できますが、上記の場合、にインポートすることで、アプリケーション全体で通知スタイルを利用できるようにしましたmain.js。その後、通知設定を行いました。これにより、通知を使用する必要があるたびに同じコードを記述する必要がなくなりました。vue-toastificationライブラリには、実験に最適な遊び場があります。その上で、通知に対するパラメーターの影響を確認し、必要なものをすぐにコードにコピーできます。これはまさに上記の例で行ったことです。



このライブラリのいくつかの使用例を考えてみましょう。

▍オプション1：コンポーネント（テンプレート内）で通知を使用する

<button @click="showToast">Show toast</button>

ボタンがクリックされたときに呼び出されるメソッドは次のとおりです。

methods: {
    showToast() {
        this.$toast.success("I'm a toast!")
    }
}

▍オプション2：Vuexでエラーが発生したとき（または操作が成功したとき）に通知を表示する

this._vm.$toast.errorエラーが発生したときにVuexで 使用する方法を示すサンプルコードを次に示します。

async fetchSomeData({ commit }) {
    const resource_uri = `/endpoint/url`
    try {
        await axios.get(resource_uri).then((response) => {
            commit(SET_DATA, response.data)
        })
    } catch (err) {
        this._vm.$toast.error('Error message: ' + err.message)
    }
}

メソッド名.errorを.success、、.infoまたはに変更するだけで、通知のタイプを変更できます.warning。また、必要に応じて、それを完全に削除して、デフォルト設定で通知を受け取ることができます。



トースト通知を使用すると、開発者は、アプリケーションの状態の変化に基づいて、または予期しないエラーが発生したときに、いくつかの情報を表示できます。これにより、アプリケーションのユーザーエクスペリエンスが向上します。トースト通知は、モーダルや醜いアラートウィンドウよりもイベントの視覚的な表示をユーザーに提供します。実際、ウィンドウを操作する場合、ユーザーはウィンドウを閉じるためにもう一度マウスをクリックする必要があります。ユーザーは、何かがうまくいかないという視覚的な合図を与えることで、画面を無力に見つめ、決して起こらないイベントを待つ必要がなくなることを理解するでしょう。さらに、通知は特定の操作の成功を確認するのに役立ちます。

3.テーブルの操作

テーブルは、多くのWebアプリケーションの非常に重要な部分です。低品質のスプレッドシートライブラリを選択すると、多くの問題が発生する可能性があります。私は多くの同様のライブラリを試し、vue-good-tableに落ち着きました。





vue-good-tableの使用例



このライブラリは、開発者が直面するテーブル作業タスクのほとんどを解決できると確信しています。そして、その名前「good-table」は単なる言葉ではありません。これは本当に優れたライブラリであり、予想よりもはるかに多くの機能を提供してくれます。

▍vue-good-tableの使用

次の例では、データ:rowsを次のVuexゲッターにバインドしますgetOrderHistory。

<vue-good-table
    class="mx-4"
    :columns="columns"
    :rows="getOrderHistory"
    :search-options="{ enabled: true }"
    :pagination-options="{
        enabled: true,
        mode: 'records',
        perPage: 25,
        position: 'top',
        perPageDropdown: [25, 50, 100],
        dropdownAllowAll: false,
        setCurrentPage: 2,
        nextLabel: 'next',
        prevLabel: 'prev',
        rowsPerPageLabel: 'Rows per page',
        ofLabel: 'of',
        pageLabel: 'page', //   'pages'
        allLabel: 'All'
    }"
>

ローカルデータ（data()）のテーブル列の説明は次のとおりです。

columns: [
    {
        label: 'Order Date',
        field: 'orderDtime',
        type: 'date',
        dateInputFormat: 'yyyy-MM-dd HH:mm:ss',
        dateOutputFormat: 'yyyy-MM-dd HH:mm:ss',
        tdClass: 'force-text-center resizeFont'
    },
    {
        label: 'Order Number',
        field: 'orderGoodsCd',
        type: 'text',
        tdClass: 'resizeFont'
    },
    {
        label: 'Title',
        field: 'orderTitle',
        type: 'text',
        tdClass: 'resizeFont ellipsis'
    },
    {
        label: 'Price',
        field: 'saleAmt',
        type: 'number',
        formatFn: this.toLocale
    },
    {
        label: 'Edit btn',
        field: 'deliveryUpdateYn',
        type: 'button',
        tdClass: 'force-text-center',
        sortable: false
    },
]

ここでlabel、列ヘッダが画面に表示され、fieldこれはVuexゲッター内に結合されるデータです。



上記の例では、テーブルをカスタマイズするためにvue-good-tableの機能の一部を使用しています。これは、たとえば、入力と出力の日付形式を設定します（これにより、サーバーから日付と時刻の完全な説明を取得し、この情報をより便利な形式でユーザーに表示できます）。また、ここでformatFnは、という名前の特別な方法を使用して価格をフォーマットするために使用しますtoLocale。次にtdClass、ローカルタグで設定したクラスにバインドして、テーブルセルの外観をカスタマイズします。<style>..。vue-good-tableパッケージには、実際には無限のカスタマイズオプションが組み込まれています。これらの機能を使用すると、非常にさまざまな用途に適したテーブルを作成できます。

▍独自のテンプレートを作成する

vue-good-tableライブラリは、プログラマー自身が作成したテンプレートでも正常に機能します。これは、ボタン、リストから値を選択するためのフィールド、またはその他のものをテーブルセルに簡単に埋め込むことができることを意味します。これを行うには、ディレクティブを使用して、v-if特別なものを配置する場所を指定するだけで十分です。これは、テーブルの列にボタンを追加する例です。

<template slot="table-row" slot-scope="props">
    <span v-if="props.column.field === 'cancelYn' && props.row.cancelYn === 'Y' ">
        <BaseButton class="button" @click="showModal">
            Cancel Order
        </BaseButton>
    </span>
</template>

この例では、モーダルウィンドウを開くボタンについて説明しています。cancelYn対応するデータフィールドの値が等しい場合、フィールド（列）に表示されYます。



独自の別の列をテーブルに追加v-else-ifするには、ディレクティブを使用した終了タグv-if（この場合はタグ<span>）の後に構成を追加する必要があります。その後、新しい列のロジックを説明する必要があります。一般に、vue-good-tableライブラリは、Webページでのテーブルの表示に関連するあらゆる状況で役立つと言えます。

4.日付を選択するためのツール

それでは、日付の選択を整理するために設計されたライブラリについて説明します。似たようなものが、実生活のさまざまなアプリケーションに見られます。私がここで話している他の問題を解決するためのライブラリよりも、この機能を実装するライブラリがたくさんあります。この問題を解決するために、定期的にvue2-datepickerライブラリに戻ります。





vue2-datepickerライブラリの使用例



このライブラリで作成された日付ピッカーコントロールは、簡単にスタイル設定できます。日付の選択と日付の範囲に関連する大量のカスタマイズをサポートします。ライブラリを使用すると、きちんとした便利なユーザーインターフェイス要素を作成できます。ローカリゼーションツールもサポートしています。



パッケージはvue2-datepickerと呼ばれますが、Vue 3ベースのアプリケーションで問題なく使用できることに注意してください（この投稿で説明する他のライブラリについても同じことが言えます）。

▍vue2-datepickerの使用

ライブラリは、コンポーネントにインポートすることも、テンプレートに含めることもできます。



これをコンポーネントにインポートする例を次に示します。

import DatePicker from 'vue2-datepicker';
// 
import 'vue2-datepicker/index.css';

テンプレートで使用する方法は次のとおりです。

<date-picker
    v-model="dateRange"
    value-type="format"
    range
    @clear="resetList"
    @input="searchDate"
></date-picker>

ここではrange、ユーザーが日付範囲を選択できるオプションを使用しています。ここでは、ディレクティブを使用v-modelして、ユーザーが入力したデータを値に接続しますdateRange。次にdateRange、たとえば、vue-good-tableを使用して、テーブル内のデータの出力をカスタマイズできます。ここでもイベントオプションを使用します-@clearそして@input、それらを使用してメソッドを呼び出します。メソッドの1つはテーブルをダンプし（resetList）、2つ目はサーバーにリクエストを送信します（searchDate）。vue2-datepickerライブラリは、ここで説明したよりもはるかに多くのオプションとイベントを提供します。しかし、私がここで話したことは、私が最も頻繁に使用します。

5.評価

評価システムは、たとえば、AmazonやRottenTomatoesなどのサイトにあります。おそらく、すべてのプロジェクトでそのようなシステムを使用するわけではありませんが、私は、それが必要なすべてのサイトで、vue-star-ratingライブラリを使用してこの機能を実装します。 





vue-star-ratingライブラリの使用例



このようなものは自分で作成するのが非常に簡単に思えるかもしれません。しかし、詳細を掘り下げると、そのようなコントロールの設計は、予想よりもはるかにすぐに難しくなる可能性があることがわかります。このライブラリを使用すると、独自のSVGイメージを使用して、スコアリングに使用される形状の形状をカスタマイズできます。要素のサイズ、要素間の距離、要素の色を調整できます。



vue-star-ratingのコントロールを使用してユーザーが何かに与えた評価は、v-modelそれを使用する予定の場所に簡単に渡すことができます。見積もりは、単一のパラメーターを使用して可変または不変にすることができます。



また、このライブラリを使用するときにさらに多くの機能が必要な場合は、同じ作成者によるvue-rate-itパッケージを確認してください。

▍vue-star-ratingの使用

テンプレートでこのライブラリを使用する方法は次のとおりです（オプション付き）。

<star-rating
    class="star-rating"
    :rating="newReivew.score"
    active-color="#FBE116"
    :star-size="starSize"
    :increment="increment"
    :show-rating="showRating"
    @rating-selected="setRating"
/>

コンポーネントにインポートする方法は次のとおりです。

import StarRating from 'vue-star-rating'

export default {
    components: {
        StarRating
    },
}

結果

Vueの5つのライブラリについて説明しました。ここで、プロジェクトを開発するときに役立つものを見つけていただければ幸いです。



どのVue.jsライブラリを最もよく使用しますか？