module bundlerの作り方(準備編) - hiroppy's site
今回は中身がどう動いているかを解説したいと思います。 最初のこの記事では、最低限の実装を説明していくことにします。 webpack のアルゴリズムの仕組みはこちらを読んでください。 必要なステップ 必要なステップは以下の 3 つです。 エントリーポイントからのすべてのモジュールを走査し、requireを解決後にユニーク id を付与していく コード内のモジュールパス(requireの引数(e.g. ./module.js))を id へ置換する runtime のコードテンプレートの作成 IIFE(即時関数)箇所とそれに付随する引数の module 群 この実装されあれば、動くコードはできます。(2 つめは optional でもいいけど後からつらくなる) モジュール解決 今回は説明しやすいように関数を 2 つに分けています。 すべてのモジュールの把握と ID 作成 コード内の requi
Testing JavaScript with Kent C. Dodds
Learn the smart, efficient way to test any JavaScript application.YOUR ESSENTIAL GUIDE TO FLAWLESS TESTING Why bother testing your JavaScript? When a user encounters a bug they look like this: 🤬 Bugs grind work to a halt. Bugs cause financial harm. Every single time a bug is encountered, user trust erodes. Bugs are bad. And who gets blamed? You. The developer. You know you should squash bugs befo
ResizeObserver - Web APIs | MDN
In the resize-observer-text.html (see source) example, we use the resize observer to change the font-size of a header and paragraph as a slider's value is changed causing the containing <div> to change width. This shows that you can respond to changes in an element's size, even if they have nothing to do with the viewport. We also provide a checkbox to turn the observer off and on. If it is turned
Common mistakes with React Testing Library
Common mistakes with React Testing LibraryMay 4th, 2020 — 15 min read Hi there 👋 I created React Testing Library because I wasn't satisfied with the testing landscape at the time. It expanded to DOM Testing Library and now we have Testing Library implementations (wrappers) for every popular JavaScript framework and testing tool that targets the DOM (and even some that don't). As time has gone on,
TypeScriptでReactをやるときは、小さいアプリでもReduxを最初から使ってもいいかもねというお話 | フューチャー技術ブログ
TypeScriptでReactをやるときは、小さいアプリでもReduxを最初から使ってもいいかもねというお話 前日の丸野さんがReduxを分かりやすく解説してみたというReduxの基本的な紹介を行いました。Reduxはコンパクトなライブラリながらよく考えられた仕組みです。Jetpack ComposeやらFlutterやら、ReactインスパイアなGUIフレームワークも増えているので、JavaScript（TypeScriptではなく） + Reduxをやってみるのは、ウェブに限らず、今後のユーザーインタフェース関連のコードを触るための理解力向上には良いと思います。 本エントリーは、プロダクションコードでたくさんRedux周りにもreducerなどを実装しなくてはいけなくなったときの次のステップとして、Redux Toolkitの紹介をします。 たいてい、Reduxは導入コストが大きく、
あなたの window.open はなぜ開かないのか，Chrome で - マンガ〜ノ伊藤ノ〜ト
先日 window.open をしようとしたらポップアップブロッカーに阻まれて open することができなかった． Blocked まあ，これならよくあることなのだが，いかんせん自分の記憶では onClick のようなユーザーのアクション内で開かれた window.open は阻まれないことになってると思っていた．だからそのときも onClick のイベントハンドラ内で window.open したから大丈夫だろう，と思っていたら，見事にブロックされてしまったのでなぜだろう，となっていた． 検証 なので，検証するために 3 つのケースを用意してみた: 検証ページを用意したのであなたの環境でも試してみてね♥ 今回試すブラウザは Google Chrome を前提にしてます ケース1 const immediate = () => { window.open('https://www.goog
Fixing JavaScript Date – Getting Started
I’ve been off the blog for a while, which has to do with a lot of things going on in my life. That said, I’m happy to report that I’m back with stories about a big project – fixing the date handing in the JavaScript programming language itself! History A little backtracking here. I met Brian Terlson not too long after moving up to Redmond Washington to work for Microsoft. Brian is Microsoft’s repr
tsconfig.jsonはJSONじゃないと言う話 - 焼売飯店
気になったので調べてみました。 tsconfig.jsonと普通のJSONの大きな違い tsconfig.jsonには、コメントが書けます。 tsc --init した時に生成されるtsconfig.jsonに、大量にコメントが付けられているので、すぐに気付くことと思います。 例) { "compilerOptions": { "target": "es5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */, "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd
Understanding the ECMAScript spec, part 1 · V8
Show navigation All episodes In this article, we take a simple function in the spec and try to understand the notation. Let’s go! Preface #Even if you know JavaScript, reading its language specification, ECMAScript Language specification, or the ECMAScript spec for short, can be pretty daunting. At least that’s how I felt when I started reading it for the first time. Let’s start with a concrete ex
A fucking rant about fucking const vs fucking let - @jamiebuilds
I didn't want to be the guy write this post, but I am because Chris told me to so blame that fuckin guy. I'm a victim here. But you're all using const in JavaScript too much and it does bug me just ever so little. 1. const doesn't do shit and we all know it For starters, let's agree that const is fucking useless and we're inventing meaning... const THIS_SHOULDNT_CHANGE = { right: "?" }; THIS_SHOUL
JavaScriptの「カバー文法」とは何か - Qiita
この表を上から読みつつ多少言葉で説明すると以下のようになります。 const foo = bar + 3;はStatementListItemである。なぜなら、DeclarationはStatementListItemの一種であると定義されているから。 const foo = bar + 3;はDeclarationである。なぜなら、LexicalDeclarationはDeclarationの一種であると定義されているから。 const foo = bar + 3;はLexicalDeclarationである。なぜなら、LetOrConst, BindingList, ;が並んだものはLexicalDeclarationであると定義されているから。 constはLetOrConstであると定義されている。 foo = bar + 3 はBindingListである。LexicalBind
複数のモジュール形式(CommonJS, ES Modules, UMD)をサポートしたnpmパッケージの作り方 in TypeScript - dackdive's blog
はじめに npmパッケージを開発するとき、パッケージ利用者の実行環境に合わせて適切なモジュール形式のファイルをパッケージに含め、提供する必要があります。 具体的には、たとえば以下のようなバリエーションが考えられます。 Node.js環境であれば CommonJS 形式 (module.exports / require() ) ブラウザ環境で、webpackやRollupなどのモジュールバンドラーを前提とするならば CommonJS や ES Modules 形式 (export / import ) ブラウザ環境で、モジュールバンドラーなどは使わず<script>タグでファイルを読み込んで利用するならば UMD 形式 このとき、パッケージ提供側はどういったファイルをパッケージに含めるべきなのか、またそれを TypeScript でどのように実現できるのかがあまりよくわかっていなかったので
TypeScript の流儀
Bonfire Frontend #4 http://yj-meetup.connpass.com/event/136480/
高速化の観点から new Array(100) を使わない方が良い理由
別件で V8 の JIT コードの逆アセンブルを眺めている時に気づいたのですが、JavaScriptで new Array(100) という形で配列を作るのは、高速化の観点から言うと V8 においては避けるべき書き方です。 高速化を求める方は、 new Array() や [] で作成して Array#push で追加していくのが良いでしょう。この記事では、その理由を説明します。 今回の記事は、以下の V8 のブログ記事を参考にしております。 https://v8.dev/blog/elements-kinds 「詰まった配列(Packed Array)」と「穴あき配列(Holey Array)」 v8 は内部的に、その配列がどういうタイプの配列であるかの状態を記録しており、その情報を利用して最適化を適用します。状態は内部的には21個あるのですが、今回話題にするのは、その中でも「詰まってい
commenthol/date-holidays: worldwide holidays
world-wide holidays in gregorian calender This module provides dates of holidays for various countries, states and regions by type while considering the applicable timezone. The features are: calculation of public, bank and observance holidays for different countries, state, region, following ISO 3166-2 consideration of timezones for holiday checks consideration of start and end time dependent on
David, a dependency management tool for Node.js projects
You depend on other projects. You want to stay up to date. David's got your back.David gets you an overview of your project dependencies, the version you use and the latest available, so you can quickly see what's drifting. Then it's all boiled down into a badge showing the current status, which you can embed on your site. bower - bowerrequest - requestgruntjs - gruntexpressjs - expressalanshaw -
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Recoil at React Europe 2020
When not to use package-lock.json
Nondestructive_TypeScript.md
Coveralls.io - Test Coverage History and Statistics