フロントエンド

【Vue.js】かっこいいフォトギャラリーを発見したのでソースを読んでみた。カテゴリーで選べてなめらかに動くんです

アオキ
写真をかっこよく見せたいなぁ、できたらVue.jsで。

と思いググっていたら、見つけました。

See the Pen
VueJS Category Filter CSS Animation
by aoki_monpro (@suica)
on CodePen.

実際に動くページはこちら

アオキ
うーん、かっこいい。

写真ごとにカテゴリーが設定されていて、

ARTやWORKSHOPSと書かれている箇所をクリックすると、カテゴリーごとに表示されて、

ALLを押すと全ての写真が表示されると。

動きもスムーズ。いい感じ。

アオキ
これはぜひ自分でもつくれるようになりたいっ・・!

という事でソースを読んでみることにしました。

Sponsored link

かっこいいフォトギャラリーのソースコードを読んでみる

ソースコードはこんな感じです。

大きく分けると、

  • ホームページを表示する『HTML』と、
  • 見た目をいい感じにする『CSS』と、
  • 最近人気急上昇中の『Vue.js(JavaScriptのフレームワーク)』

の3点セットでなりたっています。

説明の都合上、まずはscriptタグの中から見てみます。

かっこいいフォトギャラリー 『Vue.js』の読み込みなど

まず最初に、

という箇所で、『Vue.js』のファイルを読み込んでいます。

『Vue.js』を使うには大きく2つ方法がありますが、

  1. 『Vue.js』をインストールする方法
  2. インターネット上のファイルを読み込む方法

今回はインターネット上のファイルを読み込んでいます。

インターネット上のファイルを読み込む方法のことを、『CDN』と読んだりします。

『CDN』・・コンテンツデリバリーネットワーク

インターネット上から読み込んだ後、下記のコードが書かれています。

new Vueとして、『Vue.js』を有効にして(インスタンス化)して、

el: の後に、『Vue.js』の適用範囲を決めます。

なんでもいいのですが慣例で #app とすることが多いです。

『HTML』側、bodyのすぐ下から #app で囲むことで、body全体を『Vue.js』が効くようにします。

Sponsored link

かっこいいフォトギャラリー data編

次はdata。

文字通りデータを入れておく箱のことで、今回はdataの中に、

  • currentFilter
  • projects

の2つのデータの箱(変数)を用意しています。

初期値を入力できるので、

  • currentFilter: ‘ALL’,

で、最初はALLが選択された状態にしています。

  • projects

の中はオブジェクトの配列になっていて、

キー:値

の組み合わせでいくつかの情報が書かれています。

の場合だと、

  • title が Artwork
  • image が https://picsum.photos/g/200?image=122 (画像ファイル)
  • category が ART

といった具合です。

今回は合計7つ、カテゴリーとしては、ARTとDOODLESとWORKSHOPSの3種類が書かれています。

アオキ

配列なのでもちろんもっと増やすことも可能です。

かっこいいフォトギャラリー methods編

次はmethods(メソッド)。

メソッドの名前はなんでもいいのですが、

読んで意味がわかるように『名詞』『動詞+名詞』がいいとされています。

今回はフィルターをセットするということで 『setFilter』。

そのままですね。

メソッドの中身にまるっと関数をいれています。

アオキ
名前なしの関数です、クロージャと言ったりもします。

引数に filter として、カテゴリーの値をとるようにして、

this.currentFilter というのは 先ほどのdata のcurrentFilter になります。

例えばカテゴリーがARTだったら、

dataのcurrentFilterも ART に変わる、という具合ですね。

Sponsored link

かっこいいフォトギャラリー 『HTML』内に独特の書き方が満載

『Vue.js』の大きな特徴として、

『HTML』の中に、『Vue.js』独特の書き方を織り交ぜる事ができます。

『ディレクティブ』と呼ばれます。

最初はとっつきにくいかもですが、

『HTML』内のどの場所が変化するかというのがわかりやすいので、

慣れるとだいぶ読みやすいつくりになっています。

