Cybozu Frontend Monthly #18

タイトル画像

イベント概要

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

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

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

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

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

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

開催日

2021年12月20日

イベントページ

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

配信URL

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

メンバー

@__sakito__@__sakito__
@nakajmg@nakajmg
@__sosukesuzuki@__sosukesuzuki
@mugi_uno@mugi_uno
@shisama_@shisama_
@b4h0_c4t@b4h0_c4t
@sajikix@sajikix
@nus3_@nus3_

コンテンツ

⛄️ １月〜３月のまとめ

ブラウザ関連

OSS 関連

その他

ゲスト

3月

ヤフー株式会社

印象に残っている記事など

SmartHR が Internet Explorer サポート終了のお知らせを出した : @nakajmg

2021年は多くの企業がIE11のサポートを終了する動きを見せていた。弊社も6月にお知らせを出し、2022年6月でサポートを終了する予定。

この一連のIE11のサポート終了の動きはMicrosoftが自社サービスでのIE対応の終了のお知らせを出したことに起因しているところが多い。

レガシーなブラウザのサポート終了への流れを喜ぶ一方で、SafariがIEのような存在になりつつあるという問題提起がなされています。

State of JS 2020: @nus3_

2020年の調査結果ではフロントエンドフレームワークとして利用率がそこまで高くなかったNext.jsですが、2021年にはSvelteの作者のRich HarrisさんのVercelへのジョインやNext.js CONFなど、様々な発表がありました。実際にプロダクションにNext.jsを採用するといった記事を見ることも多かったように思います。

2020年に興味を持たれたビルドツールとしてGoやRustで実装されたesbuildやSWCが挙げられていました。2021年にはViteがesbuildを、Next.jsがSWCをそれぞれ採用しました。また、JavaScriptツールチェーンとして現在開発中のRomeでもRustが採用されたりと、JavaScript周りのツールがGoやRustで実装されたものが使われることが増えました。

State of JS 2021がどのような結果になるのか楽しみですね！

🌸 ４月〜６月のまとめ

リリースなど

ブラウザ関連

イベント

OSS 関連

その他

ゲスト

4月

Classi株式会社

5月

株式会社stand.fm

6月

クックパッド株式会社

印象に残っている記事など

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 のサポートを終了します！
サイボウズ製品も2022/6/12にサポートを終了予定です！

Microsoftからも関連の記事が多く出ました。

The Plan for React 18: @sajikix

今年の6月、この記事でReact v18 の計画が発表され、同時にalpha版が公開されました。 また、Introducing React 18ではReact v18で以下のようなアップデートがなされるという発表が行われました。

v18へのアップグレード自体は容易であることが強調されていますが、内部的にはレンダリングやライフサイクル自体の考え方などが変わってくるアップデートであることが伺えます。 その後も10月に新しいReact Docs BETAが公開され、12月のReact Conf 2021では上記の機能を中心について詳しい解説がなされました。

正式版のリリースは来年の初めとなりそうですが、今後もReactの行く末に目が離せなさそうです。

🌞 ７月〜９月のまとめ

リリースなど

ブラウザ関連

OSS 関連

その他

ゲスト

7月

Ubie Discovery

8月

note株式会社

インターン

9月

株式会社SmartHR

印象に残っている記事など

Modern web apps without JavaScript bundling or transpiling : @mugi_uno

Ruby on Rails 作者であるDHHがモダンフロントエンドへの解釈とRailsの今後の方向性について書き綴った記事です。 長くWebアプリケーション開発を牽引している Ruby on Rails ですが、Babelによるトランスパイルやwebpackによるバンドルといったフロントエンドの潮流に乗る形で、Webpackerが導入されました。 そして2021年末となった現在、多くのサービス・ライブラリがIE11のサポート終了を発表したことも一つの要因として、Native ESMやimport mapsの実践利用も少しずつ現実味を帯びてきたこともあり、Ruby on Rails の時期バージョン(Rails 7.x)以降ではフロントエンド周りで大きい変更がありそうです。

フロントエンドに閉じない領域で広く影響力を持つフレームワークだと思うため、フロントエンドに特化していたエンジニアのみならず、大きな規模でのパラダイムシフトの片鱗を感じさせる記事でした。

Why are hyperlinks blue?@__sakito__

リンクのデフォルトスタイルはなぜ青いのか、それを歴史から解説している記事です。

結論から話すと、急に青いハイパーリンクが登場したらしいです。 このことについて記事の最後に考察があります。 最初に青いハイパーリンクになったのはモザイクからなのですが、カラーモニターが流行ってたからという結論になってました。 その後モザイクが標準ブラウザになり、モザイクの UI が Web のデファクトになった流れが IE や Netscape に受けつがれたという見解。

あと、WWW ができたときに、ブラウザは白黒しかなく、白黒の濃淡だけでリンクを示していたので色覚障害のために下線が引かれたのも面白かったです。

ブラウザの歴史を簡易的に知ることもでき、「なぜこのようなUIになっているのか」について深く考えたことがなかったので、 歴史から学ぶことができて面白い記事でした。

🍁 １０月〜１２月のまとめ

リリースなど

ブラウザ関連

イベント

OSS 関連

印象に残っている記事など

Vercel welcomes Rich Harris, creator of Svelte: @sosukesuzuki

Svelte や Rollup の作者として知られている Rich Harris 氏が Vercel に入社しました。Rich Harris 氏はこれから Svelte にフルタイムで取り組むそうです。

また記事内では、Svelte は将来的には Egde First であることについても言及されています。従来のウェブアプリケーションと、最近の SPA の良いとこどりをしたいわゆる “Transitional Apps” を構築するツールとして、Svelte に期待しているようです。

また、Rich Harris 氏の入社によって Svelte の OSS としてのガバナンスが変更されることはないそうです。

Deno joins TC39: @b4h0-c4t

Deno が TC39 にジョインしました。

TC39WG においては下記 3 つの機能について取り組んでいくと表明していました。

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

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