がみぶろ

#がみぶろ

@jumpei_ikegami

We Are JavaScripters! @18thでYosuke FURUKAWAさんの話を聞いてきた

#しがないラジオのgamiです。

We Are JavaScripters!の18thに参加してきました！ wajs.connpass.com

今回初めて、WeJSのステッカーができて最高でした。

当日のLTの内容をざっくりまとめたので、ご覧ください！

LT1: レガシーなバッチ生成ページをNuxt.jsでSSRするモダンなページにしたい

twitter.com

自己紹介

  • Seiji Komatsu
  • サーバーサイド開発
  • 猫、珈琲、酒
  • Vue.js/Nuxt.js周りのフロントエンド頑張りたい

内容

課題

  • 2009年から稼働しているシステム
  • 日次バッチで13万枚のHTMLを生成
  • コンテンツ変更が即時反映されない
  • Mayaa(Javaの古いテンプレートエンジン)を使っている

要件

  • コンテンツ変更の即時反映
  • パフォーマンス
  • SEO
  • モダンな技術
  • メンテナンス性
  • CI/CD

ただし

  • フロントエンドがいない
  • デザイナー/コーダーがHTML書く

選定技術

  • Vue.js + Nuxt.js

理由

  • ReactはJSX辛そう
  • Angularと違って、部分的に始められる
  • 日本語翻訳ドキュメントの充実
  • SSRしたい

経過

  • APIがそもそも無いので、作る
  • 現在のテンプレートをVue.jsのテンプレートに変換中

レガシーシステムの辛み

  • CDNが挟まっていない
  • CDNを挟んだときの影響を1つずつ調査する必要

LT2: ブラウザからカメラを呼び出し手書きのサインを読み取って認証するぞ

twitter.com

内容

  • コードは出てこない！
  • ロゴステッカー作ろうぜ！
  • せっかく配るなら、遊びたい！

塚田○場

  • 名刺を貰える
  • 来るたびにランクが上がる

ステッカーが会員証になったら楽しい！

  • 署名！

ストーリー

  • ステッカーを配る
  • マジックでサイン
  • カメラで読み込むとユーザー名がわかる！
  • フレンド登録できる！
  • 前にあった人が、今日のイベントに参加しているかがわかる！

要素技術

  • カメラ呼びだし
    • MediaDevices.getUserMedia
  • 画像処理

カメラ

  • MediaDevices.getUserMedia
  • streamが得られるので、mediaElementに渡す
  • canvasにdrawImageすると、好きに加工できる
  • ブラウザ対応状況
    • iOS11から対応

OpenCV(wasm-build)

レシピ

  • 二階調化
    • 形だけにする
  • 輪郭検出
    • ロゴ検出
    • 五角形かつ一定以上の面積があるものだけ抽出
  • 透視変換
    • 斜めに撮っても大丈夫にする
    • 元のロゴについて最小矩形を作っておく
    • 入力画像についても最小矩形を作る
    • 矩形を合わせるように変形する
  • 二階調化(再)
    • 閾値を調整して、サインだけを抽出する

課題

  • どうやってマッチングするか？
    • サインを検索する方法を模索中

感想

  • 最近はJSの知識でなんでもできるから楽しい！

LT3: １日一つ強くなる戦略としての UCDDD (Udemy Course Development Driven Development)

twitter.com

自己紹介

  • UdemyでReact+Reduxのコースを4月に公開
  • フリーのフロントエンドエンジニア
  • Reactの仕事募集中

UCDDD

  • Udemyコースを作ることで圧倒的に成長する
  • 教える方が、学べる
  • 何度も撮り直しをしていると、内容については完璧になる

やったこと

CodeSandboxに全コードを公開

  • npmもinstallできる
  • 各章のコードを全てCodeSandboxに追加していく

codesandbox.io

全レクチャーにテキストを用意

  • 概念的な部分は、テキストがあった方がわかりやすい
  • 講師側も、テキスト化すると勉強になる

まとめ

  • 日本語のコースはほとんど無い！
  • 申請すれば、誰でも通せる！

better-than-i-was-yesterday.com

LT4: スポンサーLT

forkwell.com

Forkwell 重本様

メッセージ

  • 幸せに働くITエンジニアを増やしたい！

LT5: メロンのはなし〜melonJSで始めるゲーム開発入門〜

twitter.com

自己紹介

  • 大武松生
  • フリーランスエンジニア
  • jQueryをReactに組み込むというくらい過去を持つ
  • Qiitaで10いいねを超えるのが夢

