howdylikes

Google Developersってわかりづらいよね

AngularJS angular-mocks

karmaでangularが動かねぇなぁとおもってたらangular-mocksじゃなくてangular-mockになってた・・・

https://www.npmjs.com/package/angular-mock

11 downloads in the last day
142 downloads in the last week
365 downloads in the last month

なおnpmのダウンロードがそれなりにあるのでそれなりに同じ事象に陥った人はいるだろうな・・・
これ消してくれないのかなぁ

JavaScriptでArrayオブジェクトの文字列結合の速度検証

よく見るコードだとjoin使っているのが多いですがパフォーマンス的にはどうなんだ?というのを試してみる。
ggっても出てくると思うけど勉強がてらということで。

前提条件

検証パターンは以下の5つでそれぞれ100万回

  • for文使って+演算子
  • Array.forEachで+演算子
  • Array.reduceで+演算子
  • String.concat
  • Array.join

順番は実装が嫌?な順

サンプルコード

結果

type 速度
for 157.259ms
Array.forEach 215.781ms
Array.reduce 163.422ms
String.concat 265.373ms
Array.join 713.505ms

やっぱりforが速いですね、ただこんな実装絶対したくない。
このレベルでfunctionとか作りたくないですしね。
ワンライナーで書きたいので、基本はArray.joinでちょっと処理が重なるときはString.concatぐらいがいいのかなぁ。

余談

jsfiddleと比べてChromeのデベロッパーコンソール上で実行すると異様にconcatが遅くなるのはなんででしょうかね。

Tslint classのメンバ変数はpublicを先にかく

tslintでこんなエラーが Declaration of public static member variable not allowed to appear after declaration of private instance member variable

これはダメで

class AppCtrl {
    private users;
    public static $inject = ["$q"];
    constructor(private $q) {
        console.log("AppCtrl");
    }
}

こうしろってことですな。

class AppCtrl {
    public static $inject = ["$q"];
    private users;
   constructor(private $q) {
        console.log("AppCtrl");
    }
}

VSCodeでtslint

VSCode

tslintの拡張機能をインストール

tslint | Visual Studio Marketplace

設定ファイルはDefault Settingsに作られている。
f:id:howdy39:20160314215849p:plain

ファイルが空文字になっているけどデフォルトはtslint.json使う模様。

tslint.json

プロジェクト直下にtslint.jsonを作る
内容は以下のページ参照

https://github.com/palantir/tslint/blob/master/tslint.json

結果

f:id:howdy39:20160314220052p:plain いろいろ怒られるようになりました。。 文字列ダブルクォートが標準なんですね。。知らんかった。

Webpack + TypeScriptのTS2304: Cannot find name 'require'エラーの解決法

Webpackでモジュール読み込むときにrequire使いますがjsからなら問題はないですがTypeScriptからだとコンパイルエラーになります。
指定方法がTypeScript上おかしいのでimport文でもだめだと思われます。

require('jade!./app.jade')();
// ERROR in ./src/ts/components/app/app.ts
// (14,25): error TS2304: Cannot find name 'require'.

その場合、declare文を記載してrequireという関数があると認識させればOKです。 requireのあるファイル全てに書くのはあれなので共通のd.ts作ってそこをreference pathで指定です。

declare function require(string): any;

参考サイト

github.com

Error: [$compile:multidir] Multiple directives

表題の通り実行時にエラーが出たので原因と解決方法のメモです。

Webpack + AngularJS + TypeScript構成です。

最終的にエラーになる理由はディレクティブを複数定義したからです。 Webpackが生成するbundle.jsが同じのを吐いているんですよね。

// 呼び出し元
import './app/app';
import './header/header';
// 変換後
    __webpack_require__(8);
    __webpack_require__(9);

/***/ },
/* 8 */
/***/ function(module, exports) {

        // 省略
    angular.module('app')
        .component('myApp', new MyAppComponent());

/***/ },
/* 9 */
/***/ function(module, exports) {

        // 省略
    angular.module('app')
        .component('myApp', new MyAppComponent());
/***/ },

Step 1

いろいろためしてみたところtsconfig.jsonをリネームして読まないようにして実行したところすんなり通る。。

ちなみにこんなんです。

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": false,
        "outDir": ".",
        "out": "dummy.js",
        "rootDir": ".",
        "sourceMap": false
    },
    "files": [
        "./src/ts/app.ts"
    ]
}

Step 2

1つずつ消していったところ

"out": "dummy.js",を消した時にエラーが消えました。

いやーよくわからない(自分がわかってないだけ)ですね。

tsconfingがTypeScriptコンパイラのオプションてのはわかるんですがそこにts-loader経由でWebpackに入れるとなんでこういう動きになるのか。。。

もともとWebpackを使わずにコンパイルしてたのでoutとかが残っちゃってたのですが一旦tsconfigを消しても不都合はなさそうなのでその作戦でいきます。

webpackとts-loaderとが何をしているかちゃんとみないとあかんですね、黒魔術すぎて詰まるとさっぱりわからない。。。

Angular JS require

Angularをrequireしてやったぜと意気揚々としていたのですが
angularという変数がグローバルに作られててなんでや、、、と思ってソースを追っていたら angularが結局グローバルに書き込んでいるみたいですね。。 https://github.com/angular/angular.js/blob/0b1b9112a341f7f798db915575fad63e0e59894e/src/Angular.js#L163

angular           = window.angular || (window.angular = {}),

つまりエントリーポイントの頭でrequireしてやればその他のところでは普通にangular.XXXが使えるということ。。

var myAngular = require('angular');
// つまりrequire('angular');だけでいい

console.log(myAngular); // Object {version: Object, callbacks: Object}
console.log(angular); // Object {version: Object, callbacks: Object}