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

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

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

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

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

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

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

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

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

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

大きく分けると、

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

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

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

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

まず最初に、

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

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

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

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

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

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

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

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

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

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

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

かっこいいフォトギャラリー 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 に変わる、という具合ですね。

かっこいいフォトギャラリー 『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-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なのでうっすら影をつけるイメージでしょうか。

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

いい感じに動かす 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-bind:src=”project.image” は見たまま、画像のアドレスを projectからもってきてます。

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

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

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

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

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

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

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

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

『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】かっこいいフォトギャラリーを発見したのでソースを読んでみた。カテゴリーで選べてなめらかに動くんです

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