【JavaScript】スマホ上で実行！10選のサンプルコードと応用例を初心者向けに解説

はじめに
●JavaScriptの基本
- ○JavaScriptとは
- ○スマホでの実行環境
●JavaScriptの使い方
●JavaScript応用例
●JavaScript応用例
●注意点と対処法
まとめ

はじめに

この記事では、スマホを使ってJavaScriptを実行する方法を解説します。

JavaScriptの基本からスマートフォンでの具体的な実行方法まで、わかりやすく解説します。

●JavaScriptの基本

JavaScriptの基本を学ぶことは、スマホでのウェブ開発において非常に重要です。

この言語は、ウェブサイトやアプリケーションに動きや機能を加えるために使われます。

基本的な文法から始めて、徐々に複雑な機能を学ぶことで、スマホ上でのJavaScript実行能力を高めることができます。

○JavaScriptとは

JavaScriptは、ウェブページをより魅力的でユーザーフレンドリーにするために広く使用されているプログラミング言語です。

スマホやタブレットなど、さまざまなデバイスで利用されており、ウェブブラウジングの体験を向上させています。

○スマホでの実行環境

スマホ上でJavaScriptを効果的に実行するためには、適切な開発環境が必要です。

Visual Studio Codeなどのテキストエディタ、Google Chromeのような信頼性の高いブラウザ、そして最新のスマートフォン（iPhoneやAndroid端末など）が推奨されます。

これらのツールを使用することで、スマホ上でJavaScriptのコードを簡単に記述し、テストすることが可能になります。

●JavaScriptの使い方

JavaScriptはスマホで様々な機能を実現できる便利なツールです。

ここでは、具体的なサンプルコードを通じて、スマホでのJavaScriptの使い方を紹介します。

○サンプルコード1：アラート表示

スマートフォンでJavaScriptを使用してアラートを表示する基本的な方法です。

下記のサンプルコードをHTMLファイルに組み込んでください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>アラート表示</title>
</head>
<body>
  <button onclick="showAlert()">アラート表示</button>
  <script>
    function showAlert() {
      alert("こんにちは！");
    }
  </script>
</body>
</html>

このコードを使用すると、ボタンをクリックすることで「こんにちは！」というメッセージのアラートがスマホ画面に表示されます。

○サンプルコード2：ボタンクリックイベント

スマホ上でJavaScriptを使ってボタンクリックイベントを制御する方法です。

下記のコードをHTMLファイルに追加してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ボタンクリックイベント</title>
</head>
<body>
  <button id="myButton">クリックしてね！</button>
  <script>
    document.getElementById("myButton").addEventListener("click", function() {
      alert("ボタンがクリックされました！");
    });
  </script>
</body>
</html>

このコードは、ボタンをクリックすると「ボタンがクリックされました！」というアラートを表示します。

○サンプルコード3：画像切り替え

JavaScriptを使って、スマホ上で画像をクリックすることで切り替わる機能を実現する方法です。

下記のコードをHTMLファイルに追加してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>画像切り替え</title>
</head>
<body>
  <img id="myImage" src="image1.jpg" alt="画像1" onclick="switchImage()">
  <script>
    function switchImage() {
      var imgElement = document.getElementById("myImage");
      if (imgElement.src.match("image1.jpg")) {
        imgElement.src = "image2.jpg";
      } else {
        imgElement.src = "image1.jpg";
      }
    }
  </script>
</body>
</html>

クリックすると、「image1.jpg」と「image2.jpg」が交互に表示されます。

○サンプルコード4：アコーディオンメニュー

スマホサイトでよく見かけるアコーディオンメニューをJavaScriptで作成する方法です。

下記のコードをHTMLファイルに追加してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>アコーディオンメニュー</title>
  <style>
    .accordion {
      cursor: pointer;
    }
    .panel {
      display: none;
    }
  </style>
