いまさら聞けないnpm dependencies - 空の箱
最近pnpmのドキュメントを眺めていたんだけど、そこでよく知らない依存関係の種類が出てきた。いまさら人に聞くのは恥ずかしいと思ったので、理解したことをまとめてアウトプットしておく。 そもそも依存関係とは？ package-lock.jsonとは？ といった話は理解できている前提で書く。 dependencies / devDependencies 最も基本となる依存関係。npm installするとdependenciesに書かれたものは全てインストールされることになる。 なので、本番環境で使うものしかここには入れてはいけない。「ではそれ以外のものはどこにいれるのか？」となるが、基本的にはdevDependenciesとなる。 この話自体はいろんな記事やカンファレンスのトークで擦られ続けているので、もうお腹いっぱい感がある。 一応書くと、devDependenciesにインストールするには
fetch() では Host ヘッダーを設定できないし話はそこまで単純じゃない - Object.create(null)
JavaScript (TypeScript) のコードから HTTP リクエストを送る手段として, 最近では Web 標準の一つである Fetch Standard で定義された fetch() が使われることが多いですね. await fetch("https://example.com"); リクエストヘッダーには Host を設定できない Fetch Standard では Host をはじめとして Content-Length, Cookie, Origin など, いくつかのリクエストヘッダーを設定 (JavaScript から上書き) することが禁止されています. https://fetch.spec.whatwg.org/#forbidden-request-header いずれのヘッダーも HTTP やセキュリティ上の取り決めに従うために, ページの JavaSript
csv-parser モジュールでCSV文字列を処理したい場合の方法 - Qiita
import csvParser from "csv-parser" import { Readable } from "stream" //CSVが格納された文字列 const csvString = `col1,col2,col3 row1,row2,row3 row1,row2,row3` // Readable Stream を作成 const readable = new Readable({ read:(size) => { //この処理の記述の必要性が実は良く分からない return true } }) readable.on("data",(chunk) => { //parse されたデータ console.log(chunk) }) .on("err",(err) => { //error 時の処理 }) .on("end",() => { //終了時の処理 }) .w
軽量＆高速なCSV処理！csv-parserのNode.js/Next.jsでの活用法まとめ
csv-parserとは Node.jsでCSVファイルを読み込むときに使用するNode.jsライブラリです。 軽量でストリームベースで動作するのでファイルの容量が大きいものでもメモリ効率良く処理できます。 通常、Node.jsでCSVを処理する際はJSONに変換する処理が必要になりますが、その処理速度は1秒当たり約9万行処理されます。（1行当たりのデータ量にもよる） 実装アプローチ CSVファイルを処理する実装方法には、主に以下の2つのアプローチがあります。 ファイルシステムからの直接読み込み import fs from "fs"; import csv from "csv-parser"; const parseCsv = async (filePath) => { const results = []; try { await new Promise((resolve, rejec
【海外ニュース】ES2025対応の詳しすぎるJavaScript解説書が無料公開され全プログラマ大歓喜
6月14日、Axel Rauschmayer氏は新刊書籍「Exploring JavaScript (ES2025 Edition)」を公開した。 本書は、モダン JavaScript の習得を容易にし、初学者から上級者までを対象に ES2025 までの全機能を体系的に解説するものである。以下、その内容を紹介する。 書籍の概要 「Exploring JavaScript」は、従来版「JavaScript for impatient programmers（せっかちなプログラマのためのJavaScript）」を大幅に拡充した最新版だ。モダンな機能に焦点を当てることで、読者が古い文法に煩わされずに学習を開始できる構成となっている。 ハイライト モダン機能を中心に据え、素早く学び始められる 必要に応じて深掘りできる発展的セクションを用意 テスト駆動型演習・フラッシュカードなどの補助教材を同梱 E
Prismaの導入とメリットを考える - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに Node.js + TypeScriptによるサーバーサイドの開発は、クライアントサイドとスクリプトを同じ言語で管理できるなどのメリットがあります。 その際に使用するのが、Node.jsウェブフレームワークであり、データベース連携は必要不可欠です。 ですが、普段データベースに触れる機会が少ないデータベース初心者にとって、SQL文を書くのはハードルが高く感じます。 そういった状況で役に立つのが、「Object-Relational Mapping / オープンソースのオブジェクト関係マッピング」(以降ORM)です。 「Prism
Async / Awaitを使う時、Asyncファンクションは必ずPromiseが返る
Promise 軽くPromiseの話からします。 ある程度分かっている人であれば読み飛ばして大丈夫です。 Promiseは、JavaScriptで非同期処理を行う際に使われるパターンで 外部通信や、データの取得など、同期的に動いてる処理の中に割り込ませる形で使います。 データの取得や通信で取得に完了していない状態で、次の処理に移った場合 次の処理の中に、通信によって得られたデータを使った処理が含まれていると、正常に動作しない事があります。 例えば以下の様な状況 function getUserAge() { const user = getUser(1) // 外部情報を取得 return user.age } idが1のユーザーを取得し、そのageを取得する関数があったとして この時、ユーザーは外部APIなどを通して取得する必要がありましたが、取得に時間がかかってしまった時 user.
JavaScriptのイテレータ, イテラブル, ジェネレータを理解する！
お久しぶりです。GMOインサイトの天河です。 ついこの間、JavaScriptのジェネレータについて社内勉強会で発表したのでその内容をまとめます。 ※ 注意 本記事で言及している「ジェネレータ」はJavaScriptでの言語仕様です。一部通ずる箇所もあると思いますが、Python や C# など他の言語での使われ方についてはしかるべき文献を見てください。 目的 ジェネレータ が何かわかるようになる ジェネレータについて面接で聞かれても余裕で答えられるようになる 実装時にジェネレータを選択肢として持てるようになる 対象読者 ジェネレータ が何か全くわかっていない人 ジェネレータ について認知はしているものの、どういうものかは把握していない人 ジェネレータ を知ってはいるものの、使い所がわからない人 はじめに ジェネレータを理解するためには、「イテレータ」と「イテラブル」について知る必要があり
ESLintのローカルルールで独自のコーディング規約を実装する - ドワンゴ教育サービス開発者ブログ
この記事はドワンゴ Advent Calendar 2023 の 22 日目の記事です。 ドワンゴ教育事業Webフロントエンドチームの berlysia です。1 この記事では、オンライン学習サービスN予備校の開発を支えるコーディング規約の考え方に少し触れ、その運用を支えるESLintの活用を紹介します。 この記事の内容は、他社様主催イベントにて発表した内容の再構成です。 speakerdeck.com コーディング規約は実行可能にしたい 教育事業のWebフロントチームには、細かいコーディング規約が書かれた文書は存在しません。コーディング規約はESLintをはじめとする各種ツールによって、自動で検出・修正可能な形になっています。 文書という形でなく、各種ツールのコンフィグファイルとそのコメントとしてまとまっている、と言い換えてもよいかもしれません。ドキュメンテーションは重要な仕事ですが、そ
yarn v3 の独自機能を避けつつ yarn v1 から v3 へのアップグレードをする
yarn v3 が出ました。詳しい解説は譲るとして、esbuild integration や パフォーマンス向上が目玉です。 Yarn 3.0 🚀🤖 Performances, ESBuild, Better Patches, ... - DEV Community 流石に v1 はもう古いが、 v2 からの独自路線は受け付けがたい…という立場なのですが(yarn オリジナル作者の sebmck も難色を示しています)、今回は yarn 特有の機能をできるだけ避けて、できるだけ npm や pnpm 等と互換な部分だけで yarn v3 を使います。なので pnp も使いません。eslint や vscode の typescript 等でハマりどころが多すぎます。 ゼロインストールも否定派です。git blob objects のサイズが爆発して仕事にならなくなったことがあります。
yarn v1 でも yarn dlx が使える？ : (*x).b=z->a+y/c
yarn dlx を使いたいパッケージをインストールせず一回限りのコマンドを実行したいとき npx コマンドが使えます ただ 普段使いが yarn ですし キャッシュ的な意味でも できれば npm 系コマンドの npx ではなく yarn にしておきたいです ですが yarn の 「yarn run」 は package.json の scripts コマンドやインストール済みのコマンドの bin に指定されたものを実行できるだけです 未インストールパッケージのコマンドは実行できません V2 以降の yarn (berry) なら 「yarn dlx」 というコマンドが用意されていますが V1 の yarn (classic) には dlx コマンドは無いはずです ドキュメントを見ても dlx は見当たらないです 未だに yarn classic をメインに使ってるので これは不便です で
YarnV2 こと Yarn@berry を試してみている - Qiita
Yarn とは yarn とは雑には alternative npm。高速な Node.js 向けのパッケージマネージャ。 package.json を解釈し、高速にパッケージの依存解決を行ってくれる。 Yarn V2 のインストール方法 Yarn v2 は現状 yarn@berry としてバージョンを指定することでインストール可能。 V1 と V2 の違い 一次情報はこちらのエントリを参照のこと。スクショは公式から引用。 https://dev.to/arcanis/introducing-yarn-2-4eh1 個人的に特に気になっているものに 🍎 (赤いリンゴ) をつけておく。 色々途中なので変化したり間違ってる部分はご容赦ください。 🍏 CLI出力の改善 yarn v1 では絵文字が使われて可愛らしい出力だったが、v2 からは処理の具体的な内容を表示するように変化した。 色はア
JavaScript でスタイルシートを構築する CSSStyleSheet
CSSStyleSheet インターフェースは、JavaScript でスタイルシートを構築し、操作するための API です。CSSStyleSheet() コンストラクターで新しいスタイルシートを作成し、.replaceSync() メソッドでスタイルを適用できます。 CSSStyleSheet インターフェースは、JavaScript でスタイルシートを構築し、操作するための API です。CSSStyleSheet() コンストラクターで新しいスタイルシートを作成し、.replaceSync() メソッドでスタイルを適用できます。 スタイルが適用された CSSStyleSheet オブジェクトは、document.adoptedStyleSheets プロパティに代入することで、ページ全体に適用されます。 const styleSheet = new CSSStyleSheet();
ESLint v8.56.0 の `reportUnusedDisableDirectives` とは何か？
この記事は Cybozu Frontend Advent Calendar 2023 の 24 日目の記事です。 先日リリースされた ESLint v8.56.0 でオプション reportUnusedDisableDirectives が改善された話です。 元々どういうオプションだった？ // eslint-disable-line みたいなルール無効化ディレクティブを書いたけど、しばらくして何かしらのコード修正の影響でもうそのルール違反は発生しなくなって、でも無効化ディレクティブは消し忘れて無駄に残っている、みたいな状態は起こりがちです。 例えば以下のように non null assertion (!) が一時的に必要になって disable したけど、
【JavaScript】Babelとは何か - Qiita
プログラミング勉強日記 2021年1月8日 TwitterでBabelの存在を知ったので、Babelとはいったい何なのか気になり調べてみた。 Babelとは Babel(読み方：「バベル」)は、次の世代のJavaScriptの標準機能をブラウザのサポートを待たずに使えるようにするNode.js製のツールである。次の世代の標準機能を使って書かれたコードを、それらの機能をサポートしないブラウザでも動くコードに変換する。 簡単に言うと、JavaScriptのコードを新しい書き方から古い書き方に変換するツールである。具体的には、JavaScriptの言語仕様であるES2015以上の仕様のJavaScriptで記述すると、Internet Explorer11といった古いブラウザでは動作しない。そこで、Babelを使ってES2015・ES2016といった仕様で記述したJavaScriptファイルを互
【npm audit】npm package の脆弱性対応してますか？
■ はじめに みなさんは自分の関わっているプロジェクトにおけるnpm packageの脆弱性対応をしたことがありますでしょうか？ 今回、npm auditを利用して脆弱性対応をした内容をもとにnpm packageの脆弱性対応方法と対応手順をまとめてみました。 npm packageの脆弱性ってなに？ npm auditってなに？ npm audit fix --forceをやっても脆弱性が消えなかった ライブラリとかpackageの依存関係てなに？ 上記に当てはまる人にとっては読む価値のある内容になっていると思います！ それではいってみましょう！ ■ そもそも脆弱性とは ソフトウェアにおける脆弱性（ぜいじゃくせい）とは、プログラムの不具合や設計上のミスが原因となって発生した情報セキュリティ上の欠陥のことを言います。 この情報セキュリティ上の欠陥が存在すると、悪意ある人に勝手にプログラムを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Node.js (NestJS) で csv ファイルを読み込む（４つのライブラリ比較） - Qiita
【JavaScript】toLocaleDateStringで日付フォーマット 🗓 - Qiita
ESLintカスタムルールの作り方
Yarnのバージョンを切り替える方法
