Cybozu Frontend Monthly #14

タイトル画像

イベント概要

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

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

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

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

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

zennのpublicationにてウィークリーのまとめも投稿していますので、ぜひこちらもご覧ください。 https://zenn.dev/p/cybozu_frontend

開催日

2021年08月31日

イベントページ

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

配信URL

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

メンバー

@koba04@koba04
@__sakito__@__sakito__
@nakajmg@nakajmg
@b4h0_c4t@b4h0_c4t
@__sosukesuzuki@__sosukesuzuki
@mugi_uno@mugi_uno
@sajikix@sajikix

ゲスト

@kozo002@kozo002
@togami2864@togami2864
@wafuwafu13_@wafuwafu13_

コンテンツ

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

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

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

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

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

新コンパイラは

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

axios/axios Project dead?

概要

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

現在までの流れ

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

その後も活動してる様子は見られなかったが、昨夜(2021年8月30日)、Security fix for ReDoSという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.

現在と比べて

issue 190, PR 101, v0.21.1

余談その1

余談その2

[WIP] 違いでわかるSvelte

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

JavaScriptクイズ

@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

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

For Stage 4

３つあってすごい！

Array.prototype.at

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

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

Object.prototype.hasOwnProperty.call が Object.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

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

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

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

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

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

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

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

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

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

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

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

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

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