React.js meetup #3

Tsuyoshi Higuchi @tyshgc

github.com/facebook/jscod… #reactjs_meetup

Yusuke Ando🏳‍🌈 @yando

ツールを作ってオープンソースにした。そして日々使ってます。 #reactjs_meetup

𝗞𝗮𝘄𝗮𝗸𝗮𝗺𝗶 🍔 𝗗𝗲𝘃 𝗣𝗿𝗼𝘁𝗼𝗰𝗼𝗹 @kawakami0717

急いで電車乗ってます #reactjs_meetup

T @takayukii

#reactjs_meetup Facebookでは毎日使ってる github.com/facebook/jscod…

Yusuke Ando🏳‍🌈 @yando

たとえばmixinからcontainerのコードに移行する例 #reactjs_meetup

Yusuke Ando🏳‍🌈 @yando

人間がコードを移行したのと同じようにツールで移行する #reactjs_meetup

ama-ch @ama_ch

始まりました。 #reactjs_meetup pic.twitter.com/fE0vcSB60D

拡大

Yusuke Ando🏳‍🌈 @yando

ASTからASTに変換するアプローチ jscodeshift #reactjs_meetup

Toru Kobayashi @koba04

#reactjs_meetup AST Explorer

Yusuke Ando🏳‍🌈 @yando

ASTを見えるようにする Exploerr #reactjs_meetup

T @takayukii

#reactjs_meetup AST Explorer astexplorer.net

Toru Kobayashi @koba04

#reactjs_meetup ASTのお勉強

きりえ @__kyrieleison__

JSCodeshift: JSのコードからAbstract Syntax Treeを生成するツール？ (英語分からない) #reactjs_meetup

marocchino @marocchino

#reactjs_meetup jscodeshift→js refactoringツール、astexplorer.netはdebugツールで感じかなぁ。

Toru Kobayashi @koba04

#reactjs_meetup ast-types

Yusuke Ando🏳‍🌈 @yando

@cradle_of_nox JSのまま文字列で置換するのは無理なので、一旦ASTにしてそのままリファクタリングしたあとJSにして出力しなおすって感じです。 #reactjs_meetup

きりえ @__kyrieleison__

ast-types github.com/benjamn/ast-ty… #reactjs_meetup

Yusuke Ando🏳‍🌈 @yando

出力を担当するのが recast #reactjs_meetup

Toru Kobayashi @koba04

#reactjs_meetup recast.print(ast)

きりえ @__kyrieleison__

JSCodeshift github.com/facebook/jscod… #reactjs_meetup

Yusuke Ando🏳‍🌈 @yando

さっきの ast-typesは forをwhileに変換するみたいな例 #reactjs_meetup

Yusuke Ando🏳‍🌈 @yando

babelで出力しちゃうと人間が書いたみたいにならない。差分とか出る。 #reactjs_meetup

Yusuke Ando🏳‍🌈 @yando

探索と更新のくだりは割愛 #reactjs_meetup

Yusuke Ando🏳‍🌈 @yando

JSにおけるASTの標準化が進んできた #reactjs_meetup

Yusuke Ando🏳‍🌈 @yando

実際のFBで起きた例を紹介します。 #reactjs_meetup