WebCanta

初心者のための徹底ガイド-Web制作

会員ログイン
DOM・イベント

【クリックイベント】Javascriptでテキストの変更

【クリックイベント】Javascriptでテキストの変更のアイキャッチ画像
はじめに
概要
このテキストは、ユーザーがクリックした際にテキストが変わるWebデザインの実装方法について説明しています。HTML, CSS, JavaScriptを用いて、タブをクリックすると関連するコンテンツが表示される仕組みを作る方法を示しています。また、WordPressでの応用方法や、具体的なコードの例が記載されており、WordPressでショートコードを使った実装方法も紹介していきます。
※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。
疑問を持つ読者のイラスト読者

クリックイベントJavascriptでテキストの変更は、最初にどこを理解するとよいですか？

著者・木村のプロフィール写真木村

対象要素を取得する処理、動作を始める条件、見た目を変える処理の三つに分けると、コードの流れを追いやすくなります。

話を聞く読者のイラスト読者

実際に試すときは、手順だけでなく確認方法も知っておいた方がよいでしょうか？

著者・木村のプロフィール写真木村

はい。この記事では、作業の目的から実装後の確認までを順番に整理します。自分の環境と照らし合わせながら読み進めてください。

実装のデザイン

実装のデザインでは、【クリックイベント】 Javascriptでテキストの変更を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。

  • タイトル①
  • タイトル②
  • タイトル③
タイトル①テキスト
タイトル②テキスト
タイトル③テキスト
タブをクリックすると、それに関連するコンテンツに切り替わります。上記のようなデザインを実装していきます。
HTML 
<section class="test">
  <div class="test__inner wrap flex-column">
    <div class="test__select">
      <ul class="flex-row">
        <li class="active">タイトル①</li>
        <li>タイトル②</li>
        <li>タイトル③</li>
      </ul>
      <div class="test__txt">
        <p>タイトル①テキスト</p>
      </div>
      <div class="test__txt d-none">
        <p>タイトル②テキスト</p>
      </div>
      <div class="test__txt d-none">
        <p>タイトル③テキスト</p>
      </div>
    </div>
  </div>
</section>
CSS 
.d-none {
  display: none;
}

