Fork me on GitHub

2015-01-28のJS: Vivaldi、lodash 3.0.0、JavaScriptテスト概要

Edit on GitHub 編集履歴を見る

JSer.info #212 - 元OperaのCEOによるChromiumベースのブラウザであるVivaldiのTechinial Preview版が公開されました。

Opera 12ユーザーに向けての機能が多く搭載されている感じで、Chroniumをベースとしているのでレンダリングエンジンは現在のOperaと同じくBlinkが使われているようです。


lodash v3.0.0がリリースされました。

String関係のメソッドの追加、関数型スタイルで使うためのメソッドの追加などがされました。

またnpm instal lodash.foreachというように個々のモジュールとして入れることは以前から可能でしたが、この時の依存関係のツリーがシンプルになるように改善されました。

加えてパフォーマンス面でもlazy chainingの導入やES6のSet & WeakMapを利用することで大きく改善されたようです。


A Journey Through Client-Side Testing with JavaScript -Telerik Developer NetworkではJavaScriptテストについて幅広く書かれています。

JavaScriptのテストと言っても色々な役割を持つ組み合わせで動いてることが多く、AssertionやTest Runnerとはどういうものがあるかについて書かれています

またTodoMVCを例にテストの実行についても紹介していて、ユニットテストというよりIntegration Testsという感じの話となっています。

最近、Integration Testsの話としてTestiumについて書いたのでこちらも合わせてみるといいかもしれません。


ヘッドライン


Vivaldi - A new browser for our friends

vivaldi.com/

browser Opera blink

元Opera CEOが始めたブラウザ。
Chromium(Blink)をベースにしていて、UIにReact等ウェブの技術を使用している。


Chromium Blog: Chrome 41 Beta: New ES6 Features and Improved DevTools for Service Workers and Web Animations

blog.chromium.org/2015/01/chrome-41-beta-new-es6-features-and.html

Chrome ReleaseNote

Chrome 41βリリース。
ES6 Template Literals、Web Animationsのデバッグ機能、image-rendering: pixelatedのサポート等


Release 2.5.0 · groupon-testium/testium

github.com/groupon-testium/testium/releases/tag/v2.5.0

E2E testing ReleaseNote

Integration Testフレームワークのtestium 2.5.0リリース。
日本語などの入力ができない問題の修正やエラー表示の改善、Element.prototype.getElementの実装など


Release 3.0.0 · lodash/lodash

github.com/lodash/lodash/releases/tag/3.0.0

JavaScript library ReleaseNote

lodash v3.0.0リリース。
String関係のメソッドの追加、関数型スタイルで使いやすいメソッドの追加、個々のモジュールとして入れた時の依存関係をシンプルに、パフォーマンスの改善、lazy chainingの導入等


Release JSHint 2.6.0 · jshint/jshint

github.com/jshint/jshint/releases/tag/2.6.0

JavaScript Tools ReleaseNote

JSHint 2.6.0リリース。


ESLint 0.13.0 released - ESLint

eslint.org/blog/2015/01/eslint-0.13.0-released/

JavaScript Tools ReleaseNote

ESLint 0.13.0リリース。
Template strings、デフォルトパラメータ等のES6サポート改善、ブロックスコープの挙動を修正等


アーティクル


テストできないコードをE2Eテストを使ってリファクタリングしよう | Web Scratch

efcl.info/2015/01/24/testium-e2e-refactoring/

JavaScript E2E testing browser

E2EテストフレームワークのTestiumの紹介とリファクタリングについて。
Mocha+Testium+power-assertでユニットテストと同じようにE2Eテストを書くための設定やサンプル


Fetch API in action

blog.gospodarets.com/fetch_in_action

JavaScript DOM API XHR

Fetch APIについての紹介。
レスポンスのステータスコード、レスポンスのJSONパース、タイムアウトの問題、使い方、polyfillについて


Destructuring and parameter handling in ECMAScript 6

www.2ality.com/2015/01/es6-destructuring.html

ECMAScript JavaScript

ES6のDestructuring(分割代入、構造化代入)と引数時の扱いについて。
またSpread operatorを使った値の展開についても書かれてる


Strange JavaScript Errors and How to Fix Them

