The Refactoring Tales - JavaScriptのリファクタリング本を読んだ
GitHub: jackfranklin/the-refactoring-tales 読んだ日付: 2015年1月11日 まだ4章の途中までしか書かれてないですが、ウェブ版は無料で読めてPDF版等は買えるようになるようです(6-7章ぐらい予定) The Refactoring Tales - JavaScript Playground またGitHubにソースが公開されています(ウェブページはまだ反映されてない感じのtypoの修正等がありました) 感想 1,2章はフロントのJavaScriptで、jQuery世界を例にjQueryでべったり書いてしまったものをどうやって分けていくかの話。 1章はとても読みやすくて完成度もあるので読んでみるといい気がします、2章のカヌーセルの話はもっと深くやっても良かったような気がします。 縦に並ぶ$を見かけるとつらい感じになりますが、まずは手が出しやすい場
JavaScriptでルールを書けるテキスト/Markdownの校正ツール textlint を作った
azu/textlint textlint というテキスト(plain textとMarkdown)の校正をするためのコマンドラインツールを書きました。textlintはNode.jsで書かれていて、Node.jsモジュールとしての利用することもできます。 一番の特徴は校正するルールをJavaScriptで書くことで拡張可能な作りになっています。 The pluggable linting tool for text(plain text and markdown). 逆にデフォルトではルールはサンプル扱いのno-todoというTODOが含まれてることを検知するルールしか今のところ入れていません。 Example: creating no-todo rules. デフォルトでルールが用意されていて、それの設定を変更することでLintする場合はRedPenなどがお勧めです。 RedPen:
JavaScript Promiseの本を書きました | Web Scratch
JavaScript Promiseの本という無料で読める電子書籍を書きました。 タイトルそのままで、JavaScriptのPromiseについて書いた書籍です。 書籍の目的 この書籍を読むことで学べる事として、次の3つを目標にして書きました。 Promiseについて学び、パターンやテストを扱えるようになる事 Promiseの向き不向きについて学び、何でもPromiseで解決するべきではないと知る事 ECMAScript6 Promiseの基本をよく学び、発展した形を自分で形成できるようになる事 Promiseは、次のECMAScriptの言語仕様として策定が進められていて既に多くのブラウザに実装されています。 Promiseについて扱う書籍ですが、この機能はjQuery.Deferred()やAngularJSの$qやBluebird等の類似の機能が既にあるため扱ったことがあるかもしれま
Promiseのテストを補助するライブラリを書いた
promise-test-helper azu/promise-test-helper という名前そのままですが、 Mocha等でPromiseのテストを書くときに見落としを減らすための補助ライブラリを書きました。 MochaのPromiseテストというのは、下記のようにpromiseオブジェクトを返すとそれをPromiseのテストと認識してやってくれる機構の事を言っています。 it("should support by mocha", function () { return getSuccessPromise().then(function (value) { assert(value); }); }); 詳しくは下記を見て下さい。 MochaがPromisesのテストをサポートしました | Web scratch Promiseのテストの難しさ Promiseのテストについてはazu
power-assertでJavaScriptのテストをする ブラウザ編
power-assertという単純なアサーションでも、テストが失敗した時に分かりやすい情報を出せるテストライブラリ/ツールについての記事です。 前回、power-assertの使い方 Node.js編 | Web scratchではpower-assertの動作やNode.jsプロジェクトでの簡単な導入方法について解説しました。 前回のpower-assert + gulpで紹介したプロジェクトをそのまま使っていくので、見ていない場合はそちらから見ていたほうがいいかと思います。 今回は、ブラウザでのpower-assertの動かし方とデバッグについて書いていきたいと思います。 今回扱う実行環境 Node.js ＜＝ 前回 ブラウザ Browserify 前回やったこと まずは前回紹介したgulp + power-assertのプロジェクトを元にやっていきます。 azu/power-asse
MochaがPromisesのテストをサポートしました
このpromiseオブジェクトは、resolveするので、.then の第一引数で指定したonFulfilled コールバックに true という値を渡すようになってます。 今までのテストの書き方 このgetSuccessPromiseを 1.18.0より以前は以下のように書くことでテストをしていました。 it("should manually handling test...", function (done) { getSuccessPromise().then(function (value) { assert(value); done(); }).catch(done); // <= このcatchが今回の変更での焦点 }); getSuccessPromise()の返り値であるpromiseオブジェクトがresolveされると value に true が入って assert(t
JavaScriptライブラリの気になる実装をどうやって見ていくか
はじめに 毎日新しいJavaScriptライブラリが登場していると思いますが、それらがどういう実装になっているかを知ることはライブラリを使う以上に大事かもしれません。 ソースを全部読めば分かるかもしれませんが、それをやるには時間が足りません。 JavaScriptに限った話では無いですが、今回はJavaScriptを例に”特定の機能はどうやってるんだろ?”という事を調べる方法についてです。 探す前にドキュメントに載ってないかを見るのが手間がなくて一番よいですが、書いてない場合は実装を見ます。 Vue.js 今回はVue.jsというAngularJSやKnockoutのようなViewとModelのデータバインディグを行うライブラリを例に、データバインディグはどうやっているのかを2つの方法で調べてみたいと思います。 コードをステップで見ていく これはよく見る方法で皆さんもやったことがあると思い
MessageEventコンストラクタとpostMessageとWeb messagingについて
MessageEventって何? MessageEvent というのは、server-sent events, Web sockets, cross-document messaging, channel messaging, broadcast channels などで使われてる、データをやり取りとりするときに使われてるEventの一種です。 よく見かけるのだと、 window.postMessage で渡されるeventは MessageEvent という型になってます。(WebWorkerとかとやりとりするときもこれですね) MessageEvent型のオブジェクトは以下のようなプロパティを持ってます。 data データ本体(仕様ではanyとなってるので配列とかも渡せます) origin データ送信元のオリジン(targetOriginで指定されたやつ) lastEventId この
tkbjsでJavaScript ASTについて発表してきました
オフラインJavaScript勉強会 – Online Study TokyoBouldering.js | DoorkeeperでJavaScript ASTについて発表してきました。 JavaScript AST Walker JavaScript ASTがどんなものかや、どのようなツールで使われてるか、ASTを編集するのにどういうライブラリがあるかなどについて書いてあります。 (中でかなり重たいものを読み込んでるのでロードが終わるまで適応に待ったほうがいいです) JS ASTを触る練習のためにQUnitのテストをJasmineに変換するreQUnitというものを書いていたましたが、 ASTをセレクタで選択したり、変更したりするのがもっと楽にできたりするともっとカジュアルにASTを触れるようになる気がします。 後、自己紹介もかねてここ最近のJSer.infoについても話しました。
testemで任意のHTMLでテストを動かす方法とJavaScriptデバッガ連携
Test Runnerのtestemを使ったテストについてメモ testem自体については以下などを見るといい気がします。 JavaScriptのテストツール「testem」が素晴らしいぞ | Mach3.laBlog Testem 0.1.0 Released and Screencasts testem の仕組み的には、テストを実行するためのHTMLページを用意して、 testem のローカルサーバ上でそれを表示してテストを実行しています。 testem自体は特にmatcher等は持ってなくて、adapter を書いて、jasmineやBuster.JS、QUnit等の構文を使ったテストを走らせた結果を得られるようにしてます。 Example Projects で紹介されてますが、この辺が充実してるのがtestemのいいところでもあります。 カスタムHTML testem/views
定期更新されるJavaScript等の情報サイトをまとめたMeta-Weeklyというサイトを作りました
はじめに JavaScript Weekly や 私がやってるJSer.infoなど、 週刊などでJavaScript等の情報について紹介するサイトがここ数年でかなり多くなりました。 詳しくはオフライン勉強会でJSer.info一周年について発表してきた | JSer.infoでも乱立するまとめサイトとして触れています。 それらのサイト、メールマガジン、ポッドキャスト等をまとめたMeta Weeklyというサイトをつくったという話です。 Meta Weeklyって何? Meta Weekly は 単純にそれらのサイトをまとめたリンク集のようなものです。 基本的にまとめているサイトは、フロントエンド、JavaScriptに関連するような生きているサイトをリストアップしています。 機能らしい機能はDaily, Weeklyなどでフィルターするぐらいしかありませんが、RSSがあるサイトなどはそれ
YetiでJavaScriptのテストを動かす方法
Yeti はYahoo.comがメインで開発してるNode製のTest Runner的なCLIです。 Yeti自体はテストの構文とかは持っていなくて、Test Frameworksに書かれているようにQUnitやJasmine、MochaやYUI Testなどで書かれたテストを動かすツールになっています。 雰囲気的にはTestemに似ていて、上のTest Frameworksで書いたhtmlページを用意して、 キャプチャー用のURLを作って、そこにテストしたいブラウザをキャプチャーして、テストを書いたhtmlを指定して実行させるという感じです。 (意味的にあんまり変わらないですが、先にテスト用htmlを指定して、ブラウザにアクセスさせるという逆の手順もできます) Yeti自体は数年前からあって、Bunyipとかでもインスパイアされてたりします。 動かしてみる QUnitやJasmine、M
iOSアプリのテストをTravis CIで走らせて、コードカバレッジをCoverallsで取る方法
この記事では以下のことについての手順を簡単に説明します。 iOSアプリのテストをTravis CIで動かす Coverallsにコードカバレッジを渡す Objective-C勉強会＠東京 ６月 でNSDateについて発表してきた | Web scratch で書いていたように、 NSDateについてのライブラリ azu/NSDate-Escort · GitHub を書いてて、このライブラリは、 Travis CIでテストを動かして Coveralls でコードカバレッジ をとっています。 NSDate-Escort を例にして設定を見ていきます。 iOSアプリのテストをTravis CIで動かす CLIでテストを動かすには xcodebuild を直接使ってテストを走らせる方法と Travis CI で iOS のライブラリを動かしたメモ | Supernova iOSのライブラリにTr
CI as a Service ブラウザを使ったJavaScriptのテストをCIサービスで動かす方法のまとめ
Travis CIを始めとするウェブサービスとして使えるCIを使って、 JavaScriptのブラウザテスト(ブラウザ上でJavaScriptを走らせて行うユニットテスト)をやる方法をサービスごとにまとめてみました。 テストフレームワークとして Buster.JS を使用して行います。 Karma (旧Testacular) では公式サイトにも Karma – Travis CI でCI Serviceとの連携方法が記載されているのでそちらも参考にして下さい。 今回紹介するCI Servicesは以下のものです。 Travis CI drone.io BuildHive Jepso CI テスト実行の流れ Jepso CI を除いては、テスト実行の流れ自体は同じなので先に解説します。 Capture用のローカルサーバを立てる テストしたいブラウザで capture URL へアクセスする
テストで学ぶJavaScriptについて
A Test-Driven JS Assessment というテストを通るようなコードを書いて、JavaScriptを学ぶものが公開されていたので、それの紹介です。 JS Assessmentは最初に失敗するテストが用意されていて、そのテストコードを通るような関数などを書いていってJavaScriptの力試し、学習をするものです。 簡単にやり方を書くと、Node環境を用意した状態で git clone https://github.com/rmurphey/js-assessment.gitなどで、リポジトリをダウンロードして、 ダウンロードしたディレクトリ内で、 nodeを使って以下のようコマンドを実行してテストが実行できるローカルサーバを立ち上げます。 実行した状態で http://localhost:4444 というURLに行けば、Mochaで書かれたテストが走った結果が表示されます
最強のJavaScript IDE 「WebStorm」を使ってみた
JavaScript対応のIDEをまとめてみたの続きのようなもので、その中で紹介していたWebStormが素晴らしいので別途紹介。 WebStormはHTML(5)+CSS+JavaScriptに対応してるIDEで、Windows, Mac OS、Linux上で動作します。 有料のソフトウェアですが、オープンソースライセンスがあったり体験版は45日間使えるのでとりあえず試してみましょう。 この記事の続編(アップデート版)を書きました 特徴 とにかく膨大な機能が載ってるので全てを紹介するのは無理があるため、凄いと思ったところを掻い摘んで紹介。 主にJavaScriptを書くエディタとして使っていますが、CSSやHTMLも普通のIDEより書きやすいです。 基本的にWebStormで日本語に関する問題は少なめです。一部IMEの変換候補が出てくる場所がずれたり、プラグインで日本語がダメだったりする
DropPagesでエクストリームコードリーディング環境を作る
DropPagesというDropboxにテンプレートファイルとMarkdownで書いたコンテンツ(記事)を置いて公開できるサービスを利用してどこでもコードリーディングができる環境を作って使っています。 DropPagesについて DropPagesの導入方法 詳細はGetting started | DropPages.comを見る。 DropPagesから好きなThemeファイルのzipをダウンロードする zipを展開すると<Theme名>.droppages.com というフォルダができるので、 このフォルダ毎、Dropboxフォルダの好きな所に置く <Theme名>..droppages.com の<Theme名>を自分の使いたいサブドメイン名にする。 たとえばうちはhttp://sig.droppages.com/なので、sig.droppages.comというフォルダ名にリネーム
Tumblrをブログとして使うためにやるべき事
Tumblrをブログとして使うためにやるべき事 投稿用サブブログを作成 Tumblrはメインブログと、Create tumblelogから改めて作成するサブブログと分かれていて、メインブログは共同更新ができない感じになっています。なので、今後そういう可能性があるならばCreate tumblelogから改めてtumblelogを作成します。 【連載】『Tumblr』のおさらい (12) 複数人でTumblelogを共同更新してみる | ネット | マイコミジャーナル ドメイン Tumblrは独自ドメインが使用できます。 特にドメインの制限はないので、DNSレコードでTumblrのIPアドレスを振って、「Info」 メニューの一番下にある 「Use a custom domain name」 にチェックして取得したドメインを設定するだけでOKです。 (別にドメインを持ってなくてもドメインを指
JavaScriptからメモリ情報を取得する方法
JavaScriptにおいてメモリ管理は基本的にエンジン任せなのであまり意識することは無いかもしれませんが、メモリリークの調査やパフォーマンスの実験のためにメモリ情報をJavaScriptから扱いたいときがあると思います。 メモリリーク調査は専用のソフトウェアなどがあるので、 JavaScript Memory Leak Detector (v2) – GPDE Team Blog – Site Home – MSDN Blogs IE Overview – JavaScript Memory Validator Firefox Debugging memory leaks – MDC Doc Center そちらを使うのでもいいかもしれませんが、new Dateを使った実行時間の記録みたいにJavaScript内からメモリ情報を取得して計測できるとおもしろいと思うので、ブラウザ毎にやる方
Google Web Historyに見たページを自動記録するアドオン(Jetpack SDK)
GoogleにはGoogle – ウェブ履歴というものがあり、検索してどのページを訪ねたかなどが記録されています。 またその記録は検索ページで既読リンクの色にするなどの判定にも使われています。 Google検索から訪ねたサイト以外のURLもウェブ履歴に登録するFirefox拡張機能を作成してみました。 既に Googleウェブ履歴を残すGreasemonkeyスクリプト Opera で Google Web History を使えるようにする UserJS – mallowlabsの備忘録 などGreasemonkeyやTomblooパッチなど代わりになる手段は山ほどある気がしますが、Jetpack SDKを使いたかったのと、意外にもFirefoxアドオンとして同じ役割するものが見つからなかったので作ってみました。 他のスクリプトとの違いは大して無いと思いますが、できるだけ無駄な送信を控え
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
