Fork me on GitHub

2018-03-06のJS: TestCafe v0.19.0、ランタイム情報を使ったTypeScriptの型付け、Web Componentsでの開発

Edit on GitHub 編集履歴を見る

JSer.info #373 - TestCafe v0.19.0がリリースされました。

ファイルの変更を監視し、更新されたら再実行できるtestcafe-liveコマンドの追加されています。

Cypressもそうですが、テストを書く際にトライアンドエラーがしやすい機能を持ったテストフレームワークが増えている印象です。

また、セレクタの結果をフィルターするfilterVisiblefilterHidden、テキストマッチした要素を取得するwithExactTextの追加などが行われています。


typewizというTypeScriptの型付を補助するツールが公開されています。

このツールでtypewiz-nodetypewiz-webpackで変換して実行して得た実行時の型情報を元に、コードベースに型を付けるツールです。

ASTを使ったコード変換したコードの実行時に関数の引数/変数/返り値にどのような値が入るかを記録し、その情報を元にstring/number/boolean/null/undefinedといった型を推測します。

anyで型を付けされたTypeScriptのコードに対して型を付けることが目的のツールです。
詳細は次の記事で解説されています。


ヘッドライン


Prettier 1.11: CSS fixes and new TypeScript feature support · Prettier

prettier.io/blog/2018/02/26/1.11.0.html

JavaScript ReleaseNote Tools

Prettier 1.11リリース。
Facebookのコードベースは100% Prettierを通すようになった。
PostCSSの対応改善、TypeScript 2.7の対応、pluginでオプションのサポートなど。


Google Developers Blog: Announcing Flutter beta 1: Build beautiful native apps

developers.googleblog.com/2018/02/announcing-flutter-beta-1.html

google dart ReleaseNote

Dartを使いモバイルアプリを作るフレームワークのFlutter β1がリリースされた。


Node v9.7.0 (Current) | Node.js

nodejs.org/en/blog/release/v9.7.0/

node.js ReleaseNote

Node.js 9.7.0リリース。
util.getSystemErrorNameの追加、immediate.ref()immediate.unref()の追加など


moment/CHANGELOG.md at develop · moment/moment

github.com/moment/moment/blob/develop/CHANGELOG.md

JavaScript library ReleaseNote

moment 2.21.0リリース。
バグ修正やロケールの追加など


jasmine/3.1.0.md at master · jasmine/jasmine

github.com/jasmine/jasmine/blob/master/release_notes/3.1.0.md

ReleaseNote jasmine

jasmine 3.1リリース。 matcherにtruthyfalsyemptynotEmptyの追加など


TestCafe v0.19.0 Released - Rapid Test Development Tool, Screenshots of Page Elements, etc | TestCafe

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

JavaScript ReleaseNote library testing

TestCafe 0.19.0リリース。 ファイル監視し保存されたら再実行できるtestcafe-liveコマンドの追加。 セレクタの結果をフィルターするfilterVisiblefilterHiddenの追加、テキストマッチした要素を取得するwithExactTextの追加など


アーティクル


Demystifying ES6 Classes And Prototypal Inheritance ― Scotch

scotch.io/tutorials/demystifying-es6-classes-and-prototypal-inheritance

JavaScript article

ES2015のclass構文についての解説。
クラスの定義や使い方、継承について


Exploring different GraphQL Clients – ITNEXT

itnext.io/exploring-different-graphql-clients-d1bc69de305f

GraphQL library article

GraphQLクライアントの紹介記事。
FetchQL、GraphQL Request、Apollo Fetch、Lokka、Micro GraphQL React、URQL、Apollo Client、Relay Modernについて


Manual Typing is No Fun: Introducing TypeWiz! – Uri Shaked – Medium

medium.com/@urish/manual-typing-is-no-fun-introducing-typewiz-58e3e8813f4c

JavaScript TypeScript library Tools webpack

TypeScriptの型付けを補助するツール。
webpackやnode hookを使い変換したコードを実行し、実行時の関数の引数、返り値、変数へ実際に入った値から型を推測する。
その推測した型をTypeScriptのコードに対して適応することで型付けを補助する。


