Fork me on GitHub

2019-04-23のJS: Svelte 3(Change Everything)、GoogleでのCSP(Content Security Policy)導入ステップ

Edit on GitHub 編集履歴を見る

JSer.info #432 - コンパイル前提のUIコンポーネントフレームワークであるSvelte 3リリースされました。

3.0.0のCHANGELOGには"Everything"としか書かれていませんが、
今までの仕組みを大幅に書き換えたバージョンとなっています。

テンプレートの構文、コンポーネントで利用できるAPI、ステートを変更したときにUIを更新するために変更検知の仕組み(Reactiveな仕組み)が変更されています。
今までは、コンポーネントのステートを set APIなどを使ってUIに反映していました。

<p>{count} doubled is {double}</p>
<button on:click="set({ count: count + 1 })">+1</button>

<script>
    export default {
        data() {
            return {
                count: 0
            };
        },
        computed: {
            doubled: ({ count }) => count * 2
        }
    };
</script>

Svelte 3からは、次のように変更を検知したい文を$ラベル(JavaScriptのラベル)でアノテーションします。このラベルで指定した変数などの値が変更されるとUIが更新されるコードがコンパイル時に生成されます。
($$invalidateという更新を通知する処理が生成コードには含まれるようになります。)

<p>{count} doubled is {doubled}</p>
<button on:click="{() => count += 1}">+1</button>

<script>
    let count = 0;
    $: doubled = count * 2;

    function handleClick() {
        count += 1;
    }
</script>

この宣言的なReactivityについては次のドキュメントやRFCを見るのが良さそうです。

ものすごく簡単にまとめると、@observableのような​まだ策定中のDecorator構文ではなく、既にあるlabel文$というラベルを使って、コンパイル時に変数などをObservableを作り出すという手法のようです。

この他にもWrite less codeに寄せた変更などが多く含まれているため詳細は公式サイトを読むのがよさそうです。


Content Security Policy: A successful mess between hardening and mitigation - Speaker Deckというスライドでは、Googleの主要なドメインにおけるCSP(Content Security Policy)の導入状態などについて書かれています。

Google domainでCSPがどの程度導入されているかのカバレッジや60%以上のXSSはCSPでブロックできている点について。
また、CSP導入の4つのLevelと導入ステップ、ホワイリストの問題とnonce-based CSP、CSPとデプロイのトレードオフについてなど。
CSPのディレクティブ(設定)によってはevalやinline codeなどが利用できないため、CSP対応のリファクタリング手法やステップについて書かれています。

このスライドでも紹介されているホワイリストの問題とnonce-based CSPについては次の記事も参照するとよさそうです。


ヘッドライン


alibaba/rax: [ v1.0 released] The fastest way to build universal application.

github.com/alibaba/rax

React library JavaScript ReleaseNote

ReactライクなAPIを持つUniversalなViewライブラリであるRax 1.0.0リリース。
Hooks APIにも対応している。


Release v5.0.0 · sindresorhus/np

github.com/sindresorhus/np/releases/tag/v5.0.0

npm ReleaseNote

npm publishするnp 5.0.0リリース。
2要素認証を新しく公開するパッケージに関しては自動で有効化、公開に失敗したときのロールバック処理の改善など


Release Notes for Safari Technology Preview 80 | WebKit

webkit.org/blog/8825/release-notes-for-safari-technology-preview-80/

safari ReleaseNote

Safari Technology Preview 80リリース。
ResizeObserverのサポート、window.openの第二引数でnoreferrerのサポート、contentWindowのサポートなど。
またLegacy Safari Extensionsのサポート終了など


Blog - Next.js 8.1 | Next.js

nextjs.org/blog/next-8-1

React AMP ReleaseNote

Next.js 8.1リリース。
AMPサポートが追加された。
コンポーネント内でAMPとの処理分岐でのhybrid対応、next exportでAMPでの出力とバリデーション


Release 10.0.0-beta.0 Reconcilertron · developit/preact

github.com/developit/preact/releases/tag/10.0.0-beta.0

React library JavaScript ReleaseNote

Preact 10.0.0-beta.0リリース。
Fragmentsの安定化、条件分岐を含む描画のパフォーマンス改善、コンポーネントの上下関係を考慮した更新処理を行うように修正など


Svelte 3: Rethinking reactivity

svelte.dev/blog/svelte-3-rethinking-reactivity

