JavaScriptは見慣れないコードが並ぶため、難しいように思えますが、CSSよりも便利に使えて、痒いところに手が届く”サイトに動き”を与えるものです。
もちろん、複雑な動作をさせるためには複雑なコードを書く必要がありますが、今回は初心者でもコピペだけで実装できる簡単なJavaScriptコードをご紹介します。
基本編 その1
本文に行く前に、CSSとJavaScriptの違いを確認しておきましょう。
CSS
- class、id属性を与えれば、一箇所書き換えるだけで、文字、背景、高さなど、様々なデザインを装飾できる。
- JavaScriptよりも処理速度が早い。
JavaScript
- スクロールしたときなど条件付きでサイトに動作を与えられる。
- class、id属性を与えたHTML、リンクを丸ごと書き換えるなど、CSSよりも幅広く、動的に書き換えられる。
- JavaScriptを切っている環境では動作しない。
基本編 その2
jQuery
jQueryはJavaScriptのライブラリで、初心者でも簡単にコードを書いて、動的に動かせます。実装の条件は、本体をダンロードする方法もありますが、CDNを経由する方法はより簡単で、HTMLのheader要素内に以下のコードを書くだけ。
今後、使用するので導入しておきましょう。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>※最新版はjQuery公式サイトでご確認ください。
JavaScriptの書き方
JavaScriptの記述場所はheader要素内、body要素内など特に指定されていませんが（個人的には</body>タグの直前を推薦します）、<script> ～ </script>で囲うことは必須です。<script> ここに記述 </script>
また、本記事ではid属性を取得するgetElementById("id名")を使用しますが、class属性を取得したい場合はgetElementById("id名")の部分をgetElementsByClassName("クラス名")やquerySelector(".クラス名")に書き換えて実装してください。
※querySelectorの場合はクラス名の前に.を忘れずに！
（サンプル）
var banana = document.getElementById("id名");
var banana = document.getElementsByClassName("クラス名");
var banana = document.querySelector(".クラス名");
varでbananaという変数名を宣言していますが、今回はあくまでもコピペで実装できる初心者向けの記事なので、専門的な知識は他ブログにお任せして、「データに固有の名前を与えている」程度と思っておいて下さい。
簡単に言うと、要素・属性を取得して、そこに動きを与えるといったことが基本的な流れです。
おまたせしました。
以下は本文です！
1.簡単に要素の中身を入れ替えてみよう！
一度、書いたHTMLを書き換えたくなるときってありますよね。JavaScriptのinnerHTMLで書き換えてみましょう。
<p id="banana_1">バナナのブログ</p>
上記のid属性banana_1の中身「バナナのブログ」をJavaScriptで書き換えるとこうなります。
<script>サンプル
var banana = document.getElementById("banana_1");
banana.innerHTML = "<span style='color:#ff502f;font-size:20px;'>リニューアル</span>";
</script>
バナナのブログ
↓↓↓↓
↓↓↓↓
バナナのブログ
innerHTMLは要素の中身を壊して新たな要素を加えます。
CSSと違うところは、HTMLがそのまま反映されることで、CSSよりも楽に要素の中身を入れ替えられますし、様々な応用が可能ですね。
他にも、innerText、textContentでもほぼ同様の動作が可能ですが、使用できないブラウザなどがあるのでinnerHTMLがオススメです。
2.CSSの疑似要素before、afterをJavaScriptで再現してみよう！
※jQueryを使います。
導入がまだの方は、上記の基本編 その2を参照。
before、after、prepend、append
基本的なコードは以下の通り。<script>HTMLを代入する場合の表記
$('#指定したい要素のid名').●($('#追加したい要素を持つid名'));
</script>
<script>
$('#指定したい要素のid名').●('ここに追加したいHTML');
</script>
この●の部分にbefore、after、prepend、appendを記述すると、それぞれのメソッドで動作します。
- before = 指定の要素の前に新要素を追加
- after = 指定の要素の後に新要素を追加
- prepend = 指定の要素の子要素の前に新要素を追加
- append = 指定の要素の子要素の後に新要素を追加
サンプル
before
HTML<div id="ban_1">バナナです</div>JavaScript
<div id="ban_22">わたしは、</div>
<script>
$('#ban_1').before($('#ban_22'));
</script>
結果
バナナです
わたしは、
after
HTML<div id="ban_a1">バナナですか？</div>JavaScript
<div id="ban_a22">あなたは、</div>
<script>
$('#ban_a22').after($('#ban_a1'));
</script>
結果
バナナですか？
あなたは、
テキストを代入する形なら、CSSの疑似要素before、afterと同様に使えますね。
JavaScriptなら簡単に属性に別の属性を追加できるので、デザインの幅が広がるのではないでしょうか。
※prepend、appendのサンプルは省略します。
replaceWith、replaceAll、appendTo、prependTo、insertAfter、insertBefore
replaceWith、replaceAllには細かい違いはありますが、基本的にはinnerHTMLと同様に要素を置き換えるメソッドです。- appendTo = 指定の要素の子要素の最後に別の要素を移動
- prependTo = 指定の要素の子要素の先頭に別の要素を移動
- insertAfter = 指定の要素の最後に別の要素を移動
- insertBefore = 指定の要素の最初に別の要素を移動
jQueryなので、コードの書き方は上記のbefore、after、prepend、appendと同様です。
色々試してみると、CSSでは思いつかなかったアイディアが浮かんでサイトを一歩上のレベルに引き上げることができると思います。
JavaScriptには他にもまだ便利なコードはありますが、ここまでで長い記事になってしまったので、またの機会にご紹介します。
長文にお付き合い下さって、ありがとうございました。