Cybozu Frontend Monthly #11

イベント概要

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

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

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

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

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

開催日

2021年05月25日

イベントページ

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

配信URL

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

タイムテーブル

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

メンバー

ゲスト


紹介記事

yarn v2 にまつわる誤解

  • 共有者: @1013Youmeee
  • yarn を v2 にするのに PnP は必須ではない
  • PnP の対応状況はかなり良くなっている
  • yarn v2 のインストールは不要
  • yarn v2 を使っているプロジェクト

    • yarnV2 自身、babel, ject, storybook など
  • yarn v2 の利点
  • yarn v2 で特に対応が必要なところや厄介なところ

参考: stand.fm でも今年 3 月に Yarn v2 にアップグレードしました Yarn を Yarn 2(berry)にアップグレードした話


React’s greatest power may lie in its open source ecosystem

  • 共有者: toshi-toma

React や React Native の歴史や React のエコシステムについての話。開発者に焦点が当たってて面白い。 React とそれを取り巻くエコシステムがお互いに良い影響を与えて好循環を生んでる。という話がよかった。 記事的には GitHub の ReadME プロジェクトっていう、OSS の道のりや背景にいる人々の物語を紹介する記事の React 版。

記事で気になったところ抜粋

  • Facebook は当時モバイルファーストに注力していたけど、Web の技術だけではタッチ操作やジェスチャーなどモバイルアプリにあるような機能が提供できなかったので苦戦していた

    • Mark Zuckerberg「betting too heavily on HTML5 was Facebook’s biggest mistake in their journey to become a mobile-first company」
  • Christopher Chedeau が Web の技術はモバイルでももっとうまく機能するはずと考えて、Facebook アプリの開発に取り組んでいたけど質の高い体験を提供することはできなかった

    • そんな時に、React が開発された & JS を使ってネイティブの API と連携させることができた
    • それに興味をもった Chedeau 氏がチームでハッカソンに出て、React Native を作った
  • React はフレームワークじゃないので、アプリを作る時は追加のツールが必要

    • React を中心に構築された開発者ツールのエコシステムは、数億円の資金を調達するような複数の企業を生み出した
    • React コミュニティが一体となって、人々のソフトウェア開発を変えている
  • React エコシステムの例

    • Gatsby: 販売ソフトウェアのスタートアップのウェブサイトを構築するために作成したのがはじまり
    • Next.js: Facebook が始めたことを民主化するために始まった
    • Blitz.js: Ruby on Rails を主なインスピレーションの源として、"すべてがモノリス(1 つのアプリケーション)であることで得られる生産性の向上
    • Expo: React Native を使ったアプリの作成、構築、テストのためのツールをまとめた
  • エコシステムは React の恩恵を受けているし、開発者が React を使い始めるのが簡単であればあるほど、React のコアプロジェクトに貢献してくれる可能性が高くなり、エコシステム全体がより良くなる。これは改善の好循環
  • 記事の途中にコンポーネントやリアクティブ、宣言的など React が取り入れたパラダイムシフトの話もあった

5 Advanced React Patterns

  • 共有者: @1013Youmeee

発展的な React のデザインパターンを 5 つ紹介しており、React のコンポーネント実装時に参考になりそうだと思ったため共有します。

コンポーネントを実装する上での課題を以下の 3 つの論点で解説しています。

  • 再利用可能性

    • 異なるユースケースにおいて再利用可能なコンポーネントを作るにはどうすればいいか
  • 単純性

    • 使いやすいシンプルな API にするにはどうすればいいか
  • 拡張性

    • UI 面かつ機能面で拡張しやすくするにはどうすればいいか

各パターンの紹介

  1. Compound Components Pattern
  2. Control Props Pattern
  3. Custom Hook Pattern
  4. Props Getters Pattern
  5. State reducer pattern

JWT should not be your default for sessions

  • 共有者: mugi

従来のバックエンドでのセッション管理と比較した場合の、JWT でのセッション管理のリスクに関するブログ。

昔ながらのセッション管理ではスケールを考えるとバックエンド側に Redis や DB といったセッションデータ用の仕組みを持つことが多いが、JWT の場合はそれが不要でシンプルになり、よりスケーラブルであると言われているが、次のような問題があると言及している。

  • JWT 自体が複雑な仕様(RFC7519)であること

  • 何も対策しない場合にはバックエンド主導でログアウトさせる方法が無い

    • トークンのライフサイクルを短くする または 期限切れになったトークンのリストをバックエンドで保持することで解決できるが、元来 JWT のメリットであった「バックエンドの仕組みが不要」点は失われる
  • JWT のサイズ自体が比較的大きいこと

    • リクエストのオーバーヘッドになりやすい

ブログ筆者が JWT に言及している 12 件ほどの記事とリポジトリを調べたところ、大半でログアウト手段を持っていない・バックエンドでのセッションと併用していて JWT 自体が不要・秘密鍵自体が同梱されちゃってた、といった状態だったらしく、正しく JWT を運用する難しさを改めて確認したとのこと。

JWT を利用することで、時によってはサービスをステートレス化することができ、理想的な選択になり得るが、従来のセッション管理と比較すると必ずもシンプルにはならず、より複雑なインフラが必要となる可能性もある。セキュリティと機能のトレードオフにも注意が必要。

記事の最後には「ボイラープレートやテンプレートからは JWT は外し、デフォルトの選択にしないでね」と締めくくってる。

