Fork me on GitHub

2019-11-19のJS: Front-End Tooling Survey 2019、Reactの作り方

Edit on GitHub 編集履歴を見る

JSer.info #462 - フロントエンド周りのツールについてのアンケート行うFront-End Tooling Survey 2019の結果が公開されています。

3,005人の開発者にCSS、JavaScriptなどに関するアンケートを行った結果を去年の結果と比較したものが掲載されています。

CSSのプリプロセッサ、フレームワーク、命名規則/CSS-in-JS。
JavaScriptのフレームワーク/ライブラリ、Bundler、Transpiler、テスト。
また、パフォーマンステスト、アクセシビリティテストなどについても項目もあります。

興味がある人は見てみると良さそうです。


Build your own Reactという記事では、スクラッチでReactのようなDOMレンダリングの仕組みを実装していっています。
createElementrenderというようにStep by Stepで実装していき、Hooks APIの仕組みまでを実装していくチュートリアル的な内容になっています。

記事ではCode Surferを使ったコードと文章が同期して進む形で表示されています。

また、React上でその仕組みを見ていきたい人は、React上でカスタムレンダラーを実装するという次の動画が面白いかもしれません。


ヘッドライン


Bytecode Alliance

bytecodealliance.org/articles/announcing-the-bytecode-alliance

WebAssembly news

Mozilla、Fastly、Intel、Red Hatが中心となってWebAssemblyのセキュアなエコシステムを作ることが目的のBytecode Allianceという団体が発足した。
npmを例にした現在のエコシステムでの攻撃事例、Nanoprocessと呼ばれるSandboxの仕組みについても書かれている。


アーティクル


Upcoming notification permission changes in Firefox 72 - Mozilla Hacks - the Web developer blog

hacks.mozilla.org/2019/11/upcoming-notification-permission-changes-in-firefox-72/

Firefox security article

Firefox 72で通知の許可ポップアップはユーザーインタラクション起因じゃないと表示されなくなる件について


Build your own React

pomb.us/build-your-own-react/

React JavaScript tutorial article

Reactのようなコンポーネントのレンダリングの仕組み、Hooksの仕組みを実装しながら見ていく記事


Handling Errors in Express | Zell Liew

zellwk.com/blog/express-errors/

node.js article

Expressのエラーハンドリングについての記事。
express-async-handlerを使ったasyncのエラーハンドリング、http-errorsを使ったエラーオブジェクトの作成、カスタムエラーハンドリングやFallbackについてなど


The Front-End Tooling Survey 2019 - Results - AshleyNolan.co.uk - Blog and Portfolio for Ashley Watson-Nolan

ashleynolan.co.uk/blog/frontend-tooling-survey-2019-results

JavaScript CSS アンケート article

JavaScriptやCSSのツールに関するアンケートをするThe Front-End Tooling Survey 2019の結果が公開された。
プリプロセッサ、フレームワーク、Lint、Bundler、Testing、Performance、Accessiblityなどについてのアンケート


Building a native add-on for Node.js in 2019 - Sqreen Blog

blog.sqreen.com/building-a-native-add-on-for-node-js-in-2019/

node.js article

Node.jsのネイティブアドオンの作り方。
N-APIのバージョンとNode.jsの対応表、NANを使ったネイティブアドオンの書き方について


Publishing Typings to DefinitelyTyped - Level Up Coding

levelup.gitconnected.com/publishing-typings-to-definitelytyped-d4e0777e40f5

TypeScript npm article

@typesパッケージの作成方法、削除方法、DefinitelyTypedへのPull Requestの出し方、テストについてなど


スライド、動画関係


Chrome Dev Summit 2019 - All Sessions - YouTube

www.youtube.com/playlist?list=PLNYkxOF6rcIDA1uGhqy45bqlul0VcvKMr

Chrome video イベント

Chrome Dev Summmit 2019の動画一覧


フロントエンドエンジニアのためのセキュリティ対策 ~XSS編~ / #frontkansai 2019 - Speaker Deck

speakerdeck.com/masashi/number-frontkansai-2019

XSS JavaScript slide

XSSについてのスライド。
XSSの種類(Reflected、Stored、DOM Based)の紹介とそれぞれの典型的な対策。
また、CSPやTruested Typesなどの予防策についてなど


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


Integrate your data, APIs, and cloud services in minutes - Pipedream

pipedream.com/

node.js webservice API

Node.jsでコードとして書けるIFTTT的なウェブサービス。
SlackやGitHubなどからイベントを受け取り、コードで処理して、別のサービスにデータを送ることができる


Metrics

web.dev/metrics/

Chrome performance tutorial browser

ウェブサイトのパフォーマンスメトリクスについての解説。
FCP、LCP、FID、TTI、TBT、CLSについてそれぞれの解説、計測方法、改善方法が書かれている。


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


NodeBB/NodeBB: Node.js based forum software built for the modern web

github.com/NodeBB/NodeBB

node.js BBS

Node.js製のフォーラムウェブアプリ


NeekSandhu/onigasm: Oniguruma regex library on the web using WebAssembly

github.com/NeekSandhu/onigasm

JavaScript WebAssembly library

正規表現エンジンであるOnigurumaのWebAssembly版


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