Cybozu Frontend Monthly #14

イベント概要

サイボウズフロントエンドマンスリーは、サイボウズ社内で行っているフロントエンド情報共有会「フロントエンドウィークリー」の公開版です。

その月に気になったフロントエンドの情報を、サイボウズのフロントエンドエキスパートチームのメンバーが共有していきます。

このイベントのハッシュタグは #サイボウズフロントエンドマンスリー です。

※フロントエンドウィークリーとは

毎週火曜の 17:00 〜 18:00 で社内向けに行っているフロントエンドの気になる記事を紹介する会です。2016年3月15日から行われています。
ハッシュタグ #サイボウズフロントエンドウィークリー で実況しています。

開催日

2021年08月31日

イベントページ

https://cybozu.connpass.com/event/222354/

配信URL

https://www.youtube.com/watch?v=Rp6yNsHgxhY

タイムテーブル

07:50 - 08:00配信開始
08:00 - 08:05オープニング
08:05 - 08:55本編
08:55 - 09:00クロージング

メンバー

ゲスト


紹介記事

Next.js + SvelteによるnoteのフロントエンドApp分割

  • 共有者: kozo002

巨大化したNuxt.jsアプリケーションをNext.js + Svelteを使い分割に取り組んでいる話を発表しました。


astroのwasm搭載コンパイラについて(55:00~辺りから)

  • 共有者: togami2864

Astroの開発チームNate Moore氏を招いてのエピソード。ReactコンポーネントをAstroで使うデモと最後の方にちらっと開発中のwasm搭載コンパイラーについて話している。 まだ検証段階でちょっとしか動かない。

Astroには独自の記法があり、従来のコンパイラ

  • 全部typescript/javascript
  • パーサーはsvelte/compilerのfork

