Fork me on GitHub

2019-01-16のJS: Storybook 4.1、TypeScriptへの段階的移行、2018年のスター数増加率

Edit on GitHub 編集履歴を見る

JSer.info #418 - Storybook 4.1がリリースされました。

PreviewエリアとMangerエリアを分離することでパフォーマンスの改善がされています。
また、Storybook 4.0ではReactのContext APIに依存していたため、React 16.3以降でしか動きませんでした。Storybook 4.1ではReact 15.xでも動作するように、後方互換性の修正が含まれています。

その他としてStorybook Addon Cssresourcesの追加などが行われています。


Babelで書かれたJavaScriptライブラリをTypeScriptへ移行する方法 | Web Scratchという記事では、TypeScriptへ段階的に移行する方法について書かれています。
Babelを使ってES2015で書かれていたライブラリを例に、ステップバイステップでTypeScriptへ段階的に移行する手順を紹介しています。


GitHubのスター数の増加数をまとめたJavaScript Rising Starsの2018年版が公開されています。

フロントエンドフレームワーク、フレームワークごとのエコシステム、Node.js、モバイル、コンパイラ(Transpiler)、ビルドツール、テストフレームワーク、エディタ、CSS in JS、静的サイト、GraphQLの項目別にまとめられています。


JSer.infoをサポートするには

JSer.info Sponsors

JSer.info SponsorsGitHub SponsorsとしてJSer.infoを支援してくれている方々です。


ヘッドライン


Storybook 4.1: Need for Speed – Storybook – Medium

medium.com/storybookjs/storybook-4-1-need-for-speed-b05fd5f1e83d

JavaScript UI library ReleaseNote

Storybook 4.1リリース。
パフォーマンスの改善、React 15.xの後方互換性を追加、 CSS Resources addonの追加など


Release Notes for Safari Technology Preview 73 | WebKit

webkit.org/blog/8555/release-notes-for-safari-technology-preview-73/

safari ReleaseNote

Safari Technology Preview 73リリース。
globalThisのサポート、Web Inspectorでm3u8の中身をテキスト表示できるようになるなど


Video.js 7.4 | Video.js Blog

blog.videojs.com/video-js-7-4/

JavaScript video library ReleaseNote

Video.js 7.4リリース。
Live UIのサポート、VoiceOverの対応などアクセシビリティの改善など


Release v3.0.0 · juliangarnier/anime

github.com/juliangarnier/anime/releases/tag/v3.0.0

JavaScript animation library ReleaseNote

アニメーションライブラリのanime 3.0.0リリース。
新しいイージング関数の追加、ライフサイクル系のコールバックを追加、keyframesシステムの刷新など。
破壊的な変更点としてAPIが一部リネームされている


Release 1.1.0 · avajs/ava

github.com/avajs/ava/releases/tag/v1.1.0

JavaScript testing ReleaseNote

AVA 1.1.0リリース。
実行中のテストファイルのパスなどを取得できるmetaオブジェクトの追加など


DoneJS 3

www.bitovi.com/blog/donejs-3

JavaScript library ReleaseNote

DoneJS 3リリース。
CanJS 5.0、StealJS 2.0へのアップデートなど


アーティクル


Babelで書かれたJavaScriptライブラリをTypeScriptへ移行する方法 | Web Scratch

efcl.info/2019/01/09/babel-to-typescript-library/

JavaScript babel TypeScript article tutorial

ライブラリのコードベースをTypeScriptへマイグレーションしていく方法について。
Babelで行っていたES2015からの変換処理をtscに移行し、コードベースをTypeScriptへと段階的に変換していくチュートリアル


TypeScript 2.8: Conditional Types — Marius Schulz

blog.mariusschulz.com/2019/01/09/typescript-2-8-conditional-types

TypeScript article

TypeScript 2.8で導入されたConditional Typesについて。
Conditional Typesを使った型の分岐処理について、さまざまなコード例を紹介している。
NonNullable、Inferの利用例などについて


Computer science in JavaScript 2019: Linked list - Human Who Codes

humanwhocodes.com/blog/2019/01/computer-science-in-javascript-linked-list/

JavaScript algorithm article

JavaScriptでLinkedListを実装しながら、そのデータ構造について学ぶ記事


Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう (1) イントロダクション | Hypertext Candy

www.hypertextcandy.com/vue-laravel-tutorial-introduction

Vue php tutorial article JavaScript

Vue.js + Vue Router + Laravelを使ったSPAアプリケーションを作成する連載記事。
写真共有アプリを例にクライアントサイドとサーバサイドをどちらも作成していくチュートリアル


How To Learn CSS — Smashing Magazine

www.smashingmagazine.com/2019/01/how-to-learn-css/

CSS article

CSSをどのように学ぶかについての記事。
Selector、Boxモデル、Flow、Layout、Aligment、SizingなどCSSの基礎となる要素について解説やリソースを紹介している


Front-End Performance Checklist 2019 [PDF, Apple Pages, MS Word] — Smashing Magazine

www.smashingmagazine.com/2019/01/front-end-performance-checklist-2019-pdf-pages/

performance article browser

フロントエンドに関するパフォーマンスチェックリスト


Fast GIF parsing on the web with WASM + Wuffs - DEV Community 👩‍💻👨‍💻

dev.to/chromiumdev/fast-gif-parsing-on-the-web-with-wasm--wuffs-48l4

WebAssembly article

GIFパースをEmscripten + WebAssemblyで行う話。
どのようにbindingを作成し、デコード処理をして、Canvasで描画するかについて


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


2018 JavaScript Rising Stars

risingstars.js.org/2018/en/

JavaScript github

JavaScript関係のプロダクトにおける、2018年のGitHubスター数の増加数ランキングが公開された


Markdown Driven な scaffolding ツールを作った - wadackel.me

blog.wadackel.me/2019/scaffdog/

Markdown Tools node.js

Markdownの1ファイルに複数のファイルテンプレートを書いて、複数ファイルを出力できるファイル生成ツール


FromJS - An experimental data-flow analysis tool for front-end JavaScript

www.fromjs.com/

Chrome DOM Extension babel debug Tools

表示されている文字列がコードのどこで生成されているかをDOMインスペクトできるツール。
HTMLを生成するDOM APIを上書きして、トレースできるようにしたChromeを立ち上げデバッグできるようにしている。


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


DominicTobias/keshi: A better in-memory cache for Node and the browser

github.com/DominicTobias/keshi

JavaScript library

ブラウザとNode.jsで動くインメモリキャッシュライブラリ


この記事へ修正リクエストをする
JSer.info Slackに参加する