新サービスfeelsで実際に使用！ 便利なVue.jsライブラリ５選

こんにちは、飯塚です。
 
AMGではヒューマンリソースマネジメントアプリ feelsをリリースしました。
新型コロナウイルスによるリモートワークを支援！ ４月５日リリース、HRクラウドシステム『feels』を 全機能無償提供
 
開発にあたって初めてVue.jsを触りましたが、ライブラリの充実具合に驚きました。Vue.jsを好きになれたのは、サクッとかっこいいことができるライブラリのおかげでもあります。
 
というわけで今回は実際にfeelsで使用したライブラリをご紹介します。

目次

1. axios ~APIにJSONをPOSTする~
2. moment ~日時取得、フォーマット、計算が１行でできる~
3. v-calendar ~範囲指定も可能なハイスペックカレンダー~
4. vue-multiselect ~検索可能なセレクトボックスが一瞬で作成できる~
5. v-tooltip ~ツールチップを簡単実装、トリガーも自由に指定~

axios ~APIにJSONをPOSTする~

公式Github
MIT License
サンプル導入編
 
axiosのおかげでAPI側作成後のVue.jsからの呼出しがかなりスムーズに進みました。Promiseがサポートされているので、非同期処理がasync/await/thenを利用してすっきり書けるのも利点です。

moment ~日時取得、フォーマット、計算が１行でできる~

公式ドキュメント
MIT License
 
型変換とフォーマットがめちゃくちゃ楽になります。よく使うのはこんな感じです。

moment() // 現在時刻取得
moment(日時オブジェクト).format('YYYY/MM/DD') // YYYY/MM/DDにフォーマットする
moment(日時オブジェクト).subtract(1, 'days') // 1日前の日付を取得
moment(文字列型日時).format('YYYY/MM/DD') // 文字列をYYYY/MM/DDの日時にフォーマットする
moment(文字列型日時).toDate() // 文字列を日時オブジェクトに変換する

v-calendar ~範囲指定も可能なハイスペックカレンダー~

公式ドキュメント
MIT License
 
公式ページのホームにサンプルが載っています。まさにこういうのが欲しかったという感じ。

vue-multiselect ~検索可能なセレクトボックスが一瞬で作成できる~

公式ドキュメント
MIT License
 
公式ページの下部にサンプルが載っています。
 
画像のセレクトボックスもあったりして、触るだけでも面白いです。デフォルトの色が緑とオレンジなので、CSSを変えたくなると思います。
 
componentで使用する場合は、scopeなしのstyleタグを使うことをお忘れなく。

v-tooltip ~ツールチップを簡単実装、トリガーも自由に指定~

公式ドキュメント
MIT License
 
自分で作ろうとすると地味にめんどくさいであろうツールチップです。styleを適用させないとモーダルなどで使う場合は、z-indexで隠れてしまうので注意しましょう。僕はハマりました……。

まとめ

いかがでしょうか。
 
今回まとめたライブラリは、ドキュメントもサンプルも充実しているのが嬉しいです。レスポンシブ対応やマルチブラウザ対応してくれている点も、かなりデカいと思います。
 
実際にfeelsでどう使ったのか気になる方は、下記からぜひお試しください。
feels公式サイト
 
 
 
 
《関連記事》

• 新型コロナウイルスによるリモートワークを支援！ ４月５日リリース、HRクラウドシステム『feels』を 全機能無償提供