今さら聞けない! ビギナーのためのJavaScript講座(1) タブ切り替えで、JavaScriptの基本を学ぶ(1) クリックイベントを書いてみよう

デザイナーと名が付く職種にはさまざまなものがありますが、この数年で劇的に市場のニーズが高まったのが「Webデザイナー」でしょう。

ネットワークの通信速度が一昔前に比べて格段に速くなり、スマートフォンが驚く速さで普及したことで、ユーザーがWebに接する時間は大幅に伸びました。その結果、魅力的なWebページを"創る"人材への需要がとみに高まっています。

魅力的なWebページを作るうえで最も必要とされるのは、ユーザにとって使いやすく、情報が得やすいデザインを考えられるスキルです。現在のWebデザイナーの中には、DTPなどの世界で経験を積んだ後に、HTML/CSSという慣れないコーディング技術をどうにか学んで転身した方が多く、紙媒体で伝える手法と、ブラウザで伝える手法の違いを思い知らされた方は少なくないのではないはずです。

そのような方々に対して、次なる障壁として立ちはだかるのがJavaScriptでしょう。Webという技術の特性を最大限に活かした魅力的なページを創るには、インタラクティブ性をもたらすJavaScriptは不可欠です。しかし、HTML/CSSのようなマークアップ言語とは異なり、プログラミング言語であるJavaScriptは、慣れるまである程度の経験が必要です。勉強がてら稼働中のWebサイトのコードをご覧になって、拒絶感を覚えた方は決して少なくないでしょう。

そこで、本連載では、HTML/CSSをマスターしているものの、JavaScriptは手つかずというWebデザイナーを対象に、JavaScriptのコーディングについて解説していきたいと思います。極力簡単かつ実践的なサンプルを提示するよう心がけ、最初に画面を掲載して制作イメージを抱いていただくなど、デザイナーの方々を意識した構成で解説していきますので、一般の解説書で挫折した方も少しだけ辛抱してお付き合いいただけると幸いです。

それでは、初回の解説に入りましょう。今回の学習サンプルコードは「ex01.zip」となります。ダウンロードしてコードをご覧になりながら学習してください。

タブ切り替えの仕組みを理解する

最近、スマートフォンのような小さな画面では、多くの記事を折りたたんで読むことが多くあります。ユーザが特定のボタンをタップしたら、そのタップしたボタンにひもづく記事が展開されてユーザが読める状態になるというUIですね。今回はそのようなUIを作ってみましょう。

実のところ、このようなUIは各種のJavaScriptライブラリを使うことで簡単に実装できるケースもあります。しかし、今回はJavaScriptの基本を学ぶことが目的ですので、jQuery以外のライブラリは使わずになるべく自力でコードを書くことを目指します。まずはごく簡単なサンプルで学習していきましょう。

こんなタブインタフェースをつくります。

3つのタブがあり、そのタブが押されたときにひもづく内容を表示させる

実装方法はいくつかありますが、今回は以下のような流れでこのタブ切り替えを実現しましょう。

【全体のしくみ】

タブはaタグでマークアップする
aタグのhref属性に「#tab_1」～「#tab_3」としておく
表示を切り替えたい内容はdivタグにid名を「div#tab_1」～「div#tab_3」とする
aタグが押されたら、href属性と同じid名のdiv要素に「show」というクラス名をつける
CSSで「show」クラスが付けられた要素はdisplay: blockとし、「show」クラスがないとdisplay: noneにする

これだけでタブ切り替えが実現できます。

JavaScriptが活躍するのは、4から5にかけてです。aタグが押された時から、それにひもづくdiv要素に「show」クラスが付けられるまでの間にJavaScriptの処理を挿入します。

【JavaScriptの処理のしくみ】

