ライターは「こたつ記事」と「取材記事」どちらに特化すべき？
- “文章下手”でも稼げるライターになる方法
- Webライター
- 連載
JavaScriptを使ってサイトにアニメーションを導入してみたは良いものの、「アニメーションが思い通りに動いてくれない……」なんてことがあると思います。
とくに訪れたユーザーの動きに合わせてアニメーションを連動させたいときや、サービス内のウインドウの表示・非表示をユーザー行動に一任したい時など。アニメーションの発生タイミングをフレキシブルに設定したいときもあるでしょう。
そこで今回は、導入したアニメーションの発生タイミングを操作できる「addEventListener」の使い方についてご紹介します。アニメーションを自由に操作したい方は、ぜひ本記事を読みながら設定をお試しください。
目次
アニメーションの発生タイミングを設定できる「addEventListener」
プログラミング言語というのは、基本的に書いたコードの順番通りにアニメーションが開始されます。そのため、ただアニメーションの動きを指示するコードを書いただけでは、意図しない動作を発生させてしまう場合があります。
それこそ、最悪アニメーションとして動かしたい部分が裏でぶつかり合い、アニメーション自体が動作しなくなってしまうことも。
そこで、アニメーションが動く順番やアニメーションを動かすタイミングを設定するのに活躍するのが「addEventListener」というメソッドです。
「addEventListener」を設定することで、
- A：クリックやページ読み込みの終わりに
という動作をしたら、
- B：数字がリセット/カウントされる、アニメーションが動く
という状態に変化させるという、トリガーアクションのコマンドを付与できます。アニメーションの動きに規則性をもたせることが可能なのです。
文字数の自動カウントやWebページ内のスクロールによるアニメーションなど、特定のアクションに紐づけて動作を管理・操作したいときに利用します。
「addEventListener」の設定方法と書き方
設定方法は多岐に渡りますが、一般的な書き方としては無名関数を使った方法があります。（※無名関数は、名前のない関数のことです）
ちなみにaddEventListenerの設定で使うのは、おもにHTMLとJavaScriptのファイル2種類。
HTMLでイベントを設定したいもの（ボタン）を用意し、JavaScriptでアニメーションの発動条件と実行結果を設定します。
✅index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>これはテストだよ</title>
</head>
<body>
<button id="C">ログを表示</button>
<script src="script.js"><script>
</body>
</html>
まずはイベントを紐付けるものをHTMLで用意します。今回は簡単なボタンを使ってみましょう。HTMLはこれで完成です。
✅script.js
(function() {
'use strict';
var text = document.getElementById('C');
text.addEventListener('A(実行結果の発動条件・動作)', function() {
B（実行結果）
})
})();
次にJavaScriptでは、アニメーションの発動条件と実行結果を設定します。
- A：アニメーションが発動するタイミング（Aについては後述します）
- B：Aの動作が実行される変化
- C：動作発動に必要となるフックのid（名称は自由）
を、それぞれ記述しましょう。
本記事では、クリックするとデベロッパーツール上で「これはテストです」という一文を表示してみたいと思います。
- A：click
- B：console.log(‘これはテストです’);
- C：textlog
をそれぞれ代入し保存。これで設定は完了です。
まとめると以下の通り。
✅index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>これはテストだよ</title>
</head>
<body>
<button id="textlog">ログを表示</button>
<script src="script.js"><script>
</body>
</html>
✅script.js
(function() {
'use strict';
var text = document.getElementById('textlog');
text.addEventListener('click', function() {
console.log('これはテストです');
})
})();
実際に動かしてみるとこの通り。ボタンを押すことで、文字がきちんとデベロッパーツール画面上に出力されました。
トリガーコマンドに設定できる「addEventListener」のイベントの種類
クリックを動作のトリガーとしたもの以外にも、イベント（タイミング）の種類は多岐にわたります。
「Aという動作をしたら、B（数字がリセット/カウントされる・アニメーションが動く）される」の、Aに該当する部分が以下のイベントになります。
| イベントの種類（A） | 効果・内容 |
| mousedown | マウスポインタを押しているときにBされる |
| mousemove | マウスポインタを動かすときにBされる |
| mouseup | マウスポインタを離したときにBされる |
| keyup | キーボードのキーから離したときにBされる |
| keydown | キーボードのキーが押されたときにBされる |
| load | Webページの読み込みが完了したときにBされる |
※以下の構文のAに該当する箇所に上記のイベントを記述することで、それぞれ動作の違いを楽しむことができます。気になった方は、ぜひご自身のエディタで検証してみてください。
✅script.js
(function() {
'use strict';
var text = document.getElementById('textlog');
text.addEventListener('A', function() {
console.log('これはテストです');
})
})();
ちなみにエディタに関しては、過去にBracketsというエディタについて記事で取り上げていますので、エディタをまだ使ったことがない方は合わせて以下の記事も参考にしてみてください。
コーディング速度を爆速効率化！「Brackets（ブラケッツ）」の拡張機能5選
Workship MAGAZINE
おわりに
今回は、JavaScriptアニメーションの発生タイミングを指定するaddEventListenerの使い方について解説しました。
addEventListenerを使用することで、アニメーション駆動に統率感が生まれ、キレイな動きを実現できます。また使い方次第では、ツールやサービス開発の際にも役立ちます。
JavaScriptを学んでいる方は、ぜひaddEventListenerを使ったイベント処理もマスターしていきましょう。
人気のフリーランス・副業求人
IoTの開発プロジェクト！子どもが楽しくハミガキできるゲームコンテンツを開発するUnityエンジニア募集！
- #スタートアップ
職種：iOS/Androidアプリエンジニア
時給：2,500円 〜
働き方：どちらでも可
エリア：東京都
IoTの開発プロジェクト！ヘルスケア・医療データの処理、分析、解析、データマイニングを得意とするインフラエンジニア募集！
- #スタートアップ
職種：バックエンドエンジニア
時給：2,500円 〜
働き方：どちらでも可
エリア：東京都
Web制作をリードするフロントエンド構築、WordPress実装が可能なエンジニア募集！
職種：フロントエンドエンジニア
時給：2,500円 〜
働き方：リモート希望
エリア：東京都
サイト運営が趣味なWeb制作系ライターとして活動中。最近はライター業と並行してサイト運営・時報の拡張機能の開発をやっています。
