読者です 読者をやめる 読者になる 読者になる
follow us in feedly

flowtype v0.32.0 changes

flowtype JavaScript

flowtype v0.32.0がリリースされました

Release v0.32.0 · facebook/flow · GitHub

この変更では待望のgen-flow-filesコマンドが追加されています。 これはflowtypeのシンタックスで書いたjsファイルから、型定義情報を生成するコマンドです。

これまではライブラリ作者が型定義情報を提供しようとした時に、外部提供用の.js.flowを別途用意する必要がありましたが、これによってその必要がなくなります。 まだalpha-levelなので、安心して使うにはもう少し待つ必要がありそうですが、これは非常に捗りますね。

その他何点か機能追加があったので試してみます。

gen-flow-files コマンドの追加

先ほども書きましたが、待望の機能です。 flowtypeのシンタックスで書いたjsファイルから、型定義情報を生成することができます。

  • calcRectArea.js
// @flow

type Rect = { x: number, y: number };
export default function calcArea(rect: Rect) {
  return rect.x * rect.y;
}

このjsファイルに対して、flow gen-flow-files [filename] を実行します。

$ flow gen-flow-files calcRectArea.js
// @flow

declare export default function(rect: {x: number, y: number}): number;

declare export default function(rect: {x: number, y: number}): number; という型定義情報が出力がされてますね。

便利。

exact object types シンタックスの追加

これまでflowにおいて、オブジェクトの型定義は{ hoge: type}のみでしたが、より正確なオブジェクトを定義するためのシンタックスとして{| hoge: type |}が追加されました。

{ hoge: string}と記述した場合には、「少なくともstring型であるhogeプロパティが含まれること」という検証がされます。 {hoge: 'hoge', bar: 'bar'}というオブジェクトは、この型定義に当てはめた時にbarが余計に含まれていますが、上記の条件は満たしているため検証が通ります。

{| hoge: string |}と記述した場合には、「string型であるhogeプロパティのみを持つこと」という検証がされます。 {hoge: 'hoge', bar: 'bar'}というオブジェクトは、barプロパティを余計に持ってしまっているためエラーとなります。

従来の型定義

// @flow

type Rect = { x: number, y: number };
function calcArea(rect: Rect) {
  return rect.x * rect.y;
}

console.log(calcArea({ x: 2, y: 3, z: 4 }));
$ flow
No errors!

exact object types

// @flow

type Rect = {| x: number, y: number |};
function calcArea(rect: Rect) {
  return rect.x * rect.y;
}

console.log(calcArea({ x: 2, y: 3, z: 4 }));
$ flow
exact.js:8
  8: console.log(calcArea({ x: 2, y: 3, z: 4 }));
                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ function call
  8: console.log(calcArea({ x: 2, y: 3, z: 4 }));
                          ^^^^^^^^^^^^^^^^^^^^ property `z`. Property not found in
  3: type Rect = {| x: number, y: number |};
                 ^^^^^^^^^^^^^^^^^^^^^^^^^^ object type


Found 1 error

resource filesのデフォルト型定義情報の追加

.css, .jpg, .png, .gif, .eot, .svg, .ttf, .woff, .woff2, .mp4, .webm のファイルをrequireしたときにデフォルトで型定義情報が付与されるようになりました。 .cssはObjectとなり、他のリソースファイルはstringとなります。

(this list is not configurable at the moment).

だそうなので、そのうち設定ができるようになりそうです。

自分で型定義を与えたい場合には、これまでどおりmodule.name_mapperで設定する必要があります。

参考: Flow | Advanced Configuration

flowはtype-at-posコマンドで、指定した位置の変数の型定義を出力することができるので、これを使って試してみます。

  • requireResource.js
// @flow

import css from './test.css';
import gif from './test.gif';

console.log(css);
console.log(gif);
$ flow type-at-pos requireResource.js 6 13
Object
/Users/joe-re/src/try-flow-032/requireResource.js:6:13,6:15

See the following locations:
/Users/joe-re/src/try-flow-032/requireResource.js:6:13-15:
Flow assumes requiring a .css file returns an Object

6 13という引数は6行目の13列という指定です。css変数を指定しています。 想定どおりオブジェクトが返ってます。

[~/src/try-flow-032]$ flow type-at-pos requireResource.js 7 13
string
/Users/joe-re/src/try-flow-032/requireResource.js:7:13,7:15

See the following locations:
/Users/joe-re/src/try-flow-032/requireResource.js:7:13-15:
string

