ページ上でずっと動いているsetTimeout、setInterval、requestAnimationFrameを見つけてパフォーマンス改善する
ページ上でずっと動いているsetTimeout、setInterval、requestAnimationFrameを見つけてパフォーマンス改善する 複雑なウェブアプリケーションになってくると、1つのページで複数のTimerなどを回すことがあります。 例えば、Twitterのようなアプリならば、ポーリングで更新するためにsetInvervalのようなタイマーを回します。 また、ゲームなどCanvasで描画を行うアプリケーションならば、メインループをrequestAnimationFrameで回します。 このように色々なタイマー系がありますが、アプリが多機能になっていくと色々なタイマーが同時に動くようになっていきます。 特に問題がなりやすいのが表示中だけタイマーを回すコンポーネントです。 よくあるのが次のようなmount時にtimerを開始して、unmount時にtimerを停止するコンポーネ
JSDocをランタイムassertに変換するBabelプラグインを書いた
JSDocをassertに変換するライブラリとそれを使ったBabelプラグインを書きました。 azu/babel-plugin-jsdoc-to-assert: Babel plugin for jsdoc-to-assert. azu/jsdoc-to-assert: JSDoc to assert ライブラリのjsdoc-to-assertの方は、JavaScript ASTのコメントからassertの文字列を作り出すだけのシンプルなものです。 実際に使う場合は、Babelのプラグインとしてbabel-plugin-jsdoc-to-assertを使い、コードを変換してランタイムassertを追加させます。 やっていることとしては、FlowTypeをランタイムチェックするbabel-plugin-typecheckのJSDoc版とも言えます。 babel-plugin-typechec
JavaScript ASTを始める最初の一歩
何かJavaScriptのソースコードを機械的にチェックするためのツールを作りたいという場合に、JavaScriptのASTというものを触る必要が出てくると思います。 この記事では、その取っ掛かりとなる案内を簡単にまとめたものです。 ASTとは AST(Abstract Syntax Tree)はコードをパースした抽象構文木のこと。 JavaScriptの場合はJavaScriptオブジェクト(JSON)として表現されます。 コード: { "range": [ 0, 10 ], "type": "Program", "body": [ { "range": [ 0, 10 ], "type": "VariableDeclaration", "declarations": [ { "range": [ 4, 9 ], "type": "VariableDeclarator", "id": {
はてなブックマーク検索を作りながらFlux Utilsについて学ぶ
facebook/flux 2.1.0からFlux UtilsというStoreなどの実装が含まれるようになりました。 今回Flux Utilsを使って、指定したアカウントのはてなブックマークを検索するウェブアプリを書いてみました。 azu/hatebu-mydata-search azu.github.io/hatebu-mydata-search/ mydataのAPIがCORS対応してないのでJSONProxyを挟んでます。(なのでブックマークデータが多いアカウント名は避けたほうが…) これを作ってみてFlux Utilsについて思ったことを書いていきます。 Flux Utilsの紹介ページに、Flux Utilsの解説が書かれています。 簡単にまとめると以下の4つのクラスがFlux Utilsとして提供されています。 Store ベースとなるクラス ReduceStore Store
npm 2.0.0でローカルモジュールを使ってrequire('../../../')を回避する
概要 npm 1.xの時はローカルにあるディレクトリへの相対パスをdependencyフィールドで指定できなかった。 そのため、ローカルにあるモジュールをたどるにはrequire("../../../")のような指定が必要になっていた(ライブラリに切り出せればいいけど、アプリケーション固有のUtilsなどがある場合これ面倒になる) Better local require() paths for Node.js avoiding ../../../../../../.. How I Work Around The require(“../../../../../../../”) Problem In NodeJS | ThoughtStream.new :derick_bailey そのため、npm linkやnode_modulesにそのまま追加してやるなど、微妙なハックがひつようだった
V8の最適化とIRHydraでの可視化とベンチマークについてのメモ
V8 の最適化について 色々(主にVyacheslav Egorovさんの記事やスライド)読んでたのでそれのメモ。 この文章は2014年9月13日に書かれて最適化されていないため、この文章を元に最適化をすると失敗すると思います。 参考まとめ V8に関するリソースまとめ V8 Resources - Vyacheslav Egorovさんによる thlorenz/v8-perf - Thorsten Lorenzさんによる Understanding V8 and JIT compilation basics - Google スライド - 概要分かりやすい Hidden Class V8がリリースされた時から特徴としてあげられている最適化 V8: an open source JavaScript engine - YouTube V8 祭り - Backnumbers: Steps to
node-webkitアプリをTravis CI経由でGitHub Releaseにバイナリ登録する
Travis CIからデプロイ Travis CIにはDeploymentという機能があり、Heroku等色々なサービスに対応しています。 その一つとして、GitHub Releasesに対してファイルをデプロイする事が出来ます。 Travis CI: GitHub Releases Uploading Git tagとGitHub ReleasesとCHANGELOG.mdの自動化について | Web Scratch GitHub Releasesの使い方に関して zipファイルならなんでも登録でき、登録するファイルサイズはリポジトリにpushするより大きくても問題ないので、バイナリサイズがでかいnode-webkitアプリには向いていると言えます。 この記事は基本的にはTravis-CI で Go の Windows 用バイナリを Github release に登録する - Qiit
Git tagとGitHub ReleasesとCHANGELOG.mdの自動化について
GitHubには Releases という機能があります。 Release Your Software Creating Releases · GitHub Help GitHubのリリース機能を使う - Qiita 簡単に言えば、gitのtagやbranchに文章や添付ファイルを追加して公開出来るページです。 基本的にはgit tagと連携してるので、tagを付けてgit push --tagsをしていれば、自動的に追加されます。 メリットとしては以下のような事が行えます。 git tagにパーマネントリンクがつく(重要!) メッセージ(リリースノート等)が書ける 添付ファイル(zip)をアップロード出来る(配布するバイナリとか) RSS Feedsが自動的に生成される(TagとReleaseの2種類がある) ライブラリ等にtagがついてると利用しやすい。 git tagとGitHub
天下一クライアントサイドJS アウトラインメモ
天下一クライアントサイドJS MV*フレームワーク武道会 - connpass に参加してきたのでメモ。 Chaplin - mizchi Chaplin.jsの話 #ten1club // Speaker Deck 仕事で使ってる Chaplin paulmillr作のBackbone拡張系のMVC Rail風の構成 Chaplinの設計 Rails風のルーター インスタンスの管理するComposer Controllerと強調してインスタンスを管理 差分管理できるので早い 逆にインスタンスを引き継ぐので意識しないと辛い スキャフォールディング paulmillr/scaffolt Generator MV*だとやたらファイルが増える scaffolt はChaplinとは関係なく使える Brunch ウェブアプリに特化したビルドランナー CommonJS風の展開 npmで拡張子に応じた
最近気になったJavaScript AST周りの動き
最近、気になったJavaScript AST関係のものについてのメモです。 JavaScript ASTについては以下などを見て下さい。 カジュアルJavaScript AST JavaScript AST Walker esnext 元々ES6 Module Transpiler等やっていたSquare社がesnextというプロジェクトを立ち上げました。 esnextはTraceurと同様にES6のコードを今日のJavaScriptに変換するツールです。 @eventualbuddhaさんがメインでやっていて、それぞれのシンタックスの変換はes6-spreadのように、ひとつのモジュールとして分けて作られています。 また変換の書き方も大体統一したやり方(まあ一人で大体書かれてるので)が取られていて、 Facebookの@benjamnさんが作っているast-typesとrecastを使っ
JavaScriptライブラリの気になる実装をどうやって見ていくか
はじめに 毎日新しいJavaScriptライブラリが登場していると思いますが、それらがどういう実装になっているかを知ることはライブラリを使う以上に大事かもしれません。 ソースを全部読めば分かるかもしれませんが、それをやるには時間が足りません。 JavaScriptに限った話では無いですが、今回はJavaScriptを例に”特定の機能はどうやってるんだろ?”という事を調べる方法についてです。 探す前にドキュメントに載ってないかを見るのが手間がなくて一番よいですが、書いてない場合は実装を見ます。 Vue.js 今回はVue.jsというAngularJSやKnockoutのようなViewとModelのデータバインディグを行うライブラリを例に、データバインディグはどうやっているのかを2つの方法で調べてみたいと思います。 コードをステップで見ていく これはよく見る方法で皆さんもやったことがあると思い
npmとbrowserifyを使ったクライアントサイドのウェブアプリ開発
YoutubeとVimeoの検索結果のRSSをまとめてOPMLで取得できるサイトを作った | Web scratch で公開した Tech Video RSS Searcher はbrowserifyを使って作ったので、その辺の開発フローについての記事です。 browserify って何? browserify はNode.jsスタイルで書かれたモジュール(CommonJS)を ブラウザで利用できるように変換するコマンドラインツール(Nodeモジュール)となっています。 又、node.jsのCore Modulesのshimが用意されていて、 npmで公開されているnode.js向けのモジュールも一緒に変換してブラウザで動かすことが出来るようになっています。(普通に require で読みこめば勝手に変換されます) 原理的に無理だったり全てのモジュールが動くわけじゃないですが、 その辺の互
JavaScriptでdoctestを行う power-doctest を作った
power-doctest という doctest風 にコードと評価結果のコメントを並べるとテストとして実行出来るようなNode製のツールを作りました。
定期更新されるJavaScript等の情報サイトをまとめたMeta-Weeklyというサイトを作りました
はじめに JavaScript Weekly や 私がやってるJSer.infoなど、 週刊などでJavaScript等の情報について紹介するサイトがここ数年でかなり多くなりました。 詳しくはオフライン勉強会でJSer.info一周年について発表してきた | JSer.infoでも乱立するまとめサイトとして触れています。 それらのサイト、メールマガジン、ポッドキャスト等をまとめたMeta Weeklyというサイトをつくったという話です。 Meta Weeklyって何? Meta Weekly は 単純にそれらのサイトをまとめたリンク集のようなものです。 基本的にまとめているサイトは、フロントエンド、JavaScriptに関連するような生きているサイトをリストアップしています。 機能らしい機能はDaily, Weeklyなどでフィルターするぐらいしかありませんが、RSSがあるサイトなどはそれ
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で書かれたテストが走った結果が表示されます
Homebrewを使ってMacにPHP環境を構築する
$ ruby -e "$(curl -fsS http://gist.github.com/raw/323731/install_homebrew.rb)" $ brew install git $ brew update これでbrewコマンドが使えるようになったので、下のFormula(パッケージの情報みたいなもの)を使ってPHPやMySQLなどをインストールする。 (Re)installing PHP 5.3 on Mac OS X — justin hileman dot info bobthecow’s gist: 85ad6dfb594d9215b42b — Gist 最近のMacだとデフォルトPHPとか入ってるけど、何かアップデートとか面倒そうなのでbrewを使ってインストールし直してる。 <div> <pre id="codeSnippet" class="csharpco
ブラウザの最新情報を知るために、Web開発者が読んでおくべきブログ
JavaScriptやWeb開発に興味を持っている人はブラウザ周りの新しい情報も知っておくと良い場合も多いです。 なのでブラウザ周りに絞ってブラウザ別のブログなどを紹介。 Internet Explorer(IE) IEBlog – Site Home – MSDN Blogs IEについての最新情報を書いているオフィシャルサイト Hebikuzure’s Tech Memo IEやWindowsについて多岐にわたり書かれているブログ。 更新頻度が高く、IE Blog の記事の私訳などとても参考になる。 Internet Explorer ブログ (日本語版) – Site Home – MSDN Blogs IEBlogの翻訳記事などを掲載する日本語オフィシャル版(全て翻訳されるわけじゃないのでIEBlogも見た方がいい) Internet Explorer デベロッパーセンターのMSD
海外のJavaScript情報を見つけよう
今、Webは変化してる時だと思います。現状、その変化を見るためには日本だけでは不十分だと思います。 オススメのJavaScriptなどについてのブログ What to Read to Get Up to Speed in JavaScript – Rey Bango に書いてあるBlogsはかなりレベル高い人たちがまとまってる。 上と重複するけど、JSMentorsのMentorsにそれぞれの紹介ページがあるので、その人たちのサイトを見ておいて損はないと思う。 追記: Ecmazing JavaScript Blogsも見ると著名な方のサイトが分かって便利 JavaScript情報配信サイトなど JavaScript Weekly: A Free, Weekly JavaScript E-mail Newsletter 週間JavaScript。メールマガジンで毎週ハイライト的にまとめた情
Windowsで使えるCoffeeScriptコンパイラを書いた
CoffeeScriptをJavaScriptのコードに変換するコンパイラ(coffee-script.jsをラップしただけ)をNILScriptを使って書いてみました。NILScriptはSpiderMonkeyが実行環境に利用されているので、ブラウザで実行できるようために配布されてるcoffee-script.jsをそのまま利用しています。 CoffeeScript Compiler at master from azu/NILScript – GitHub 使い方 NILScriptが必要なので、ダウンロードしておいてください。 CS-Compiler.ng と coffee-script.js(自分で最新のものを持ってきた方がいいです)を適当な同じディレクトリに置きます。 $ng.exe CS-Compiler.ngへパス "FilePath" or "DirectoryPath"
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
