JavaScriptでスワイプによる処理を実装する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでスワイプによる処理を実装する方法について現役エンジニアが解説しています。 スワイプとは、画面に触れた状態で指を滑らせる操作のことです。addEventListenerのtouchstartとtouchmove、touchendの組み合わせで実現します。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptでスワイプによる処理を実装する方法について解説します。

実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptでスワイプによる処理を実装する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

JavaScriptでスワイプによる処理を実装する方法 (Android、iOSなどの端末)

スワイプを実現するには、”addEventListener”の”touchstart”と”touchmove”、”touchend”の組み合わせで実現します。

“touchstart”でスワイプのマウス(タッチ)開始位置を取得し、”touchmove”で移動先のマウス(タッチ)位置を随時取得していきます。値は”touches[0].pageX;”で取得ができます。※”touches[0].pageY;”でY軸の値になります。

最後に”touchend”のタイミングで、開始位置と移動先の位置とを比較して、一定以上の動きがあった場合は、スワイプと判断させます。注意点としては、実際に動作確認する場合は、Chromeのデベロッパーツールなどで確認する必要があります。

実際に書いてみよう

<html>
 <head>
 <title>JavaScriptでスワイプする方法</title>
 <style type="text/css">
  html {
   font-size: 62.5%;
   text-align: center;
  }
  h1 {
   font-size: 4rem;
  }
  .swipearea {
   width: 600px;
   height: 300px;
   margin: 0 auto;
   line-height: 300px;
   font-size: 2rem;
   background-color: rgb(0,0,0);
   color: #fff;
   }
 </style>
 </head>
 <body>
   <h1>スワイプのテストです。</h1>
   <div class="swipearea">スワイプしてみて下さい</div>
   <hr>
   <scripttype="text/javascript">
    var rgb_color = 0;
    function setSwipe(elem) {
    var t = document.querySelector(elem);
    var s_X;
    var e_X;
    var dist = 30;
    t.addEventListener('touchstart', function(e) {
     e.preventDefault();
     s_X = e.touches[0].pageX;
    });
    t.addEventListener('touchmove', function(e) {
     e.preventDefault();
     e_X = e.changedTouches[0].pageX;
    });
    t.addEventListener('touchend', function(e) {
      if (s_X > e_X + dist) {
       t.textContent = '<<<?-左にスワイプされました';
       rgb_color = rgb_color + 16;
       t.style.backgroundColor = "rgb("+ rgb_color + ","+ rgb_color + "," + rgb_color + ")";
      } else if (s_X + dist < e_X) {
       t.textContent = '右にスワイプされました?->>>';
       rgb_color = rgb_color ? 16;
       t.style.backgroundColor = "rgb(" + rgb_color + "," + rgb_color + "," + rgb_color + ")";
      }
     });
    }
    setSwipe('.swipearea');
  </script>
 </body>
</html>

今回は、X軸のみの判断としていますが、Y軸の判断も追加すれば上下方向へのスワイプなども対応可能となります。

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

筆者プロフィール

小宮山晃史(こみやまこうじ)

現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。

iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。