サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
本記事のサマリ 「Bunを試してみたいけど、プロダクションで問題が起きたらどうしよう」そんな不安を抱えている方に向けて、BunでNext.jsプロジェクトを立ち上げて、いつでもNode.js（yarn）に戻せることを実際のコードで検証します。Bunの圧倒的な速度と使い勝手の良さを知りつつも、導入への一歩を踏み出せずにいる方が多いのではないでしょうか。本記事では、その心配を解消するために、BunからNode.jsへの移行が本当に可能なのかを実践的に確かめます。結論から言うと、想像以上にスムーズに戻すことができます。だからこそ、もう遠慮する必要はありません。 今回検証した内容は以下のリポジトリで公開しています。 はじめに：Bunを試したいけど踏み出せない理由 新しい技術に触れるとき、誰もが感じる「本当に大丈夫かな？」という不安。Bunについても同じような気持ちを抱えている方が多いのではないで
はじめに Kaigi onRails 2025で発表し、何人かの人といろいろ話しているうちに、モダンフロントエンドが面倒臭いのはJSONAPIのせいではないかと考えるようになりました。そしてJSONAPIそのものが悪いというよりは、JSONAPIを必要以上に使う原因となっているSPAが問題ではないかと思っています。まだ考えは固まっていないのですが、まずは部分的に紹介したいと思います。 モダンフロントエンドはJSON基礎工事が大変 SPAのReactフロントエンドを作る場合、Hotwireなら不要だった多大な工数が新しく発生します。APIエンドポイントのルータおよびコントローラから、JSONAPIシリアライザ、クライアントサイドのルータ、JSONAPIをfetchしてフォーマット変換する作業、さらにAPIの契約を文書化したOpenAPIを作成します。ここには記載していませんが
console.log("A".length) // 1 console.log("😆".length) // 2 console.log("👨👩👧👦".length) // 11 なぜこうなるのか、どうやったらJavaScript にも人間と同じ感覚で文字を数えさせるのか、今回はそれについて話します！！！ 1. 文字集合とエンコーディング まず大前提として人とコンピューターが扱う文字は違います。人は日本語とか英語とかの自然言語の文字を扱いますが、コンピューターが直接扱えるのは0/1の数字だけです。 そのため、人が使う文字をコンピューターに処理させるには、文字を0/1に変換しないといけません。 この変換の流れはざっくり 「①文字ごとに番号を振る」 → 「②その番号を 0/1 に変換する」 で行われます。 1-1. 文字集合 「①文字ごとに番号を振る」 ことで作られたものが
最近pnpmのドキュメントを眺めていたんだけど、そこでよく知らない依存関係の種類が出てきた。いまさら人に聞くのは恥ずかしいと思ったので、理解したことをまとめてアウトプットしておく。 そもそも依存関係とは？ package-lock.jsonとは？ といった話は理解できている前提で書く。 dependencies / devDependencies 最も基本となる依存関係。npm installするとdependenciesに書かれたものは全てインストールされることになる。 なので、本番環境で使うものしかここには入れてはいけない。「ではそれ以外のものはどこにいれるのか？」となるが、基本的にはdevDependenciesとなる。 この話自体はいろんな記事やカンファレンスのトークで擦られ続けているので、もうお腹いっぱい感がある。 一応書くと、devDependenciesにインストールするには
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
importcsvParser from "csv-parser" import { Readable } from "stream" //CSVが格納された文字列 constcsvString = `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-parserとは Node.jsでCSVファイルを読み込むときに使用するNode.jsライブラリです。 軽量でストリームベースで動作するのでファイルの容量が大きいものでもメモリ効率良く処理できます。 通常、Node.jsでCSVを処理する際はJSONに変換する処理が必要になりますが、その処理速度は1秒当たり約9万行処理されます。（1行当たりのデータ量にもよる） 実装アプローチCSVファイルを処理する実装方法には、主に以下の2つのアプローチがあります。 ファイルシステムからの直接読み込み import fs from "fs"; importcsv from "csv-parser"; const parseCsv = async (filePath) => { const results = []; try { await new Promise((resolve, rejec
6月14日、Axel Rauschmayer氏は新刊書籍「ExploringJavaScript (ES2025 Edition)」を公開した。本書は、モダンJavaScript の習得を容易にし、初学者から上級者までを対象に ES2025 までの全機能を体系的に解説するものである。以下、その内容を紹介する。 書籍の概要 「ExploringJavaScript」は、従来版「JavaScript for impatient programmers（せっかちなプログラマのためのJavaScript）」を大幅に拡充した最新版だ。モダンな機能に焦点を当てることで、読者が古い文法に煩わされずに学習を開始できる構成となっている。 ハイライト モダン機能を中心に据え、素早く学び始められる 必要に応じて深掘りできる発展的セクションを用意 テスト駆動型演習・フラッシュカードなどの補助教材を同梱 E
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-RelationalMapping / オープンソースのオブジェクト関係マッピング」(以降ORM)です。 「Prism
Promise 軽くPromiseの話からします。 ある程度分かっている人であれば読み飛ばして大丈夫です。 Promiseは、JavaScriptで非同期処理を行う際に使われるパターンで 外部通信や、データの取得など、同期的に動いてる処理の中に割り込ませる形で使います。 データの取得や通信で取得に完了していない状態で、次の処理に移った場合 次の処理の中に、通信によって得られたデータを使った処理が含まれていると、正常に動作しない事があります。 例えば以下の様な状況 function getUserAge() { const user = getUser(1) // 外部情報を取得 return user.age } idが1のユーザーを取得し、そのageを取得する関数があったとして この時、ユーザーは外部APIなどを通して取得する必要がありましたが、取得に時間がかかってしまった時 user.
お久しぶりです。GMOインサイトの天河です。 ついこの間、JavaScriptのジェネレータについて社内勉強会で発表したのでその内容をまとめます。 ※ 注意本記事で言及している「ジェネレータ」はJavaScriptでの言語仕様です。一部通ずる箇所もあると思いますが、Python や C# など他の言語での使われ方についてはしかるべき文献を見てください。 目的 ジェネレータ が何かわかるようになる ジェネレータについて面接で聞かれても余裕で答えられるようになる 実装時にジェネレータを選択肢として持てるようになる 対象読者 ジェネレータ が何か全くわかっていない人 ジェネレータ について認知はしているものの、どういうものかは把握していない人 ジェネレータ を知ってはいるものの、使い所がわからない人 はじめに ジェネレータを理解するためには、「イテレータ」と「イテラブル」について知る必要があり
この記事はドワンゴ Advent Calendar2023 の 22 日目の記事です。 ドワンゴ教育事業Webフロントエンドチームの berlysia です。1 この記事では、オンライン学習サービスN予備校の開発を支えるコーディング規約の考え方に少し触れ、その運用を支えるESLintの活用を紹介します。 この記事の内容は、他社様主催イベントにて発表した内容の再構成です。speakerdeck.com コーディング規約は実行可能にしたい教育事業のWebフロントチームには、細かいコーディング規約が書かれた文書は存在しません。コーディング規約はESLintをはじめとする各種ツールによって、自動で検出・修正可能な形になっています。 文書という形でなく、各種ツールのコンフィグファイルとそのコメントとしてまとまっている、と言い換えてもよいかもしれません。ドキュメンテーションは重要な仕事ですが、そ
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 等でハマりどころが多すぎます。 ゼロインストールも否定派です。gitblob objects のサイズが爆発して仕事にならなくなったことがあります。
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 をメインに使ってるので これは不便です で
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 からは処理の具体的な内容を表示するように変化した。 色はア
CSSStyleSheet インターフェースは、JavaScript でスタイルシートを構築し、操作するためのAPI です。CSSStyleSheet() コンストラクターで新しいスタイルシートを作成し、.replaceSync() メソッドでスタイルを適用できます。CSSStyleSheet インターフェースは、JavaScript でスタイルシートを構築し、操作するためのAPI です。CSSStyleSheet() コンストラクターで新しいスタイルシートを作成し、.replaceSync() メソッドでスタイルを適用できます。 スタイルが適用されたCSSStyleSheet オブジェクトは、document.adoptedStyleSheets プロパティに代入することで、ページ全体に適用されます。 const styleSheet = newCSSStyleSheet();
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
