JSXをサポートしているので、より完全なES6実装が欲しい場合はBabelを使うとよい。そんな感じで、タイトルと比べて内容がスカスカではあるが、ここ最近、トランスパイラが急に進化してきてES6が使える環境がいきなり整ってきたような雰囲気があるので、そろそろ使い始めてもいい頃だと思う。いつのまにかブログの更新が数ヶ月空いてしまったけど生きてるので、今年も頑張ってブログを書いていきたい。01:48io.jsとES6とトランスパイラまわりの現状Tweet広告を非表示にするもっと読むコメントを書く2014-11-05JSライブラリ/フレームワークの良い、悪いメモ※ただのメモで、未来志向なのであまり真に受けてはいけない。良いっぽいReact.js早速い/コンポネント志向/APIの設計がいい。JSXと他のトランスパイラの組み合わせという問題はあるPromiseネイティブに入った、誰もが使ってるTypeScriptES6時代でも存在意義のある言語。Flowの動向に注目Backbone.jsModelとEventを使う/Viewは使わなくていいLodashUnderscore.jsをよくしたやつGulpGruntより良いという意味で。DOM)のPolyfill実装のpaltform.jsで、これはpolyfillなのでいずれ消えるそうである。ヘビーなpolyfill実装に依存しているブラウザが多いので、現時点ではあまり勧められないのも事実だと思う。Automation(ターミナルからマウス座標をゲットする)英語で調べたけどぜんぜん出てこないので英語で書く。Yosemiteでターミナルからマウス座標をゲットするコマンドはこれ。0;}は厳密にはJavaScriptでは正しく動くとは限らない。上記コードのどこが間違っているのか、下記の解説を見る前に考えてみてほしい。こんなシンプルなコードにも、バグがある。解説containsがどのように動くべきなど明白だというのは間違いである。実は微妙な問題がたくさんある。falseとなってしまう。明らかに意図した動作と異なり、バグである。falseという意味不明なJavaScriptのNaNの仕様によるもので、indexOfも同様に===を使用しているので、こうなる。NaNはほぼ全ての言語で採用されているIEEEの数値処理の仕様に基づいている(つまり不可解な仕様ではなくごく一般的な動作な)だけで、JavaScript自体の仕様上のミスではなかった。NaNまわりはハマりやすいポイントではあるので、気をつけたい。trueとなるべきだ。他にも、微妙な問題がある。})ではalertは一度も呼ばれない。これを仕様と呼ぶのかバグと呼ぶのかは考え方次第であるが、とりあえずforEachやindexOfにあわせて、holeは検索に含めないことにする。}}は使ってはいけない。=1;の'z'までループしてしまうからだ。'a';があると動作がおかしくなるからだ。alert(1)されるのようにforEachとindexOfはプロトタイプチェーンを辿るので、この部分も難しいところであるが、今回はcontainsではプロトタイプチェーンを辿らないように実装した。一点、これは余談だが、扱いの微妙な値がJavaScriptにはある。同じようにみえる値だが、両者は厳密には異なる。-Infinityであるからだ。0であるので、ここでは慣例に従って-0と+0はcontainsでは区別しないことにする。indexOfでは検索しはじめる位置を第3引数で指定できる。これに-Infinityを指定したらどうだろうか。0となり、きちんと、一瞬で答えが返ってくる。これも実装すべきだろう。全ての値で動く実装を下記にあげる。false;}実行結果。0が常に動かないことへ対処は、真面目にやろうとすると長い。穴のある配列を作らないように作るのがベターである。underscore.jsなどでイベントをthrottleやdebounceさせて対処していることが多い。0)でthrottleさせることも多いと思う。scrollイベントは画面のフラッシュレートと同期していないので、マウスやトラックパッドの動きに応じて大量に呼ばれていて、setTimeoutも画面のフレッシュレートとは関係なく内部の実行タイマーに応じて動いている。0)でthrottleしてもまだ無駄が多い。実験してみたところ、requestAnimationFrameを使うと少しだけマシになることがわかった。100)くらいを使うと良いと思う。341これは、下記のテストコードを適当なページで走らせて上下にスクロールさせた結果。21:20scrollイベントが呼ばれすぎることへの対処Tweet広告を非表示にするもっと読むコメントを書く2014-08-27forも明示的な加算も使わずに「1から100まで出力する」1から100までforを使わずに、さらに明示的な加算も使わずに表示するもの、自分で思いついたバージョンを書いておく。INTERVAL);自分の環境ではINTERVALは700まで安定的に動作した。テストを書いたので、自分の環境で正常に動作する範囲をテストしたい場合、下記のコードを使うと良い。output.txt|./test.zshとしてSuccessが表示されれば動いている。interfacesというDOMを抽象化したようなView操作のライブラリをリリースした。Githubが出してるエディタのAtomが実験的にReactを採用したり、Instagramが採用していたり、エディタでReactのシンタックスがサポートされ始めたり、海外では実際に使われはじめていて、実際に使ってみたら思いのほか使いやすかったので、簡単に使い方を書いていこうと思う。ReactにはJSXという、htmlをJS内で書ける言語がある。オプショナルなものだが、使ったほうがコードが綺麗になるので、この記事では使っていく。JSFiddleなどでコンパイルなしにそのままテストできるので、適当にコピーしながら確かめると理解が深まる。'aaa');という風に変換するために必要になるimport文で、必ず必要になる魔法のようなもの。document.body);のようにすると、document.bodyに、必要になった時のみdivが構築される。Treeの変更は1度しか行われないということである。アプリの作成を行ってプロファイリングをすると、DOMの変更がボトルネックになっている場合が多いので、この方式は速度のでるアプリを開発するのに非常に有効である。Reactでは、React.createClassを使って、カスタムエレメントのようなものを作成し、Viewをコンポネント化できる。document.body);このように、独自のカスタムエレメント風のものを生成することができる。基本的に要素はimmutableになっており、同様であるとみなされるものはReact内で再利用されたり、バーチャルDOMのdiffアルゴリズムに基づいて、自動的に再配置される。よって、要素の変更時に全部一旦消して挿入し直したり、あまり考えずに自然な形で書いても、メモリを大量に消費する心配はだいぶ少なくなる。カスタム要素には、属性として文字列やオブジェクトを渡すことができ、これはクラス内でthis.propsとしてアクセスできる。これはReactのページのサンプルからとったもの。document.body);作成時に渡されるpropsは変更されないという想定がある。ステート管理をしたい場合、別のオブジェクトであるthis.stateが専用に用意されており、getInitialStateメソッドで最初のthis.stateを生成することができ、その後はthis.setStateを利用してステート管理を行うことで、自動的にViewの更新が行われるようになる。}などで関数を渡してイベント登録を行うことになる。document.body);このような形になる。一般に、Modelを作成し、それを属性として渡す。ReactにはModelは付属しないので、Backboneや、好きなものを利用する。主動で作成するとこのような形になる。Browserにのっている。独自のSyntaxがあったりして利用が難しいように見えるが、実はAPI自体は極めてシンプルで、このシンタックスを利用しなかったとしても、plainなJSからも普通に簡単に使える。Polymerなどはpolyfillとしての性質や未来志向が強く、実際にサイトで使おうとするとライブラリが巨大かつReactに存在するようなバーチャルDOM管理などはあまりないので、今使うとしたらReactだと思う。Startedを読むと良い。CSSのプロパティなどもHTML属性と同様に変更を保持してくれたり、もう少し機能がある。styleなどはないが、別に不便だとは思わない。CSSはclassNameを変更してcssファイルでやるのが管理する上で楽だと思うので、自分はあまり使っていない。falseでsetIntervalが偽装されているか調べられると書いてあるが、そんなことはない。自分が普段使っているブラウザはSafariなので他のブラウザではsetIntervalが上書きできないから下記コードは無効だが、setIntervalを書き換えたいと思う時など特定のときしかありえないので、Safariを使えばいいと思うほとんど全てのチェックを素通りするフェイクのsetIntervalの書き方をここに載せる(ネイティブかどうかを判別する方法を発見したら教えて欲しい)。ここではsetIntervalだけ上書きしているが、少しコードを追加すればsetTimeoutも上書きできる。1)となり、スクリプト等でdocument-on時に走らせると全てが爆速になる。code]\n}';このコードもiframe内で、ユーザスクリプトでdocument-start時にFunction.prototype.toStringを書き換えてしまえばいいので、意味がない。クライアント側で実行するコードは、全てユーザのコントロール下にあると思って書かないと、脆弱性の原因になる。ハッカーの勝利である。引用元のサイトにあるように、ダウンロードサイトの待ち時間やゲームなどで、どうしても時間によるチェックをいれたい場合、サーバ側でタイマーを使って、待ち時間が経過するまではAPIがエラーを返すように作るしかないと思う。Parfaitとは、adobeが開発してるβ版の、ウェブサイト作成支援のサービス。これを使うと、.psdのデザインファイルからHTMLを書き起こすのが異常に高速になるので、オススメしておこうと思う。具体的には、psdファイルをアップロードすると、psdファイルの要素がレイヤー別に選択できるようになる。わかりやすいように画像で実例を出すと(一部塗りつぶしてあるが)このようになる。/*CSSをペーストする*/}のように、貼り付けて上記の画像の場合はfont-weightがおかしいのでboldに手動で直して、widthやheightも不要なので消す。box-shadowやtext-shadowなどもそのまま再現されるので、手動で色々と考えて調整する必要がほぼなくなる。yと、要素のサイズが同時に表示されているので、隣接する要素をクリックしたりして、計算機を片手にmarginやpaddingを算出して、手動でfloatなどを使ったりしていろいろ配置をいじれば完成。psdファイルは解像度が高めに作ってある場合が多いので、px座標が大きめになりがちであるが、気にせずにそのまま計算してcssに入れるとよい。0.8;}などで調整すればいいのである。それが認められない場合は一通り仕上げてから、ツールで全ての数値を0.8かけて置換する。psd内の画像をクリックすると選択した画像がダウンロードリストに入るので、psdファイルから画像を切り出すのも、非常に簡単。Spriteなどにしたい場合は後でまとめる必要があるが、それも後でツールを使えば良い。Parfaitはかなりオススメである。最近、WebサイトやWebサービスの制作の仕事を引き受けはじめて、色々と試行錯誤しはじめたのだが、いろいろ手探りにやりながらも、4〜5時間で10ページくらい作れた。Meterなども常に起動しておくと便利。小規模なサイトはjQuery+プラグイン+自分で少し書いて、アプリや大規模なものはフレームワーク(AngularJSやReactJS、Backbone.jsなど)を使ってがっつり仕上げるというスタイルが、作業スピードを爆速にするためにいいのではないかと思う。試行錯誤して効率を上げていきたい。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。