jQueryは使わない!ネイティブJavaScriptで実装してみた10選

サイ

よしだです。

最近夢占いに凝っています。夢占いとは見た夢によって自らの運気や精神状態、暗示を占うといったものです。
驚いたことに怖い夢や悪い夢は意外にもプラスな暗示を示していることが多いようです。ちなみに私が最近見た夢はトラの赤ちゃん×2と戯れる夢でした。

ところで、昨今JavaScript標準APIが充実してきたことやjQueryを不要とするJavaScriptフレームワークの登場により脱jQueryの兆候が見受けられます。
本記事ではJavaScriptの標準APIを使用してタブメニューや画像スライダー等Webサイトでよく実装されているものをサンプル付きで10種ご紹介します。

 

目次

 

※ES5で記述しております。

タブメニュー

任意のタブメニューをクリックすると、全てのタブメニュー・コンテンツを非アクティブにし、クリックされたタブメニューとタブメニューdata属性値と等しいid値を持つタブコンテンツをアクティブにします。

タブメニュー・コンテンツに対して、document.querySelectorAllで要素を取得しています。document.querySelectorAllで取得した要素は配列のようなオブジェクトを保持しているため、click等のイベントを要素に充てたい場合はforループ文を使って配列もどきのオブジェクトから値を取り出し、イベントを充てます。

 

 

アコーディオンパネル

クリッカブルな要素を取得し、クリックしたら同じ親要素を持つ隣接した次の要素が表示されます。
同じ親要素を持つ隣接した次の要素はelement.nextElementSiblingで取得できます。

 

要素の高さを取得するにはscrollHeightプロパティを使用します。scrollHeightプロパティはpaddingを含む表示されていない要素の高さを取得します。あとはif文で条件分岐を行います。

 

 

スムーズスクロール

「ページのトップに戻る」をクリックすると、ページの上端までアニメーションしながら移動します。
「ページのトップに戻る」リンクにはidを振ってdocument.getElementByIdで要素を取得します。

スクロール量の取得はFirefoxでも取得できるようにdocument.documentElement.scrollTopも記述します。

 

scrollTo(x, y)メソッドで指定したy座標(縦)位置にスクロールさせるのですが、取得したスクロール値を適当な数値で除算(割り算)した値をyにセットします。それをsetTimeoutメソッドでループさせることでアニメーションを実現しています。
たとえば1000pxスクロールした段階で、「ページのトップに戻る」をクリックすると5ミリ秒毎に1000→952.380→907.029→863.837と0に向かってスクロール量の値が小さくなり、ページの上端へと移動します。

 

 

画像ロールオーバー

マウスオーバー・マウスアウトをする度にimg要素のsrc属性値を取得し、拡張子を除いたその値の接尾辞を切り替え、別画像を表示させます。最近はあまり見かけないような気がします。

class値にrollover_imgを持つimg要素を取得し、切り替え前(_off)・後(_on)の接尾辞を変数に格納します。

 

値切り替えを操作するためにelement.getAttribute(‘src’)でimg要素のsrc属性を取得します。
要素へマウスオーバー・マウスアウトをする際、まずmatchメソッドで属性値の接尾辞を判定します。trueならばif内の処理を実行し、画像を切り替えます。画像の切り替えにはreplaceメソッドを使用します。

 

 

ハンバーガーメニュー

CSSであらかじめ特定クラスが追加された状態のスタイルを設定しておき、クリックした要素に特定クラスがあるか否かで処理を切り替えます。

アクティブ・非アクティブの切り替え判定にはelement.classListが便利です。こちらは要素のクラスのリスト(文字列)を返してくれ、以下のようなメソッドを使用することができます。

・contains - 要素に特定のクラスがあるかどうか調べる。jQueryだとhasClass
・add - クラスリストにクラスを追加する。jQueryだとaddClass
・remove - クラスリストの特定のクラスを削除する。jQueryだとremoveClass
・toggle - クラスリスト中の特定クラスの切り替える。jQueryだとtoggleClass

if文を削除し、hamItem[i].classList.toggle(‘is-active’);と記述しても機能します。こちらの方が短い記述で済みます。

 

 

モーダルコンテンツやオーバーレイはJavaScriptで追加し、フェードアニメーションはopacityの調整と時間差の要素削除で表現しています。

