こんにちは。imaiです。待望のAngularJS1.4がリリースされましたね。Directive関係では、bindToControllerの機能が向上しました。 このbindToControllerとは一体何なのか。使って嬉しいことは何か。どう機能が向上したのか。について書いていきます。また、最後に自作Directiveを作っていく際に筆者がよくつまずく点を記しておきます。 この記事の対象者:AngularJSに触れたことがある、自作のDirectiveを作ったことがある bindToControllerとは AngularJS公式サイトのReferenceからbindToConrollerの説明を意訳すると、 再利用可能なコンポーネントを作るために、分離?隔離?スコープやcontrollerAsを用いる際に、bindToController:trueとすることでコンポーネントのプロパテ

node アプリ + HTML/CSS/JavaScript のリポジトリを Dockernize したときの話。最近 Docker の機運が高まっているのはたまたまです。 同じプロジェクトのバックエンドのリポジトリ（ただし別言語）が Dockerfile 内で依存解決をしていたので、おもむろに RUN cd /src && npm i && npm run build 的な処理を記述したら時間がかかりすぎて爆死しました。 予想はしてましたが node_modules 以下の依存ツリーが肥大化しているのが原因です。 $ du -k -d 1 node_modules | sort -nr 466792 node_modules 85224 node_modules/sc5-styleguide 60400 node_modules/gulp-svg-sprite 32844 node_mo

@tsuchikazuです。半年ほど仕事でAngularと戯れています。 3/21に開催されたng-japanでは、あと1週間後ほどでリリースされるとアナウンスされていたAngular 1.4 あれから10週間ほど経った5/27。ついに、Angular1.4の安定版がリリースされました。 Developer Guide: Migrating from 1.3 to 1.4とCHANGELOGから、Breaking Changeを中心に簡単にまとめましたので、公開します。 概要 Angular1.4では、主にngAnimateの大きなリファクタリングと、ngMessagesの機能改善、$cookiesへの新しいAPIが追加されました。 ngAnimateのリファクタリングは、今まで存在していたissueやバグフィックスと、より便利なアニメーションを提供するための新APIのために行われました。

@armorik83です。新MacBook Pro 15"が発売され、長らくの相棒MacBook Proも6年選手だったため、めでたく引退となった。今日は個人の日記レベルで新しいMacをセットアップしていく。 OSを丸ごと再インストールする機会自体あまりないが、私は儀式的にOS Xをアップグレードする度にクリーン・インストールする癖があり、次の機会に備えてメモを残す。（未だにクリーン・インストール儀式を執り行うが、周りはどうなんだろう） 購入時点の環境 2015年5月28日、開封直後の状態。 MacBook Pro 15" Mid 2015 2.8GHz Core i7 16GB DDR3 500GB Storage 電源投入 cmd-Rを押しっぱなし Disk Utilityでプリインストールを削除 Yosemite再インストール（要Wifi） 確認 「Yosemite 10.10.3だ