aタグがクリックされたら…
aタグなのでURLが切り替わるが、それを強制的に停止させる
押されたaタグのhref属性の値を抜き取る(つまり「#tab_1」～「#tab_3」)
すべてのdiv要素から「show」クラスを削除する
そのid名を持つdivタグのid名を探して「show」クラスをつける

これでaタグがクリックされたらそれに見合ったdivタグに「show」クラスが付きます。その結果、display: blockが適用されるというわけです。

HTMLコーディング

仕組みが分かったところでHTMLを書いてみましょう、

今回は以下のようなシンプルなものにします。なお、上記のようなJavaScriptを実装するためには、HTMLを正確に書く必要があります。

index.html

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>タブ切り替えUI</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
 </head>

 <body>

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

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

  <div id="tabs">

   <div id="tab_1" class="archives show">   <!--   showクラスがここだけ付いていることに注目  -->
    <h2>社会に関する記事</h2>
    <ul>
     <li><a href="#">社会の記事1</a></li>
     <li><a href="#">社会の記事2</a></li>
     <li><a href="#">社会の記事3</a></li>
     <li><a href="#">社会の記事4</a></li>
     <li><a href="#">社会の記事5</a></li>
    </ul>
   </div><!-- /.tab_1 -->

   <div id="tab_2" class="archives">
    <h2>経済に関する記事</h2>
    <ul>
     <li><a href="#">経済の記事1</a></li>
     <li><a href="#">経済の記事2</a></li>
     <li><a href="#">経済の記事3</a></li>
     <li><a href="#">経済の記事4</a></li>
     <li><a href="#">経済の記事5</a></li>
    </ul>
   </div><!-- /.tab_2 -->

   <div id="tab_3" class="archives">
    <h2>スポーツに関する記事</h2>
    <ul>
     <li><a href="#">スポーツの記事1</a></li>
     <li><a href="#">スポーツの記事2</a></li>
     <li><a href="#">スポーツの記事3</a></li>
     <li><a href="#">スポーツの記事4</a></li>
     <li><a href="#">スポーツの記事5</a></li>
    </ul>
   </div><!-- /.tab_3 -->

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

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

  <!-- JavaScriptはbody終了タグの直上に配置します -->
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="js/tabnav_ex01.js"></script>
 </body>
</html>

このページでは、「社会、経済、スポーツ」と3つのカテゴリをそれぞれタブにしてコンテンツを切り替えるようにします。

そしてCSSはhead要素内、JavaScriptの読み込みはbodyの終了タグ直上に書くことにします。

これで準備完了です。

なお、このページが表示されている時点ですべての記事内容がdisplay: noneになっているのはおかしいですから、「社会」の記事だけshowクラスを付けておき、表示されている状態にしておきます。

また、先ほどのHTMLのbodyの上にと記述しました。したがって、サンプルでは、jsフォルダを同じ階層内につくり、その中にtabnav_ex01.jsというファイルを作っています。

クリック(タップ)イベントを書いてみよう

インタラクティブの基本はクリック、ということで、早速プログラムで「クリックされたら…どうする」という処理を書いていきましょう。

jQueryで書くクリック(タップ)に対する処理は、以下のように書きます。

tabnav_ex01.js

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


function tabClicked (e) {
     //ここにクリックされたときの処理を書きます
}

".tab_nav a"は、CSSのセレクタと同じようにaタグを対象としています。HTMLにはこのaタグが3つあるので、プログラム上3つのaタグに対し、「処理を予約」したと思ってください。

一度こう書くと、aタグに対して永続的に処理が予約されている状態になり、プログラムが働くわけです。つまり、これで「aタグが押されたら…」が命令できたわけです。

上記のプログラムでは、クリックされたときの処理を実装するためにjQueryのclick()という命令を使っています。click()のカッコの中には「クリックされたときの処理のかたまり」を用意します。その名前を私は「tabClicked」と名付けました。

ということで……

「".tab_nav a"のどれかがクリックされたら、tabClickedという命令のかたまりを実行しなさい」

これが今回の指令です。

tabClickedの処理内容はfunctionから始まる部分に書きます。functionでくくられているプログラム部分をここでは「関数」と呼ぶことにします。つまりタブがクリックされたらtabClicked関数が実行される、ということになります。

ここで気になるのは、function tabClicked (e) の(e)ですが、このeにはクリックされた処理に関する情報が色々と詰まっています。

例えば、(スマホでは関係ありませんが)altキーやshiftキーを押しながらのクリックの判定だって行えます。

以下は、altキーを判定するサンプルコードです。eの後に「altKey」をドットでつなげて記述している点に注目してください。

tabnav_ex01.js

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


function tabClicked (e) {
    //ここにクリックされたときの処理を書きます
    alert(e.altKey);
}

ブラウザでタブをクリックすると下図のようになります。

そのままクリックした場合「false」となり、altキーを押しながらクリックすると「true」が表示される

誌面上のスペースの都合から今回はここまで。次回は本格的にタブ切替処理を実装していきます。

サンプルプログラム : ex01.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デザイナーに「便利で使いやすい」と好評を博している。