めちゃくちゃ便利なJavaScript オリジナル関数10選

この記事はonextrapixelに掲載された 10 Useful and Time Saving JavaScript Snippets の内容を日本語訳したものです。

JavaScriptはすごい勢いで進化しています。ただ常に全てのサイトに対して最新のJavaScriptを適用していくのはとても骨が折れる作業です。jQueryはとても人気のあるすぐれたライブラリであるが、いくつかのスクリプトは純粋なJavaScriptで書かれています。

この記事では、共通の問題を解決し、あなたの時間を節約することが出来る便利な10のスクリプトを紹介します。これらのスニペットはほとんどがコピー＆ペーストによって使用することが出来ますし、あなたのスクリプトに自由に埋め込んで使うことが出来ます。ぜひ使ってみてください。

役立つ10のJavaScriptスニペット

1, セットされた要素の最大の横幅と高さを取得する

このスクリプトはセットされた要素の最大の高さや横幅を得るのにとても役立ちます。

var getMaxHeight = function($elems) {
    var maxHeight = 0;
    $elems.each(function () {
        // outerHeight()を変わりに使ったほうがよいケースもあります
        var height = $(this).height();
        if(height > maxHeight) {
            maxHeight = height;
        }
    });
    return maxHeight;
};

使い方：

$(elements).height(getMaxHeight($(elements)));

デモ：カラムを同じ高さに合わせる

2, 効率良くデータをバリデーションする

高度なデータフォーマットである日付の前ではJavaScriptのライブラリではあまりにシンプルすぎて十分ではありません。はるかに簡単に日付を操作する多くのJSライブラリがありますが、時には自分だけの日付を検証するシンプルなものを作りたい。そんなときにこれから紹介するスクリプトを使うとよいです。このスクリプトは任意の区切り文字と4桁の西暦の日付を検証することができます。

function isValidDate(value, userFormat) {
    // フォーマットがない場合はデフォルトのフォーマットをセットする
    userFormat = userFormat || 'yyyy/mm/dd';

    // 独自の区切り文字を見つけ、年月日を消す
    var delimiter = /[^mdy]/.exec(userFormat)[0];

    // 年月日の配列を作成し、私たちが知っているフォーマットにする
    var theFormat = userFormat.split(delimiter);

    // ユーザーデータの配列を作成する
    var theDate = value.split(delimiter);

    function isDate(date, format) {
        var m,d,y,i = 0, len = format.length, f;
        for(i; i < len; i++) {
            f = format[i];
            if (/m/.test(f)) m = date[i];
            if (/d/.test(f)) d = date[i];
            if (/y/.test(f)) y - date[i];
        }
        return (
            m > 0 && m < 13 &&
            y && y.length === 4 &&
            d > 0 &&
            // 正しい月日かチェックする
            d <= (new Date(y, m, 0)).getDate();
        );
    }

    return isDate(theDate, theFormat);
}

使い方： 11月31日は存在しないので以下はfalseになります。

isValidDate('dd-mm-yyyy', '31/11/2012');

デモ：入力された日付のバリデーション

3, レスポンシブウェブデザインのためのブレイクポイントを設定する

このユーティリティは、レスポンシブデザインをするときに幅のブレイクポイントを設定するための簡単なアプローチです。 JavaScriptコードでCSSメディアクエリに関連付けるための簡単な方法です。

function isBreakPoint(bp) {
    // CSSにセットしているブレイクポイント
    var bps = [320, 480, 768, 1024];
    var w = $(window).width();
    var min, max;
    for (var i = 0, l = bps.length; i < l; i++) {
        if (bps[i] === bp) {
            min = bps[i-1] || 0;
            max = bps[i];
            break;
        }
    }
    return w > min && w <= max;
}

使い方：

if ( isBreakPoint(320) ) {
    // 320より小さいときのブレイクポイント
}
if ( isBreakPoint(480) ) {
    // 320から480の間のブレイクポイント
}
...

デモ：次のデモでは、いくつかのCSSメディアクエリを使用している例を示しています。ボックスがクリックされたとき、現在のウィンドウの幅と一致するデバイスをアラートします。ウィンドウのサイズが変更されると、CSSメディアクエリでは、ボックスの色を変更し、JSブレイクポイントはその幅に合ったデバイスをアラートします。簡単な例ではありますが、可能性を感じられると思います。メディアクエリと使うレスポンシブブレイクポイント

4, テキストをハイライトする

テキストを強調するための多くのjQueryプラグインがありますが、このテクニックは強力な検索かつカスタマイズが用意で、またそれが純粋なJavaScriptのみで動かすことが出来ます。このスクリプトはCSSで装飾出来るようにタグで囲まれた状態のオリジナルテキストで返します。

function highlight(text, words, tag) {
    // タグが与えられてなければデフォルトのタグを設定する
    tag = tag || 'span';

    var i, len = words.length, re;
    for (i = 0; i < len; i++) {
        // マッチした全てを強調するための正規表現
        re = new RegExp(words[i], 'g');
        if (re.test(text)) {
            text = text.replace(re, '<' + tag + ' class="highlight">$&');
        }
    }
    return text;
}

元のテキストに戻すスクリプト

function unhighlight(text, tag) {
    // タグが与えられてなければデフォルトのタグを設定する
    tag = tag || 'span';
    var re = new RegExp('(<' + tag + ' .+?>|<\/' + tag + '>)', 'g');
    return text.replace(re, '');
}

これらの2つのスニペットはあなたのテキストハイライトプラグインを作成するよいスタートになるでしょう。

使い方：

$('p').html( highlight(
    $('p').html(), // テキスト
    ['foo', 'bar', 'baz', 'hello world'], // 強調する単語やフレーズのリスト
    'strong' // カスタムタグ
));

