はじめに
今回は、スマホの操作でよく使う「 スワイプ操作 」を行うための「 Hammer.js 」というライブラリの導入についてまとめていこうと思います。
1. Hammer.js の導入
yarnを使って導入します。以下のコマンドを実行して下さい。
yarn add hammerjs
package.jsonファイルに以下のコードが追加されるか確認
package.json
"hammerjs": "^2.0.8",
【 補足 】
yarnとは
2. application.js にコードを追加
yarnでインストールしたHammer.jsのパッケージを利用できるようにimportします。
app/javascript/packs/application.jsに以下のコードを記述します。
application.js
import 'hammerjs';
3. スワイプ機能のJSファイルを作成
次に、スワイプ機能のJSファイルを作成します。今回は「src」ディレクトリを作成し、その配下に「swipe.js」という名前のファイルを作成します。このファイルにスワイプ機能に必要な記述します。（その記述は別でまとめます。）
以下のコマンドを実行してください。
touch app/javascript/src/swipe.js
4. swipe.js の読み込み
次にswipe.jsファイルを読み込むコードを追加します。
app/javascript/packs/application.jsに以下のコードを追加してください。
application.js
require("src/swipe")