要素の生成をdocument.createElementで行い、setAttributeで属性や値を設定します。それからelement.append(childElement)で階層を整えます。
展開されたモーダルの背景オーバーレイをクリックした時にそれらは削除するためにはbind()メソッドでthisを制御しなければなりません。bind()メソッドで制御しなければ、setTimeoutメソッド内のthisはグローバルオブジェクトのwindowプロパティを示すため、要素削除ができません。

 

 

画像スライダー

左右のボタンクリックで画像がスライドします。
スライド要素、表示幅、ボタン、ナンバー、現在地は変数に格納します。

 

下記でスライド表示位置やスライドの初期表示を設定します。

 

slide関数の中身を見てみましょう。
現在のスライドの値と次のスライドの値を比較し、positionで調整します。

 

次のスライドの位置を現在のスライド位置の進行方向後ろに移動させ、setTimeout()メソッドを使って調整しています。

 

 

フェードイン・アウト

クリックしたボタンに応じてコンテンツがフェードイン・フェードアウトします。アニメーションはJavaScriptのスタイルで設定しています。

 

 

パララックスアニメーション

スクロール量がボールの位置に達するとボールが左から右に転がっていきます。

ボール要素の座標の取得方法ですが、element.getBoundingClientRect()で要素の絶対座標を取得し、スクロール量と要素の上端を足したものを最終的に設定しています。

 

ウィンドウの中央より少し上でアニメーションさせたかったので、ボール要素の座標位置を1.3で除算して調整しています。

 

 

ローディングアイコン

HTML5 APIのcanvasで実装しています。

以下コードではcanvas要素の取得、描画機能の有効化を行っています。

 

beginPath()でパスのリセットを行い、fillstyleで塗りつぶす色を指定、arc()で円を描画し、fill()で塗りつぶしています。小さな黒い円ができます。

 

以下は肝となるarc()メソッドの構文です。

・x,yは円の中心位置、ラジアンで表す
・radiusは円の半径
・startAngleは円弧を描き始める角度、ラジアンで表す
・endAngleは円弧を描き終える角度、ラジアンで表す
・anticlockwiseの引数はtrueまたはfalse。時計回りに描画したい場合はfalse、反時計回りに描画したい場合はtrue。

ラジアンとは角度の単位です。ラジアンは「Math.PI / 180 * 角度」で表すことができます。ラジアンについては下記を参照すると理解が深まります。

■arc(x, y, radius, startAngle, endAngle [, anticlockwise ] )-Canvasリファレンス
http://www.htmq.com/canvas/arc.shtml

 

x,y位置の指定はラジアンを使用し、それぞれMath.cos()とMath.sin()で指定することができます。変数posは中心位置からの距離を表しており、値が大きければ大きいほど円運動が大きくなります。
円弧の角度ですが、startAngleには0(度)を設定し、endAngleにはMath.PI * 2(360度)を設定しています。0度は3時の位置です。

続いてアニメーション部分ですが、角度を表す変数radianの値をsetTimeoutで増加させることでアニメーションさせています。また、透明度50%の白色でcanvasサイズ分を塗りつぶすことでうっすら軌跡を残しながらアニメーションするローディングアイコンができます。

 

 

おわりに

サンプル作成は以下を参考にしました。

You Don’t Need jQuery(日本語版)
https://github.com/oneuijs/You-Dont-Need-jQuery/blob/master/README-ja.md#%E3%82%BB%E3%83%AC%E3%82%AF%E3%82%BF

w3schools.com
https://www.w3schools.com/js/default.asp

 

ほぼjQueryでの実装で済ましていた身としては、今回の記事を通してかなり勉強になりました。スライダーはかなり力技でしたね。

JavaScriptの標準APIはかなり充実してきております。
現在、まだ草案段階のWeb Animations APIはCSS3のkeyframesアニメーションのように記述できるため、JavaScriptでのアニメーション表現の記述が比較的簡易になり、自由度も高くなりそうです。
将来、勧告されることになればjQueryやプラグインの類に取って代わるのではないかと考えています。

Web Animations APIに興味のある方は是非下記を参考にしてみてください。

■Web Animations APIの基本的な使い方・まとめ
http://defghi1977.html.xdomain.jp/tech/webanim/webanim.htm

■「動き」はどの技術で実装すべきか? Web Animations APIの登場で常識が変わる
https://www.webprofessional.jp/bringing-pages-to-life-web-animations-api/

Share on Facebook0Tweet about this on TwitterShare on Google+0Email this to someone