「UIT#2 怠けるために努力を惜しまない プロのフロントエンドエンジニアたち」に参加してきました

勉強会メモ

Reactのコンポーネント作成を効率化しよう

コンポーネントを作る

npmとmakeでプロジェクトをコントロールする

タスクランナー

  • gulp,Grunt
    • 属人化しやすい
    • 宣言的でないので読みにくい
  • npm scriptsが主流
    • npm run ~
    • shellが叩けるだけなのでシンプル
    • node_modulesで補う

便利モジュール

  • rimraf
    • rm -rf
  • ejs-cli
    • ejs変換
  • cpx
    • コピー
    • watch
    • transform
  • npm-run-all
    • コマンドを並列実行できる

Lintとフォーマット

  • ルール違反をコミットさせたくない
  • git pre-commit hook
  • pre-commit
    • node_modules

make

  • npm scriptsのラッパーとして使ってる
  • macなら最初っから入ってるから手っ取り早い

Docker

  • Dockerfileのnpm scripts叩く処理書いてる
  • makeからdocker呼んでる

【codegen は難しくない】SwaggerからJavaScript(TypeScript)コードを自動生成してコーディングを効率化しよう

ボイラープレートをなくそう

  • ボイラープレート多いよね

Swagger

SwaggerCodegen

  • SwaggerSpexで書かれたドキュメントからクライアント/サーバのコードを生成する
  • Java(maven)で動作する
  • groovyでも動く
  • Java書くの嫌だし自分で作る

ウェブクリエイターに贈る自動化Tips

  • @takanorip

画像圧縮

SFTPデプロイ

便利bot

  • npm outdated
    • 最新じゃないライブラリを教えてくれるコマンド

WebAssembly text format で画像処理を書くぞ

画像加工

  • PhotoShopなしで背景付き画像を透過したい
  • 画像データｈ配列で表せる
    • [255, 255, 255, 255, 0, 0, 0, 0]みたいな
    • 4要素で1pxずつ
  • Flood-fill