We Are JavaScripters! @26th
2018/11/22
祝・２周年記念！
趣旨
聞くだけじゃなく登壇することで知識を増やしたり広げていこう
マサカリ禁止
全員登壇していこう
飲酒できる
🍺🍺🍺🍺🍺🍺🍺🍺🍺🍺
Facebookグループ
LT1: Promiseを実装してみよう！
非同期をよくするやつ
MDN解説
結果がわからなくても良い値へのプロキシ
成功・失敗ハンドラーを関連付ける
メリット
Promiseではチェーン（連鎖）ができる
実装してみる
関数は結果を通知するためのresolveとrejectを引数にもつ
resolve 成功
reject 失敗
executorはすぐ実行される
状態遷移
pending
fulfilled（成功）
rejected（失敗）
プロパティ
status
value
handlers
成功した時、失敗したときの関数のペアを関数で渡す
コンストラクタ
プロパティの初期化
引数で渡ってきたexecutorを実行
thenがややこしかった
ハンドラのペアを登録しつつ、新しいPromiseを返す
２つポイントがある
すでに完了済みか
Primiseオブジェクトでrejectするか？
まとめ
機能自体はシンプルだけど中身はそこそこ複雑だった
LT2: Formikで始める入力値管理
React.jsのライブラリ
Render PropsかHOCでの実装
バリデーションはyup
TypeScriptの型定義
setStatus を使った更新処理イベントトリガーにしたUI描画などに使う
Reduxを使わなくても済む
やりすぎると無法地帯に
まとめ
入力値管理を楽にする
HOCとRender Propsは分ける
setValues や status などの他のフォーム系ライブラリにはない表現力があるLT3: AdonisJSノ話
@MitsuruHashimoto
expressは学習コスト高い？
Ruby on RailsとかLaravel学んだ人からはつらいらしい
自由度が高い
MVC型
Laravelとディレクトリ構造やルーティングが似ている
middleware
モデル
コントローラー
View
リテレーションだけ違う
apiモードもある
cors設定も簡単
origin: true LT4: Higher-Order Function 〜関数型に憧れて〜
なぜ関数型を学ぶべきか
コードのバグがすくなくなる
理解しやすい
再利用できる
関数を値として扱う
無名関数として渡すのはJSのみ
別の関数にも渡せる
関数を合成できる
Array.prototype.filter() forループよりも行が少ない
小さい関数を複数合成して大きい関数を作るといい
React.jsのHOCも似ていますね
LT5: Elm Meets JavaScript Libraries
updateやviewは純粋な関数
再現性があるのでテストが簡単
常に同じ＝アプリとして無意味
Cmd / Sub
状況に応じた動作の変更は必須
Cmd updateの際に外部に向かって通信をおこなう
REST通信など
Sub 外部からやってくるMsgを待ち受ける
JavaScriptは外部サーバ的な扱いになる
LT6: スポンサーLT
LT7: KARTE管理画面のパフォーマンス改善〜計測・監視に関してやろうとしていること〜
やりたいこと
管理画面の体感パフォーマンスを改善したい
動機：ユーザーを第一に考えたい
目的をスムーズに達成できるようにする
UX向上
やってること
属人的になりがち
クライアントFB
クライアントよりはやく気付きたい
メトリクス監視・改善
ユーザーが体験するパフォーマンスと定量的な実測値とが紐付かない
目指す目標
ユーザーの体験に直結した完全
インパクトの高い問題から改善
パフォーマンス悪化に気づける
計測・監視
メトリクス
計測方法
計測対象のタイミング
様々な環境・データに対していろんなタイミングで計測
監視方法
LT8: WebARのコンテンツを2週間で作って1200人に遊んでもらった話
一般のARの認知率は34%
Webサービスで事業化して認知してもらう
1000人のユーザーにWeb ARを使わせてみよ
ゲームをつくってみよう
ビンゴゲームをつくった
マーカースキャン
宝箱が出る（お金が出る）
ビンゴが埋まる
構成
Firebase
TS React.js
three.js
Redux
jsartoolkit
Sentry
Circle CI
カメラがつらい
httpsのみでしかアクセスできない
解像度がわからない
iOSデバッグがつらい
テストもつらい
iOSつらい
ユーザーつらい
LT10: Promise -> コールバック地獄 -> Async/Await
非同期処理について
コールバック地獄の開放
asyc/await Promiseベース
ソースコードが完結
エラー処理が楽
LT11: ArrayとSetの話
Array 要素の順序に意味がある
値は重複する時
Set 順序に意味がない
値が重複しない
for ... of構文で走査できる
iteretorでつくれる
Map ArrayとSetは相互変換できる
LT12: 2周年なのでWeJS2年目の振り返り
2017/12/21〜2018/11/22
880人参加
登壇ランキング
1. @brn0227
2. @camcam_lemon
2. @boiyaa
一番話されたLTテーマ
