【Webサイト制作者必見!】Webサイトに取り入れるとよいJavaScriptの小技紹介 | 千葉で集客ホームページ制作はティーエスフォート
コラム

【Webサイト制作者必見!】Webサイトに取り入れるとよいJavaScriptの小技紹介

【Webサイト制作者必見!】Webサイトに取り入れるとよいJavaScriptの小技紹介

JavaScriptは動きのあるWebサイトを構築する上では欠かすことのできないプログラミング言語です。

今回はWebサイト構築にあたって活用することのできるJavaScriptの小技集をご紹介します。

実行時間の測定

コードが実行された時間をJavaScriptで取得することができます。

以下のコードを実行することで、Googleの検索ページにおいて、検索にかかった時間が表示されます。


const firstTime = performance.now();
something();
const secondTime = performance.now();
console.log(`The something function took ${secondTime - firstTime} milliseconds.`);


ページの処理時間が長くなり、表示速度が遅くなると、ユーザーはすぐ戻るボタンを押すなどしてページから離脱してしまいます。

処理時間が長くなってしまっている部分を探す時に活用できます。

ページの履歴を残さず画面遷移させる

クリックすると表示していた画面の履歴を閲覧しているユーザ側に残すことなく指定の画面に遷移する方法です。

利用シーンとしては会員向けのページでログアウトする際に履歴を残さないようにできるのと、ブラウザの戻るボタンを無効にすることができます。


function logOut(){
location.replace("https://○○○");
}


「ログアウト」ボタンを押したときにlogOut関数の処理を実施し、移動先を location.replace() で指定しています。

HTML要素を取得して変更する

ID属性値を利用する



1つは、getElementById()メソッドを使う方法です。

このメソッドは、指定したID値を持つ要素をElementオブジェクトとして返します。


<p>p id="dat">
おはようございます
&amplt;p>

var p = document.getElementById('dat');
console.log( p );


p要素のid属性「"dat"」を設定しています。

この「"dat"」をgetElementById()の引数に指定することで、P要素を取得することが可能です。

class属性値を利用する



2つ目はclass属性値を利用する方法です。

class属性値から取得する場合は、getElementsByClassName()メソッドを用います。

getElementsByClassName()は、対象となるクラス名が設定されているHTML要素を全て取得するメソッドです。


<p> class="dat">おはようございます&amplt;p>
<p> class="test">こんにちは&amplt;p>

var p = document.getElementsByClassName('dat');
console.log( p[0] );


class属性は、同じものを複数の要素に付与することができます。

そのため、同じクラス名がたくさん存在する場合は、getElementsByClassName()のメソッドを使った方が便利です。

なぜなら、同じクラス名がたくさん存在していると、毎回違うクラス名を指定して取得しなければならず、手間だからです。

HTML要素を動的に生成する方法

JavaScriptを使うことで、新しくHTML要素を生成することができます。

createElementを使う方法をご紹介します。

createElememt()メソッドは、JavaScriptでHTML要素を動的に生成するために使います。記述の方法は以下の通りです。

const element = document.createElement(タグ名)

具体的な使い方の例を見ていきましょう。


const h2 = document.createElement('h2');
h1.textContent = 'createElementの使い方とは;
document.body.appendChild(h1);

まとめ

今回はJavaScriptを使った小技をご紹介しました。

いかがだったでしょうか。

ページ遷移を行わない処理であったり、よりユーザーフレンドリーなサイト制作においては欠かすことができないのがJavaScriptです。

ぜひ活用してみてください。
ページ先頭へ