こちらはgif変数を指定しています。 こちらも想定どおりstringが返ってます。

WACULさんと共同で勉強会を開催しました #fr_wa_lt

勉強会

f:id:joe-re:20160613002825p:plain

connpass.com

WACULさんと共同で勉強会を開催しました。

登壇者、来場者の方々ありがとうございました!

内容はとにかくLT大会という感じです。

LT

flowtypeによるコンポーネント指向における型の入手 by @joe_re

speakerdeck.com

flowtypeによるjsの世界における静的型付けの導入について。React + Reduxに適用する例など。

NSQについて by @tutuming

speakerdeck.com

bit.ly製の分散型MQサービスのNSQの紹介。シンプルで扱いやすく、スケーラビリティが高いところが魅了に感じた。

Rails+webpackの落ち穂拾い by @kuy

speakerdeck.com

Sprocketsから脱却した後の残作業についてのお話。 具体的にはi18n対応のための定義やimageのasset pathなどをRailsとフロントでどうやって共有するかなど。 そういう部分をWebpackのbuildに寄せてしまうのはありかもというお話もしていて、なるほどワンチャンありそうだと思った。

Reactテストに役立つ実装の工夫 by @teppei_tosa

www.slideshare.net

Reactでのユニットテストを書く上での実践的なお話。テスト書く気持ちが高まった。

GraphQL with Angular2 by @Quramy

GraphQL with Angular2

RelayのReact依存を引き剥がしてAngular2で使うというお話。 RelayはReact専用に作られたもので、これからもそれは変わらないと思っていたのだけど、CoreAPIを切り出したいissueがあり、すでにexperimentalな実装もあるらしい。ほー。

Electron + WebDriver = Spectron by @Linda_pp

speakerdeck.com

ElectronのE2Eテスト用アプリケーションのSpectronについてのお話。デスクトップでE2Eテストできてしまうのすごい。

フロントエンドのモダン化とJavaScriptモジュールの
依存解決 by @_tohashi

speakerdeck.com

Railsアプリケーションにおいて、JS分割、ComonJSやES6-Modulesによる依存解決をどう推し進めていくかというお話。後半の「Webpack & Speockets 両対応」は良い泣きどころ。

WACULの解析基盤について by @ito_taro

WACULさんの解析基盤についての紹介と、理論(数学)的なお話。分かりやすいお話で面白かった。(高校の授業を思い出した。)

外部入力の改行に負けない体を作る by @yoshiko_pg

外部入力の改行に負けない体を作る - @yoshiko_pg

改行を表現することのできるcssプロパティ white-space: pre-line; のお話。もう改行には悩まない。

freee-wacul-web-app-lt-one(React Nativeについて) by @xga

speakerdeck.com

React Nativeについてのお話。Webの技術でNativeなアプリを書ける。

詳しくはご本人のブログで。 freee x WACUL Modern Web App LT #1 で React Nativeについて話しました - futoase

WebAssembly試してみた by @ukyo

WebAssembly試してみる

Web Assemblyのお話。wast思ったより普通に書けるって紹介されてて、確かに思ったより普通に書けそうだなーって思ったけど、やっぱりつらそうだった。wastで画像のぼかしフィルター処理を書いたデモを披露していてカッコよかった。

Front-end Server by @qsona

slides.com

Thin Server Architecture、Micro services化、BFFを構築する上でのフロントとサーバの境界線をどう考えるか、などについてのお話。
このお話中に、MicroserviceについてのMeetupをConnpassで公開されていました。興味がある方は是非!

microservices-meetup.connpass.com

飛び入りLT

@wadahiroさんと@nekoneneneさんが飛び入りでLTしてくださった。

@wadahiroさんは、今月行われたReact Europe2016についてのお話。
(↓でセッションの映像が観られます。)
www.youtube.com

@nekoneneneさんは、最近のニュースやtipsなどをまとめたお話をしてくださいました。

モダンWeb ミニミニLT.pdf - Google ドライブ

感謝

LT大会では @ymrl に司会をしてもらいました。

準備もWACULさんが早めに来てくれたり、弊社の有志メンバーが集まってやってくれたりしてすごく助かった。

当日手伝ってくれた方々ありがとうございました! 🙇🙇🙇

ちゃんと開催できたのはみなさんのおかげです。

感想

この勉強会は@Quramyさんと何かの勉強会で会った時に「共同で勉強会っぽいものやりませんか???」みたいな話をしてて、そのままの流れでシュッと開催された。

