読み込み中...

JavaScriptリンク完全攻略！使い方・カスタマイズ方法10選

JavaScriptリンクの基本概念と使い方 JS
2023.04.23
この記事は約16分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、JavaScriptリンクの作り方・使い方やカスタマイズ方法、さらには応用例を習得できるようになります。

JavaScriptリンクを使いこなすことで、ウェブページのユーザビリティやデザイン性を向上させることができます。

●JavaScriptリンクの基本概念

JavaScriptリンクとは、ウェブページ上でリンクをクリックした際にJavaScriptのコードが実行される仕組みです。

これにより、通常のHTMLリンクでは実現できない高度な機能や効果を実装することができます。

○リンクの種類

JavaScriptリンクには、次のような種類があります。

  1. 通常のリンク: クリックで別ページへ遷移する
  2. ポップアップリンク: クリックで新しいウィンドウやタブが開く
  3. イベントリンク: クリックで特定のイベントが発生する（アラート表示、ページ内要素の操作など）

●JavaScriptリンクの作り方

JavaScriptリンクを作成するには、まずHTMLでリンク要素（<a>タグ）を作成し、次にJavaScriptでクリックイベントを設定します。

○サンプルコード1：簡単なリンクの作成

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>簡単なリンクの作成</title>
</head>
<body>
  <!-- リンク要素の作成 -->
  <a href="#" id="simple-link">クリックしてGoogleへ</a>

  <script>
    // リンク要素を取得
    const link = document.getElementById('simple-link');

    // クリックイベントを設定
    link.onclick = function() {
      window.location.href = 'https://www.google.com';
      return false;
    }
  </script>
</body>
</html>

上記のサンプルコードでは、リンク要素（<a>タグ）に対して、クリックイベントを設定しています。

クリックするとGoogleのページに遷移します。

○サンプルコード2：新しいタブで開くリンクの作成

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>新しいタブで開くリンクの作成</title>
</head>
<body>
  <!-- リンク要素の作成 -->
  <a href="#" id="newtab-link">クリックしてGoogleを新しいタブで開く</a>

  <script>
    // リンク要素を取得
    const link = document.getElementById('newtab-link');

    // クリックイベントを設定
    link.onclick = function() {
      window.open('https://www.google.com', '_blank');
      return false;
    }
  </script>
</body>
</html>

このサンプルコードでは、リンク要素に対してクリックイベントを設定し、新しいタブでGoogleのページが開くようにしています。

●JavaScriptリンクの使い方

JavaScriptリンクは、クリックによるページ遷移だけでなく、さまざまな使い方が可能です。

ここから、具体的な例を紹介していきます。

○サンプルコード3：リンクをクリックしてアラートを表示

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>リンクをクリックしてアラートを表示</title>
</head>
<body>
  <!-- リンク要素の作成 -->
  <a href="#" id="alert-link">クリックしてアラートを表示</a>

  <script>
    // リンク要素を取得
    const link = document.getElementById('alert-link');

    // クリックイベントを設定
    link.onclick = function() {
      alert('こんにちは！');
      return false;
    }
  </script>
</body>
</html>

上記のサンプルコードでは、リンクをクリックするとアラートダイアログが表示されます。

○サンプルコード4：リンクをクリックしてページ遷移を制御

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>リンクをクリックしてページ遷移を制御</title>
</head>
<body>
  <!-- リンク要素の作成 -->
  <a href="#" id="control-link">クリックしてページ遷移を制御</a>

  <script>
    // リンク要素を取得
    const link = document.getElementById('control-link');

    // クリックイベントを設定
    link.onclick = function() {
      if (confirm('Googleへ移動しますか？')) {
        window.location.href = 'https://www.google.com';
      } else {
        alert('キャンセルしました');
      }
      return false;
    }
  </script>
</body>
</html>

上記のサンプルコードでは、リンクをクリックすると確認ダイアログが表示され、ユーザーが「OK」を選択した場合のみGoogleのページに遷移します。

●JavaScriptリンクの注意点と対処法

JavaScriptリンクを使用する際には、次の注意点があります。

○注意点1：リンク先のページが存在しない場合

リンク先のURLが誤っていたり、ページが削除されている場合、ユーザーはエラーページに遷移してしまいます。

これを防ぐためには、リンク先を定期的に確認しましょう。

○注意点2：JavaScriptが無効化されている場合

一部のユーザーはセキュリティ上の理由などでJavaScriptを無効化していることがあります。

その場合、JavaScriptリンクは機能しません。

○対処法1：リンク先の確認

リンク先のページが存在し、適切に遷移できることを定期的に確認しましょう。

○対処法2：noscriptタグの使用

JavaScriptが無効化されているユーザーに対して、代替コンテンツを提供するために<noscript>タグを利用できます。

例えば、JavaScriptが無効化されている場合にテキストメッセージを表示することができます。

<noscript>
  <p>このページはJavaScriptが有効であることを前提としています。JavaScriptを有効にしてご利用ください。</p>
</noscript>

●JavaScriptリンクのカスタマイズ方法

JavaScriptリンクの見た目や挙動は、CSSやイベントリスナを使ってカスタマイズできます。

○サンプルコード5：リンクのスタイルを変更

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>リンクのスタイルを変更</title>
  <style>
    /* リンクのスタイルを変更 */
    #custom-link {
      color: red;
      text-decoration: none;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <!-- リンク要素の作成 -->
  <a href="https://www.google.com" id="custom-link">カスタムスタイルのリンク</a>
