TypeScriptで始めるJavascript再入門(1)

Javaなどのクラスベースオブジェクト指向言語を知っている人が最新のJavascriptを知る場合、Typescriptを使うのが良い方法です。

TypeScript - JavaScript that scales.は、マイクロソフトが開発しているaltJSの一つです。 TypeScriptはJavaScriptに対して、省略も可能な静的型付けとクラスベースオブジェクト指向を加えた厳密なスーパーセットとなっています。

使い方

Typescriptは、.tsという拡張子を持つファイルに記述し、tscというコマンドでjavascriptコンパイルします。コンパイルオプションは、tsconfig.jsonファイルに記述します。

$ cat age.ts
let age: number = 10;
console.log(age + ‘歳です。’);

$ cat ./tsconfig,json
{
    "buildOnSave": true,
    "compileOnSave": false,
    "compilerOptions": {
        "target": "es5",
        "sourceMap": true,
        "module": "commonjs",
        "charset": "utf8"
    }
}

$ tsc -p ./tsconfig,json

$ cat age.js
let age = 10;
console.log(age + '歳です。');

静的型付け

Typescriptは、静的型付け可能な言語のため、次のコードはコンパイルエラーになります。javascriptの暗黙型変換によるバグを未然に防ぐことができます。

let age: number = 10;
age += '1';
$ tsc -p ./tsconfig,json
error TS2322: Type 'string' is not assignable to type 'number'.

クラス

クラスは、javascriptのバージョンに応じてコンパイルしてくれます。javascriptのバージョンごとの記述方法を調べる方法としてTypescriptを使うのも良さそうです。

class car {
    speed:number;
    private _ownerName:string;

    accelarator(accelarateSpeed:number)
    {
        this.speed += accelarateSpeed;
    }

    public get ownerName():string {
        return this._ownerName;
    }
    public set ownerName(name:string) {
        this._ownerName = name;
    }
}

このクラスをes5準拠でコンパイルすると以下のjavascriptファイル(car.js)が生成されます。

var car = /** @class */ (function () {
    function car() {
    }
    car.prototype.accelarator = function (accelarateSpeed) {
        this.speed += accelarateSpeed;
    };
    Object.defineProperty(car.prototype, "ownerName", {
        get: function () {
            return this._ownerName;
        },
        set: function (name) {
            this._ownerName = name;
        },
        enumerable: true,
        configurable: true
    });
    return car;
}());

es2015(es6)準拠でコンパイルすると以下のjavascriptファイル(car.js)が生成されます。

class car {
    accelarator(accelarateSpeed) {
        this.speed += accelarateSpeed;
    }
    get ownerName() {
        return this._ownerName;
    }
    set ownerName(name) {
        this._ownerName = name;
    }
}

インタフェース

microsoft独自仕様としてTypescriptはinterfaceを使うことができる。コンパイル時に必須メソッドチェックなどを行ってくれます。

interface vehicle
{
    speed:number;
    accelarator(accelarateSpeed:number);
}
class car implements vehicle {
    speed:number;
    private _ownerName:string;

    accelarator(accelarateSpeed:number)
    {
        this.speed += accelarateSpeed;
    }

    public get ownerName():string {
        return this._ownerName;
    }
    public set ownerName(name:string) {
        this._ownerName = name;
    }
}
class motorcycle implements vehicle {
    speed:number;

    accelarator(accelarateSpeed:number)
    {
        this.speed += accelarateSpeed;
    }
}

リンク

Webアプリのコンポーネント化

vue, reactなどを使ってWebアプリを作成する時、どのようにコンポーネント化していくのが良いのでしょうか? 今、その設計方法(ベストプラクティス)に関心を持っています。

以下の記事は参考になりそうです。

iOSのStoryboard的なツールは便利かもしれない。

nodebrewでnodeインストール

フロントエンド実行環境の最初の一歩、nodeのインストール。今までは、homebrewを使ってインストールしていました。

brew install node

しかし、これだと複数バージョンを混在させることができないので、nodebrewに変更しました。

brew uninstall node
brew install nodebrew

パッケージ管理はyarnを使いたいので、brewでインストールしました。nodeなしでインストールします。

brew install yarn --without-node
Updating Homebrew...
==> Downloading https://yarnpkg.com/downloads/1.3.2/yarn-v1.3.2.tar.gz
Already downloaded: /Users/unokun/Library/Caches/Homebrew/yarn-1.3.2.tar.gz
🍺  /usr/local/Cellar/yarn/1.3.2: 14 files, 3.9MB, built in 2 seconds

たまにしか使わないとどのようにしてインストールしたか忘れてしまいます…

リンク

wikipediaのデータでdoc2vec

doc2vecでWikipediaを学習する - TadaoYamaokaの日記

を参考に、wikipediaのデータをdoc2vecでトレーニングし、類似単語を調べてみました。

総単語数 2,890,010
頻度10以下 2,364,440
残り単語数 525,570

doc2vecは、トレーニングした単語をmodel.wv.vocabで参照することができます。 単語数が、残り単語数の約半分になっているのは、出現頻度が少ない単語が出現している文を削除した時に別の単語も削除しているからでしょう。

>>> len(model.wv.vocab)
266732

トレーニングした単語は、word_vector(keyedvectors)に辞書形式で保存されます。

>>> model.wv.vocab
'カウンダ': <gensim.models.keyedvectors.Vocab object at 0x1143776d8>,
'持ち場': <gensim.models.keyedvectors.Vocab object at 0x10d97e208>,

