はてなブックマーク

const {BrowserWindow} = electron; const os = require('os') const path = require('path') const fs = require('fs') function createWindow() { : : // react dev toolのID const id = "fmkadmapgofadopljbjfkapdkoienihi" // extensionの場所、"~/Library"だとダメだった const extensionDir = path.resolve(os.homedir(), "Library/Application Support/Google/Chrome/Default/Extensions/") // version指定 const versions = fs.readdirSy

Recompose RecomposeはHigher-order Componentsをサポートするライブラリ。 Higher-order Componentsについては下記記事で軽くまとめた。 ReactのHigher-order Component(HoCs)に関するメモ どんなライブラリ？ HoCsを作成・提供するための便利関数ライブラリ 「lodash的なノリで、関数群をまとめている」とのこと 作者はflummoxやreact-actionなど、reactやredux関連を多く作っているライブラリの作者。 まだ 0.20で微妙にAPIは安定してない部分もアリ まずはサンプル 例： 未サポートブラウザの時にメッセージ出す 説明だけだとわかりづらいので、個人的に一番とっつきやすかったbranchを使って、特定のブラウザの場合に「お使いのブラウザはサポートされてません」と出すサンプルを書

Higher-order Components ReduxなどReact関連のライブラリで時々出てくるHigher-order Componentsについて色々わかんなくなったので調べたことをメモ程度に留めてまとめる 通称 HoCとかHoCsとか略されるが、この記事では Higher-order Components、HoCsで統一しておく。 Higher-order Components(HoCs)とは？ 語の元となったのは高階関数(Higher-order function)であると思われる。 高階関数は、「関数を引数にとり、関数を戻り値とする」ような関数の事。 HoCsも同様で、「Componentを引数にとり、Componentを戻り値とする」ような関数（または実装パターン）の事 1 なぜこんな概念が出てきたのか？ この記事が良く出される Mixins Are Dead. Long

tl;dr ESLintっぽいCSS用のLint PostCSSプラグインとして動作するので色々嬉しい SCSSもだいたい使える stylelint ESLintのようなconfigでPostCSSプラグインとして動くstylelint。 唐揚げチャーハンのような「美味いものと美味いもの組み合わせたら絶対おいしいじゃん！」みたいなプロダクトが実際とても良かったので色々利点を記載。 導入についての手順などはすでに記事があったので、そちらへリンクしたい CSSのLintをstylelintにする ESLintっぽくて良い所 javascriptのLinterとしてスタンダードになってきたESLintに非常に良く似て作られているので、一度そちらを導入していればstylelintの導入はおそらくすんなり出来る。 また、ESLintの持っていた良い所をそのまま持ってきたような良さがある。 confi

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

vue.jsでdrag and dropやりたかったけどこれぐらいしかサンプルが見つからず、割りと苦戦したのでメモ できたもの 動くやつ：http://suisho.github.io/example-vuednd/ ソース：https://github.com/suisho/example-vuednd browserifyも利用。楽しい ２つリストが並んでいてアイテムをリスト感で移動できるようなやつ 今回はitemとlistというコンポーネントをつくる 感想 vue.jsちょこちょこ触ってはいたけど、DnDの場合そこまで恩恵が大きくなかったかも？ vueはそんなに色々めんどうみてくれるわけではないので、HTML5のふつーのDnDの知識が普通に必要 以下細かいところ どんな感じで設計するか 大きく下記３つのコンポーネントができる item ドラッグ対象なる要素 list itemを内包す

何回か使ううちに微妙な所も見えつつ、とはいえ結局より良いfluxは出てき無いので付き合っている感じのRedux。 毎回最初にどう書くんだったか忘れてしまうのでここらで自分が毎回やっているのをまとめておく。 だいたい下記を入れておいてる前提 react関連 react react-dom redux関連 redux react-redux redux-actions redux-thunk babel必要ならこのへんのpreset babel-preset-react babel-preset-es2016 main エントリポイントになる所。あんまり考えることはない。 ./store、./containerは下記で記載する。 あんまり気合いれない時はこのファイルにstoreもcontainerもまとめちゃう。 import React, { Component } from "react"

SCSSなどのprecompileを使うときにはもはや当たり前のになってきたたSourcemap。 あんまり気にせず使うことも出来るが、レガシー環境などで快適に使いたくなったりするとちょいと工夫が欲しくなる。 Sourcemapを使う方法 Sourcemapを読み込む方法として、だいたい3つぐらい手法が用意されている 該当の出力コードにインラインで記載する 該当の出力コードに、別途出力したSourcemapファイルの位置を指定する X-Sourcemapのリクエストヘッダで、別途出力したSourcemapファイルの位置を指定する 出力コードに手を加えるやり方 1, 2のソースコードが手法はわりとメジャー。 結構良く説明されている。qiitaでも下記のあたりの記事が見つかった http://qiita.com/kyaido/items/04658c04a7dbe9f05c16 http://

このサンプルが中で何やってんのかざっと読んだ時のメモ。 LSTMの本実装部分は正直全然読み込めてない。 一旦ある程度自由に検証出来るようにいじれるぐらいまでの読み具合。 訓練データの分類 コード全体として、入力される訓練データは3種類ある。 train 学習に使われるデータ valid 誤差率を検証するためのデータ 誤差の数値はhistoryとして記録されている test 訓練とは独立して誤差検証に利用されるデータ 過学習が起きてないかどうかを検証するために使っているっぽい。 実訓練とは完全に独立して利用されている。 validのエラー率同様、testの誤差率もhistoryに記録される（後述） コードリーディング imdb.py データの準備、などを行っている。独自データを扱う際にはこの部分の拡張をするのが一番手軽。 prepare_data() 複数の訓練サンプルを受け取り、転置行列、

せっかく会社の名前を借りたAdvent Calendarの記事なので、会社に絡んだ題材を扱います。 （前置き）転職会議 について Livesenseでは、転職会議という転職者による企業の評判クチコミを扱ったサイトを運営しており、日々企業についてのクチコミが投稿されている。 これまで転職会議では、クチコミのテキストデータと5段階からなる評点データを別々のデータとして取得していたが、先日のリニューアルで、評点とテキストデータを同時に投稿できるようになり、さらに読みやすいクチコミを提供できるようになった。 リニューアル以前に投稿されたクチコミ リニューアル後に投稿されたクチコミ ここで感じる課題感 新しく投稿されるクチコミは評点によって読みやすくなったものの、過去に蓄積された大量の投稿には当然5段階の評点データは無いし、そのままでは顔アイコンを出すことは当然出来ない。 しかしこの課題を解決して、

ここ数日、rails-assetsは終わったとかいやいやbowerはまだ終わってないと騒がしいですが、そんな中、最近自分もbowerを最近捨てていたので1そのあたりの話。 どんな環境か？ プロダクト全体ではまだbrowserifyなどは使えてない 使いたいけどなかなかそこまで手が回らず・・・ browserifyとか使っているのであればbowerからの移行先は基本npmで良いだろう bowerはChart.jsとかちょっとしたライブラリを持ってくるのに使っていた。 bower -> gulpでconcatして出力して管理していた。 このぐらいな環境であれば、jsdelivrはそれなりにおすすめできる。 結果：CDNで対応しよう ある程度有名なライブラリばかりだったので、CDNで対応するのが楽そうだった。 CDNは色々あるが、jsdelivrを選定した。選定理由はこんな感じ ライブラリ数が十

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

画像などを遅延読み込みをするlazyloaderが久々に必要になってナウいやつを探してたら見つけた。 the ultimate and lightweigth lazyLoaderだそうです。つよそう。 軽く使って良さそうなのにあまり記事がなかったので個人的まとめ。 良いとこ ピュアな実装でjqueryなどフレームワークに依存していない jquery.lazyloadあたり使いたいけどjqueryを入れねば、みたいな問題がない。 レスポンシブ対応などが豊富 プラガブルな実装 画像以外にもスクリプトやiframeにも対応しているよう Star数:2625（2014/12/27時点）。 作者はhtml5shivなどの作者らしい https://github.com/aFarkas 悪いとこ initial commitが3ヶ月前(2014/10）でまだまだ枯れてない バージョンは0.6。まだベ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

最初思ってたこと vs 現実 思ってたこと：なんか軽量？ 現実：誤解だった。割りと作ってくと大きめになってくる。軽量感は無い が、redux本体のコードは結構薄い。本当に関数群だけ提供しているイメージ 思ってたこと：他のfluxと圧倒的に違う？ 現実：これも誤解。構成としては色々作りこむと最終的には一般的なfluxと同じ感じになる（flummoxとかmartyあたりと体感一緒になる） ActionとかActionCreatorとかその辺が一緒になってくる。 思ってたこと：ES6で圧倒的に書ける？ 現実：正解。圧倒的にES6を前提にしている。 思ってたこと：React用のもの？ 現実：別にそうでもない。react-reduxを使うことでreactで使えるようになる。 詰まった所など 用語編 割りと初めて見たりする用語に出会った ActionCreator martyあたりにもあった。{typ

sassでグリッドデザインをするときに有効なgrid frameworkの話。 今回比較するやつら 数値は2015/02/03時点 Susy sassの公式サイトでも使われている（らしい） すーじーと読むらしい。（ロゴあたりをhoverすると読みが出てくる） Star数: 2367 Neat Bourbonシリーズ Bourbonは軽量ライブラリ throughbot製 ドキュメントが丁寧 Star数: 2632 今回除外したもの Profound grid サイトが黄色い。 最終更新が5ヶ月前とあまり更新が活発でなさげ Star数: 902 あまり活発でなさそうなので除外。 用語 用語みたいなものが複雑な感じでぶれそうなので 一旦このドキュメントでは下記のように定義しておく。 column 12分割などしたうちの1つ span 複数のcolumnを含むブロック gutter columと

大本命。ESLint 2015年現在、JavaScriptのLinting toolといえばJSHintかJSLintみたいな風潮ありますが、もうESLintで行きましょう。 公式ページ github 大きな特徴 プラガブルな実装 全てのルールのON/OFFが可能 独自のルールの追加が可能 独自のフォーマッターでの出力が可能 ECMAScript 6 / React JSXをサポート Philosophy ESLintは下記のPhilosophyを掲げています。 全てはPluggableである。 Rule APIはバンドルされたものもカスタムもどっちも使える Formatterはバンドルされたものもカスタムもどっちも使える 追加のルールとフォーマッターは実行時に指定できる バンドルされたルールとフォーマットを使わなくても良い 全てのルールは 独立している 全てのルールはoffにもonにもで

2016-01-31追記 この記事を最初に書いた頃は他に何も情報がありませんでしたが、今ではよりだいぶわかりやすい資料が出揃ってきました。しっかりとしたimport/exportの仕様をもっと知りたい場合は下記を参照することを推奨します https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import http://www.slideshare.net/teppeis/effective-es6 http://uehaj.hatenablog.com/entry/2015/11/07/001848 2015/12/05追記 コメント欄より Babel v6 から Babel 公式の transform である transform-es2015-modules-commonjs を使った場合 ES

{ "env": { "node" : true, "browser" : true }, "ecmaFeatures" : { "jsx": true, "objectLiteralShorthandMethods" : true }, "plugins": [ "react" ], "rules": { "react/display-name": 1, "semi" : [2 , "never"], "strict" : false, "key-spacing" : [2, { "beforeColon" : true, "afterColon" : true, }], "no-unused-vars": [1, {"vars" : "all", "args" : "after-used"} ], "no-comma-dangle" : false } } ES6 && JSXを使うの

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?