I want to be "I can develop frontend a little"

とあるエンドエンジニアの勉強会や技術系の個人的メモ集。

2020/01/15 Mercari x Merpay Frontend Tech Talk vol.4 に参加してきました!

2020/01/15(水)に開催された Mercari x Merpay Frontend Tech Talk vol.4に参加してきました!

mercari.connpass.com

2020年初勉強会でした。

1Fの受付からの18F会場までだいぶ離れていたのですが、迷いそうになるポイント で看板が建てられてて、迷わず勉強会の会場まで行けました。
イベント運営に慣れてる印象を受けました(もちろん好印象です)

目次

内容

様々な方々がフロントエンドの技術に関して共有くださる形式でした。

Pros and Cons of SSR and JAMStack / Yutaka Sasaki氏

資料

speakerdeck.com

ざっくり内容

背景

  • 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に独自の定義を設定
  • いくかの nuxt lifecyle がブラウザ上で使えない

migrate the cashless campaign

  • 特徴
    • 期間が長め
    • 運用で試して問題がなければ他の部分も移行していきたい

How to migrate the cashless campaign

  • 環境

  • A new domain for campagin-web

    • JAM Stack版を同じドメインでパスを少し変更
    • nuxt core fileや画像を参照できない
    • 相対パスにすることで解決
  • SSR vs JAMStack

NoCode で CMS と連携するデザインツールを作っている話 / Masaya Kazama

資料

ざっくり内容

STUDIOでやってること

  • ホームページ・ビルダー的な
  • 目指しているところ

    • WHY: Everyone is creative.
    • HOW:Unless your creativity.
    • WHAT: ワークフロー改善、NoCodeで機能改善など!
  • フロントエンドでやってること

  • 現状の課題

    • LPには適しているけど、データの概念がないためにブログみたいにできない

動的なサイトをつくる

  • GUIで環境で動的なページを作ることは複雑なので、人類はまだ発明をしていない

  • NoCodeでコードの表現力をいい感じに

    • 要求を全部作ろうとすると大変
    • 内部的には関数定義を保持
  • ワークフローのイメージ

    • GUI:実行→定義をいじる→再計算されればよさそう
  • 再ビルドしなくても表示できるようにする必要がある

    • 各DOMのpropにVMにする
  • アコーディオンメニュー

    • GUIの操作=実際のコードを埋め込む
  • 何も考えなくても使えることが大事

  • リアルデータをデザイナーも使えるように

CMSと連携する

  • STUDIO用のCMSを作成
  • 4月ぐらいリリース予定!

TypeScriptで型安全に入門したい / Atsuco Asaoka氏

資料

speakerdeck.com

ざっくり内容

目次

  • 型安全なに?/TSで防げるerrorとはなに?ができたら入門できたとする

なあに

  • どうやってはじめる?

  • TypeScript は何者?

    • JSとは別物
    • コンパイル時にTypeScriptに typechkerが実行される
  • そもそも型って何?

    • 型:値とその値に対して実行できる操作の集合
  • 型の自動変換

    • 暗黙的に型を変換をしてくれるので、errorの原因が特定しにくい

例)

1 + [2] // JavaScript は、12になる
1 + [2] // TypeSciptは、errorに出してくれる
  • TSの静的型付けっていいよね?
    • JSより強力な型付けができて、errorを判定しやすい

型付けって難しそう?

  • 引数をべき乗にして返す関数=数字にするべき

    • name : type でできる
    • いろいろできるけど、基本の形は同じ
  • TypeScriptで扱える型たち

  • object型の定義

    • オブジェクトのプロパティそれぞれに型を設定
    • 必須じゃないプロパティの場合はオプションで設定できる
  • array

    • 同じ型の値を入れるべき
    • いろんな型を許可することもできる…

型安全ってなに?防げるエラーってなに?

  • 防げるerror

    • string を指定してる変数に数字で掛け算するとerrorがでる
    • numberを指定してる変数に sliceするとerrorがでる
  • 実際はこっちだった

    • ほぼJSのままなので、わりといける
    • vue cliなら環境構築簡単そう
    • TSを使わなくても開発できてる、そう見えているだけで多分余計はコストが発生してるのでは?
  • なにに使う?

  • 新規プロジェクトに入れるのはよさそう
  • 既存に入れるのはつらそう
  • 面倒くささ>メリットが逆転すればできるかも?

Web Assembly と画像・動画/Leonardo Ken Orihara氏

資料

speakerdeck.com

内容

JavaScriptだけで画像をしよう

  • wasm-imagemagick

  • なぜ

    • これからPWAアプリ増えそう!
      • photoshop がWebで動く日も来るのでは?
  • さっそくやってみる

    • 画像を横から90度にする
  • ほかにできること

    • diffを取れる
  • 注意

JavaScriptだけで画像をしよう

  • ffmpeg.js

  • なぜ

    • スマートフォンの処理性能も上がってきてる
      • TikTokでもリアルタイムフィルターができたりしてるので、これからWebでも来るのでは?
  • やってみる

  • 注意

    • メンテされてなさすぎ問題
    • コーデック不足で H.265 などがエンコードできない
      • 実用として使うためには、 emscripten でemmake する必要あり
      • でもできるよ

感想

多種多様なフロントエンドを聞けて楽しかったです。 JAMStack is なにそれおいしいの?からやりたい目的はなんとなくわかった、な状態になれた気がします。 SUTIDOはVue.jsを使ったサービスとして知っていたので、取り組みに関して詳しく知ることができて、よかったです。 ふんわり理解のTSをしっかり説明して頂けて、面白かった!TS = 型付けしてくれるなんだか便利なやつからもう少し近づいた存在になった気がします。

WebAssemblyも面白いことがよくわかりました😁

今年もいろんな勉強会に参加していきたいと思います!