TypeScriptの型と値とバリデーション
TypeScript は本質的に自分に型が付与されていると思っているだけの JavaScript です。 いくら型を付与しようが、それが実行時に影響を与えることはありません。 コードレビューをしているとここを誤解している人が本当に多いです。何度も解説しているのですが、なかなか浸透しないので、TypeScript におけるバリデーションという視点で記事を書くことにしました。 あと TS でバリデータ使って色々作ろうとしている友人と、プログラミング始めたてで zod と openapi を使っいる友人がいたので、彼らが想定読者です。 型と値の名前空間 TypeScript 上での名前空間(スコープ)は2つに分類できます。 値: 実行時にランタイム上のメモリに存在するもの 型: 静的解析時にのみ参照可能なもの。コンパイル時に完全に消滅する。 TypeScript は基本的に JavaScript
GAS + Typescript のいい感じのビルド環境を整える
株式会社TERASSで主にフロントエンドを中心にエンジニアをしている myrear (読みは「みりあ」)です。 社内で GAS を使った小さいアプリケーションを作る機会があり、その時にビルド周りで行った工夫をシェアしていきます。 はじめに Google Apps Script (以下 GAS) を使ったアプリケーションの開発は、 GAS 上のエディタで直接 .gs ファイルを編集するか、ローカルで書いた .js (または .ts ) ファイルを clasp を使って変換・プッシュ(アップロード)するのが主流かと思います。 ここでは後者の clasp を使う方法の中でも .js .ts から .gs へ変換する部分に焦点を当て、この方法に含まれる問題点を取り上げそれらを解決していくことでいい感じのビルド環境を整えることが目標です。 ゴール この記事の最終的なゴールは以下です。 typescr
現存するJSDocタグのまとめ | Memory ice cubes
まとめたいなと思ったが、それは叶わぬ夢なのかもしれない・・・。 JSDoc.app Use JSDoc: Index https://jsdoc.app/#block-tags JSDocの本家（のはず）で、用途は主にドキュメント作成。 以下がその一覧で、AtoZ（エイリアスは別）順。 まずはブロックタグといわれるよく見るもの。 @abstract @virtual @access <package|private|protected|public> @alias <aliasNamepath> @async @augments <namepath> @extends <namepath> @author <name> [<emailAddress>] @borrows <that namepath> as <this namepath> @class [<type> <name>] @c
【Playwright】ココがスゴいぜ！Playwright Component Test！ - RAKUS Developers Blog | ラクス エンジニアブログ
こんにちは。フロントエンド開発課所属のkoki_matsuraです。 今回はPlaywrightのコンポーネントテストについて個人的な意見を書いています。 目次は以下の通りになっています。 はじめに 導入方法 Playwright Component Test Runner のスゴい点 コンポーネントが実際にレンダリングされる 画面のサイズを指定できる タイムゾーンや言語を指定できる コンポーネントの振る舞いを見るテストに対応できる まとめ 参考 はじめに PlaywrightはMicrosoftが開発・メンテナンスしているCypress、Puppeteerなどと同じE2E自動テストフレームワークとして有名です。 playwright.dev Chromium、Edge、Firefoxなどの複数のブラウザに対応しており、全てに単一のAPIで簡単にテストの実装が可能になっています。 目玉機能
Babelの変換処理と向き合う
そういえば Babel をちゃんと勉強したことなかったなと思ってちゃんと勉強してみたって言う話です。 つまり Babel をノリで使ってたことになるのですが、自分がプログラミングを始めたときは @babel/preset-env がすでに存在しており、それを使っているだけで全てを倒せていたので勉強する必要がなかったという事情があります。 ただ、流石に知らないと言ってもネットサーフィンしているとなんらかの情報のインプットはされるので、 Babel は ES6 -> ES5 に変換する（これは間違った理解） Babel は AST 操作によって変換する Babel は parse -> traverse -> generate して変換する みたいな順番で少しずつ解像度を上げながら理解はしていました。 最後の、「Babel が parse -> traverse -> generate して変
Federated Credential Management API | Privacy Sandbox | Google for Developers
Federated Credential Management API コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 プライバシー保護 ID 連携のためのウェブ API。 FedCM とは FedCM（Federated Credential Management）は、フェデレーション ID サービス（「... でログイン」など）に対するプライバシー保護のアプローチであり、ユーザーは ID サービスやサイトと個人情報を共有せずにサイトにログインできます。 実装ステータス Chrome プラットフォームのステータス FedCM は Chrome 108 で実装されています。 FedCM の提案は一般公開されています。 FedCM は、他のブラウザではまだサポートされていません。 Mozilla は Firefox 用のプロトタイプを実装しており、Apple
Deprecation of formatting rules - ESLint - Pluggable JavaScript Linter
In ESLint v8.53.0, scheduled to be released on Friday, November 3, 2023, we will formally deprecate our formatting rules. Formatting rules are those rules that simply enforce code conventions around spacing, semicolons, string formats, etc. For a variety of reasons, which are discussed in this post, this is the right decision for ESLint going forward. However, to understand how we got here, it’s h
jsDocs.io
jsDocs.io is a documentation host for Javascript and Typescript packages published on npm
Astro 3.0 | Astro
Introducing Astro 3.0! Astro 3.0 is the first major web framework to support the View Transitions API. Fade, slide, morph, and even persist stateful elements across page navigation with ease. Until recently this had only been possible inside of JavaScript Single Page Applications (SPAs). But thanks to advances in the web platform, these features are now available for everyone in Astro 3.0. Other r
JavaScriptを大きく変えうる Dataflow Proposals の概要と論点(Call-this, Pipe Operator)
Dataflow Proposals とは 以下の5つのプロポーザルをまとめて Dataflow Proposals と呼んでいる。 Stage 2: Pipe operator Stage 1: Call-this operator Stage 1: Partial application(PFA) Stage 1: Extensions Stage 0: Function.pipe and flow 例えば Pipe operator, Call-this operator, Partial application を組み合わせると、以下のように書けるようになる。（提案段階なので変わる可能性アリ） import { getAuth, getIdToken } from "firebase/auth"; function isPublic(article) { return articl
ESLint を使って JSDoc / TSDoc の記述を必須化する
これはなに コードベースに対し JSDoc の記述を必須化するための ESLint 設定手順をまとめたものです。 JSDoc を始めとする Doc コメントはコードに最も近いドキュメントであり、これがあるのと無いのとではコードベースの保守性に天と地ほどの差が生まれます。そんな JSDoc ですが、OSS ならともかく（内製・受託を問わず）商業ソフトウェア開発の現場では軽視されがちです。後からコーディング規約を定めたところで開発メンバーにドキュメントを書く習慣が備わっていなければ書き漏れが頻発するのが関の山です。 コードレビューで都度指摘するにはあまりにコストがかかるため、ESLint に委ねるのが望ましいです。 前提 フレームワークは React（or Next.js）を使っている。 TypeScript を主体としている。 ビルドスクリプトや設定ファイルは JavaScript も併用し
Sentry SDK 完全理解
ドタバタしてたら 1 ヶ月以上期間が空いてしまった。仕事の都合で Sentry を完全理解する必要があったので SDK 読んでみた。 知りたいことは エラーの収集方法 どこにエラーを送っているのか エラーの情報として何を送っているのか だ。そこで SDK を呼び出した時にどういうコードが実行されるか一つずつ見ていく。Repository は https://github.com/getsentry/sentry-javascript だ。 ブラウザ版と Node.js 版があるが、Node.js の方を読んでいく。Node.js では一般的には import * as Sentry from "@sentry/node"; // Importing @sentry/tracing patches the global hub for tracing to work. import "@se
Promise のコンストラクタに渡した async function 内で throw しても rejected な Promise は作られない（常に fulfilled になる） - Humanity
何を当たり前のことをと思うかもしれませんが、勘違いしてたので恥を晒しておきます。 こんな使い方する人いるのか "no-async-promise-executor - Rules - ESLint - Pluggable JavaScript linter" https://t.co/BJy6aqMYQ0— azu (@azu_re) 2018年8月4日 const result = new Promise(async function executor(resolve, reject) { readFile('foo.txt', function(err, result) { if (err) { reject(err); } else { resolve(result); } }); }); （説明のために arrow function を function にして名前を付けているので
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Differences Between Vue 2 And Vue 3
DevTools Tips | Chrome DevTools | Chrome for Developers
Storybookを書くだけでリグレッションテストが 実行される世界へようこそ