新コンパイラ

  • Golangベース(tinygo: https://tinygo.org/)
  • wasmのバイナリに変換してして配布(npm i @astro/compilerでインストールされるのがwasmのバイナリ)
  • ブラウザは勿論node/denoのランタイムでの実行も可

100~200ms(per file) かかっていたのが10(per file)ぐらいまでに縮まった

  • FAQ

    • Why not rust ? 実はチームにgoに慣れてる人の方が多かったからという理由・esbuildに近づけたい?

axios/axios Project dead?

  • 共有者: wafuwafu13

概要

2021年8月2日に @koh110さんが開いたissue

  • 2021年7月27日に開いたaborted eventに対応するPRに対する回答がない
  • CIも古くて回せない

    • Travis CIを使っていた
    • 2021年4月にメンテナーによってissueは開かれていた New build tools

現在までの流れ

2021年8月8日に@koh110さんによりGithub Actionsを導入するPRが開かれた

  • 2021年8月13日にメンテナーにメンションし、その日にマージされた
  • 同日、Project dead? のissueが閉じられた

    I'm glad that the axios project is still working!

    Thanks, I will be working on the project actively, please tag me if you need me to look at anything

  • 同日、2021年7月27日に開いたaborted eventに対応するPRでもメンテナーにメンションしているが、現在も対応はない

その後も活動してる様子は見られなかったが、昨夜(2021年8月30日)、Security fix for ReDoSというPRがマージされていた

  • PRタイトル的に緊急性がありそうだったから?

過去にもあった

2019年1月18日にもProject dead?のPRが出されていた

97 open pull requests
411 open issues

It's not dead, I just haven't been able to personally do as much on the project lately. We had a big issue with fixing configurations, which introduced breaking changes, that have halted things until that gets fixed.
So yes, if there are people willing to step up and help as maintainers, I welcome them!

2019年5月31日にv0.19.0がリリースされた。 (v0.19.0-beta.1は2018年8月で10ヶ月ぶり)

chinesedfanさんのように熱心にアプローチしてる人もいた

Share a personal story and some news for users in this thread,
I noticed the situation of axios like you guys in Feb 2019 and triaged about 30 issues+pulls.
Got no responses from the maintainers and felt a little disappointed. But still kept an eye on it.
Luckily, I was invited as a collaborator in Dec 2019. That started my issue killer time. Total issues have decreased from ~600 to less than 300 now.

  • 2019年2月に30件ほどアプローチをかけた
  • メンテナーの回答はなかったが、アプローチをかけ続け、2019年12月にコラボレーターとして招待された
  • そこからめちゃくちゃ頑張ってissueは~600から300以下になった

現在と比べて

issue 190, PR 101, v0.21.1

  • issueはちらほら言及されているがメンテナーからではない
  • PRは回答がないものが多い
  • latestのv0.21.1は、2021年1月5日(8ヶ月前)にリリースされている

余談その1

余談その2

  • 2020年11月27日にnpqというライブラリでAxiosからNode Fetch書き換えたことがある
  • 動機はAxios脱出ではなく、より軽量なものにしたかったから
  • 全部で6箇所かつgetのみだったのでそこまで大変ではなかった

[WIP] 違いでわかるSvelte

  • 共有者: kozo002

みんな大好きReact/Vueと比較してSvelteではどうやるの?でSvelteのことをわかった気になるための記事です。


JavaScriptクイズ

  • 共有者: @mugi_uno

@tkihiraさんが何件かツイートしているJavaScriptクイズが面白かったのでご紹介します。 (ご本人に許可いただきました!)

async・await・Promise に関するクイズ

🔗 元ツイート: https://twitter.com/tkihira/status/1429061261895946240

// どういう順番で表示されるでしょうか?
console.log(1);
(async () => {
  console.log(2);
  await new Promise(r => {
    setTimeout(r, 1000);
    console.log(3);
  });
  console.log(4);
})();
console.log(5);
  1. 1→2→3→4→5
  2. 1→2→3→5→4
  3. 1→5→2→3→4
  4. 1→5→2→4→3

forループ処理と変数に関するクイズ

🔗 元ツイート: https://twitter.com/tkihira/status/1429625115038289922

// 何が表示されるでしょうか?
const a = [];
for (let i = 0; i < 9; i++) {
  a[i] = () => console.log("i: " + i);
}

const b = [];
let j = 0;
while (j < 9) {
  b[j] = () => console.log("j: " + j);
  j++;
}

a[2]();
a[5]();
b[2]();
b[5]();
  1. i: 2, i: 5, j: 2, j: 5
  2. i: 9, i: 9, j: 9, j: 9
  3. i: 2, i: 5, j: 9, j: 9
  4. i: 9, i: 9, j: 2, j: 5

シンプルながら理解度を試される良い内容だと思いました。 ちなみに自分はfor文のほうを普通に間違えてしまい、後で実行してみて「あーー!!」となりました。修行し直してきます。

他にも何問か挙げられていたので、一度見てみると楽しいと思います!

🔗 浮動小数点値の計算に関するクイズ
https://twitter.com/tkihira/status/1430001334116261890
🔗 use strict"の挙動に関するクイズ
https://twitter.com/tkihira/status/1430366880833806337


Agenda for the 85th meeting of Ecma TC39

  • 共有者: @sosukesuzuki

8月のTC39ミーティングのアジェンダ。

For Stage 4

3つあってすごい!

Array.prototype.at

配列のインデックスに対応した値を取得する。負の整数を渡すことで後ろから取得できる。

console.log([1, 2, 3, 4, 5].at(-1)); // 5
Object.hasOwn

Object.prototype.hasOwnProperty.callObject.hasOwn で済むようになる。

Class Static Blocks

static プロパティにアクセス可能なブロックの構文。 複雑な処理の結果や、クラスのプライベートプロパティに依存した計算の結果を static プロパティに入れることができる。 TypeScript 4.4 に入った。

class Foo {
  static y;
  static {
    this.y = "y";
  }
}

その他僕が気になったものをいくつか

For Stage 3

Iterator Helpers

Array に生えている map とか filter みたいな便利メソッドをイテレータ全般に対して生やす提案。ほしい!

For Stage 2

Change Array by Copy

もとの配列を変更せずに、配列に対してなんらかの操作を行うインスタンスメソッドを追加する。 みんなほしいやつ。

const arr1 = [1, 2, 3];
const arr2 = arr1.withPushed(4);
console.log(arr1); // [1, 2, 3]
console.log(arr2); // [1, 2, 3, 4] 
Pipeline operators

みんなほしいのか?昔からあるやつが新しくなっている。

2018年の時点で2つの提案に分かれていた(https://babeljs.io/blog/2018/07/19/whats-happening-with-the-pipeline-proposal)

2021年では Smart がなくなって Hack が追加された。

なので、今は F# と Hack が存在する。

しかし、Hack を進めていく方針らしい。

こういうやつ。

return list
  |> take(prefix.length, %)
  |> equals(%, prefix);

プレースホルダートークンは今のところ % だけど、まだ議論されていて、確定ではない。 # とか ? とかもありかもね?

For Stage 1

Get Intrinsic

ECMA262 Editor の @ljharb あたらしい提案。

今の JS はこういうことができてしまう。String はデフォルトでは String コンストラクタだけど、書き換えられる。

function getString(value) {
  return String(value);
}

const foo = getString(3);
console.log(typeof foo === "string"); // true

String = Number;

const bar = getString(2);
console.log(typeof bar === "string"); // false

困るので、組み込みオブジェクト(Well-known Intrinsic Objects)を安全に取得する方法がほしい。getIntrinsic

const $String = getIntrinsic("%String%");

function getString(value) {
  return $String(value);
}

const foo = getString(3);
console.log(typeof foo === "string"); // true

String = Number;

const bar = getString(2);
console.log(typeof bar === "string"); // true

@ljharb がメンテナンスしている es-shims では、お手製の get-intrinsic パッケージを使っている。(Weekly Download 12,873,582)

String is USV String

ECMAScript Modules 界隈では有名な Guy Bedford の提案。

文字列が USV String かどうか判定するメソッドを導入するらしい?


Smooth and simple page transitions with the shared element transition API

  • 共有者: sakito

shared element transition APIの解説になります。

ページ遷移時にフェードなどの遷移アニメーションをつけれる API です。
モバイル(Android)ではサポートされている動作ですが、Web にはページ遷移アニメーションをつけれる標準 API がないので、提案されました。 shared element transition API の挙動もマテリアルデザインに基づいたものになっています。

Web とモバイルの差をなくすためには必要となる API だと思います。

chrome 92 から Chromium 94 で origin trial として試すことができるらしいです。 現在はまだ Multi-page apps の対応が入ってないですが、将来的にはサポートする予定らしいです。

Issue ではApp History との組み合わせReact 実装例などもあるので眺めていみるのも面白いです。

この提案はまだまだ導入に時間がかかりそうですが、この流れがあることを知っておくと似たような要件を実装するときに考慮することができると思います。


Access modern GPU features with WebGPU

  • 共有者: b4h0_c4t

Web アプリケーションで GPU を用いた描画処理を可能にする新しい Web API の話。 WebGPU は WebGL のように画像表現に特化したようなものではなく、GPU 上で行われる一般的な計算のサポートを目的にしているらしい。

この記事では、WebGPU を使い始めるための基礎的な概念から How to までを解説しています。


Safari isn't protecting the web, it's killing it

  • 共有者: nakajmg

SafariがかつてのIEと同じような存在になってきている、webを殺しているのではないかという議論が行われています。

Safariはセキュリティやプライバシーに懸念があったり、実験的な機能を追加しないことでWebを保護しているというような認識を持たれることがありますが、これは現在ではほとんど間違っていると紹介しています。

具体的に他のブラウザが実装していてSafariが実装していない機能として次のものがあげられています。

  • CSS's contain property: Chrome(2016) Firefox(2019)
  • CSS's offset-path property: Chrome(2015) Firefox(2020)
  • CSS's overflow-anchor property: Chrome(2017) Firefox (2019)
  • Resolution media queries: Firefox(2012) Chrome(2013)
  • :focus-visible: Chrome(2020) FirefoxJanuary (2021)
  • TouchEvents: Chrome(2012) Firefox(2017)
  • BroadcastChannel: Firefox(2015) Chrome(2016)
  • beforeprint and afterprint JavaScript events: IE 6(2001) Firefox(2011) Chrome(2018)
  • Regex lookbehind in JavaScript: Chrome(2017) Firefox(2020)
  • scrollIntoView({ behavior: 'smooth' }): Firefox(2015) Chrome(2017)
  • Screen orientation JavaScript APIs: Chrome(2014) Firefox(2016)
  • AV1 video and AVIF images: Chrome(2018) Firefox(2019)

これらの機能はSafari以外の多くのブラウザが実装していますが、プライバシーやセキュリティ、バッテリー寿命への懸念などはありません。

実装していない機能だけではなく、多くのバグが未修正のままであることも問題としてあげています。さらにこれはSafariのリリースサイクルが6ヶ月と他のブラウザに比べても極端にペースが遅いことで問題が悪化しています。 Safariで深刻なバグが見つかってすぐに修正されたとしても、それがリリースされるのが6ヶ月後ということが起こっています。

記事ではChromiumの市場シェアについても触れていて、このままでは意図せずともChromiumが市場を独占し、結果的にChromiumが実装したものが実質的なweb標準として受け入れざるを得ないような状況になることを危惧しています。

分量の多い記事ですが、webブラウザを取り巻く現状が把握できる良い記事なので、ぜひ読んでみてください。


フロントエンドエキスパートチームについて

https://speakerdeck.com/cybozuinsideout/frontendexpert-team