Fork me on GitHub

2019-06-17のJS: react-redux 7.1.0(Hooksサポート)、Pika CDN、State of CSS 2019

Edit on GitHub 編集履歴を見る

JSer.info #440 - ReactのRedux向けバインディングのreact-redux 7.1.0がリリースされました。

7.1.0ではReact Hooksに対応しています。
React Hooksで扱えるuseSelectorというAPIが追加されています。

import React from 'react'
import { useSelector } from 'react-redux'

export const CounterComponent = () => {
  const counter = useSelector(state => state.counter)
  return <div>{counter}</div>
}

詳しくは次のドキュメントで解説されています。


Pika CDNというnpmに公開されているES Module形式のパッケージをURLから読み込めるウェブサービスが公開されています。

Pika CDNで読み込めるのはpackage.jsonmoduleフィールドに対応したパッケージのみとなっています。
パッケージのmoduleフィールドへの対応は、このサービス自身が出している@pika/webpkg.moduleなどを参照すると良さそうです。

また、読み込むパッケージはブラウザのUserAgentを元に最適化されたものが配布されるようになっているようです。


The State of CSS 2019のアンケート結果が公開されています。

などについてのアンケート結果が公開されています。
主にアメリカ、イギリス、ドイツ、フランス、カナダあたりの回答で半分を占めていますが、CSSに興味がある人は見てみると面白いかもしれません。


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

JSer.info Sponsors

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


ヘッドライン


Release v2.5.0 · fastify/fastify

github.com/fastify/fastify/releases/tag/v2.5.0

node.js server library

Node.jsウェブフレームワークのfastify 2.5.0リリース。
レスポンスタイムを取得できるReply#getResponseTimeの追加など


Release v7.1.0 · reduxjs/react-redux

github.com/reduxjs/react-redux/releases/tag/v7.1.0

React redux library ReleaseNote

React-Redux 7.1.0リリース。
React Hooksに正式対応、useSelectorの第2引数にdepsオプションの追加など


Release v0.101.0 · facebook/flow

github.com/facebook/flow/releases/tag/v0.101.0

JavaScript flowtype ReleaseNote

FlowType v0.101.0リリース。
inexact object syntaxである...のlintに対応、関数の型パラメータのデフォルト型を指定可能になるなど


Release Notes for Safari Technology Preview 85 | WebKit

webkit.org/blog/9281/release-notes-for-safari-technology-preview-85/

safari ReleaseNote

Safari Technology Preview 85リリース。
Pointer Eventsの対応改善、Promise.allSettledの実装、ES PropoaslのNumeric Separatorを実装など


New in Chrome 75  |  Web  |  Google Developers

developers.google.com/web/updates/2019/06/nic75

Chrome ReleaseNote

Chrome 75リリース。
低遅延Canvasを利用できるdesynchronizedオプションのサポート、Web Share APIがファイルをサポート、ES ProposalのNumeric separatorのサポート。
また、playsInlineのサポート、HTTPヘッダのstale-while-revalidateレスポンスディレティブのサポート、CSPでscript-src-attrディレクティブなどを追加など


TypeScript Playground | The unofficial playground for advanced TypeScript users

playground.type-puzzle.org/

TypeScript Tools

@types/*モジュールの型も解決できるTypeScript Playground


アーティクル


How to Use the Web Share API | CSS-Tricks

css-tricks.com/how-to-use-the-web-share-api/

WebPlatformAPI JavaScript article

Web Share APIの使い方についての記事。サポートブラウザやFeature Detect、APIの使い方について。
またサポートしていない場合のFallbackについて


Unpacking hoisting

2ality.com/2019/05/unpacking-hoisting.html

JavaScript article

varfunctionなどのHoistingの動作を別の角度から解説した記事。
ES2015からはスコープのTopに移動するという説明になっているという話。


スライド、動画関係


The modern PWA Cheat Sheet by Maximiliano Firtman | JSConf EU 2019 - YouTube

www.youtube.com/watch?v=cybhV88KLfI

PWA video

PWAについての発表動画。
ライフサイクル、Web API、iOS、Web APKsやアプリとしての配布についてなど


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


Pika CDN - Pika

www.pika.dev/cdn

JavaScript module webservice

ES Moduleに対応したnpmモジュールCDNサービス。
UA別に最適化したビルド結果のパッケージを返すことができる。


The State of CSS 2019

2019.stateofcss.com/

CSS アンケート

State of CSS 2019のアンケート結果。
FlexboxやGridなどのレイアウト、単位、Pre & Post Processors、エディタやツールなどの利用についてのアンケート結果


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


tradingview/lightweight-charts: Financial lightweight charts built with HTML5 canvas

github.com/tradingview/lightweight-charts

グラフ library

Financial Chartライブラリ


nikersify/jay: 😎 Supercharged JavaScript REPL

github.com/nikersify/jay

node.js Tools

requireで外部npmモジュールの自動インストール、requireキャッシュの破棄などの機能を含んだNode REPL。


josdejong/workerpool: Offload tasks to a pool of workers on node.js and in the browser

github.com/josdejong/workerpool

node.js JavaScript library

ブラウザのWeb WorkerやNode.jsのworker_threadsに対応したWorker Poolライブラリ。


書籍関係


仕事ですぐに使えるTypeScript — 仕事ですぐに使えるTypeScript ドキュメント

future-architect.github.io/typescript-guide/index.html

TypeScript book tutorial

TypeScriptについて学ぶためのドキュメント。
基本的なJavaScriptの書き方、型の書き方、アプリケーションの作成についてなど


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