Cybozu Frontend Monthly #6
イベント概要
サイボウズフロントエンドマンスリー は、サイボウズ社内で行っているフロントエンド情報共有会「フロントエンドウィークリー」の公開版です。
その月に気になったフロントエンドの情報を、サイボウズのフロントエンドエキスパートチームのメンバーが共有していきます。
このイベントのハッシュタグは #サイボウズフロントエンドマンスリー です。
※フロントエンドウィークリーとは
毎週火曜の 17:00 〜 18:00
で社内向けに行っているフロントエンドの気になる記事を紹介する会です。2016年3月15日から行われています。
ハッシュタグ
#サイボウズフロントエンドウィークリー
で実況しています。
zennのpublicationにてウィークリーのまとめも投稿していますので、ぜひこちらもご覧ください。 https://zenn.dev/p/cybozu_frontend
開催日
2020年12月22日
イベントページ
https://cybozu.connpass.com/event/199283/
配信URL
https://www.youtube.com/watch?v=kZfz1PYyg4g
メンバー
コンテンツ
1月〜3月のまとめ
リリースなど
- Chromium 版 Microsoft Edge、明日 1 月 15 日に予定通り正式公開の見通し - Publickey
- New year, new browser - The new Microsoft Edge is out of preview and now available for download | Windows Experience Blog
- Playwright
- Introducing Yarn 2 ! 🧶🌟 - DEV
- What’s coming in ESLint v7.0.0 - ESLint - Pluggable JavaScript linter
- 細かい挙動の breaking changes 多かった
- Prettier 2.0 “2020” · Prettier
- Prettier 2.0 の主要な変更 - Qiita
- 今は慣れましたが、「function 後のスペース」「アロー関数の引数が一つのときにカッコが付く」など印象に残っています
- Rome
- 当時は github.com/facebookexperimental で公開
- Angular 9: What’s New?
- Ivy compiler & runtime がデフォルトで有効に
- esbuild
- リリース時期が不明だけど社内では 2 月に話題に
- npm is joining GitHub - The GitHub Blog
- npm の持続可能性の問題が解決!
- What happens when the maintainer of a JS library downloaded 26m times a week goes to prison for killing someone with a motorbike? Core-js just found out • The Register
- core-js 作者が逮捕された
印象に残っている記事など
社内では 1/28 に新春増刊号をやっており、2019 年のまとめ系記事を紹介していました。
- Alex Russell - The Mobile Web: MIA - YouTube
- Web はデスクトップでは大成功したが、モバイルでは大敗しており、既に取り返しのつかないところまで来ているぞ!モバイル Web のユーザーが上昇のトレンドにあるインド等の市場に勝機がありそうだが、ロースペックの端末が主流なので、デスクトップで開発しハイエンド端末で確認している我々(Web Developer)は土俵にすら立ててない!モバイルファーストで開発し、Budget を設定し、JS の排出を減らしてまず土俵に立ちましょう!という話
- pirosikick: この時期は動画いっぱい観ていたな〜
- CNAME を利用したトラッキング方式のご提供 | AD EBiS サポートサイト, Fingerprint 解説サイト
- この時期に 3rd party cookie とかプライバシーの話が盛り上がってた記憶
- Adding notification permission data to the Chrome User Experience Report
- 通知許可ダイアログの許可/拒否率のデータが Chrome の UX レポートに追加された
- CrUX のレポートが BigQuery のデータとして提供されていることも初めて知りました
4月〜6月のまとめ
リリースなど
- vuejs/vue-next
- Vue の v3 beta 版がリリース
- Babel 7.9.0 Released
- A new JSX transform
- Blitz is a Rails-like framework for monolithic, full-stack React apps — built on Next.js
- Next.js をラップした Ruby on Rails 風のフレームワーク
- Deno 1.0
- Node.js の original author である ry が開発をはじめた JS/TS のランタイム環境。ブラウザ互換であることやネットワークやファイルなどの I/O を opt-in 形式で有効化するセキュアな仕組みが特徴
- Recoil
- React Europe 2020 で発表された React の状態管理ライブラリ(React Europe 動画)
- Next.js 9.4
- ISR のベータ版が入りました。
ブラウザ関連
- Temporarily rolling back SameSite Cookie Changes
- SameSite=Lax のデフォルト化がコロナウィルスの影響を配慮して夏まで延期された
- 7/14 リリースの Chrome 84 で復活。 Chromium Blog: Resuming SameSite Cookie Changes in July
- We added some accessibility information to the element pop-over. Check it out in Chrome DevTools on the Canary channel!
- Chrome の DevTools で要素を選択したときに表示されるポップアップにアクセシビリティの情報が表示されるようになった
- このあたりからアクセシビリティ系の DevTools の機能が増えていった気がする
- Tracking Prevention in WebKit | WebKit
- webkit のトラッキング防止に関する説明がされている。今後もトラッキングに関しては厳しくしていく旨が記載されている
印象に残っている記事など
- Vercel 日本語訳
- ZEIT が Vercel に社名を変更し、資金調達したことが紹介されている
- JavaScript Primer の書籍版が 4 月 27 日に発売予定です! | Web Scratch
- Google Developers Japan: Web Vitals の概要: サイトの健全性を示す重要指標
- Core Web Vitals について概要が説明されている
- Lighthouse Changes How Performance Score is Calculated - Calibre
- Sign-in form best practices
- ログインフォームに関するベストプラクティスをセキュリティ、アクセシビリティ、使いやすさの観点から解説されている
- Flexbox Cheat Site
- Flexbox で実現したいスタイルの書き方がわかるチートシート
イベント
- ReactEurope
- web.dev LIVE
- React Summit – The Biggest React Conference Online
- OpenJS World | Linux Foundation Events
ReactEurope や web.dev LIVE といった大きいイベントがオンライン開催されました。イベントで発表された話題に関する記事も注目を集めました。
OSS のリリースでは Blitz や Recoil といった React 関連の新しいライブラリが目立ちました。また、昨年以前から開発されていた Vue v3 や Deno のベータ版や v1.0 がリリースされて注目が集まりました。
ブラウザ関連では Chrome の SameSite=Lax の話題や Safari の Tracking Prevention といったセキュリティやプライバシー周りの話題がありました。
1 年を通して話題になることが多かった Core Web Vitals に関しては、Lighthouse の指標に入り重要な指標であることが強調されました。
7月〜9月のまとめ
リリースなど
ブラウザ関連
- Changes to SameSite Cookie Behavior - A Call to Action for Web Developers - Mozilla Hacks - the Web developer blog
- A new default Referrer-Policy for Chrome: strict-origin-when-cross-origin
- Chromium Blog: Protecting Google Chrome users from insecure forms
- 「Internet Explore 11(IE 11)」で「Microsoft 365」を使えるのは 2021 年 8 月 17 日まで - ITmedia NEWS
印象に残っている記事など
- Update for Customers Using PhoneGap and PhoneGap Build | by Adobe I/O | PhoneGap
- Workers Durable Objects Beta: A New Approach to Stateful Serverless
- Building greater accessibility into Facebook.com - Facebook Engineering
- MSEdgeExplainers/explainer.md at main · MicrosoftEdge/MSEdgeExplainers
7 月から 9 月の間には注目度の高いフレームワークやライブラリなどのリリースがありました。
Vue v3 は 2016 年リリースの v2 から 4 年ぶりのメジャーバージョンアップです。Composition API や TypeScript への対応強化など色々な変更が入りました。
React の v17 は新機能の追加がないリリースでした。このリリースは React のアップグレードを段階的に行えるようにすることにフォーカスしたものになっています。
Prettier2.1 はフロントエンドエキスパートチームに所属している@__sosukesuzukiがリリース作業やリリースブログの準備などを行いました。
ブラウザ関連では、セキュリティ関連の記事が目立ちました。
またセキュリティ関連では、https から http に送る form に対して警告が出るようになる変更がアナウンスされたり、Firefox では Cookie が SameSite=Lax デフォルトになりました。その他では、Microsotft が Office 365 での Internet Explorer 11 サポートを 2021 年 8 月 17 日で終了するという発表を行いました。
注目記事としては、Adobe が PhoneGap の開発を終了し Cordova への投資を止めることを発表した記事や、新しい Facebook.com での accessibility への取り組みについてのがありました。
他には、Cloudflare が発表した Cloudflare Workers で、データの永続化と worker 間通信が可能になる仕組みである Durable Objects のベータリリースについてや、select などの要素をカスタマイズ出来るようにするためのプロポーザルについても盛り上がりました。
10月〜12月のまとめ
OSS 関連
- Webpack 5 release (2020-10-10) | webpack
- LibSass is Deprecated
- Node v15.0.0 (Current) | Node.js
- Presenting v7.0.0 of the npm CLI
- Next.js Conf 2020
- Release v5.0.0 · typicode/husky
印象に残っている記事など
- Sunsetting FxSiteCompat
- TypeScript: Prefer Interfaces — @ncjamieson
- 11 月の TC39 MTG
- State of CSS 2020
- The State of the Octoverse
- The 2020 Web Almanac
OSS は webpack,node,npm,husky,Nextjs のメジャーバージョンリリースがありました。 LibSass の Deprecated や husky のライセンス変更などフロントエンドの OSS にとっては忙しい時期でした。
Firefox Site Compatibility Working Group が解散したことで「FireFox サイト互換性情報」のサイトが終了になりました。
2020 年も終わりに近づき、State of CSS 2020,The State of the Octoverse,The 2020 Web Almanac など 2020 年を振り返る記事も多くなりました。もっと詳細に知りたい方はこういった記事で 2020 年を締め括ると良いかもしれませんね。
来年も Cybozu Frontend Monthly とサイボウズフロントエンドエキスパートチームをよろしくおねがいします。