</head>
<body>
  <div class="accordion">メニュー1</div>
  <div class="panel">
    <p>メニュー1の内容</p>
  </div>
  <div class="accordion">メニュー2</div>
  <div class="panel">
    <p>メニュー2の内容</p>
  </div>
  <script>
    var acc = document.getElementsByClassName("accordion");
    for (var i = 0; i < acc.length; i++) {
      acc[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.display === "block") {
          panel.style.display = "none";
        } else {
          panel.style.display = "block";
        }
      });
    }
  </script>
</body>
</html>

メニュー項目をクリックすると、その内容が展開または折りたたまれるアコーディオン効果が実現できます。

●JavaScript応用例

JavaScriptをスマホで応用する際の実践的な例をいくつかご紹介します。

これらの例は、スマホでのJavaScriptの可能性を広げるものです。

○サンプルコード5：地図表示

Google Maps APIを活用して、スマホ上で地図を表示する方法を紹介します。

まず、Google Maps APIキーを取得し、下記のコードをHTMLファイルに追加してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>地図表示</title>
  <style>
    #map {
      height: 400px;
      width: 100%;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <script>
    function initMap() {
      var map = new google.maps.Map(document.getElementById("map"), {
        center: { lat: 35.681236, lng: 139.767125 },
        zoom: 8
      });
    }
  </script>
  <script async defer
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
  </script>
</body>
</html>

取得したAPIキーをYOUR_API_KEYの部分に置き換えることで、特定の位置を中心とした地図をスマホ上で表示できます。

○サンプルコード6：グラフ描画

Chart.jsを使って、スマホで見やすいグラフを描画する方法です。

