2019年になってもまだjQueryを使用している理由
現在、jQueryを使用している人、そしてjQueryを取り去ろうとしている人がいると思います。jQueryの使用に対する一つの考え方を紹介します。 Why I'm still using jQuery in 2019 by Martin Tournoij 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は元サイト様のライセンスの元、翻訳しています。 2019年になってもまだjQueryを使用しているのはなぜですか Hacker News での議論 多くの人が「普通のJavaScriptを使えば、jQueryは必要ない」と主張しています。私は多くを必要としないので、jQueryを必要としませんが、確かに便利です。 You might not need jQueryのようなページでは、jQueryを捨てるのは簡単だというアイデアを売り込もうとしていますが、逆にこのページの最初の例
「jQueryでやっていたことを、サーバーサイド側を何も変えずにフロントエンド側をVuejsにしておくれよ」 - Qiita
どうしてもレンダリングはサーバーサイドがやっているものを変えたくない。でもフロントは変えろ。そんな要望ありますよね？ え？ありませんって？あったんですよ。 コンテンツの中身は可変なのでSSレンダリングしたいけど、APIを作ってFE側から取ってくるほどの内容でもない。その上で、レンダリングするHTMLにはVueのためのバインディングや条件式が書けない。そんな場合を想定します。 例えばアコーディオン 閉 開 こんなイメージのものを作って行こうと思います。 まずはサーバーサイドにレンダリングしてもらうHTMLです。 コード html <div id="accordion--wrapper"> <div id="accordion--component" class="accordion"> <h2 class="accordion--title">アコーディオンメニュー<i class="ico
混沌を極める jQuery のコードをいかにして Vue.js に頼らずに整理したか - Qiita
序 師走ですね。年の瀬が近づいてくると、酔っ払った元社員に絡まれることが稀によくあります。 私は jQuery から Vue.js への置き換えで何をやらかしたのか - Qiita 可能ならいきなりフロントエンドのライブラリを導入するよりも jQuery のみで MVVM パターンへ移行したほうがよかったかなぁと今になると思います。 結局のところ、jQuery で苦しんでいたのは、複雑な「状態」が表示やイベントハンドル系のコードとごっちゃになっていたから です。 うん、分かる。当時、この取組みを「大変そうだなー」と思いながら横で眺めていました。 まさか、続きを自分でやることになるとは夢にも思っていませんでしたが(｡◉ᆺ◉) ごあいさつ どうも、 @cesare と申します。 クラウドワークスでサービスの開発や運用を手がける傍ら、たまに機械学習とか VR とかに手を出して遊んでいます。 この
私は jQuery から Vue.js への置き換えで何をやらかしたのか - Qiita
東京の皆さんこんにちは。ご機嫌いかがでしょうか？ 私は今、旅行に来た新潟のホテルでこの記事を書いています。うまい酒にうまいメシ。なぜ我々は東京に固執するのでしょうか？私は今最高に幸せ（ 忘れてた 時間がなくて終わっていないアドベントカレンダーの原稿書きがなければもっと最高だったのに）です。美味しい日本酒のおかげで捗るこの記事は、きっと 12/2 に公開( 追記: ダメでした )されるでしょう。 さて、表題の「私は jQuery から Vue.js への置き換えで何をやらかしたのか」について語って行きましょう。ちょうどアルコールも入っているし、色々語れそうです。 忙しい人向けまとめ Q. jQuery でがっつり UI 組まれた Rails アプリで脱 jQuery を図るなら、気をつけないといけないところはどこでしょう？ A. 本当に jQuery が問題なのかよく考えましょう jQuer
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年前ぐらいから
プラグイン作成
query_plugin_authoring_ja.md 元文書: Plugins/Authoring - jQuery Wiki(t) プラグイン/作成 jQueryを使うことが快適になってきたら、プラグインの作り方を知りたくなるでしょう。それは正解です！プラグインとメソッドでjQueryを利用することは、非常に協力で、さらに、プラグインの中に最も有効な機能を抽象化することで、開発にかける時間を大幅に節約出来ます。この記事は、プラグインを書き始める際の基本的な概要とベストプラクティス、さらに気をつける必要のある一般的な落とし穴についての記事です。 目次 さあはじめよう コンテキスト 基本 メソッドチェーンの維持 デフォルトとオプション 名前空間 6.1. プラグインのメソッド 6.2. イベント 6.3. データ 概要とベストプラクティス 翻訳 さあはじめよう jQueryプラグインを書
jQuery Images Compare - 二つの画像をスライダーで比較
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました JPEGなど圧縮率によって画像の粗さやサイズが変わるフォーマットの場合、実際にその保存方法によってどう変わっているか比較してみないと分かりづらいでしょう。その時、ウィンドウを切り替えながら比較しても画面がチカチカしてしまってははっきりと分かりません。 そこで使ってみたいのがjQuery Images Compareです。スライダーを使ってスムーズに比較できます。 jQuery Images Compareの使い方 こちらがデモです。右と左で画像を重ねて比較できます。 スライダーを動かすと表示範囲が変わります。 動かしているところです。 jQuery Images Compareを使うとほぼ同じ構図の画像を二つ重ねて比べられます。対応しているブラウザはIE9以上になるので、幅広いブラ
JavaScript,jQueryの爆速コーディング、デバッグ方法論の勧め～実践向け逆引き(windows,chrome向け)～ - Qiita
※2017/4/21にオンロード時のデバッグ方法8を追記しました！ こんにちは！エイチーム引越し侍の加藤です！ みなさんJavaScript書いてますか？ console.logめっちゃ使うよねーって人は目からうろこのデバッグ方法を、 ケース毎に紹介していこうと思います。(僕はconsole.log使いません) サーバーにデバッグ用のコードをアップロードすること無いので、 消さずに意図に反してリリースしてしまう危険性がないのもお勧めです。 前提知識 F12で出てくるデベロッパーツール(Elements, Console, Source, Network)の知識 Ctrl+Shift+Fで外部ソース(js,css)に対して一括検索ができる HTML、CSSはElementsから直接修正⇒確認ができる jsはSourceから直接修正できる(Ctrl+Sで保存したらその状態で実行できる) jsは
【翻訳まとめ】jQuery 3.0 アップグレードガイド - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに jQuery 3.0が正式リリースとなったので、最新のアップグレードガイドをまとめようと思います。 原文から一部わかりやすいように言い換えたり、補足したり、省略したりしています。 注意: 長いです。主要な変更点は前回の記事【翻訳まとめ】jQuery 3.0 alpha リリースノートを参照してください。 jQuery Core 3.0 Upgrade Guide 全体像 APIを綺麗にしてバグを修正しました。 一部破壊的な変更があり 既に非推奨と公表していたAPIを削除 ドキュメントにない隠しAPIの削除 特定の入力値に対する
jQuery 3.0正式版がついにリリース。通常版のほかに、Ajax機能を省略したスリムビルド版も提供
jQuery 3.0正式版がついにリリース。通常版のほかに、Ajax機能を省略したスリムビルド版も提供 これまでjQueryは、、モダンブラウザのみをサポートすることで軽量化と安定化をはかった「jQuery 2.x」系と、Internet Explorer 8以前を含む古いバージョンのブラウザまでサポートする互換性重視の「jQuery 1.x」系の2系統が存在しました。 しかしマイクロソフトがInternet Explorer 8のサポートを今年1月に終了したことで、古いブラウザをサポートする必要が大幅に薄れたため、jQuery 3.0以降はモダンブラウザだけをサポートするjQuery 3.0系だけになります。今後jQuery 2.x／1.xへの機能追加やバージョンアップは基本的に行われません。 jQuery 3.0はメジャーバージョンアップとなるため、過去のバージョンと非互換の部分があり
jQuery 3.0 Final Released! | Official jQuery Blog
jQuery 3.0 is now released! This version has been in the works since October 2014. We set out to create a slimmer, faster version of jQuery (with backwards compatibility in mind). We’ve removed all of the old IE workarounds and taken advantage of some of the more modern web APIs where it made sense. It is a continuation of the 2.x branch, but with a few breaking changes that we felt were long over
Cash - サイズが1/10なjQuery代替 MOONGIFT
jQueryは古い、重いなどと言われつつも今なお一番使われているライブラリなのではないでしょうか。それだけ便利で使い勝手が良いということです。ただしみんなが全機能を使っているかと言われると怪しい気がします。 使っている機能がDOM操作ばかりなのであればCashに切り替えても良いかもしれません。Cashは軽量なjQuery代替です。 Cashの使い方 Cashはミニファイ+Gzipで3.5Kとなっています。jQueryの1/10です。なお、非圧縮の場合で20.6K、これはjQuery（287K）の1/14程度になります。サイズが小さいのは大事ですが、何よりコードが理解しやすいというのが良いのではないでしょうか。 サポートしている機能としては以下のメソッドになります。 addClass css data height off attr add removeData innerHeight on
なぜ人は必死でjQueryを捨てようとしているのか
最近はやりのjQuery Hateの謎に迫る！ （というか、これであってるのか教えてほしいという発表）Read less
【imageswitch】jQueryでウィンドウサイズによって画像を切り替える ｜ Tips Note by TAM
レスポンシブWebデザインではおもにウィンドウサイズによってレイアウトを変更していきますが、画像はHTMLとCSSだけでは最適化するのが難しいです。 backgroundプロパティであればメディアクエリで切り替えられますが、imgタグで指定したい場合には使えません。また、srcset属性を使えばウィンドウサイズや解像度によって画像を切り替えることができますが、IEはまったく対応していないので専用のプラグインを読み込む必要があります。 そこで使用しているのが、jQueryで画像ファイル名の一部を置換して表示する画像を切り替える方法です。 ウィンドウサイズを検知して画像ファイル名を置換する HTML側は.js-image-switchのついているimg要素のファイル名を以下のように変更して表示を切り替えていきます（ここでは仮に768pxとします）。.js-image-switchにはCSSでス
jQuery 3.0βリリース。2系と3系の違いについて
2016年に入り、jQuery 3.0βがリリースされました。はっきりとしたロードマップは出ていないものの、今年中には正式リリースするのではないでしょうか。 そこで今回はjQuery 2.xと3.xで何が変わるのか、紹介したいと思います。 jQuery Compatはなくなります 元々レガシーなブラウザをサポートするjQuery Compatも開発されていましたが、MicrosoftがIE8をサポートしなくなったのを受けて、jQueryもIEを非サポートすることになりました。その結果、jQuery Compatの開発は中止となり、jQuery 3.x一本になります。 Alphaで実装したshow()、hide()のインライン操作の排除 元々実験的なものでしたが、スタイルシートなどで設定された場合に必ずしも正しく動かないことが分かったためとしています。メソッド自体は残りますのでこれまで通りと
jQuery formBuilder - jQueryによる動的フォームが作成
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました マーケターの人たちはアンケートフォームを数多く作成します。そんな時に一回一回プログラマに依頼して作成してもらうのでは時間もかかりますし面倒です。 そこで使ってみたいのがjQuery formBuilderです。jQuery formBuilderを使えば自由にフォームが作れるので、後はそのデータを保存できるようにすればいいだけです。 jQuery formBuilderの使い方 jQuery formBuilderのデモサイトです。項目は自由にドラッグ&ドロップできます。 編集で細かいところを直せます。 リストなどは項目を設定できます。 実際のレンダリング結果を確認できます。 jQuery formBuilderは汎用的なフォームができますので、後はそのデータをJSONなりでまとめ
複数選択可能なselect要素をチェックボックス対応・一括選択可能にするjQueryプラグイン・Multiple Select - かちびと.net
複数選択可能なselect要素をチェックボックス対応・一括選択可能にするjQueryプラグイン・Multiple Selectのご紹介。なかなか便利そうだったので備忘録です。 複数選択可能なselectボックスを直感的な操作で手軽に選択できるようにしよう、というもの。グループ化したものも一括選択できるのが個人的には嬉しかったです。 動作サンプルです。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script src="jquery.multiple.select.js"></script> 本体とプラグインを読み込みます。 $('#foo').multipleSelect(); セレクタにはselect要素を指定します。 また、細かいオプション設定が可能です
ラジオボタンをスイッチデザインに変換するjQueryプラグイン
味気ないラジオボタンをスイッチデザインに変換してくれるjQueryプラグインです。 それ以上でもそれ以下でも無いのですが・・・。 jQueryプラグインを読み込むだけですぐに変換 jQueryプラグインを読みこめば、ラジオボタンが以下のようになります。 サンプルデモは以下に http://ahmad-sa3d.github.io/rcswitcher/ ダウンロードは以下からできます。index.html ファイルのソースを見れば、特に設定などの仕様を読まなくても直ぐにわかるかと思います。 ahmad-sa3d/rcswitcher · GitHub もう少しデザインにこだわりたい人 ボタンを手軽に変換出来るjQueryプラグインは他にも結構ありますが、こちらもオススメです。 fronteed/icheck · GitHub 是非お試しあれ。 それでは、また。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web制作者が備えておきたい最新版チートシートのまとめ、CSS3 Flexbox, CSSアニメーション, jQuery3, ES6, Bootstrap4など
複雑なtableでも対応できる、セルがどの列と行に属しているかをハイライトするスクリプト・「jquery-gettable」 - かちびと.net