JavaScript library ReleaseNote

コンパイル前提のUIフレームワークであるSvelte 3リリース。
今までの仕組みを書き直したため、テンプレート構文、API、ウェブサイトが変更されている。
変更検知の仕組みが大きく変わり、set APIではなく、reactiveな変数を$:で宣言しコンパイル時に変更を追跡するコードを生成する方法に変更された


アーティクル


TypeScript再入門「がんばらないTypeScript」で、JavaScriptを“柔らかい”静的型付き言語に(gfx執筆) - エンジニアHub|若手Webエンジニアのキャリアを考える!

employment.en-japan.com/engineerhub/entry/2019/04/16/103000

TypeScript article

ゆるい型付けの設定で始めるTypeScriptについて。


A horrifying globalThis polyfill in universal JavaScript · Mathias Bynens

mathiasbynens.be/notes/globalthis

ECMAScript JavaScript polyfill article

globalThisのpolyfillとその動作原理についての解説。


Experimental Node.js: testing the new performance hooks

blog.logrocket.com/experimental-node-js-testing-the-new-performance-hooks-31fcdd2a747e

node.js performance article

Node.jsのperf_hooksの使い方についての記事。
モジュールのロード時間やURLへのリクエスト時間を計測を例に紹介している


The perfect unit test

javascriptplayground.com/the-perfect-javascript-unit-test/

JavaScript testing article

Unit Testの書き方について。
テストケース名の書き方、テストをSetup、コード実行、Assertの3つのステップに分解して書くことについて


A RealWorld Comparison of Front-End Frameworks with Benchmarks (2019 update)

medium.freecodecamp.org/a-realworld-comparison-of-front-end-frameworks-with-benchmarks-2019-update-4be0d3c78075

JavaScript library article benchmark

"RealWorld"というベンチマークアプリの各JavaScriptフレームワークなどの実装を比較した記事。
パフォーマンス、出力されたコードのファイルサイズ、Line of Code(LOC)でそれぞれを比較した結果をまとめている


スライド、動画関係


Content Security Policy: A successful mess between hardening and mitigation - Speaker Deck

speakerdeck.com/mikispag/content-security-policy-a-successful-mess-between-hardening-and-mitigation

CSP browser security slide

GoogleにおけるCSPについてのスライド。Google domainのCSPのカバレッジや60%以上のXSSはCSPでブロックできている。
CSP導入の4つのLevelと導入ステップ、ホワイリストの問題とnonce-based CSP、CSPとデプロイのトレードオフについてなど。
CSP対応のリファクタリング手法などについて


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


isInputPending: Facebook's first browser API contribution - Facebook Code

code.fb.com/developer-tools/isinputpending-api/

JavaScript performance browser

navigator.scheduling.isInputPending()を使いユーザーの操作中は、キューにためた処理を実行しないように制御する方法について。
ロード処理が完了するまでユーザーが操作できない時間であるFirst Input Delay (FID) を軽減する手法について


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


Do you really know how a lockfile works for yarn and npm packages? | Snyk

snyk.io/blog/making-sense-of-package-lock-files-in-the-npm-ecosystem/

npm yarn JavaScript node.js library

yarnのyarn.lock、npmのpackage-lock.jsonが実際にどのように動いているのかについて。
アプリケーションとライブラリのロックファイルについて


stryker-mutator/stryker: Mutation testing for JavaScript and friends

github.com/stryker-mutator/stryker

testing library JavaScript C# scala

Mutation testingライブラリ。
テストコードをテストするためのフレームワーク。
mochaやjestなど各種テストフレームワークと連携して動作する。


lancedikson/bowser: a browser detector

github.com/lancedikson/bowser

JavaScript browser library

User-Agentを元にブラウザ名やバージョンなどを構造的なデータとして取得できるライブラリ


sindresorhus/file-type: Detect the file type of a Buffer/Uint8Array/ArrayBuffer

github.com/sindresorhus/file-type

node.js JavaScript library

Content sniffingをしてファイルの種類を判定するNode.jsライブラリ


書籍関係


Front-end Developer Handbook 2019 - Learn the entire JavaScript, CSS and HTML development practice!

frontendmasters.com/books/front-end-handbook/2019/

JavaScript book links

フロントエンド開発についての概要や技術項目ごとのリソースをまとめた電子書籍の2019年版


この記事へ修正リクエストをする
記事を紹介する