「We Are JavaScripters! @25th」に参加してきました

  • We Are JavaScripters!に参加してきました。

wajs.connpass.com

  • 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すごい
    • サーバのこと何も考えなくていい
  • API Gatewayすごい
    • CORSの設定をGUIで一発

まとめ

  • サーバを一秒も考えずに作れた
  • Lambdaガンガン使っていきたい

スポンサーLT: @ブラウザから大容量ファイルを気兼ねなく送る話

  • 泉さん(Media Do)

メディアデュとは

  • 電子書籍の中継
  • 単行本とかだと200-300枚の画像ファイル
  • 画像はFTPで、メタ情報はメールで受け取ってる
    • 出版業界まだアナログ
    • Webアプリ化したい
  • 多くの画像ファイルをどう送るか
    • S3に送ってしまう
    • サーバ負荷気にしなくていい
  • CognitoとS3を使った

Google Chromeの履歴情報を抜き出す

  • @camcam_lemonさん(日本事務器)

ブラウザ何使ってますか?

  • Chromeはいろいろな情報が記録される

History

  • 実態はDBファイル
  • 複数アカウント使い分けても一つのファイル
  • urlsテーブルに閲覧履歴が記録される

Webアプリと連携

  • Historyの情報をWebアプリと連携
  • nodeでHistoryを取得
  • Chromeがファイルを掴んでるからコピーしてから操作
  • データ量めちゃくちゃ多いからそのまま出すと落ちる

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の参照と値

参照と値

  • オブジェクトごとにどちらを使うか決まってる
  • 参照
    • 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読めると便利
  • 単機能を組み合わせて複雑な機能を作ってくといい