【Javascript】タブメニューを作ろう

ドットインストール様の講座にて、タブメニューの作成を学んできました。私の様な未熟者には簡単そうに思えるちょっとした機能ですら難しいですね(-_-;)
今回はタブメニューの作成方法一例のメモと、その要所についてメモしていきたいと思いますφ(・＿・”)ﾒﾓﾒﾓ

タブメニューの完成形

See the Pen
VwezmEe by egg (@egg0522sei)
on CodePen.

完成形はこちらになります。各メニューをクリックすることで、対応した文章が表示されます。それではHTML、CSS、Javascript別に分けて、要所をメモしていきましょう。

 

HTML解説

大別すると二つのパーツからなっています。

まず一つ目がタグで囲まれた部分です。

メニューパーツ

このパーツはコンテンツを切り替える為のメニュー部分です。タブをクリックすると対応するコンテンツを表示させるために、タブ個別にidを設定し、更に今現在選択されているタブの背景色や文字色を変更する為に「active」クラスを設定します。この「active」クラスは後に解説するJavascriptの機能によって、クリックしたタブに付き、それ以外のタブにはつかないような設定になります。

二つ目のパーツはコンテンツ部分です。

コンテンツパーツ

選択されたメニューに対応するコンテンツ部分になります。まず各セクションごとを識別する為にidを設定してます。そして現在選択されているセクションのみを表示し、それ以外のものを非表示にするために「active」クラスが設定してあります。この「active」もJavascriptによって各セクションに付いたり消えたりします。

HTMLで重要なことは、各セクションをidで識別することと、現在選択されているものを識別するために「active」クラスを設定する事です。

CSS解説

デザイン的なところの解説はなるべく省いていきます。まず微妙につまずきそうなところを見ていきましょう。
「.menu li a:not(.active):hover」という少々ややこしい記述がありますね。
これは「”menu”タグ内の、”li”内の”active”と一緒にくっついていない”a”タグにマウスが乗ったら（ホバー）○○しなさい」という意味です。文章にしてみてもかなり難解ですね。「not」が否定的な意味を持つため、「.active」と一緒にくっついている「a」タグ”以外”のクラスに以下のプロパティを適用しなさいという意味になります。
今回の場合は「”active”がついていない”a”タグにマウスが乗った時、0.4秒かけて0.5半透明にしなさい」という命令になります( ﾟдﾟ )
続いてこちらのコンテンツ部分のCSSになります。「.content.active」、つまり「”content”クラスと”active”両方のクラスがついたものに〇〇しなさい」という命令文になります。ここで重要なのはズバリ！「display:block;」です。
つまり「”content”クラスと”active”両方のクラスがついたものは、表示しなさい」ということになります。これは後に出てくる、非表示設定との兼ね合いで重要になってくる設定です。
最後にこの部分です。これは「content」クラスは非表示にしなさいと言う命令です。上記の「.content.active」との兼ね合いにより、同じ「content」クラスでも「active」クラスがついた時に、表示・非表示を切り替えることができます。

Javascript解説

まずは定数へ必要な要素を代入するところからですね
「menuItemes」の定数には「document.querySelectorAll(‘.menu li a’);」、つまりは「”menu”クラスがついている”li”タグ内の”a”タグを全て代入しなさい」という意味ですね。「contents」にも同様に、「content」クラスがついた要素を全て代入しています。
さあ、いよいよ今回のメインとなるJavascript部分ですね。とりあえず処理の順序を要約すると、

という、私のような初心者には難解な手順を踏んでますね(-_-;
それでは一つずつ見ていきます。

「タブメニューがクリックされた時にイベントが発生」

この部分がイベント発生ポイントになります。この処理の中で、一連の処理が実行されることで、タブメニューとコンテンツ部分が切り替わります。

「リンクタグの処理を無効化する」

ここはまだ私も詳しくは理解できていないのですが、基本的に”a”タグにはリンク先が存在します。本来ならばクリックすることでリンク先に飛んでしまう処理をこの処理で無効化しているようですね。この構文に関してはまた今度詳しく調べてみます。

「”menu”内の全ての”a”タグから”active”クラスを削除する」

「active」クラスを付ける前に、全てのタブメニューから「active」クラスを取り除く処理になります。この処理がないと、他のタブに「active」クラスがついた時に他の要素にも「active」クラスがついたままになってしまいます。選択状態を一度全て解除するための処理とも捉えれるでしょう。

「クリックされた要素に”active”クラスをつける」

シンプルに「クリックされた要素に”active”クラスをつけない」という命令文になります。この処理によりクリックされたタブメニューの背景色が変化したりします。

「全ての”content”クラスがついている要素から”active”クラスを削除する」

さあ今度はコンテンツ部分の処理になります。定数「contents」には「content」クラスがついた要素が全て代入されています。この定数に「”active”クラスを取り除きなさい」という命令を「forEach」の繰り返し処理で実行することで、「content」クラスがついている要素から「active」クラスを一度なくします。これも選択状態を一度リセットする為の処理ですね。

「クリックされた要素の”data-id”から一致する”id”もつ要素に”active”クラスをつけなさい」

いよいよ最後の文章になります。「クリックされた要素の”data-id”に一致する”id”を持つ要素に”active”クラスをつけなさい」という命令になります。これによりコンテンツ文章が切り替わります。

 

ハァハァ…。クリックすると文章が変わる…。たったこれだけの処理なのにこれだけのロジックが組まれているんですね…。
理解するだけで大変なのにこれを応用して自分でプログラムが書けるようになるはいつのことなのかorz