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は
You Don't Need jQuery - Qiita
注意とお願い この記事の内容はもはや古いです。ここに書いている方法では動かないものをいくつか見つけました。参考にする際は動作をよく確認してから使ってください。 ひとつお願いがあります。「あれ、動かないぞ」というコードを見つけたら是非コメントか編集リクエストで教えてください。解決方法までなくても結構です。「これはもう動かないよ」という印をつけたいのです。 この記事はYou Don't Need jQueryの日本語訳と同じ内容です。 先日ひょんなことからYou Don't Need jQueryの日本語訳をさせていただきました。著者のCam Songさんからも快諾をいただけたので1、Qiitaでも公開させていただきます。 なお、本家の英語の説明は継続的にメンテされているので、この記事の情報は古くなっている可能性があります。 追記 この記事は当初は「もうjQueryは必要ない」というタイトルで
非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開発者が一度は読むべきStackOverflow - Qiita
10. Checking if an element is hidden http://stackoverflow.com/questions/178325/checking-if-an-element-is-hidden jQueryで要素が隠れているかどうかを条件分岐で判断する際のベストプラクティスについて 9. How can I make a redirect page using jQuery? http://stackoverflow.com/questions/503093/how-can-i-make-a-redirect-page-using-jquery jQueryでリダイレクトを行う際の手法 ベストアンサーの説明が簡素にまとまっていてわかりやすい Query is not necessary, and window.location.replace(...) wil
Tutorialzine
In this book, you will find 100 advanced jQuery techniques that we have developed over the years as JavaScript programmers and authors for Tutorialzine, presented as easy to understand tips. If you are an experienced jQuery developer, or a beginner just starting out with JavaScript, this book is for you. You will learn neat tricks, find out about awesome plugins, and discover how to use (and abuse
Progate | プログラミングの入門なら基礎から学べるProgate[プロゲート]
「デジタル人材の育成」が企業の成長を加速させる。 e-Learningからハンズオン研修まで幅広く対応する法人向けサービス。
![Progate | プログラミングの入門なら基礎から学べるProgate[プロゲート]](https://cdn-ak-scissors.b.st-hatena.com/image/square/2ab30e2329cc1549a46525bef7d0686d8dca4b79/height=288;version=1;width=512/https%3A%2F%2Fprog-8.com%2Fimages%2Fogp%2Fdefault.png)
jQuery Coding Standards & Best Practices
All variables that are used to store/cache jQuery objects should have a name prefixed with a $. Always cache your jQuery selector returned objects in variables for reuse. var $myDiv = $("#myDiv"); $myDiv.click(function(){...}); Use camel case for naming variables. Use ID selector whenever possible. It is faster because they are handled using document.getElementById(). When using class selectors, d
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
そのコード、本当にjQueryが必要ですか？ネイティブ関数の代替Tips集 | ゆっくりと…
sitepoint から「本当にjQueryが必要ですか？」とタイトルのついた3本の記事を紹介します。 Do You Really Need jQuery? Native JavaScript Equivalents of jQuery Methods: the DOM and Forms Native JavaScript Equivalents of jQuery Methods: Events, Ajax and Utilities 言うまでもなく著者の Craig Buckler さん の趣旨は、「jQueryを使うのは止めよう」ではありません。ネイティブ関数で代替えできるのは、古い IE のサポートが必要なく、ごく簡単なケースに限られます。その代わりに得るものは「速さ」です。そこで、どの程度「速い」のかを所々 jsperf の結果で補ってみたいと思います。 また JavaScri
jQueryによるアニメーションエフェクトの基本 (1/5)
jQueryの特徴の1つは、Webサイトに動きを付ける「アニメーションエフェクト」を手軽に実装できることです。jQueryで実現できるのは、セレクターで指定したHTML/XHTML（以下、HTML）要素のサイズや位置、透明度を時間の経過とともに徐々に変化させ、動いているように見せる簡単なアニメーションですが、最近のWebデザインで用いられる“動きのあるUI”を作るのには重宝します。 今回は、jQueryに用意されているアニメーションエフェクト関連の命令を紹介します。 非表示状態の要素を表示するshow() show()は、CSSのdisplayプロパティの値が「none」、つまり非表示に設定されているHTML要素を、アニメーション付きで表示状態（display:bolck;）に切り換える命令です。要素の透明度を透明から不透明にしながら、サイズ（高さ／幅）を0から本来のサイズに変化させます。
爆速でわかるjQuery.Deferred超入門
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo!デベロッパーネットワークの中野(@Hiraku)です。これまで、JavaScriptで非同期処理を書く上での問題として、コールバック地獄やエラー処理に例外が使えないことなどを解説してきました。 これらの問題に対処するライブラリの1つであるjQuery.Deferredに関して、もう少し丁寧に解説いたします。なお、jQueryのバージョンは記事執筆時点の最新である、1.9.1を想定しています。 jQuery.Deferredとは jQuery.DeferredとはjQueryのバージョン1.5から導入された、非同期処理をうまく扱うための標準モジュールです。使いこなすことで、以下のような効果が見込めます。 非同期処理を連結
jQuery の on() と off() を理解する - tacamy--blog
初心者向けの本とかだと、イベントを jQuery オブジェクトの後に直接指定する、 $('.foo').click(); のような書き方で説明されている場合が多いけど、少し複雑なことをしようとするとそれだと困ることが出てきます。そんなときに便利なのが on() を使ったイベント設定です。 on() ひとつで bind() live() delegate() を表せる jQuery 1.7 で、bind() live() delegate() がすべて on() に統合されたそうです。 つまり on() の書き方によって、3 パターンの使い方ができるということです。 .foo という要素をクリックしたら何かするという例で、イベントの設定と削除の方法をそれぞれ書いてみます。 bind() $('.foo').bind('click', function(){...}); は $('.foo')
JavaScriptでバイナリファイルを扱う方法 - Tech-Sketch
HTML5によって、<audio>や<video>などメディアファイルを扱う機能が拡充され、JavaScriptからも音声ファイルが取り扱えるようになりました。 各ブラウザ毎に対応状況は異なりますが、これらの機能を有効活用するためAjaxリクエストによって音楽のバイナリファイルを取得し、再生するまでのJavaScriptをまとめてみました。 はじめに HTML5によって、<audio>や<video>などメディアファイルを扱う機能が拡充され、JavaScriptからも音声ファイルが取り扱えるようになりました。 ということで、各ブラウザ毎に対応状況は異なりますが、Ajaxリクエストによって音楽のバイナリファイルを取得し、再生するまでのJavaScriptをまとめてみました。サンプルは音声ファイルの受信、再生をCoffee Scriptで書いたものですが、バイナリファイルを取得した後の処理
jQuery.Deferred を使ってみる。 | バシャログ。
カーテンのない家には住めない事に気がついたminamiです。 jQueryにはjQuery.Deferred というオブジェクトがあります。jQuery 1.5 のころから実装されてだいぶ経っているのですが、今までなんとなくよくわからなくて苦手意識があったので改めて使ってみました。 jQuery.Deferred ってなに？ "deferred" の意味を調べると「延期された」「遅延された」などの意味があります。乱暴にまとめてしまうと、様々な処理が終わった後に呼ばれる（遅延された）処理を監視してくれるオブジェクトと言えます。 何を言っているのかわからん 文章で書くとまどろっこしいのでサンプルを作りました。1～4の処理が全て終わったら完了の表示を出します。 jQuery.Deferred を使った処理の管理 window.setTimeout() などのタイマー処理 jQuery.ajax
JavaScriptとコールバック地獄 - Yahoo! JAPAN Tech Blog
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo!デベロッパーネットワークの中野(@Hiraku)です。JavaScriptでサンプルコードを書く機会があったので、どんなインターフェースで提供するのが便利なのか考えてみました。よく問題になるコールバックのネスト問題について、一般的な話をまとめてみます。 お題 突然ですが、次のような処理を行う必要があるとします。 「0」を出力する 1秒待つ 「1」を出力する 1秒待つ 「2」を出力する これをプログラムで書くとどうなるでしょうか？ シェルスクリプトの場合（同期） たとえばシェルスクリプトで素直に書くと、次のようになります。
Deferred/Promisesと非同期処理 - 素人がプログラミングを勉強していたブログ
概念/仕組み Deferred/Promisesは非同期処理を簡単にするための取り決め。 callback hellと呼ばれているような、非同期処理によるコールバックのネストを軽減することができて非常に便利。 慣れれば便利だが、一見どう使えばいいのか分かりづらいので、少し解説を書く。 ここではPromises/Aという仕様を実装したQというライブラリを使うが、jQuery.Deferredなどもほぼ同じである。 まず、Deferred/Promisesは、関数のreturn、try/catchの非同期版である。 www.example.comの内容を取得し、正しく取得できたら中身を表示し、取得できなければエラーを表示する、というプログラムは 同期的なコードでは、 function get() { var req = new XMLHttpRequest(); req.open('GET',
jQuery で HTTP 接続するときの書き方: Days on the Moon
12 月 13 日に Kyoto.js の第 3 回 meetup で、「jQuery で HTTP 接続するときの書き方」と題した 5 分間のライトニングトークを行いました。以下にその内容を一部再構成して収録します。 こんにちは、nanto_vi です。今日は jQuery で HTTP 接続をするときの書き方について話します。 皆さん jQuery を使うことも多いかと思います。jQuery で HTTP 接続をするとき、古いサンプルだと次のような書き方が載っています。 $.ajax({ url: '/foo/bar', data: { baz: 'qux' }, success: function (data) { console.log(data); }, }); 接続完了時の処理をコールバック関数として $.ajax() に渡してやる形ですね。しかし、現在この書き方は非推奨となっ
「ノンプログラマーのためのjQuery生成ツール」作りました
ノンプログラマーのためのjQuery生成ツールを作ってみました。よければご活用ください。 ノンプログラマーのためのjQuery生成ツール サンプル表示つき このツールは「7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座」にインスパイアされて作った、初心者向けのお勉強ツールです。 コールバックなど複雑な設定はできませんが、基本的な設定とメソッドチェーンまでできるようにしています。 追記：イベントとAPIをプルダウンメニューで選択できるようにしました。過不足あればご指摘ください。 追記：イベントとAPIのプルダウンメニューでツールチップを表示できるようにしました。ざっくりした内容ですが、これでイベントやAPIの使い方が分かるようになります。 ツールチップを表示 やっつけで作ったので中のコードはかなりひどいです。あしからず。 １．使い方 本エン
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptをまじめに考えました+