特に変わったことはない

gemの雛形を作る

bundle gem を実行

bundle gem gem_name
cd gem_name
git ci -m "init"

処理を書いていく

早速、クラス郡を書いていく

$ cd lib/
$ vi gem_name/base.rb
module GemName
  module Base
  end
end

$ vi gem_name/main.rb
module GemName
  module Main < Base
  end
end

$ vi gem_name/helper.rb
module GemName
  module Helper
    def spec_helper_method
    end
  end
end
$ vi gem_name.rb

require 'gem_name/version'

module GemName
  require 'gem_name/base'
  require 'gem_name/main'
  require 'gem_name/helper'
end

todo: gemとして完成させる

todo: specのことについて書く

使用する側で読み込む


gem 'gem_name'

使用したいファイルで普通のrubyのmoduleを読み込むときのように使う

$ vi spec/spec_helper.rb
requie 'gem_name'
include GemName
$ vi spec/hoge.rb

describe do
  it do
    spec_helper_method
  end
end 

agenda

 Reactを使ってみた話
   agenda
   作り方ポイント
   TIPS
     webpack
     webpack-dev-server
     if文
     checkedは、true か false
     this.props.children
     イベントを起こしたコンポーネントの識別
     polyfill
   ツール
     haml-jsx-loader
     react-checkbox-group
     Lodash
   その他
     deep-freeze

作り方ポイント

  • 静的なページから作り始める

    • 静的なバージョンを作る
    • 想定される初期表示用のデータを準備しておく
    • 画面をコンポーネントに分割する
    • 分割した各子コンポーネントは親からデータを受け取って描画するだけ
  • stateは最低限に絞る

    • propsを通して親から渡されるか?
    • コンポーネント内で他のstateまたはpropsの基に計算出来るものか?
    • 何度も変更されるか?
  • 参考

TIPS

webpack

const webpack = require('webpack');

module.exports = {
  context: __dirname + "/src",
  entry: {
    index:  './index.js',
    spec: './spec.js'
  },
  output: {
    path: './build',
    filename: '[name].js',
  },
  module: {
    loaders: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        loaders: ['react-hot', 'babel-loader', 'haml-jsx']
      },
      {
        test: /spec\.js$/,
        exclude: /node_modules/,
        loaders: ['mocha', 'babel-loader', 'haml-jsx']
      }
    ]
  },
  devServer: {
    contentBase: 'build'
  }
}

webpack-dev-server

if文

短絡評価を使う

<div>
{value && <div>value is true</div>}
</div>

三項演算子を使う

<div>
{value ? (<div>value is true</div>) : (<div> value is false </div>)}
</div>

関数を使う

