https://gyazo.com/f862b053fbaf9e73cd7c0d0eaa6f695c
スポンサーLT
@urahiroshi
Mercari Frontend SET
SET活動のすすめ
SET（Software Engineer in Test）というロール
チームの生産性向上・品質向上の取り組みをしている≒カイゼン活動
やってること
開発環境の構築、本番環境へのFB
フロントエンドチームの生産性向上・品質向上の取り組み
CI・開発プロセスの改善
セットアップ
自動化されていないテストは許さない！
高速化
ジョブ追加
CIで使う npm package作成
Protected branch設定
Issue, PullRequestテンプレ
Slack連携
外部ツール導入・検証
エラートラッキングツール
ユニットテストカバレッジの目標設定
テスト・リファクタリング
ユニットテストのセットアップ
テストがなくてもからのテストを作ってCIで動かす
リファクタリング
SET活動をするには
機能に対する実装やバグ修正は行わないという成約をつけるだけ
週ごとにSET担当をローテ
月1は機能への実装やバグ修正を行わない日をつくる
金曜日はSETに費やす
活動のメリット
視点を変えることでこれまでと異なるアプローチの解決策を考えるようになる
新しいスキルセットが身につく
スケジュール駆動開発で澱んだ心を浄化する
開発・運用プロセスの改善は組織の強みになる
開発プロセスの問題をすくい上げられる
問題に気づいた人≠対応する人
問題に気づいたときに対処に相談できるメンバーがいる
1. WebAssemblyのこれまでとこれから by fnwiya
@fnwiya
React Native & Ruby on Rails
2015年6月に登場
asm.js
もともとMozillaがやっていた
ロードマップ
MVP
モダンブラウザサポート完了
次のステップ
post-MVP features
WebAssembly design
スレッド
GCサポート
JSとのインテグレーション
Host binding
webのAPIをAssemblyから呼び出す
wasm-bindgen
High-Level Goals
５つある（うち２つ紹介）
JSとの連携を強くする
webAPIを直接さわれるようにする
Web Assembly VS JavaScript
ではなく
Web Assembly ♥ JavaScript
を目指している
Webだけで動かすだけのものにはしない
欠点
文字列の処理が遅い
呼び出しが遅い
2. Vue.jsをv0.11.0からv2.5.16にあげようとしている話 by iidaap
@iidaapp
株式会社L is B
バージョンをあげるためにビルド環境を整えた
健全な形にしたい
Thymeleaf + jQuery + Vue.js（0.11.0）
ビルドがいろいろ煩雑になっていた
1. bowerの除去
bowerでインストールしたモジュールをgradleでwebディレクトリにモジュールをコピー
npm + npm scriptsでいいのでは？
タスクごとに行う作業が分別
JAVAから分離できるのでは
2. gruntの移行
すべてgruntと周辺プラグインに依存してしまう
ライブラリのためのライブラリ管理になっちゃう
npm scriptsでいいんじゃない？
--mode production や --mode development
grunt化しないように注意
3. Vueのアップデート
とりあえずゴリゴリ潰していく
vue-migration-helper
公式の移行ガイド
やり残したこと
開発範囲外では0.11.0のまま
一部ビルドと関係ないのはまだgrunt依存
3. TypeScript and immutability by brn0227
@brn
Cyberagent アドテクスタジオ AI messenger
immutability
変更不可能性ということ
変更されないにするには外部ライブラリやスプレッド演算子のちからを借りる
オブジェクトの変更が不可能である利点
参照透過性
副作用がおきない
クライアントサイドの利点
TSではどうimmutabilityにするか
ライブラリを使う？
IOはどうする？
型をどう判別する？
TSと相性が悪い
immutableな方とそうではない方を定義2重で定義する必要がある
plaingObjectをImmutableにしてくるので使いやすい
が、classが使えない
Objectにメソッドを定義する形となる
TSでimmutabilityを表現するための方法
readonlyを使う
プロパティが読み取りであることを宣言
ただしオブジェクトの中身は変更可能
ConstArray・ConstMapを使う
破壊的な変更を行う関数が削除されたバージョンの型定義
ConditionalTypeの条件がめちゃ増える
Writable / Writter
mutate関数
ReadとWriteを分けて定義することで無駄な事故が減る
型・物理の安全性が担保
欠点
immerがカスタムクラスを受け付けないのでES5風になっている
04. プロトタイプを越えるReact Native by timakin
@__timakin__
Gunosy, Inc. メディア事業本部
一般的な見方
プロトタイプとしては優秀かもだけど業務では使えないのでは？
学習コスト、メンテナンスコスト
ネイティブでしか実現できない機能は？
未成熟のコミュニティ・ライブラリが揃ってない不安
気持ちはわかる
yamanoku.icon Airbnbはやめとるやん（ネガティブな理由ではないが）
プロトタイプと本番の境目
中期的に柔軟に機能を追加・削除できるか？というメンテナンス性
バージョンあげはきびしい
JSとしてのメンテナンスコストはある
大規模だと厳しいという技術的な天井
リアルタイム通信、ARkitとかはネイティブとのブリッジが発生する
コストを加味して、人員追加は容易か？
ネイティブ経験者なら1週間位でなれる？
どんな機能で不安になりやすいか、各実装方法
UIの細かいところいじれるのか
ナビゲーションの表示幅
ズレるのはしゃーない。AndroidとiPhoneで表示幅が違う
シャドウ
mariginの調整
iOS
shadowOffset, Radius
Android
elevation
画像の非同期読み込み
読み込み早くしたい時はキャッシュが有効なFastImageを使う
が、うまくいかない
読み込み完了イベントをもとにstateに変える
フォーム入力
日本語入力がバグってる(〜v0.56.0)
0.54.0に落とすか
0.57.0に上げる
push通知
react-native-firebase
ディープリンク対応
react-navigation
課金処理
react-native-iapが良さそう
他のライブラリだと片方しかサポートしてくれない
動画の再生
前提条件
開発環境
MobX
Fastlane
Expo
スキルセット
まとめ
だいたい不安で不安になるような機能拡張は実現可能
そもそもよくわかってなくてもたついてるのか
はっきり区別しよう。
プロトタイプとかちっちゃいアプリとか作ってもしょうがないので腕力を見せるのがよさそう
お前らのアプリはAirbnbでもなんでもないだろ？
05. JavaScriptはコンパイル言語か by ariaki
@ariaki4dev
JavaScriptは
プログラム言語体系
前提条件
コンパイラ
中間表現に変換して実行
インタプリタ
中間表現になるように実行
関連ツール
parser
traversleer
code generator
linter
AST Explorer
metajs
escogen demo
JSの変換
parser
AST
interpreter <= インタプリタ？
bytecode
optimizing compiler <= コンパイラ？
optimized code
主要エンジン
v8
JavaScriptCore
SpiderMonkey
Chakra
JITコンパイラ
プログラム実行時にコンパイル
中間コードからネイティブコードに変換
06. Universal package.json by れこ
package.jsonにreact-nativeのフィールドが定義できる
v2までは/nativeをつける必要があった
reacti-nativeというフィールドがあった。
Metro bundlerというのに使われている
src/ModuleGraph/node-haste/Package.js
React-Native-Web + no-suffix が鬼門
07. 親に向かってなんだそのz-indexは！！ by ojisan
@ojisan
要素の重なり順
z-indexにまつわる怪奇現象
z-indexの値はどういうものか？
同じレイヤー内で有効
Contexの作り方
position: relative, absolute, fixed, sticky
opacity
まとめ
子供が言うことを聞かないならStack-contextに閉じ込めてあげましょう
関連