.flex-row {
  display: flex;
  align-items: center;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.test ul {
  color: #192653;
  line-height: 1.2;
  text-align: center;
  width: 100%;
  justify-content: space-between;
}

@media screen and (min-width: 1024px) {
  .test ul {
    font-size: 30px;
  }
}

.test li {
  background-color: #FDE948;
  border-radius: 20px 20px 0 0;
  display: flex;
  width: 30%;
  height: 50px;
  align-items: center;
  justify-content: center;
}

@media screen and (min-width: 1024px) {
  .test li {
    height: 90px;
  }
}

.test li.active {
  color: #FFFFFF;
  background-color: #192653;
}

.test__select {
  margin-top: 27px;
}

@media screen and (min-width: 1024px) {
  .test__select {
    margin-top: 40px;
  }
}

.test__txt {
  padding: 20px;
  border: #192653 solid 1px;
  border-radius: 0 0 20px 20px;
  height: 458px;
}

@media screen and (min-width: 1024px) {
  .test__txt {
    border: #192653 solid 3px;
    font-size: 20px;
  }
}
実装のポイントは .d-none クラスの使用です。タイトル①を除く他のボックスにこのクラスを適用することで、それらを非表示にすることができます。そして、Javascriptを使用して、クリックした際に.activeクラスを付与しこれらを表示させるようにします。デザインを実装する際は、全体を通して記述するのではなく、ボタンとテキストの部分を別々にコード化することで、より簡単に記述することが可能です。
Javascript 
class Onclick {
  constructor() {
    this._click();
  }

  _click() {
    // すべてのタブとコンテンツを取得し、変数に格納
    var testTabs = document.querySelectorAll(".test__select ul.flex-row li");
    var testContents = document.querySelectorAll(".test__txt");


    testTabs.forEach(function (tab, index) {
      tab.addEventListener("click", function () {
        // すべてのタブから "active" クラスを削除
        testTabs.forEach(function (tab) {
          tab.classList.remove("active");
        });
        // クリックされたタブに "active" クラスを追加
        this.classList.add("active");
        // すべてのコンテンツを非表示にする
        testContents.forEach(function (content) {
          content.classList.add("d-none");
        });
        // クリックされたタブに対応するコンテンツを表示する
        testContents[index].classList.remove("d-none");
      });
    });
  }
}
new Onclick();
上記で説明した内容をJavascriptで記述すると、このようになります。`.querySelectorAll`を使用してすべてのタブとコンテンツを取得し、`forEach`メソッドを利用して実装していることから、可読性が良く効率的なコードといえます。おすすめの方法としてはChatGTPを活用してコードを生成することです。

実装のデザインで押さえたいポイント

実装のデザインは、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。

実装のデザインの確認方法

ブラウザーのコンソールにエラーがないかを確認し、クリックやスクロールを繰り返してもイベントが重複しないかを試します。スマートフォン幅とキーボード操作も確認してください。

応用編

応用編では、【クリックイベント】 Javascriptでテキストの変更を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。

ここからはWordPress開発において、先述したコードをブロックエディタと連動させてコンテンツ部分をカスタム投稿タイプで編集する方法について解説します。カスタムHTML内でも使用できるようにショートコードに組み込んでいます。オリジナルテーマ開発を手掛けている方の参考になれば幸いです。
PHP 
function my_custom_shortcode()
{
  ob_start();

  $args = array(
    'post_type' => 'test',
    'order' => 'ASC'
  );
  $my_query = new WP_Query($args);

  $post_counter = 0; // カウンター変数を初期化

  while ($my_query->have_posts()) : $my_query->the_post();
    $post_counter++; // 各投稿でカウンターをインクリメント

    // 最初の投稿以外に 'd-none' クラスを追加
    $class = $post_counter > 1 ? 'test__txt d-none' : 'test__txt';

    echo '<div class="' . $class . '">';
    the_content();
    echo '</div>';
  endwhile;

  wp_reset_postdata();

  return ob_get_clean();
}
add_shortcode('my_test_shortcode', 'my_custom_shortcode');
これは三項演算子（条件演算子）を使用して書かれています。三項演算子は一般的に 条件 ? 真の場合の値 : 偽の場合の値 の形で記述されます。このコードでは、$post_counter > 1 が条件であり、この条件が真（true）ならば ‘test__txt d-none’ を、偽（false）ならば ‘test__txt’ を $class 変数に代入します。 $post_counterという変数の値が1より大きいかどうかをチェックしています。もし1より大きければ、$class変数に’test__txt d-none’という文字列を代入します。そうでなければ、’test__txt’という文字列を代入します。

応用編で押さえたいポイント

応用編は、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。

応用編の確認方法

ブラウザーのコンソールにエラーがないかを確認し、クリックやスクロールを繰り返してもイベントが重複しないかを試します。スマートフォン幅とキーボード操作も確認してください。

まとめ

  • デザインを実装する際には、タブとコンテンツ部分を分けて考えると、作業がしやすい
  • コンテンツを表示させるクラスと非表示するクラスをそれぞれ準備する
  • 上記をJavascriptで付与し、または削除する
  • WordPressのショートコードに組み込むことも可能である
  • CSSで通常のデザインと、それぞれのクラスが付与した際のデザインを記述しておく
  • コードの生成にはChatGTPが便利である

関連する記事

DOM・イベント

Javascriptでホバーアニメーションの実装

Javascriptで要素をホバーした際にイベントを発火させる実装をしていきます。CSSでも可能ですが、Javascriptのイベントのほうがより柔軟に対応が可能です。今回はshinyクラスを予め設定し、イベントの発火と共にクラスを付与して、その要素を光らせるアニメーションを実装していきます。

MEMBER COMMENTS

コメント（0件）

会員ログイン後にコメントできます

記事への質問や感想をコメントで共有できます。無料会員登録後もこの記事へ戻れます。

会員ログイン 無料会員登録