最高だぞ
次回は今回の人間の知り合いの会社らしい
俺はオレンジ
お前ら行け
これは聖地渋谷までわざわざ行って撮った
インスパイアされた次回
夜の合同説明会 - アニメイトラボ, ドリコム, GMOペパボ, Repro - connpass
他の就活目的レンジャー:
就活目的、夜の合同説明会 - osyoyu.hatenablog.com
入隊したい方はこちら:
最高だぞ
次回は今回の人間の知り合いの会社らしい
俺はオレンジ
お前ら行け
これは聖地渋谷までわざわざ行って撮った
インスパイアされた次回
夜の合同説明会 - アニメイトラボ, ドリコム, GMOペパボ, Repro - connpass
他の就活目的レンジャー:
就活目的、夜の合同説明会 - osyoyu.hatenablog.com
入隊したい方はこちら:
表題のとおりだが、更に CircleCI のビルドを高速化するために yarn を使うぞ。
ガンガン入れる。
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.json
の scripts
にこれを書く。
"test": "nyc --extension .ts mocha --compilers ts:ts-node/register,babel-register"
いいですね?
package.json
の scripts
にこれを足す。
"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
この記事を参考にした。
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 が適用されているリポジトリがこれです。
ルーティングルールを DFA として保持するのでルール数が増えても速いはず、というサーバーサイド用の URL ルーターです。
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 じゃないとかで全然実用的ではないですが。
トレンドに乗るためにはトレンドを自分の方に捻じ曲げるのが一番いい、ということで、Twitter で日夜 GraphQL, GraphQL と騒いでいる日々であります。
GraphQL の話、スライド上げました https://t.co/hTUvA9Fajt ハンズオンに良さそうなコードや解説記事などもそのうち公開します #tng23
— KOBA789 (@KOBA789) 2016年10月22日
先日、tng23 で「GraphQLの話」をしてきました。解説記事とか書くみたいなことをノリで口走ったので、これは伏線回収です。
GraphQL は公式のドキュメントが充実しています。とはいえ、全部英語なので日本にはあまりリーチしてないですね。みなさん英語読んで……。
母語でない言語で書かれた文章を自分のペースで読みながら、そこに書かれている新しい概念を獲得するってのは結構な重労働です。そこで、おすすめの学び方はカンファレンスでの GraphQL に関する発表の映像を視聴することです。YouTube の自動字幕はすごくて、 "GraphQL" が "graphical" になったり "graph kill" になったりするくらいで他はめちゃくちゃ精度よく文字起こしされます。スライドもあるので言葉だけのドキュメントよりも概念の理解が楽だと思います。以下のページにたくさん動画へのリンクがあります。
この動画なんかは導入としてとてもいいです(作者が喋ってるので当たり前ですね)。
動画は脳にいいんですよ。
GraphQL でリアルタイムなフィードとか扱いたいです、みたいな一歩進んだ人はこれも見ましょう。
動画を見て興味が出てきたら手を動かしましょう。
express-graphql とかを使うと GraphiQL (API コンソール)付きのサーバーがサクッとできるので便利です。
Node.js で GraphQL するなら使うことになるであろう実装が graphql-js です。作者が作ってるリファレンス実装です。
半年くらい前まで結構実装に粗が目立ってたんですが、最近はコミュニティも活発でこなれてます。低レベルな API と高レベルな API がわかれてて、どちらもちゃんと export されててえらいです。えらい。
あと、flow で書かれてるので type annotation があって読みやすいですね。自分は TypeScript 派ですが。
はじめかたはこんな感じです。とりあえずはじめましょう。
40万円
LINE Payのチームでなんかの実験環境を作ったりしました。
例えば、これは最終日の昼に食った肉です。
たまたま倒壊していなかったときの建物です。
ほかにもなにかを作ったりしました。はやくリリースされるといいですね。
つくばから東京までは自転車で行って、五反田のベッドで寝てました。
これは見えるやつです。
夜になるとよりよい。
LINE Pay は LINE ID: koba789 にお金を送ることができる良いサービスです。
はい
1年ぶりくらいに調子が悪い