Cybozu Frontend Monthly #11

タイトル画像

イベント概要

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

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

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

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

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

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

開催日

2021年05月25日

イベントページ

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

配信URL

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

メンバー

@koba04@koba04
@pirosikick@pirosikick
@__sakito__@__sakito__
@shisama_@shisama_
@nakajmg@nakajmg
@b4h0_c4t@b4h0_c4t
@__sosukesuzuki@__sosukesuzuki
@mugi_uno@mugi_uno

ゲスト

@toshi__toma@toshi__toma
@1013Youmeee@1013Youmeee

コンテンツ

yarn v2 にまつわる誤解

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

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

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

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

5 Advanced React Patterns

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

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

各パターンの紹介

  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

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

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

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

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

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

以下は個人的な感想。

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

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

関連記事

Start building with the Notion API Beta

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

Unveiling Material You - Material Design

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

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

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

（yarn 推しの記事っぽく、yarn での How が中心）

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

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