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

• 2018/3/8
• https://uit.connpass.com/event/79891/

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

• @mki_skt
• https://speakerdeck.com/mukai21/reactfalsekonponentozuo-cheng-woxiao-lu-hua-siyou

コンポーネントを作る

• コピペとかやること多い
  • AngluarはCLIでできる
• create-component-app
  • https://github.com/CVarisco/create-component-app
• VSCodeならプラグインもある

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

• @brn0227
• https://speakerdeck.com/brn/maketonpmdepuroziekutowokontororusuru

タスクランナー

• 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)コードを自動生成してコーディングを効率化しよう

• @wakamsha
• 山田直樹さん(リクルートマーケティングパートナーズ)
• https://speakerdeck.com/wakamsha/codegen-hanan-sikunai-swagger-kara-javascript-typescript-kodowozi-dong-sheng-cheng-sitekodeinguwoxiao-lu-hua-siyou

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

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

Swagger

• RESTful APIを構築するためのOSSフレームワーク

SwaggerCodegen

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

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

• @takanorip

画像圧縮

• imagemin
  • https://github.com/imagemin/imagemin

SFTPデプロイ

• ssh2
  • https://github.com/mscdex/ssh2

便利bot

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

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

• @kawasako3
• かわさこさん(LINE)
• https://www.slideshare.net/koheikawasaki902/webassembly-text-format-90039362

画像加工

• PhotoShopなしで背景付き画像を透過したい
• 画像データｈ配列で表せる
  • [255, 255, 255, 255, 0, 0, 0, 0]みたいな
  • 4要素で1pxずつ
• Flood-fill
  • ペイントのバケツでも使ってるアルゴリズム
  • 選択したピクセルの隣接が同様のRGBかチェック
    • 同じなら再帰的に