Introducing Flint
ESLint has been the leading web ecosystem linter for a decade. Its dominance is being challenged by new native speed linters such as Biome and Oxlint that implement blazing fast linting using native speed languages. Even TypeScript’s source is being ported from TypeScript to Go. Yet, this Flint project -a new, experimental linter- is implemented in TypeScript rather than Go or Rust. Why does Flint
なぜJavaScriptのfetchはawaitを2回しないとレスポンスを取れないのか | maguro.dev
const resp = await fetch("https://api.example.com/data"); await を2回書いているのが気になったことはありませんか？1回の await で一気にレスポンスボディまで取れたら楽なのに、と思ったことはないでしょうか。 とある休日の午前中、いつものようにYouTube上でライブコーディング動画を見ていました1。そこで配信者の方が、fetchを使ってレスポンスボディを取得する際に2回目のawaitが必要であることに対して、「なんでfetchはこんなにめんどくさいんだろう」と言っていました。言われてみると、確かにめんどくさいような気もします。 この記事では、なぜ fetch がこのような設計になっているのかをいろいろな観点から掘り下げてみます。 fetch の使い方おさらい まずはJavaScriptのfetchの基本的な使い方を確認して
2026年版：JavaScript/TypeScriptのロギング入門
本番環境で障害が発生したとき、手がかりになるのは結局ログだけだった——という経験は、多くのエンジニアが持っているのではないでしょうか。ところが、開発中に書き散らしたconsole.logは肝心なときに役に立たないことが多いものです。「ここ通った」「動いた」といったメッセージや、巨大なオブジェクトがそのまま出力されているだけでは、原因特定は困難です。 かといって、本格的なロギングライブラリを導入するのは大げさに感じることもあります。winstonやPinoは高機能ですが、設定項目が多く、エッジ環境では動かなかったり、依存関係が増えたりと、ちょっとしたAPIサーバーには重たい選択肢かもしれません。 本記事では、console.logの限界を整理した上で、実用的なロギング環境の構築方法を紹介します。サンプルコードにはLogTapeを使います。依存ゼロで軽量、Node.js・Deno・Bun・エッ
イベントループとプロミスチェーンで学ぶJavaScriptの非同期処理
JavaScript の非同期処理は非常に難しく、その難しさの原因は「制御の流れ」が掴みづらいことにあります。 この本では非同期処理を理解するために必要な概念であり、仕組みでもあるイベントループでプロミスチェーンの処理がどのように行われるかをクイズ形式で学ぶことによって、非同期処理の「制御の流れ」を掴めるように訓練します。 知識面については中枢となるイベントループの機構から、実行環境と API、async/await や Promise.all などの一通りの範囲を学習し、最終的には並列化や順序づけて反復処理を行うための制御方法と TypeScript での型注釈までを網羅します。
setTimeout を完璧に理解する
setTimeout は、指定された時間以降に指定されたコードを実行する JavaScript の API です。ブラウザでも Node.js でも広く使われているのですが、実装はまちまちで、色々と特殊な条件も多く、挙動を完璧に理解している人は少ないと思います。この記事では、そんな setTimeout を可能な限り深堀りしてみようと思います。 先に書いておきますが、ものすごくニッチで細かい話ばかり並びます。突然私が、ただ純粋に setTimeout について調べたくなったので、その結果をまとめただけのものです。普通に開発している人には必要のない情報が多くなるでしょう。この記事は基礎から setTimeout を学ぼう、という方には全然向かないと思います。 また、JavaScript のイベントループについてある程度理解していることを前提とします。その詳しい理解には、@PADAone さん
Axiosのメリットを説明してみる
初めに 前提 私は現在、React + TypeScriptの勉強のため、タスク管理アプリの開発を行っています。開発環境は以下のような構成になっています。 フロントエンド React + TypeScriptで構成 ログイン画面やタスク管理画面を実装 ローカル環境でコンテナ化 バックエンド PHP（Laravel 12）で構成 データベース操作を担当 RESTful APIとして機能 フロントエンドとバックエンドは独立したコンテナとして動作し、HTTP APIを通じてデータのやり取りを行っています。 複雑化：初心者の悩み React初心者の私にとって、フロントエンドからバックエンドAPIへの接続方法は大きな課題でした。JavaScriptの標準的なfetch関数は知っていましたが、実際の開発でどのように使えばよいのか分からず、Claude Codeに実装を相談したところ、AxiosというJ
JavaScript で人と同じように文字数を数える
console.log("A".length) // 1 console.log("😆".length) // 2 console.log("👨👩👧👦".length) // 11 なぜこうなるのか、どうやったら JavaScript にも人間と同じ感覚で文字を数えさせるのか、今回はそれについて話します！！！ 1. 文字集合とエンコーディング まず大前提として人とコンピューターが扱う文字は違います。人は日本語とか英語とかの自然言語の文字を扱いますが、コンピューターが直接扱えるのは0/1の数字だけです。 そのため、人が使う文字をコンピューターに処理させるには、文字を0/1に変換しないといけません。 この変換の流れはざっくり 「①文字ごとに番号を振る」 → 「②その番号を 0/1 に変換する」 で行われます。 1-1. 文字集合 「①文字ごとに番号を振る」 ことで作られたものが
Node.jsのモジュールタイプごとの読み込み方法
はじめに CJSやESMといったモジュールタイプ、先人たちの記事を読み理解したつもりになるが、時間が経つと完全に忘れるということを繰り返している。package.jsonの最低限の設定と、その読み込み方法を簡易的に記載する。 これは検証で書いたサンプルコード CJSからCJS, ESMを読み込む パッケージ中の .js は、パッケージのpackage.jsonに記載されている type フィールドが commonjs の場合はCJSとして扱われ、 type フィールドが module の場合はESMとして扱われる。type フィールドのデフォルト値は commonjs なので、 type フィールドが指定されていなければCJSとして扱われる。 package.jsonの main フィールドはパッケージのエントリーポイントで、パッケージを使用する側がimportまたはrequireする際に
最近のHTMLを改めてちゃんと学んでみた
この記事は、以下のモダンCSSに関する記事のHTML版です。 せっかくならHTMLもちゃんと学んでみようと思い、最近のHTMLの新機能を改めて学び直したので、アウトプットついでにこの記事を書いています。 HTML Living Standardの時代へ 2019年5月28日、W3CとWHATWGは、HTMLとDOM標準の開発をWHATWGが主導することで合意しました。これにより、HTMLは「HTML5」のようなバージョン番号を持つ仕様から、継続的に更新される「HTML Living Standard」へと移行しました。 この変化は単なる管理体制の変更ではなく、HTMLの進化の方向性を示しています。この記事で紹介する2019年以降の新機能を見ると、以下のような傾向が明確に現れています： 宣言的UI構築への移行 - JavaScript実装から、HTML属性による宣言的な記述へ ブラウザネイテ
Speeding up the JavaScript ecosystem - The barrel file debacle
Let's imagine you are working on a big project with many files. You add a new file to work on a new feature and import a function from another directory into your code. tsximport { foo } from "./some/other-file"; export function myCoolCode() { // Pretend that this is super smart code :) const result = foo(); return result; }Excited about finishing your feature, you run the code and realize that it
mapbox-gl-js で複雑な表示のアイコンを作る場合や描画順序を変更する場合の工夫 - Mobile Factory Tech Blog
はじめに 駅メモ！チームでエンジニアをしている id:wgg00sh です。 この記事では、駅メモ！内で地図クライアントとして使用している mapbox-gl-js を使うにあたって工夫した点などを紹介していきます。 【✨新機能リリース✨】 6/1 12時頃より、アプリ版駅メモ！にて「タイムラインと地図の切替機能」をリリースしました🎉 本機能では地図を見ながらチェックインが行えたり、 地図上でレーダーの対象駅や駅の属性等を確認することができます💪 詳細はお知らせよりご確認ください♪#駅メモ #駅メモ10周年 pic.twitter.com/vneZv27AVU— 駅メモ！公式 (@ekimemo) June 1, 2024 駅メモ！では、2024 年 6 月に、「タイムラインと地図の切替機能」(以降:タイムライン地図、本機能)をリリースしました。 本機能の実現にあたって、苦労した点やそ
乱立したpackage.jsonのエントリーポイントフィールド
この記事は夏のブログリレー17日目の記事です。 こんにちは、19Bの翠(sappi_red)です。普段はSysAd班で活動しています。Viteのチームメンバーだったりもします。 npmからインストールしたパッケージをモジュールバンドラーで使えないことに遭遇したことのある人は少なくないでしょう。 この記事ではそれが発生する要因の一つである、package.jsonのエントリーポイント用フィールドについて書いていきます。 モジュールバンドラーとトランスパイラは意味が異なるものですが、モジュール形式の変換においては境界線が非常に曖昧になるため、この記事ではまとめてバンドラーと呼ぶことにします。 モジュール形式 話を進める前に、前提となるモジュール形式という概念について説明しておきます。 JavaScriptでは元々、プログラムを複数のモジュールに分割する標準仕様が存在しませんでした。そのため、標
フロントエンドにおける「単体テストの考え方/使い方」
本稿における「単体テスト」とは自動テストにおける単体テストを指します。手動テストのことではないので、ご了承ください。 単体テストの考え方/使い方という本を読みました。筆者自身、「単体テストはプロダクションコードの付属」という意識がどこかにありました。この本を読んで、単体テストについてあまりに何もわかってなかったことに気付かされ、単体テストの設計はプロダクションコードの設計と同じくらい重要という意識に変わりました。何のために単体テストをやるのか、いいテストとは、「単体」とは、など多くの点で学びを得られ、また、多くのプラクティスとアンチパターンを知ることができました。 本稿はこの本を読んで得られた学びを、フロントエンド開発、特にコンポーネント開発に適用することを試みた際のまとめです。より詳細な解説を求む方には本を手に取ってもらう前提で、できるだけポイントを抑えられるようにまとめることを目指しま
フロントエンドの段階的モダナイズ、のための自走設計 (株式会社スタディスト様)
株式会社スタディスト様の依頼で、フロントエンド傭兵として、Rails 内の巨大SPA の段階的なモダナイズの提案を行った事例紹介です。 いつもはパフォーマンス視点で仕事にかかるのですが、今回はマクロな設計視点でソースコードを読んでいきます。一旦は中期ゴールを提案しつつ、その作業の必要性を通して、なぜその変更が必要なのかという解説をしていきました。 コスパが良い部分からやりたいですね。でもコスパ感覚は人それぞれです。あくまでフロントエンド専門家の自分が優先度付けるなら、という観点でやっていきます。 今回の仕事にあたっていくつかの技術的な課題を取り上げますが、それはスタディスト様に問題があるという話ではありません。むしろ問題を修正しようという意思が強く、実際1ヶ月の期間中にいくつかの修正をマージすることもできています。 以下、敬称略。注意点として、今回の内容は中の人達が見返すための記述が多いの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Promise.tryで実現する新しいエラーハンドリング New error handling with Promise try
そのJavaScript、V8が泣いてます。V8の気持ちを理解して書くパフォーマンス最適化
vi.mock再入門 - Qiita
GitHub - antfu/eslint-plugin-format: Format various languages with formatters in ESLint
GitHub - thepassle/eslint-plugin-barrel-files
ライブラリ依存せずyyyy-MM-ddの日付文字列を取得する最短のJavaScriptコード - Qiita
