読者です 読者をやめる 読者になる 読者になる

Write and Run

it's a simple way, but the only way.

就活目的 #cdgh

最高だぞ

f:id:koba789:20161118215448j:image

次回は今回の人間の知り合いの会社らしい

 

f:id:koba789:20161118215627j:image

 俺はオレンジ

 

お前ら行け

f:id:koba789:20161118222721j:image

これは聖地渋谷までわざわざ行って撮った

 

インスパイアされた次回

夜の合同説明会 - アニメイトラボ, ドリコム, GMOペパボ, Repro - connpass

 

他の就活目的レンジャー:

就活目的、夜の合同説明会 - osyoyu.hatenablog.com

就活を目的させていただきます - 思考録++

#cdgh 夜の合同説明会の感想 - polamjaggy

 

入隊したい方はこちら:

就活戦線2016 - polamjaggy

TypeScript+mocha+power-assert+empowerでカバレッジをとってついでにCircleCI+Codecov

表題のとおりだが、更に CircleCI のビルドを高速化するために yarn を使うぞ。

やりたいこと

  • 最新の TypeScript を使う
    • 1.8 とか使わない
  • テストコードも TypeScript で書く
  • empower する
    • 明示的に require('power-assert') しない
  • source map が生きてる状態でカバレッジを取る
    • TypeScript の行ベースで結果が出る

やりたくないこと

  • 中間ファイルの生成

やっていく

ガンガン入れる。

yarn add --dev typescript ts-node babel-register babel-preset-power-assert power-assert mocha nyc @types/mocha @types/node

この状態で、

mocha --compilers ts:ts-node/register,babel-register

とするとテストが、

nyc --extension .ts mocha --compilers ts:ts-node/register,babel-register

とするとカバレッジ付きのテストが走るようになっている。

なので、package.jsonscripts にこれを書く。

    "test": "nyc --extension .ts mocha --compilers ts:ts-node/register,babel-register"

いいですね?

ここからは CI の話

package.jsonscripts にこれを足す。

    "report-coverage": "nyc report --reporter=lcov  > coverage.lcov"

これでカバレッジのレポートが吐けるようになった。

カバレッジレポートを codecov に送りつけるために circle.yml にこれを書く。

