非同期通信（Ajax）を行うとき、きちんとタイムアウト処理を入れていますか？ スマートフォンやタブレットでWebサイトを閲覧しているとき、地下に入ったりして通信ができなくなるというケースは頻繁に起こります。そんなとき、きちんとタイムアウト処理をしていないと、場合によってはいつまで経ってもローディングが終わらず、ユーザーが離脱してしまうということが起こります。質の高いWebコンテンツ制作のために、必ずタイムアウト処理は入れましょう。 jQueryでの実装例 たとえばjQueryでAjaxを扱うajax()メソッドには、timeoutという便利なオプションがあります。timeoutに指定した時間（ms）が経過しても通信が完了しない場合、エラー処理が実行されます。手軽に実装できるので、ajax()メソッドを使うときは必ず設定しましょう。 // 10秒経っても通信が成功しない場合は失敗処理を実行す

Reactがもっと広まって欲しいと思っている今日このごろ。React EuropeでJoseph Savona氏の講演でRelayについての「モヤっと」がいっきにかなり解消された気がするので、要点を本編を翻訳しながら自分なりにまとめておきます。 私の理解が誤っている可能性は十二分にありえるので、ご指摘いただければ幸いです。 はじめに ReactとFluxって組み合わせと共によく目にするのが↓の図。 矢印は一方向にしか進まないのが特徴で、わかりやすいってのがいろんなところで書かれているんですけど、 結局データをサーバからとってくるところってどうなってるの？ってのが疑問として残ります。つまり、図で表現すると↓の部分の仕組みがどうなっているかってところです。 その部分を、Instagramのようなサービスを例に説明しています。 クライアントはどのようにしてサーバからデータを取得すべきか まず、I

0ミリ秒、お待ちください〜 クライアントサイドのJavaScriptを使っていると、setTimeout()はそこそこ使う機会が来る関数かと思います。これは、 1. 実行する関数 2. 待機時間（ミリ秒単位） という2つの引数を取って、指定時間後に関数を実行する機能です。…そこまではいいのですが、ときどき第2引数に0を指定するような使い方があります。「0ミリ秒に実行」だと、そのまま実行しても何も変わらないような気がするのですが、いったいどういう意味があるのでしょうか。 JavaScriptはシングルスレッド postMessageやWeb Workerといった一部の機能を除いて、ブラウザ上のJavaScriptはシングルスレッドで動いています。つまり、関数に入っていないトップレベルコードなら読み込まれた時点から実行完了するまで、コールバック関数であれば呼び出されてからその関数を抜けるまで、

ログインしないと見れないページをスクレイピングしたい。 rvest パッケージを使えばお手軽にできる。 試しに slideshare にログインしてみる。 library(rvest) # ログイン状態のセッションを作る ------------------------------------------------------------ login_page <- html_session("https://www.slideshare.net/login") login_form <- html_form(login_page)[[1]] %>% set_values(user_login="hoxo_m@gmail.com", user_password="****") session <- submit_form(login_page, login_form) # ログイン状態で

