脱jQueryに挑戦!Javascriptをネイティブのみで書いてみる。

ブログ

Blog
  1. ホームページ制作・運営はアウラ:ホーム
  2. ブログ
  3. 脱jQueryに挑戦!Javascriptをネイティブのみで書いてみる。

脱jQueryに挑戦!Javascriptをネイティブのみで書いてみる。

脱jQueryに挑戦!Javascriptをネイティブのみで書いてみる。

最近のWebではどんどんjQueryが使われなくなり。ネイティブのJavascriptのみが使われているサイトが多くなってきたらしいです。理由はページの読み込み速度の向上を狙ってとのこと。

自分も今使っているjQueryのコードをネイティブのJavascriptに書き換えてみよう、という事でチャレンジしてみました。

 

要素の取得

要素の取得はjQueryでは「$(‘~~’)」で色々な要素を取得できますね。

jQuery

 

ネイティブのJavascript

ネイティブのJavascriptだと文字が多くなる上にID名、クラス名、タグ名などそれぞれ違う物を使い分ける必要があります。覚えてしまえば全然平気です。

 

Classの操作

アニメーションは主にCSSで書きます。そしてjQueryの「addClass()」や「removeClass()」、「toggleClass()」でクラス名を追加したり削除したりして、アニメーションイベントの制御を行っていました。

jQuery

 

ネイティブのJavascript

classListで要素のクラスを操作することができます。これも簡単に置き換えられますね。

 

要素のスクロール位置を取得

ある位置までスクロールするとヘッダーを固定するなど、スクロール位置もイベント制御によく使います。

jQuery

 

ネイティブのJavascript

jQueryだと1行なのにネイティブだと3行になってしまいました。
まず「getBoundingClientRect()」で要素の上下左右の位置を取得できます。しかし、それだけだとスクロールされた場合に座標がズレてしまう問題があります。なので、「window.pageYOffset || document.documentElement.scrollTop」でスクロール量を取得して、要素の座標に足してやる必要があります。

 

CSSスタイルの操作

JavascriptでCSSのプロパティを操作することもままあります。

jQuery

 

ネイティブのJavascript

ネイティブのJavascriptでは「style」でCSSプロパティを操作できます。プロパティ名で気をつけなければいけないのは「margin-top」など、「-(ハイフン)」があるプロパティ名はハイフンなしで「marginTop」と、キャメルケースで書かないといけません。
jQueryだとプロパティ名と値を引数で指定しましたが、ネイティブでは代入する形になり少し書き方が変わります。

 

クリック、リサイズ、スクロールなどのイベント

ボタンをクリックした時の処理など、ネイティブのJavascriptではイベントリスナーに登録して処理を指定します。

jQuery

 

ネイティブのJavascript

イベントの登録に「addEventListener()」を使います。1番目の引数に’click’などイベントタイプを指定して、2番目の引数に関数で処理をかきます。

 

ページトップボタン

最後はページトップボタンです。
jQueryだと「animate()」関数で簡単にアニメーションしてページトップへのスクロールが可能ですが、ネイティブのJavascriptだとややこしくなります。

jQuery

 

 

ネイティブのJavascript

ネイティブのJavascriptだと大量に記述が増えてしまいました。ネイティブではアニメーションするための関数がないようなのでアニメーションのJavascriptライブラリを使用するかこのように処理を書いてあげなければいけません。

アニメーションに関して、そのほか「slide」や「fade」といったjQueryの関数などもネイティブで書くと複雑になります。


 

ネイティブのJavascriptへの対応作業をしていて、書き慣れているというのはもちろんあるけれど、jQueryは直感的に書くことができてネイティブのコードに比べて親しみやすいです。あとIE9など古いブラウザへ対応する場合ネイティブだと動かない場合があるので注意が必要です。

今後jQueryを扱えない案件もあるかもしれないし、読み込み速度の向上を考えるとjQueryなしでも書けるようにしておかないといけませんね。

前後の記事

お問い合わせはこちらから

見出しアイコン スタッフ募集 Recruit

アウラでは新メンバーを募集しています。詳しくは採用ページをご覧ください。 WANTEDLYで採用募集しております。詳しくはこちら