1年前の記事 JavaScript フレームワークがデータバインディングを実現する４通りの手法 では、Object.observe() について次のように説明した。 JavaScript オブジェクトが変更されたときにコールバックを呼んでくれる API データバインディングの実装が簡単になる Google Chrome には実装済み ECMAScript 7 に提案中 提案が通れば MV* フレームワークの実装がシンプルになってハッピー 将来を期待されていた Object.observe() であったが、2015 年 11 月頭、ES Discuss メーリングリストへの An update on Object.observe という投稿で、ECMAScript からの提案が取り下げられて、V8 エンジンからも年内に削除される予定であることが表明された。 Object.observe()

埋め込み向けで、C言語から呼べて API が小さい JavaScript エンジン v7 を見つけました。 cesanta/v7 · GitHub https://github.com/cesanta/v7/ 特徴としては クロスプラットフォーム: Arduino から MS Windows まで、どこでも動く。 小さい: コンパイルされたコアはわずか 40KB から 200KB。 シンプルで直観的な C/C++ API: 簡単に C/C++ の関数を JavaScript 環境へエクスポート出来る。 標準: V7 は JavaScript 5.1 を実装し、Standard ECMA tests をパスする事を目指している。 パフォーマンス: V7 は非 JIT エンジンの中で最速を目指している。 創造的に利用可能: V7 は、ハードウェア(SPI、UARTなど)、ファイル、暗号化、ネッ

はじめに 過去に私がHaskellを学び始めた時、 真っ先に疑問に思ったことはモナドの存在だった。 当時は全くと言っていいほど理解できなかったが、 最近Haskellを学び直して ようやく理解することができた(と思う)。 という訳で、現時点での私のモナドへの理解を示すためにこの記事を書く。 ここではモナドの本質が何なのか概要を示す。 正確な説明は数多あるモナドについてのチュートリアルを参照されたい。 Hellow World問題: IO, Monad, fail 新しい言語を学ぶ時、まず間違いなくHello Worldを書くだろう。 HaskellでHello Worldを書くとこうなる: この1行だけを見ると普通の命令型言語と大して変わらないように思える。 ところでHaskellには強力な型推論がある。 そのため型宣言を省略しても処理系がよしなに解釈してくれる。 ただ普通はコードの意図す

6/13 (土) は htmlday ということで、こちらのイベントに参加してきました。 HTML5オールスターズ勉強会｜IT勉強会ならTECH PLAY［テックプレイ］ 第58回 HTML5とか勉強会 - HTML5最新情報@Google I/O, de:code 2015｜IT勉強会ならTECH PLAY［テックプレイ］ とりあえず今の時点で公開されてるスライド資料やらキーワードやらをまとめ。 （随時更新します） Twitter でのハッシュタグは #dotshtml5 , #htmlday , #html5j などなど。 （2015/06/15追記） 若狭さんの『ハードウェアこわい』、川田さんの『The next generation mobile web!』 のスライドを追加しました。 （2015/06/19追記） 『Edge だけじゃない! Build 2015 で発表されたそれ

It’s very common for back-end developers to implement a mechanism in production mode that tracks and aggregates exceptions. But what about your front-end code? How do you know when something on your website is seriously broken and you don’t see it since it only happens in a certain browser version, that you (or your QA department) isn’t testing on? JavaScript has defacto become one of the most pop

最近 angularJS に対する期待の低下が著しくてつらい。 なんだかんだで SPA から jQuery に戻った話 - ボクココ Angularの問題では はてなブックマーク - mizchi のブックマーク - 2015年5月18日 みんな使いどころを間違ってるんや。１年半くらい使ってて不満もあるけど自分のよく使う範囲では angularJS 最強だと思う。 angularJS が向いてるのは Single Page Application ではない angularJS が向いてるのは ◎ フォームのような細かい部品を多用 ＆ DOMツリーとデータスコープがほぼ一致していてユーザの入力をサーバに送ったりする webアプリ。管理画面、マイページ、業務アプリなど △ Single Page Application ← 簡単に作れるけどページ間の連携が必要ないならサーバ側で分けてしまった方

こんにちは、Misoca開発チームのmzpです。ゴールデン・ウィークは北海道で過していました。 最近、JavaScript関連の技術がどんどんでてきてますね。 それはそれとして、数年前から続いているコードベースだと、グローバル変数を利用していたりjQueryを直接利用していたりといった箇所がいくつか残っています。 Misocaでも2〜3年前に書かれたJavaScriptが不用意にグローバル変数を利用していて、メンテナンスが難しい状態になっていました。 少し前にそういったJavaScriptをからグローバル変数を除去し、メンテナンス性を向上させたので、今回はそのときの話を紹介したいと思います。 手法の選定 グローバル変数を抽出するには主に2通りの方法が考えられます。 実際にJavaScriptを実行しその前後でwindowオブジェクトに増えたプロパティを調べる。 minify等でコードが変形

最近のフロントエンド開発では、多くのフレームワークやライブラリが利用できます。ただし玉石混淆で、良い物もあれば悪いものもあります。そんなわけで多くの場合、私たちは特定のコンセプトやモジュールまたは構文に傾倒しがちです。でも、それが万能かと言うとそうでもありません。この投稿では、将来的なフレームワーク、つまりまだ存在していないフレームワークについて話をしていきたいと思っています。現状で利用可能なJavaScriptフレームワークの利点や欠点をまとめて、完璧なソリューションを思い描いてみましょう。 抽象化は危険 私たちはシンプルなツールが好きですよね。複雑さはある意味、命取りです。作業が難しくなり、一定時間内で多くのことを覚えなければならなくなる（急勾配の学習曲線が求められる）ようなことが多々あります。プログラマは仕組みを理解するまで気も休まらないのではないでしょうか。複雑なシステムで作業をす