結果は、(当然ですが)参考にした記事とほぼ同じになりました。

>>> model.most_similar('リンゴ')
[('花', 0.6139837503433228),
 ('トマト', 0.6134904623031616),
 ('ワイン', 0.6084833145141602),
 ('酒', 0.5981301665306091),
 ('果物', 0.5930838584899902),
 ('コーヒー', 0.5895085334777832),
 ('子供', 0.5830855965614319),
 ('果実', 0.5804908275604248),
 ('ビール', 0.5784652233123779),
 ('食べ物', 0.5778894424438477)]

>>> model.most_similar(positive=["ザク", "ガンダム"])
[('ms', 0.7442907094955444),
 ('モビルスーツ', 0.6582286357879639),
 ('モンスター', 0.652472734451294),
 ('x', 0.6502348184585571),
 ('機体', 0.6486747860908508),
 ('マシン', 0.6468290090560913),
 ('ロボット', 0.6423962712287903),
 ('cpu', 0.6389658451080322),
 ('戦闘機', 0.6290717124938965),
 ('ゲーム', 0.6265822649002075)]

>>> model.most_similar(positive=["猫"], negative=["フレンズ"])
[('動物', 0.6338815689086914),
 ('子供', 0.6299443244934082),
 ('人間', 0.6273439526557922),
 ('親', 0.6224128007888794),
 ('ネズミ', 0.6112015247344971),
 ('犬', 0.6050996780395508),
 ('自分', 0.598896324634552),
 ('魚', 0.5975416302680969),
 ('家族', 0.5973026752471924),
 ('が', 0.5970552563667297)]

ひらがなにすると結果が異なるもが興味深いです。リンゴの場合、カタカナ表記する語彙(トマト、ワイン、コーヒー、ビール)を使うコンテキストで用いられるのでしょうか?

>>> model.most_similar('りんご')
[('みかん', 0.5127906203269958), 
 ('桃', 0.479043573141098), 
 ('さくら', 0.45111995935440063), 
 ('リンゴ', 0.44701433181762695), 
 ('ラーメン', 0.42265254259109497), 
 ('梅', 0.4148010015487671), 
 ('ひまわり', 0.41388049721717834), 
 ('夏祭り', 0.3995071053504944), 
 ('弥生', 0.396240234375), 
 ('祭り', 0.3920435905456543)]

リンク

collection型のソート(Python)

Pythonでcollection型のソートにはOrderedDicを使う。

>>> from collections import OrderedDict
>>> # regular unsorted dictionary
>>> d = {'banana': 3, 'apple': 4, 'pear': 1, 'orange': 2}

>>> # dictionary sorted by key
>>> OrderedDict(sorted(d.items(), key=lambda t: t[0]))
OrderedDict([('apple', 4), ('banana', 3), ('orange', 2), ('pear', 1)])

>>> # dictionary sorted by value
>>> OrderedDict(sorted(d.items(), key=lambda t: t[1]))
OrderedDict([('pear', 1), ('orange', 2), ('banana', 3), ('apple', 4)])

リンク

wikipediaのデータでdoc2vec(UnicodeDecodeError)

doc2vecを使ってとあるコーパスのドキュメント類似度を取得してみましたが、思ったような結果が得られませんでした。

そこで、doc2vecの記事が同じように検証できるのか調べてみました。 まずは、これです。

doc2vecでWikipediaを学習する - TadaoYamaokaの日記

手順「頻度の少ない単語を除外する」でUnicodeDecodeErrorが発生しました。

Mecab分かち書きしたwikipediaのデータをpythonで読み込む時に、UnicodeDecodeErrorが発生しました。

$ python ../../../../extract_low_freq_terms.py wiki_wakati.error wiki_lf_terms.1
Traceback (most recent call last):
  File "../../../../extract_low_freq_terms.py", line 12, in <module>
    for line in open(args.input, "r", encoding="utf-8"):
  File "/Users/unokun/.pyenv/versions/anaconda3-4.1.1/lib/python3.5/codecs.py", line 321, in decode
    (result, consumed) = self._buffer_decode(data, self.errors, final)
UnicodeDecodeError: 'utf-8' codec can't decode byte 0xe3 in position 5844: invalid continuation byte

python、UnicodeDecodeErrorで検索しましたが、それらしい記事は見つかりませんでした。

原因は、mecabによる分かち書きで、バッファサイズが足らなかったことが原因でした。バッファサイズを多くとるとそれ以降の処理を問題なく実行することができました。

mecabはバッファサイズを越えた時点で処理をするため、1文字分のデータを出力していないのだと思います。

変更前
$ mecab -O wakati wiki -o wiki_wakati.error
input-buffer overflow. The line is split. use -b #SIZE option.

変更後
$ mecab -b 100000 -O wakati wiki -o wiki_wakati.error

同じくwikipediaのデータを使っている

word2vecで遊ぶ – Eyepod touch

が参考になりました。

リンク

Xamarinをアンインストールしました(MacOS X)

ディスクの空き容量が少なくなってきたので、不要なファイルを削除しました。

インストールしたVisual Studio for Macはすぐ削除したのだけれど、残党(Xamarin)が残っていました。

以下のリンクを参考に手動!削除しました。 ディスク空き容量が10GBくらい増えました。

Android SDKも削除しようかな〜。

リンク