背景 愛用していた MBP15" が一ヶ月ほど前に突然亡くなり、急遽 MBP13" を買って環境構築を行ったので記録しておく。 (その後噂の薄くて軽くて新しい Macbook が出ただけでなく MBP13" までマイナーアップデートされたりしたが、悔しくはない。悔しくはないぞ！！) Brewfile オワコン問題 開発環境の構築は Homebrew と Homebrew Cask を入れて Brewfile を書き、 brew bundle すれば終わりかと思いきや、もう Brewfile はオワコンになってしまったらしい。 (3/25 追記) Brewfile がオワコンなのではなく Homebrew 本体から bundle コマンドが外されただけで、 元となった brewdle コマンドは健在で、もっと便利な brew-file もあるとのことです。 参考: Brewfileはオワコン

@armorik83です。Qiitaはなんか違うなと思ったので初めてはてなブログに手を出す。 postd.cc 元ネタは上の記事。真面目に回答してみたら能力全然足りてなくて危機感いっぱいです、がんばろ。 コンピュータサイエンス データ構造: レベル1 レベル2: ハッシュテーブルの実装方法や衝突への対処法、優先度付きキューとその実装方法などを説明できる。 レベル2で説明求められたので脱落。 アルゴリズム: レベル0.5 レベル0: 配列内の平均値を見つけることができない（信じ難いことですが、私はそのようなプログラマ志望者と面接したことがあります）。 レベル1: 基本的なソート、検索、データ構造トラバーサル、データ取り出しアルゴリズムの知識がある。 さすがに平均値は見つけられても『データ構造トラバーサル、データ取り出しアルゴリズムの知識がある。』がどこまでのものを指すのか…。アルゴリズムは自

2015/3/7 にMSakamaki氏に声を掛けられれて一緒に AngularJS ES6 リファクタソンを開催しました。 内容は参加者が 2〜3 人のチームに分かれて ES5 で書かれた Angular1.3 ベースの Web アプリを、ES6 でリファクタするという企画です。 ES5 のコードの中にクソコードを仕込んでおいて、ついでにリファクタしてくれるかなーなんて思いながら主催側ですが、一緒にリファクタして結構楽しかったです。 Angular1.3 を ES6 でリファクタするポイントや、書き換えてみての所感とかまとめようと思います。 (注 今回のコードは実験的な試みです。プロダクションコードに適用するかは自己責任でお願いします。) AngularJS ES6 リファクタソン - AngularJs Japan User Group | Doorkeeper Angular1.X

HTML5や、次々と台頭するJavaScriptフレームワークにみられるように、現在のフロントエンドは異常なほど動きがあります。 常にキャッチアップしていないと、いつのまにかOLDな技術を使い続けることになります。実際に今回記事にしてみて、ちょっとつらくなりました。。 しかし、フロントエンドエンジニアとしてコードを書いていて（最近は主にJavaScript）、そのおもしろさに日々驚いています。 そこで今回は、ここ数年~2015年のフロントエンド界隈で一度は流行った技術、今後の動向などをまとめました。タイトルにモダンとありますが、その辺は適当です。ぜひ一度整理してみてください。 目次 Javascriptフレームワーク React.js Angular.js Angular.js 2.0 Backbone.js Vue.js Mithril.js Aurelia.js Knockout.js

TypeScriptで作成したライブラリをrequireで読み込めるようにするには.d.tsをreference pathで参照する。 ただし、普通に.tsを–declarationでtscした結果では参照できないので、以下のような内容を手書きする。 declare module "Hoge" { export var huga: String; export var gege: Number; }上記の内容をnpm install Hogeで入れている場合、以下のような形式で読み込める。 （dtsmで入れている場合、reference pathで直接node_modulesを参照する必要はない） /// <reference path="../node_modules/Hoge.d.ts" /> import Hoge = require('Hoge'); console.log(Hog

Help us understand the problem. What is going on with this article? こんにちは、@armorik83です。私のAngularJS歴は2年弱で、これまでAngularJSに関する記事はQiitaにたくさん書いてきました。例えば次のような記事です。 AngularJSアンチパターン集 2014.9 ここらでDirective Scopeの@=&をまとめておきたいと思う 2014.9 TypeScriptで書くAngularJSのMVC 2014.2 AngularJS Directiveの処理順を網羅してみた 2014.12 他にもニッチなものやイマイチだったものも含めてけっこうな数となってきました。また、こういった記事の縁で勉強会でも登壇させて頂きました。 モダンAngularJS 2014.12 GDG中国 TypeScr

HTTP2 時代のサーバサイドアーキテクチャフィードバック - Togetterまとめ のあたりで話していたことのまとめ。 補足 タイトルで「ES6 Modulesってconcatしないと動かないの？」と一部に誤解を与えてしまったようなので補足。ES6 Modulesがブラウザにネイティブ実装されたら、当然concatしなくても動きます。 ここで書きたかったテーマは「ES6 Modules + HTTP/2 + concat無し は ES6 Modules + HTTP/1 + concat と同等の速度で動作するのか」です。 追追記 (2016/01) kazuhoさんはh2oで Cache Aware Server Push という解決策を提案しています。 Jxckによる日本語解説記事: HTTP/2 Push を Service Worker + Cache Aware Server

Rust 1.0 Release記念祝賀LT会 - connpass に参加してきたメモ Saneyuki 1.0リリース Rustコミュニティはガバナンスモデルを気にしてる GoとかNode.jsとか ガバナンスはめっちゃ長い Graydon Hoare Rustオリジナル作者による基調講演 – Servo - saneyuki Servoのレビューア DOMとのバインディング Servoとはなにか 並列性のあるブラウザエンジン プロダクトでのシップの予定は今のところは計画してない 年末にドックフード版を出す予定 Rust Rust本体 PistonDevelopers/piston Servovo Servoから出たもの Kuchiki Nokogiriみたいなパーサ rust-selectors rust-url URL Standard の実装 https://url.spec.w

ボタンを叩くタイミングからBPMを検出して設定してくれる、いわゆるタップテンポ機能。 シーケンサーやサンプラーなどに搭載されていて、最近はブラウザ上で確認できるサービスもいくつかある。 Tap for Beats Per Minute BPM Tap BPM beat finder Tap BPM - Online Beats Per Minute Calculator and Counter http://www.tempotap.com Reactive Programming そしてこの記事。 【翻訳】あなたが求めていたリアクティブプログラミング入門 - ninjinkun's diary 昔これ読んだときに適当なイベントストリームからBPM計算することもできそうと思ったので、勉強ついでに似たようなものを作ってみた。 Tap Tempo Machine - Simple BPM ca

ここ最近、 [翻訳] Elixir - 次に来る大物Web言語 - Qiita とか 超高速なJSON APIをElixirフレームワークのPhoenixでビルドしてテストしよう | POSTD を読んで気になっていたので、勉強していた。 前提: 自分はシングルページアプリケーションに特化したフロントエンドエンジニアであり、サーバサイドのプロダクション運用にはそこまで強くない。あとこれはここ2日の勉強した日記でもあり誤解や勘違いも多々あると思う。 リアルタイムウェブアプリケーションのためのサーバー Railsの次の時代、リアルタイムウェブの為のウェブフレームワークがあるとしたら、次のような特長をもつと思う。 HTTP, HTTP/2. WebSocket等のプロトコル対応と抽象化 JSON APIに特化 認証系 キャッシュ管理 Viewに関心がない リアルタイムウェブは、その言葉をどう定義

151223現在、beta.0がリリースされましたので本稿のサポートは終了します。 150721現在、Angular 2.0.0-alpha.31がリリースされています。数版前にDeveloper Previewと銘打ったのは何だったのかAPI変更がけっこう多いので、覚えている限りのAPI変更を記しておきます。記憶から抜けているものがあったら下のコメント欄で補足願います。 以下についての変更は煩雑なので追いません。 内部API エラーハンドリング用API alpha.14以前 見出し名が執筆時・記事修正時の最新のAPI名です。 @View alpha.19より Big rename. Part of #1244 #1285 bf79337 旧称: @Template プロパティも改名

var assert = require('assert'); it('test1 strictEqual', function() { var a = 'abcde'; var b = 'abcdf'; assert.strictEqual(a, b); }); it('test1 eqeqeq', function() { var a = 'abcde'; var b = 'abcdf'; assert(a === b); }); it('test2', function() { var a = { hoge: 12 }; var b = { hoge: 13, fuga: 56 }; assert.deepEqual(a, b); }); 1) test1 strictEqual 2) test1 eqeqeq 3) test2 0 passing (15ms) 3 failing

