# 「2020年の振り返りイチオシ情報」を語るフロントエンドTechCafe

## イベントページ

https://rakus.connpass.com/event/201005/

## 印象に残った・興味深いトピックス

- リリース系
- Vue3リリース
- リリスースノート
- https://github.com/vuejs/vue-next/releases/tag/v3.0.0
- マイグレーションガイド
- https://v3.vuejs.org/guide/migration/introduction.html
- RFC
- https://github.com/vuejs/rfcs/tree/master/active-rfcs
- 過去イベント
- https://rakus.connpass.com/event/191743/
- 当日は以下のような内容が話題に
- CompositionAPIは嬉しい
- プロダクトが大規模化する中でコードの分割をするも、2系のmixinでは難点が多い
- mixinの中のmixinなど、最終的にどういう状態になっているのか把握するのが困難。処理を追えない。
- 名前の重複
- mixinがカオス化するので、ルールでmixinを使える箇所を局所化したりしている
- なんなら使わないようにしている場合も
- 一方で、初学者には従来の書き方の方がわかりやすいかも（computedとか書くところが決まっているので）
- UnitTestも書きやすくなりそう
- Vue3への移行は？
- 後方互換性の無い変更や、周辺ライブラリが未対応だったりするので見送っている

- Chromium edge のリリース
- 2020年1月に公開
- https://www.publickey1.jp/blog/20/chromiummicrosoft_edge115.html
- 新edgeが出た背景（っぽいことがなんとなくわかる記事）
- https://www.watch.impress.co.jp/docs/series/nishida/1230020.html
- 旧edgeとの違いはレンダリングエンジン
- CSSの効き方が変わる
- https://ics.media/entry/200604/
- https://koneta.nifty.com/koneta_detail/1141008007875_1.htm
- 旧edgeは2021年3月にサポート終了
- https://forest.watch.impress.co.jp/docs/news/1305026.html#:~:text=Microsoft%20Edge%20%E3%83%AC%E3%82%AC%E3%82%B7%E3%80%8D%E3%81%AF%E3%81%99%E3%81%A7%E3%81%AB,%E3%81%8C%E3%82%A2%E3%83%8A%E3%82%A6%E3%83%B3%E3%82%B9%E3%81%95%E3%82%8C%E3%81%A6%E3%81%84%E3%82%8B%E3%80%82&text=%E3%80%8CMicrosoft%20Edge%20%E3%83%AC%E3%82%AC%E3%82%B7%E3%80%8D%E3%81%8B%E3%82%89%E6%96%B0,%E2%80%9D%E3%83%AA%E3%83%AA%E3%83%BC%E3%82%B9%EF%BC%89%E3%81%A7%E8%A1%8C%E3%82%8F%E3%82%8C%E3%82%8B%E3%80%82
- 4月のアップデートで完全に置き換え
- 余談
- IEはまだサポート終了しない（edgeのIEモードも同様）
- https://www.atmarkit.co.jp/ait/articles/1503/11/news134.html
- IEがサポート終了になるという勘違いも
- Microsoft 365 アプリのIEでのサポート終了
- https://blogs.windows.com/japan/2020/08/18/microsoft-365-apps-say-farewell-to-internet-explorer-11/
- https://forest.watch.impress.co.jp/docs/serial/nyanwin/1273722.html
- マルチプラットフォーム
- https://www.sbbit.jp/article/cont1/50896

- webpack5リリース
- 2020年10月公開
- https://webpack.js.org/blog/2020-10-10-webpack-5-release/
- webpack（=モジュールバンドラー）とは
- https://note.com/billion_dollars/n/n596fecfdeb2e
- https://qiita.com/koedamon/items/3e64612d22f3473f36a4
- 他のモジュールバンドラー
- https://zenn.dev/yuri/books/4391b9280f823061932c/viewer/0cb78e029300b8b0ed21
- 4系から5系にアップデートした方の作業覚書
- https://qiita.com/irico/items/66615f07426e5d885555
- webpack5変更点
- https://blog.hiroppy.me/entry/webpack5
- 目玉
- https://blog.hiroppy.me/entry/webpack-persistent-caching

- TypeScript4.0 のリリース
- https://devblogs.microsoft.com/typescript/announcing-typescript-4-0/
- 追加機能
- https://qiita.com/ooooouchi/items/cb7feac572f4f505bcbd
- 機能よりもVSCodeの構文ハイライトの高速化が気になった

- Vuex4リリース
- https://github.com/vuejs/vuex/releases/tag/v4.0.0
- Vue3で使えるようリリース
- 基本的な使い方は前バージョンと変わらない
- 初期化は大きく変わっている
-
- その他のエコシステム
- https://github.com/vuejs/vue-next#supporting-libraries
- プロダクトで動作するライブラリに関してはほぼほぼVue3対応済み
- 逆にビルドやテストなど開発ツールなどはベータのものもちらほら
- UIライブラリなど
- Quasar Frameworkがベータ版を公開したくらい
- https://github.com/quasarframework/quasar/releases/tag/%40quasar-v2.0.0-beta.3
- 主なエコシステム周りは整備されてきたものの、外部のUIライブラリを利用しているプロジェクトについてはもう少し様子見が必要そう
- とはいえ移行のメリットは多くあるためキャッチアップしておいて損はない

