JavaScriptのデバッグ方法 – JSを嫌いにならないためのTips | POSTD
この記事のオリジナルは voxxed に投稿されたものです。 JavaScript関連の問題を抱えるチームをサポートする仕事を通じて、いくつか共通の問題点があることに気づきました。もしあなたもJavaScriptに対するイライラを感じているのであれば、この記事は何らかの助けになるかもしれません。おことわり：私がお教えするヒントはすでにご存知のものもあるとは思いますが、うまくいけば、多少なりとも有用な情報があるかもしれません。特にエンタープライズアプリケーションやCMSソリューションを構築する際に有効なヒントです。チームの誰もが話したがらないCMSのコードについてお話しします。いずれも必要に応じて採用できるものです。 debuggerステートメント 大半のブラウザでサポートされているにもかかわらず、JavaScriptを書く際に最も活用しきれていない機能の1つです。debuggerステートメ
JavaScriptを短く書くためのショートコード集
JavaScriptを短く書くためのショートコード集 知っておくとちょっとだけコードが簡潔に書けるかもしれないショートコード集です。 投稿日2014年12月25日 更新日2014年12月25日 小数点以下切り捨て 「Math.floor」で切り捨てですが、 Math.floor(12.6598); //12 数値の前に「~~」付けるだけでもできます。 ~~12.6598; //12 桁数の制御 「～e」に続く数字で桁数を制御できます。 1e1 //10 1e2 //100 1e3 //1000 1e4 //10000 1e5 //100000 2の累乗はシフト演算子 2の累乗は左シフト演算子（<<）でできます。 200 << 1; //400 200 << 2; //800 200 << 3; //1600 逆は右シフト演算子（>>）です。 200 >> 1; //100 200 >> 2
JavaScript イディオム集
JavaScriptでは、初見の人にはさっぱりわからないけれども、ある程度慣れた人は当たり前に使うイディオムが結構たくさんあります。知ってしまえば何てことはないので、私の知っている限りのイディオムとその意味を解説します。 （7/3追記: twitter等で教えていただいた内容を追加しました） +v （数値化） var v = "123"; console.log(+v + 100) // 223 console.log(v + 100) // 123100 vを数値化する方法では最もメジャーです。parseFloat(v) に比べて高速なのに加えて、parseFloatとは細かい挙動が異なります（例えば空文字列の場合、parseFloatならば NaN になりますが、 +v の場合はゼロになります）。必ず数値になることが保証されており、文字列などで数値化出来ない場合はNaNが返ります。 v
Promise Anti-patterns – Tao of Code
Promises are very simple once you get your head around them, but there are a few gotchas that can leave you with your head scratching. Here are a few that got me. Nested Promises You get a whole bundle of promises nested in eachother: loadSomething().then(function(something) { loadAnotherthing().then(function(another) { DoSomethingOnThem(something, another); }); }); The reason you’ve done this is
Javascriptのcall/apply関数のプロっぽい使い方 〜 JSおくのほそ道 #014 - Qiita
こんにちは、ほそ道です。 今回からしばしJavascriptの基本的な処理と概念を整理していきます。 頻出でありながら詳細を忘れてしまいがちなものや、有効な使い方がわからなくなりがちなもの等をまとめていきます。 今回はcallとapplyを取り上げます。 目次はこちら 基本仕様 callもapplyもFunctionオブジェクトのprototypeであり、用法が良く似ています。 関数.call()や関数.apply()という実行の仕方となり、実際に処理されるのは呼び出し側の関数です。馴れないと直感的じゃないかもしれませんが、何度かやってるとすぐ馴れると思います。 基本１：thisを指定する 第一引数は関数内で参照されるthisとなり、無理矢理thisを変更出来ます。 なんでもできちゃうJavascriptらしい処理です。 下記の例ではcallとapplyは同じ動作となります。
タスクランナーgulp入門
タスクランナーgulp入門 gulpはGruntと同じように様々なタスクを自動化してくれるツール(タスクランナー)です。 node.jsで開発されており、Sass/CompassやLess、StylusなどのCSSプリプロセッサーのコンパイルやCSS/JSの結合圧縮、JSHintによるバリデーションなど様々なタスクを自動で行ってくれます。 Gruntとできることはほとんど同じですが、Gruntよりタスクの流れがわかりやすく、JavaScript(node.js)で独自のタスクも簡単に記述することができます。 後発ということもありGruntよりプラグイン数は少ないですが、マニアックなタスク以外はそろっているので通常のWeb制作などでは問題なく利用できるでしょう。 node.jsのインストール node.jsが必要ですのでインストールしていない方はインストールしましょう。 公式サイトでインスト
Big Sky :: Vim で markdown 内に書かれているプログラミング言語をハイライト
vim に同梱されている markdown シンタックスは syn include に対応しているので指定で色が付けられる。 github 等では README.md やコメント欄に ```javascript function hasegawa_san_hidoi() { alert('ひどい'); } ``` この様な記述をする事で javascript の色付けが適用されますが、vim でも可能です。 ただしデフォルトでは無効にされているので以下の様に設定を行います。 let g:markdown_fenced_languages = [ \ 'coffee', \ 'css', \ 'erb=eruby', \ 'javascript', \ 'js=javascript', \ 'json=javascript', \ 'ruby', \ 'sass', \ '
タスクランナーgulp.js最速入門 - id:anatooのブログ
相変わらず仕事ではデザインやりつつJavaScript書いている。 タスクランナーとしてGrunt.jsを使っていたけれども、使ううちに段々不満がでてきた。遅かったり、記述が冗長になりがちでつらかったので最近になってgulpに乗り換えた。 gulpは良い。タスクは自動的に並列に実行され、かつストリームで処理されるので速いし、タスクの記述もストリームベースの書き方のおかげでGrunt.jsに比べるとだいぶ短くなる。 ただ、そこらにあるgulpをちょっと試しただけの日本語の記事やドキュメントをみてても実際のプロジェクトで使えるレベルまでの知識を得られず学習に一日かかった。 この記事では、gulpをまともに使えるようになるまでに必要な知識を書く。 導入とHelloWorld まずは導入。npmからgulpをインストールする。 $ npm install gulp -g $ gulp -v [gu
JavaScriptのコーディングTips集 - 主に言語とシステム開発に関して
JavaScriptのプログラミングに関するTips集。 主に中級レベルの話題とノウハウを掲載する。 なお，JavaScript初級〜中級をクイズ形式で網羅的に学習するためには，下記のエントリを参照。 JavaScriptの動かないコード (JavaScriptエラー集) http://language-and-engineering.hatenablog.jp/entry/20080912/1221297779 ※JavaScript以外のプログラミングについては，こちらを参照。 ピュアJSを極める： JavaScriptで，クラスを継承する方法 （複数のサブクラスから共通クラスのプロトタイプを参照する） JavaScriptでの例外設計 （throw，try-catch-finally構文のイメージと利用パターン） JavaScriptで，動的に追加されたイベントリスナの実行順序を保
1300の優良サイトが選んだ「AMD・遅延ロード」のベストプラクティス - ふろしき Blog
1300の優良サイトが選んだシリース、第3回は「AMDと遅延ロード」です。 JavaScriptファイルのロードのパフォーマンス向上を図るメカニズムを「AMD(Asynchronous module definition)」といいます。Webアプリ開発を行なうデベロッパの方は、今後重要な知識になるでしょう。 一方で画像ファイルのパフォーマンスを向上させようという「遅延ロード(Lazy Load)」というアイデアもあります。こちらはサイトのデザインそのものにも影響を与えることになるため、Webアプリのデベロッパだけでなくデザイナの方も、仕組みを知る必要があるでしょう。 今回も、1300の優良サイトが採用しているAMD・遅延ロード手法を確認し、ベストプラクティスが何かを探ってみようかと思います。 画像ファイルの非可視エリアロード問題対策 画像ファイルのサイズは、比較的大きくなるという特徴を持ち
grunt-este-watch めっちゃ便利やんけ - 音の鳴るブログ
grunt-este-watch で幸せになれるらしいと聞いて試した。 grunt-contrib-watch が重いので grunt-este-watch を試したら幸せになった - てっく煮ブログ そしたら凄く良かったという話です。 CPUの消費量は気にしていなかったのだけど、変更のあったファイルに対して柔軟にタスクが組めるのが非常に便利。今まで変更があるたびに関係ない部分もテストしていたり、それをなくすために複雑な方法を使ったりしていたけどだいたい解決した。しかも速くなった。 今までやりたかったこと 更新したファイルのみ jshint したい 更新したファイルに関連するテストだけ行いたい 更新したテストファイルのテストだけ行いたい 失敗したテストは次回もテストしたい こういうことをしようとしたとき、grunt-contrib-watch ではやりにくかった。というのもサブプロセスでタ
最速インターフェース研究会 :: 三項演算子の正しい書き方ってあるのだろうか
最近は、三項演算子を多用しているのだけれど、やっぱり人が使ってるのを見ると気持ち悪い。 http://d.hatena.ne.jp/brazil/20050921/1127314004 Test.Builder.globalScope = typeof JSAN != 'undefined' ? JSAN.globalScope : typeof window != 'undefined' ? window : typeof _global != 'undefined' ? _global : null; これは解読するのにやたら時間がかかる気がする。コロンの後が値なのか条件なのかわからないからだ。 俺ならこう書く。 Test.Builder.globalScope = (typeof JSAN != 'undefined') ? JSAN.globalScope : (typeof wi
js で利用する DOM の名前をどうやってつけたらよいのか - おもしろwebサービス開発日記
js で DOM をゴニョゴニョしたい時、きっと皆さんは id や class で DOM に名前を付けて、その名前を利用して js の処理を書いていると思います。 例えば<input type="button" class="update" value="更新" />のようなボタンがあったとして、 js 側で更新処理を書くときには下記のように書きます。 $('.update').on('click', function () { // update 処理 }) でもこれだと問題になるケースがあります。よくあるのが、マークアッパーとフロントエンジニアが分業していて、マークアッパーがデザインのために class 名を変えてしまい js が動かなくなるパターン。分業せずに一人で全部やってたとしても、時間が経つにつれ使っている class 名が js だけで使っているのか、css でも使っている
Backbone Weekly Newsletter
backbone.jsweekly The latest Backbone.js news, tips & code delivered directly to your inbox.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Home
Angular.js使ってみた
GitHub - airbnb/javascript: JavaScript Style Guide
– Tech Pro Shopping
Chromeのコンソールにテーブルを表示する - Qiita