以下は個人的な感想。

  • 欠点として挙げられている「設定を間違えやすい」という点については、バックエンドでのセッション管理でも同じなので、JWT 固有ではないような気もした
  • ただ、強制的にログアウトさせることができない & そのためにはバックエンドでデータを持つ必要がある、というのは納得感はあった
  • JWT の RFC を改めて読んでおこうって思いました

Internet Explorer は Microsoft Edge へ – Windows 10 の Internet Explorer 11 デスクトップアプリは 2022 年 6 月 15 日にサポート終了 - Windows Blog for Japan

  • 共有者: shisama

2022/6/15(日本時間 2022/6/16)に Microsoft は IE のサポートを終了します! お疲れさまでした!

  • Edge の IE モードは、少なくとも 2029 年まではサポートする予定です。
  • Windows 10 LTSC(Long Term Support Channel)や Windows Server の IE には影響しない

  • Trident には影響しない

    • 詳細は不明ですが、IE モードはまだまだ続くし、Trident にはパッチがあたっていくのかも(?)
  • 毎秒約 579 件のパスワード攻撃 (英語) が仕掛けられており、この課題に対応できるブラウザーが必要とされています。」

    • 1 日 5000 万件の Password atack、ブロックした脅威のあるメール 300 億件...
  • 「企業が保有するレガシ アプリの数は平均で 1,678 個と言われています」
  • 「最新の Web サイトやアプリを開発している Web 開発者の方は、この日を待ち望んでいたことと思います。」

関連記事


Start building with the Notion API Beta

  • 共有者: b4h0_c4t

Notion API のパブリックベータが始まりました。

Getting started では curl でテーブルにデータを投げる感じのチュートリアルでした。

インテグレーションの初期権限が 0 で、ユーザを招待する感覚で権限を付与する体験は今時のサービスだなという感じがしました。 現状 Readonly な権限がなさそうなので今後追加されるのか気になるところです。 インテグレーションはパブリックとインターナルの二種類に分別されるらしく、パブリックインテグレーションは OAuth を用いて他のワークスペースでも権限周りを解決するそうです。 1 ワークスペースに当てられるパブリックインテグレーションは 1 つまでという制限事項がついているのが個人的には気になりました。

JavaScript SDKも配布されています。


New aspect-ratio CSS property supported in Chromium, Safari Technology Preview, and Firefox Nightly

  • 共有者: nakajmg
  • CSS の aspect-ratio がいくつかのブラウザに実装された
  • aspect-ratio: 16/9 と明示的に比率を指定できる
  • 画像の比率を保つために使ったり

    • padding-top ハックでやってたやつとかを置き換えられる
  • レイアウトシフトの軽減目的で使えたり
  • レスポンシブで比率を保つような実装がより簡単になりました

Unveiling Material You - Material Design

  • 共有者: sakito

Google I/O 2021 で発表された Material You についてです。

日本語まとめ的なのもあります。

個人が選んだテーマカラーが、アプリやシステムの UI に反映されるものです。 簡単にいえばダークテーマ以外にブルーテーマやピンクテーマが設定できるようなかんじになのかなと思います。 色だけではなくコントラスト、UI のサイズや太さなどアクセシビリティに関するものも可変になるそうです。

これは今はアプリだけですが、そのままトレンドになると、今後 Web にも流れがくるかもしれないので、 Web を作る上でも知っておくといいかもしれない情報だと思います。

この Material You を反映するなら、デザイン設計やデザインシステム的なものが大事になってきそうです。


Prettier 2.3. In which assignments are consistent, short keys non-breaking, and Handlebars official

  • 共有者: @sosukesuzuki

Prettier 2.3 がリリースされました。

JavaScript の代入に関するフォーマットが大幅に改善されました。 内部の仕組みも大きく変わっており、様々なエッジケースでバグが起こる可能性があります(ref: https://github.com/prettier/prettier/blob/b84bc954e8725ad7e5afbd7a849bb9d9a507d274/src/language-js/print/assignment.js)。 代入周りの差分で違和感を感じた場合、それは Prettier の主義ではなくバグである可能性が高いので報告をお願いします。実際すでにいくつかのバグが報告されています。

2017 年から alpha やら beta やら言われていた Handlebars の公式サポートがリリースされました。

TypeScript 4.3 が babel-ts パーサーでサポートされました。 Prettier の TypeScript のデフォルトのパーサーはtypescriptであり、babel-tsではありません。 もし TypeScript 4.3 の新しい構文をフォーマットしたい場合はbabel-tsパーサーを使用してください。 なお、デフォルトのパーサーでの TypeScript 4.3 サポートも次のバージョンで行う予定です。 (typescriptパーサーの実態である@typescript-eslint/typescript-estreeは、RC がリリースされないと新しい機能を実装しない方針なので、Prettier2.3 リリース時にはまだサポートされていませんでした。)


Dependency Managers Don’t Manage Your Dependencies | Christoph Nakazawa

  • 共有者:pirosikick

「Dependency Manager はあなたの依存を管理しない」という「ほんまか?」と思うタイトル。 ここでいう「管理」とは以下で、それぞれに対して How が書いている記事。

  • 依存関係の解析する
  • 不要な依存の削除する
  • 依存を最新に保つ
  • 重複している依存をきれいにする
  • 同じ目的で利用している複数のパッケージを単一にする
  • 必要なら Fork する
  • 依存の数・サイズを監視する

(yarn 推しの記事っぽく、yarn での How が中心)


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

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