</body>
</html>

上記のサンプルコードでは、CSSを使ってリンクの文字色を赤に変更し、下線を削除し、太字にしています。

○サンプルコード6：リンクにマウスオーバー効果を追加

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>リンクにマウスオーバー効果を追加</title>
  <style>
    /* リンクの基本スタイル */
    #hover-link {
      color: blue;
      text-decoration: none;
    }

    /* マウスオーバー時のスタイル */
    #hover-link:hover {
      color: red;
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <!-- リンク要素の作成 -->
  <a href="https://www.google.com" id="hover-link">マウスオーバー効果のあるリンク</a>
</body>
</html>

このサンプルコードでは、リンクにマウスカーソルを重ねると文字色が赤に変わり、下線が表示されるマウスオーバー効果を追加しています。

●JavaScriptリンクの応用例

下記の応用例では、実際のウェブサイトでよく使われる機能を紹介します。

この機能は、JavaScriptリンクを使って簡単に実装することができます。

○サンプルコード7：リンクで画像の切り替え

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>リンクで画像の切り替え</title>
  <script>
    function changeImage(imageUrl) {
      document.getElementById('image').src = imageUrl;
    }
  </script>
</head>
<body>
  <img src="image1.jpg" alt="画像" id="image">
  <br>
  <a href="javascript:void(0);" onclick="changeImage('image1.jpg')">画像1</a>
  <a href="javascript:void(0);" onclick="changeImage('image2.jpg')">画像2</a>
</body>
</html>

上記のサンプルコードでは、リンクをクリックすると、画像が切り替わる機能を実装しています。

○サンプルコード8：リンクでアコーディオンメニューの操作

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>リンクでアコーディオンメニューの操作</title>
  <style>
    .accordion-content {
      display: none;
    }
  </style>
  <script>
    function toggleAccordion(id) {
      var content = document.getElementById(id);
      content.style.display = content.style.display === 'block' ? 'none' : 'block';
    }
  </script>
</head>
<body>
  <a href="javascript:void(0);" onclick="toggleAccordion('content1')">メニュー1</a>
  <div id="content1" class="accordion-content">
    ここにメニュー1の内容が表示されます。
  </div>
  <a href="javascript:void(0);" onclick="toggleAccordion('content2')">メニュー2</a>
  <div id="content2" class="accordion-content">
    ここにメニュー2の内容が表示されます。
  </div>
</body>
</html>

上記のサンプルコードでは、リンクをクリックすると、アコーディオンメニューが開閉する機能を実装しています。

○サンプルコード9：リンクでモーダルウィンドウの表示・非表示

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>リンクでモーダルウィンドウの表示・非表示</title>
  <style>
    .modal {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: white;
      padding: 20px;
      border: 1px solid black;
      z-index: 10;
    }
    .overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 9;
    }
  </style>
  <script>
    function showModal() {
      document.getElementById('modal').style.display = 'block';
      document.getElementById('overlay').style.display = 'block';
    }
    function closeModal() {
      document.getElementById('modal').style.display = 'none';
      document.getElementById('overlay').style.display = 'none';
    }
  </script>
</head>
<body>
  <a href="javascript:void(0);" onclick="showModal()">モーダルを表示</a>
  <div id="modal" class="modal">
    <p>モーダルウィンドウの内容</p>
    <a href="javascript:void(0);" onclick="closeModal()">閉じる</a>
  </div>
  <div id="overlay" class="overlay" onclick="closeModal()"></div>
</body>
</html>

上記のサンプルコードでは、リンクをクリックすることでモーダルウィンドウが表示・非表示になる機能を実装しています。

○サンプルコード10：リンクでスムーズスクロールを実現

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>リンクでスムーズスクロールを実現</title>
  <style>
    /* ページ内アンカーをわかりやすくするためのスタイル */
    .anchor {
      display: inline-block;
      padding-top: 100px;
      margin-top: -100px;
    }
  </style>
  <script>
    // スムーズスクロールの関数
    function smoothScroll(targetId) {
      // 対象の要素を取得
      var target = document.getElementById(targetId);
      // スムーズスクロールを実行
      target.scrollIntoView({ behavior: 'smooth' });
    }
  </script>
</head>
<body>
  <!-- セクションへのリンク -->
  <a href="javascript:void(0);" onclick="smoothScroll('section1')">セクション1へスクロール</a>
  <a href="javascript:void(0);" onclick="smoothScroll('section2')">セクション2へスクロール</a>
  
  <!-- 各セクションの内容 -->
  <div id="section1" class="anchor" style="height: 500px; background-color: lightblue;">セクション1</div>
  <div id="section2" class="anchor" style="height: 500px; background-color: lightgreen;">セクション2</div>
</body>
</html>

このサンプルコードでは、リンクをクリックすることでページ内の特定のセクションへスムーズスクロールする機能を実現しています。

smoothScroll関数により、指定したIDの要素へスクロールする動作を行います。

まとめ

この記事では、JavaScriptを使ったリンクの作成方法をいくつかのサンプルコードとともに紹介しました。

リンクの基本的な使い方から応用例まで、幅広い応用が可能です。

また、注意点や対処法を押さえておくことで、より安全で使いやすいリンクを作成できます。

ぜひ参考にして、自分のサイトやプロジェクトに活用してみてください。