こんにちは会員事業部の丸山@h13i32maruです。 最近のWebフロントエンドの変化は非常に激しく、ちょっと目を離した間にどんどん新しいものが出てきますよね。そんな激しい変化の一つとしてES6という次期JavaScriptの仕様があります。このES6は現在策定中で、執筆時点ではDraft Rev31が公開されています。 JavaScriptはECMAScript(ECMA262)という仕様をもとに実装されています。 現在のモダンなWebブラウザはECMAScript 5.1th EditionをもとにしたJavaScript実行エンジンを搭載しています。 そして次のバージョンであるECMAScript 6th Editionが現在策定中で、略称としてES6という名前がよく使われます。 今回は、他の言語にはあってJavaScriptにも欲しいなと思っていた機能や、JavaScriptでよ

せっかく window や node/io の標準モジュールに依存していないロジックであれば、 ブラウザでも node/io で動くようにしておくと色々嬉しい。が軽視されている感がある。 俗に isomorphic な JavaScript と呼ばれている。 それを npm と bower で公開するのであれば、問題はモジュールシステムだ。 最小の isomorphic module pattern 一番シンプルで負荷の少ない方法。 まず、ライブラリを以下のように書く。 // lib.js function Lib() { // 変数は外に出さない } Lib.prototype.foo = function(){ return "foo"; }; this.Lib = Lib; // point

インターネット経由でLチカさせる仕組みを解説 ここからはESP-WROOM-02イーエスピー・ダブルルーム・ゼロツーを用いた電子工作を解説します。次の構成でIoTな電子工作を目指しましょう。 スマートフォンのウェブブラウザでボタンをON/OFFすると、サーバーに設置されているPHPへ値を渡します。Arduinoからは定期的にPHPを監視し、接続されているLEDをチカチカと点滅させます。 回路を組もう 電子工作でよく用いるブレッドボードやジャンパー線はすでに手元にあることを前提に、下記のパーツで回路を組みます。ESP-WROOM-02イーエスピー・ダブルルーム・ゼロツーはブレッドボードで扱いやすいように変換されたものを使用します。 ※ESP-WROOM-02が正常に起動しない場合は、Arduino UNO R3のリセットボタンを押しながらESP-WROOM-02の電源をリセット（5V、GND

ユニットテストがしにくい状態となってるコードをTestiumを使ったE2Eテストを書いてリファクタリングしてみる話です。 例えば、以下のようなjQueryで書いたコードは外(テストコード)から取り出すポイントがないので、ユニットテストを書くのは難しいと思います。(そもそもViewのコードなので) 特定のバージョンでの変更点を簡単に確認できるよう、 「Aの列のラジオボタンを選ぶと同じ行より一つ下にあるBの列のラジオボタンを自動で選ぶ」 という補助機能 $(document).ready(function () { // seq: シーケンス番号 $.each(["new_version", "old_version"], function () { $("input[name='" + this + "']").each(function (idx, elem) { if (idx == 0

みなさん、こんにちは。Ameba事業本部ゲーム部門の平木(Layzie) と申します。 最近はSteamで安いゲームを漁ってばかりの毎日です。このエンジニアブログでは初めて執筆になります。 さて、今回エンジニアブログで何を書こうか悩んだのですが、悩んだ結果Duoというパッケージマネージャの紹介をしようということになりました。 このDuo、GitHubのStar数は結構多いんですが、(2014/11現在2618Star)あまり紹介されてる記事とかが無いので紹介してみようと思った次第です。 Duoの特徴 昨今、フロントエンドで使えるパッケージマネージャは色々あると思います。厳密に言うとサーバ側のJavaScript実装ですがNode.jsのパッケージマネージャであるnpmにフロントのJavaScriptライブラリを登録して使うというパターンもありますし、新規プロジェクトの雛形を作ってくれるYe

Browserify を触ってみたメモ。 Browserify とは CommonJS のモジュールの仕組み、つまり Node.js の require をブラウザ上でも使えるようにするもの、ということでいいみたい。Readme を読む限りは、npm にあるモジュールをブラウザ上にもっていくために作られ始めたような印象をうけるが、ちまたのエントリーをみていると AMD に代わりに CommonJS でフロントエンドの依存関係の管理をする (RequireJS ではなく、Node.js 感覚で require 関数をフロントエンドで使う) ためのツールとしても使っていいようだ。 やりたいこと 複数の js ファイルの依存関係を記述したい 最終的に、依存関係を考慮した順番で、ひとつの js ファイルに結合したい 作りたいのは第三者のサイトに埋め込んでもらうスクリプト (サードパーティスクリプト

// 適当にDOM操作 document.body.id = "foobar"; document.body.appendChild(document.createTextNode("hogehoge")); alert((new XMLSerializer).serializeToString(document)); <canvas id='world'></canvas> <!-- piyopiyo --> <noscript>aiueo</noscript>

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 で読みこめば勝手に変換されます) 原理的に無理だったり全てのモジュールが動くわけじゃないですが、 その辺の互

カテゴリーツリーの管理画面のUIってどうするのがベターなんでしょうか。。 やりたいこととライブラリのはざまで彷徨ってたらたくさんリンクが集まったのでまとめておきます jQuery plugin: Treeview [browser-shot url=”http://jquery.bassistance.de/treeview/demo/” width=”400″] ul>liの構造をtree表示してくれる シンプル jQuery treeTable Plugin Documentation [browser-shot url=”http://ludo.cubicphuse.nl/jquery-treetable/#examples” width=”400″] treeでありtable 多機能 ドラッグアンドドロップ可能 反面classを振るのが非常にめんどくさい jsTree [brows