テーマ

  • モダンJSだけじゃなく、melon.jsを試すと気分転換になる！

melonJSとは？

作ったものを公開！！

どうやって作ったか説明

  • Boilerplateがある！
    • gruntが必要
  • Tiled Map Editorでお絵かき
    • マップ
    • キャラ配置
    • 見えない壁
  • melonJSのオブジェクトを使い倒す！
  • コード書いて素材入れてgrunt serveしたらできる！

所感

  • 環境構築が楽！
  • デプロイが楽！
  • 極めたら過ごそう！

LT6: 「LP完成しました！お問い合わせメールの繋ぎ込みだけお願いします！」なんて二度と言いたくないのでフロントの知識だけでお問い合わせを作った話‬

twitter.com

自己紹介

  • Taskey.inc
  • peepというアプリ作ってます！

背景

  • LP作ってますか？
  • デザイン見て
  • コーディングして
  • レスポンシブ
  • SEO
  • お問い合わせ
    • メールのためだけにサーバ立てる？
    • php書く？

Google Apps Script

  • JavaScriptで書ける
  • GmailApp.sendEmail(mail, title, text);

実際に作ってみよう(デモ)

  • 新規スクリプト作成
    • doGetで入力値を取得
    • sendEmailに渡す
  • アプリケーションを公開
    • エンドポイントができるので、formのactionに設定

課題

  • Gmailにしか送れない！
    • 転送設定すればOK！

LT7: reduxはいらないかもしれないし、context APIもあんまり使わなくていいかもしれない

twitter.com

自己紹介

  • 株式会社CureApp

目次

  • reduxはいらないかもしれない
  • context APIもいらないかもしれない
  • おまけ1
  • おまけ2

reduxはいらないかもしれない

  • 作者がMediumで言ってた
  • 「トレードオフがあるので、そこを理解して使おうね」
  • single state & serializableの恩恵
    • ローカルストレージに永続化し状態を復元
    • エラー時に状態をサーバーに投げておく
  • event sourcing風 & serializableの恩恵
    • actionを投げればコラボレーション環境を簡単に作れる
    • undo実装が簡単
    • 過去状態の復元が簡単
    • ツールの作りやすさ
  • ステートマシンを用意することの恩恵
    • 再利用性とUI交換のしやすさ
  • 普通に使っている

context APIもいらないかもしれない

  • 作者が言ってた
  • 「バケツリレーの代わりとしてそこかしこで使うものではない」
    • 未解決の問題を解消するためのもの
  • 使いどころ
    • 多言語対応くらい？

おまけ1

  • 「バケツリレーは、render propsが軽減できそう」と作者が言ってた

おまけ2

  • Formik
    • redux-formだるい人向け

LT8: .mjs

twitter.com

自己紹介

  • リクルートテクノロジーズ グループマネージャー
  • Node.js日本ユーザーグループ代表

Node.js v10リリースされます！

  • 明日リリース予定
  • Notable Changes
    • for-await-of
    • ESModules
    • fs/promise
    • private/public field

DEMO

fs/promises

  • fs.readFileでコールバックが不要に！？

ESModules

  • そのまま動かそうとすると、importがサポートされていないので動かない
  • node10 --experimental-modules fs.mjs fs.mjs

private/public field

  • #を付けた変数はプライベートになり、継承先からは参照できない
class A {
  #B = 1;
}

mjsとは？

  • Module !== Script
    • どっちのファイルを呼んでいるかを判定する必要がある
  • 長い議論の末、.mjsが必要だとなった
    • 拡張子だけを見れば、判定できる！
    • Simple and Faster

Module

  • デフォルトでstrictモード
  • top level scope
    • スコープが閉じている
  • reserved await

Script

  • non strict
  • global scope

.jsは使っちゃいけない？

  • 否

loader optionを使えば回避できる

  • loaderを書く必要がある

--modeというflagを使う？

  • 議論中

結論

  • ESMを使わないなら、.jsでいい
  • v9-10でESMを使うなら、.mjsを使うべき
  • v10のESMをヘビーに使ってしまっても、仕様が変わるかも？

ファイル拡張子よもやま話

  • 「.jsではなく、.es3や.es4を使おう」という話が出たことがあった
  • Web does not have version
    • un-detectable featureについては、困る！
    • Modern JavaScriptでは、機能を判定するのは難しくなってきた！
  • Module JavaScript is JavaScript 2.0
  • We are JavaScripters! Every JSers would be better to enjoy chaos!

以上！

Tweetが流れてしまうまで、当日の雰囲気は#WeJSのTLから感じられますー twitter.com