Vitest公式になったeslint-plugin-vitestを導入して、適切なVitestのお作法を学んでみる
import vitest from "@vitest/eslint-plugin"; export default [ { files: ["tests/**"], // or any other pattern plugins: { vitest }, rules: { ...vitest.configs.recommended.rules, // you can also use vitest.configs.all.rules to enable all rules + // e.g. 'vitest/no-test-return-statement': 'error', + "vitest/max-nested-describe": ["error", { "max": 1 }] // you can also modify rules' behavior using optio
Node.jsでTypeScriptのコードを実行できるようになるかも - 技術探し
module: add --experimental-strip-types by marco-ippolito · Pull Request #53725 · nodejs/node It is possible to execute TypeScript files by setting the experimental flag --experimental-strip-types. Node.js will transpile TypeScript source code into JavaScript source code. During the transpi... 💁♀️ まだマージされてない点に注意してください --experimental-strip-typesというフラグを実行時に付けることにより、Node.jsでTypeScriptのコードを実行できるようになる
CoffeeScript 辞めました - クラウドワークス エンジニアブログ
CoffeeScript 辞めました はじめに こんにちは、CrowdWorks のジャンヌチームのエンジニア bugfire です。 CrowdWorks は歴史のあるサービスで CoffeeScript が利用されている箇所が大量にあります。 具体的には411ファイルありました。1 いまとなっては CoffeeScript を利用したコードを新たに書くことも少なくなり、改善するときに TypeScript で書き直されることも多くなってきました。しかし、個別に変換すると時間が掛かってしまうため、まとめて機械的に変換することにしました！ 3行まとめ CoffeeScript より TypeScript の方に記述を移していきたい。 利用している Sprockets の CoffeeScript 変換コードを借用して全ファイルを変換しました。 確認は変換前後の出力 JavaScript コ
npmのprivate registryからGitHub Packages Registryに移行する
PLAIDでは社内のNode.jsパッケージの管理にnpm private registry(npmのregistryにprivateでパッケージをpublishする形式)を利用していました。 また、npm private registryを導入する以前の古いパッケージは、GitHubのプライベートリポジトリのURLをpackage.jsonに指定しているパッケージも混在していました。 その中で、2019年5月にGitHub Packages Registryがベータ公開されました。 Introducing GitHub Package Registry - The GitHub Blog GitHubアカウントとの統合性、GitHubリポジトリとGitHub Actionsでの連携を考えて、 社内パッケージをGitHub Packages Registryへ移行することにしました。 移行
TypeScriptの`--esModuleInterop`は一体何をやっているのか - stone's throw
そんなオプションあったんですか TypeScript2.7で追加されたらしい。 デフォルトでtrueとなるオプション。 Announcing TypeScript 2.7 | TypeScript まずはどうなるかチェック tsconfig.jsonにesModuleInterop: falseをセットした時と、esModuleInterop: trueをセットした時で違いを見る。 オプションなし //controller.ts //falseの場合、CommonJSはrequireで読み込まなければならない import commonjs = require('../CommonJS') import esmodule from '../EsModule1' import * as esmodule2 from '../EsModule2' const commonobj = new c
TypeScriptで MessagePack encoder/decoder を実装した - Islands in the byte stream
npm install @msgpack/msgpack でインスコできます。NodeJS v12 でベンチマークしたかぎり、JSONと同程度の速度で、これまで最速といわれてきた msgpack-lite よりもさらに少しだけ高速です。 github.com もともとこのリポジトリには uupaaさんによる実装（tagged as classic) があったんですが、メンテされなくなって久しく npmjs.com にもリリースされていないという状況でした。 https://github.com/msgpack/msgpack-javascript/tree/classic その後kawanetさんが msgpack-lite を実装したのが2015年。これが2019年現在、もっとも週間ダウンロード数の多いMessagePack for JSの実装です。 msgpack-lite ピュアJa
Node.jsで高速にファイル一覧を取得するfs.readdirのwithFileTypesオプション - Qiita
この記事はNode.js Advent Calendar 2018の2日目の記事です。 ちょっとしたネタですが、Node.js v10.10から入ったfs.readdirのwithFileTypesオプションとfs.Direntについて紹介したいと思います。 TL;DR 特定のディレクトリ配下のファイル一覧を表示する方法を紹介 読み込んだディレクトリのファイル種別がファイルかディレクトリか判定する方法を紹介 fs.statを使った従来の方法 Node.js v10.10.0から使えるfs.readdir(またはfs.readdirSync)のwithFileTypesとfs.Direntを使った方法 fs.statを使った判定方法 例えばNode.jsを使ってディレクトリ配下のファイル一覧を表示したいとき以下のようにfs.readdirとfs.statを使って書くことができます。 cons
Webpack の考え方について - mizchi's blog
なぜ初心者は webpackが解らないのか？- Why can’t you understand the webpack? - from 健人 井関 www.slideshare.net この記事バズってたけど、わからない人がよりわからなくなる、という点で問題だと思っていて、webpack の目的の本質的な部分から整理する必要があると思います。 (あと友人が webpack に挑戦していたので入門資料も兼ねてる) Webpack の本質的な部分は次の3つです。それ以外は全部おまけ機能だと思ってよいです。 ES Modules のエミュレート node_modules のリンカ 拡張子ごとの変形 Webpack が本当にやりたいこと こういうコードがあるとします。 // src/a.js export default () => console.log('hello'); // src/in
AyoでWorkerの実装が進んでいる - 技術探し
Chrome Dev Summitのため、サンフランシスコで書いています。 Ayo側 Node側 Workerとは？ メソッド・変数 isMainThread postMessage(value[, transferList]) threadId workerData クラス MessageChannel MessagePort postMessage(value[, transferList]) Worker new Worker(filename, options) filename options Worker内の大きな違い postMessage(value[, transferList]) terminate([callback]) threadId 最後に さて、最近、Ayo側でWorkerの動きが活発なのでそろそろまとめてみた。 昨日一日でこれだけ出ている...! Ayo側
Node.jsのビルトインモジュールに名前空間が使われるかもしれない - 技術探し
console.log(fs.readFileSync(__filename, "utf8")); このように、@nodejsという名前空間でビルトインモジュールを保護する案が出ています。 もちろん、過去のコードに影響はありません。 PR は一旦、閉じられました。 WIP: tools: add core files to @nodejs namespace by cjihrig · Pull Request #20922 · nodejs/node This is probably not the ideal solution, but I wanted to at least get the ball moving after the little bit of 'worker' module naming drama. This commit allows all o
フロントエンドのバリデーションを hapi の joi で行うと手軽で便利 - Qiita
Webフロントエンドの入力とバリデーションは、煩雑なのに手を抜きづらいという、なかなか難しいテーマとして長らく存在し続けています。 最近のSPA開発では、ReactやVue向けに、専用のライブラリが提供されていることも少なくありません。しかしながら、それらは得てして特定のフレームワークに依存しており、かつ解決したい課題に対してオーべースペックであることが少なくありません。 そうして簡単なフォーム作成の時に使える丁度良いフレームワークはないか悩んでいたところ、サーバーサイドJS向けのバリデーションライブラリである hapijs/joi が非常にマッチしていること、そして、その joi が、ブラウザ向けに joi-browser として移植されていることを知り、実際に案件に投入したところ丁度良い塩梅で便利だったのでご紹介いたします。 Joi (オリジナルNode.js版) の特徴と使い方 Jo
webpack -> FuseBox 移行メモ - Qiita
webpackを使っていたプロジェクトをFuseBoxに移行してみました。 バンドル時間が超速くなり、バンドルファイルサイズが超小さくなりました。 webpack FuseBox package.json package.jsonの比較です。 "devDependencies": { "babel-cli": "^6.26.0", "babel-core": "^6.23.1", "babel-eslint": "^8.0.0", "babel-loader": "^7.1.2", "babel-preset-es2015": "^6.22.0", "babel-preset-flow": "^6.23.0", "babel-preset-react": "^6.23.0", "css-loader": "^0.28.7", "eslint": "^4.6.1", "eslint-load
WEB+DB PRESS vol.99から連載が始まりました＆webpack3の補足
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。エンジニアの穴井(@pirosikick)です。去年の10月よりヤフー黒帯制度にて、JavaScriptの黒帯をやっています。普段はヤフーの社内ベンチャー制度からできたリッチラボで福岡で働いていますが、ご飯がおいしすぎて太りました。痩せたい！ ここからが本題ですが、今月24日発売されましたWEB+DB PRESS vol.99より、ヤフーのフロントエンドエンジニアによる連載が始まりました！連載タイトルは「どんとこい！フロントエンド開発」です。ヤフーのフロントエンドエンジニアで、流れの速いWebフロントエンドで使われる技術を分かりやすく解説していきますので、どうぞよろしくお願いします！ 初回は「入門webpack2」を寄
JavaScriptからAmazon Cognitoを使うためのまとめ - console.lealog();
最低限な要件だけ使ってみるにしても罠だらけだったのでメモ。 調べてもろくな情報出てこなかったので、業務レベルではまじで誰も使ってないんじゃねーのって気持ちがある。 願わくばもう使いたくない( ˘ω˘) Amazon Cognito is 何 そもそもですが・・。 Amazon Cognitoでできることは、大きく分けて2つです。 ログイン・セッション機能 データの同期機能 AWSのコンソールのCognitoのページUI的にも、 User Pools Federated Identities ってな切り分けになっててそれぞれ対応してる。 まあこのサーバーレスだなんだの時代に、そういうことできるサービスがあることは不思議ではない。 Alternativesという意味では、Firebase Authenticationとかあたり？ JavaScriptのSDKたち そしてjsで使う上で必要であろ
同じイベントのaddEventListenerを1つにまとめるライブラリを書いた
1つにまとめる? Reactなどのコンポーネント志向のライブラリを使っていると、各コンポーネントで同じ要素へ同じイベントを貼っていることがあります。 // Component A const handlerA = (event) => {}; window.addEventListener('scroll', handlerA); // Component B const handlerB = (event) => {}; window.addEventListener('scroll', handlerB); // singleton const eventObserver = require("ui-event-observer"); // シングルトンじゃない方法 // require("ui-event-observer").UIEventObserver // Component
型定義ベースのアサーションライブラリ types-assert を書いた - Qiita
const compile = require('types-assert/compiler').compile; const assert = require('types-assert/assert').assert; // tsファイルをtypes-assertのオブジェクトに変換 const type = compile('type.ts'); const obj1 = { stringProp: "hoge", numProp: 2 }; // 型が正しい場合はスルー assert(obj1, type.Interface1); const obj2 = { stringProp: "hoge", numProp: "2" }; // 型がおかしいのでError assert(obj2, type.Interface1);
Nightmare v2(Electron) でブラウザ上でES2015のコードを個別にrequireしてユニットテストを書く - Qiita
'use strict'; // nightmare const Nightmare = require('nightmare'); const path = require('path'); const TEST_HTML_PATH = "file://" + path.join(__dirname, "test.html"); // create global.browser = null; let startBrowser = function * (){ global.browser = Nightmare({ show: false, nodeIntegration: true }); yield browser .goto(TEST_HTML_PATH) .wait('body') .evaluate(() => { require("babel-register"); //
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - alangpierce/sucrase: Super-fast alternative to Babel for when you can target modern JS runtimes
GitHub - babel/awesome-babel: 😎A list of awesome Babel plugins, presets, etc.
GitHub - mysticatea/eslint-plugin-node: Additional ESLint's rules for Node.js
