2020/01/15 Mercari x Merpay Frontend Tech Talk vol.4 に参加してきました!
2020/01/15(水)に開催された Mercari x Merpay Frontend Tech Talk vol.4に参加してきました!
2020年初勉強会でした。
1Fの受付からの18F会場までだいぶ離れていたのですが、迷いそうになるポイント
で看板が建てられてて、迷わず勉強会の会場まで行けました。
イベント運営に慣れてる印象を受けました(もちろん好印象です)
目次
- 内容
内容
様々な方々がフロントエンドの技術に関して共有くださる形式でした。
Pros and Cons of SSR and JAMStack / Yutaka Sasaki氏
資料
ざっくり内容
背景
1ヶ月に1〜2本のLP開発
SSRのパフォーマンスがでない
- 1pod をスケールアウトさせていた
- 単純なLPを配信したいだけなのにコスパが悪い
いろんなパターンで負荷実験
Nuxt.jsがコンテンツの量でLPSの差がでる
Nuxt generate / JAM Stackをやってみる
- ユーザーエージェントで出し分けを実施
- nuxt generate 時にuserAgenent が取れない
- 常にユーザーエージェントを想定しないコードにする必要がアアル
- v-if の条件式にユーザーエージェントを入れると、サーバーサードとクライアントサイドのDOMに差がでる
- errorが発生
- v-showにすることで解決
- nuxt generate 時にuserAgenent が取れない
- ユーザーエージェントで出し分けを実施
開発中のキャンペーンを本番にでないようにする
- nuxt-generateに独自の定義を設定
いくかの nuxt lifecyle がブラウザ上で使えない
migrate the cashless campaign
- 特徴
- 期間が長め
- 運用で試して問題がなければ他の部分も移行していきたい
How to migrate the cashless campaign
環境
A new domain for campagin-web
SSR vs JAMStack
JAMStackのメリット
- MicroServieと比べて削減ができそう
- LPのようなペライチのサイトにはかなり向いている
NoCode で CMS と連携するデザインツールを作っている話 / Masaya Kazama氏
資料
ざっくり内容
STUDIOでやってること
- ホームページ・ビルダー的な
目指しているところ
- WHY: Everyone is creative.
- HOW:Unless your creativity.
- WHAT: ワークフロー改善、NoCodeで機能改善など!
フロントエンドでやってること
- コード → render関数 → ブラウザにレンダリング
現状の課題
- LPには適しているけど、データの概念がないためにブログみたいにできない
動的なサイトをつくる
GUIで環境で動的なページを作ることは複雑なので、人類はまだ発明をしていない
NoCodeでコードの表現力をいい感じに
- 要求を全部作ろうとすると大変
- 内部的には関数定義を保持
ワークフローのイメージ
- GUI:実行→定義をいじる→再計算されればよさそう
再ビルドしなくても表示できるようにする必要がある
- 各DOMのpropにVMにする
アコーディオンメニュー
- GUIの操作=実際のコードを埋め込む
何も考えなくても使えることが大事
- リアルデータをデザイナーも使えるように
CMSと連携する
- STUDIO用のCMSを作成
- 4月ぐらいリリース予定!
TypeScriptで型安全に入門したい / Atsuco Asaoka氏
資料
ざっくり内容
目次
- 型安全なに?/TSで防げるerrorとはなに?ができたら入門できたとする
なあに
どうやってはじめる?
- codesandbox を使って環境構築せずに実装
TypeScript は何者?
- JSとは別物
- コンパイル時にTypeScriptに typechkerが実行される
そもそも型って何?
- 型:値とその値に対して実行できる操作の集合
型の自動変換
- 暗黙的に型を変換をしてくれるので、errorの原因が特定しにくい
例)
1 + [2] // JavaScript は、12になる 1 + [2] // TypeSciptは、errorに出してくれる
- TSの静的型付けっていいよね?
- JSより強力な型付けができて、errorを判定しやすい
型付けって難しそう?
引数をべき乗にして返す関数=数字にするべき
name : type
でできる- いろいろできるけど、基本の形は同じ
TypeScriptで扱える型たち
- any
- ブラックボックス化しがち
- 手動で設定できるがなんのために存在しているのか?
- any
object型の定義
- オブジェクトのプロパティそれぞれに型を設定
- 必須じゃないプロパティの場合はオプションで設定できる
array
- 同じ型の値を入れるべき
- いろんな型を許可することもできる…
型安全ってなに?防げるエラーってなに?
防げるerror
- string を指定してる変数に数字で掛け算するとerrorがでる
- numberを指定してる変数に sliceするとerrorがでる
実際はこっちだった
- ほぼJSのままなので、わりといける
- vue cliなら環境構築簡単そう
- TSを使わなくても開発できてる、そう見えているだけで多分余計はコストが発生してるのでは?
なにに使う?
- 新規プロジェクトに入れるのはよさそう
- 既存に入れるのはつらそう
- 面倒くささ>メリットが逆転すればできるかも?
Web Assembly と画像・動画/Leonardo Ken Orihara氏
資料
内容
JavaScriptだけで画像をしよう
なぜ
- これからPWAアプリ増えそう!
- photoshop がWebで動く日も来るのでは?
- これからPWAアプリ増えそう!
さっそくやってみる
- 画像を横から90度にする
ほかにできること
- diffを取れる
注意
- wsm-imagemagickメンテされてなさすぎ問題
JavaScriptだけで画像をしよう
なぜ
やってみる
注意
- メンテされてなさすぎ問題
- コーデック不足で H.265 などがエンコードできない
- 実用として使うためには、 emscripten でemmake する必要あり
- でもできるよ
感想
多種多様なフロントエンドを聞けて楽しかったです。 JAMStack is なにそれおいしいの?からやりたい目的はなんとなくわかった、な状態になれた気がします。 SUTIDOはVue.jsを使ったサービスとして知っていたので、取り組みに関して詳しく知ることができて、よかったです。 ふんわり理解のTSをしっかり説明して頂けて、面白かった!TS = 型付けしてくれるなんだか便利なやつからもう少し近づいた存在になった気がします。
WebAssemblyも面白いことがよくわかりました😁
今年もいろんな勉強会に参加していきたいと思います!