最近のwebサイトのjQueryの使用状況とバージョンを調べてみた
こんちは。ひさびさの投稿です。
しばらくサボっていたので怒られました。
暇さえあれば遊戯王アプリでデュエルしてます、デュエリスト藤原（無課金）です。
ここ最近なにかとjavascriptライブラリやフレームワークなど話題が多く、脱jQueryなんて動きも見られるようになってきていますが、月虹製作では受託案件がほぼメインで、jQueryを使用しない案件はほとんどありません。
別のライブラリでの開発は導入コスト学習コストも考えるとまだまだ先になりそうです。
世のwebサイトすべてが脱jQueryになるなんて未来もあるのかもしれませんが、何かと便利なjQueryはなかなか卒業できないのが現実です。
旧ブラウザのサポートが必要なくなってきたことだし、jQueryのバージョンも見直すのも良さそうですね。改めておさらいです。
jQueryのバージョン
jQueryはご存知の通り、3つのバージョンがあります。
・1.x系
・2.x系
・3.x系
違いは次のとおりです。
1.x系
1.x系はIE8以前にも対応、旧ブラウザも考慮したバージョン。
一番なじみのあるものだとおもいます。
1.9系以降では、削除や変更されたコードがあり古いプラグインなどが動作しないものもあり。
2.x系
2.x系はIE8以前の旧ブラウザは対象外。
高速・安定動作を目指したバージョン。
3.x系
3.xは2.x系からさらに軽量化されたバージョンで最新のバージョン。
これまで使用してきたコードで廃止になったコードなどあり。
です。
さて、話は少し戻りますが、旧ブラウザの対応も必要なくなってきた最近の世のWebの風潮だとIE11以上から対応する案件が多いでしょうか。
月虹製作での最近の製作基準は、旧ブラウザはがんばらない、というのを基準に基本は最新版にフォーカスして対応することにしています。
旧ブラウザはまったく対応しないわけではないですが、閲覧に支障がないレベルであればヨシとする方針です。
なので、旧ブラウザでの表示確認は一応しています。
では旧ブラウザの対応が必要なくなってきた風潮の中、他のサイトではjQueryのバージョンはどうなっているのか。
気になったので以下のwebデザインギャラリーサイトに掲載されているサイトを調べてみました。
約50サイトほどです。
調査するにあたって利用したwebデザインギャラリーサイト
以下、順不同です。
現代デザイン
http://gendaidesign.com/
MUUUUU.ORG
http://muuuuu.org/
Responsive Web Design JP
http://responsive-jp.com/
81-web
http://81-web.com/
ウェブ・ファインダー
http://w-finder.com/
straightline bookmark
http://bm.straightline.jp/
I/O 3000
http://io3000.com/
.SG_BOOKMARK
http://bookmark.dot-sg.com/
Good Design Web
http://gooddesignweb.com/
調査方法
ギャラリーサイトトップで掲載が新しい順のサイトを無作為にチョイスしています。
調査の方法はソースを開いて「jquery」で検索、です。
調査結果
以下、バージョンごとに順不同で並べています。
jQuery未使用のサイトもしくは使ってはいるけどバージョンの明記が見つけられなかったものは「確認できず」としています。
サイト名の横にかっこで書いてある数字がjQueryのバージョンです。
jQuery 1.x系
MTRL（マテリアル）（1.11.3）
https://mtrl.net/
キユーピーちゃんの絵本（1.9.1）
http://www.kewpie.co.jp/know/ehon/
株式会社PLAN-B新卒採用サイト（1.12.0）
https://www.plan-b.co.jp/recruit_2018/
23:VILLAGE XI 青嵐に惑う村（1.11.2）
http://7th-castle.com/jinrou/023-village-xi/
03 ENTERTAINMENT(03E)::広告・グラフィック・WEBの制作プロダクション（1.8.2）
http://03entertainment.com/
庄内橋自動車学校（1.11.0）
http://www.shonaibashi.co.jp/cpn_lp/
焼肉いとう 三重県津市の焼肉屋（1.11.3）
https://yakinikuito.com
toyota.jp C-HRの公式ページ（1.10.2）
http://toyota.jp/c-hr/
神戸女子大学（1.7.2）
http://www.yg.kobe-wu.ac.jp/wu/
中性重炭酸入浴剤（1.11.0）
http://barth.jp/
イトーキ（1.10.2）
https://www.itoki.jp/
京都・大阪・奈良・姫路・岡山で七五三などの子供写真 【KOtoOYA】（1.12.2）
http://kotooya.jp/
UDS株式会社 – UDS Ltd.（1.11.2）
http://www.uds-net.co.jp/
サントリー（1.12.4）
http://www.suntory.co.jp/
haluta（1.11.2）
http://www.haluta.jp/
DERTURE（1.10.2）
https://derture.com/
TDSTUDIO（1.11.1）
http://www.tdstudio.jp/
株式会社シェイク 新卒採用サイト（1.11.2）
https://shake.co.jp/recruit2018/
株式会社 ブルームダイニングサービス（1.11.3）
https://www.bloom-ds.com/
株式会社スタジオ ディテイルズ（1.11.3）
http://www.details.co.jp/
TYOグループ（1.11.3）
http://group.tyo.jp/
retaW（1.12.4）
https://retaw.tokyo/
OTANI JUN.（1.11.1）
http://otanijun.com/
BEAMS（1.11.1）
http://www.beams.co.jp/
jQuery 2.x系
海遊館（2.2.4）
http://www.kaiyukan.com/
トヨペットアタック（2.1.4）
http://oktp-game.jp/
株式会社THINK GREEN PRODUCE（2.1.1）
http://www.tgp.co.jp/
パルフェタムール ピュリエット（2.1.4）
http://www.puriette.jp/
913 | ヌフアントロワ オフィシャル（2.1.4）
http://neufuntrois.com/
north2（2.1.1）
http://www.north2.net/
株式会社エイチーム（Ateam）（2.2.4）
http://www.a-tm.co.jp/
株式会社 文宣（2.1.3）
http://www.bunsen.co.jp/
福岡市笹丘の耳鼻咽喉科（2.0.3）
http://haraguchi-jibika.com/
jQuery 3.x系
Music、City Culture、漫画のWebマガジン | ミーティア(MEETIA)（3.1.0）
http://meetia.net/
SUBARU（3.1.1）
http://www.subaru-global.com/ms2016/la/
株式会社AbemaTVのキャリア採用サイト（3.1.1）
https://recruit.abematv.co.jp/
MOZZ TOKYO(モズ・トーキョー)（3.1.1）
https://mozztokyo.jp/
ハチクラweb（3.1.1）
https://hachimantai.shop/
KAMIMURA（3.1.1）
http://typgestalt.com/
株式会社ハッシャダイ（3.1.0）
https://hassyadai.com/
FOURDIGIT Inc. 株式会社フォーデジット（3.1.1）
http://www.4digit.jp/
山田薫 KAORU YAMADA PHOTOGRAPHY（3.1.0）
http://kaoruyamada.com/
ノバレーゼ（3.1.0）
http://produce.novarese.jp/
交通コンシェルジュのMr.リード（3.1.1）
https://mr-lead.com/
確認できず
見落としてたらすいません。
任天堂ホームページ
https://www.nintendo.co.jp/
Kokopako
http://kokopako.fr/
Ralph Lauren
https://www.ralphlauren.co.jp/ja/
日清のどん兵衛
http://www.donbei.jp/
京都市中京区寺町通り
http://www.gallerymitsumi.jp/
Precious Time｜ディズニーホテル
http://www.disneyhotels.jp/precious/
雑感
意外に2系、3系あるなーという印象でした。
今回チョイスしたサイトがわりとオシャンティなサイトが多かったのでちょっと調査結果が偏っている気がしますが、ターゲットのブラウザ＝サイトのユーザ層とも言い換えられると思うので、サイトの特性がでていると思います。
ユーザの年齢層が広く、堅実なサイトは1.x系を採用しているところが多く、先進的なUIやグラフィカルなデザインを採用しているサイトは2.x系、3.x系という感じがしました。2.x系、3.x系も増えてきているけれどまだ1.x系が多いのですね。
ちなみに月虹製作では、1.11、1.12あたりを使用することが多いです。
サイトのユーザ層もありますし、よく使用するjQueryのプラグインなどが正常動作しないこともあったため、安定動作の実績がある1.x系のバージョンを採用してきました。
月虹製作では管理画面も基本オーダーメイドでその案件用にフルカスタマイズしており、これまで蓄積した自社ライブラリなどもあるため、1.x系からのバージョンアップにあまり積極的ではないのが現状ですが、上記の結果を見ると移行も視野にいれないとあかんな、と思いますね。
とはいえやはり案件のケースバイケースですね。柔軟的に月虹製作らしくいきたいと思います。
それでは。
参考
いよいよ正式版が登場！ jQuery 3での変更点と前バージョンからの移行のポイント
https://codezine.jp/article/detail/9545
jQuery本体のダウンロードと1.X系2.X系の違いと1.9系以降の注意点など
http://web-pc.net/jquery012
過去を切り捨てた新バージョン jQuery 2.0 登場！
http://blog.node.ws/?p=1993
メジャーアップデート！高速化したjQuery3.0の特徴
https://boel.jp/tips/vol50_jquery3.html