Announcing Capacitor 1.0.0 Alpha | The Official Ionic Blog

blog.ionicframework.com/announcing-capacitor-1-0-0-alpha/

JavaScript article

Ionicからクロスプラットフォームで動作するアプリ開発フレームワークのCapacitorがα版公開された


Angular v6で導入されるTree-Shakable DIの紹介 - らこらこブログ

lacolaco.hatenablog.com/entry/2018/03/01/150847

Angular article

Angular 6で導入される新しいDependency Injectionの仕組みと目的について。
bundleする際のdead codeを削除し易い依存関係にしたDIの仕組み


React.js Frequently Faced Problems – Samer Buna – Medium

medium.com/@samerbuna/react-js-frequently-faced-problems-45e7060ef884

React article

初めてReactを使うときのRact/JSXのつまりどころについて


🌏 Hello World! Progressive Web-Blog!!

blog.uskay.io/article/001-pwa-blog-loading

WebComponents JavaScript article PWA

Web Componentsを使ったブログの開発とPRPL Patternでのパフォーマンス最適化について。


hyperHTMLやlit-htmlが効率的に再描画を行う仕組み - Qiita

qiita.com/rikuba/items/92da6d99e2b0f831cc65

JavaScript DOM library

hyperHTMLやlit-htmlのDOM更新の仕組みについて。
タグ付きテンプレート関数を使い、初回時に更新時はどの位置の要素を更新するかをマッピング、更新時はマッピングを元に要素/値の更新だけを行う。
またテンプレートのキャッシュを利用し無駄なパースを避けるなどの工夫について。


Loading Third-Party JavaScript  |  Web Fundamentals  |  Google Developers

developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/loading-third-party-javascript/

JavaScript performance article

サードパーティスクリプトのパフォーマンスへの影響について。
開発者ツールを使っての可視化、開発者ツールやWebPageTestでリクエストをブロックしての影響度の確認方法、Long Taskの確認方法、Resource Hintなどを使った改善方法について


The npm Blog — Introducing `npm ci` for faster, more reliable...

blog.npmjs.org/post/171556855892/introducing-npm-ci-for-faster-more-reliable

npm article

pacakge-lock.jsonから常にクリーンインストールするnpm ciについて。
現在の存在するnode_modulesディレクトリを削除し、pacakge-lock.jsonを元にインストールするCI環境向けのインストールコマンド。


What's New In DevTools (Chrome 66)  |  Web  |  Google Developers

developers.google.com/web/updates/2018/02/devtools

Chrome article

Chrome 66の開発者ツールの変更点について。
ネットワークパネルからブラックボックススクリプト化を選択できるように、CSSファイルの変更のみだったLocal OverridesがHTML内のCSSにも対応など


webpack4への簡単なマイグレーションガイド - 技術探し

abouthiroppy.hatenablog.jp/entry/migrate-to-webpack4

webpack JavaScript article

webpack 4の変更点とマイグレーションのために必要な変更について。


スライド、動画関係


Web Components で 社内 UI ライブラリを作っている話

speakerdeck.com/jmblog/web-components-de-she-nei-ui-raiburariwozuo-tuteiruhua-1

slide WebComponents

プリミティブなコンポーネントをWebComponentとして作成することに関するスライド。
ReactやAngularなど各種ライブラリから利用できる共通コンポーネントとして作成。
lit-htmlを使ったコンポーネントとスタイル、コンポーネントの配布の問題についてなど


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


Bit - The fastest way to share code

bitsrc.io/

JavaScript webservice

JavaScriptのコード/コンポーネントシェアサービス。
コンポーネントを管理/公開するCLIが用意されている。
コンポーネントの公開/管理/発見の難しさの問題の解決を意図したサービス。


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


fabiandev/ts-runtime: Runtime Type Checks for TypeScript

github.com/fabiandev/ts-runtime

TypeScript library JavaScript

TypeScriptのコードをランタイムチェックできるように変換するツール


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