はじめに
こんにちは株式会社SCOUTERでエンジニアをしているhirokinishizawaです。 業務では、SARDINEという人材紹介会社向けの業務管理システムを開発しています。
前回プログラミングを初めてから1年が経ったので「1年間のプログラミングを通して得た3つの教訓」というブログを書きました。
1年間実務だけやってきて自分が得た教訓をプログラミングを始めたばかりの方や、これから始めてみたいと思っている方に共有できればという思いで書いた記事になっています。
今回は1年間Vue.jsを触ってきて自分がおすすめだなと思ったパッケージについて紹介していきたいと思います。
紹介するパッケージ一覧
- Vue.Draggable
- vue-social-sharing
- vue-carousel
- vue-star
こちらの4つについて話していこうかと思います。
導入方法はすべて定番のyarn add [package-name]とnpm install [package-name]で導入できます。
Vue.Draggable
以前Vue.Draggableを業務で扱う機会があったのでその時にブログを書きました。ドラッグ&ドロップでリストを並び替えすることをお手軽に実装できるパッケージになっています。
業務で扱った時は横の移動だけではなく縦の移動もあるため縦の順番もデータとして持っておく必要がありデータベースの設計を慎重に行わなければいけませんでした。Vue.Draggableでドラッグ＆ドロップをした時にどのようなデータを受け取ることができるのか把握してから設計を行えば横移動も縦移動も問題なく動かすことが出来るかと思います。
vue-social-sharing
vue-social-sharingとfont-awesomeを導入することでソーシャルボタンを簡単に設置できます。
<template> <social-sharing url="https://twitter.com/hiroki_2438" title=" タイトル記載" description="説明文を記載してください" hashtags="Vue.js" twitter-user="hiroki_2438" inline-template > <div> <network network="facebook"> <i class="fa fa-facebook-official"></i> </network> <network network="twitter"> <i class="fa fa-twitter"></i> </network> </div> </social-sharing> </template> <script> import SocialSharing from "vue-social-sharing"; export default { components: { SocialSharing } } </script>
networkタグのnetwork属性を変更することよりソーシャルメディアを変更をすることができます。
今回facebookとtwitterだけしか実装していませんが他にも
など。上記以外にもありますが、メインどころはこんなところでしょうか。
次にSocialSharingコンポーネントにpropsでtitleなどを渡していますが実際にコンポーネントで何を受け取っているのか調べてみました。
| 渡しているもの | 説明 | 補足 |
|---|---|---|
| url | シェアしたいurlになります | 何も指定しなければでソーシャルボタンが設置されているurlが指定されます |
| title | タイトルになります | 利用可能なのはemail,twitterになります |
| description | 説明文です | 利用可能なのはemail,LINE,SMS |
| quote | facebook用のquoteになります | facebookのみ使用可能 |
| hashtags | ハッシュタグです | facebookとtwitterのみ使用可能でfacebookは１つ目のみ使われます |
| twitter-user | twitterのアカウントIDをいれてください | twitterのみ使用可能 |
自分がよく使うのは基本的にfacebookやtwitterなので十分だったのと、導入するだけで簡単に実装できるし以前aタグでやっていたときより簡潔で読みやすくなるのでおすすめです。
以前aタグでやっていた時
#facebook <a class="fb btn" :href="`http://www.facebook.com/share.php?url=urlを記載`" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"> <img src="facebookのicon画像"> </a> #twitter <a :href="`https://twitter.com/intent/tweet?text=タイトル&url=urlを記載`" target="_blank"> <img src="twitterのicon画像"> </a>
vue-carousel
vue-carouselはカルーセルを簡単に実装できレスポンシブにも対応していてとても使いやすいUIコンポーネントです。
<template> <Carousel :per-page="1" loop=true :navigation-enabled="true" navigation-prev-label="〈" navigation-next-label="〉" touchDrag=true :speed="1000" > <Slide v-for="(slide, key) in slides" :key="key"> <span>{{slide}}</span> </Slide> </Carousel> </template> <script> import { Carousel, Slide } from "vue-carousel"; export default { components: { Carousel, Slide }, data() { return { slides: ["slide1", "slide2", "slide3", "slide4", "slide5", "slide6"] }; } }; </script>
上記のCarouselコンポーネントにpropsで渡してしているのは
- per-page
- 各ページに表示されるスライドの最大数
- loop
- 最後に到達したときにカルーセルをループさせるためのもの
- navigation-enabled
- navigation-prev-labelとnavigation-next-labelを使用できるようにするもの
- navigation-prev-label
- ナビゲーションの前に戻るボタンのテキスト
- navigation-next-label
- ナビゲーションの次に進むボタンのテキスト
- touchDrag
- タッチドラッグを出来るようにするもの
- speed
- スライドする時のスピードを調節するもの
それぞれこのような設定になっています。
今回使っているものの他に
autoplay autoplayDirection autoplayHoverPause autoplayTimeoutのように時間で自動的にスライドを出来るようにするための設定だったり、スマホ用にスワイプで切り替わるようにするための設定だったりとカルーセルの実装をするために必要なものを簡単に実装できるのがとてもおすすめできるポイントだなと思います。
vue-star
twitterのいいねみたいなアニメーションを簡単に実装できるUIコンポーネントになっています。
<template> <vue-star color="#F05654"> <i slot="icon" class="fa fa-heart"></i> </vue-star> </template> <script> import VueStar from "vue-star"; export default { components: { VueStar } }; </script>
他にもcolorのカラーコードを変えて色を変更したり、animateという属性を使ってanimationのクラスを入れることによって違う動きができたりします。
自分は使っているのですがanimate.cssを入れることでより簡単にanimationの幅を広げることができます。
<template> <div class="vue-stars"> <vue-star animate="animated wobble" color="#0000ff"> <i slot="icon" class="fa fa-heart"></i> </vue-star> </div> </template>
自分がプログラミングを初めて半年とかの時に業務でお気に入り機能を実装することになったのですが、当時デザイナーの意向でやりたいという話になりcssで出来るっぽいってとこまでわかったのですが工数的にやらないという意思決定になりました。そのときにこれを知っていたら実装できたのではないか。と思っております。。。
このようなアニメーションが必要な時にほんと簡単に実装できるのでとてもおすすめです。
まとめ
今回は数あるパッケージの中から自分が実際に使い個人的にいいなと思ったパッケージを紹介しました。もちろん他にもたくさんのパッケージがあります。今回紹介したものと似たようなパッケージ、自分が知らない便利なパッケージ、絶対業務では扱わないけど面白そうなパッケージ。たくさんのVue.jsのパッケージがあり、パッケージをまとめてくれている方も多いので試しに使ってみてはいかがでしょうか。
自分の場合はドラッグ＆ドロップをしたいだったり、カルーセルを実装したいだったりしたときにVue.jsを冒頭に付けて検索をした結果触ることになったり、まとめてくれているサイトで面白そうってだけで触ったりしました。
最後に
弊社では事業・サービスが成長していくにあたってメンバーを増やしていきたいと思っています。
興味のある方は下記からご応募いただくか、@hirokiにご連絡ください！！