深く考えずに勢いで開催したのだけど、その割にはレベルも高い良い勉強会になったなーと思う。

低コストでハイパフォーマンスを出せることは尊い。またやりたい。

flowtypeの実現する実行時例外のない世界

flowtype javascript

今日こんなスライドを見かけた。

djcordhose.github.io

これはtypescriptとflowtypeの違いがよく分かるすごく良いスライド。

このスライドの5ページ目に以下の1文がある。

FLOW SOUNDNESS, NO RUNTIME EXCEPTIONS AS GOAL

スライドに刺激を受けたのと、最近flowtypeを触っていたのもあって、これが何を指しているか書きたくなった。

実行環境

  • flow: 0.26.0
  • typescript: 1.18.10

Flowtypeのきほん

以下のjavasciptのプログラムをflowにかけてみる。

function foo(x) {
  return x * 10;
}
foo('Hello, world!');
$ flow
flow.js:5
  5: foo('Hello, world!');
     ^^^^^^^^^^^^^^^^^^^^ function call
  3:   return x * 10;
              ^ string. This type is incompatible with
  3:   return x * 10;
              ^^^^^^ number

関数fooは引数xに対して10を掛けた値を返却する。
引数xにはnumber型を期待しているが、実際にはstringを渡しているのでエラーが発生する。

非常に強力な型推論だ。

ちなみにtypescriptではこれはエラーにならない。
(まぁjsのシンタックス上エラーじゃないし)

$ node
> null * 10
0

typescriptにおいては以下のように引数xの型を明示的に指定することでこれを検知できる。

function foo(x: number) {
  return x * 10;
}
foo('Hello, world!');

これをOCamlで記述してみる。

let foo x = x * 10;;
# val foo : int -> int = <fun>

let foo x = x * 10;;の評価値がval foo : int -> int = <fun> である。
fooはintを受け取ってintを返す関数である、という評価がされた。
OCamlにおいてもxはint型だと推論されていて、flowtypeはOCaml製だけあって近い挙動を示す。

nullable typeを定義

関数fooに少し手を加えて関数barを定義する。

function bar(x) {
  if(x < 10) { return null; }
  return x * 10;
}

console.log(bar(1) * 10);

関数barは、引数が10以下である時にnullを返す。
これをflowtypeにかけてみる。

$ flow
flow.js:8
  8: console.log(a * 10);
                 ^ null. This type is incompatible with
  8: console.log(a * 10);
                 ^^^^^^ number

barはnullを返す可能性があるが、そのハンドリングをせずに * 10しているため、エラーとなる。
ここでは関数barはnullableなnumberを返す関数となったことになる。

ここでnullのチェックを入れると、このエラーは解消される。

function bar(x) {
  if(x < 10) { return null; }
  return x * 10;
}

const a = bar(1);
if (a) {
  console.log(a * 10);
}
$ flow
No errors!

この世界において、runtime exceptionが起きる可能性がまた1つ根絶された。
これが冒頭の NO RUNTIME EXCEPTIONS AS GOAL を端的に表した例だ。

これもOCamlで記述してみると、以下になる。

let bar x =
  if x < 10 then None
            else Some(x * 10);;
# val bar : int -> int option = <fun>

int optionOCamlの提供するOptionという型で、int型かもしくは値がない、ということを示している。
この挙動を知っていれば、先ほどの結果にも素直に頷ける。

スライドにも出てくるけど、typescriptも2.0でNon-nullable typeに対応するらしい。期待。
https://github.com/Microsoft/TypeScript/pull/7140

もうマージはされていて、最新repositoryで strictNullCheckstarget es6 を有効にすれば動くらしい。
今度試してみよう。

西日暮里.rbでGraphQL on RubyというLTをした

勉強会 Ruby GraphQL

nishinipporirb.doorkeeper.jp

西日暮里.rbでGraphQLのスキーマ定義をRubyでやって、動かしてみたというLTをしてきた。
発表資料はこちら

speakerdeck.com

動かせるサンプルコードはこちらにあるので、興味がある方はお試しください。

github.com

GraphQLは特定のストレージやFWに対応する実装ではないので、何のORMを使ってどのDBにつなぐかは関係しない。
今回は使い慣れているので、ActiveRecordを使った。

今回の発表ではGraphQLをRubyに理解させられるぞ以上のことは何もできていないのが残念。
次回までにGraphQLで何か作っておきたい。

