
新サービスfeelsで実際に使用! 便利なVue.jsライブラリ5選
目次
こんにちは、飯塚です。
AMGではヒューマンリソースマネジメントアプリ feelsをリリースしました。
新型コロナウイルスによるリモートワークを支援! 4月5日リリース、HRクラウドシステム『feels』を 全機能無償提供
開発にあたって初めてVue.jsを触りましたが、ライブラリの充実具合に驚きました。Vue.jsを好きになれたのは、サクッとかっこいいことができるライブラリのおかげでもあります。
というわけで今回は実際にfeelsで使用したライブラリをご紹介します。
目次
- axios ~APIにJSONをPOSTする~
- moment ~日時取得、フォーマット、計算が1行でできる~
- v-calendar ~範囲指定も可能なハイスペックカレンダー~
- vue-multiselect ~検索可能なセレクトボックスが一瞬で作成できる~
- v-tooltip ~ツールチップを簡単実装、トリガーも自由に指定~
axios ~APIにJSONをPOSTする~
公式Github
MIT License
サンプル導入編
axiosのおかげでAPI側作成後のVue.jsからの呼出しがかなりスムーズに進みました。Promiseがサポートされているので、非同期処理がasync/await/thenを利用してすっきり書けるのも利点です。
moment ~日時取得、フォーマット、計算が1行でできる~
公式ドキュメント
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公式サイト
《関連記事》


アシスタントリーダー A.Iizuka 技術の入門・まとめ系を中心に書いてます。あとで読み返したいと感じていただける記事を目指しています。