http://plus.appgiga.jp/masatolan/2015/07/29/56567/
はじめてajaxを使うときに知りたかったこと - Qiita
はじめに 今更ですが最近ajaxを少し触るようになりました。 jQueryを使えば簡単にajax通信ができるため、単純なものであればそれほど実装は難しくないかと思います。 ですが少し複雑なことをやろうとしてみると、急にハードルが上がる気がします。 そこで自戒を込めて、ajax初心者の方に対してはじめにこれを知りたかったと思えるんじゃないかというものをまとめてみたいと思います。 ※jQueryを利用したajax通信を想定しています 目次 処理の順番を意識する $.ajax()の省略メソッドを知る イベントを知る デバッグ方法を知る 通信状況を想定する（タイムアウトを設定する） 連続クリックを防止する ← [New!] 連続通信を防止する ← [New!] 処理の順番を意識する ajaxを使用する場合は、非同期通信で処理したいケースがほとんどかと思います しかし単純にそのまま書いただけでは処理
第0回 東京 Web PerformanceでSIMD.jsを味見しました - pixiv inside [archive]
こんにちは、最近隔週でやっている社内週末ハッカソンでElixirとGroovyを触ってニヤニヤしているプログラミング言語好きのedvakfです。次はClojureをやってみたいです。 弊社で開かれた第0回 東京 Web Performance - SIMD.jsを味見するというイベントで、SIMD.jsに触ってきました。 SIMD.jsはJavaScriptで高速なベクトル演算ができるAPIです。Firefox NightlyやMicrosoft Edgeで試せるそうです。ほとんど情報が無いので、集まった各自がググりながら使い方を調べてね♪というかなりストイックな集まりでした。 MDNに記事があるのですが、引数が書いてなかったり、現在のFirefoxのNightlyとAPIの乖離があったりして、かなりアルファな匂いがします。 https://developer.mozilla.org/ja
![第0回 東京 Web PerformanceでSIMD.jsを味見しました - pixiv inside [archive]](https://cdn-ak-scissors.b.st-hatena.com/image/square/9a4626794f7148f941ffe2a9c48e4c5c0b4a1fd6/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F088eac5cc1b720eccbe1e86b68599ddb4be8abc9%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttp%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fd%252Fdevpixiv%252F20140325%252F20140325045217.png)
クラスの落とし穴1 - プロパティの初期化 - Qiita
クラスの落とし穴1 - プロパティの初期化 (この投稿) クラスの落とし穴2 - メソッドとクロージャ クラスの落とし穴3 - 継承 クラスの落とし穴4 - プライベート変数の実装 はじめに javascriptでもクラスを作成する事が多くなってきました。 しかし、「javascriptにはクラスがない」とよく言われ、実装側が擬似的にクラスを定義しています。 クライアントサイドで大規模開発が増えてきたため、オブジェクト指向の概念で実装したいと思っているのでしょう。 javascriptでは安易な疑似クラスの作成によって見事落とし穴にはまる事があります。 ここでは、本来javascriptにはないクラスをうまく実装する方法を順に追って説明します。 "落とし穴とは、 うまく動いているけど気がついていないだけで実はマズい実装の事 とします 簡単なクラスの実装 クラスの定義には幾つかの方法がありま
Rx.js, Immutable.js について - mizchi's blog
自分はImmutable.jsとRxをなぜ採用しなかったか、自分の考えを整理するために書き出してみる。 僕の理解が及んでいない無知のゆえのアレもあると思うので間違っていたら罵倒ブコメお願いします。 Immutalbe(.js) 扱う対象をイミュータブルにするのはたぶん間違いなく正しい。正しいが、現時点のエコシステムにおいてその必要性を示せてない。具体的に言うと、Immutable.jsの110kbのオーバーヘッドの配信負荷、読み込み負荷、開発者の学習コストを支払ったとき、それに見合う価値を提示できているのか？にまだ疑問が残る。 PureなJSでも、ただ単に目的のデータを作るだけなら、ほとんどのケースで組み込みのarray.mapとObject.assign(またはそのポリフィル)で代用できる。(勿論生成したオブジェクトに副作用を加えないことが前提になるが) あと型がない環境でImmutab
JavaScriptデザインパターン – 第1部：シングルトン、コンポジット、ファサード | Adobe Developer Connection
Basic JavaScript programming knowledge. Additional required other products (third-party/labs/open source) Query Library Download / Learn この記事は、JavaScriptでよく使用されるデザインパターンに関するシリーズ記事の第1部です。デザインパターンはプログラミングにおける実証済みの手法であり、特に、大規模なJavaScriptアプリケーションを大きなグループで作成する場合に不可欠なコードの保守性、スケーラビリティ、分離性を向上させます。 このシリーズ記事の第2部では、さらに、アダプター、デコレーター、ファクトリという3つのデザインパターンを紹介します。第3部では、さらに、プロキシ、オブザーバー、コマンドという3つのデザインパターンを紹介します。 シング
モバイル向けシングルページアプリに最適！ 軽量JSフレームワーク【Mithril】 - 基礎編
<!DOCTYPE html> <html dir="ltr" prefix="fb: http://www.facebook.com/2008/fbml"> <head> <meta charset="UTF-8"> <script src="mithril.js"></script> </head> <body> <div id="contents"></div> <script> /* * Modelを定義 * ページ内の文言データを管理 */ var PageModel = function() { this.data = m.prop({}); this.fetch = function(){ var that = this; m.request({method: "GET", url: "page.json"}).then(function(resp){ that.data(r
CSSアニメーションの終了をJSで検知してコールバックを実行できるJS:phpspot開発日誌
Detecting CSS Animation and Transition End with JavaScript ? Osvaldas Valutis CSSアニメーションの終了をJSで検知してコールバックを実行できるJS CSSアニメーションの終了と共にJSを発火できるので便利そうです。 関連エントリ CSSアニメーションで音楽に視覚効果を与えられる「css-visualizer」 ページスクロールに応じて要素を様々にCSSアニメーションしつつ表示できる「Story Box」 CSSアニメーションによるクリックアニメーション実装チュートリアル CSSでアニメーションを交えながらコンテンツをカッコよくフィルタリングするデモ WEB上でCSS3アニメーションを組み立てられる「Bounce.js」
シンプルでかつ最高のJavaScriptプロファイラ sjsp を作りました！ ― Webアプリケーションが複雑化する中でプロファイラに求められるものとは何か - プログラムモグモグ
あらすじ Web技術が複雑になる中で、JavaScriptのプロファイリングをとる方法とは。 プロファイリングを取るためのコードを手で書いてみましょう。 とてもシンプルで、かつ最高のJavaScriptプロファイラ sjsp を作りました。 本当にあった怖い話 上司 「とにかくJavaScriptのコードを速くしてくれ」 私 「分かりました、速くします」 (次の日) 私 「いいプロファイラがないなら作ればいいじゃない」 同じチームの人 「えっ？」 私 「最高のJavaScriptプロファイラ作ったよ」 同じチームの人 「「えっえっ？？？」」 私 「早速使ってみたらこことここが遅いって分かったよ」 同じチームの人 「「「この子は一体…」」」 JavaScriptのプロファイリングの難しさ 近年、Webブラウザーの処理速度は著しく向上し、その可用性の高さから、アプリケーションのプラットフォーム
9 JavaScript Libraries for Working with Local Storage — SitePoint
Stay Relevant and Grow Your Career in TechPremium ResultsPublish articles on SitePointDaily curated jobsLearning PathsDiscounts to dev toolsStart Free Trial7 Day Free Trial. Cancel Anytime. The HTML5 Local Storage API (part of Web Storage) has excellent browser support and is being used in more and more applications. It has a simple API and certainly has its drawbacks, similar to cookies. Over the
[JS]Webページのパフォーマンスをかっこいいストリーミングのグラフで表示できるスクリプト -Justice
デモページ TTFB(Time to First Byte)やロード時間やリクエスト数などが表示され、数値はグリーンは良好、イエローは注意、レッドは超過となっています。 当ブログのパフォーマンスも表示させてみました。 Justiceのパネルの右上にあるボタンをクリックすると、非表示になります。 コリスでも試してみました。 対応ブラウザの明記はないのですが、Chromeでは全部表示され、Safariでは一部ダメでした。 Justice.jsの使い方 使い方は、2通り。 Webページに直接埋め込む 外部スクリプトとして記述することで、Webページで利用できます。 <script type="text/javascript" src="justice.min.js"></script> <script type="text/javascript"> Justice.init(); </scrip
![[JS]Webページのパフォーマンスをかっこいいストリーミングのグラフで表示できるスクリプト -Justice](https://cdn-ak-scissors.b.st-hatena.com/image/square/67c41fbe6bd86b8c62801bb7a2b6354c6e4a9391/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015062403.png)
ES6で Promise, co, ramda, FRP(bacon.js)を試す
ES6で Promise, co, ramda, FRP(bacon.js)を試す Tweet 先日、Javascriptでちょっとしたツールを書いたのですが、いい機会なので、これを題材に ES6 について勉強してみました。 最初にES5で書いたロジックを、次のようにいろいろなスタイルで書き直してみました。 元のES5バージョン そのままES6にしたバージョン Promise を使ったバージョン coというライブラリとgenerator というES6の新機能を使って逐次処理するバージョン ramda.jsを使って関数型プログラミングのスタイルで書いたバージョン bacon.jsを使ってFRPのスタイルで書いたバージョン ソースは、ここ です。 まだ、私自身勉強中なのですが、これをもとに ES6 の機能や新しいパラダイムについて簡単に紹介してみたいと思います。 例題 書いたツールは、誰かがA
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JavaScript]使い分けるだけで今すぐデバッグ効率を上げる、consoleオブジェクトの関数 - Qiita![[JavaScript]使い分けるだけで今すぐデバッグ効率を上げる、consoleオブジェクトの関数 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/29821300e3d9051742e371101d5225ca57231dc5/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMzYxMDUlMkZwcm9maWxlLWltYWdlcyUyRjE0NzM2ODY5NTU_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9ZjU1N2ZhODFjYTg2ODJkMWY4MGUxZjc0YWJkNmMzMDc%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D271d4e0454f7aa6cd5c4d4a370a82b4b%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCVFNCVCRCVCRiVFMyU4MSU4NCVFNSU4OCU4NiVFMyU4MSU5MSVFMyU4MiU4QiVFMyU4MSVBMCVFMyU4MSU5MSVFMyU4MSVBNyVFNCVCQiU4QSVFMyU4MSU5OSVFMyU4MSU5MCVFMyU4MyU4NyVFMyU4MyU5MCVFMyU4MyU4MyVFMyU4MiVCMCVFNSU4QSVCOSVFNyU4RSU4NyVFMyU4MiU5MiVFNCVCOCU4QSVFMyU4MSU5MiVFMyU4MiU4QiVFMyU4MCU4MWNvbnNvbGUlRTMlODIlQUElRTMlODMlOTYlRTMlODIlQjglRTMlODIlQTclRTMlODIlQUYlRTMlODMlODglRTMlODElQUUlRTklOTYlQTIlRTYlOTUlQjAmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtcGFkPTAmcz03ZDZlYjg2NjE5YTIyNjFlZWMwZDkzNDY1NmZhMDlhMA%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBrYXNoaXJhMjMzOSZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPTFiZDAzNjk2MGNlOTM4ODkzNGJiYTFhMTJlZjhjMTAy%26blend-x%3D242%26blend-y%3D454%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-44K144Kk44OQ44O844O744OQ44K6%26txt-x%3D242%26txt-y%3D539%26txt-width%3D838%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%25231E2121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D28%26s%3D0589c8604af2e8ab2a0679424aa9732a)
ElectronでChatworkをデスクトップアプリ化 (Webview + badge) - Qiita
Class.prototype = { ... } が駄目な理由 - Qiita
Playstation mk2
スクロールしたらヘッダーの一部だけ固定する - Qiita
three.js - JavaScript 3D library
ES6 Promise Anti-Patterns and Best Practices
(0, eval)('this')とは何なのか - Qiita
