ES6 moduleのtop levelにある`this`の値は何になるのか?
Babel 前提 Babelは入力されたコードをES6 moduleとして扱う Babel assumes that all input code is an ES6 module FAQ · Babel (結論的には--blacklist strictでこの挙動は無効化できる) ES6 moduleの前提知識 Environment Recordというのはそのスコープと変数を関連付けたりするような環境情報的なものを入れる場所 関数とかモジュールとかwith用みたいな何種類かある ModuleはModule Environment Recordsのを作ってそこに情報を記録する Module Environment Recordsはdeclarative Environment Recordの一種で、加えてModule専用の記録領域がある(importのbindingのための場所) 基本的な
npmで名前空間を持ったモジュールを公開する方法(scoped modules)
npmにモジュールを公開することは多くなってると思いますが、今までのnpmだと名前は早い者勝ちでした。 最近npm Private Modulesというprivateで扱えるモジュールを有料でサポートしましたが、これはscoped modulesをprivateで扱う時だけ有料でpublicで公開する時は無料で行えます。 scoped modulesというのは、@username/project-name という感じで、@ユーザー名がパッケージ名に入るので異なるユーザー間では重複しません。 The npm Blog — solving npm’s hard problem: naming packages 公開手順 実際にscoped modulesをpublicに公開する手順としては、 npm init --scope=<npmユーザ名> パッケージの名前が@<npmユーザ名>/パッケー
#error_handling_sushi でPromiseのエラーハンドリングについて発表した
#error_handling_sushi でJavaScriptのエラーハンドリングについて議論した。 自分はPromiseのエラーハンドリングの握りつぶしの問題を見つけやすくするイベントの実装について、Promise Error Handlingという話をした。 ログ: #error_handling_sushi - Togetterまとめ #error_handling_sushi 始まった #寿司とは pic.twitter.com/XZe21QTsDO — Takuto Wada (@t_wada) March 6, 2015 – 基調講演 - teppeis これが #error_handling_sushi pic.twitter.com/vSLDpthYi4 — azu (@azu_re) March 6, 2015 #error_handling_sushi 基調講演 一
多段SourceMapの対応方法とライブラリ | Web Scratch
Source Map SourceMapとは何かについては以前、Source Mapを扱う関連ライブラリのまとめにて紹介しました。 Source Mapとは Source Map Revision 3 Proposal – Google ドキュメント SourceMap仕様 #JSオジサンで Source Map について話してきました : document SourceMap概要 JavaScriptのSource Mapの内部表現について Base64のmappings部分の仕組み source-map-visualization ビジュアライズツール mozilla/source-map SourceMapのコアと言えるモジュール(色々なモジュールが使う) SourceMapはAltJS等からJavaScriptへの変換など、Original Code -> Generated Co
ウェブの仕様は今どこにあるのか？
Webの仕様 ウェブの仕様といえば、W3CやWHATWG、IETFとかが思い浮かぶかもしれません。 これらの仕様が最近ではメーリングリストやIRCといった旧来のところだけではなく、GitHub上で議論されて策定が進められている事が増えています。(両方使ってるという話) この記事はそのような方法で進められてる仕様等についての紹介です。 ＊ 自分自身はそこまで仕様に対して強い興味があるわけではないので、もっと詳しい方が正しくまとめて頂きたいです。。 最初にMove The Web Forward | Guide to getting involved with standards and browser developmentを見ておくといいかもしれません。 JavaScriptの仕様 この動きが多く見られるのがJavaScript(ECMAScriptやDOM APIを含む)周りの仕様につい
多段SourceMapとASTの現状について話してきた
ConstさんがWebKitにコミットしてたCSS JIT入りのiOS8リリースがされたのを記念して@Constellationさんと@saneyuki_s さんと#DOMQuery寿司をしてきました。 元ネタは以下の記事です。 Apple Shows Love for HTML5 with iOS 8 | Blog | Sencha iOS 8 に Apple の HTML5 への愛を見た | 株式会社ゼノフィ SourceMapとASTの問題点 これが #DOMQuery寿司 です pic.twitter.com/o4qpKqrKYT — azu (@azu_re) September 22, 2014 一つ目の献立として発表したのは、SourceMapとASTでちょっと似てるなーと思った問題点の話について。 前半の多段SourceMapについては以下の記事で書いた話と大体同じです。
ES6+カジュアルトークでES7について発表してきた
ES6+カジュアルトーク - connpass ES6+カジュアルトーク に参加と発表してきました。 自分は明日には使えなくなるES7トークというES7の話をしてきました。 「runstant 始めるEcmaScript6 入門」 by @phi_jp EcmaScript 6 のサンプル集 | runstant runstant jsfiddle的なツール ハンズオン let 2進数を直接書ける Lexical grammar - JavaScript | MDN デフォルトパラメータ 引数にデフォルト値を設定出来る 分割代入 template strings バッククオートでヒアドキュメントを書ける class syntax 「Node.js v0.12で使えるようになるES6+αの機能」 by @yosuke_furukawa Node.js v0.12で使えるようになるES6+の機
JSer.info 200回記念イベント アウトラインメモ
JSer.info 200回記念イベントを開催したので、そのときのメモです。 以下にスライドや発表されたものはまとめてあります。 JSer.info 200回記念イベントを開催しました - JSer.info JSer.info 200回記念イベント - Togetterまとめ こっから先は個人的なメモです。 LoopBackについて @yuumi3 LoopBack (Open SourceのBaaS)を使ってみよう！ その1. PostgreSQL接続とTwitter認証 - yuumi3のお仕事日記 BaaSは混戦状態 iPhoneの勉強会で使ったことがある人 : 2人 parse.com を使ってる人がいた BaaSには2種類ある Service指向 ある種の機能特化 Platform指向 何でも出来るけど自分で作る LoopBack 現在のシステム iPhone -> loopb
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にそのまま追加してやるなど、微妙なハックがひつようだった
JavaScript Promiseを使うウェブの仕様を調べてみた
Promiseの仕様? JavaScriptにおけるPromiseの仕様といえば、次期ECMAScriptのECMAScript Language Specification ECMA-262 6th Edition – DRAFTで策定されています。 このES6 Promisesについて詳しくはJavaScript Promiseの本という無料の電子書籍で書いたのでこちらを参照して下さい。 以前、Promiseについて紹介した時に以下のように書いてました。 また、今後ブラウザに実装されるAPIとしてService WorkersやStreams API等、Promiseをベースしたものも出てきています。 – JavaScript Promiseの本を書きました | Web Scratch 実際にどれくらいの仕様がPromiseを参照してるかを調べてみました。 Promiseを参照する仕様
天下一クライアントサイド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で拡張子に応じた
ECMAScript6についてes6featuresで学んだ
はじめに ECMAScript6についてのは色々情報がでてきていて、またライブラリとかでも一部採用してるケースも見られてきました。 ES6 – Next Generation Javascript ES6 – episode 1 Rewriting A WebApp With ECMAScript 6 — TasteJS 等など、色々紹介してるサイトはありますが、その中でもlukehoban/es6featuresはコード例が豊富に載っていて面白そうなので、写経してみました。 現在のES6とは harmony:specification_drafts [ES Wiki]で公開されてるES6の仕様やES6FeatureSet.xlsx – Microsoft Excel Web App 等を見るとAPI的に固まってきている部分は何となく見える感じはします。 AngularJS 2.0 | A
WebStorm+Chromeでウェブサイトコードリーディング
IntelliJさんのChromeプラグインが進化してた – しおしおの雑記帳 を見て気づいた事。 今までは WebStorm -> JavaScriptデバッグ実行 -> Chrome起動 という方向でしか、WebStorm内のデバッガーは使うことが出来なかったのですが、 WebStorm 8 EAPからは、Chrome -> Inspect in WebStorm -> WebStorm という双方向でデバッガーを使えるようになったみたいです。 これを利用して、簡単にWebStormを使ってウェブサイトのコードを読むことができるのでその手順の説明です。 手順は単純で WebStormで適当なプロジェクトを開く(プロジェクトを開いてないと”Inspect in WebStorm”ができない) Chromeで読みたいサイトを開く Chromeのコンテキストメニューから”Inspect in
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 で読みこめば勝手に変換されます) 原理的に無理だったり全てのモジュールが動くわけじゃないですが、 その辺の互
WebStorm 7EAPのkarma連携について
WebStorm 7 EAP がリリースされましたが、今まではJsTestDriverぐらいしかテスト連携のサポートは入っていませんでしたが、karmaのサポートが追加されました。 KarmaとWebStormの設定 まだ、karma@canary(いわゆるdevloperバージョン)でしか動かないらしいので、 以下のように karma のcanaryをインストールします 今回は、デフォルトのJasmineの構成にしました。 次にWebStormでプロジェクトを開いて、WebStormのkarmaの設定をします。 RunDebug Configurationsにkarmaが増えているのでそれを追加して、 karma.conf.js のパスを設定してあげればWebStormの設定は完了です。 Karmaのテストを実行 作成したConfigurationsをRunするとKarmaサーバが起動し
追悼 E4X (仮) アウトラインメモ
追悼 E4X (仮) : ATND に参加してきたメモです。 (bug/バグはチケット的な意味で使われてます) won’t fix: 追悼 E4X (仮) やります 追悼 E4X (仮) : ATND 追悼 E4X (仮) – Togetter E4X って何？ – @makoto_kato SpiderMonkeyからは削除済み JDK 6 対応しないよ的なコメントあり ActionScript 3 Flash 9+ AIR 1.0+ JavaScript Core 2005年にbugが上げられてたけど放置 V8 2009年にbugがあげられて、not standard!!との返答 実装しなかったエンジン V8 Webkit IE Opera 実装したエンジン Firefox ActionScript 時代背景 なんでE4X実装されたのか? SOAP サーバのやり取りはXMLでやろう!
WebStormのデバッガでBuster.JSのテストをデバッグをする方法
WebStormのデバッガをBuster.JSのテスト実行時に使う方法についてです。 最初に要約を書いておくと buster static で静的なURLのテストページを用意する WebStormのデバッガ(ブラウザ)でそのURLを開く です。 WebStormのデバッガは、デバッガ連携できるブラウザ(ChromeとFirefox)で指定したURLを開いてデバッガを使う感じ 以前、Testacularを使った場合を紹介しましたが、TestacularはちょっとWebStorm向けに小細工が用意されてる感じなので、 今回のほうがもう少し一般的な感じの内容になると思います。 やっていること自体は下記の記事で解説されているのと同じで、ちょっとパスが違ったり使うコマンドが違う感じなだけだと思います。 WebStormからtestacularでテストとデバッグをする方法 | Web scratch
Githubでnpmのpackage.jsonに書いてある依存モジュールを表示するGreasemonkey
最近のJavaScript関連のものは、配布やテスト等諸々のためにnpm’s package.jsonがレポジトリに一緒に置いてあることが増えてきていると思います。 その中でJavaScriptで書かれたツールではEsprimaやsocket.io等のモジュールがpackage.jsonのdependenciesに含まれていると、 どのような特性を持っているかなどが分かりやすくなるのでそれをGithubのレポジトリページに表示するGreasemonkeyスクリプトを書きました。 azu/github-display-package-dependencies yahoo/istanbul · GitHub 上記のように、package.jsonのdependenciesを取り出してきて一覧表示しています。 リンク先はnpmのモジュールごとへのリンクとなっています。 仕組み的にはTrees A
改めて最強のJavaScript IDE 「WebStorm」についてまとめてみた(改訂版)
WebStormはHTML(5)+CSS+JavaScript等をメインに扱う、Windows, Mac OS X、Linuxのクロスプラットフォームに対応したIDEです。 これを読む前に以下の文章を見ておく必要があります 最強のJavaScript IDE 「WebStorm」を使ってみた | Web scratch この記事はWebStorm1.0の頃にかかれたものです。 横浜JSTDDハンズオンでWebStormについて発表してきた | Web scratch WebStorm指南書 この記事はWebStorm 4.0 EAPの時に書かれたものです この記事は、WebStorm 1.0 から WebStorm 5.0までの変更や追加機能等を最強のJavaScript IDE 「WebStorm」を使ってみたをベースにまとめたものです。 購入方法 既に購入済みな方などは飛ばして大丈夫で
第2回 ECMAScript勉強会のアウトラインメモ
第2回 ECMAScript勉強会に参加してきたのでその時のメモ。 (あまり正確には取れてないので、各スライドを参照して下さい。) 第2回 ECMAScript勉強会 主催 : rika-t 自己紹介 Specs Updates – rika-t スライド : ECMAScript study #2 ES.next Updates 前回からの差分 Rev7 Arrow function追加 ES.next Library Extension関係 Numberなどは結構無駄にはいってる 機械語命令などにもあったりするので、ネイティブで実装した方がいい関数もあるという要望等 Audio関係に使う関数等 Rev8 Rev9 Arrow function 無名関数の代替 (x) => x * x var that = thisの不要化 list.forEach((item) => this.hog
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
