HTML,CSSを覚えたあとにこれだけでも覚えておくと便利なJavascript
2021年11月22日
2021年11月22日
目次
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が少し上達していく
自分で書くことのデメリット
- 理解できていない状態で複雑なことを再現しようとして、コードが複雑になりがち
プラグインを使うメリット
- 読み込むだけで、簡単な実装コードを書くだけで実行できる
- 自分で書くには複雑な処理を、色々考えた上で実装されたコードを使える
プラグインを使うデメリット
- 不要な処理まで書かれているので容量が少し大きくなる(そこまで気にするレベルではないですが)
- バージョンによって処理が変わる
- なるべくアップグレードを追う必要がある(しなくても問題なかったりもしますが)
メリットデメリットはこんな感じかなと思います。
それぞれ作りたいものによって決めていきましょう!