<div>
{()=> {
  if(value) {
    return (<div>value is true</div>)
  else {
    return (<div>value is false </div>)
  }
}}
</div>

こんなのもある. this.props.childrenをレンダーするかしないかを切り替えてるだけ

checkedは、true か false

undefinedで、falseと同じ動作にならない

''' var isChecked = !!value; ( ) '''

this.props.children

???

イベントを起こしたコンポーネントの識別

bindを使用する

<input onClick={this.action.bind(this, item)} />

polyfill

chrome, firefox, スマホで動作させる分にはなくても動くけど... IE

ツール

haml-jsx-loader

見た目を整える前は、シンプルなDOMのみで動作を作ってるけど、 見た目を適用すると、DOMが複雑になってJSXではシンドイ... hamlでかけて、閉じタグを意識しなくて良くなるのは便利

GitHub - dingbat/haml-jsx-loader: Inline Haml with JSX

https://github.com/dingbat/haml-jsx-loader

react-checkbox-group

思いのほか、複数選択のチェックボックスの値をイベントごとに取得してくるというのがめんどくさい、これを使えば一度にチェックボックスで選択されている値を取ってくることができる。 GitHub - ziad-saab/react-checkbox-group: Sensible checkbox groups manipulation for DOM.

https://github.com/ziad-saab/react-checkbox-group

Lodash

日頃ruby書いている人だと、とても親和性が高い

Lodash

https://lodash.com/

その他

deep-freeze

..いつの間にか思わぬ場所を破壊していることも...

deep-freeze + 'use strict;'

Redux入門【ダイジェスト版】10分で理解するReduxの基礎 - Qiita
http://qiita.com/kiita312/items/49a1f03445b19cf407b7

Smart and Dumb Components in React - Jake Trent
http://jaketrent.com/post/smart-dumb-components-react/

GitHub - romac/react-if: Render React components conditionally
https://github.com/romac/react-if

Array.prototype.find() - JavaScript | MDN
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find

babel-polyfillとbabel-runtimeの使い分けに迷ったので調べた - Qiita
http://qiita.com/inuscript/items/d2a9d5d4daedaacff924

GitHub - zloirock/core-js: Standard Library
https://github.com/zloirock/core-js

GitHub - ziad-saab/react-checkbox-group: Sensible checkbox groups manipulation for DOM.
https://github.com/ziad-saab/react-checkbox-group

GitHub - substack/deep-freeze: recursively Object.freeze() on objects and functions
https://github.com/substack/deep-freeze

node-xml-compare
https://www.npmjs.com/package/node-xml-compare

RunKit
https://runkit.com/npm/node-xml-compare

Jest · Painless JavaScript Testing
https://facebook.github.io/jest/

Resemble.js : Image analysis
http://huddle.github.io/Resemble.js/

【超トリビア】東京都庁の都議会議事堂には誰でも入れるレストランがある / しかも飲み放題が1時間600円と激安! 居酒屋チェーンかよ!! | ロケットニュース24
http://rocketnews24.com/2016/10/03/805997/

料理写真 : テング酒場 渋谷レンガビル店 - 渋谷/居酒屋 [食べログ]
https://tabelog.com/tokyo/A1303/A130301/13085575/dtlphotolst/1/smp2/

Sendagaya.rb #170 Drinkup - Sendagaya.rb | Doorkeeper
https://sendagayarb.doorkeeper.jp/events/53565

問題

似たような見た目だけど部分的に表示されてる部品があったりなかったり、 ついてるclassが少し違ったりみたいなパーシャルがあったりする。 partialにパラメータをどういうものが指定できるのか不明だったり 実際にはどういう組み合わせで使われることがあるのかが不明だったりする そんな時にすこしでも見通しをよくする方法

次のような状態を

render 'mogehoge', element: 'A or B', cart_button: 'true or false'

次のように style_name に変更してパラメータを1つにする

=> render 'mogehoge', style_name: 'A'

=> render 'mogehoge', style_name: 'A_with_cart_buton'

=> render 'mogehoge', style_name: 'B_with_cart_button'

説明

パラーメータの組み合わせ数が爆発していたのを実際に存在する パターンにもどづいて、style_name に統一することでどのパターンがあり得るかということと、 どこで使われているかみたいなことを把握しやすくなる

pyenv install

ここを参考にpyenvを入れました

pyenvを使ってMacにPythonの環境を構築する - Qiita http://qiita.com/1000ch/items/93841f76ea52551b6a97

$ git clone git://github.com/yyuu/pyenv.git ~/.pyenv

.bash_profileへ環境変数の追加の書き込み

export PYENV_ROOT="$HOME/.pyenv"
export PATH="$PYENV_ROOT/bin:$PATH"
eval "$(pyenv init -)"
$ pyenv install 3.4.1
$ pyenv rehash

tensor flow install

この辺見てやった

Tensor Flowを初心者なりに導入してみた - Qiita http://qiita.com/tamagokake_gohan/items/df969c9508d4593a9776

$ which pip3
# すでにpip3がpyenv管理下に入ってる

$ export TF_BINARY_URL=https://storage.googleapis.com/tensorflow/mac/tensorflow-0.9.0-py3-none-any.whl
$ pip3 install --upgrade $TF_BINARY_URL

テスト実行

サンプルを実行してみる

$ TFPATH=`python -c 'import os; import inspect; import tensorflow; print(os.path.dirname(inspect.getfile(tensorflow)))'`
$ cd $TFPATH
$ python -m tensorflow.models.image.mnist.convolutional

Successfully downloaded train-images-idx3-ubyte.gz 9912422 bytes.
Successfully downloaded train-labels-idx1-ubyte.gz 28881 bytes.
Successfully downloaded t10k-images-idx3-ubyte.gz 1648877 bytes.
Successfully downloaded t10k-labels-idx1-ubyte.gz 4542 bytes.
Extracting data/train-images-idx3-ubyte.gz
Extracting data/train-labels-idx1-ubyte.gz
Extracting data/t10k-images-idx3-ubyte.gz
Extracting data/t10k-labels-idx1-ubyte.gz
Initialized!
Step 0 (epoch 0.00), 4.0 ms
Minibatch loss: 12.054, learning rate: 0.010000
Minibatch error: 90.6%
Validation error: 84.6%
.....

その他URL

テンソルフローでMNISTのチュートリアル (Deep Leaning) | OpenBook https://openbook4.me/projects/238/sections/1553

GitHub - tensorflow/tensorflow: Computation using data flow graphs for scalable machine learning https://github.com/tensorflow/tensorflow

Reactを本番投入した時にこれ便利みたいなのをまとめてみる。

react-checkbox-group

思いのほか、複数選択のチェックボックスの値をイベントごとに取得してくるというのがめんどくさい、これを使えば一度にチェックボックスで選択されている値を取ってくることができる。

https://github.com/ziad-saab/react-checkbox-group

react-templates

JSXを vue.js ライクに書くことができそうなライブラリ、個人的にはvue.jsの不自由な書き方でループとかしないといけないので辛さを感じるので使わなかったけど好みの問題かも

https://github.com/wix/react-templates

bundle exec rails s 

こうなる

Usage: rails COMMAND [ARGS]

The most common rails commands are:
 generate    Generate new code (short-cut alias: "g")
 console     Start the Rails console (short-cut alias: "c")
 server      Start the Rails server (short-cut alias: "s")
 dbconsole   Start a console for the database specified in config/database.yml
             (short-cut alias: "db")
 new         Create a new Rails application. "rails new my_app" creates a
             new application called MyApp in "./my_app"

In addition to those, there are:
 application  Generate the Rails application code
 destroy      Undo code generated with "generate" (short-cut alias: "d")
 plugin new   Generates skeleton for developing a Rails plugin
 runner       Run a piece of code in the application environment (short-cut alias: "r")

All commands can be run with -h (or --help) for more information.

次のようにする。

bundle exec rake rails:update:bin

これで bin/ 配下のファイルが更新される

gitからpatch形式で差分を出力して

git diff --no-prefix > a.patch

適用したい環境で patch コマンドを実行する

patch -p0 < a.patch

これだけでーす。

グランポレール ケルナー辛口

http://s.tabelog.com/tokyo/A1301/A130101/13155672/

memcache 全キャッシュキーを取得したいとき

for a in `echo 'stats items' | nc example.com 11211 | cut -f 2 -d ':' | uniq`; do echo "stats cachedump $a 100000" | nc example.com 11211;  done
Recent Entries