HTML,CSSを覚えたあとにこれだけでも覚えておくと便利なJavascript

2021年11月22日

webのこと

HTML,CSSを覚えたあと、Javascriptを勉強したいなぁどこまで勉強するかなと悩んでいる人も多いかなと思います。

そんなときはじめに、とりあえずこの考え方だけ覚えておくと、
よく見る形のレイアウトを作ることができるので便利です。

考え方

特定の動作をしたとき（クリックしたとき、特定の時間が経過した時など）に、
動作させたいタグにonというclassを付与する。

onクラスに対して表示したいときのスタイルをあてる。

これだけです。

実際に

ドロワーメニュー

ドロワーの考え方

もともとドロワーを左側に隠しておく
メニューをクリックした時に、.drawerにonというクラスをつける。
onをつけた時に、隠していたドロワーを出てくるようにする。

ドロワーのJavascript

// メニューを取得
const menu = document.querySelector('.menu')
// drawerを取得
const drawer = document.querySelector('.drawer')

// メニューをクリックした時に
menu.addEventListener('click', () => {
  // drawerにclass onをつける。すでについている場合ははずす
  drawer.classList.toggle('on')
})

ドロワーを作る上で使っているJavascript

document.querySelectorでHTML上の上から最初に引っかかったセレクタを取得する。
addEventListenerで任意のイベントを付与する。
classList.toggleでクラスを付与。すでについている場合は外す。
今回は使ってないですが、ついでにclassList.addは追加。
classList.removeは削除

クリックした時に開く（Q＆Aなど）

クリックした時に開くの考え方

クリックした隣のタグに、onをつける

クリックした時に開くのJavascript

// クリックするタグを全部取得
const questions = Array.from(document.querySelectorAll('.q'))

questions.forEach((el) => {
  // クリックした時の処理を追加
  el.addEventListener('click', () => {
    // クリックした時に次のタグにonをつける。既についている場合は外す。
    el.nextElementSibling.classList.toggle('on')
  })
})

クリックした時に開くを作る上で使っているJavascript

document.querySelectorAllで指定の全ての要素を取得する。
addEventListenerで任意のイベントを付与する。
el.nextElementSiblingで次のタグを指定する。
classList.toggleでクラスを付与。すでについている場合は外す。

時間で切り替わるスライダー

時間で切り替わるスライダーの考え方

指定秒数経過したらリストにonくらすを順番に付与する

時間で切り替わるスライダーのJavascript

// .slider-itemを取得、そのままだとNodeListなのでArrya.fromで配列に変更
const sliderItems = Array.from(document.querySelectorAll('.slider-item'))
// 切り替えspeed 3000ms
const speed = 3000

// 初期どこにいるか0はじまり on がついている位置を初期値とする
let currentNum = sliderItems.indexOf(document.querySelector('.slider-item.on'))

// num番目を表示する
const selectItem = (num) => {
  currentNum = num
  
  // numがスライド以上だった場合は0に戻る
  if(sliderItems.length <= num) {
    currentNum = 0
  }
  
   // onがついているタグを全て一旦消す
  sliderItems.forEach((el) => {
    el.classList.remove('on')
  })

   // currentNum番目にonをつける
  sliderItems[currentNum].classList.add('on')
}

// speed ミリ秒でselectItemを実行。現在の位置 + 1した値を引数で渡す
setInterval(() => {
  selectItem(currentNum + 1)
}, speed)

スライダーを作る上で使っているJavascript

document.querySelectorでHTML上の上から最初に引っかかったセレクタを取得する。
forEachを使った配列の繰り返し処理。
if(条件)でもしも条件が合致した時の処理をする。
classList.addでclassの追加。
setIntervalで指定秒数経過したときの処理をする。

モーダル

モーダルの考え方

data-modalが付いているところをクリックするとmodalにonをつける処理を行う。
どのモーダルを開くかの選択は、クリックした要素についているdata-modal-contentを取得して、その文字列のidがついている要素にonをつける
モーダル外を押したらモーダルのコンテンツ外をクリックした時に、.modalについたonを消す
バツボタンをクリックした時に、.modalについたonを消す

モーダルのJavasccript

// data-modalが付いているタグを全て取得
const modalActions = document.querySelectorAll('[data-modal]')
// .modalが付いているタグを全て取得
const modals = document.querySelectorAll('.modal')
// .closeが付いているタグを全て取得
const closes = document.querySelectorAll('.modal-close')

// クリックする要素についての処理
// クリックした時にdata-modal-contentの値を取得し、その文字列のidの要素にonをつける
modalActions.forEach((action) => {
  // data-modal-contentの中身を取得
  const id = action.dataset.modalContent
  // 上で取得した文字列をidで取得する
  const modalContent = document.querySelector('#' + id)
  // クリックした時に取得した要素にonをつける
  action.addEventListener('click', () => {
    modalContent.classList.add('on')
  })
})

// modalのコンテンツの外をクリックしした時に閉じるように
modals.forEach((modal) => {
  modal.addEventListener('click', (e) => {
     // クリックした位置のタグがコンテンツ外だったらonを外す
    if(e.target === modal) {
      modal.classList.remove('on')
    } 
  })
})

// 閉じるボタン
closes.forEach((close) => {
  close.addEventListener('click', () => {
      // 親をたどって、最も近い.modalを取得
    const modal = close.closest('.modal')
    if(modal) {
        // modalのonを削除
      modal.classList.remove('on')
    } 
  })
})

モーダルを作る上で使っているJavascript

document.querySelectorAllで指定の全ての要素を取得する。
document.querySelectorでHTML上の上から最初に引っかかったセレクタを取得する。
addEventListenerで任意のイベントを付与する。
forEachを使った配列の繰り返し処理。
if(条件)でもしも条件が合致した時の処理をする。
classList.addでclassの追加。
classList.removeでclassの削除。
closestで親をたどって、最も近い要素を取得

まとめ

ユーザー操作や、時間経過でonというクラスをつけ、
onがついている場合のcssを書くことでさまざまな動作をすることができます。
今回は、onというクラスをつけるようにしましたが、data属性を追加したりすると言う手もありますね。

このあたり最初に少し覚えておくと、プラグインを使わずに理解できる範囲で実装できるので
理解しながら実装してみると良いかなと思います。

プラグインを使うのももちろん良いと思うので
それぞれメリットデメリット、「これを実装するには」どう実装するのがよいかなと考えた上で選択できると良いですね！

自分で書くことのメリット

サイトに必要なコードのみを書くので最小限のコードで済む
理解できていれば、機能追加で知見が溜まっていく
Javascriptが少し上達していく

自分で書くことのデメリット

理解できていない状態で複雑なことを再現しようとして、コードが複雑になりがち

プラグインを使うメリット

読み込むだけで、簡単な実装コードを書くだけで実行できる
自分で書くには複雑な処理を、色々考えた上で実装されたコードを使える

プラグインを使うデメリット

不要な処理まで書かれているので容量が少し大きくなる（そこまで気にするレベルではないですが）
バージョンによって処理が変わる
なるべくアップグレードを追う必要がある（しなくても問題なかったりもしますが）

メリットデメリットはこんな感じかなと思います。
それぞれ作りたいものによって決めていきましょう！

かめ。ブログ