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
ソーシャルボタンのJavaScriptでfunctionの前に「!」がついている理由 - hogehoge @teramako
結論から言うと、単なる格好付けです。 以下説明。 主要なJavaScript (ECMAScript 5th)では、functionは2種類あります。 文(Statement) *1 式(Expression) です。 所謂、「即時関数」と呼ばれるものはfunctionは式(Expression)である必要があります。 何故なら、関数実行を示す構文であるCallExpressionが式であり、それ以外存在しないからです。*2 JavaScript コードは文(Statement)の集合 JavaScriptのコードは文の集合と言えます。いきなり式が始まることはありえません。 とはいえ、 foo(); 1 + 2; といったものは成り立ちます。これは文(Statement)の解釈としてExpressionStatement(式を書いても良い)という、文が定義されているからです。 ともかく、文
ソーシャルボタンのJavaScriptでfunctionの前に「!」がついている理由
ソーシャルボタンのJavaScriptでfunctionの前に「!」がついている理由を調べてみました。 １．はじめに TwitterやPocketなどのソーシャルボタンのコードをみると、共通してscript要素の中にあるfunctionの前に「!（エクスクラメーション）」がついています。 Twitterの場合 <a href="https://twitter.com/share" class="twitter-share-button" data-via="yujiro" data-lang="ja" data-size="large">ツイート</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getE
jsで「最後までスクロールされた」というEventをキャッチする - Qiita
今までどういうふうに実装されているのか知らなかったので、 jquery_bottomを読み解いて理解したのでメモ。 jquery_bottomはこちら。 https://github.com/jimyi/jquery_bottom 必要な情報 要素の表示領域 要素のスクロール分を含めた高さ 要素のスクロール位置 この情報がわかれば、下記の情報を導き出せる。 「要素の表示領域」+「要素のスクロール位置」＝「現在の表示位置の高さ」 「現在の表示位置の高さ」さえわかれば、後はその値が「要素のスクロール分を含めた高さ」にどれだけ近づいているかで、スクロール位置を判断することができる。 実装してみる // スクロールさせる要素を取得 var elm = document.getElementById('scrollElement'); // 要素の表示領域を取得 var height = elm.o
スマートフォン対応でよく使うhtml、css、javascriptのまとめ
スマートフォン(ios、android)向けのウェブサイト・ウェブアプリを作る際に個人的によく使うhtml、css、javascriptの備忘録。 html関連 headタグ内での設定<!-- //デバイスサイズにあわせて表示領域を変更する --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- //電話番号のリンクを無効化 --> <meta name="format-detection" content="telephone=no"> <!-- //ホーム画面用アイコン --> <link rel="apple-touch-icon" href="icon.png"> <!-- //ホーム画面用アイコンの光沢を無効化する --> <link rel="apple-touch-icon
JSONを設定ファイル代わりに使う場合は JSON.parse → だめなら → eval のように二段階で評価するといいんじゃないかな - latest log
JSON.parse があまりにも眼鏡委員長なので、JSON.parse でエラーが出たら黒ギャル eval("(" + … + ")") で試す的なコードいれたらストレス減った via https://twitter.com/uupaa/status/294711990000168960 あ、さっきのJSONスタイルで書く設定ファイルのバリデーションの事ね。ユーザが設定ファイルにありがちなコメント( /* */ や // )いれてたり、 ハッシュの末尾のカンマ消し忘れてるだけでエラーで弾くのは忍びないので、 eval で jsとして評価して正しければOKでしょと via https://twitter.com/uupaa/status/294713049221324800 JSON を設定ファィル代わりに使うプロダクト多いけど、JSON.parse は些細なことでもエラーで弾くので、ev
iPhoneのclickイベントの挙動
iPhoneのclickイベントの挙動 本エントリーは軽めのjQuery Advent Calendar 2012最終日のエントリーです。 iPhoneはonメソッドを利用したclickイベントに結構クセがあるのでそれを解説したい思います。 <p class="target">ターゲット</p> このようなHTMLにclickイベントをバインドしていきます。 まずは次のようなコード。 $(".target").click(function(){ $(this).css("background","red"); }); sample これはちゃんと動きます。 次のコード。 $(".target").on("click",function(){ $(this).css("background","red"); }); これもちゃんと動きます。 sample これを踏まえた上で次からが動かないコ
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
ふだんのJavaScript開発環境 (Community Open Day 2012)
PowerPointのファイル: http://sdrv.ms/JV2DbO
表示が速過ぎても、誰も文句は言いません～CSS Nite「表示速度最適化」レポート
CSS Nite LP, Disk 23「表示速度最適化」 2012年6月30日、ベルサール九段下で「CSS Nite LP, Disk 23」が開催されました。CSS NiteはWeb制作に関わる方のためのセミナーイベントで、マークアップエンジニアやデザイナーの方が多く参加しています。今回のテーマは「表示速度最適化」でした。 パフォーマンス計測の方法、画像の最適化、モバイル向け最適化、そしてフロントエンドからバックエンドまでを考慮した設計段階からの最適化と、幅広いながらとても密度の濃い内容でした。 自己満足で終わらないためのパフォーマンス計測 サイバーエージェントの石本 光司（@t32k）さんから「Measuring Web Performance - 自己満足で終わらないためのパフォーマンス計測 - 」というタイトルで、サイトの最適化を行う上で重要なパフォーマンスの計測手段や分析方法に
後置インクリメントより前置インクリメントのほうが速いらしい
プログラミングを本格的に学び始めてから5年以上たつけど、先日まで勘違いしていたこと。 for文の例でよくfor(i=0; i<100; i++)と三つ目の式(再初期化式というらしい)を後置インクリメントで書くコードをよく見るもんだから、てっきりここを前置インクリメントにしたらiが0からではなく、1から始まるもんだと思ってました。 まあそれはともかく、タイトルについて。先日for文の三つ目の式が後置だろうが前置だろうが一緒の結果になると知ったと同時に、知りました。 まあ、言われてみれば前置インクリメントがただプラス１するだけの演算にたいして、後置インクリメントは１拍遅れてプラス１するからなぁ(ん？ 今ググって確認してみたけど、この理解もしかして間違ってる？)。 というわけで、JavaScriptで以下のようなコードを書いてChromeで試してみた。 var i, j; console.tim
JavaScriptで、もう連想配列の最後のカンマに悩まない！(※追記あり) · DQNEO日記
末尾に要素を増やしたい、または減らしたいときに問題が起こります 例えば" c : 3 "の行を単純に削除するとバグるので削除したいときに、" b: 2,"のカンマを削除する必要があります。 また、" d : 4 "を追加したいときに、" c : 3 "の後にカンマを入れる必要があります。 これは面倒くさいですね。 (エンバグについてはjslintなどのツールで防げばよいという指摘があったので修正しました。） より良いやりかた var x = { a : 1, b : 2, c : 3, dummy : null } このように最後に "dummy : null" というダミーの要素を書いておきます。 こうすれば、プロパティa, b, cはどれもカンマ付きで平等になります。 ぜひ一度試してみてください。 (もしかして常識だったらすみません。あとこの手法は for in で走査したいときはよく
Hatena Developer Blog
こんにちは。Webアプリケーションエンジニアの id:vilagia です。 この記事は『Inside GigaViewer for Apps』連載11回目の記事です。 今回は「GigaViewer for Apps」のバックエンドを担う「GigaViewer」のサーバサイド（以下 GigaViewer）において、開発がどのように進められているかについて紹介します。 GigaViewerは多くのサービスから利用されているマンガビューワです。サービスごとのマンガサイトやマンガアプリを提供する性質上、共通のしくみをお客様が利用されるだけではなく、個社個社のサービスのニーズに応じた開発も求めら…
Javascriptでtry-catchを使う
Javascriptでtry-catch構文が使えるって知らない人が多かったので書いてみました。 （最近じゃAjaxでほぼ必須だから認知度高いかもしれないけど。） try{エラーをキャッチしたい処理内容}catch(e){エラーをキャッチしたら行う処理内容} プログラミング言語に慣れている方はすんなり受け入れられると思いますが、どんなプログラムでもこの例外処理が大変重要です。 Javascriptではそんなに厳しく例外処理をする必要ないかもしれないけど、使ったら便利ってことがよくあります。 それは、ブラウザが返却するエラーをキャッチすることです。 IEではよくあるのですが、windowのリサイズや移動、またはファイルのアップロード時など、セキュリティ上の都合で、ブラウザからエラーが返されてしまいます。 そうするとその後の一切の処理ができなくなり大変都合が悪いです。 なので、このブラウザから
第2回 JSDeferredを用いたアプリケーション開発（その1） | gihyo.jp
JSDeferredの基本的な読みかた JSDeferredを使ったコードを読むときには、next() という関数がキーになっています。 リスト1 // next() のチェイン Deferred.next(function () { // 最初の next は Deferred.next alert(1); }). next(function () { // これは Deferred.prototype.next alert(2); }). next(function () { alert(3); }); 前回すこしばかり例を出しましたが、このように next を繋げていくことで処理の流れを表現します。 Deferred.next() と Deferred オブジェクトのメソッドとしての next() があることに注意してください。Deferred オブジェクトのメソッドとしての nex
JavaScript Patterns
A JavaScript pattern and antipattern collection that covers function patterns, jQuery patterns, jQuery plugin patterns, design patterns, general patterns, literals and constructor patterns, object creation patterns, code reuse patterns, DOM and browser patterns (upcoming). Patterns collected while developing 喜感网. General Patterns Function Declarations - creating anonymous functions and assigning t
スマホ対応の参考に。JavaScriptでウェブページがどのくらい拡大されているのかを取得する方法。
こんにちは。開発担当の林です。 iPhone / iPad のウェブブラウザでページを見ているとき、けっこうな割合でピンチイン・ピンチアウトすると思いますが、それがどのくらい拡大されているのかを取得する方法を書きます。 また、応用でピンチイン・ピンチアウトされても、見た目のサイズを維持するにはどのくらい拡大すれば良いかということにも触れたいと思います。 広告バナーなんかでよく使われてるアレの仕組みです。何かのお役に立てれば幸いです。 ウェブページがどのくらい拡大されているのかを取得する // ページの幅 ÷ 表示されている幅（この行だけでいいかな） var zoomer = document.body.clientWidth / window.innerWidth; // 以下で拡大率を目視できるでしょう alert( zoomer ); // 小数点がたくさんつくので、第二位までに丸め込
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
creatorish.com
設計から実装まで、今すぐ始める高速化