davidwalsh.name/fix-javascript-errors

JavaScript debug

JavaScriptのエラーメッセージとそれがどのようなときに起きてるエラーなのか、また修正方法について


addyosmani/es6-equivalents-in-es5

github.com/addyosmani/es6-equivalents-in-es5

JavaScript ECMAScript tutorial document

ES6で書かれたものとES5で同等の事を行うコードを並べて、ES6の機能について紹介


Getting Literal With ES6 Template Strings

updates.html5rocks.com/2015/01/ES6-Template-Strings

JavaScript ECMAScript

ES6 Template Stringsについての解説


5分でわかる正しい Web サイト常時 SSL 化のための基礎知識 | WWW WATCH

hyper-text.org/archives/2015/01/full_time_ssl_website_quick_start.shtml

HTTP SSL まとめ

SSLの効果 - メリットとデメリット、SSL証明書の種類と取得方法、外部リソースの読み込みとMixed Content、HTTPSに接続を強制する方法 - HSTS、リダイレクト、CookieのSecure属性などについて


ES6 Module Gotchas | geedew

www.geedew.com/2014/12/26/es6-module-gotchas/

ECMAScript JavaScript

ES6 modulesのアンチパターンについて。
静的なものを扱うデザインであるという話、オブジェクトをexportした場合の問題、副作用を目的としたモジュールの読込方法、export defaultを出来るだけ使うべき等


New animation controls in Chrome Canary | Val Head - Designer

www.valhead.com/2015/01/06/quick-tip-chrome-animation-controls/

CSS Chrome debug

ChromeのCSS animationのデバッグ機能についての紹介


What the Virtual Viewport?

updates.html5rocks.com/2015/01/virtual-viewport

Chrome browser

Chrome 39と40でviewportの仕組みが変わった。
40からLayout ViewportとVisual Viewportに分かれて処理されるようになった。(IEと同様)
ズーム時にposition: fixedな要素等の動作の違いがでる。


A Journey Through Client-Side Testing with JavaScript -Telerik Developer Network

developer.telerik.com/featured/journey-client-side-testing-javascript/

JavaScript testing

JavaScriptのテスト全体について書かれた記事。
テストフレームワーク、Assertionライブラリ、Test Runnerなどテストを構成する要素。
mocha-phantom、karma、DalekJS、Atomusでの実行方法について


スライド、動画関係


Functional programming in javascript (intro) // Speaker Deck

speakerdeck.com/geekingfrog/functional-programming-in-javascript-intro

JavaScript スライド 関数型プログラミング

JavaScriptと関数型プログラミングについてのスライド。


Web Componentsのアクセシビリティ

www.slideshare.net/mlca11y/web-components-43883982

WebComponents WAI-ARIA アクセシビリティ スライド

Web Componentsとアクセシビリティについてのスライド。
既存要素があるケースと独自要素の場合はWAI-ARIAを使うことについて


サイト、サービス


CSS Flexbox Please!

demo.agektmr.com/flexbox/

CSS demo

CSS Flexboxのプロパティをその場で変更したりして動作を試せるデモページ


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


Diet.js

dietjs.com/

node.js library

Node.jsのウェブアプリケーションフレームワーク


yoshuawuyts/promise-each

github.com/yoshuawuyts/promise-each

Promises library

Promiseと組み合わせて使えるeach、every、filter、map、reduce、some等の関数をそれぞれモジュール化したもの


Home | Aurelia

aurelia.io/

JavaScript library

Durandalの次世代となるJavaScriptフレームワーク。 ES6(or AltJS) + jspm、two-way binding、DI、ルーティング等を盛り込んだフレームワーク。
元AngularJSチームの人が開発してる


shiwano/typhen

github.com/shiwano/typhen

TypeScript Tools

d.tsからJSON Schemaを作ったり、Handlebarsを使ったテンプレートでコードやドキュメントを出力できるツール


Wallaby - intelligent test runner for JavaScript

wallabyjs.com/

JetBrains IDE JavaScript testing

JetBrains IDE等と統合して使えるTest Runner。
Mocha、QUnit、Jasmine等が使えて、コードカバレッジをエディタ上に表示、テストケースを一部だけ実行などが出来る。
spy-jsの人が作ってる


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