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


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

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

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

役立つ10のJavaScriptスニペット

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

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

使い方:

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

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

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

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

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

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

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

使い方:

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

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

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

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

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

使い方:

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

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

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

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

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

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

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

使い方:

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

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

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

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

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

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

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

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

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

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

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

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

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

使い方:

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

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

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

更新情報はFacebookページで!

ブログの更新、読んで役立つ他ブログの記事などを更新しています。




関連のある記事


質問があればこちらからどうぞ