基本的なことなのですが、すぐ忘れるので。。。 JavaScriptでDOMノードの任意のイベントを発火するには以下の様にします。 function triggerEvent(element, event) { if (document.createEvent) { // IE以外 var evt = document.createEvent("HTMLEvents"); evt.initEvent(event, true, true ); // event type, bubbling, cancelable return element.dispatchEvent(evt); } else { // IE var evt = document.createEventObject(); return element.fireEvent("on"+event, evt) } }

こんにちは、@armorik83です。ESLint 1.0.0がリリースされました（今朝Twitterで気付いた）。以前.eslintrcを晒したあとあまり面倒を見てなかったので、これを機に動向を追ってみました。 1.0.0新ルールまとめとしましたが、前回の記事以降にリリースされたv0.21.0からv0.24.0も扱います。全ての変更点やBreaking Changeは扱わず、新ルールだけ取り上げます。 v0.21.0 (May 10) https://github.com/eslint/eslint/releases/tag/v0.21.0 dot-location http://eslint.org/docs/rules/dot-location

やりたいこと markdown から、html と、pdf を自動で生成したい gulp ってなあに? htmlのビルドツール gulpjs/gulp ビルドツール? 最近のマークアップ界隈では、コードを書いてからリリースするまでにいろいろやることがある coffeescript の js 化 javascript の minify Sass の css 化 などなど... その辺の処理をまとめて自動化してくれるツール rake とか make の html 版だと思うと良さそう どんなのがあるの? メジャーなのは、Grunt gulpは、ビルドファイルが Grunt より書きやすいらしく、こちらに移るユーザが増えてきて、米国では gulp vs Grunt で大戦争中らしい 今回は、ビルドファイルが書きやすいと聞いて、gulp を試してみる インストール インストールは、npm を使う

クラスの落とし穴1 - プロパティの初期化 (この投稿) クラスの落とし穴2 - メソッドとクロージャ クラスの落とし穴3 - 継承 クラスの落とし穴4 - プライベート変数の実装 はじめに javascriptでもクラスを作成する事が多くなってきました。 しかし、「javascriptにはクラスがない」とよく言われ、実装側が擬似的にクラスを定義しています。 クライアントサイドで大規模開発が増えてきたため、オブジェクト指向の概念で実装したいと思っているのでしょう。 javascriptでは安易な疑似クラスの作成によって見事落とし穴にはまる事があります。 ここでは、本来javascriptにはないクラスをうまく実装する方法を順に追って説明します。 "落とし穴とは、 うまく動いているけど気がついていないだけで実はマズい実装の事 とします 簡単なクラスの実装 クラスの定義には幾つかの方法がありま

AngularJSのUnitテストは開発者ガイドではJasmineが紹介されています。 https://docs.angularjs.org/guide/unit-testing さらに、チュートリアルではJamineの実行環境としてkarmaのインストール方法が紹介されていますが、 karmaをインストールするにはnode.jsが必要なようです。 https://docs.angularjs.org/tutorial わけあってnodeをインストールしたくなかったので、Jasmineのみ（スタンドアローン）でAngularJSのテストを トライしてみました。 (Jasmine-2.0.1: https://github.com/pivotal/jasmine/blob/master/dist/jasmine-standalone-2.0.1.zip) ├── angular │   ├─

こんにちは、ほそ道です。 今回はビルドツール・モジュールローダ・altJS(JSコンパイラ)を組み合わせてさらにテストコードのおくのほそ道に入り込んでいきます。 今回Gulp + Webpack + Karma + Jasmine + ES6を使用しますが、 GruntだったりBrowserifyだったりMochaだったりCoffeescriptだったりに置き換えても基本的な考え方は近しい感じになるかと思います。 あとはここにSPAフレームワークとかを組み合わせればいよいよモダンなテストコードになっていきますね。 目次はこちら 今回解決すること・設計方針 Webpackとテストコードを組み合わせる。なんかバンドルしたりごにょごにょやってるどこにテストを挟むのか？を解決する。 ソースコードもテストコードもES6で書く。babelないしはaltJSのコンパイルごにょごにょやってるどこにテストを

{ "devDependencies": { "babelify": "^6.1.2", "browserify": "^10.2.4", "watchify": "^3.2.3" }, "scripts": { "watch": "watchify -t babelify src/app.jsx -o dest/app.js -v" }, "dependencies": { "flux": "^2.0.3", "react": "^0.13.3" } } import {EventEmitter} from 'events'; import React from 'react'; import AppDispatcher from './app_dispatcher'; const COUNTER_CONST = { UPDATE_COUNTER: 'UPDATE_COUNTER' };

この(0,eval)('this')はいったい何なのか。調べた。 調べた結果 これはindirect eval callを使用した、どのスコープでも必ずグローバルオブジェクトのthisを取得するためのテクニックであった。 ES5ではevalを直接呼び出すと、引数のコードはそのスコープで実行されるが、間接的にevalを呼び出すと、引数のコードは必ずグローバルスコープとなるそうだ。なので引数のthisは必ずグローバルオブジェクトとなる。ブラウザではwindowとなり、Nodeではglobalになるのだ。実際どうするかだが、eval関数を変数に代入し、その変数で実行すればよい。 // Nodeで実行 var obj = new (function(){ this.direct = eval('this'); var ev = eval;// 変数に代入 this.indirect = ev('t

AngularJSアプリケーション開発ガイド を読みながら勉強したときのメモ。 HelloWorld AngularJS を入手する 公式サイトから angular.min.js をダウンロードする。 HTML を書く <html ng-app> <head> <script src="angular.min.js"></script> <script src="helloWorld.js"></script> </head> <body> <h1 ng-controller="HelloWorldController">{{message}}</h1> </body> </html> angular.min.js を読み込む。 ng-app ディレクティブを付けたタグの中が、 AngularJS のテンプレートとして処理される。 ng-controller ディレクティブを付けたタグの中

こんにちは、ほそ道です。 今回はFunction.prototype.bind関数を取り上げます。 このbind関数も前回のcall/apply関数同様、開発者の意図が反映される関数かと思います。 目次はこちら bind関数の仕様 bind関数はFunction.prototypeに属し、新たな関数を生成して返します。 下記で仕様を見ていきます。 その1：thisを強制変更する 第一引数は関数内で参照されるthisを置換えます。 // 人間 function Man(name) { this.name = name; this.greet = function() { console.log("Hello, my name is " + this.name); }; } // ネコ function Cat(name) { this.name = name; } // 人間の挨拶 var

こんにちは、ほそ道です。 今回からしばしJavascriptの基本的な処理と概念を整理していきます。 頻出でありながら詳細を忘れてしまいがちなものや、有効な使い方がわからなくなりがちなもの等をまとめていきます。 今回はcallとapplyを取り上げます。 目次はこちら 基本仕様 callもapplyもFunctionオブジェクトのprototypeであり、用法が良く似ています。 関数.call()や関数.apply()という実行の仕方となり、実際に処理されるのは呼び出し側の関数です。馴れないと直感的じゃないかもしれませんが、何度かやってるとすぐ馴れると思います。 基本１：thisを指定する 第一引数は関数内で参照されるthisとなり、無理矢理thisを変更出来ます。 なんでもできちゃうJavascriptらしい処理です。 下記の例ではcallとapplyは同じ動作となります。

The Swift Programming Language ぼちぼちアップデートして行く予定 内容もぼちぼちあつくしていきたい About Swift（Swiftって） Swift Tour（Swift ツアー） The Basics（基本） Basic Operators（基本演算子） Strings and Characters（文字列型、文字型） Collection Types（集合型、Array とか Dictionary） Control Flow Function（関数） Closures（クロージャー） Enumerations（enum列挙型） Classes and Structures（クラスと構造体） Properties（プロパティ） Methods（メソッド） Subscripts（サブスクリプト） Inheritance（継承） Initialization

Help us understand the problem. What is going on with this article?

platform :ios, '8.0' source 'https://github.com/CocoaPods/Specs.git' pod 'Realm' > pod install Analyzing dependencies Downloading dependencies Installing Realm (0.90.5) Generating Pods project Integrating client project [!] From now on use `sample001.xcworkspace`.

: に続けてベースクラスを指定する。Objective-C では NSObject が基底クラス (ルートクラス) になる前提のようなものがありますが、Swift にはそのようなクラスはないようです。 サブクラスからベースクラス (スーパークラス) にアクセスするのは super を利用します。 class SomeClass : BaseClass { init() { super.init() // do something } } init はインスタンスの初期化時に呼ばれる特殊なメソッド。コンストラクタと言ってよいのかな。 オーバーライド サブクラスではベースクラスのメソッドやプロパティを実装し直すことができ、オーバーライドと呼びます。 メソッドのオーバーライド Objective-C ではオーバーライドするメソッドについて特に宣言などは必要ありませんが、Swift では Java

formの値は取れてるのにserializeしたら空だ!っていう問題が発生。 解決法が探してもなかなか見つからなかった、というか明記されているところがなかったのでメモ(それ以前の常識か？) <form id=regform> <div><input type="text" placeholder="---ID---" id="id" ></div> <div><input type="text" placeholder="---Name---" id="name" ></div> <select id="sex"> <option>Male</option> <option>Female</option> </select> <div><input type="text" placeholder="---Address---" id="address" ></div> </form>