今さら聞けない! ビギナーのためのJavaScript講座(3) JavaScript未経験者のためのやさしいインタフェース制作

みなさんこんにちは。

前回のタブ切り替えですが、理解できましたでしょうか？

ポイントとなる部分はJavaScriptによって適宜クラスを付け変えることで、あとはCSSよって表示・非表示を切り替えるということです。

すべてをJavaScriptで行うのではなく、上手にCSSとの連携をすることが大事です。インタラクティブなWebアプリのインタフェースづくりの第一歩になるでしょう。

さて、前回はタブを押して、表示・非表示は切り替えられましたがタブ自体は色も何も変化がないままでした。今回は前回のHTMLをうまく流用してできるだけ簡単にタブの色を切り替えてシンプルなタブインタフェースを完成させましょう。

ここでもし初めてこの連載記事をご覧の方は、「タブ切り替えで、JavaScriptの基本を学ぶ(1) クリックイベントを書いてみよう」、「タブ切り替えで、JavaScriptの基本を学ぶ(2) ページ遷移の停止、クラスの削除」をご覧下さい。

サンプルファイルはex02.zipです、ダウンロードして触ってみながら読んでください。

では、前回のHTMLをほとんどそのまま使いますが、変更点はタブになっているliタグです。

<!-- 以下、タブの部分 -->
<ul class="tab_nav">
     <li class="society"><a href="#tab_1">社会</a></li>
     <li class="economics"><a href="#tab_2">経済</a></li>
     <li class="sport"><a href="#tab_3">スポーツ</a></li>
</ul>
<!-- タブの部分ここまで -->

前回はliタグにclassがなかったんですが、今回はCSSで背景色をつけるのでクラス名を付けます。

そしてもう一つ、bodyタグ直下にdiv#wrapperという親のdivタグをつくって、その中にタブもコンテンツも全部入れましょう。全体の構成は以下のようになります。

<div id="wrapper">

     <!-- 以下、タブの部分 -->
     <ul class="tab_nav">
          ...
     </ul>
     <!-- タブの部分ここまで -->

     <!-- ここから内容表示 -->

     <div id="tabs">

          <div id="tab_1" class="archives">
               ...
          </div><!-- /.tab_1 -->

          <div id="tab_2" class="archives">
               ...
          </div><!-- /.tab_2 -->

          <div id="tab_3" class="archives">
               ...
          </div><!-- /.tab_3 -->

     </div><!-- /#tabs -->

     <!-- 内容表示ここまで -->

</div><!-- /#wrapper -->

さて、JavaScriptも前回とほとんど変わらないです、でもその前に前回と今回チャレンジしたい仕組みの違いについて理解しておいてください。

つまり全ての親のdiv#wrapperにクラス名を付け替えることで、その下にあるタブの背景色などをCSSで設定しておけばよいです。

上図の例では、タブの<li class="economics"><a href="#tab_2">経済</a></li>がクリックされたので、JavaScriptで親のdivタグに対して<div id="wrapper" class="economics">とクラスを付け替えるというわけですね。

ではJavaScriptを見てみましょう。

$(".tab_nav a").click( tabClicked );

function tabClicked (e) {
     e.preventDefault();
     var id_name = $(e.target).attr("href"); // タブの対象となるid名を抜き取る（例）#tab_1
     id_name = id_name.replace("#", ""); // #が気持ち悪いので#だけ削除する （例）#tab_1 →
tab_1
     $("#wrapper").removeClass().addClass(id_name); //
.archives全てのクラスからshowクラスを削除する

     //（結果）#wrapperに付けられたクラス名が、表示したい内容になる
}

タブがクリックされたら？というイベントの基礎は第一回目でお伝えした内容と変わりません。

そして、aタグがクリックされた瞬間にページ遷移をしようとする挙動を止めるためにe.preventDefault();しているところも、変数id_nameにa要素のhref属性の値を代入するところも前回までと全く一緒です。

では次なんですが、クラス名なのにこのままだと#がくっ付いてきてしまいます、ちょっと気持ち悪いですね。

なので、JavaScriptのreplace関数というものを使って、#tab_1 → tab_1などとしておきましょう。

ちなみにreplace関数は、元の文字列.replace("置換したい文字", "置換する文字")と書きます。

今回は.replace("#", "")と書いているので、"#"を""に置換、つまりこれは結果的に#を削除することになります。

それを「id_name = 」と再度、変数id_nameに入れているというわけです。

$("#wrapper").removeClass().addClass(id_name);とありますが、親のdiv#wrapperに一旦くっ付いているクラス名を削除しないといけません。そうしないと、<div id="wrapper" class="tab_1 tab_2 tab_3">なんて、全部くっ付いてしまします。

クリックされた度にクラス名は一旦削除することが大事です。

removeClass()はカッコの中を空白にすることで、付いているクラス名全てを一括で削除することができます。

jQueryはドットを繋ぎ合わせて、目的のタグに対して数珠繋ぎで命令を書けますのでremoveClass()したあとにaddClass()しています。

クラス名を一旦「消して付ける」という流れですね。

これでタブクリックごとに親のdiv#wrapperのクラス名が変わるはずです。

あとはCSSを追加するだけでタブの色が切り替わります。

タブのスタイルだけ見てみましょう、前回からの追加はたったのこれだけです。

.tab_1 .society a {
  background-color: #a4240e;
  color: #fff;
}
.tab_2 .economics a {
  background-color: #2b36a4;
  color: #fff;
}
.tab_3 .sport a {
  background-color: #06510e;
  color: #fff;
}

見ての通り、親のdiv#wrapperに付いたクラス名「.tab_1～.tab_3」という状況下で、タブの色を変えたらいいだけですね。これでタブは完成です。

次はコンテンツ内容です。

今各コンテンツ内容はdisplay: noneになっていますので、単に以下のようにするだけで表示されます。

.tab_1 #tab_1 {
  display: block;
}
.tab_2 #tab_2 {
  display: block;
}
.tab_3 #tab_3 {
  display: block;
}

結果、以下のようになります。

最後に、このページを最初に見た時にコンテンツ内容が全てdisplay: noneになってますので、div#wrapperに最初はclass="tab_1"を付けておきましょう。こうするとページを立ち上げた時に「社会」が出ている状態になります。

さあ、完成です!

さて、次回はもっと高度なことに挑戦! タブをクリックしたらコンテンツ内容が左右にスライドする、なんてことをやってみたいと思います。

ご期待ください!!

サンプルプログラム : ex02.zip

執筆者紹介

秋葉秀樹(AKIBA Hideki) - フリーランスデザイナー/株式会社インヴォーグ外部CTO兼テクニカルアドバイザー

DTP/グラフィックデザイン/Webフロントエンド全般/Flashゲーム開発/3DCGモデリング/Webディレクターを経て現職。主な作品としては、海遊館やサンシャイン水族館に公認されたAndroid/iPhoneアプリ「Ikesu」がある。

「Ikesu」は、NFC技術を水族館で利用した世界初の事例。魚をスマートフォン内に持ち帰られる体験を提供し、各IT系メディア、新聞、大阪市のWebサイトなどでも取り上げられている。

現在はデザイナー向けの講演活動に加え、Adobe認定校などにてトレーナー活動、またMdN Design Interactive、WebDesigning他、寄稿など執筆多数行っている。

HTML5を使ったデザイナー向けのWebアプリ「Grad3」を開発。多くのWebデザイナーに「便利で使いやすい」と好評を博している。