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

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

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

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

nodebrewでnodeインストール

node nodebrew yarn

フロントエンド実行環境の最初の一歩、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

python gensim 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 OrderedDict

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も削除しようかな〜。

リンク

seleniumを使ったスクレイピング(Python)

手順

seleniumのインストール

pip install selenium

WebDriverのインストール

Seleniumのサイトから各種ブラウザのWebDriverをダウンロードすることができます。

Google Chrome Driverを使いましたが、 自動テストにはPhantomJSの方が便利かもしれません。

Downloads - ChromeDriver - WebDriver for Chrome

使う

ボタン押下などの操作を記述することもできます。

driver = webdriver.Chrome(ダウンロードしたWebDriverのパス)

# Web APIを使ってDOMアクセスする
# driver.open(アクセスする対象URL)
# elem = driver.find_element_by_id(ID)
# テキスト要素取得
#elem.text

# ブラウザを閉じる
driver.quit()

Tips

XPathの書き方

# ドキュメントルートから要素を検索します
driver. find_elements_by_xpath(‘//div[@class=“container”])

element = driver.find_element_by_id(‘top’)
# 子要素から対象のXPath要素を検索します
element.find_elements_by_xpath(‘.//div[@class=“container”])

# ドキュメントルートから対象のXPath要素を検索します
element.find_elements_by_xpath(‘//div[@class=“container”])

要素がない場合の処理

要素がない場合は、NoSuchElementExceptionがストーされるので処理します。

    # 例外のimportが必要
    from selenium.common.exceptions import NoSuchElementException

    try:
        elemement = driver.find_element_by_class_name(クラス名)
        処理
    except NoSuchElementException:
        例外発生時の処理

スクリーンショット

エビデンスを残す場合に便利です。不具合が発生した時に確認するのには便利ですが、開発時にチェックするのは…あれですね。

driver.save_screenshot(“scenario_1-1")

ソース取得

回帰テストに使えます。

driver. page_source

リンク