Fork me on GitHub

2017-01-24のJS: webpack 2正式リリース、JavaScriptの開発環境設定、2016 JS Stars

Edit on GitHub 編集履歴を見る

JSer.info #315 - webpack 2.xの正式版としてwebpack v2.2.0がリリースされました。

公式サイトも2.xに対応したものとなっています。
設定ファイル周りの細かい変更が多いですが、v1からv2への移行ガイドも公開されているので合わせて見ると良いです。

また、webpack 2では、TreeShakingと呼ばれる機能が追加されています。

今後の機能追加や改善については、投票ツールを通じて決定していくようです。
(投票の重み付けに利用されているOpen Collectiveについてのスライドを書いたので、併せてみるといいかもしれません)

投票のサイトを見ると今のところ次の開発候補としてはScope Hoisting(Rollupインスパイアな最適化)、Typescript周りの改善などが上がっているようです。


Modern JavaScript概観、そしてElectronへという記事では、JavaScriptの開発環境設定について書かれています。

型、Babelのエコシステム、Lint、テスト、UIフレームワーク、CSS、アーキテクチャ、ビルドなど幅広い内容を扱っています。
また、どのような選択肢からなぜそのツール/ライブラリを選んだのかという点について詳しく書かれています。


2016 JavaScript Rising Starsというサイトでは、2016年においてGitHub Starの増加率でランキングした結果がまとめられています。

それぞれのリポジトリ(ライブラリやツールなど)に対する説明が書かれているので、一度見てみると良いかもしれません。


ヘッドライン


Release v2.2.0 · webpack/webpack

github.com/webpack/webpack/releases/tag/v2.2.0

webpack ReleaseNote

webpack 2.2.0正式版リリース。


TestCafe v0.12.0 Released | TestCafe

devexpress.github.io/testcafe/blog/testcafe-v0-12-0-released.html

testing E2E ReleaseNote

TestCafe v0.12.0リリース。
ベーシック認証/NTLM認証のサポート、CIでの動作改善、テストのスキップ、test.beforetest.afterの追加、ESLintプラグインの追加など


アーティクル


Modern JavaScript概観、そしてElectronへ

blog.satotaichi.info/modern-javascript_201701/

JavaScript TypeScript Electron babel

JavaScriptの環境設定をめぐる試行について。
TypeScriptやFlowなどの型システム、Babelのエコシステム、Lint、テストフレームワーク、UIフレームワーク、CSS、アーキテクチャ、ビルドなど。
幅広いツール/ライブラリの中で、どのような考えで何を選んだかについて書かれている。


アメブロ2016 ~ Isomorphic JavaScriptの詳しい話 | CyberAgent Developers Blog | サイバーエージェント デベロッパーズブログ

developers.cyberagent.co.jp/blog/archives/3513/

JavaScript isomorphic

クライアントサイドとサーバサイドのどちらでも動くIsomorphicなJavaScriptを書くために気をつける点について。
Reactコンポーネント、Fetch、スタイルシート、環境変数、ルーティング、表示領域の扱い,パフォーマンス計測についてなど


Making transpiled ES modules more spec-compliant

www.2ality.com/2017/01/babel-esm-spec-mode.html

ECMAScript node.js

ES Modulesの仕様と現在のTranspilerの挙動について。
ECMAScriptとNode.jsのモジュールのInteroperabilityについて


Module Bundling and Webpack in Simple Terms

arianv.com/post/Module-Bundling-and-Webpack-in-Simple-Terms/

webpack tutorial

webpackがどのようにモジュールをbundleしているかを丁寧に解説した記事


TypeScript 2.1: Mapped Types | Marius Schulz

blog.mariusschulz.com/2017/01/20/typescript-2-1-mapped-types

TypeScript

TypeScript 2.1で入ったMapped Typesについて。
Object.freezeなどを例にMapped Typesの使い方を解説している


Dragons when upgrading from Angular 2.1.x to 2.4.x – Medium

medium.com/@abookone/dragons-when-upgrading-from-angular-2-1-x-to-2-4-x-530de5a763cb

AngularJS

Angular 2.1から2.4へのアップデートにおけるハマりどころについて


Vue + Vuex — Getting started – Medium

medium.com/@bradfmd/vue-vuex-getting-started-f78c03d9f65

Vue tutorial

Vuexについての導入チュートリアル


Server-side Rendering Shootout with Marko, Preact, Rax, React and Vue

hackernoon.com/server-side-rendering-shootout-with-marko-preact-rax-react-and-vue-25e1ae17800f

JavaScript DOM template

UIライブラリ/テンプレートエンジンであるMarkoのサーバサイドレンダリングの高速化手法について。
Marko v4ではブラウザとサーバで出力方式を変えている。
クライアントサイドではVirtual DOMを使い、サーバサイドでは文字列結合をベースとした出力を使い分けている。


3 New CSS Features to Learn in 2017

bitsofco.de/3-new-css-features-to-learn-in-2017/

CSS

最近のブラウザで利用できる新しいCSSの機能について。
Feature Queries、Grid Layout、CSS Variables


ES2016 / ES2017の最新動向を追ってみた - Qiita

qiita.com/yuyake0084/items/3c901f37ed7333d4da16

JavaScript ECMAScript

ES2016、2017で追加された構文や機能について


Introduction to WebAssembly — Rasmus Andersson

rsms.me/wasm-intro

WebAssembly

WebAssemblyの中身を見ていく話。
セマンティクス、type section、メモリアドレス、JavaScriptのAPIについて


Functional Programing in Javascript | Lifelong Learning

vmayakumar.wordpress.com/2017/01/17/functional-programing-in-javascript/

JavaScript 関数型プログラミング

JavaScriptでの関数型プログラミングについて。
Adequate/mostly-adequate-guideを元にしている


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


2016 JavaScript Rising Stars

risingstars2016.js.org/

JavaScript github

2016年にGitHubのstarの増加率でランキングをつけた結果について。
それぞれのライブラリやツールについても簡単に解説されている


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


Voca: The JavaScript string library

vocajs.com/

JavaScript library

文字列操作系のUtils集ライブラリ


lorenzofox3/zora: A less than 200 lines of code javascript test harness for nodejs and the browser

github.com/lorenzofox3/zora

testing JavaScript library

Generatorを使った小さなテストフレームワーク


alibaba/rax: A universal React-compatible render engine.

github.com/alibaba/rax

React library JavaScript

ReactライクなAPIを持つUniversalなViewライブラリ。
ブラウザだけではなく、アプリ(Weex)やサーバでも動作させることが目的。


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