今回のフォトギャラリーの場合、合計6つの『Vue.js』独特の書き方(『ディレクティブ』)がありました。

  • v-on:click ・・クリックした時に動作する(メソッドを指定する)
  • v-bind:class ・・クラスを紐づける
  • transition-group ・・いい感じに動かす
  • v-if ・・ カテゴリーによって表示を振り分ける
  • v-for ・・繰り返す
  • v-bind:key ・・ v-forの時は必ずkeyをつける
  • v-bind:src ・・ 画像のURL
アオキ
ほとんど 『v-』から始まっているのでわかりやすいかも?ですね。

上から順に解説してみます。

クリックしたら処理を実行する v-on:click

カテゴリーの箇所のコードは下記になっています。

という箇所で、クリックした時にsetFilterメソッド(引数はALL)が実行されます。

(data.currentFilter の中身がALLになります。)

をクリックしたら、 setFilterメソッド(引数はART)が実行ですね。

ちなみに、v-on:clickは @click と短く書くこともできます。

条件指定でクラスをつける v-bind:class

v-bindはちょっととっつきにくいかもですが、bindは英語で結びつけるという意味で、『CSS』のクラスとdataの値を結びつける事ができます。

の書き方だと、
currentFilter が ALL なら class を active にする、という意味になります。

『CSS』側で、 .active のスタイルを書いています。

box-shadowなのでうっすら影をつけるイメージでしょうか。

よくよくみると、確かにうっすら影が見えます。

アオキ
この辺はこだわりというかセンスというか・・ですね。
Sponsored link

いい感じに動かす transition-group

カテゴリーボタンを押した時に、

にゅ〜っと動いたり、

ふわっと消えたり、

なんというかこういい感じに動いているんですが、(語彙力・・)

それを実現する方法が、『transition-group』というディレクティブになります。

『transition-group』で囲った箇所がいい感じに動く対象の範囲になります。

先ほど v-bind:class で active というクラスをつけていましたが、

『transition-group』も同じように、動作によってクラスをつけたり消したりします。

『Vue.js』公式の画像を拝借すると、

  • v-enter・・動作開始のタイミング(フェードインのタイミング)
  • v-enter-active ・・動作中
  • v-enter-to ・・動作が終わったタイミング
  • v-leave・・消え始めるタイミング(フェードアウトのタイミング)
  • v-leave-active ・・消えている間
  • v-leave-to ・・消えたタイミング

の6つのクラスが瞬時についたり消えたりします。

今回の場合、transition-group タグで囲った中に、画像表示のコードが書かれているのですが(v-ifやv-forなど)、

これら全てに クラスがついたり消えたりします。

実際にクラスがついたり消えたりする動画がこちら。

一瞬なので、

アオキ
い、いったい何が起こってるんや・・

な状態ですが、よくみると確かにクラスがついたり消えたりしているのがわかるんじゃないかなと思います。

(グーグルクロムで右クリック->検証 を押すと確認できます。)

『CSS』側を見ると、 projects というクラス以外に、

  • projects-enter
  • projects-leave-to
  • projects-leave-active

というクラスも用意されていることがわかります。

これらのクラスが一瞬でついたり消えたりします。

アオキ
いやーすごい。

『CSS』周りの解説は長くなるので別記事にて。

条件付きで繰り返す v-if v-for v-bind:key

transition-group で囲った中はこんなコードになっています。

v-forは繰り返す構文で、下記のように書きます。

v-for = 単数形 in 複数形

単数の箇所は実際はなんでもよくて、例えば

でも動くんですが、見た目がわかりづらいので、

v-for = 単数形 in 複数形

で書くのが慣例になっています。

また、

v-forで繰り返す場合は、v-bind:keyが必ず必要になります。(それぞれを識別できるようにするため)。

今回は dataの、projectの中の、title をキーにしています。

ですね。

『v-if』は文字通り条件指定で、

もし、 currentFilter が、 project.categoryだったら・・ (project.categoryというのはdataの中の、projectの中のcategory)、

  • ARTならARTを表示して、
  • DOODLEならDOODLEを、
  • WORKSHOPS なら WORKSHOPSを表示、という意味になります。

