---
title: "2017-03-07のJS: Marko 4.0、CoffeeScript+ReactからJavaScriptへ"
author: "azu"
layout: post
date : 2017-03-07T01:11:32.227Z
category: JSer
tags:
- template
- CoffeeScript
- React

---

JSer.info #321 - UIコンポーネントライブラリの[Marko](http://markojs.com/ "Marko") 4.0がリリースされました。

- [Marko 4.0 is here 🚀 🎉 – Medium](https://medium.com/@mlrawlings/marko-4-0-is-here-837884c5f60d)
- [marko/ROADMAP.md at master · marko-js/marko](https://github.com/marko-js/marko/blob/master/ROADMAP.md "marko/ROADMAP.md at master · marko-js/marko")

MarkoはeBayで開発され使われているUIコンポーネントライブラリです。

Marko 4.0ではクライアントレンダリングとサーバサイドレンダリング(HTML文字列を出力)で異なる手法を使うことで、
サーバサイドレンダリングを高速化しています。

- [Server-side Rendering Shootout with Marko, Preact, Rax, React and Vue](https://hackernoon.com/server-side-rendering-shootout-with-marko-preact-rax-react-and-vue-25e1ae17800f "Server-side Rendering Shootout with Marko, Preact, Rax, React and Vue")

----

[Bugsnag Blog - Converting a large React Codebase from Coffeescript to ES6](https://blog.bugsnag.com/converting-a-large-react-codebase-from-coffeescript-to-es6/ "Bugsnag Blog - Converting a large React Codebase from Coffeescript to ES6")という記事では、CoffeeScript + React(cjsx)からJavaScript + Reactの環境へ移行した手法について書かれています。

CoffeeScriptをJavaScriptへ変換する[decaffeinate](https://github.com/decaffeinate/decaffeinate "decaffeinate")はcjsx(CoffeeScriptにJSXを書けるもの)をサポートしていません。

そのため、一度[coffee-react-transform](https://github.com/jsdf/coffee-react-transform "jsdf/coffee-react-transform: DEPRECATED – Provides React JSX support for Coffeescript")で`React.createElement`ベースのJSに変換し、[react-codemod](https://github.com/reactjs/react-codemod#create-element-to-jsx "reactjs/react-codemod: React codemod scripts")でJSXに再変換しています。
また、変換したコードベースを`prettier`や`eslint`を使い自動整形し、読みやすくするまでの流れが書かれています。

それらをまとめた[Depercolator](https://github.com/bugsnag/depercolator "Depercolator")というツールを作り公開されていて、今のJavaScriptは機械変換でかなりのタスクができている部分が面白いかもしれません。

----

<h1 class="site-genre">ヘッドライン</h1>

----

## Release v3.5.0 · petkaantonov/bluebird
[github.com/petkaantonov/bluebird/releases/tag/v3.5.0](https://github.com/petkaantonov/bluebird/releases/tag/v3.5.0 "Release v3.5.0 · petkaantonov/bluebird")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">Promises</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p>
Bluebird v3.5.0リリース。
catch時に処理を行いエラー自体はそのまま次のcatchへ渡す`.tapCatch`の追加など

- [add tapError by benjamingr · Pull Request #1220 · petkaantonov/bluebird](https://github.com/petkaantonov/bluebird/pull/1220 "add tapError by benjamingr · Pull Request #1220 · petkaantonov/bluebird")
- [.tapCatch | bluebird](http://bluebirdjs.com/docs/api/tapcatch.html ".tapCatch | bluebird")

----

## Marko 4.0 is here 🚀 🎉 – Medium
[medium.com/@mlrawlings/marko-4-0-is-here-837884c5f60d](https://medium.com/@mlrawlings/marko-4-0-is-here-837884c5f60d "Marko 4.0 is here 🚀 🎉 – Medium")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">template</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span> <span class="jser-tag">VirtualDOM</span></p>
Marko 4.0リリース。
コンポーネントベースのUIライブラリ(テンプレート)で、クライアントとサーバのそれぞれのモードを持っているため、サーバサイドレンダリングが高速。

- [Server-side Rendering Shootout with Marko, Preact, Rax, React and Vue](https://hackernoon.com/server-side-rendering-shootout-with-marko-preact-rax-react-and-vue-25e1ae17800f#.6r2g5rwgk "Server-side Rendering Shootout with Marko, Preact, Rax, React and Vue")

----

## Node.js - Quality with Speed | Node.js
[nodejs.org/en/blog/community/quality-with-speed/](https://nodejs.org/en/blog/community/quality-with-speed/ "Node.js - Quality with Speed | Node.js")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">node.js</span> <span class="jser-tag">opinion</span></p>
Node.jsの開発プロセスやリリースサイクル、またそれらを支えるテスト基盤について。


----

## ESLint v3.17.0 released - ESLint - Pluggable JavaScript linter
[eslint.org/blog/2017/03/eslint-v3.17.0-released](http://eslint.org/blog/2017/03/eslint-v3.17.0-released "ESLint v3.17.0 released - ESLint - Pluggable JavaScript linter")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">ESLint</span> <span class="jser-tag">ReleaseNote</span></p>
ESLint 3.17.0リリース。
ルール開発者向けの機能追加、`no-compare-neg-zero`と`nonblock-statement-body-position`のルールを追加など

- [ESLint v3.17.0 - Qiita](http://qiita.com/mysticatea/items/a2d72c76671c2197c712 "ESLint v3.17.0 - Qiita")

----

## Release v0.22.0 · yarnpkg/yarn
[github.com/yarnpkg/yarn/releases/tag/v0.22.0](https://github.com/yarnpkg/yarn/releases/tag/v0.22.0 "Release v0.22.0 · yarnpkg/yarn")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">npm</span> <span class="jser-tag">node.js</span> <span class="jser-tag">Tools</span> <span class="jser-tag">ReleaseNote</span></p>
yarn 0.22.0 プレリリース。
`--non-interactive`のオプションを追加、`v8-compile-cache`を利用し起動速度を改善、Docker image(`yarnpkg/node-yarn`)の追加など

- [zertosh/v8-compile-cache: Require hook for automatic V8 compile cache persistence](https://github.com/zertosh/v8-compile-cache "zertosh/v8-compile-cache: Require hook for automatic V8 compile cache persistence")

----

## zertosh/v8-compile-cache: Require hook for automatic V8 compile cache persistence
[github.com/zertosh/v8-compile-cache](https://github.com/zertosh/v8-compile-cache "zertosh/v8-compile-cache: Require hook for automatic V8 compile cache persistence")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">V8</span> <span class="jser-tag">node.js</span> <span class="jser-tag">library</span></p>
Node v5.7.0から導入されたV8のcode cacheを保持するrequire hookを提供するライブラリ。
yarnやnuclideなどの起動速度改善に使われてる


----
<h1 class="site-genre">アーティクル</h1>

----

## ゼロから始めるJavaScript入門 ： DESIGNMAP
[designmap.info/category/lecture/javascript-introduction/](http://designmap.info/category/lecture/javascript-introduction/ "ゼロから始めるJavaScript入門 ： DESIGNMAP")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">ECMAScript</span> <span class="jser-tag">tutorial</span> <span class="jser-tag">JavaScript</span></p>
ES2015ベースにしたJavaScript入門チュートリアル


----

## A Step-By-Step Guide for Building Master-Detail User Interfaces with AngularTelerik Developer Network
[developer.telerik.com/content-types/tutorials/step-step-guide-building-master-detail-user-interfaces-angular/](http://developer.telerik.com/content-types/tutorials/step-step-guide-building-master-detail-user-interfaces-angular/ "A Step-By-Step Guide for Building Master-Detail User Interfaces with AngularTelerik Developer Network")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">AngularJS</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">tutorial</span></p>
Angularでよくあるリストビューと詳細ビューからなるアプリを作るチュートリアル


----

## PWA（Progressive Web Apps）の現状とその開発方法 | フロントエンドBlog | ミツエーリンクス
[www.mitsue.co.jp/knowledge/blog/frontend/201702/23\_2217.html](https://www.mitsue.co.jp/knowledge/blog/frontend/201702/23_2217.html "PWA（Progressive Web Apps）の現状とその開発方法 | フロントエンドBlog | ミツエーリンクス")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">ProgressiveWebApp</span> <span class="jser-tag">article</span></p>
PWAの概要についてまとめられた記事。
Googleによるケーススタディや開発方法について


----

## JavaScript void Keyword
[cmichel.io/javascript-void-keyword/](http://cmichel.io/javascript-void-keyword/ "JavaScript void Keyword")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">article</span></p>
JavaScriptの`void`キーワードについて。
`if(condition) { return void console.log(""); }`のようなケースで利用できるという話。


----

## Bugsnag Blog - Converting a large React Codebase from Coffeescript to ES6
[blog.bugsnag.com/converting-a-large-react-codebase-from-coffeescript-to-es6/](http://blog.bugsnag.com/converting-a-large-react-codebase-from-coffeescript-to-es6/ "Bugsnag Blog - Converting a large React Codebase from Coffeescript to ES6")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">CoffeeScript</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">React</span> <span class="jser-tag">article</span></p>
coffee-react(cjsx)からJavaScriptへのマイグレーションについての記事。
decaffeinateはcjsxをサポートしていないため、`React.createElement`ベースのJSに変換し、react codemod toolでJSXに再変換する。
変換したコードベースを`prettier`で整形し、`eslint`で細かいところを直す。
それらをまとめた`Depercolator`というツールを作った話

- [jsdf/coffee-react-transform: DEPRECATED – Provides React JSX support for Coffeescript](https://github.com/jsdf/coffee-react-transform "jsdf/coffee-react-transform: DEPRECATED – Provides React JSX support for Coffeescript")
- [reactjs/react-codemod: React codemod scripts](https://github.com/reactjs/react-codemod#create-element-to-jsx "reactjs/react-codemod: React codemod scripts")
- [bugsnag/depercolator: Tool for converting coffeescript to idiomatic javascript and JSX](https://github.com/bugsnag/depercolator "bugsnag/depercolator: Tool for converting coffeescript to idiomatic javascript and JSX")

----

## V8: Behind the Scenes (February Edition feat. A tale of TurboFan) | Benedikt Meurer
[benediktmeurer.de/2017/03/01/v8-behind-the-scenes-february-edition/](http://benediktmeurer.de/2017/03/01/v8-behind-the-scenes-february-edition/ "V8: Behind the Scenes (February Edition feat. A tale of TurboFan) | Benedikt Meurer")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">V8</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">article</span></p>
ChromeのTurboFanプロジェクトの歴史について。
2013年から開始したプロジェクトで、Crankshaftはfast pathにフォーカスしていたが、TurboFanはslow pathにもフォーカスしているという話。
V8において予測できないパフォーマンス問題を作っていたFunction#bindやPromiseの話。
TurboFanのアーキテクチャについての解説など


----

## nodebox/opentype.js: Read and write OpenType fonts using JavaScript.
[github.com/nodebox/opentype.js](https://github.com/nodebox/opentype.js "nodebox/opentype.js: Read and write OpenType fonts using JavaScript.")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">fonts</span> <span class="jser-tag">library</span></p>
OpenTypeフォントの読み書きを行うライブラリ


----

## How to Optimize CPU-Intensive Work in Node.js – Medium
[medium.com/@graeme\_boy/how-to-optimize-cpu-intensive-work-in-node-js-cdc09099ed41](https://medium.com/@graeme_boy/how-to-optimize-cpu-intensive-work-in-node-js-cdc09099ed41 "How to Optimize CPU-Intensive Work in Node.js – Medium")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">node.js</span> <span class="jser-tag">tutorial</span> <span class="jser-tag">article</span></p>
Node.jsでCPUバウンドなプログラムを別プロセスで処理する方法について。
`child_process`の扱い方について書かれた記事


----

## A Link: rel=preload Analysis From the Chrome Data Saver Team – reloading – Medium
[medium.com/reloading/a-link-rel-preload-analysis-from-the-chrome-data-saver-team-5edf54b08715](https://medium.com/reloading/a-link-rel-preload-analysis-from-the-chrome-data-saver-team-5edf54b08715 "A Link: rel=preload Analysis From the Chrome Data Saver Team – reloading – Medium")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">browser</span> <span class="jser-tag">Chrome</span> <span class="jser-tag">HTTP2</span> <span class="jser-tag">article</span></p>
(Chromeの)`rel=preload`がどのように動いているのかの解説記事。
クリティカルリソースを宣言的に先読みするもので、優先度については仕様では未定義。
Chromeにおけるpreloadの優先度やpreloadとasync属性の違いなどについて


----

## A Detailed Introduction To Webpack – Smashing Magazine
[www.smashingmagazine.com/2017/02/a-detailed-introduction-to-webpack/](https://www.smashingmagazine.com/2017/02/a-detailed-introduction-to-webpack/ "A Detailed Introduction To Webpack – Smashing Magazine")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">webpack</span> <span class="jser-tag">tutorial</span></p>
webpackについてのチュートリアル。
loader、動的ロード、コード分割について


----
<h1 class="site-genre">サイト、サービス、ドキュメント</h1>

----

## snyk/vulndb: Snyk's public vulnerability database
[github.com/snyk/vulndb](https://github.com/snyk/vulndb "snyk/vulndb: Snyk's public vulnerability database")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">security</span> <span class="jser-tag">npm</span> <span class="jser-tag">webservice</span></p>
Snykによるnpmやrubygemの脆弱性についてを集めたデータベース。

- [VulnDB | Snyk](https://snyk.io/vuln "VulnDB | Snyk")

----
<h1 class="site-genre">ソフトウェア、ツール、ライブラリ関係</h1>

----

## Artillery - a modern load testing toolkit
[artillery.io/](https://artillery.io/ "Artillery - a modern load testing toolkit")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">testing</span> <span class="jser-tag">performance</span> <span class="jser-tag">HTTP</span></p>
HTTPやWebSocketのロードテストを行うことができるツール。
シナリオを元にしたテストもできる。


----

## typicode/pkg-ok: Prevents publishing a module with bad paths
[github.com/typicode/pkg-ok](https://github.com/typicode/pkg-ok "typicode/pkg-ok: Prevents publishing a module with bad paths")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">npm</span> <span class="jser-tag">Tools</span> <span class="jser-tag">console</span></p>
npmで公開するパッケージの`main`と`bin`が正しいかをチェックするツール。

- [maxogden/dependency-check: checks which modules you have used in your code and then makes sure they are listed as dependencies in your package.json](https://github.com/maxogden/dependency-check "maxogden/dependency-check: checks which modules you have used in your code and then makes sure they are listed as dependencies in your package.json")

----

## Kegsay/flow-jsdoc: Use JSDoc to represent Flow annotations
[github.com/Kegsay/flow-jsdoc](https://github.com/Kegsay/flow-jsdoc "Kegsay/flow-jsdoc: Use JSDoc to represent Flow annotations")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">JSDoc</span> <span class="jser-tag">flowtype</span> <span class="jser-tag">Tools</span></p>
JSDocの型をFlowTypeの型アノテーションへ変換するツール


----