下記のコードをHTMLファイルに追加してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>グラフ描画</title>
</head>
<body>
  <canvas id="myChart"></canvas>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script>
    var ctx = document.getElementById("myChart").getContext("2d");
    var myChart = new Chart(ctx, {
      type: "bar",
      data: {
        labels: ["赤", "青", "黄", "緑", "紫", "オレンジ"],
        datasets: [{
          label: "色のデータ",
          data: [12, 19, 3, 5, 2, 3],
          backgroundColor: [
            "rgba(255, 99, 132, 0.2)",
            "rgba(54, 162, 235, 0.2)",
            "rgba(255, 206, 86, 0.2)",
            "rgba(75, 192, 192, 0.2)",
            "rgba(153, 102, 255, 0.2)",
            "rgba(255, 159, 64, 0.2)"
          ],
          borderColor: [
            "rgba(255, 99, 132, 1)",
            "rgba(54, 162, 235, 1)",
            "rgba(255, 206, 86, 1)",
            "rgba(75, 192, 192, 1)",
            "rgba(153, 102, 255, 1)",
            "rgba(255, 159, 64, 1)"
          ],
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  </script>
</body>
</html>

このコードを使うと、カラフルな棒グラフをスマホ画面上で表示することができます。

○サンプルコード7：スライドショー

スマホ対応のスライドショーを作成するサンプルコードです。

下記のコードをHTMLファイルに追加してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>スライドショー</title>
  <style>
    .slideshow {
      display: none;
    }
    .active {
      display: block;
    }
  </style>
</head>
<body>
  <div class="slideshow active">
    <img src="image1.jpg" alt="画像1">
  </div>
  <div class="slideshow">
    <img src="image2.jpg" alt="画像2">
  </div>
  <div class="slideshow">
    <img src="image3.jpg" alt="画像3">
  </div>
  <script>
    var slides = document.getElementsByClassName("slideshow");
    var currentSlide = 0;
    setInterval(changeSlide, 3000);

    function changeSlide() {
      slides[currentSlide].classList.remove("active");
      currentSlide = (currentSlide + 1) % slides.length;
      slides[currentSlide].classList.add("active");
    }
  </script>
</body>
</html>

このコードを使用することで、自動で切り替わる画像スライドショーをスマホで楽しむことができます。

●JavaScript応用例

JavaScriptを使ったスマホ対応のウェブデザイン要素を実現するためのサンプルコードを紹介します。

これらはJavaScriptをスマホで実行する際の応用例として参考になるでしょう。

○サンプルコード8：ハンバーガーメニュー

モダンなウェブデザインにおいて一般的なハンバーガーメニューをJavaScriptで作成する方法です。

下記のコードをHTMLファイルに追加してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ハンバーガーメニュー</title>
  <style>
    .hamburger {
      display: inline-block;
      cursor: pointer;
    }
    .bar1, .bar2, .bar3 {
      width: 35px;
      height: 5px;
      background-color: #333;
      margin: 6px 0;
      transition: 0.4s;
    }
    .change .bar1 {
      -webkit-transform: rotate(-45deg) translate(-9px, 6px);
      transform: rotate(-45deg) translate(-9px, 6px);
    }
    .change .bar2 {opacity: 0;}
    .change .bar3 {
      -webkit-transform: rotate(45deg) translate(-8px, -8px);
      transform: rotate(45deg) translate(-8px, -8px);
    }
  </style>
</head>
<body>
  <div class="hamburger" onclick="menuClick(this)">
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
  </div>
  <script>
    function menuClick(x) {
      x.classList.toggle("change");
    }
  </script>
</body>
</html>

このコードにより、クリックで開閉するハンバーガーメニューのアニメーションが実装されます。

○サンプルコード9：簡易カレンダー

JavaScriptを使用してスマホで表示可能な簡易カレンダーを作成する方法です。

下記のコードをHTMLファイルに追加してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>簡易カレンダー</title>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
      text-align: center;
    }
    th, td {
      border: 1px solid #999;
      padding: 8px;
      font-size: 14px;
    }
    th {
      background-color: #f2f2f2;
    }
  </style>
</head>
<body>
  <table id="calendar"></table>
  <script>
    function createCalendar() {
      var today = new Date();
      var year = today.getFullYear();
      var month = today.getMonth();

      var calendar = document.getElementById("calendar");
      var firstDay = new Date(year, month, 1);
      var lastDay = new Date(year, month + 1, 0);
      var daysInMonth = lastDay.getDate();
      var startDayOfWeek = firstDay.getDay();

      var table = "<tr><th>日</th><th>月</th><th>火</th><th>水</th><th>木</th><th>金</th><th>土</th></tr><tr>";
      for (var i = 0; i < startDayOfWeek; i++) {
        table += "<td></td>";
      }

      for (var day = 1; day <= daysInMonth; day++) {
        table += "<td>" + day + "</td>";
        startDayOfWeek++;
        if (startDayOfWeek % 7 === 0 && day !== daysInMonth) {
          table += "</tr><tr>";
        }
      }

      while (startDayOfWeek % 7 !== 0) {
        table += "<td></td>";
        startDayOfWeek++;
      }
      table += "</tr>";
      calendar.innerHTML = table;
    }
    createCalendar();
  </script>
</body>
</html>

このコードにより、スマホで見やすい月間カレンダーが表示されます。

○サンプルコード10：文字数カウント

テキスト入力時の文字数をリアルタイムでカウントする機能をJavaScriptで実装する方法です。

下記のコードをHTMLファイルに追加してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>文字数カウント</title>
</head>
<body>
  <textarea id="text" oninput="countCharacters()"></textarea>
  <p id="counter">0 文字</p>
  <script>
    function countCharacters() {
      var text = document.getElementById("text").value;
      var counter = document.getElementById("counter");
      counter.textContent = text.length + " 文字";
    }
  </script>
</body>
</html>

このコードは、テキストエリアに入力された文字数をリアルタイムで表示します。

これらのサンプルコードは、スマホでのJavaScriptの実行と応用の幅広い可能性を示しています。

●注意点と対処法

JavaScriptはブラウザによって挙動が異なることがあります。対処法としては、主要ブラウザでの動作確認を行い、問題がある場合はブラウザ別の対応を検討してください。
スマホで実行する場合、画面サイズが小さいためレイアウトが崩れることがあります。対処法としては、CSSの@mediaを使用して、画面サイズに応じたスタイルを適用させることです。

具体的なカスタマイズ例としては、簡易カレンダーにイベント情報を表示させる、スライドショーに画像切り替えのアニメーションを追加するなどが挙げられます。