あと西日暮里.rbのオーガナイザに前回から加わらせてもらっています。
微力ながらコミュニティ運営にお力添えしていきたいと思っていますので、今後ともよろしくお願いします。

ng-sake#2 で Cafe Pitch の紹介とAngular2のComponentについてのLTをさせてもらいました

AngularJS 勉強会

ng-sake.connpass.com

今週あった ng-sake#2 でLTさせてもらいました。

Cafe PitchはElectron + Angular2を使って最近作っているプレゼンテーションツールです。

github.com

発表資料はこちら

speakerdeck.com

資料に書いてある通りだけど、普通にReactでコンポーネント指向に慣れていればAngular2においてコンポーネントを作る際にも同じ感覚で作れる。

加えてAngular2のコンポーネント間通信には様々な方法があるので、それぞれ良き場面で取捨選択すると良さそう。

例は公式に用意してあるので、参考にすると良い。

Component Interaction - ts

慣れないうちはとりあえず@output、@inputが使えるようになればどうにかなる。

後半はディスカッション形式で、エキサイトし過ぎてめっちゃ飲んだ。

終わった後にも飲みに行って終電を逃し、最終的に同じ方面の @Quramy さんとタクシーで一緒に帰宅しつつ、タクシー代を借りるという失態を犯した。

まとめるとめっちゃ楽しくて、かつガチ勢がひしめき合っている割にはフレンドリーでいいコミュニティだなーと思いました。

是非また参加したい!

Electron + Angular2でMarkdownでスライドを作れるプレゼンテーションツールを作っている

AngularJS JavaScript Electron

Angular2を学ぶ目的から、最近はElectron + Angular2でプレゼンテーションツールを作っている。
とりあえず一通り動くところまでできたのでpublishした。

github.com

使い方はこんな感じ。

https://cloud.githubusercontent.com/assets/4954534/14444835/4d3536e0-0083-11e6-8420-30d17c33e7b4.gif

エレベーターの中の30秒でちゃんと相手に伝わるプレゼンをすることを意味するElevator Pitchという言葉があるんだけど、Cafe Pitchという名前はそこからきている。

素早くプレゼンを作るためのツールだけど、現実30秒でプレゼン作れないだろじゃあcafeかな、みたいな感じで、まとめるとそんなに深い意味はないです。

ちゃんと実行できるバイナリを用意しようとは思ってるけど、その辺の準備に必要なことがまだわかっていないのでnpmでglobalにinstallすれば使える、という感じ。

このあたりの記事を見ると分かりそうなので、追って対応していこうかなと思う。
あとMacでしか動かしてないので、WindowsLinuxにも対応したい。

Electron + Travis で楽々ビルド・リリースする最強のデスクトップアプリ開発 - Qiita

Electronアプリをプロダクトとして「正しく」リリースするために必要な3つのこと - ヌーラボ [Nulab Inc.]

何ができるの??

とりあえず必要な機能として、

  • markdown書いてる時にHTMLへの変換結果をlive previewで確認できる
  • presentation機能
  • PDFでのエキスポート

を実装している。

参考として↓のスライドはこれを利用して作っている。

speakerdeck.com

Angular2どうだった?

Angularは1のときに熱狂していたことがあった。けれど色々あって疲弊して今はReactおじさんをやっている。
なのだけど、Angular2はその時の疲弊する感じはかなり軽減されてていい感じ。

具体的にはAngular1このDIどう考えてもキモいだろ、というのがtyped-base DIになっていたり、このdirty-checkingいつ走るんですか??なんで走らないんですか??明示的に$applyしなきゃいけないんですか??みたいなことに頭を使わなくて済むのが良いところ(これについてはそもそも双方向バインディングがつらいという話ではある)。

Angular2のChange Detectionについてはこの記事がわかりやすい。

qiita.com

細かい実装についてはまた改めて書こうと思う。

あとAngular2をやっているのはRxJSを学ぶ目的もあるんだけど、このアプリでは非同期処理がほとんど要らなかったので試せなかった。

gistとsyncできたり、indexed.dbに前回開いていた情報を保存しておいたりできると便利っぽい感じがするので、そのあたりを実装するときに試していきたい。

decksetでよくね?

使ったことないのでよくわかりません。

良いところは取り入れたいので使ったことある方便利なポイント教えてください。

さいごに

興味を持ってくださった方はぜひ使ってみてください!
フィードバックくださるととても嬉しいです!(使いにくいところは改善します)

みんなのウェディングさんと共同で勉強会を開催しました #fr_mw_lt

