Fork me on GitHub

JavaScriptの最新情報を紹介する週刊ブログ

2018-07-31のJS: TypeScript 3.0、Chrome 68、Vueの内部技術

2018年07月31日 Edit on GitHub 編集履歴を見る

JSer.info #394 - TypeScript 3.0が正式にリリースされました。

monorepoなどで複数パッケージ間のビルド関係などを扱うProject referencesの追加、Generic rest parametersのサポート、Tuple型の改善、unknown型の追加、ReactのdefaultPropsの型のサポートなどが行われています。

次の記事でも具体的な動作について説明されているので合わせてみてみるといいかもしれません。

Chrome 68がリリースされました。

Chrome 68からhttp://なサイトの場合にアドレスバーには"Not Secure"（保護されていない通信）の表示がでるようになりました。
逆にhttps://のアドレスバーの表示が控えめになっていくなど、徐々にHTTPSがデフォルトとなるような表示に変化していく予定です。

また、Chrome 68ではPage Lifecycle APIのサポート、customElements.upgrade()のサポート、Service WorkerにおけるHTTPキャッシュのデフォルトの挙動を変更などが行われています。

Page Lifecycle API、fetch APIのkeepaliveオプション、navigator.sendBeaconなどが揃ってきたこともあり、将来的にChromeではページを閉じる際に同期的なXHR（ログ送信などに利用されていた）を使えなくする予定があります。

Vue技术内幕というサイトではVue.js本体のコード解説をしています。
中国語で書かれていてまだ書き途中の部分もありますが、ディレクトリ構造、オプションや初期化処理、リアクティブシステムの実装、テンプレートのパースとコンパイルの仕組み、Virtual DOMについてなどに書かれています。

コード解説なのでコードの動きを中心に解説されていて、特にテンプレートの処理周りの解説はかなり細かい印象です。
Vue.jsのコード自体に興味がある人は読んでみると面白いかもしれません。

JSer.infoをサポートするには

JSer.info Sponsors

JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。

ヘッドライン

Prettier 1.14: YAML Support · Prettier

prettier.io/blog/2018/07/29/1.14.0.html

JavaScript Tools ReleaseNote

Prettier 1.14リリース。
YAMLのサポート、Front matterをサポート、requirePragmaとrequirePragmaを各言語でサポート、CJK処理を改善してパフォーマンスの改善など

Angular v6.1 Now Available — TypeScript 2.9, Scroll Positioning, and more

blog.angular.io/angular-v6-1-now-available-typescript-2-9-scroll-positioning-and-more-9f1c03007bb6

Angular ReleaseNote

Angular v6.1リリース。
ルーターのscrollPositionRestorationオプションでスクロール位置の保存に対応、TypeScript 2.9サポートなど

Announcing the Ionic 4 Beta | The Official Ionic Blog

blog.ionicframework.com/announcing-ionic-4-beta/

JavaScript library ReleaseNote

クロスプラットフォームアプリ開発フレームワークのIonic 4 Betaリリース。

Announcing TypeScript 3.0 | TypeScript

blogs.msdn.microsoft.com/typescript/2018/07/30/announcing-typescript-3-0/

TypeScript ReleaseNote

TypeScript 3.0リリース。
Project references、可変長引数にGenerics型パラメータを適応できるように、Tuple型の改善、unknown型の追加、ReactのdefaultPropsの型のサポートなど

アーティクル

New in Chrome 68  |  Web  |  Google Developers

developers.google.com/web/updates/2018/07/nic68

Chrome ReleaseNote

Chrome 68リリース。
HTTPなサイトにはNot Secureの表示がでるように。
Page Lifecycle APIのサポート、customElements.upgrade()のサポート、Service WorkerにおけるHTTPキャッシュのデフォルトの挙動を変更など

Page Lifecycle API  |  Web  |  Google Developers

developers.google.com/web/updates/2018/07/page-lifecycle-api

JavaScript Chrome article WebPlatformAPI

Page Lifecycle APIについての解説。
ウェブページにライフサイクルの概念を導入する。visibilitychangeなど既存のイベントや新しく追加されたfreeze、resumeなどイベントの紹介、ライフサイクルにおけるStateについてを解説している。

A one year PWA retrospective – Pinterest Engineering – Medium

medium.com/@Pinterest_Engineering/a-one-year-pwa-retrospective-f4a2f4129e05

PWA article

PinterestのモバイルサイトのPWA化についてのタイムライン。
ログインユーザーからログアウトユーザーへの適応、GestaltとUIレイアウト、bundleサイズについてなど

time-travel.md

gist.github.com/jasonLaster/1e220992c294a571dd9b59abd084ccf2

debug firefox article

FirefoxのNightlyに入ったWebReplayの使い方や機能について。 一連の操作や状態を保存してブレークポイントからの状態をもどしていったり、リプレイできるデバッグ機能。バグの再現とデバッグなどに利用できる。

Redux vs. The React Context API

daveceddia.com/context-api-vs-redux/

React article

React Contextの使い方や動作についての解説。Reduxでのステート管理との違いやContextはReduxを置き換えるものではない点についてなど

Removing Babel's Stage Presets · Babel

babeljs.io/blog/2018/07/27/removing-babels-stage-presets

babel article

Babel 7ではbabel-preset-stage-0のようなStage Presetを公開しないことについて。
Stage Presetを削除することにした背景やProposalへのフィードバックについて。

Logging Activity With The Web Beacon API — Smashing Magazine

www.smashingmagazine.com/2018/07/logging-activity-web-beacon-api/

JavaScript article

navigator.sendBeaconを使ってページを離脱する前にログを送信する方法について。
またGDPRやDNTの対応について

サイト、サービス、ドキュメント

thedaviddias/Front-End-Performance-Checklist: 🎮 The only Front-End Performance Checklist that runs faster than the others

github.com/thedaviddias/Front-End-Performance-Checklist

browser performance document

フロントエンドのパフォーマンスチェックリスト

perf-tools/performance at master · artifact-project/perf-tools

github.com/artifact-project/perf-tools/tree/master/performance

JavaScript performance library

User Timing APIのpolyfillライブラリ

ソフトウェア、ツール、ライブラリ関係

cozmo/jsQR: A pure javascript QR code reading library. This library takes in raw images and will locate, extract and parse any QR code found within.

github.com/cozmo/jsQR

JavaScript library

依存がないQRコードリーダライブラリ

書籍関係

Vue技术内幕

hcysun.me/vue-design/

Vue JavaScript ebook

Vue.jsのソースコードを解説する電子書籍。
ディレクトリ構造、オプションや初期化処理、リアクティブシステムの実装、テンプレートのパースとジェネレートの仕組み、Virtual DOMについてなど

この記事へ修正リクエストをする
JSer.info Slackに参加する