Electron (旧atom-shell)を使えば、JSやモダンなWeb技術を活かしてクロスプラットフォームなPCアプリを作ることができる。 APIが充実していて、Webページをただ移植しただけの単純なアプリだけでなく、割と手の込んだUIも実現できるかもしれない。 たとえば、Gyazoのようなスクリーンショットを撮るための領域選択のUIを作ることができる。 実装方法 画面の全体に透明なウィンドウを作って、その上の透明なWebページでmousedownなどのイベントにあわせて必要なUI要素を描画する。 https://github.com/uiureo/electron-crop-rect/blob/master/main.js app.on('ready', function () { const Screen = require('screen') const size = Scree

【追記150803】ESLint v1.0.0がリリースされました。メジャーリリースに伴いBreaking Changeが入っていますので、下記のままでは使えないオプションが存在します。1.0.0での新ルールについてはこちらの記事でまとめています。本稿は記録のため、当時のまま残します。 どうも@armorik83です。ESLintのオプションを全部読んで吟味したので応酬を載せます。TypeScriptを辞めたというより、単機能ライブラリならES6の方が早く書けたという程度です。まさかりはブコメから。 小分け まずは小分けにして。見出し名は公式サイトと同じにしてあります。2がexit code 1投げるやつ、1はログのみ、0が無視。 Possible Errors

// 開発中のソースを見本用にいじってます sample(controller: any, requires?: any[]) { requires = requires || []; requires.push(this.id); const selector = controller.selector; const element = document.querySelector(selector); // この辺 this.angular.bootstrap(element, requires); }