近年、TypeScript を取り巻くエコシステムでは、ユーザーに明示的な型注釈を求めることで、推論や型生成のコストを下げるというアプローチが注目されています。TypeScript 5.5 beta で 発表された --isolatedDeclarations オプションはその代表的な機能ですし、Deno の提供する新しいパッケージレジストリ JSR が提唱している slow types という考え方も同様のアプローチを求めるものです。 この記事では、上記のようなアプローチが提案された経緯や解決したい課題について、TypeScript を利用するエコシステムの状況も踏まえて整理します。 TypeScript を取り巻くツールチェインと型情報を利用する上でのパフォーマンス 皆さんがご存知の通り、TypeScript の型推論は非常に賢く、その機能は日々アップデートされています。特に以下のよう
Rust製TypeScript LinterであるBiome, Oxc, deno_lintなどは、TypeScriptの型情報を利用するLintルール（型情報Lintルール）[1]を持っていません。本記事では、その背景から、Rust製TypeScript Linterが型情報Lintルールを実現するための手段についてまとめます。 筆者のTSKaigi 2024で利用した下記登壇資料に情報を追加し、文章化したものです。 要約すると、以下になります。 Rust製TypeScript Linterは、安全性をさらに高めてくれるtypescript-eslintの型情報Lintルールが欲しいが、パフォーマンスを犠牲にしたくない。TypeScript Compilerに頼らずに実現するには、Alternative TypeScript Compilerや型推論が必要。型情報Lintルールの実装を型
tsc の代替実装を作る話、とりわけ Rust や Go で tsc を高速化した移植版を作る話について。非常に野心的で面白いと思いつつ、正直僕は実用レベルまで達したものが本当に登場するのか疑問に思っている。今ある型システムもそうだし、新機能として追加されるものにも追従する必要がある。当然、実用レベルとして使ってもらうには、不具合も少なくないといけない。 それに tsc も最近はパフォーマンス改善に力を入れているように見えている。実際にリリースノートを見ると、ちょくちょくパフォーマンス改善系の変更が入っている。 TypeScript: Documentation - TypeScript 4.8 TypeScript: Documentation - TypeScript 4.9 TypeScript: Documentation - TypeScript 5.0 TypeScript:
Magic UI
UI library for Design Engineers20+ free and open-source animated components built with React, Typescript, Tailwind CSS, and Framer Motion. 100% open-source, and customizable.
Zodスキーマでプロンプト生成を行い構造化データを自由自在に扱えて、LLMプロダクト開発が圧倒的に効率化した話 - Algomatic Tech Blog
最近はAIエンジニアを名乗ってるerukitiです。フロントエンドもバックエンドも、LLMを触るあれこれもやってるので、「AIエンジニア」くらいを名乗るとちょうどよさそうだなと思ってます。いずれLLM自体の開発なんかもやってるかもしれません。 LLMプロダクトを開発していると、構造化データを作りたいのに、Anthropic ClaudeのAPIにはJSONモードが無いことや、なんならJSONモードやfunction callingを使っても、データが正しい形式に従ってることは保証しがたい、みたいな自体に遭遇することがあります。 JSONが出力できたとしても、構造化データをうまく吐き出させるのは難しいものです。文字列を出力させたいけど、複数あるときは、配列なのか、それともカンマ区切りなのか？項目がオプショナルの場合はどうするか？項目が存在しない、空文字や 0 や undefined や nu
こんにちは、バックエンドエンジニアの日下です。 CSV から JSON へ変換するスクリプトを、TypeScript で実装する機会がありました。 今回は、CSV のデータのバリデーションに Zod を使った話をします。 スクリプトの目的 システム間のデータ連携が目的です。 連携元のシステムから CSV 出力されたデータを、連携先のシステムで利用する JSON へ変換します。 また、JSON への変換以外にも以下の要件があります。 CSV のデータをバリデーションする 連携先のシステムで利用できるデータであることを保証するために、バリデーションを実行します。 バリデーション失敗時に、日本語のエラーメッセージを表示する スクリプトの実行は業務担当のエンドユーザーが行うため、日本語のエラーメッセージを表示します。 CSV の読み込み 元データとなる CSV の読み込みは、csv-parse を
TypeScript Custom GitHub Action Development Tips
GitHub Actions における JavaScript/TypeScript Custom Action の開発・運用知見を紹介します！ 2024-05-16 GitHub Actions Meetup Tokyo #3 にて発表 https://gaugt.connpass.com/event/317178/ 会場：株式会社サイバーエージェント Abema Towers YouTube 配信アーカイブ https://www.youtube.com/watch?v=mR684-oSAJw
バックエンドエンジニアの松尾です。 2024 年 5 月 11 日に開催された日本最大級の TypeScript をテーマとした技術カンファレンス TSKaigi 2024 に参加しました。 本記事では弊社からの登壇内容やスポンサーブースの様子をお伝えします。 登壇内容まとめ 弊社からは下記の LT で 2 名のエンジニアが登壇しました。 TypeScript で使いやすい OpenAPI の書き方 speakerdeck.com yukimochi さんからは OpenAPI の書き方について紹介しました。 変更に強く、ドメインモデルを正確に表現する書き方にすることで、TypeScript で使いやすいコードを生成できるとのことでした。 筆者は最近 OpenAPI spec を書くことは無いのですが、Union を用いた定義は非常に同意するところであり、今後の開発で活用していきたいと思い
5月11日(土)に開催されたTSKaigi2024に、エムスリーエンジニアリンググループはリフレッシュメントスポンサーとして協賛しました。リフレッシュメントコーナーでは、レッドブル・ラムネ・焼き菓子等々を提供しておりましたが、その中でも一際目立っていたであろうものが....『難読コードクイズ付き』のコアラのマーチ！ ！ リフレッシュメントブース ということで今回は、TSKaigiでリフレッシュメントクイズとして出題したコードクイズの解説をお送りします。 自己紹介 初めまして、今年の4月から24卒の新卒として入社しました池奥(@Selria1)です！ エンジニアリンググループのデジスマチームに所属しています。 今まではもっぱらウェブフロントばかり触っていましたが、入社してからはメンターさんやチームの方々の助けを借りながら、バックエンドやインフラも幅広く挑戦中です。 好きなことはハッカソン！学
Contents Introduction Issue Solution Introduction Branded types in TypeScript enable the creation of new types by affixing a type tag to an existing underlying type. This tag, commonly referred to as the "brand", distinguishes values of the branded type from others sharing the same underlying type. Acting as a compile-time validator, the brand ensures that values are utilized correctly within thei
TSKaigi 2024で短い発表をしましたが、これには元ネタというかオリジナルの記事があります。 ChatGPTに翻訳してもらいました👇 なぜZustand TypeScript実装はこんなに醜いのか ちなみに、JavaScript実装はとてもクリーンです 序論 注: この投稿はZustandライブラリのTypeScript実装に焦点を当てています。 ユーザーコードには影響しませんが、クリーンに保つべきです。 ZustandのJavaScript実装は非常に小さいですが、以下のツイートで見られます。 しかし、そのTypeScript実装はかなり複雑です。 その理由はいくつかありますが、この投稿ではそのうちの一つを探ります。 SetStateInternal型 SetStateInternal 型をもう少し詳しく見てみましょう。 (これは内部使用を意図していることを念頭に置いてください。
いろんなJavaScriptの統計を見ると、今時のウェブフロントエンドの新規開発は80%はTypeScriptになっているということです。また、TypeScript自身を使わなくても、TypeScriptで培われた型推論のパワーで、JavaScriptであってもVSCode上で補完とか思いの外うまくいったりしちゃうので、TypeScriptフレンドリーというのはますます重要になっています。 ですが、TypeScriptが有効なのはコンパイル前とか実装中であり、実行時に流れてくるJSONが果たしてきちんとした型通りの定義なのかはTypeScriptの範疇外です。そこでZodとかのバリデーションを行ってくれるライブラリが使われます。Zodを使えばJSONが規定通りの構造をしているか確認した上で、TypeScriptの型を持った変数に安全に代入してくれます。 ですが、JSONというのはネットワー
はじめに 先日開催されたTSKaigi 2024にて配信チームとして、オンライン配信のスタッフをしていました。 当日の各トラックの配信運営や総合的な環境構築などは他のメンバーを中心に行っていただきましたが、自分は配信画面のデザインや配信に乗せる情報管理用のシステムをコツコツ作っていたのでその紹介をさせていただきます。 情報管理用のシステムといってもローカルマシン上で動く簡単なもので、NodeCGと呼ばれるNode.js向けの配信画面管理用のフレームワークを利用しました。 NodeCGとは NodeCGは先ほど紹介したようにNode.jsとブラウザ技術で動的な配信画面を作成したり、管理画面を提供してくれるフレームワークです。 配信レイアウトとダッシュボードはブラウザ上で動作し、ダッシュボードで編集した情報を配信レイアウト側にWebSocketでリアルタイムに反映したり、WebSocketサー
TSKaigi 2024での発表です。 テキスト編集時の型の重さの影響、 Type Instantiationの回数が型の重さに繋がるという観点から、 Distributive Conditional Types、Template Literal Types、Generic Constraintsについてと、 それらがType Instantiationの回数に与える影響について、MUIやreact-hook-formの実例からお話しました。 また、改善方法やデバッグツールについても触れています。 https://tskaigi.org/talks/ypresto 当日Google Driveで上げたものをそのまま上げております。デバッグなどの参考リンクを拡充して、後日更新予定です。 FAQ：写真は自分で撮影したのですか？→すべて万博記念公園で撮影しました！ ==== TypeScript
TSKaigi 2024のスポンサーLTでTypeScriptコード改善の取り組みについて紹介しました | MEDLEY Developer Portal
2024-05-13TSKaigi 2024のスポンサーLTでTypeScriptコード改善の取り組みについて紹介しましたこんにちは。医療プラットフォーム本部プロダクト開発室 CLINICS 第二開発グループ所属の髙橋です。 メドレーは 5 月 11 日に中野セントラルパークカンファレンスにて開催された TSKaigi 2024 に Gold Sponsor として協賛しました！ TSKaigi は、今年から開催された日本最大級の TypeScript をテーマとした技術カンファレンスです。 エンジニアの徳永と吉岡、髙橋の計 3 名が現地参加し、たくさんの方々と交流させて頂きました。 今回はスポンサー LT とブースの様子をご紹介します。 スポンサー LTスポンサー LT セッションでは、「チームで挑む TypeScript コードの漸進的改善」というテーマで髙橋が発表しました。 発表では
TypeScript 版 Mackerel API クライアントライブラリを作った - Object.create(null)
作りました. jsr.io リポジトリはこっち. github.com (2024-05-12 現在, 筆者は Mackerel を開発している株式会社はてなの社員ですが, これは個人プロジェクトで, API ドキュメントなどの公開されている情報に基づいて作成されています.) なぜ JSR になんか publish したくなった 乗るしかないこのビッグウェーブ TypeScript で Mackerel を操作するちょっとしたスクリプトを書きたかったが, 意外とクライアントライブラリがなかった 単に JSON を fetch してくるだけなら簡単だが, それだけでは型もないし使いづらい 使い方 1. JSR からインストール # Deno deno add @susisu/mackerel-client # Node.js npx jsr add @susisu/mackerel-clie
Result 型 (類似するものとして Either Monad の方が有名かもしれません) を導入する場合、アプリケーション全体の設計を変えたり、全箇所を書き換える必要はありません。 neverthrow は部分的に使用でき影響範囲も閉じるので、局所的に使い始めることができます。 (Rust のような) Result 型 とは ざっくり言うと関数の処理の結果と成否を 1 つの型 Result<T, E> で表したものです。(T は期待する結果の型、 E はエラーを表現する型) 筆者は詳しくはないのですが、 Haskell 等にある Either<L, R> とは厳密には違うようです(Either は両方の値が使用可能であることを前提としている？) 参考: Rust ではなぜ、Either 型ではなく Result 型を採用しているのか neverthrow とは TypeScript で
TSKaigi 2024 のトークと、登壇者がスライドを公開していればその URL を記載しています。 トラックごとのトーク、および登壇者情報は公式サイトに詳しく掲載されているので、そちらをご確認ください。
ごきげんよう！技術イベント大好き、941です。好きすぎて自分で開催したり、仕事で担当したり、同人誌を出したりしています。 そういえばブログに書くの忘れてたんですが、技術書典の「第7回 刺され！技術書アワード」大賞を受賞しました。やったね！ありがとうございます。 というわけで技術イベントの運営陣たちにジワジワと根強い人気がある当ブログの「さらりと参加してきた」シリーズです。最新はこちら、ドン！ TSKaigi 2024！でございます。これまで参加できてなかったんですが、TypeScript周辺は利用者がグイグイ増えていて注目しているコミュニティでもあります。フロントエンド・バックエンド・インフラと幅広いエンジニアが集う、TypeScriptに関する幅広いテーマを取り上げる幅広いイベントであるというのも要チェックポイントですね。 参加したいなーと思っていたけど気づいていた頃にはチケットが売り切
TSKaigi 2024 の発表資料です。 https://tskaigi.org/talks/yanaemon169 Demo 用コードはこちら https://github.com/yanaemon/nestjs-migration-example ミツモアはサービスの提供開始から、6 年以上が経ち、サービが急速に拡大してきました。 急成長の中で、古いコードが多くあり新しい構成への変革が求められていました。 その中の一つに Express + TypeScriptを用いて書かれていた Backend のコードをNest.js へ移行することを決定しましたが、 管理用の API なども数えると数百を超える API 数がありました。 全て手作業で移行をしていては膨大な時間がかかります。 そこで効率的に移行するため、TypeScript のコードを Abstract Syntax Tree
TSKaigi 2024 https://tskaigi.org/
Effectで作る堅牢でスケーラブルなAPIゲートウェイ / Robust and Scalable API Gateway Built on Effect
May 11, 2024 @ TSKaigi
TSKaigi 2024 で話した「Prettier の未来を考える」という発表のスピーカーノートです。スライドは こんにちは、今日は「Prettierの未来を考える」というタイトルでお話させていただきたいと思います。 鈴木 颯介と言います。ユビー株式会社でプロダクト開発エンジニアとして働きながら、筑波大学でパソコンの勉強をしています。オープンソースソフトウェアが好きで、今日お話するPrettierのメンテナーをしたり、トランスパイラのBabelのコミッターをしたりしています。最近はWebKitのJSエンジンにたくさんパッチを投げたりしています。 私が働いているユビーは、TSKaigiのGold Sponsorをさせてもらっています。ブースがあります。ユビーのグッズの他に、Prettierのステッカーも配布しておりますので、興味がある方はぜひお立ち寄りください。 まず、Prettierにつ
TSKaigi 2024 14:40~ トラック2
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Exploring Type-Informed Lint Rules in Rust based TypeScript Linters
Exploring Type-Informed Lint Rules in Rust based TypeScript Linters | Rust製TypeScript Linterにおける型情報Lintルールの模索 This slides are used at TSKaigi 2024 | TSKaigi 2024 にて利用した資料です。(20m) Update requests are welcome anytime. ## References - Rust-Based JavaScript Linters: Fast, But No Typed Linting Right Now https://www.joshuakgoldberg.com/blog/rust-based-javascript-linters-fast-but-no-typed-linting-right-n
2024/05/11に行われたTSKaigiで発表したLTの資料です！ ◎概要 TypeScriptはJavaScriptのスーパーセットとして、静的型付けと高度な型システムを提供し、大規模なプロジェクトの開発を助けています。しかし、これらの利点を最大限に活用するためには、コンパイルパフォーマンスの最適化が不可欠です。コンパイル速度を上げることでビルド時間やテスト実行時間の削減を行うことができます。今回の発表では、TypeScriptのコンパイルパフォーマンスを改善するための具体的な手法とその背後にある理論をいくつか紹介します。 ◎内容 1. TypeScriptのパフォーマンスとは何か、そしてなぜそれが重要なのか 2. コンパイル速度を改善するための具体的な手法とその背後にある理論 本資料で紹介している内容については以下の記事で詳しく記載していますので合わせて参照していただければと思いま
TypeScriptはIoTの領域でも使われており、様々なハードウェアと連動させて動かすことができます。 Webブラウザ経由でBluetoothを制御したり、スマートフォンの加速度センサで動きをセンシングしたりなど、ディスプレイの外側の現実世界と連動させることもやりやすい時代になりました。 選択肢が増えた分、「やりたいこと」に対して「どれを使うのが適切なのか」「将来的な拡張性があるのはどれか」などの選定が難しくなってきています。 本発表では、みんな大好きラズベリーパイから、Microsoftが出したDeviceScriptや、組み込みマイコンをどうやってTypeScriptで制御する際の選択肢など、IoT/ハードウェアにおけるTypeScriptの選択肢とそれぞれの違い、および実際に使う際に気をつけないといけない点などについてお話いたします。
この記事はTSKaigi2024での以下の私の発表内容を書き下ろしたものです。 なぜAPIに型をつけたいのか 現代のWebのシステム開発において、クライアント・サーバーともに型のある言語で開発されることが増えてきました。静的な型検査はコードの堅牢性やよりよいメンテナンス性の向上をもたらします。 プログラミング内部だけで型検査をするだけでも十分メリットはありますが、外部I/Oに対する型付けが不十分だとそのメリットを最大限に発揮してるとは言えません。外部I/Oとは、例えばWebフロントエンドだとLocalStorageやDOMからの入力値、それからネットワーク通信（今回はこれをAPIと呼びます[1]）などですね。サーバー側でいうとAPIからの入力・レスポンスやデータベースへの読み書きが該当します。 個人的な経験から言うと、Webシステムの開発におけるエラーの多くはAPIやデータベースとのやり取
TSKaigi 2024 TypeScript ASTを利用したコードジェネレーターの実装入門 | ドクセル
スライド概要 TSKaigi 2024 11:30~12:00 トラック2 セッション https://tskaigi.org/talks/Himenon TypeScriptのAPIにはAbstract Syntax Tree（抽象構文木。以降ASTと省略）に関するAPIがあります。抽象構文木は静的解析やSyntax Highlight、Code Generatorなど普段我々が利用しているツールの内部で利用されています。 本発表では、TypeScriptのASTに入門しつつ、その応用であるコードの自動生成をどうやって実現していくか、OpenAPI Code Generatorのライブラリを4年間維持し続けている経験から紹介していきます。
neverthrow の全機能リファレンス
JavaScript/TypeScript で try/catch を使わないエラーハンドリングに利用できるライブラリとしてはそこそこ有名だと思う neverthrow ですがあまり解説された記事が少なく、関数型と手続き型の書き方をいい感じにミックスできるいいライブラリで情報の少なさから選択されないのも勿体なく感じました。ちょうど GitHub のドキュメントを読みながら意訳してまとめた手元の技術メモがありますのでその一助になればと公開します。 neverthrow とは supermacro/neverthrow: Type-Safe Errors for JS & TypeScript プログラムのエラーハンドリングを try - catch ではなく関数型プログラミング由来の Result 型や Either 型と呼ばれる方法で実現する機能を提供するライブラリです。具体的には Res
TSKaigi 2024 https://tskaigi.org/ Lightning Talk
TypeScriptでもLLMアプリケーション開発 / LLM Application In Typescript
GPTsをMVPに使うアジャイルな社内LLMツール開発 / Agile in-house LLM tool development using GPTs as MVPs
TSKaigi 2024 ref: https://tskaigi.org/talks/tockn
2024/05/11開催されたTSKaigiに登壇した際のプレゼン資料です。
TSKaigi 2024 のスライドです
みなさん、こんにちは。物流・運送会社向けにSaaSを開発するアセンド株式会社で取締役CTOを務めている丹羽（@niwa_takeru）です。 今回は初開催をとうとう１週間後に控えると共に、私が理事を務めているTSKaigi 2024について、開催に至るまでの想いを発信したいと思います。 思えばちょうど１年前のゴールデンウィークに旅先の函館のサウナで、日本に住む１CTOをとして何か社会に還元できることはないかと考えた結果が、TypeScript に関する大規模カンファレンスを開催することでした。 そして１年が経ち、この5月11日に1,000名を超える参加者が集う TSKaigi 2024 を数々の方の尽力と共に初開催を迎えることができました。皆さんへの感謝の思いと共に綴ります。 TypeScriptのカンファレンスの再始動TypeScript に関する大規模なカンファレンスはTSConfJP
2024年5月11日（土）に開催された TSKaigi 2024 のセッションで発表したスライドになります。 Vue3がリリースされ、早くも4年弱経とうとしています、Vue2のLTSも2023年末に終了し、新規開発ではVue3を利用することが主流となってきました。 Vueと並ぶフレームワークとしてReactがありますが、未だにReactと比較される際、TypeScript対応が…という噂がたまに聞こえてきます。しかして、Vue3とTypeScriptの親和性は実際のところどうなのでしょうか。Piniaやその他ツールチェイン側などと共にVue3の機能や実際の実装例とともにVue3とTypeScriptの親和性の疑問を解消できるような発表にできればと思っています。 https://tskaigi.org/talks/karan_corons
はじめに こんにちは！@nyakako13 です。 少し前からtypescript,reactの学習を進めています。 pythonでの開発時はblack formatterとiSortの拡張機能でimport文の自動並べ替えをしていました。 今回、typescriptの開発でも同じように自動でimport文の整理ができないかな？と思い調べてみました。 eslintやprettierでもplugin等で実現できるみたいですが、現在は一人での開発で、すべてのプロジェクトに適用したいので、とりあえず今回はvscodeの設定でやってみます。 vscodeの設定方法 vscodeのsetting.jsonを開きます 下記を追記します。 "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.organizeImports"
見よ、これがHonoのRPCだ
僕が開発しているWebフレームワークHonoは、同じJavaScriptのフレームワーク、Expressと比べられることが多いです。どちらもやれることはほぼ同じですが、HonoのアドバンテージはファーストクラスでTypeScriptをサポートしていることです。特に「RPC」機能は他のフレームワークにはなかった「TypeScriptの型でサーバーとクライアントの仕様を共有する」ことを可能にしています。今回はそのHonoのRPCについて紹介します。 どんなものか まず、どんなものかを箇条書きで共有します。 Web APIの仕様、特にインプット・アウトプットをサーバーとクライアント間で共有するためのもの OpenAPIやgRPCを使ってやりたかったことを叶えるかもしれない サーバーとクライアントをどちらもTypeScriptで書くことが大前提である 同種のものにtRPCがあるが、Honoの場合、
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
明示的な型注釈によって推論コストを下げるというアプローチ
Rust製TypeScript Linterにおける型情報Lintルールの模索
tsc の代替実装は作れるのか - mizdra's blog
Zod を使って CSV からの入力データをバリデーションする - ドワンゴ教育サービス開発者ブログ
TSKaigi 2024 参加レポート - ドワンゴ教育サービス開発者ブログ
TSKaigiのスポンサーです、リフレッシュクイズの解答解説をお送りします - エムスリーテックブログ
Branded types for TypeScript - Carlos Menezes
TSKaigi 2024で発表した内容の元ネタ「なぜZustand TypeScript実装はこんなに醜いのか」
ZodでJSONのオブジェクトを実行時に都合の良い型に変換する | フューチャー技術ブログ
TSKaigiは配信画面もTypeScript製だったという話
TypeScriptの型とパフォーマンス (TSKaigi 2024)
neverthrow で局所的に Result 型を使い、 try-catch より安全に記述する
TSKaigi 2024 スライドまとめ【非公式】
TSKaigi 2024にさらりと参加してきた #TSKaigi - 941::blog
TypeScript の抽象構文木を用いた、数百を超える API の大規模リファクタリング戦略
Real World Type Puzzle and Code Generation
TSKaigi 2024 Prettierの未来を考える スピーカーノート
tRPCを実務に導入して分かった旨味と苦味
Prismaでスキーマ変更を行う際のベストプラクティス
TypeScriptのパフォーマンス改善
ハードウェアを動かすTypeScriptの世界
TypeScriptとGraphQLで実現する型安全なAPI実装
Powerfully Typed TypeScript
Prisma ORMを2年運用して培ったノウハウを共有する
【TSkaigi】2024/05/11 当日スライド
TypeScript 関数型スタイルでバックエンド開発のリアル
TSKaigi 開催に向けて｜Niwa Takeru｜アセンド株式会社CTO
サービス開発におけるVue3とTypeScriptの親和性について
【vscode】TypeScriptで不要なimport文を自動削除＆自動で並べ替え - Qiita