ESLint の Flat Config を書く時に読んでほしい記事 (2024-08版) - Object.create(null)
ESLint v9 から Flat Config がデフォルトの設定ファイルの形式となり, 徐々に対応しているプラグインも増えて移行が進みつつありますが, 実際に移行したプロジェクトを見ているとしばしば勘違いなどから誤った設定をしている事例を目にします. ということで, Flat Config を書くにあたっていくつか知っておいて欲しいことや, よく見かけるミスをまとめてみました. この記事では網羅的な説明はしませんので, ESLint や typescript-eslint の公式ドキュメントを前提として, 副読本的に参照してください. Getting Started with ESLint - ESLint - Pluggable JavaScript Linter Getting Started | typescript-eslint Flat Config のしくみ Flat Co
URLシェアを支える技術 lz-string
WebアプリでURLシェアを実装する際に、URLにすべての情報を持たせてしまいたい場合があります。そのとき、情報をそのままクエリ文字列に渡してしまうとURLの文字数制限に引っかかってしまうかもしれません(厳密にはURLに上限はないようですが、現実はいつもブラウザ実装依存)。 そんなときURLセーフな文字列形式で圧縮してくれるライブラリがあります。lz-sringです。 変換の例 ライブラリで compressToEncodedURIComponent というAPIが提供されているのでこれを使用します。標準のencodeURIComponentでURLセーフな文字列に変換した場合とサイズ比較をしてみましょう。 import lzstring from "lz-string"; const rawData = "Lorem ipsum dolor sit amet, consectetur a
TS 5.6のiterator helpersサポート――BuiltinIteratorsのwhat & whyを知る - Qiita
先日、TypeScript 5.6 Betaが公開され、あわせてリリースノートも出ました。 この記事では、TS 5.6の新機能の中でもIterator helpersに注目します。特に、Iterator helpersのサポートに合わせて型定義に追加されたBuiltinIteratorsやBuiltinAsyncIteratorsについて解説します。 Iterator helpersとは Iterator helpersは、ECMAScriptのプロポーザルのひとつであり、この記事の公開時点ではStage 3という完成目前の状態にあります。TypeScriptではStage 3に到達したプロポーザルが実装されるので今回これが実装されることになりました。 ランタイムの実装としては、この記事公開時点ではGoogle Chrome 122, Node.js 22.0.0, Deno 1.42など
Exhaustive branch checks with TypeScript - Jack Franklin
March 4, 2024Exhaustive branch checks with TypeScriptIt's very common when working with TypeScript that you will have a type that declares a list of values, such as an enum or union type: enum SupportedColour1 { RED, YELLOW, BLUE, } type SupportedColour2 = 'RED' | 'YELLOW' | 'BLUE'And then you will often have functions that need to run differently or return different values based on what variant i
Array.prototype.with による不変の配列の更新 | Blog | web.dev
最近、配列に対して呼び出すことができる、相互運用可能な新しいメソッドがブラウザに導入されました。 Array.prototype.with()。 対応ブラウザ <ph type="x-smartling-placeholder"></ph> 110 回 <ph type="x-smartling-placeholder"></ph> 110 回 <ph type="x-smartling-placeholder"></ph> 115 <ph type="x-smartling-placeholder"></ph> 16 ソース この記事では、このメソッドの仕組みと、このメソッドを使用して配列を更新する方法について説明します。 コピーされます。 Array.prototype.with(index, value) の概要 Array.prototype.with(index, value)
Scala.js + Javy で Scala を WebAssembly 上で動かす
Scala Advent Calendar 2023 1日目の記事です。 最近はScalaのWebAssembly対応やりたいな〜と思ってWebAssemblyの勉強をしています。 (前置き) Scala の WebAssembly 対応 (2023) ScalaからWebAssemblyを生成する方法はいくつかあるのですが、Kotlin/WASM のようにScalaコンパイラがWebAssemblyを直接生成ことは今のところできません。 いくつかの方法というのは例えば TeaVM TeaVMはJVMバイトコードをJSやWASMにAOTコンパイルしてくれるツールです。sbtからも使える🎉 WebAssembly 対応は experimental とのことで、以前試したときは確かにいろいろ動かなかった気がする Scala Native Scala Native は LLVM をバックエンド
Console Utilities API reference | Chrome DevTools | Chrome for Developers
The Console Utilities API contains a collection of convenience functions for performing common tasks: selecting and inspecting DOM elements, querying objects, displaying data in readable format, stopping and starting the profiler, monitoring DOM events and function calls, and more. Looking for console.log(), console.error(), and the rest of the console.* functions? See Console API Reference. $_ $_
TypeScript 5.2で予告されているusingをいじってみる
この記事でのusing宣言の動作はBabelのtransform及びes-shimsのpolyfill実装に依存しており、実際のV8エンジンやTypeScriptのトランスパイル出力の挙動とは異なる可能性があります。 以下の挙動がusing宣言に対応している処理系の実際の挙動と異なる場合はコメントをいただけると幸いです。 導入 先日、Twitterでこんなツイートが回ってきました。 TypeScript 5.2で新しい「using宣言」が追加されるというものです。 しかも、TypeScriptの独自構文かと思いきや、JavaScriptのStage 3のProposalをTypeScriptで先行実装するという通常のTypeScriptの実装プロセスに則ったものでした。 新しい変数宣言の追加はES 2015(ES6)の「let」「const」以来でなんと8年ぶりで、JavaScript/T
jscodeshift で Moment.js を Day.js に一括置換した話 - ミツモア Tech blog
※ こちらはミツモアAdvent Calendar 2021の3日目の記事です。 こんにちはミツモアでテックリードをしている白柳（@yanaemon）です。 ミツモアは「リモートワークが増えてエアコンを綺麗にしたい」「引っ越しで出た不用品を回収してもらいたい」といった生活のあらゆるシーンであなたにぴったりの専門家を無料で探せるサービスですので、ぜひ気軽に使ってみてください！ meetsmore.com Moment.js の問題点 ミツモアでは、Moment.js を利用していたのですが、下記の課題がありました。 Moment is in maintenance mode https://momentjs.com/docs/#/-project-status/ bigger bundle size mutable ❗ Day.js への置換 そこで、いくつかのライブラリを比較し、Momen
Codecovセキュリティアップデートの対応~ Android編 - sanadamaru's blog
前回のCodecovのセキュリティアップデートの対応~iOS編 - sanadamaru's blog に引き続き今回はCodecovセキュリティアップデートで対応したことのAndroid編を書いていこうと思います。 対応内容 CircleCIのEnvironment Variablesに登録している以下のシークレット情報を更新しました。 PLAY_ACCOUNT_JSON_BASE64の変更(Google Playのサービスアカウント) Android keystoreとアップロード鍵の変更 Google Play Consoleに登録している各アプリのアップロード鍵のリセット申請 PLAY_ACCOUNT_JSON_BASE64の変更 私のプロジェクトではGoogle Playにapkのアップロードを自動化するためにGradle Play Publisherプラグインを使用しています。
[JavaScript] URLを文字列結合で組み立てないために、url-cheatsheetを作った
[JavaScript] URLを文字列結合で組み立てないために、url-cheatsheetを作った URLを文字列結合で組み立てると色々問題が起きやすいので、それを避けるためにURL APIやURLSearchParams APIでURLを組み立てるパターンをまとめたチートシートを作りました。 azu/url-cheatsheet: URL manipulation cheatsheet for JavaScript URLにユーザーが入力した文字列を含めるときはencodeURIComponentでエスケープする URLはプレーンな文字列ではなく構造化された文字列(文字の並びに意味がある文字列)として扱わないと、さまざまな問題を抱えやすいです。 たとえば、次のように文字列結合でURLを組み立てるとパストラバーサルの問題があります。 name に ../../adminのような文字列が
![[JavaScript] URLを文字列結合で組み立てないために、url-cheatsheetを作った](https://cdn-ak-scissors.b.st-hatena.com/image/square/b26f7dc8f9e783316f720174980e93c627438d74/height=288;version=1;width=512/https%3A%2F%2Fefcl.info%2Fpublic%2Ffavicon.png)
フィールドデータって知ってる？ – TravelBook Tech Blog
トラベルブックでは「スピード改善」という名の下「Core Web Vitals」のスコアを上げる努力をしています。Core Web VitalsというとLighthouseのスコアがいかに「100に近いか？」が焦点になりやすいのですが、本来はユーザーの環境でいかに「速いか？」が重要です。これはフィールドデータと呼ばれています。そこで今回は、フィールドデータとはなにか、ラボデータとの比較、確認方法、スコアを上げる方法などを我々の理解の範囲で綴っていきます。 Lighthouseのスコアが全てではない Core Web Vitalsと聞くとあの「緑色の100」が浮かびます。 我々は「緑色の100」を目指して、TTFBを短くし、ヒーロー画像をpreloadし、width/heightを指定してレイアウトシフトをなくします。 これはGoogleのLighthouseというソフトウェアが算出したスコ
JavaScript のクロージャーと for 文の let 初期化の例外
先日、次のような JavaScript クイズを Twitter で出しました。 // JavaScript quiz: 出力は？ const a = []; { for(let i = 0; i < 10; i++) { a[i] = () => console.log(i); } } a[3](); { let i; for(i = 0; i < 10; i++) { a[i] = () => console.log(i); } } a[3](); { for(let i = 0; i < 10;) { a[i] = () => console.log(i); i++; } } a[3](); — Takuo Kihira (@tkihira) August 15, 2022 答えは 3, 10, 4 なのですが、for 文の let 初期化専用の例外処理がない場合は 10, 10,
JavaScriptのES2023・ES2022の新機能まとめ - ICS MEDIA
JavaScriptの仕様であるECMAScriptはEcma Internationalによって定められています。ECMAScript 2015（ES6）の登場以降は、ECMAScript 2016、ECMAScript 2017･･･と、年次で仕様が更新されています。ECMAScript 2022（ES2022）は2022年6月22日のEcma InternationalのGA 123rd meetingにて、ECMAScript 2023（ES2023）は2023年6月27日のGA 125th meetingで承認されました。 ES2022とES2023はすでに多くのブラウザやNode.js環境で利用可能です。本記事では新仕様と使いどころを紹介します。 ES2023 - 配列の非破壊操作 ES2023では配列を非破壊で操作できるメソッドが追加されています。非破壊とは、元の配列を変更せ
React大好き侍が、「もうSolidJSでいいじゃん...//」ってなったワケ。 - Qiita
Reactが好きです。 Reactが好きです。コンポーネントを関数として扱うのが好きです。 SolidJSはReactそっくりの書き心地(DX)を保ちつつ、Reactに足りない要素を兼ね備えた期待の新人です。 コードの比較 React const Counter = () => { const [count, setCount] = useState(0) useEffect(() => { console.log(`Count: ${count}`) }, [count]) return ( <div> <div>{count}</div> <button onClick={() => setCount(prev => prev + 1)}>Add</button> </div> ) } const Counter = () => { const [count, setCount] =
JavaScript で parseInt / parseFloat を使わない方が良い理由
となるのが原因です。parseInt というのは、文字列を解析して整数値（int）を返すグローバル関数であり、引数をまず文字列に変換する仕様となっております。その段階で 0.0000005 が "5e-7" という文字列に変換されてしまい、その文字列の先頭の 5 だけが数字として解析されてしまったため、結果として parseInt(0.0000005) === 5 となりました。 なぜ String(0.000005) === "0.000005" に、String(0.0000005) === "5e-7" になるのかについては、この記事の最後で余談として説明します。 整数化には Math.trunc を使おう このように、parseInt は文字列を引数にすることを前提にしているため、速度の面でも可読性の面でも「小数値を整数値に変換したい」という場合に使うのは望ましくありません。最も望
JSで西暦1年1月1日が何曜日か求める
この記事はCybozu Advent Calendar 2021の21日目の記事になります。 Cybozuにも関係なければなかなかニッチな内容の記事ですが、アドベントカレンダーということでカレンダーにまつわるテーマにしました。 ということで果たして需要があるのかは謎ですが、古い日付の曜日を正しく取得する方法について考えていきます。 突然ですが、西暦1年1月1日が何曜日かJSで求めるにはどうしたら良いでしょうか？ 忙しい人のためのまとめ 西暦1年1月1日は日曜日です。 ポイントは 改暦を考慮してユリウス暦で求める ツェラーの公式を使うと簡単に求められる さらに、閏年のミスを考慮に入れる ... getDay まずはシンプルにDate.prototype.getDay()を使って求めてみます。 const firstDay = new Date(1,0,1); const day = firs
TypeScript の「型安全」を担保するために知っておきたかったこと - OITA: Oika's Information Technological Activities
タイムリープTypeScript 〜TypeScript始めたてのあの頃に知っておきたかったこと〜 アドベントカレンダー1日目の記事になります。 よろしくお願いします。 3行で TypeScript で安全に型を扱う勘所は以下2点だと思いました。 最初から最後まで型が壊れていないことを保証する 型が壊れる可能性があるものは壊れている前提で扱う 個人的背景と前提 もともと C# での開発をメインとしていました。 Web開発は、JavaScript歴 ≒ TypeScript歴くらいの型付依存者です。 そのため、型付けのゆるい言語に対する耐性がなく、本内容もそういうポジションからの見解になります。 本記事内のサンプルコードは TypeScript V4.4 で挙動を確認しています。 最近のバージョンで変更のあった点は脚注を入れています。 最初から最後まで型を壊さない C# という静的型付け言語
DenoのWeb Storage APIサポートとその将来について
はじめに Denoはv1.10からWeb Storage APIをサポートしています。 この記事ではDenoにおけるWeb Storage APIのサポートについて解説します。 前提 この記事はDeno v1.14を想定して記述されています。 基本的な使い方 localStorage まず、localStorageの使い方について解説します。 localStorage.setItem("foo", "bar"); console.assert(localStorage.getItem("foo") === "bar"); console.assert(localStorage.length === 1); localStorage.clear(); console.assert(localStorage.length === 0);
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - jetify-com/devbox: Instant, easy, and predictable development environments