OR演算子(||) がついていて、 ALL だったら、という条件もあるので、

アオキ
どれでも条件満たすなら v-if つけなくてもいいんじゃない・・?

と思い v-ifを消してみたら見事に動かなくなったので、動くきっかけとしてv-ifは必要のようです。

最後に、 v-bind:src=”project.image” は見たまま、画像のアドレスを projectからもってきてます。

Sponsored link

かっこいいフォトギャラリー のソースコードを読んでみて

なによりびっくりしたのは、

『transition-group』で囲うだけで、6つのクラスが瞬時についたり消えたりするとこですね。

つくクラス名も法則が決まっているので、

慣れるとかなりかっこいいフォトギャラリーがさくっとつくれるようになりそうな。

今回は解説していませんが、『CSS』の『Flexbox』という技術も使っているのでスマホでもばっちり表示されますし。

実際に動くページはこちら

アオキ
ぜひマスターしてかっこいいフォトギャラリーをさくっとつくれるようになりたいですね〜

参考ページ Using Vuejs transitions to filter the projects by category

created by Rinker
¥3,694 (2019/09/23 01:06:24時点 Amazon調べ-詳細)
created by Rinker
¥3,650 (2019/09/22 09:56:25時点 Amazon調べ-詳細)

『Vue/Vuex/Nuxt』ではこんな記事も読まれています。

1. 【Vue.js】と【Firebase】で作るミニWebサービス を試してみた〜Googleログインまで〜

2. 【Nuxt】入門 Vuexの状態管理を【図解】してみた【初心者向け】

3. 【Laravel5.5】Webアプリケーションを作るためのゆるめの環境構築編【Node.js】【npm】【Vue.js】【初心者向け】

4. 【Laravel】と【Vue.js】のサンプル動画を見ながらさらりと解説してみる

5. 【Vue.js】【SPA】の作り方をわかりやすくまとめてみた【初心者向け】

6. 【Vue.js】かっこいいフォトギャラリーを発見したのでソースを読んでみた。カテゴリーで選べてなめらかに動くんです

アオキ
ツイッターでも記事ネタ含めちょろちょろ書いていくので、よろしければぜひフォローお願いしますm(_ _ )m

アオキのツイッターアカウント


関連記事一覧 (一部広告あり)

コメント

    • AAA
    • 2019年 2月 10日

    丁度Vueでのこのようなフィルター機能を探していました!

    そこで質問なのですが、1つの作品に複数のカテゴリをつけたい場合(例えば、Artworkに”ART”と”WORKSHOP”)、どのようにcategoryを設定すれば良いのでしょうか?

    また、それぞれに別ページのリンクをつけたいのですが(“/Artwork”の様に)、どの様にできますでしょうか?
    Nuxtでやっているので、などとしてみましたが、上手くいきませんでした。。。

    もしご回答いただけますと幸いです!

      • aoki_monpro
      • 2019年 2月 10日

      複数カテゴリ 配列かませばいけるだろうとしばらくググってみたのですが、確かにうまく動かないですね、わかり次第追記したいと思います。

      リンクは category/:id などのようにカテゴリごとにページ作ってその下に番号ふる形でいいのではと思います。
      vue-routerの動的ルートマッチングでいけそうな。
      https://router.vuejs.org/ja/guide/essentials/dynamic-matching.html

  1. この記事へのトラックバックはありません。

CAPTCHA


最近の記事

  1. 音楽

    コードの転回形の練習方法をまとめてみた【大人のピアノ】
  2. バックエンド

    【検索システム】をつくってみた【実際にログインしてさわれます】
  3. 学び・教育

    『プログラミング教育』より大事な事を考えてみる~AI時代を見据えて~
  4. バックエンド

    【厳選8冊】ホームページを作れるようになるためのおすすめ本【初心者向け】
  5. バックエンド

    【Laravel(PHP)】でできる事をわかりやすく(ざっくりと)まとめてみた【…
PAGE TOP