Cybozu Frontend Monthly #13

タイトル画像

イベント概要

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

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

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

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

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

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

開催日

2021年07月27日

イベントページ

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

配信URL

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

メンバー

ゲスト


コンテンツ

150万MAUのNuxt.js製サービスを機能開発を止めずに1ヶ月&1人でNext.jsに置き換えた話

Ubie の[AI受診相談ユビー]を Nuxt.js から Next.js に置き換えた話。機能開発を止めないリプレイス事例として参考になると嬉しい。


Just-in-Time Mode - Tailwind CSS

業務で Next.js + Tailwind CSS を使っているのですが、Just-in-Time(JIT)モードが便利だったので共有します。

なお、Next.js v10.2.0 で JIT モードを試したところ、うまく動きませんでした。v10.2.2 以上、v11 であれば問題ないようです。

Next.js v10でTailwind CSSのJust-in-Timeモードがうまく動かない


Content EditableでWYSIWYGエディタ作るの楽しい! - maru source

Ubie Discoveryのカルテエディタの話。Content Editableを使ったWYSIWYGエディタの作り方について。 ProseMirror等のリッチテキストエディタ用のOSSを使わずに、一から作っていてすごい。 エディタの話だけではなく、設計の話、設計をどのようにドキュメントに残すかなども書いており、楽しく読めました。


Astro

Snowpack チームが作った静的サイトジェネレータ。


Creating an accessible autocomplete experience

AdobeのデザインシステムであるSpectrumをReact実装したReact Spectrumから出た記事。 ComboBoxuseComboBoxをリリースしたので、どのようなことを考えて実装されたのか解説されている記事です。

記事では大まかにこのようなことが述べられています。

実装時に気をつけたいことが色々と紹介されているので、ComboBoxの実装以外でも参考になる記事でした。


Using WebAssembly threads from C, C++ and Rust

WebAssembly を使ってマルチスレッドアプリケーションを構築する話。

前半は Web Worker を用いた WebAssembly 上でのメモリ管理の歴史や WebAssembly atomics と呼ばれる単一の SharedArrayBuffer のアクセス衝突を回避する機能の解説をしています。

後半では、C、C++、Rust を用いたマルチスレッドアプリケーションの例とその解説をしています。 解説中では、pthread や std::thread といった各言語の標準スレッドライブラリを利用して解説を行なっている他、各セクション毎にいくつかの要点が記述されているので今後 WebAssembly を介して利用したい言語があれば読んでみることをお勧めします。


petite-vue

Vue のサブセット的なものがリリースされました。通常の Vue の機能制限版的なものですが、Vueのv1系で行ってたような使い方ができます。scriptでグローバルに PetiteVue を生やす以外にも、次のように ESM で import して使うといったこともできます。

<script type="module">
  import { createApp } from 'https://unpkg.com/petite-vue?module'
  createApp().mount()
</script>

petite-vue は computed など使えない機能があるので、そのあたりを考慮した上で用途を考える必要がありそうです。

Vue の easy な使い方をカバーする役割としてこういったビルドを出してくるのは面白いアプローチだなと思いました。


Prisma Day 2021

Prismaのオンラインカンファレンス Prisma Day 2021 が 6/29-30 で開催されました。 セッションの動画はすべて YouTube にアップされています。

@kanasugi_y さんによる日本語でのワークショップも開催され、 同様に動画がアップされているので、Prismaの入門として良さそうです。

最後のセッション “What’s next for Prisma?” では、今後のロードマップに関する紹介がありました。
https://www.youtube.com/watch?v=vTgvePrccas

言及されていたものから幾つか抜粋します。

上記を含む、現在のロードマップは以下で確認できます。
https://www.notion.so/Prisma-Roadmap-50766227b779464ab98899accb98295f


The performance effects of too much lazy-loading

画像のlazy-loadingはパフォーマンス向上には有効な方法だが、ページ内のすべての画像をlazy-loadingすると、パフォーマンスが悪くなることもある。 WordPressで作られたページで実験したところ、ファーストビュー内の画像はlazy-loadingしないほうが良いパフォーマンス結果を得られた。

以下、記事本文まとめ


告知:Ubie Tech Talk #5

明日 7/28 18:00-19:00 に Ubie Tech Talk #5 を開催します


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

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