Fork me on GitHub

2017-11-28のJS: Firefox 58の変更点、Emscripten/WebAssembly/Rust

Edit on GitHub 編集履歴を見る

JSer.info #359 - New in Firefox 58: Developer Edition – Mozilla Hacks – the Web developer blogではFirefox 58(開発版)での変更点について紹介しています。

CSSのclip-pathを編集できるCSS shapes highlighterの追加、デバッガーで著名なフレームワークのスタックトレースが簡潔な表示にでき、またconsole.groupsが折りたためるようになるなど。
また、macOSでのWebVRをデフォルトで有効化、FLACのサポート環境の追加、PerformanceNavigationTimingのサポート、Budgetベースのバックグラウンドにおける処理の制限追加などが行われています。


WebAssemblyをNodeJS Native Addonの配布形式として使う - Islands in the byte streamという記事ではEmscripten経由でWebAssemblyを利用する方法について書かれています。

Node.jsではNative addonの仕組みがあるためバインディングを書けばCやC++などで書かれたものも利用できますが、node-gypによるビルドは環境によって問題を起こすことがあります。
ネイティブコードをwasmにビルド済みのものを配布し、各環境でwasmを読み込んで実行することでこの問題を回避するという話をzopfliを例にして紹介しています。


dcodeIO/webassemblyは、C/C++で書かれたコードをWebAssemblyに変換して実行できるコンパイラ、ランタイムをもつツールキットです。
Emscriptenなどを使ってC/C++を.wasmへビルドできる環境を自分で設定するよりも、最小構成のビルド環境を簡単に作れるようにする目的のツールキットです。

npmでインストールすると.wasmのビルドに必要なツールも同時にダウンロードしてくれます。

# Install
npm install webassembly
# Compile
npx wa compile -o program.wasm program.c

Node.jsで.wasmファイルを読み込んで実行できるランタイムも含まれているので、次のように読み込んで実行できます。

// program.js
require("webassembly")
  .load("program.wasm")
  .then(module => {
    console.log("1 + 2 = " + module.exports.add(1, 2));
  });

git cloneしてnpm installするだけで動くサンプルコードは次のリポジトリに用意してあります。

また、少し話は異なりますがRustがEmscriptenを使わずにWebAssembly(wasm32-unknown-unknown
)の出力に対応しました。

Emscriptenを使わずに.wasmを扱うことができる環境は増えてきているので、興味がある人は調べてみるといいかもしれません。
WebAssemblyについては次のサイトがWeeklyでニュースレターを更新しています。


ヘッドライン


jsdom/Changelog.md at master · tmpvar/jsdom

github.com/tmpvar/jsdom/blob/master/Changelog.md#1140

JavaScript DOM ReleaseNote

jsdom 11.4.0リリース。
基本的なSVGのサポート、pretendToBeVisualオプションの追加、prepend()/append()/before()/after()/replaceWith()の追加、<applet>要素の削除など


New in Firefox 58: Developer Edition – Mozilla Hacks – the Web developer blog

hacks.mozilla.org/2017/11/new-in-firefox-58-developer-edition/

firefox ReleaseNote

Firefox 58について。
デバッガーでフレームワークのスタックトレースが簡潔化、console.groupsが折りたためるように。
また、WebVR(macOS)、FLACのサポート環境の追加、PerformanceNavigationTimingのサポート、Budgetベースのバックグラウンドにおける処理の制限追加など


Learn Svelte

svelte.technology/guide#state-management

JavaScript library news

コンパイルできるUIフレームワークのSvelteにStoreが追加された。
ReduxやMobXなどのようにStoreでStateを管理し、変更の監視やcompuate propertyの管理ができる


アーティクル


Dynamic import()  |  Web  |  Google Developers

developers.google.com/web/updates/2017/11/dynamic-import

Chrome JavaScript safari article

Chrome 63から利用できるDynamic import()についての解説


Web Frameworks: Conclusions - Blog | SitePen

www.sitepen.com/blog/2017/11/10/web-frameworks-conclusions/

JavaScript library article

JavaScriptフレームワークの比較。
強み、弱み、将来性、選ぶ理由について


WebAssemblyをNodeJS Native Addonの配布形式として使う - Islands in the byte stream

gfx.hatenablog.com/entry/2017/11/16/231950

node.js WebAssembly

Emscriptenを使ってWebAssembl形式にしたNodeモジュールを配布する方法について


Bankai, the friendly web compiler – choo – Medium

medium.com/choojs/bankai-the-friendly-web-compiler-35f1916679cc

browserify Tools JavaScript article