勉強会

f:id:joe-re:20160410174359p:plain

connpass.com

大学の先輩の @azipon_zzz と一緒に、フロントエンドの知見交換を目的に勉強会を開催しました。

来場者、登壇者の皆さんありがとうございました!

全体的な進行

前半はLT大会で、後半はそれぞれの会社からの代表者に前に出てもらって、座談会形式で意見交換する会を設けた。

LT

Introduction to flux-util by @joe_re

speakerdeck.com

flux-utilsをざっくりと紹介。
Reduxとの共通点が多くあるので、その比較とか。

社内CSSフレームワークを作ったった by @azipon_zzz

speakerdeck.com

チーム開発において、cssの書き方を統一させ、似たような定義の氾濫を抑えていきたい。
そのための社内cssフレームワークを整備した話。
統一的な定義をしていくことで、デザイナーの工数の削減にもつながり、この画面とあの画面似た色使ってるけど微妙に違うような??みたいな事故が起きなくなる。

Vue.js New Team by @kazu_pon

speakerdeck.com

Vue.js の開発体制や、contributionのrule、これからのRoadMapのお話し。
また、大きなOSSにおける開発方法や、悩みなど。

ネイティブアプリでもFluxしたい by @yonekawa

speakerdeck.com

SwiftFlux の開発者による、iOSアプリケーションでのFluxアーキテクチャ構築のお話し。
iOSにおいてMVVMを構築した時のつらみ、Fluxにすることで解決できる問題など。

how can I make frontend engineer training @kawaguti

speakerdeck.com

フロントエンドの教育体制をいかにして構築するかというお話し。
大企業にお勤めの方で、含蓄に富んだお話しでした。

気の利いた入力コンポーネント by @ymrl

speakerdeck.com

ユーザが使っていて気持ちのよい入力コンポーネントにするために考えるべきこと。
また、Reactにおける具体的な実装の紹介。

チーム産、やさしさが香るフロントエンドコード〜jshintとscss-lintのソースをかけて〜 by @takuhito_hihara

www.slideshare.net

コード品質を保ち、かつ書き手の教育のためにlintを活用するお話し。
lintをかけるべきタイミングや、そのために活用しているpluginの紹介。

requireの循環参照 by @yo_waka

speakerdeck.com

CommonJSのrequireで循環参照していると、2度目以降のrequireで空のobjectが返ってきてしまうというつらい問題。
それに対しどう対処するかというお話し。

サービス改善のために エンジニアがすること、 しないこと by @kamonegi1977

speakerdeck.com

RailsにおいてABテストの構築する方法の紹介。
また、その作業においてサーバサイドエンジニアとフロントエンドエンジニアの作業分担、意識するべきこと。

座談会

@kuy さんが飛び入りで参加してくださって、より議論の幅を広げることができました! ありがとうございました 🙇

弊社からは @kambielden@ymrlが。
みんなのウェディングさんからは @azipon_zzz@kamonegi1977さんが前に出てくれました。
また、E2Eテストの話題が出た時には、弊社QAエンジニアの@tmasuharaに前に出てもらって語ってもらいました。(無茶振りすみませんでした!)

主には

  • 各社のjsフレームワークの変遷
  • cssの標準化への取り組み
  • APIの構築で気をつけるべきこと
  • Viewのテスト、E2Eのテストをどうしているか
  • チームで開発する上での情報共有の大切さ。活用しているツールなど

というお話しをしました。

加えてslackで騒いで拾ってもらう文化を作るの大事とか。
レガシーなイメージあるけど実はメール便利!とか。
webエンジニアならでは話も出て盛り上がった。

感謝

LT大会では @xga に司会をしてもらったり、
準備の時にも社内の有志メンバーが自発的に会場設営をはじめてくれてたり、
みんなのウェディングさんも受け付けしてくれたり(当日丸投げですみませんでした!)、
結構忙しくてテンパっていたのですごく助かった。

当日手伝ってくれた方々ありがとうございました! 🙇🙇🙇

ちゃんと開催できたのはみなさんのおかげです。

(実際のところ、自分は飲み物が来たのが開場10分前で焦ってたり、直前に会場説明資料作ってたり準備不足乙奴だったのでほとんど使いものになってませんでした。。すみません。。)

感想

割と雑な感じであんまり深く考えずに開催してみた感じだったけど、レベルも高いちゃんとした勉強会になってよかった!

こんな感じで、いろんな方と交流できる会をどんどん開催していきたい!