「Reactの難しさ」を分解しよう - タオルケット体操
他のライブラリと比べるまえに まず、ReactとjQueryと比べるのはやめよう 「テンプレートエンジン」として捉えて、シンタックスを攻撃するのをやめよう ライブラリとしてのReactはとても簡単 Reactの思想を理解するのはチョットムズカシイ 環境構築が難しい JavaScriptそのものが難しい GUIが難しい jQuery時代からのパラダイムシフト フレームワーク関係者の情報量が多い SPAはとりわけ難しい まとめ ずっと感じてたもやもやを書き連ねたら長くなってしまったが、ぼんやりとReactとかなんか難しそうだしめんどくさいから新規案件だけどjQueryでやろっかなどうしよっかなーと迷っている人の指針になってくれればうれしい。 他のライブラリと比べるまえに まず、ReactとjQueryと比べるのはやめよう 出た時から延々と言われ続けているものの、やっぱり今でもjQueryとRe
【翻訳まとめ】jQuery 3.0 アップグレードガイド - Qiita
はじめに jQuery 3.0が正式リリースとなったので、最新のアップグレードガイドをまとめようと思います。 原文から一部わかりやすいように言い換えたり、補足したり、省略したりしています。 注意: 長いです。主要な変更点は前回の記事【翻訳まとめ】jQuery 3.0 alpha リリースノートを参照してください。 jQuery Core 3.0 Upgrade Guide 全体像 APIを綺麗にしてバグを修正しました。 - 一部破壊的な変更があり - 既に非推奨と公表していたAPIを削除 - ドキュメントにない隠しAPIの削除 - 特定の入力値に対する既存APIの振る舞いを修正 サポートブラウザ IE9 以上 Chrome, Edge, Firefox, Safariの最新版とそのひとつ前のバージョン Operaの最新版 iOS 7 以上のモバイルSafari Android 4.0以上
You Don't Need jQuery - Qiita
注意とお願い この記事の内容はもはや古いです。ここに書いている方法では動かないものをいくつか見つけました。参考にする際は動作をよく確認してから使ってください。 ひとつお願いがあります。「あれ、動かないぞ」というコードを見つけたら是非コメントか編集リクエストで教えてください。解決方法までなくても結構です。「これはもう動かないよ」という印をつけたいのです。 この記事はYou Don't Need jQueryの日本語訳と同じ内容です。 先日ひょんなことからYou Don't Need jQueryの日本語訳をさせていただきました。著者のCam Songさんからも快諾をいただけたので1、Qiitaでも公開させていただきます。 なお、本家の英語の説明は継続的にメンテされているので、この記事の情報は古くなっている可能性があります。 追記 この記事は当初は「もうjQueryは必要ない」というタイトルで
You Might Not Need jQuery
jQuery and its cousins are great, and by all means use them if it makes it easier to develop your application. If you're developing a library on the other hand, please take a moment to consider if you actually need jQuery as a dependency. Maybe you can include a few lines of utility code, and forgo the requirement. If you're only targeting more modern browsers, you might not need anything more tha
jQueryスライドショー「bxslider」がIE9,IE8,IE7で動かなかった件 | ハイジで歯維持
表題のとおりで bxsliderのかルーセルでスライドショーをやりたかったのですが、 IE9、IE8、IE7で動きませんでした。 jqueryは全くの素人で、というかプログラミング自体、 よく分かってない状態なのですが、 ネットで検索して、 以下のページなどを参考にさせていただきました。 jQueryスライドショー「bxslider」の使い方まとめ 最初に書いた、というかいろいろなページを参考にして 作ったコードはこちら。 イメージとしては横並びに二つの画像を常に表示させておいて、 一つずつずれて表示されていく、という感じです。 <!-- jQuery library (served from Google) --> <script type="text/javascript" src="../js/jquery-1.10.2.min.js"></script> <!-- bx
CSS3のアニメーションで動くドロワーをプラグイン無しで実装してみる
CSS3のアニメーションで動くドロワーをプラグイン無しで実装してみる 更新日: 2019/10/18 公開日: 2014/10/02カテゴリー: CSS » JavaScript ドロワーをCSS3とjQueryで実装今回実装するドロワーの仕様はこんな内容です。 ボタンのタップ、クリックでドロワー表示用クラスをjQueryで付けるドロワー表示時にドロワー以外の領域もしくはボタンをタップ、クリックしたら閉じるIE9以下でのアニメーションは諦め、最低限の機能を提供するようにするプラグインを使わずに、なるべくjQueryでの処理を増やさないというコンセプトなのでHTML構造はちょっと依存します。今回ご紹介する方法で実装したドロワーのデモはこちらで確認できます。 HTML部分まず、HTMLはこのようにします。ドロワーはラッパー要素と分離します。 <body> <div id="wrapper">
iPhoneで滑らかにスライドアニメーションさせる - プログラマ憧れプログラマ日記
iPhone向けのWebサイトで滑らかにスライドアニメーションをさせるときのお話。結論から言うと、現時点では-webkit-transform translate3dを使うのがベストなようです。 以下、テストで使用したコードです。サンプル画像としてappleのiPhone4の画像を使わせてもらいました。 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <style> * { margin: 0; padding: 0; } #slider { width: 601px; height: 100%; overflow-x: hidden; position: absolute; } #slider ul
jQuery.animate vs CSS.transition : まだプログラマーですが何か？
HTML 内のオブジェクトを移動させるには jQuery の animate メソッド を使うのが一般的（というか簡単）ですが、CSS3 の transition を使ってもできます。 プログラマー／デベロッパーの立場だと jQuery を使うことは珍しくないんですが、CSS はちと遠い存在で、基本は理解しているつもりでしたが、あまり接することがありませんでした。いい機会なので勉強がてら使ってみました。 さて、目的は似てるけどアプローチの異なる２つの手法、その違いはどこにあるのでしょう？ 簡単に言えば animate は CPU 処理、transition は GPU 併用の処理になります。PC だと見た目にもあまり差はないかもしれませんが、比較的 CPU 性能の劣るスマホ（それもちと古めの）だと、この差がバッチリでそう。グラフィックチップを併用することで非力なCPU環境でもスムーズなアニ
jQueryでアコーディオンを設定する際の注意
jQueryでアコーディオンを設定する際の注意 ネタ元：jQuery.js トピックのしつもんの89 アコーディオンを設定する際に動作がカクカクすることがあります。 サンプル この対応方法はアニメーションを設定したい要素にCSSなどでheightを与えてあげれば大丈夫です。 高さが可変でCSSでheightを設定できない場合は以下のようなコードを追加します。 $("dl dd").each(function(){ $(this).css("height",$(this).height()+"px"); }); サンプル アニメーションを設定する場合はheightを指定、これ重要です。 リキッドレイアウトの場合 リキッドレイアウトの場合heightを固定してしまうとウィンドウサイズを小さくした場合、ウィンドウが拡張されませんね。 その場合は以下のclickイベントの最初で高さを指定しておき
JSといえばjQueryだったWebデザイナーが、Reactを1年間使って感じたメリット｜dwango creators' blog（ドワンゴクリエイターズブログ）
はじめまして、ほそだと申します。昨年秋まで個人事業主の立場でドワンゴでお仕事させていただいておりましたが、いろいろ経緯がありまして中の人になりました。ドワンゴ歴はそこそこ長い新入りです。よろしくお願いいたします。 さて、今回はデザイナー（HTML/CSS/JSは扱えるいわゆる「Webデザイナー」）として1年間ほどReactを使ってみたので、そのメリットを書いてみようかと思います。 Reactとの出会い ReactとはFacebook製のJSライブラリです。 https://facebook.github.io/react/ WebアプリケーションのView部分を実装します。2014年の暮れにエンジニアの方々が魂を震わせているのを見て存在を知りました。2015年はReact元年な感じでしたよね。 僕自身、以前から比較的JSを書くタイプのデザイナーではありましたが、正直なところ自分が関わってき
jQueryとSizzleの関係について - console.lealog();
事の発端。 jQueryの使わない機能があまりに多いのでカスタムビルドすることにした Sizzleも外せることを知る(容量がgzipで20KB分くらい減る) 外すと何が変わるか気になる <- いまここ ってなモチベーションで調べた一連の内容です。 jQueryとSizzleの関係 あらためて一応。 「jQueryといえば」な以下のようなコード。 var $hoge = $('#hoge'); // こういうのとか var $fuga = $('.fuga'); // こういうのとか $hoge.find('.foo'); // こういうのとか $hoge.text(); // 実はこういうのも そう、いわゆるこのセレクタの実態がSizzleなのです。 正確にはもう少し他のメソッドにも関係があります。 jquery/sizzle で、そのSizzleがjQueryの中でどういう動きをしてるか
ジョン・レシグ - Wikipedia
ジョン・レシグ (John Resig、1984年5月8日 - )は、アメリカ合衆国在住のプログラマーである。jQueryの開発者として知られている。 人物[編集] ボストン出身。2005年ロチェスター工科大学卒業。コンピュータサイエンス学士。 かつて、Mozilla Corporation に所属。その後、非営利団体の Khan Academy に転職した。 JavaScriptのコードの開発を主としている。 2010年4月30日、ロチェスター工科大学の革新殿堂に入った[1]。 ソフトウェア・プロジェクト[編集] 以下のプロジェクトに貢献している。 jQuery クライアントサイドスクリプトを簡素化するためのマルチブラウザのJavaScriptライブラリ Processing.js ProcessingのJavaScriptへの移植 EnvJS ブラウザDOMのRhinoへの移植 Tes
#10 jQuery/Mozilla John Resig | gihyo.jp
JavaScript界隈で最近注目のライブラリ、jQuery[1]。今回のゲストはその作者にして、Mozilla CorporationでJavaScript Evangelistを務めるJohn Resigさん。日本の「JavaScript先進国」ぶりにはかなりのインパクトを受けたようです。 （左）小飼弾氏、（右）John Resig氏（撮影：武田康宏） 米国にはない 弾：JavaScriptに関わったきっかけは？ Resig：大学ではPerlを使っていて、Mozillaの前にいたスタートアップ企業に入ってから使うようになりました。以来、JavaScript一筋です。 弾：JavaScriptコミュニティのShibuya.jsで講演されましたが、日本のJavaScriptersはどうでした？ Resig：非常に楽しかったです。そもそも、JavaScriptのコミュニティが日本に存在し
JavaScriptでブラウザ判別用のclassをhtmlタグに追加する - ノウハウブログ - カンタローCGI
いつの時代も手こずらせる 昔ほどではないですが、現在も制作者を困らせるブラウザ問題。 「IE6対応すか？大丈夫っすよ！」と、ついうっかり安請け合いして泣きを見た人もいることでしょう。 1ピクセル合わせるのに一晩中サイトを徘徊した挙句、「結局できませんでしたー」なんてことも・・。 同じように表示するだけなのにどうしてこんなに大変なものか・・！ 以前はCSSのみで無理やりなんとかするCSSハックが流行りましたが、現在はJavaScriptが気軽に使える時代ですのでどんどん使って、正しくすっきりした健全なCSSを書いて、少しでも気持ちを軽くさせましょう。 頭にブラウザごとのclassを書くだけ 私のやり方ですが、後述するJavaScriptを読み込むことで、こんな感じでCSSが書けるようになります。 /* デフォルトのCSS */ p.message { background-color: bl
jQuery.extend マニアックス
jQuery の extend メソッドは便利なんだが複雑で忘れてしまいがちなのでメモしておく。 jQuery.extend の呼び出しパターンは次の４通り。 $.extend([deep,] target, obj1, [obj2, [obj3, ...]])$.extend([deep,] obj)$.fn.extend([deep,] obj)$(...).extend([deep,] obj) 全てのパターンで第一引数に [deep,] がある。これはオプションの引数で true を指定するとディープコピーしてくれる。 以下では分かりやすくするために deep オプションは省略した一覧を掲載する。 $.extend(target, obj1, [obj2, ...]])$.extend(obj)$.fn.extend(obj)$(...).extend(obj) だいぶシンプルにな
セレクターで要素を選択する - jQuery 日本語リファレンス
jQueryを使ってコーディングする上で、最も頻繁に出てくる作業のひとつがセレクターによる要素選択でしょう。 この便利さが、他のライブラリをおさえてjQueryがデファクトになりつつある要因のひとつでもあると思います。 殊にバージョン1.3になってからはエンジンがsizzleに変わり、更に柔軟性と実行速度を向上させています。 通常はidによる単一要素選択が多くなるかもしれませんが、上手に使うことでより一層、jQueryによる開発が楽しくなると思います。 セレクター書式確認用ツール しかし、セレクター書式は時に非常に難解です。 これを確認するために、簡単なブックマークレットを作ってみました。 以下のリンクを、Firefoxであればツールバーなどにドラッグして下さい。 IEならば右クリックして「お気に入りに追加」を選び、警告は無視して登録します。 [jQuery Selectors Inspe
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
漢は黙ってjQuery
Home
サービス終了のお知らせ
Reddit - Dive into anything