test:
  post:
    - npm run report-coverage && bash <(curl -s https://codecov.io/bash)

あと、CircleCI でのビルドを高速化したいので以下の内容もベタっと書く。

machine:
  node:
    version: 7.0.0

  post:
    - curl -o- -L https://yarnpkg.com/install.sh | bash

dependencies:
  cache_directories:
    - "~/.yarn-cache"

  pre:
    - yarn --version

  override:
    - yarn install

blog.stormcat.io

この記事を参考にした。

結果

package.json

{
  "scripts": {
    "test": "nyc --extension .ts mocha --compilers ts:ts-node/register,babel-register",
    "report-coverage": "nyc report --reporter=lcov  > coverage.lcov"
  },
  "devDependencies": {
    "@types/mocha": "^2.2.32",
    "@types/node": "^6.0.46",
    "babel-preset-power-assert": "^1.0.0",
    "babel-register": "^6.18.0",
    "mocha": "^3.1.2",
    "nyc": "^8.3.2",
    "power-assert": "^1.4.1",
    "ts-node": "^1.6.1",
    "typescript": "^2.0.6"
  }
}

circle.yml

machine:
  node:
    version: 7.0.0

  post:
    - curl -o- -L https://yarnpkg.com/install.sh | bash

dependencies:
  cache_directories:
    - "~/.yarn-cache"

  pre:
    - yarn --version

  override:
    - yarn install

test:
  post:
    - npm run report-coverage && bash <(curl -s https://codecov.io/bash)

最後に

あとはバッジとかつけてかっこよくキメましょう。

ちなみに、この TIPS が適用されているリポジトリがこれです。

github.com

ルーティングルールを DFA として保持するのでルール数が増えても速いはず、というサーバーサイド用の URL ルーターです。

XAMLに思いを馳せすぎてReactにDataTemplateを輸入した

WPF、もとい MVVM 信者としては、どうしても pure な Class で ViewModel を作りたいというのがあって*1、React にその思想を持ち込んでみた。

React では往々にして Container Component といわれる MVC の Controller みたいなものと Presentation Component と言われる View みたいなものを多層に重ねて UI を作る。V と C が交互に折り重なるように見えるので、ミルフィーユ方式と呼びたい。

それに対して、MVVM(って言っていいのかな)では、ViewModel という名のただのインスタンスのオブジェクトグラフが1本あって、それとは別に View がある。で、この View は ViewModel のオブジェクトグラフとトラバーサルして変換するような形で作られる。XAML がわからない人は XSLT を想像してください。ああいう感じです(ちょっと違うけど)。

ミルフィーユ方式ではどうしても状態管理と VDOM 生成の責務がべったりしがち、ということがあってあまり好きではないんです。Controller が View を知ってる、みたいになってしまって気持ちよくない。それに対して MVVM の View はロジック(ViewModel)に対してとことん非破壊的なんですね。これがよい。ViewModel は好きなように書いて、View がそれに合わせる。理想じゃないですか。

で、VDOM のポテンシャルを活かせばそれくらいできるでしょう、と午前2時くらいの脳がひらめいたのでちょろっと書いてみました。

まず、なんの変哲もない木構造のクラスを定義します。

export abstract class Node {
  constructor(public value: string) {}
}

export class Tree extends Node {
  constructor(value: string, public children: Node[]) {
    super(value);
  }
}

export class Leaf extends Node {
}

こう、pure な感じで普通に書くわけですね。

で、それをレンダリングする View を書きます。

class TreeView extends ScopedComponent<{
  root: Node
}, {}> {
  render() {
    const {root} = this.props;

    return (
      <ul>
        <DataTemplate type={Tree}>
          {
            ({content}: { content: Tree }) =>
              <li>
                {content.value}
                <ul>
                  {
                    content.children.map((node, i) => {
                      return <ContentControl key={i} content={node} />;
                    })
                  }
                </ul>
              </li>
          }
        </DataTemplate>
        <DataTemplate type={Leaf}>
          {
            ({content}: { content: Leaf }) =>
              <li>
                {content.value}
              </li>
          }
        </DataTemplate>
        <ContentControl content={root} />
      </ul>
    );
  }
}

ナイス非破壊。これだけで再帰構造をレンダリングできます。

実装はこちらにおいてあります。XAML に恋い焦がれている方はどうぞ。PoC なので、スコープが hierarchical cascade じゃないとかで全然実用的ではないですが。

github.com

*1:C#WPF でも DependencyProperty まみれで Pure とはいえないが

GraphQLのはじめかた

トレンドに乗るためにはトレンドを自分の方に捻じ曲げるのが一番いい、ということで、Twitter で日夜 GraphQL, GraphQL と騒いでいる日々であります。

先日、tng23 で「GraphQLの話」をしてきました。解説記事とか書くみたいなことをノリで口走ったので、これは伏線回収です。

GraphQL は公式のドキュメントが充実しています。とはいえ、全部英語なので日本にはあまりリーチしてないですね。みなさん英語読んで……。

母語でない言語で書かれた文章を自分のペースで読みながら、そこに書かれている新しい概念を獲得するってのは結構な重労働です。そこで、おすすめの学び方はカンファレンスでの GraphQL に関する発表の映像を視聴することです。YouTube の自動字幕はすごくて、 "GraphQL" が "graphical" になったり "graph kill" になったりするくらいで他はめちゃくちゃ精度よく文字起こしされます。スライドもあるので言葉だけのドキュメントよりも概念の理解が楽だと思います。以下のページにたくさん動画へのリンクがあります。

graphql.org

この動画なんかは導入としてとてもいいです(作者が喋ってるので当たり前ですね)。

www.youtube.com

動画は脳にいいんですよ。

GraphQL でリアルタイムなフィードとか扱いたいです、みたいな一歩進んだ人はこれも見ましょう。

www.youtube.com

動画を見て興味が出てきたら手を動かしましょう。

express-graphql とかを使うと GraphiQL (API コンソール)付きのサーバーがサクッとできるので便利です。

github.com

Node.js で GraphQL するなら使うことになるであろう実装が graphql-js です。作者が作ってるリファレンス実装です。

github.com

半年くらい前まで結構実装に粗が目立ってたんですが、最近はコミュニティも活発でこなれてます。低レベルな API と高レベルな API がわかれてて、どちらもちゃんと export されててえらいです。えらい。

あと、flow で書かれてるので type annotation があって読みやすいですね。自分は TypeScript 派ですが。

はじめかたはこんな感じです。とりあえずはじめましょう。

PYNQ-Z1というFPGAの板を買った

PYNQ-Z1 という FPGA の板があって、それを買いました。とはいえ注文しただけで、まだ届いてない。

FedEx の高い方で輸送されるらしいので、早く届くといいな。

届いたらまたいろいろ書きます。

LINEインターンに参加した

40万円

f:id:koba789:20160904022502j:plain

LINE Payのチームでなんかの実験環境を作ったりしました。

f:id:koba789:20160902132637j:plain

例えば、これは最終日の昼に食った肉です。

f:id:koba789:20160807073851j:plain

たまたま倒壊していなかったときの建物です。

ほかにもなにかを作ったりしました。はやくリリースされるといいですね。

f:id:koba789:20160807034851j:plain

つくばから東京までは自転車で行って、五反田のベッドで寝てました。

f:id:koba789:20160825100314j:plain

これは見えるやつです。

f:id:koba789:20160826183747j:plain

夜になるとよりよい。

LINE Pay は LINE ID: koba789 にお金を送ることができる良いサービスです。

はい