はじめに この記事はWano Group Advent Calendar 2025の18日目の記事です。 普段自分はTypeScript / React / Next.jsなどを使用して主にフロントエンドの開発をしているのですが、その中で2025年によく使用した型をいくつか挙げていこうと思います。 ちなみに下記のうち🛠️マークがついているものは自前で定義した型ですが、ユーテリティ型を提供するライブラリ等でも同等（or それ以上）の機能を提供しているものもあるとは思います。 できるだけ外部への依存を減らしたい目的もあり、自前で定義できそうなものは必要な分だけ 定義しています。 🛠️ ValueOf / DeepValueOf 任意のオブジェクトの取りうる値のユニオン型を取り出す型です。 再帰的に宣言することで第二、第三階層の値も取り出すことができます。 type-festのようなユーティ
藤 吾郎 Starley株式会社のソフトウェアエンジニア。株式会社ディー・エヌ・エー、クックパッド株式会社、株式会社ビットジャーニー、ファストリー株式会社を経て2024年9月より現職。趣味はOSSのツールやライブラリの開発。二児の父。 Github:gfx Bluesky：@gfx.bsky.social ブログ：Islands in the byte stream 2025年のいま、私たちは「エージェンティックコーディング革命」の渦中にいます。Claude Code、Devin、Cursor といったコーディングエージェントが実装の多くを担い、アルゴリズムやアーキテクチャは瞬時に形になります。 このような時代に技術書を読む必要はあるのでしょうか。もちろん、あります。その理由は、この革命が単なる生産性の向上ではなく、超高速実装によって「量が質に転化する」という変化をもたらしているからです。
Node.js アプリケーションを CommonJS (CJS) から ES Modules (ESM) に移行したのでやったことを書き記します。 今回移行したアプリケーションは、バンドラーを伴わない純粋な Node.js アプリケーションです。TypeScript で書かれており、ビルド時には単に tsc で型を落としているだけです。ビルド成果物には require / module.exports が残っていて各ファイル同士が参照し合う、古典的なCJSアプリケーションとなります。 Node.js バージョンが 20 とやや古いので、残念ながら TypeScript のまま実行させること(--experimental-strip-types)はできません。よってこの記事では引き続き TypeScript を JavaScript に変換してから実行する場合の ESM 対応です。 tsco
TL;DR 公開 API では T[] を避け, ReadonlyArray<T> を使いましょう. 内部実装でのみArray<T>を使うのはOK Array<T> ではなく ReadonlyArray<T> を使おう 以下のコードには受け取った配列をソートして表示する sortLog 関数と, 0番目の要素を 999 にした配列を表示する setLog 関数を定義して使用しています const sortLog = (array: Array<number>): void => { console.log(array.sort((a, b) => a - b)); }; const setLog = (array: Array<number>): void => { array[0] = 999; console.log(array); }; const array = [2, 1, 3]
![TypeScript では T[] ではなく ReadonlyArray<T> を使おう](https://cdn-ak-scissors.b.st-hatena.com/image/square/7526e1ea300085572f869b014b1c3f0ba5d8a620/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fproxy.goincop1.workers.dev%3A443%2Fhttps%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--vm0KzhIi--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3ATypeScript%252520%2525E3%252581%2525A7%2525E3%252581%2525AF%252520T%25255B%25255D%252520%2525E3%252581%2525A7%2525E3%252581%2525AF%2525E3%252581%2525AA%2525E3%252581%25258F%252520ReadonlyArray%25253CT%25253E%252520%2525E3%252582%252592%2525E4%2525BD%2525BF%2525E3%252581%25258A%2525E3%252581%252586%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3A%2525E3%252583%25258A%2525E3%252583%2525AB%2525E3%252583%25259F%2525E3%252583%2525B3%2525E3%252583%252581%2525E3%252583%2525A7%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzAwZjkwMDRhZGIuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png%3F_a%3DBACAGSGT)
バックエンドエンジニアの松尾です。 2024 年 5 月 11 日に開催された日本最大級の TypeScript をテーマとした技術カンファレンス TSKaigi 2024 に参加しました。 本記事では弊社からの登壇内容やスポンサーブースの様子をお伝えします。 登壇内容まとめ 弊社からは下記の LT で 2 名のエンジニアが登壇しました。 TypeScript で使いやすい OpenAPI の書き方 speakerdeck.com yukimochi さんからは OpenAPI の書き方について紹介しました。 変更に強く、ドメインモデルを正確に表現する書き方にすることで、TypeScript で使いやすいコードを生成できるとのことでした。 筆者は最近 OpenAPI spec を書くことは無いのですが、Union を用いた定義は非常に同意するところであり、今後の開発で活用していきたいと思い
株式会社ドワンゴは2024年5月11日に開催される日本最大級のTypeScriptをテーマとした技術カンファレンス TSKaigi 2024 にプラチナスポンサーとして協賛いたします。 TSKaigi 2024 当日は弊社教育事業エンジニアが複数名参加します。スポンサーブースをいただいていますので、現地で参加される方は是非お気軽にお越しください。 スポンサーブースではN予備校内にあるTypeScriptの教材を触れる他、限定ノベルティもご用意しております！ ドワンゴの教育事業とは？ 私たちは、未来の「当たり前」の教育をつくるため、生徒・学生や教職員の「学ぶ」「教える」体験の最大化を日々目指しています。 日本発の本格的なオンライン大学「ZEN大学(仮称)(設置認可申請中)」や、2万名を超え日本最大の生徒数であるネットの高校「N高等学校・S高等学校」と連携し、ネットの時代に合わせた教育関連のサ
去年末ぐらいから Deno を使う割合がグッと増えてきた。最近のJS関連は7割ぐらい deno 環境の VSCode でコードを書いている気がする。 今回はいくつかの実例を示しながら、実際に Deno 使えるじゃんというイメージを持ってもらうためのユースケースを紹介していく。 というか、 deno が普及してくれないと、自分が作ったツールの紹介を全部 deno のインストールから書かないといけなくなる。みんなインストールしといて。 最初に: なぜ Deno を使いたいか 一番の問題点、Node は新しいプロジェクトを一式整えるための手間が非常に重い。 とくに ts で書いたものを他の環境に渡すための方法が未だにしんどい。ある環境で動いたコードをそのままコピーしても、プロジェクト設定の非互換を踏む可能性が非常に高い。 deno にそういう側面がないとは言わないが、非常に少ない。とくに TS
2024/6/20 TypeScript 5.5が正式リリースしたので追記しました。 TypeScriptの次バージョン5.5で、開発者が長い間求めていた機能がついに実現されました。 従来のTypeScript 5.4以前では、ユーザー定義型ガードを使う際には型述語（用語は後ほど解説します）の記述が必要です。 ▼ TypeScript 5.4 function isNumber(value: number | string): value is number { return typeof value === 'number'; } 2024年6月20日にリリースされたTypeScript 5.5では、関数の実体から型述語の型推論（infer type predicates）が可能になります。すなわち、次のようなコードが可能です。 ▼ TypeScript 5.5
この記事は、弁護士ドットコム株式会社の Advent Calendar 2023 の 22 日目の記事です。 前日は @et_tei さんの「FireHOL で公開されているブラックリストからの接続 Akamai でブロックする」でした。 こんにちは。税理士ドットコム事業部の @komtaki です。 数年間 TypeScript を業務で使っていたのですが、型パズルの Type Challenges をやってようやく TypeScript の本質を理解していないことに気づきました。 この記事では Type Challenges を通して、私のような型パズルが難しいと感じる人のために型パズルを理解するための言語機能と使い方を 8 つのポイントでまとめます。 この 8 つのポイントを理解すれば、いろんな型パズルが理解できるようになるはずです。 Type Challenges とは TypeS
はじめに こんにちは！ソフトウェアエンジニアの種岡です。 私たちのチームでは、TypeScriptを使用して開発を行っており、Prettierというコードフォーマッターを利用し、チーム内でコーディングスタイル統一に大変重宝しています。 そんなフォーマッター界隈で、Rust製で爆速で動作すると噂のdprintが良いということで試してみたところ、驚くべきことが起きました！ Prettierでは、コードフォーマッティングに 7.69秒 かかっていたのですが dprintを使うことでわずか 0.47秒 で完了するようになりました🚀🚀🚀 なんと、 10倍以上速い とういう結果に！ コードフォーマットは、Gitのpre-commitフックやGitHub Actionsで日々活用しており、普段の開発作業の裏側でコードの品質を支えてくれているありがたい存在です。 この速度改善により、開発プロセスの中
Next.js + サーバーサイドTypeScript + 関数フレーバーでクリーンなアプリを作ったので実装意図とか書く Advent Calendar 2022 の8日目。株式会社mofmofに生息しているshwldです。 前日はEither型について書きました TaskEither型を使ってResult型を作る fp-tsにはTaskEitherというものがあります。 失敗する可能性のある（Either）非同期処理（Task）を表現することができるものです。 具体的にみていきましょう。 fp-tsのtryCatchを使うことで、PromiseをTaskEitherに変換することができます。 import { tryCatch } from 'fp-ts/TaskEither' const taskEither = tryCatch(() => { saveToDatabase() },
{ 0: T }という型は「0番目の要素がT型であり、必ず存在する」ことを表します。 配列はオブジェクトでもあり、オブジェクトのプロパティ名に数値も使えるというTypeScriptの言語仕様を巧みに活かした型定義です。 しかしこの型定義ではスプレッド構文を使うと「空でない」という情報が型から消えてしまいます。 例えば次のように配列のシャローコピーを作ると型から{ 0: T }の部分が消えます。 type NonEmptyArray<T> = T[] & { 0: T } // ↓string[]型になる😥 NonEmptyArray<string>型にはならない type Spreaded = [...NonEmptyArray<string>] const array: NonEmptyArray<string> = ['a', 'b'] // ↓型エラーになってしまう😥 [...a
はじめましての人ははじめまして。そうでないひとはお久しぶりです。猫ロキ P(@deflis/id:deflis55)です。 TypeScript 4.9 で導入された新しい演算子 satisfies をご存知でしょうか？ 自分には関係ないと思っている人も多いと思うんですが、意外と使えるところが多いので、ここで紹介したいと思います。 satisfies 演算子とは？ 簡単に解説します。詳しくはリリースノートを見てください。 www.typescriptlang.org TypeScript では as const という const アサーションによって静的なオブジェクトを作ることができます。 type ColorName = 'prop1' | 'prop2'; const obj: Record<ColorName, string> = { prop1: 'value1', prop2:
こんにちは、よしこです。 この記事では、わたしの所属する株式会社ナレッジワークで最近コードベースに取り入れた「エラーハンドリング漏れ防止の仕組み」について紹介します。 背景 「通信を伴うアクションに失敗しても画面にエラーフィードバックが表示されない」という実装漏れをしてしまったことがあり、今後こういうことが起きないように仕組みで防止したいと思いました。 「忘れてしまった」という問題なので、テストで担保するのも難しいように思いました。実装するのを忘れてしまっているということは、テストを書くこともセットで忘れてしまっているはずだからです。 「気をつける」「チェックリストを作る」のような人間が注意する方向ではなく、「嫌でも気付く」「忘れていたらCIが通らない」のように、必要なハンドリングを強制する形にできないか？と思いました。 課題 実行時に通信エラーが起きる可能性があり、ユーザーフィードバック
この記事は 「個人開発Advent Calendar 2022」 8日目の記事です。 はじめに 先日リリースされた、SplarateというWebサービスの開発をお手伝いしています。そこで導入したtRPCが驚くほど便利だったので、実際の体験を交えてその使いやすさを紹介します。 tRPCとは？ tRPC allows you to easily build & consume fully typesafe APIs without schemas or code generation. https://trpc.io/docs/ tRPCは、スキーマやコード生成なしで型安全なAPIを簡単に構築し、呼び出すことのできるライブラリです。 tRPC is for full-stack TypeScript developers. と謳われているように、TypeScriptに特化して作られており、Ty
ReactのComponentProps型を使って不要なPropsとお別れしよう！！2022-10-202022-10-21 どうもReactおじさんです。 ブログをリリースして満足していましたが、記事を執筆しないと価値が無くなってしまうので、だらけずにアプトプットしていこうと思います。 今回は汎用コンポーネントの作り方です。 一般的な汎用コンポーネントの作り方フロントエンドエンジニアであればコンポーネント作成は避けて通れない道ですよね、、 今回のメインに行く前に一般的に作られているコンポーネントの作り方をおさらいしましょう。 ボタンコンポーネントの場合import type { FC, ReactNode } from "react"; type Props = { children: ReactNode; onClick: () => void; }; export const But
本カレンダーは、Qiita Top Contributor の @suin さんからのお題です。 みなさまの素敵な記事をお待ちしています。 今回のお題 もしも、あの頃に。 TypeScript始めたてのあの頃に戻れるとしたら──。 時間跳躍(タイムリープ)TypeScript 想像してみてください！TypeScriptを始めた当時の自分に何か伝えられるとしたら、何を伝えたいですか？ TypeScriptを使いだしてから、いろいろなことを学んできたはずです。 その中で、最初から知っていたら良かったと思うことはありませんか？ このカレンダーのテーマは「TypeScript始めたての頃に知っておきたかったこと」です。 TypeScriptを始めて間もない人も、バリバリにTypeScriptを使いこなしている人も、自分が学び始めだった頃を思い起こして、その当時に知っておいたら良かったことをご投稿く
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
