# ShowNote：フロントエンドのニュースや記事を紹介して語り合う会@TechCafe（Vue,TS成分多め）

イベントページ：https://rakus.connpass.com/event/182376/

# 本日ご紹介する記事・ニュース一覧

## 導入トピック

- **[2020年の11の必見のフロントエンドトレンド](https://qiita.com/baby-degu/items/5a9f8e44a5aa205faf48)** F
- 原文は[こちら](https://blog.bitsrc.io/11-must-know-frontend-trends-for-2020-cea8a629b08)
- 特に下記のポイントが注目ポイント
- 4. The TypeScript take over
- Vue3で素のVueでTypeScript使えるようになるみたいですが、2系でVue+TypeScriptやるうえで困った事とかあります？
- TypeScript使ってみてどうですか？
- 5. Web components
- まさにこの絵の通り。
- Vueのコンポーネントでやりたいことを標準APIでできるようにしたもの
- [WebComponentsとVue+WebComponentsについてとてもわかりやすいスライド](https://speakerdeck.com/takanorip/vue-fes-japan)
- 今後どうなっていくんだろう？
- 7. State management: Bye Bye Redux? (Not….)
- Vuexは便利だが、ある種のグローバル変数であるとして避けるべしという意見もあるが…現場では実際どう？
- Vuex使わないスタイルってどう？
- 他のトレンドも共通して、フロントエンドも責務の分離、凝集性・疎結合になっていく？

## Vue.js関連情報

- **[Vue3 RCリリース！](https://github.com/vuejs/rfcs/issues/189)** F
- 新機能
- [Composition API](https://v3.vuejs.org/guide/composition-api-introduction.html)
- どう変わるのか、は公式の↑が分かりやすい。2系の書き方から1ステップずつ丁寧に説明されている
- [提案の背景はRFC見るとよくわかる](https://vue-composition-api-rfc.netlify.app/#summary)
- ロジックの再利用とコードの編成
- 型推論（TypeScript対応）
- [vue2系用のプラグイン](https://github.com/vuejs/composition-api)
- [Teleport](https://v3.vuejs.org/guide/teleport.html#using-with-vue-components)
- [Fragments](https://v3.vuejs.org/guide/migration/fragments.html)
- [Emits Component Option](https://v3.vuejs.org/guide/component-custom-events.html)
- emitするイベントの明示化
- RFCの方が差分わかりやすい
- https://github.com/niko278/vue-rfcs/blob/events-option/active-rfcs/0000-emits-option.md

- **[なぜ、Vue Composition APIを使うのか、理解する【メリット/デメリットまとめ】](https://qiita.com/karamage/items/7721c8cac149d60d4c4a)** S
- vue3の主要な機能になるであろうComposition APIの紹介。大規模開発向けな印象。手当たり次第使うと痛い目を見そう
- コンポ―ネント間でのロジックの断片化などの課題感って、実際現場でどうですか？

## TypeScript関連情報

- **[TypeScript 4.0で導入されるVariadic Tuple Typesをさっそく使いこなす](https://qiita.com/uhyo/items/7e31bbd93a80ce9cec84)** S
- TypeScript4.0で導入される新機能
- [Announcing TypeScript 4.0 Beta](https://devblogs.microsoft.com/typescript/announcing-typescript-4-0-beta/)
- Variadic Tuple Types
- Labeled Tuple Elements
- Class Property Inference from Constructors
- Short-Circuiting Assignment Operators
- unknown on catch Clause Bindings

- **[TypeScript誕生の背景 JavaScriptの誕生からTypeScriptが登場するまでの簡単な歴史](https://book.yyts.org/overview/before-typescript)** S

- **[TypeScriptのenumを使わないほうがいい理由を、Tree-shakingの観点で紹介します](https://engineering.linecorp.com/ja/blog/typescript-enum-tree-shaking/)** S
- Enumについて現場ではどのように評価してます？

## ES関連情報

- **[ES2020リリース](https://github.com/tc39/ecma262/releases/tag/es2020)** F
- 下記が入った仕様一覧。
- [Finished Proposals](https://github.com/tc39/proposals/blob/master/finished-proposals.md)
- [動的インポート](https://github.com/tc39/proposal-dynamic-import)
- 必要なモジュールを必要な時に
- [Promise.allSettled](https://github.com/tc39/proposal-promise-allSettled)
- 一連の非同期処理の成否によらず、かならず全部走りきる
- [Optional Chaining](https://github.com/tc39/proposal-optional-chaining)
- オブジェクトを``.``チェインで辿る時に、いちいちnull/undefinedチェックしなくてよくなる
- [Null合体演算子](https://github.com/tc39/proposal-nullish-coalescing)
- 代入時に「nullだったらデフォルト値」的な記述がシンプルに書ける
- [ESの仕様策定サイクル](https://jsprimer.net/basic/ecmascript/)
- RFCを読む意義とは？

- **[JavaScript: Latest Stage-4 features](https://dev.to/hemanth/stage-4-features-5a26)** F
- 現在Stage4まで進んでいる提案リスト。
- [Promise.any](https://github.com/tc39/proposal-promise-any)
- 一連の非同期処理のうち、どれかが成功するまで待つ
- [Promise.xxxまわりを整理してくれている記事](https://blog.jxck.io/entries/2019-08-20/promise-allsettled-any.html)

- [WeakRefs & FinalizationRegistry](https://github.com/tc39/proposal-weakrefs)
- GCが走った時に誰かから参照されていてもメモリを解放することができるようにする仕組み。クロージャとか使っていると発生しがちなメモリリーク回避することができる。
- [クロージャとメモリリーク](https://qiita.com/102Design/items/be66ae7ba7d160d7e419)

- **[Dates and Times in JavaScript](https://blogs.igalia.com/compilers/2020/06/23/dates-and-times-in-javascript/)** F
- ESの新仕様提案で現在Stage2。日付と時刻を操作するための標準API``Temporal``についての提案。``Date``はタイムゾーンの指定ができないので使いづらいシーンがあることに対する提案。
- 提案自体は2019年ごろ？で次のステージに進んでいない。Temporal自体がどうこうというより、Dateの問題を再認識したので紹介。
- [Temporal](https://tc39.es/proposal-temporal/docs/cookbook.html)
- [TemporalとDateについて分かりやすく説明されている資料](https://speakerdeck.com/arayaryoma/what-about-temporal-in-javascript)

## サーバーサイド関連情報

- **[Deno対Nodeのパフォーマンスについて](https://qiita.com/yoshixmk/items/edbf061840c772c1ec48)** S
- Nodeの後継候補を期待されているDenoですが、現時点でのパフォーマンスはまだNodeの方が良い。今後のDenoの発展に期待。
- [Denoについて](https://qiita.com/so99ynoodles/items/c3ba2a528052827e3b3c)
- Deno自体は魅力的だがプロダクションで使える日が来るのは…？

## JavaScript・フロントエンド全般

- [JavaScriptライブラリを読むときのコツ](https://blog.ojisan.io/how-to-read-js) S

- [Auth TokenをlocalStorageに入れようが、cookieに入れようがどっちもXSS危険性には無防備（同ドメイン内なら ...）](https://qiita.com/github0013@github/items/e57c452de28f3918bf05) F
- どこまでいってもダメな時はダメなんだけど、総合的にはcookieの方が良いと思う。[徳丸さんも使うなと言っている。](https://twitter.com/ockeghem/status/1181942330258935810?s=20)
- そもそもlocalstorage使いたい時ってどんなとき？

- [ノンフレームワークなJavaScriptでもDOMとうまく付き合う方法](https://qiita.com/kznr_luk/items/6a9ffa68b3893928ea63) S
- フレームワークを使っているとあまり気にしないJSでのDOM操作のお話。できるだけDOMとJSを疎結合にしましょう

- [今すぐ使いたいスプレッド構文、"Three-dots" Tip 集](https://qiita.com/girlie_mac/items/600b4fbce1374ed8fbcc) S
- ES6 から使えるスプレッド構文のtips。可読性の問題で積極利用には賛否両論ありそう
- [[JavaScriptデバッグテクニック]メソッド実行中の変数の中とか見たくない？](https://qiita.com/fruitriin/items/d0a1cd943233cd22ef30) S
- デバッグTips（小話）。devツール単体でもデバッグはできるが知っていると効率があがりそう

- [「React Nativeで自社サービスのiOS/Androidアプリをリプレイスした話」 から2年経った今何を思うのか](https://speakerdeck.com/pi_chan/techplay-mobile-cross-platform-lt-2020-07-15) F
- ReactNativeの使いどころについての見解がまとめられている

- [なぜ私たちはCSSフレームワークを使わないのか](https://www.infoq.com/jp/news/2020/07/css-variables-design-systems/) F
- CSS変数を使えばCSSフレームワークが必要無くなる、という主張