いいね機能をJavaScriptで実装しよう!

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

実装するもの

今回は、「いいね機能」をJavaScriptで実装したいと思います。

demoは「こちら」で確認できます。

環境構築

簡単な環境構築をお願いします。

必要なファイルは、以下の通りです。

CSS版

ページ(HTML)の作成

最初にページを作成しましょう。

このHTMLをブラウザ上で表示すると以下のようになります。

スタイル(CSS)を装飾

次にスタイルを記述しましょう。

ここまで実装すると以下のようになります。

画像は、imgixから取得しています。

JavaScriptの実装

要素の取得

画面操作に必要な要素を取得します。

クリックイベントの登録

画像をクリックしたときにイベントを発火させたいので、clickイベントを登録します。

クリック時間の制御

今回のいいね機能は、画像をダブルクリックした時にいいねがつきます。そのため、一定間隔で画像が押された時に処理が発火するように制御します

実は、ダブルクリックした時に発火するdblclickイベントというものもありますが、これは時間間隔を制御できないので、clickイベントを使っています。

ハートを作る

次に、画像をダブルクリックすると表示されるハートを作成します。

ハートは、Font Awesomeを使っています。

計算式を色々と書いてますが、これは丸暗記でOKだと思います。ページからみて画像の位置(offsetTop/offsetLeft)、クリックイベントからみてクリック位置(clientX/clientY)をそれぞれ取得し、減算処理を行ってハートを出す位置を算出しています。この計算式を覚えていれば、他のアプリでも応用が効くと思います。

例えば、こんな感じで外だしすれば、他のアプリでも使いまわせますね。

計算結果は、「position: absolute」の位置として「top/left」に追加しています。

この処理は、クリックイベントから呼び出します。

ハートが現れたらダブルクリックイベント完了のため、「clickTime = 0」にて、初期化をしています。

いいね数をカウント

次は、いいね数をカウントする処理を実装します。

createHeart関数の最後に、timesClicked変数に格納した数値を挿入する処理を入れました。これでダブルクリックした時に、いいね数がカウントされるようになります。

ハート要素のクリーンアップ

最後にハート要素をクリーンアップをして、終わりにしましょう。

ハートを作り続けると、ハート要素が以下のようになります。

このハート要素はいらないので、5秒後に削除する処理をcreateHeart関数に入れましょう。

setTimeoutは、指定した関数を指定したミリ秒後に実行してくれる便利な関数です。今回は、5000ミリ秒(5秒)を指定して、ハートを消しています。

作成したハートもremoveメソッドを使えば消せるという点は、勉強になりますね。

これで、完成です。

おわりに

いいね機能をいつか実装してみたいと思っていました!

今回の講義は、その意味で素晴らしいですね^^

JavaScriptもそうですが、CSSのアニメーションの組み合わせ方とかも非常に勉強になります!

それでは、また!

JavaScriptまとめ

JavaScript ソースコード

おすすめ書籍


コメントを残す