タグ: jQuery

[JavaScript] jQueryからネイティブJavaScriptへの置き換え

ECMAに準拠したモダンブラウザの普及に伴いjQueryの利用を止めてネイティブなJavaScriptに移行(回帰)しようという際に、jQueryで実装していた処理をどう置き換えるかは悩みどころ。

JavaScriptには似たような機能が沢山あって解決策はひとつではありませんが、ECMAScript 6(2015)での動作を前提とした代表的な置き換え方法を備忘録がてら残しておくことにします。

続きを読む

[JavaScript] jQuery無しでも$(ドル記号)で要素選択したい

昨今のモダンブラウザに於けるJava Scriptの標準仕様(ECMAScript)への準拠の流れを受けて、わたしもChrome拡張(エクステンション)など実行環境を制限出来るウェブアプリの開発に於いてはjQueryに頼らないコーディングを心がけるようになりました。

ただ、いくらネイティブJavaScriptが高度化したとはいえ現状ではまだまだ発展途上な感が否めず要素を選択するだけでもソースが冗長になりがち。

// jQuery
$(".class");

// 非jQueryだと長ったらしい
document.querySelector(".class");

jQueryの開発チームもECMAScript標準化には関与しているそうなので、将来的に「$()」が「document.querySelector()」のエイリアスになるんじゃね？なんて思っていたら、既にChromeブラウザのdevToolsはそのような実装をしている模様。ちなみに、「$$()」は「document.querySelectorAll()」と同様の結果を返してきます。

続きを読む

WordPress用プラグイン「Head Cleaner」のDNSプリフェッチ出力不具合を回避

WordPressが吐き出すHTMLのheadタグ内を整理統合することでクライアント側の処理を最適化し表示の高速化を図る人気のプラグイン「Head Cleaner」ですが、現バージョン(1.4.2.12)に於いてheader.php等で外部CDNのJavaScriptやCSSを読み込むため以下のような記述をしていると…


wp_enqueue_style('font-awesome', '//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css');
wp_enqueue_script('jquery','//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js');

それぞれフルパスで「DNSプリフェッチ」(dns-prefetch)を出力してしまう模様。


<link rel="dns-prefetch" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="dns-prefetch" href="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js">

別にエラーにはならないけれど、DNSプリフェッチのhref部はドメインだけで構わないのでドメインより後ろを取り除きつつ重複を除去するようhead-cleaner.phpを一部修正。

続きを読む

[JavaScript] jQuery UI 1.11以降でのdatepickerの日本語表示

しばらく目を離した隙にjQuery UIのバージョン1.11系がリリースされていたので1.10系からバージョンアップを図ろうとしたのですが、datepickerで日本語表示するために読み込んでいた言語別ファイル「jquery.ui.datepicker-ja.js」(あるいは jquery.ui.datepicker-ja.min.js)が1.11系には見当たりません。

Changelogを眺めてみると1.11よりファイル名が変わったりしているようなので、以下のいずれかの対応が必要になります。

ファイル名を変更する

1.11より「jquery.ui.datepicker-ja.js」は「datepicker-ja.js」へとファイル名が変更されているので、それにあわせて呼び出し元を変更すればOK。

<!--
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/i18n/jquery.ui.datepicker-ja.min.js"></script>
<link type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/south-street/jquery-ui.css" rel="stylesheet" />
-->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/datepicker-ja.min.js"></script>
<link type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/south-street/jquery-ui.css" rel="stylesheet" />
続きを読む

さくらのレンタルサーバでのWordPressチューニング

昨年末に店舗を営む知人からWordPressを用いた情報発信ページの構築を依頼されていたのですが、本業の合間に少しづつ作業を進めてようやくテンプレートが完成。

「あまりお金をかけられない」ということだったので個人でも利用している「さくらのレンタルサーバ」を新たに契約してもらって設置したもののそのままではレスポンスが宜しくないので諸々のチューニングで大幅改善。

この際行った対応は特に目新しいものではありませんが、今後さくらのレンタルサーバで初めてWordPressを用いたサイトを構築される方のため、そして自分への備忘録も兼ねて効果の期待できる設定や注意点などを残しておくことにします。

続きを読む

[JavaScript] jQuery v1.10.x への移行で注意すべき点

jQueryに依存するスクリプトに於いて以下のようなロジックでjQueryのバージョンチェックを行い処理分岐を行なっているものが多く見受けられるのですが、このようなロジックはjQuery 1.10.xとの組み合わせで期待通りの動きをしてくれなくなるので注意が必要です。

// support: jQuery 1.8+
if (parseFloat($.fn.jquery) >= 1.8) {
// (本処理)
}

理由は簡単。$.fn.jqueryで取得した「1.10.x」をparseFloatで小数値変換すると小数値としてあり得ない2つめのドット(.)以下が削られたうえで小数部末尾の0も省略されるため「1.10」ではなく「1.1」となってしまうため。

続きを読む