- We Are JavaScripters!に参加してきました。
- WeJSは来月で2周年とのことです！
| タイトル | 発表者 |
|---|---|
| 実践AST FlowtypeからTypeScriptへの移行 | @れこ |
| Node.jsとイベントループ | @hiroppy |
| JSでアニメーションに入門したい | @atsuco |
| ServerlessでIsomorphicにGohanをKetteiしてみた | @Seri-Nazu |
| スポンサーLT: @ブラウザから大容量ファイルを気兼ねなく送る話 | Media Do |
| Google Chromeの履歴情報を抜き出す | @camcam_lemon |
| TypeScriptのトランスパイルTips | @sakito |
| javascriptの参照と値 | @brn0227 |
| 高階関数の実践: パーサーコンビネータをつくってみた | @chikoski |
実践AST FlowtypeからTypeScriptへの移行
- @れこさん(CureApp)
FlowからTypeScripに移行中
- 中身はmonorepo
- 量が多いからASTで自動的に変換
FlowとTSの違い
- Flowは$から始まる特殊な型
- TSはkeyof
- 複雑なことしてるほど違いがある
Flow->TS
- FlowをAST変換
- babelのコマンドでできる
- 全ての構文を漏れなくマッピングするのは難しい
AST
- Abstract Syntax Tree
- 抽象構文木
- ASTのコードを書き換えるだけでFlow->TSへ変換させることができる
- PrettierなんかもASTを活用してr
まとめ
- AST活用してTS変換自動化できた
- ベースとなる実装があればなんとかなる
Node.jsとイベントループ
- @hiroppyさん(Dwango, Mercari)
イベントループとは
- イベントループはメインスレッドで動いてる
- ブラウザのJSとnodeで仕組みは違う
- libuv
- プラットフォームの違いを吸収してくれるやつ
- 非同期IO
仕組み
- イベントループのフェーズ
- timers
- pending callbacks
- idle, prepare
- poll
- check
- close callbacks
- idle, prepare以外は設定されたcallbackが実行される
- nextTickが一番最初に処理される
まとめ
- Nodejsはlibvuを使ってる
- 6つのphaseと2つのtick
JSでアニメーションに入門したい
- @atsucoさん
アニメーションとは
- 時間経過に伴いある値を0~100%の間で変化させること
- 始点、変化量、時間で表される
Webでアニメーション
- CSSアニメーション
- 宣言型アニメーション
- 軽い簡単 -途中で止めたりとかは苦手
- JSアニメーション
- 命令形アニメーション
- 表現力豊か
アニメーションができるJS
- $.animation()
- いにしえ
- Velocity.js
- 軽い$.animationと互換
- anime.js
- 軽い$.animationと互換なし
- Web Animations API
jsでアニメーション重い？
- 変化させるプロパティを考える
- クリティカルレンダリングパス
- レイアウト
- 他の要素も影響受けるので再計算されて重い
- ペイント
- 他の要素に影響しないので軽い
- コンポジット
- opacityは再描画を誘発しない
- レイアウト
- setTimeout()やsetImterval()ではなくrequestAnimationFrame()を使ったほうがよい
- anime.jsはrequestAnimationFrameを使ってる
ServerlessでIsomorphicにGohanをKetteiしてみた
- @Seri-Nazuさん(Media DO)
お昼何食べるか迷うじゃないですか
良かったところ
まとめ
- サーバを一秒も考えずに作れた
- Lambdaガンガン使っていきたい
スポンサーLT: @ブラウザから大容量ファイルを気兼ねなく送る話
- 泉さん(Media Do)
メディアデュとは
- 電子書籍の中継
- 単行本とかだと200-300枚の画像ファイル
- 画像はFTPで、メタ情報はメールで受け取ってる
- 出版業界まだアナログ
- Webアプリ化したい
- 多くの画像ファイルをどう送るか
- S3に送ってしまう
- サーバ負荷気にしなくていい
- CognitoとS3を使った
Google Chromeの履歴情報を抜き出す
- @camcam_lemonさん(日本事務器)
ブラウザ何使ってますか？
- Chromeはいろいろな情報が記録される
History
- 実態はDBファイル
- 複数アカウント使い分けても一つのファイル
- urlsテーブルに閲覧履歴が記録される
Webアプリと連携
TypeScriptのトランスパイルTips
- @sakitoさん(yahoo)
ts-loader
- webpackでTSをトランスパイルする時に使う
- 高速化
- transpileOnlyをtrueにする
- HappuPackを使うとトランスパイルと型チェックを並列化できる
awesome-typescript-loader
- webpackでTSをトランスパイルする時に使う
- ts-loaderよりts+babelがやりやすい
babelでtsをトランスパイル
- babelのコンパイラでtsをトランスパイルできる
- 型チェックは行われない
- @babel/preset-typescript
- 一部まだ未対応なので注意
まとめ
- ts-loader or awesome-typescript-loaderがベター
- babelを使う時はデメリットを理解して使う
- 型チェックは別でやること
javascriptの参照と値
- @brn0227さん(Cyberagent)
参照と値
- オブジェクトごとにどちらを使うか決まってる
- 参照
- Objectを継承したもの
- 参照は同じものを見続ける
- 値
- string, number, boolean
MutableとImmutable
- 変更できる値とできない値がある
- string, number, booleanは変更できない
- stringは内部的には参照渡ししてる
高階関数の実践: パーサーコンビネータをつくってみた
- @chikoskiさん
高階関数
- 関数を扱う関数
- S式
- 木の書き方の一種
(+ 1 2 (+ 3 4 5) (- 4 3 ) (/ 4 2))
- AST
- Abstract Syntax Tree
まとめ
- 関数は部品
- BNF読めると便利
- 単機能を組み合わせて複雑な機能を作ってくといい
