「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が必要とされなくなってきたのは, 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 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は
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の謎に迫る！ （というか、これであってるのか教えてほしいという発表）
はじめてajaxを使うときに知りたかったこと - Qiita
はじめに 今更ですが最近ajaxを少し触るようになりました。 jQueryを使えば簡単にajax通信ができるため、単純なものであればそれほど実装は難しくないかと思います。 ですが少し複雑なことをやろうとしてみると、急にハードルが上がる気がします。 そこで自戒を込めて、ajax初心者の方に対してはじめにこれを知りたかったと思えるんじゃないかというものをまとめてみたいと思います。 ※jQueryを利用したajax通信を想定しています 目次 処理の順番を意識する $.ajax()の省略メソッドを知る イベントを知る デバッグ方法を知る 通信状況を想定する（タイムアウトを設定する） 連続クリックを防止する ← [New!] 連続通信を防止する ← [New!] 処理の順番を意識する ajaxを使用する場合は、非同期通信で処理したいケースがほとんどかと思います しかし単純にそのまま書いただけでは処理
エステと皮膚科で行われる脱毛の違いって何？
脱毛を考えるとき、病院でおこなうかエステでおこなうかで悩むと思います、どちらで施術したらよいのでしょう。 エステで脱毛をする場合と病院に行くのとは、違う特徴があります。 お互いのメリットとデメリットを良く調査して賢く選びたいですよね、ご紹介します。 続きを読む 女性で肌を見せるような服を着たいと思っていても、毛深いと勇気がいりますよね、そこで考えられるのが脱毛や除毛といった作業なのではないでしょうか。 しかし、こういった作業をしても「また生えてくるのでいちいち作業をするのが面倒」であったり「毛深くなるのではないか」といった心配が付きまといます。 除毛の場合、肌が荒れるといった心配もあるでしょう。 本当に毛深くなるのかという真偽のほどは今は置いておくとして、そんな時に考えられるのがエステでの脱毛や、医療機関での脱毛です。 広告による影響かもしれませんが、意外と皮膚科での脱毛を知らない方もいら
jQuery 3.0 and jQuery Compat 3.0 Alpha Versions Released | Official jQuery Blog
It’s been a long time since we did a major release, and you certainly deserve one. So we’re glad to announce the first alpha of jQuery 3.0! Despite the 3.0 version number, we anticipate that these releases shouldn’t be too much trouble when it comes to upgrading existing code. Yes, there are a few breaking changes that justified the major version bump, but we’re hopeful these breakages don’t actua
angularJS と jQuery に関する誤解を解く - nazokingのブログ
最近 angularJS に対する期待の低下が著しくてつらい。 なんだかんだで SPA から jQuery に戻った話 - ボクココ Angularの問題では はてなブックマーク - mizchi のブックマーク - 2015年5月18日 みんな使いどころを間違ってるんや。１年半くらい使ってて不満もあるけど自分のよく使う範囲では angularJS 最強だと思う。 angularJS が向いてるのは Single Page Application ではない angularJS が向いてるのは ◎ フォームのような細かい部品を多用 ＆ DOMツリーとデータスコープがほぼ一致していてユーザの入力をサーバに送ったりする webアプリ。管理画面、マイページ、業務アプリなど △ Single Page Application ← 簡単に作れるけどページ間の連携が必要ないならサーバ側で分けてしまった方
『意外と遅い、jQuery#clone』
この記事は、jQuery Advent Calendar 2014の4日目です。 jQueryネタで何か書こうとして下調べしていたら、意外なことに気づいたのでそれを記事化することにしました。 ノードのキャッシュ JavaScriptで大量の要素を組み立てる場合、都度HTMLをパースしたり、エレメントを生成したりといったコストを避けるために、あらかじめ1つだけエレメントを用意しておいて、それをcloneNode()することで賄う、というような手法が定石となっていて、jQueryでもclone()メソッドがあります。 コピーしないほうが…速い！？ ところが、jsPerfで測定していたところ、奇妙な現象が起きました。なんと、clone()せずに、都度HTMLからjQueryオブジェクトを生成するほうが速くなってしまったのです。 jQueryのソースコードを追ってみると、HTMLからDOMを生成す
[JavaScript] 最近のjQueryとの付き合い方いろいろ - YoheiM .NET
こんにちは、@yoheiMuneです。 今日はjQuery Advent Calendar 2014の15日目の記事として書きたいと思います。 何を書こうかなーと思っていたのですが、最近の自分とjQueryについてライトに書いてみたいと思います。 Special Thanks to https://flic.kr/p/92J4Qt 目次 利用者としての付き合い方 最近の案件ではjQueryラブの時代は過ぎ去ったようで、案件によってjQueryが使われたり使われなかったりします。 今の案件ではjQueryが導入されていますが、担当者がコロコロと入れ替わったらしく、様々なjQueryの使い方が散乱しています。 ほぉほぉこんな書き方もできるのかと学ぶことが多くて、ある意味有意義ですw。 jQueryを使う理由 最近感じるjQueryを使うメリットは、以下のようなことがあります。 何かサクッと作る
![[JavaScript] 最近のjQueryとの付き合い方いろいろ - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/c317869f558b1e5757165df2d3ac230f00b3dc87/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F349.jpg)
jQuery の関数をオーバーライドする方法 - 株式会社CFlatの明後日スタイルのブログ
今回は、jQuery を使って$('#hoge').hoge()とした時に、元のhogeの機能に加えて追加のコードが走るようにしたいですね、というお話です。 普通の JavaScript で関数をオーバーライドする方法 こちらは JSer なら常識ですね。 var orgHoge = window.hoge; window.hoge = function() { // TODO: 事前の追加のコード var result = orgHoge.apply(this, arguments); // TODO: 事後の追加のコード return result; }; なお、このコードを見て「処理が足りてないじゃないか」と言える方は、以降の話は全く必要ないかと思います。 jQuery の関数をオーバーライドする方法 では、jQuery で$('#hoge').hoge()とした時のhogeはどこで
jQueryの.each()に潜む罠 - 暮らしの技術
.each()の話 jQueryの.each()を使うと，JavaScriptのオブジェクトか配列を対象にした繰り返しを簡単に記述できる．*1 var list = [0,1,1,2,3,5,8,13]; $.each(list, function(index, elem){ console.log(elem * 2); }); // 0 VM2035:4 // 2 VM2035:4 // 2 VM2035:4 // 4 VM2035:4 // 6 VM2035:4 // 10 VM2035:4 // 16 VM2035:4 // 26 VM2035:4 で，このeachにはもう一つ書き方がある． var list = [0,1,1,2,3,5,8,13]; $.each(list, function(){ // さっきは引数にindex, elemを指定していた console.log(
preventDefault()で無効にしたイベントを有効にする方法
preventDefault()で無効にしたイベントを有効にする方法を紹介します。 １．はじめに preventDefault()は、「preventDefault()について」で紹介したとおり、実行したイベントがキャンセル可能である場合、イベントをキャンセルするためのメソッドです。 が、preventDefault()でイベントキャンセルしたあと、再びイベントを有効にする方法が分かりません。 ということで、preventDefault()で無効にしたイベントを有効にする方法について紹介します。 ２．jQueryを使ってpreventDefault()で無効にしたリンクを有効にする ここではa要素を使って、preventDefault()で無効にしたリンク先への遷移を再び有効にするサンプルを用います。 jQueryでは、preventDefault()メソッドをon()とoff()と組み合
jQueryを使うべきところ 〜 JSおくのほそ道 #009 - Qiita
「jQueryいつ使うの！？」 「今でしょ・・・？」 こんにちはほそ道です。 というわけで今回からjQueryに取り組みます。 ですが、いきなり飛びつかない！ まずはライブラリを疑うところからはじめていきたいと思います。 昨今、とりあえずサイトにjQuery入れとけ的なアプローチだったり ネイティブJSで書ける処理をわざわざjQueryで書いているような開発者を目にする事があります。 あえて始めに言わせていただきたい！ JSライブラリを使う事のメリット/デメリットを強く意識しましょう！ ライブラリ使う前にネイティブJS書けるようになりましょう！ 目次はこちら jQueryとは？ いつものごとく公式ページから拝借・意訳します。 高速・軽量・リッチなJavaScriptライブラリ。 様々なブラウザ環境で簡単なAPIからイベントハンドリングやアニメーションやAjaxがうまいこと実現できる。 多彩
pushStateとAjaxの組み合わせpjax - Qiita
site: http://develo.org/2014/04/29/1614.html サイトをpjaxを使って実装して思ったのですが、ページ移動がものすごくはやくて快適！今後サイト新しく作るときはpushStateとAjaxの組み合わせ検討してみてもよいかなぁって思いました！ pushStateとは Ajaxなどで、非同期なサイトを作る際に、 アドレスが変更されない問題をjsで解消してくれる便利なやつです。 少し前の話だとFlashサイトを作るときに#（ハッシュ）をつけてurlを管理したりしていました。 pushStateを使うと普通にページ遷移しているようにアドレスを変更することができます！ Ajaxとは ページを遷移せずに情報だけを非同期でとってきてサイトに描画する仕組みのことです。 pjax pushStateとAjax 2つを合わせてつくった仕組みのことです。 実際に作るにあた
jQuery : 要素の操作は必ずAPIを使うべし : typeOf 'aki_mana'
身近なところで話題になったので。 過去にも、「empty() とか remove() するより、DOMオブジェクトにアクセスして innerHTML = ”” した方が速いよ！」というブログエントリを投下する方が多かったのですが、「必ずAPIを使う」こと。 理由は、「メモリリークの温床だから」 GitHub で manipulation.js のソース読めば判るとおり、結構頻繁に jQuery.cleanData() が実行されてます。― jQuery.cleanData() メソッドは、data() API として独自に実装された「各要素と紐づけられるキー・バリューストア（メモリストア）」に対する処理なので、innerHTML を使う場合でも、jQuery.cleanData() を使うなら、まぁ問題無いです。 要するに、jQuery （Zeptoみたいな類似ライブラリもそう）は、常にH
jQuery.Deferredの使いどころ - fujimuradaisuke's blog
便利便利と言われつつも使ってみないと良さがわからないのがDeferred Object。身近なところで言うと、$.ajaxが返す、doneとかfailとかを呼べるアレもDeferred Objectです。使いこなすと色々な処理をコールバックを渡すよりもうちょっと綺麗に書けるようになります。 ということで最近プロジェクトで使ったパターンを中心に例をあげてみます。 コードはすべてCoffeeScriptの擬似コードです。 まず最初に便利な書き方を覚える Deferred Objectは$.Deferred()で作るわけですが、これには「作られたDeferred Object自体を引数にとる関数」を引数として渡せます。これを利用すると d = $.Deferred() doSomethingWithCallback -> d.resolve() d を $.Deferred (d) -> doS
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript・jQueryの改修・高速化のためのメモ - Qiita
