Vue.jsを1年触ったのでオススメパッケージを紹介

業務で扱った時は横の移動だけではなく縦の移動もあるため縦の順番もデータとして持っておく必要がありデータベースの設計を慎重に行わなければいけませんでした。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>

f:id:hiroki-nishizawa:20190419033835p:plain

networkタグのnetwork属性を変更することよりソーシャルメディアを変更をすることができます。

今回facebookとtwitterだけしか実装していませんが他にも

email
Google+
LINE
Skype
SMS

など。上記以外にもありますが、メインどころはこんなところでしょうか。

次に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>

f:id:hiroki-nishizawa:20190419053208p:plain

上記の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>

f:id:hiroki-nishizawa:20190419195526g:plain

他にも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>

f:id:hiroki-nishizawa:20190419195233g:plain 自分がプログラミングを初めて半年とかの時に業務でお気に入り機能を実装することになったのですが、当時デザイナーの意向でやりたいという話になりcssで出来るっぽいってとこまでわかったのですが工数的にやらないという意思決定になりました。そのときにこれを知っていたら実装できたのではないか。と思っております。。。

このようなアニメーションが必要な時にほんと簡単に実装できるのでとてもおすすめです。

まとめ

今回は数あるパッケージの中から自分が実際に使い個人的にいいなと思ったパッケージを紹介しました。もちろん他にもたくさんのパッケージがあります。今回紹介したものと似たようなパッケージ、自分が知らない便利なパッケージ、絶対業務では扱わないけど面白そうなパッケージ。たくさんのVue.jsのパッケージがあり、パッケージをまとめてくれている方も多いので試しに使ってみてはいかがでしょうか。

自分の場合はドラッグ＆ドロップをしたいだったり、カルーセルを実装したいだったりしたときにVue.jsを冒頭に付けて検索をした結果触ることになったり、まとめてくれているサイトで面白そうってだけで触ったりしました。

最後に

弊社では事業・サービスが成長していくにあたってメンバーを増やしていきたいと思っています。

興味のある方は下記からご応募いただくか、@hirokiにご連絡ください！！