- Babel 7.9.0リリース
- https://babeljs.io/blog/2020/03/16/7.9.0
- 8.0に向けた準備。JSX変換の最適化。バンドルサイズの縮小
- https://www.infoq.com/jp/news/2020/09/babel-79-bundles-typescript/
- Babel（=jsトランスパイラー）とは
- 最新の書き方をしたJSやJSXを、ブラウザで解釈できるように変換
- 8.0の予定
- https://github.com/babel/babel/issues/10746
- https://github.com/babel/babel/milestone/16

- ツール・ライブラリ
- Vite
- ノーバンドルなビルドツール
- Vue CLIと比べて開発は楽になりそう
- ビルドが遅いという話はメンバーからよく話に上がる
- 本番用のビルドと動作が変わらないかが心配
- 公式
- https://github.com/vitejs/vite
- Vue CLIとの比較
- https://qiita.com/jay-es/items/b3bc9c1dc077bc3f7f35
- Vue CLIからの移行
- https://zenn.dev/konnyaku256/scraps/6e8f78642cde2c

- core-jsのメンテナンス再開
- https://qiita.com/yumetodo/items/eaf3b97aeae3d8c4a07e
- core-jsとは
- babelのpolyfill内部で使われているモジュール集
- ブラウザによっては実装されていないPromiseやArray系の関数を使えるようにするもの
- メンテを取り巻く状況(〜2020/1)
- 5年間1人のメンテナによってメンテされ続けていた
- babelもリソースを割く余裕は無い
- 寄付も設定されているが、特に多いわけでは無かった(2019年時点)
- https://github.com/zloirock/core-js/issues/548#issuecomment-494112872
- 事故(2020/1〜2020/10)
- メンテナが交通事故を起こしてしまい収監されることに
- その間開発が止まっていた
- 2020年1月〜2020年11月あたりまで
- その後(2020/10〜)
- 2020/10にメンテナが帰ってきて開発再開
- https://github.com/zloirock/core-js/issues/767#issuecomment-719506555
- 所感
- 多くの人が利用していると思うが開発継続には人員や収益などのリソースが必要
- 開発が終了するリスクを考えると、自身も何かしらの形で利用しているOSSへ貢献していきたいと思わされた

- StateOfJS2020（10000人のエンジニアによる投票結果）
- https://2020.stateofjs.com/ja-JP/technologies/
- それぞれの分野のランキングの推移は…？
- 海外の記事でよく参照されているSvelteについてピックアップして紹介
- https://svelte.dev/
- 「Svelteはフレームワークではなく、コンパイラ」
- 一度コンパイルのフェーズを挟むことによって、次の３つの特徴を実現している
- 記述量が少ない
- https://svelte.dev/blog/write-less-code
- 仮想DOMを使わない
- https://svelte.dev/blog/virtual-dom-is-pure-overhead
- 仮想DOMは動的で複雑な描画のパフォーマンスを上げるための仕組みではあるが、最適解ではない
- Svelteはコンパイル時に最適化することで実現している
- 仮想DOMのオーバーヘッドが無い分、原理的にSvelteの方が高速になる
- リアクティブな振る舞いをシンプルにかける
- https://svelte.dev/blog/svelte-3-rethinking-reactivity
- これ以上シンプルには書けないくらいシンプル

- Denoの紹介やNodeとの違いなど（フロントエンドではないがJSつながりで
- Deno
- https://deno.land/manual
- Node.jsの作者Ryan Dahlが新たに作ったJavaScriptの実行環境
- Nodeが開発された2009年からJavaScriptは進化していること、Node自身がいくつかの問題を抱えていたことから新しく開発
- Deno開発者Bert BelderのDeno紹介セッション
https://www.youtube.com/watch?v=puXyo1jGQys
- 特徴
- Nodeの問題点
- https://youtu.be/puXyo1jGQys?t=294
- Denoの特徴
- https://youtu.be/puXyo1jGQys?t=436
- 特徴のまとめ記事
- https://blog.logrocket.com/deno-1-0-what-you-need-to-know/
- Node.jsに関する10の反省点
- https://www.youtube.com/watch?v=M3BM9TB-8yA

- ES2020とES2021
- https://2ality.com/2019/12/ecmascript-2020.html
- https://2ality.com/2020/09/ecmascript-2021.html
- https://www.strictmode.io/articles/whats-new-es2020/

- Moment.js の非推奨化
- https://momentjs.com/docs/
- day.jsに置きかえようという話は以前からしていた
- bundleファイルのサイズが大きくなる等の問題があった
- https://qiita.com/jimbo/items/95da1c223ad25a33ed16

- flashサポートが終了
- https://www.adobe.com/jp/products/flashplayer/end-of-life.html

- 考察系

- ReactとVueとSvelteで同じアプリを開発してみて比較したよっていう比較記事
- https://sunilsandhu.com/posts/i-created-the-exact-same-app-in-react-and-vue-2020-edition
- https://medium.com/javascript-in-plain-english/i-created-the-exact-same-app-in-react-and-svelte-here-are-the-differences-c0bd2cc9b3f8

- Reactの型チェックをFlowからTypeScriptに15日間で移行したプロジェクトの話
- https://ja.reactjs.org/docs/static-type-checking.html
- https://react.christmas/2020/2

- TypeScriptを大規模なシステムに導入する際の10のポイント
- https://www.techatbloomberg.com/blog/10-insights-adopting-typescript-at-scale/

- 笑える記事（JavaScriptの妙な挙動集）
- https://github.com/denysdovhan/wtfjs#readme