JSer.info #680 - jQuery 4.0.0 Betaがリリースされました。 jQuery 4.0.0 BETA! | Official jQueryBlog IE 10以下のサポートを終了、非推奨のAPIを削除、jQuery prototypeオブジェクトからArrayメソッドを削除、focusとblurのイベント順を上書きしないように変更されています。 また、FormDataのサポート、自動的にJSONPへfallbackする挙動を削除、コードベースをAMDからESMへの移行、Trusted Typesのサポートなども含まれています。 jQuery 5では、IE 11のサポートを削除する予定となっています。Storybook 8 Betaがリリースされました。Storybook 8 Beta デフォルトのコンパイラをBabelからSWCに変更、モバイルUIの改善とい
一休.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/removeClasshtml/text アニメーション $.ready() イベントフィルタリング jQueryの使用を防ぐ目印 jQuery削
エムスリーエンジニアの岩本です。 この記事は エムスリー Advent Calendar 2018 の23日目の記事です。React.jsやVue.jsを使えれば、開発のベストプラクティスなどがあるので、メンテナンス性の高いプログラムはずいぶんと書きやすくなったと思います。本当に仮想DOMの功績は大きいですね。 しかし、世の中にはそういったライブラリを使うことができないプロジェクトもあるわけです。古すぎて、一部分だけ最新のソースコードにすることが憚られたり、サイズの問題でライブラリを入れることができなかったり。。。 その場合どのように書けばメンテナンス性の高いプログラムを書くことができるのでしょうか。そこでIE6時代からJavaScriptをもりもりと書いている私なりのベストプラクティスを紹介します。 そもそもなぜメンテナンス性の悪いコードとなってしまうのか jQueryではセレクタで
序 師走ですね。年の瀬が近づいてくると、酔っ払った元社員に絡まれることが稀によくあります。 私は jQuery からVue.js への置き換えで何をやらかしたのか - Qiita 可能ならいきなりフロントエンドのライブラリを導入するよりも jQuery のみで MVVM パターンへ移行したほうがよかったかなぁと今になると思います。 結局のところ、jQuery で苦しんでいたのは、複雑な「状態」が表示やイベントハンドル系のコードとごっちゃになっていたから です。 うん、分かる。当時、この取組みを「大変そうだなー」と思いながら横で眺めていました。 まさか、続きを自分でやることになるとは夢にも思っていませんでしたが(。◉ᆺ◉) ごあいさつ どうも、 @cesare と申します。 クラウドワークスでサービスの開発や運用を手がける傍ら、たまに機械学習とかVR とかに手を出して遊んでいます。 この
こんにちは!dely でフロントエンドエンジニアをしている @all__user です。 この記事は dely Advent Calendar 2018 の8日目の記事です。 Qiita: https://qiita.com/advent-calendar/2018/dely Adventar: https://adventar.org/calendars/3535 昨日は、iOSエンジニアのほりぐち( @takaoh717 )が「iOS版クラシルの開発からリリースまでの流れ」というタイトルで投稿しました。tech.dely.jp iOS 版 kurashiru の開発体制の遍歴がよく分かるような内容となっていますので、ぜひチェックしてみてください! はじめに ここ一年間で Web 版 kurashiru のフロントエンドはRails からVue の SPA へと少しづつ置き換えられ
Did you know that you can incorporateVue into your project the same way that you would incorporate jQuery — with nobuild stepnecessary? Let’s cover some common use cases in jQuery and how we canswitch them over toVue, and why we’d even want to do so. In this article Sarah Drasner shows you thatVue is also a pretty nice abstraction for small sites that don’t need a lot of overhead. Due toVue
タイトルは半分ネタですが、かなり陰湿なトラップに引っかかってしまったので記録として残します。 理由その1. thisバインドが効かない 有名なやつですね。jQueryのイベントハンドラーがthisを渡せなくなるというものです。 $('.hoge').on('click', fucntion() { $(this) // これができなくなる }); これはアロー関数が呼び出し方に関係なくレキシカルにthisを束縛してしまうためです。一応解決策は存在します。 理由その2. 予期していないreturn falseが起きる 今回問題が起きた原因です。 a要素をクリックした時、イベントハンドラーがfalseを返すとページ遷移がキャンセルされるのは聞いたことがあると思います。 $('a').on('click', function() { // ... return false; // クリックされた
A safe and modern home for the webOpenJS promotes the widespread adoption and continued development of keyJavaScripttechnologies worldwide.
Frontend environments evolve rapidly nowadays and modern browsers have already implemented a great deal of DOM/BOMAPIs which aregood enough for production use. We don't have to learn jQuery fromscratch for DOM manipulation or event handling. In the meantime, thanks to the spread of frontend libraries such asReact,Angular andVue, manipulating the DOM directly becomes anti-pattern, so that jQu
Senior Mindset BookGet promoted, earn a bigger salary, work fortop companies Start with a free chapterGet a free chapter from the Senior Engineer Mindset book and a sample audiobook chapter, followed by a Senior Mindset 101email course.React+Flux can do injust 137lines what jQuery can do in 10 XKCD Automation I waste almost 15 minutes a week on an annoying little task. Everyemail I send to a
JSer.info #236 - jQuery 3.0αがリリースされました。 jQuery 3.0 and jQuery Compat 3.0Alpha Versions Released | Official jQueryBlog まだα版ですが、.show()と.hide()の仕組みの変更、jQuery.DeferredがPromise/A+互換になり、2.xでdeprecatedとなっていたメソッドの削除などが行われています。 また、以前断念したrequestAnimationFrameによるアニメーションがjQuery 3.0では有効化されています。 .show()と.hide()については以前の挙動に依存したものが多そうなので、α版でどうなるかを試してフィードバックをしてみるといいかもしれません。 A Formal Commitment to New Language Fe
Select DOM elements byCSS selectorquerySelectorAll - aCSS selector method like the one provided by jQuery. jQuery: $(selector), $(selector, context) Select elements by class namegetElementsByClassName - a fast way of selecting DOM elements by class name in modern browsers. Does not work in IE 8 and below. jQuery: $('.foo') Select elements by tag namegetElementsByTagName - a fast and cross browse
「Reactが素晴らしい理由は、UIをアプリケーションの状態の純粋関数にできるからだ」いうような話を聞いたことがあるでしょう。しかしそれだけではなく、不変性と仮装DOMを利用して動作するということも聞きますよね。その上、保存、読み込み、取り消し、それにタイムトラベル・デバッグと呼ばれるすごい機能まで自由に手に入れられる。でも知っていますか? Reactの核となるアイデアを利用し、その恩恵に預かるのにこれらのことは必要ありません。jQueryの数行にしてお見せします。 <span id="colored-counter">0</span> <input id="color"></input> <button id="inc"></button> <script> $('#color').on('keyup', function () { $('#colored-counter').css('
Recently I was prompted by Daniel Lamb to try and find old versions of jQuery for his jQueryArchive project. Thankfully I was able to find one in the InternetArchive fromjust a couple weeks afterits release, in January 2006. I then took that opportunity to put that code online and I used the new Genius annotation beta to markit up with abunch of thoughts and memories around the release of th
jQueryを使わないでアニメーションしたくはないでしょうか 別に興味ないですか。私は興味あります。 ブレイクスルーJavaScriptフロントエンドエンジニアとして越えるべき5つの壁―オブジェクト指向からシングルページアプリケーションまでを注文しました。 jQueryその先へ、とかそういう文言が今熱いのか。 積ん読たまってて読めるかまったくわからないんですけど。 書籍とは離れますが、jQuery を使用しないでどこまでアニメーションに耐えられるのか、ちょっとやってみました。 https://github.com/tkdn/postjQueryAnimate ※ jQuery は2~使ったので、IE10~,Chrome,Safari,Firefoxいずれも最新くらいがターゲット Velocity.js という選択 最初はCSSアニメーションでなんとかと思ってたんですが、途中で挫折、jQu
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く