一休.comホテルページのスマホ版からjQuery依存を取り除くためにやったこと - 一休.com Developers Blog
一休.comでWebフロントエンドを開発している宇都宮です。 先日、一休.comホテルページのスマホ版から、jQueryを取り除きました。jQueryを取り除いた経緯、やったこと、結果について書きます。 ちなみに、ホテルページには以下のURLでアクセスできます（スマホで開くか、PCの場合はUAをスマホに偽装する必要があります） https://www.ikyu.com/sd/00001290/ なぜjQueryを取り除いたのか？ どうやったのか 何をやったのか jQuery.ajax() => fetch に置き換え fetchのpolyfillを採用した理由 DOM操作を標準APIに置き換え 要素の取得 show/hide addClass/removeClass html/text アニメーション $.ready() イベントフィルタリング jQueryの使用を防ぐ目印 jQuery削
jQueryが必要とされなくなってきたのは, Reactなどの他のフレームワークが登場したせいではなく, 標準DOM APIが進歩したおかげです
jQueryが必要とされなくなってきたのは, Reactなどの他のフレームワークが登場したせいではなく, 標準DOM APIが進歩したおかげです JavaScript Advent Calendar 2017 - Qiitaの2日目の記事です. 何故この記事を書こうと思ったか JavaScriptの定番ライブラリであるjQueryは, 最近以前と比べて必要とされなくなってきました. その理由はよく, Reactなどの他のフレームワークが登場したせいだと勘違いされています. しかし, jQueryが必要とされなくなってきた理由は標準DOM APIの進歩によるものです. この記事ではそれを書いていきます. なお, この記事ではReact Nativeについて触れる必要がないため, React DOMのことも一緒くたにReactと記述します. また, 私がweb開発を開始したのは3年前ぐらいから
jQuery から Vue.js へのステップアップ - Qiita
はじめに 最近耳にする Vue.js（ビュージェイエス） ってどんなもの？ jQuery とどう書き方違うの？とか、jQuery でやってたこういう事って Vue.js だとどうやるの？jQuery しか使ってないけど Vue.js も使ってみたいなぁ～と思っている人向けの小難しいことは省いた記事です。私もそちら側から来たものです。 Vue.js 日本公式ページ（日本語翻訳率が半端ないと評判） もともと「jQuery から Vue.js への移行」というタイトルでしたが、それだと jQuery を完全にやめる、的なニュアンスになってしまうので、少し変更しました🐹 jQuery と Vue.js の違い jQuery は、セレクタ操作に特化したライブラリで HTML の一部をちょっとだけ弄るには手軽に扱えます。更新のたびにセレクタから要素を探して操作をするため、複数の UI を連携させるよ
偏見？参考にならないjQueryのページの見分け方 - Qiita
最初に 独断！参考にならないJavaScriptページの見分け方 こちらの記事が秀逸だったので、触発されてjQueryに寄った記事を書いてみようと思います。 動機 jQueryも随分と広く使われるようになり、『JavaScript使えます』って意味合いの中にjQueryしか使えないってのも含まれてしまうようになったりするのも若干なんだかなぁとは思いますが、 それはさておき、「チームメンバーになんでこんな書き方してんの？」って聞いたらそういう書き方をしているページが検索で出てきたりして…そういう苦い思い出を思い返しながら、この記事を書こうと思います。 この記事の対象者 コピペで動けば良いやという人以外 コピペより先にまだ進めていない人 この記事を書いてる人のスペック PHPというかLaravelが好き JavaScript始めたのはprototype.jsの頃 ES6まだよくわかってないです
パフォーマンスを意識したjQueryの記述方法 - Qiita
id属性は原則、1ページに一つしかないため、idセレクタを使用した場合 指定の要素を取得できた段階で以降のチェックを行わないため、負荷が軽く済み class属性は1ページに複数存在する可能性があるため、最後までチェックを行います。 ですのでidセレクタと比べ処理時間が長くなります。 ページに一つしかないものはclassではなくid属性を付与した方が高速化という意味では妥当だと思われます。 もし取得したい要素にidが付いている場合はidを指定し、付いていなくても親要素や、そのまた親の要素からidで辿るような記法をするのが良いでしょう。 上記のclassをそのように取得する場合、下記のようになります。
【jQuery】最近気になったjQueryプラグイン2016年6月 | VOYAGER
個人的に最近気になったjQueryをまとめてみました。デモ・ダウンロードページを参照して下さい。 ライセンスは各自で確認して下さい。 anime.js
ｊQueryからReactに移ろうとしてる自分の個人的な理由
http://anond.hatelabo.jp/20160521163144 内容から誰が書いてるかわかるかもしれんけど、まぁスルーよろしく。 jQueryもそんなにガッツリ使ってるわけでもないし、Reactはまだリリース前の調査兼下地作りの段階だけど 正直言ってjQueryに戻るつもりは毛頭ないぐらいReact便利だと思ってる。 でもjQueryを捨て去れるかというとそれも無理だと思ってる。 その辺のことを適当に書いてみる。 用途社内サポート的なことやってて、サポートのテンプレート対応を省力化するために Webでツール作って人が対応するコストを減らすために使ってる。 チーム組んでガッツリ大規模ツール開発ってわけでもない。 jQueryで一つツール作ってリリースしてそこそこ人的コスト削れたのはよかったと思ってる。 jQueryは脳内DOMツリーとの格闘に疲れ果てた最大にして一番の理由がこ
jQuery3.0 アップグレードガイド - Qiita
2016/05/20にjQuery 3.0のリリース候補版が出てたのでアップグレードガイドを見てみます。 Overview jQuery3.0ではコードのクリーンアップとかバグ修正とかDeprecatedなコードの削除とか色々やってるよ。 Browser Support ・IE 9以降 ・Chrome/Edge/Firefox 最新のひとつ前のバージョンまで ・Opera 最新版のみ ・iOS 7以降 ・Android 4.0以降 jQuery Migrate Plugin 移行プラグインを用意してるから、以下の1行入れとけば1.12、2.2と互換するよ。 <script src="https://code.jquery.com/jquery-3.0.0.js"></script> <script src="https://code.jquery.com/jquery-migrate-3.
jQueryで楽になる部分、楽にならない部分、顧客が本当に必要だったもの - Qiita
俺も昔はお前のような jQueryスパゲッティジェネレーターだったのだが、膝にReactを受けてしまってな… 基本的な方針 とくにライブラリ設計者において、小さなモジュールを単機能で分割する以上、ライブラリ設計者は可能な限り依存を減らすことを求められます。node環境ならdependency hellの回避のため、フロントエンド環境ならファイルサイズを減らすためです。 ライブラリ設計者ならずともコードのポータビリティを維持するため、できるだけライブラリに依存しないコードを書くのが望ましいです。 Githubみてる限り、最近書かれるJSのライブラリの多くはjQuery非依存です。ユーザーから見る限りは、jQueryElement渡すかHTMLElement使うかぐらいの違いですけどね。 また、Angular, React等のSPAをスクラッチで設計する場合、気づいたらjQueryを使っていな
[WIP]これからの生JS & jQueryとの付き合い方 // Speaker Deck
All slide content and descriptions are owned by their creators.
![[WIP]これからの生JS & jQueryとの付き合い方 // Speaker Deck](https://cdn-ak-scissors.b.st-hatena.com/image/square/186eb2a82940b59c5c92c3099669ab595a939682/height=288;version=1;width=512/https%3A%2F%2Fspeakerd.s3.amazonaws.com%2Fpresentations%2Fe8eb376a63b64293987c99a6574d8363%2Fslide_0.jpg)
サジェスト等、多機能なタグ入力UI実装jQueryプラグイン「jquery-tagger」:phpspot開発日誌
GitHub - Fivium/jquery-tagger: jQuery plugin to turn a HTML select into an auto-suggesting, tagging widget サジェスト等、多機能なタグ入力UI実装jQueryプラグイン「jquery-tagger」 JSONやAjaxからアイテムをサジェストして表示可能。単一or複数選択等、調整も可能。 関連エントリ タグの修正で簡単にUIを変更できるAudioPlayer実装jQueryプラグイン「snd」 selectタグの機能を大幅に向上させる「selectivity」 タグによってアイテムをフィルタする仕組みを提供するjQueryプラグイン「Tagsort」
非jQuery環境ではどう書んだっけ?チートシート - Qiita
※追記 コメントでこの記事よりも断然質の良い記事を教えてもらいました。 @kabochaさんありがとうございます。 You Don't Need jQuery https://github.com/oneuijs/You-Dont-Need-jQuery 追記の追記。 日本語訳のお手伝いをさせていただきました。 github https://github.com/oneuijs/You-Dont-Need-jQuery/blob/master/README-ja.md [Qiita]もうjQueryは必要ない http://qiita.com/tatesuke/items/b9548dd484b01b139b74 jQueryが使える環境でコーディングした後、jQueryが使えない環境でコーディングしようとすると、「どう書くんだっけ？」となることが多いです。ということで分かる範囲でチートシ
どこまでスクロールしたかをイベントトラッキングで計測できるjQueryプラグインを作ってみた
スクロール位置をイベントトラッキングで取得する実験をしてみたついでに、処理をプラグイン化してみました。 特定の要素を指定した数値でエリアを分割して、どこまで表示されたのかを取得できます。 「scrollTracking.js」のデモページはこちら 「scrollTracking.js」のダウンロード ※ユニバーサルアナリティクスのみの対応になります。 設定方法 jQueryとプラグインを読み込みます。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="./scrollTracking.js"></script> JavaScript $(function(){ $('#contents').scrollTracking(); }); 今回
jQueryを使わない書き方 ajax, each, trigger, on/off, extend, deferred, animate, css編
昨年くらいから次世代JavaScript（ES2015 & 2016）やReactやAngularJSなどのフレームワークの普及により脱jQueryの動きが見られ始めました。そして2016年はさらに脱jQueryの動きが加速するのではないかと見ています。その最も大きな要因として1月12日に実行されたマイクロソフトによる旧IE（Internet Explorer 8, 9 ,10）のサポート終了が挙げられます。そんな訳でjQueryは便利ですが、特に使う必要もなくなってきているのが現状です。今回紹介するjQueryに頼りがちな処理をJSで書けるようにさえなれば、脱jQueryはすぐにでもできるのではないかと思っています。ぜひ参考にしてください。 はじめに脱jQueryに関して以下のような記事が年末に投稿されました。 You-Dont-Need-jQuery – jQueryを使わない書き方教
Like/Dislikeの機能をサクッと実装できるjQueryプラグイン「like-dislike」:phpspot開発日誌
GitHub - uagrace/like-dislike: JQuery rating plugin Like/Dislikeの機能をサクッと実装できるjQueryプラグイン「like-dislike」 Youtube等である機能を簡単に実装できます。設定はローカルストレージに保存しつつ、サーバ側にもデータを送るというタイプのようですのでサーバ側の実装が別途必要になります。 関連エントリ 自動でCSS背景画像をスクロールさせるjQueryプラグイン「jQuery.BackgroundScroll.js」 textareaに行番号を付けられるjQueryプラグイン モダンな年・月ピッカーjQueryプラグインを実装するチュートリアル
2015年総まとめ、jQueryのプラグインとスクリプト100選
毎年恒例のjQueryのプラグインとスクリプトの総まとめを紹介します。「100選」の名称は恒例なので、実際は100以上あります。 今年目立ったのは、ランディングページなどの縦長ページ系、スクロールエフェクト系・CSSやSVGのアニメーションでしょうか。あとレスポンシブ周りも単にサイズ変化に対応させるだけでなく、ユーザビリティを向上させるものが充実していました。 背景関連 SVG関連 縦長ページ関連 スクロール連動・パララックス関連 その他スクロール操作・補助関連 レスポンシブ関連 ナビゲーション関連 レイアウト関連 コンテンツ生成関連 コンテンツ紹介・ツアー関連 ソーシャル関連 スライダー・カルーセル関連 画像拡大・配置・キャプション関連 アニメーション関連 エフェクト関連 テキスト関連 タブ・アコーディオン関連 テーブル・リスト・チャート関連 フォーム関連 パネル・ボックス関連 モーダル
JSのグラフライブラリを今選ぶならHighchartsで決まり（2020年版） - Qiita
トレンド（世界）：すべての国/過去12か月/基準としたキーワードを外さずに数値を取得 トレンド（日本）：日本/過去12か月/基準としたキーワードを外さずに数値を取得 公式サイト：Interactive JavaScript charts for your webpage | Highcharts デモサイト：Demos / Stock Demos / Maps Demos / Gantt Demos GitHub：https://github.com/highcharts/highcharts npm：https://www.npmjs.com/package/highcharts CDN：https://code.highcharts.com/highcharts.js ライセンス：商用利用は有償、非営利向け無料ライセンスあり（詳細後述） 推薦しておきながら入門記事も少なくてとっつきにく
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「SEO×SNS×ブログ」で作る最効率化収益システム｜うきだいらブログβ
リニューアルに使いたいオシャレな動きCSS＆JSパーツまとめ20選 | 楽天ティップスRakutenTips
マテリアルデザインのPullして更新をWEB上で実現できるjQueryプラグイン:phpspot開発日誌