Browserifyを使った開発ツールキットについて


JavaScriptのWebGL 2.0でGPGPU - Qiita

qiita.com/teatime77/items/e867d7d462cb553b373d

JavaScript WebGL article

WebGL 2.0を使ったGPGPUについての解説記事。
WebGL 2.0を使った行列計算や他の実装との比較など


ReactNative 本体のバージョンのアップグレードを行う - Qiita

qiita.com/hotchpotch/items/5617caccd8749f410631

React article

ReactNativeの0.44.xから0.49.xへのアップグレードについて。
rn-diffを使った変更内容のチェック、Xcode関係のアップデート、モジュールのマイグレーション、FlowとReactの型変更の対応などについて


スライド、動画関係


Introduction to Node.js | edX

www.edx.org/course/introduction-node-js-microsoft-dev283x

node.js MS video tutorial

MicrosoftのNode.js入門講座


Source to Binary - journey of V8 javascript engine // Speaker Deck

speakerdeck.com/brn/source-to-binary-journey-of-v8-javascript-engine

V8 slide

V8がJavaScriptのコードを実行するフロー、コンパイルパイプラインについてのスライド


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


JSBench.me - JavaScript performance benchmarking playground

jsbench.me/

JavaScript benchmark Tools webservice

JavaScriptのスニペットベンチマークサイト。
jsperfのようにJavaScriptのコードのマイクロベンチマークを取って比較できる


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


y-js/yjs: A framework for real-time p2p shared editing on any data

github.com/y-js/yjs

JavaScript p2p library

WebRTC/WebSocktes/XMPPを使ったP2Pでデータのやり取りやテキストの同時編集ができるライブラリ


MikeMcl/big.js: A small, fast JavaScript library for arbitrary-precision decimal arithmetic.

github.com/MikeMcl/big.js/

JavaScript library

JavaのBigDecimalのJavaScript実装ライブラリ


asfktz/autodll-webpack-plugin: Webpack's DllPlugin without the boilerplate

github.com/asfktz/autodll-webpack-plugin

webpack plugin

webpackのDLLを簡単に扱えるようにするDLLプラグイン。
パッケージの追加や設定の変更をトリガーに再ビルドできる。


aws/aws-amplify: A declarative library for application development using Cloud services with JavaScript

github.com/aws/aws-amplify

aws JavaScript library React

AWSとの連携を簡単に行えるライブラリ。認証、Analytics、API、Storageなど。
またReact/React Nativeと連携できるライブラリも公開されている。


z-pattern-matching/z: native pattern matching for javascript

github.com/z-pattern-matching/z

JavaScript library

パターンマッチライブラリ


imsnif/synp: Convert yarn.lock to package-lock.json and vice versa

github.com/imsnif/synp

yarn npm Tools

yarn.lockファイルとpackage-lock.jsonファイルを相互変換できるツール。


google/ts-style: ☂️ TypeScript style guide, formatter, and linter.

github.com/google/ts-style

Tools TypeScript console google

設定不要なコンパイル、コードフォーマット、Lintを行うTypeScript向けのツール。 clang-format、TSLintを利用している。


github.com/naver/billboard.js

d3.js グラフ library

D3.jsを使ったC3.jsのようなグラフライブラリ。
C3.jsをforkしたライブラリで、D3.js v4を使いC3.jsとの互換性を持っている


dcodeIO/webassembly: A minimal toolkit and runtime to produce and run WebAssembly modules.

github.com/dcodeIO/webassembly

Tools WebAssembly browser node.js

WebAssemblyのツールキットとランタイム。 wasmへのコンパイルに必要な依存の自動ダウンロードやコンパイルができる。 またwasm向けのconsoleMtchなどのバインディングを提供するランタイムも含まれている。


書籍関係


ちゃんと使える力を身につける JavaScriptのきほんのきほん | 大澤 文孝 | 工学 | Kindleストア | Amazon

www.amazon.co.jp/%E3%81%A1%E3%82%83%E3%82%93%E3%81%A8%E4%BD%BF%E3%81%88%E3%82%8B%E5%8A%9B%E3%82%92%E8%BA%AB%E3%81%AB%E3%81%A4%E3%81%91%E3%82%8B-JavaScript%E3%81%AE%E3%81%8D%E3%81%BB%E3%82%93%E3%81%AE%E3%81%8D%E3%81%BB%E3%82%93-%E5%A4%A7%E6%BE%A4-%E6%96%87%E5%AD%9D-ebook/dp/B0779R1R3P

JavaScript book

プログラミング入門者向けのJavaScript入門書


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