デモ：文章をハイライトする

5, 動くテキストエフェクト

シンプルで強力なスクリプトは、テキストプロパティをアニメーション化する。 CSS3のtransitionと組み合わせた場合、面白い結果が得られます。このスニペットは、使いやすさのためにjQueryプラグインを使用しています。

$.fn.animateText = function(delay, klass) {
    var text = this.text();
    var letters = text.split('');

    return this.each(function() {
        var $this = $(this);
        $this.html(text.replace(/./g, '$&'));
        $this.find('span.letter').each(function(i, el) {
            setTimeout(function() { $(el).addClass(klass); }, delay * i);
        });
    });
};

使い方：クラスでCSSを作成して、段落のようにいくつかの生テキストを含む要素にプラグインを実行します。

$('p').animateText(15, 'foo');

デモ： CSS3transitionを使用してタイプライターのようにテキストをハイライトしていく

6, 1つずつゆっくり表示させる

jQueryプラグインでカスタム要素を1つずつゆっくり表示させるためには。

$.fn.fadeAll = function(ops) {
    var o = $.extend({
        delay: 500, // 要素間の遅延
        speed: 500, // アニメーションスピード
        ease: 'swing' // その他の読み込むプラグイン
    }, ops);
    var $el = this;
    for (var i = 0, d = 0, l = $el.length; i < l; i++, d+=o.delay){
        $el.eq(i).delay(d).fadeIn(o.speed, o.ease);
    }
    return $el;
}

使い方：

$(elements).fadeAll({ delay: 300, speed: 300)};

デモ：画像が1つずつ表示される

7, クリックをカウントする

ときには、要素をユーザーが何回クリックしたかをカウントする必要があります。最も一般的なソリューションは、グローバル変数としてカウンタを作成することではなく、jQueryを使ってカウンタを格納するため、Data APIを通してグローバルスコープを汚染しないようにすることが出来ます。

$(element).date('counter', 0) // 0からカウントを開始する
          .click(function() {
              var counter = $(this).date('counter');
              $(this).data('counter', counter + 1);
              // 好きなコードを書く
          });

デモ：ボタンのクリックをカウントする

8, リンクからYouTube動画を埋め込む

カスタムパラメーターを使用してリンクからYouTube動画を埋め込む役に立つスクリプトです。これはかなり寛容な正規表現を使用していますが、ほとんどのYouTubeのリンク形式で動作します。このスクリプトはYouTube動画を埋め込む際に経験しているかもしれない" z-index "問題を解決します。

function embedYoutube(link, ops) {
    var o = $.extend({
        width: 480,
        height: 320,
        params: ''
    }, ops);
    var id = /\?v\=(\w+)/.exec(link)[1];

    return '<iframe style="display: block;"'+
        ' class="youtube-video" type="text/html"'+
        ' width="' + o.width + '" height="' + o.height +
        ' "src="http://www.youtube.com/embed/' + id + '?' + o.params +
        '&amp;wmode=transparent" frameborder="0" />';
}

使い方： paramsの詳細はYouTubeのAPIパラメーターをチェックしてください。

embedYoutube(
    'https://www.youtube.com/watch?v=JaAWDljhD5o',
    { params: 'theme=light&fs=0' }
);

デモ：リンクからYouTube動画を埋め込む

9, 単語制限によってテキストを減らす

このスクリプトはWordPressのthe_excerpt関数に似ています。これはテキストを特定の文字列に切り詰めることが出来ますし、必要であれば、省略記号を追加します。これは、strongやemやリンクなど、他のインラインタグをもっているテキストでも動作します。

function excerpt(str, nwords) {
    var words = str.split(' ');
    words.splice(nwords, words.length-1);
    return words.join(' ') +
        (words.length !== str.split(' ').length ? '…' : '');
}

デモ：簡単に「続きを読む」を作成する

10, 動的なメニューを作成する

動的メニューで任意のタイプを作成する非常に単純なスクリプトです。

function makeMenu(items, tags) {
    tags = tags || ['ul', 'li'];
    var parent = tags[0];
    var child = tags[1];

    var item, value= '';
    for(var i = 0, l = items.length; i < l; i++) {
        item = items[i];
        // 値があればキーと値をわける
        if(/:/.test(item)) {
            item = items[i].split(':')[0];
            value = items[i].split(':')[1];
        }
        // タグでitemを囲む
        items[i] = '<' + child + ' ' +
            (value && 'value="' + value + '"') + '>' +
                item + '';
    }
    return '<' + parent + '>' + items.join('') + '';
}

使い方：

makeMenu(
    ['January:JAN', 'February:FEB', 'March:MAR'],
    ['select', 'option']
);

makeMenu(
    ['Carrots', 'Lettuce', 'Tomatos', 'Milk'],
    ['ol', 'li']
);

デモ：たくさんの種類のメニューを作成する

訳していて、感心するようなコードばかりでした。特にクリックをカウントするやりかたが感動でした。 DataAPIを使うのかーDataAPIは使っていたけど盲点でした。

この記事はonextrapixelに掲載された 10 Useful and Time Saving JavaScript Snippets の内容を日本語訳したものです。

役立つ10のJavaScriptスニペット

1, セットされた要素の最大の横幅と高さを取得する

2, 効率良くデータをバリデーションする

3, レスポンシブウェブデザインのためのブレイクポイントを設定する

4, テキストをハイライトする

5, 動くテキストエフェクト

6, 1つずつゆっくり表示させる

7, クリックをカウントする

8, リンクからYouTube動画を埋め込む

9, 単語制限によってテキストを減らす

10, 動的なメニューを作成する

関連記事: