AMG Solution

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

feels

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

目次

  1. axios ~APIにJSONをPOSTする~
  2. moment ~日時取得、フォーマット、計算が1行でできる~
  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 ~日時取得、フォーマット、計算が1行でできる~

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

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


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

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


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

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


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

まとめ

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

feels

IIZUKA'S BLOG

飯塚の記事

飯塚の記事の最新情報をお届けいたします。

SAME CATEGORY BLOG

この記事と同様のカテゴリー記事

日報で業務改善
はじめました。
LOADING