Frontend de KANPAI! #7 - Going on 令和 - https://gyazo.com/d6d5b0ac1414b1d8f3e2b274b1bb82b3
電子版ウェブチーム
クライアントJSはDOMをレンダリングするものではない
インタラクションの実装がJS
パフォーマンス
フレームワークによってはオーバーキル
基本的にCSRしなくてよい
バグで安い
参入障壁が高い
歴史
状態と振る舞いがDOMに紐付けられない
DOM Attiributes、関数の外に状態を置く
スコープの限定がない
常に外からサワレナイ
カプセル化できる良さ
メソッドがモテる
フレームワークと干渉しない
つらいところ
文字列ベースになる
型で縛れない
ReactのSSRの中にCustom Elementsで囲む render propsでchildrenを渡すことができる
事業会社一年目の僕が見たフロントエンド
デザイン本部サービスデザイン部デザインエンジニアリング1G
制作会社時代
ディレクター以外は異なる所属会社、勤務地のメンバー
コミュニケーションは採らない
仕事をしっかり取り組む
APIのストリーミングの返り、エラーメッセージなどはドキュメントに記載
仕様書やデザインでも同様
大切なこと
仕様どおり、スケジュールどおり
入社後
コミュニティ機能
フロント
サーバー
Firebase
進め方
ディレクターとデザイナーが仕様を固める
仕様以外の提案もしていたが
遅延気味
インタラクションの質が悪い
余裕があったので仕様やモック作成などをすすめた
デザイナーと認識併せてブラッシュアップ
仕様書を作り込んだので手戻りが少なくなった
サーバーサイドも創る
アプリ画面のWebViewや管理画面
APIレスポンスを集約したい
型定義で安全な開発をしたい
共通コンポーネントで使い回し
サーバーサイドは適時相談したりで時間を割いている
サーバーサイドと同等に話せるように
Webの全体像を理解する
ちょっとしたシェルなら書けるように
まとめ
制作会社時代は仕様どおり、スケジュールどおりに実装していた
DeNA入社後はフロントエンドと役割に固執しないで飛び出た活動をしていた
次元を超える事業化集団っぽいフロントエンドの話
フロントエンドエンジニア
担当サービスの集客戦略と各チャネルについて
ここを知って技術選定できることはフロントエンドエンジニアの強み
集客戦略
サービスにユーザーを連れてくること
どこのチャネルから
どのくらいの人数・比率の
ユーザーを連れてきているのか？
どれくらいリピートがあるかも含む
各チャネル慶友のKPIへの影響度など数値・ユーザーの特徴とサービスのマネタイズまでの流れを見る どれだけ手をかけられるか？
どんな打ち手を打てばいいのか？
例
SEOの集客
リスティングやSNS
複数回見当後マネタイズする
集客戦略目線で技術をみる
なぜこれを入れるのか
入れたらどうなるのか
オーガニック検索胃液油のセッション数の上昇
再訪ユーザーの数
導入してみたい理由の説明がしやすくなる
注意点
事業全体が見えてくると
導入タイミングが今じゃないとなることもしばしば
次のアクションを明確にする
プロダクトのフェース
異なるプロダクトへの異動
技術スタック
勉強会をやる
分業
エンジニア内で越境する
技術環境
バージョンアップ
転職して他プロダクトへ
最終手段
長期的なキャリアの強みとなるならあり
実録フグ料理
フグ料理？
Project Fugu
NativeAppとWebAppの差分を埋めるため
リーチできなかったAPIをChromeで開放する
https://www.youtube.com/watch?v=GSiUzuB-PoI
セキュリティ・プライバシーの観点からNativeAPIのアクセスは留意が必要
フグ料理と同じように
APIは現在80以上ある
Share Detection API
検出可能なもの
バーコード
テキスト
顔認証
chrome://flagでWeb Platform featuresでEnabled
Android Chromeでも一部利用可能
BarcodesDector
SVGポリゴンの利用も可能
色んなフォーマットがある
取得できた文字列はURL等
TextDetector
確認はインが環境祭が大きい
矩形情報はとれる
速度優先・検出数上限がある
8個可能？
FaceDetector
目と鼻と口の頂点座標が取得できる
Androidでも可能だが挙動が不安定
Recipe
Pixi.jsでモザイク処理
所感
楽しみだし楽しい
実験的機能なので不安定しょうがない
依存ライブラリがない
フロントエンドっぽい実装楽しい
Native Appならではの機能がでるので期待
新しい API
APIとは
あるプログラムを別のプログラムに呼び出すための仕組
紹介するAPI
Lazy Image Loading
loading="lazy"
206コードで返ってくる
成功して一部だけ送る
prefers-color-scheme
ダークモード設定など
inverted-colors
システムカラーが反転できているか
見やすい重視スイッチ
Scroll Snap
ホイールスクロールを吸着できる
Array.flat()
多次元配列を単次元配列に
map()と併せて多彩なアルゴリズム表現が可能になる
Intl
リスト文字表現
TypeScript Compiler API
コンパイラへのアクセス
Linter / Syntax Highlight
PointerEvent
マウス、タッチ、ペン操作の制御
Web Share
ネイティブのシェアシートを呼び出す
Sign in With Apple
Apple IDでログインボタン
二段階認証
JSON Web Token
back check PM / Frontend Engineer
経歴
2016: プログラミングを始める
PHP, JS
ROXXで副業
2017
ROXXでフロントエンドのリーダー就任
10月にROXXを退社
フリーランス
月5社くらいでコード書いてた
これまでのフロントエンドの振り返り
2000年代
フロントへの評価が見直され始める
2010年前半
Flashが死んで複雑化
Node.js
MVCアーキテクチャ
モジュールバンドラ
AltJS
モダンフレームワークの登場
SPA開発
2010年後半
flux
PWA
SSR
ここ数年のフロントエンド
デザインを基にマークアップから
ロジックや設計などを求められるように
御三家フレームワークが当たり前
ここ2, 3年はそこまで変化してない、停滞してる
これからのフロントエンド
2通りに分類されそう
ビジュアルフロントエンドエンジニア
デザイン再現力
文書構造を意識したHTML、CSSの再現
UI, UXの勉強をしてデザイナーと協業する
デザインは自分でできても良いと思う
アプリケーションフロントエンドエンジニア
モダンフロントエンドのスキルはすべてひるよう
ECMAScriptを負う
サーバーサイドの知識