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.
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.
作業メモ。モダン Python 速習。 AI 周りのツールを動かしていたら TypeScript だけでやるには無理が出てきたので、久しぶりに Python の環境構築をする。 具体的には TestGen LLM を動かしたい。 Python はたまに触るけど、基本 2.x 時代の知識しかない。 基本的にこの記事を読みながら、細かいアレンジをしている。 追記 rye が ruff と pytest を同梱してるので rye fmt, rye check, rye test で良かった uvicorn を叩くより、 fastapi-cli を使って起動したほうが良さそうので変更 基本方針: Rye に全部任せる 良く出来てると噂に聞いたので、 rye に任せる。 自分が Python が苦手な点は pip を下手に使うと環境が汚れていく点で、基本的に rye で閉じて管理させる。システムの
React 19を概念から理解する
2024-05-29うひょさんに聞く！ React 19アップデートの勘所 #React19_Findy
TSKaigi 2024 のスライドです
TSKaigi 2024 ref: https://tskaigi.org/talks/tockn
TSKaigi 2024 のトークと、登壇者がスライドを公開していればその URL を記載しています。 トラックごとのトーク、および登壇者情報は公式サイトに詳しく掲載されているので、そちらをご確認ください。
この記事はTSKaigi2024での以下の私の発表内容を書き下ろしたものです。 なぜAPIに型をつけたいのか 現代のWebのシステム開発において、クライアント・サーバーともに型のある言語で開発されることが増えてきました。静的な型検査はコードの堅牢性やよりよいメンテナンス性の向上をもたらします。 プログラミング内部だけで型検査をするだけでも十分メリットはありますが、外部I/Oに対する型付けが不十分だとそのメリットを最大限に発揮してるとは言えません。外部I/Oとは、例えばWebフロントエンドだとLocalStorageやDOMからの入力値、それからネットワーク通信（今回はこれをAPIと呼びます[1]）などですね。サーバー側でいうとAPIからの入力・レスポンスやデータベースへの読み書きが該当します。 個人的な経験から言うと、Webシステムの開発におけるエラーの多くはAPIやデータベースとのやり取
2024/05/11に行われたTSKaigiで発表したLTの資料です！ ◎概要 TypeScriptはJavaScriptのスーパーセットとして、静的型付けと高度な型システムを提供し、大規模なプロジェクトの開発を助けています。しかし、これらの利点を最大限に活用するためには、コンパイルパフォーマンスの最適化が不可欠です。コンパイル速度を上げることでビルド時間やテスト実行時間の削減を行うことができます。今回の発表では、TypeScriptのコンパイルパフォーマンスを改善するための具体的な手法とその背後にある理論をいくつか紹介します。 ◎内容 1. TypeScriptのパフォーマンスとは何か、そしてなぜそれが重要なのか 2. コンパイル速度を改善するための具体的な手法とその背後にある理論 本資料で紹介している内容については以下の記事で詳しく記載していますので合わせて参照していただければと思いま
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 を
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にて配信チームとして、オンライン配信のスタッフをしていました。 当日の各トラックの配信運営や総合的な環境構築などは他のメンバーを中心に行っていただきましたが、自分は配信画面のデザインや配信に乗せる情報管理用のシステムをコツコツ作っていたのでその紹介をさせていただきます。 情報管理用のシステムといってもローカルマシン上で動く簡単なもので、NodeCGと呼ばれるNode.js向けの配信画面管理用のフレームワークを利用しました。 NodeCGとは NodeCGは先ほど紹介したようにNode.jsとブラウザ技術で動的な配信画面を作成したり、管理画面を提供してくれるフレームワークです。 配信レイアウトとダッシュボードはブラウザ上で動作し、ダッシュボードで編集した情報を配信レイアウト側にWebSocketでリアルタイムに反映したり、WebSocketサー
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
GitHub - marpple/FxTS: A functional programming library for TypeScript/JavaScript
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Result 型 (類似するものとして Either Monad の方が有名かもしれません) を導入する場合、アプリケーション全体の設計を変えたり、全箇所を書き換える必要はありません。 neverthrow は部分的に使用でき影響範囲も閉じるので、局所的に使い始めることができます。 (Rust のような) Result 型 とは ざっくり言うと関数の処理の結果と成否を 1 つの型 Result<T, E> で表したものです。(T は期待する結果の型、 E はエラーを表現する型) 筆者は詳しくはないのですが、 Haskell 等にある Either<L, R> とは厳密には違うようです(Either は両方の値が使用可能であることを前提としている？) 参考: Rust ではなぜ、Either 型ではなく Result 型を採用しているのか neverthrow とは TypeScript で
EDIT: A previous version of this post recommended publishConfig, operating under the mistaken belief that it could be used to override "exports" during npm publish. As it turns out, npm only uses "publishConfig" to override certain .npmrc fields like registry and tag, whereas pnpm has expanded its use to override package metadata like "main", "types", and "exports". There are a number of reasons y
近年、TypeScript を取り巻くエコシステムでは、ユーザーに明示的な型注釈を求めることで、推論や型生成のコストを下げるというアプローチが注目されています。TypeScript 5.5 beta で 発表された --isolatedDeclarations オプションはその代表的な機能ですし、Deno の提供する新しいパッケージレジストリ JSR が提唱している slow types という考え方も同様のアプローチを求めるものです。 この記事では、上記のようなアプローチが提案された経緯や解決したい課題について、TypeScript を利用するエコシステムの状況も踏まえて整理します。 TypeScript を取り巻くツールチェインと型情報を利用する上でのパフォーマンス 皆さんがご存知の通り、TypeScript の型推論は非常に賢く、その機能は日々アップデートされています。特に以下のよう
Object.keys() が返す配列の順序における数値キーの昇順には上限がある - カミナシ エンジニアブログ
はじめに こんにちは。昨年の10月にカミナシに入社したソフトウェアエンジニアの tokuse です。 気が付けば入社してから既に半年以上経っており、光陰矢の如しで驚愕しています！ カミナシではフロントエンドを TypeScript で開発しています。そんな中、先日 Object.keys() の仕様に起因する不具合が発生し、その際に Object.keys() が返す配列の順序に関する仕様について詳しく知りました。当稿ではその仕様について説明します（ECMAScript 最新前提です）。 はじめに 問題となった処理 Object.keys() の仕様 まとめ 余談 おわりに 問題となった処理 まず、問題となった処理をサンプルコードで紹介します。次のコードは、オブジェクトの数値キーのうち最大値を取得しようとした処理です。 type UserId = number; type User = {
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
tsc の代替実装を作る話、とりわけ Rust や Go で tsc を高速化した移植版を作る話について。非常に野心的で面白いと思いつつ、正直僕は実用レベルまで達したものが本当に登場するのか疑問に思っている。今ある型システムもそうだし、新機能として追加されるものにも追従する必要がある。当然、実用レベルとして使ってもらうには、不具合も少なくないといけない。 それに tsc も最近はパフォーマンス改善に力を入れているように見えている。実際にリリースノートを見ると、ちょくちょくパフォーマンス改善系の変更が入っている。 TypeScript: Documentation - TypeScript 4.8 TypeScript: Documentation - TypeScript 4.9 TypeScript: Documentation - TypeScript 5.0 TypeScript:
Effectで作る堅牢でスケーラブルなAPIゲートウェイ / Robust and Scalable API Gateway Built on Effect
May 11, 2024 @ TSKaigi
TSKaigi 2024 14:40~ トラック2
TypeScriptはIoTの領域でも使われており、様々なハードウェアと連動させて動かすことができます。 Webブラウザ経由でBluetoothを制御したり、スマートフォンの加速度センサで動きをセンシングしたりなど、ディスプレイの外側の現実世界と連動させることもやりやすい時代になりました。 選択肢が増えた分、「やりたいこと」に対して「どれを使うのが適切なのか」「将来的な拡張性があるのはどれか」などの選定が難しくなってきています。 本発表では、みんな大好きラズベリーパイから、Microsoftが出したDeviceScriptや、組み込みマイコンをどうやってTypeScriptで制御する際の選択肢など、IoT/ハードウェアにおけるTypeScriptの選択肢とそれぞれの違い、および実際に使う際に気をつけないといけない点などについてお話いたします。
TSKaigi 2024 https://tskaigi.org/ Lightning Talk
neverthrow の全機能リファレンス
JavaScript/TypeScript で try/catch を使わないエラーハンドリングに利用できるライブラリとしてはそこそこ有名だと思う neverthrow ですがあまり解説された記事が少なく、関数型と手続き型の書き方をいい感じにミックスできるいいライブラリで情報の少なさから選択されないのも勿体なく感じました。ちょうど GitHub のドキュメントを読みながら意訳してまとめた手元の技術メモがありますのでその一助になればと公開します。 neverthrow とは supermacro/neverthrow: Type-Safe Errors for JS & TypeScript プログラムのエラーハンドリングを try - catch ではなく関数型プログラミング由来の Result 型や Either 型と呼ばれる方法で実現する機能を提供するライブラリです。具体的には Res
TSKaigi 2024 で話した「Prettier の未来を考える」という発表のスピーカーノートです。スライドは こんにちは、今日は「Prettierの未来を考える」というタイトルでお話させていただきたいと思います。 鈴木 颯介と言います。ユビー株式会社でプロダクト開発エンジニアとして働きながら、筑波大学でパソコンの勉強をしています。オープンソースソフトウェアが好きで、今日お話するPrettierのメンテナーをしたり、トランスパイラのBabelのコミッターをしたりしています。最近はWebKitのJSエンジンにたくさんパッチを投げたりしています。 私が働いているユビーは、TSKaigiのGold Sponsorをさせてもらっています。ブースがあります。ユビーのグッズの他に、Prettierのステッカーも配布しておりますので、興味がある方はぜひお立ち寄りください。 まず、Prettierにつ
TypeScriptでもLLMアプリケーション開発 / LLM Application In Typescript
GPTsをMVPに使うアジャイルな社内LLMツール開発 / Agile in-house LLM tool development using GPTs as MVPs
2024/05/11開催されたTSKaigiに登壇した際のプレゼン資料です。
バックエンドエンジニアの松尾です。 2024 年 5 月 11 日に開催された日本最大級の TypeScript をテーマとした技術カンファレンス TSKaigi 2024 に参加しました。 本記事では弊社からの登壇内容やスポンサーブースの様子をお伝えします。 登壇内容まとめ 弊社からは下記の LT で 2 名のエンジニアが登壇しました。 TypeScript で使いやすい OpenAPI の書き方 speakerdeck.com yukimochi さんからは OpenAPI の書き方について紹介しました。 変更に強く、ドメインモデルを正確に表現する書き方にすることで、TypeScript で使いやすいコードを生成できるとのことでした。 筆者は最近 OpenAPI spec を書くことは無いのですが、Union を用いた定義は非常に同意するところであり、今後の開発で活用していきたいと思い
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
5月11日(土)に開催されたTSKaigi2024に、エムスリーエンジニアリンググループはリフレッシュメントスポンサーとして協賛しました。リフレッシュメントコーナーでは、レッドブル・ラムネ・焼き菓子等々を提供しておりましたが、その中でも一際目立っていたであろうものが....『難読コードクイズ付き』のコアラのマーチ！ ！ リフレッシュメントブース ということで今回は、TSKaigiでリフレッシュメントクイズとして出題したコードクイズの解説をお送りします。 自己紹介 初めまして、今年の4月から24卒の新卒として入社しました池奥(@Selria1)です！ エンジニアリンググループのデジスマチームに所属しています。 今まではもっぱらウェブフロントばかり触っていましたが、入社してからはメンターさんやチームの方々の助けを借りながら、バックエンドやインフラも幅広く挑戦中です。 好きなことはハッカソン！学
いろんなJavaScriptの統計を見ると、今時のウェブフロントエンドの新規開発は80%はTypeScriptになっているということです。また、TypeScript自身を使わなくても、TypeScriptで培われた型推論のパワーで、JavaScriptであってもVSCode上で補完とか思いの外うまくいったりしちゃうので、TypeScriptフレンドリーというのはますます重要になっています。 ですが、TypeScriptが有効なのはコンパイル前とか実装中であり、実行時に流れてくるJSONが果たしてきちんとした型通りの定義なのかはTypeScriptの範疇外です。そこでZodとかのバリデーションを行ってくれるライブラリが使われます。Zodを使えばJSONが規定通りの構造をしているか確認した上で、TypeScriptの型を持った変数に安全に代入してくれます。 ですが、JSONというのはネットワー
TSKaigi 2024 https://tskaigi.org/
はじめに JavaScript/TypeScript初学者を抜けたあたりの方に向けてTypeScriptの利点や限界、型レベルプログラミングについて紹介します。 TypeScriptはJavaScriptをラップしたライブラリであり、静的な型情報をつけることができます。また、それらの型情報をもとに型を推論し、型違反な代入やプロパティへのアクセスなどをプログラム実行 以前 に検知することができるようになっています。 例えば、動的型付けの言語であるJavaScriptでは、以下の関数のa,bには数値だけでなく、文字列を渡すことができます。数値同士を渡せば加算してくれますし、文字列同士を渡せば文字列連結をしてくれます。 「数値計算用の関数なのに、文字列連結に利用できてしまう」という緩さを開発時にはなるべく排除しようというのがTypeScriptを導入する意義です。 以下、TypeScriptの基
スプシの翻訳情報を用いた型付けと段階的i18n対応のためのカスタムESLint ### 内容 ・@nuxt/i18nのt関数にパッチを当ててスプシから生成された翻訳情報で型を付ける ・段階的なi18n対応のために特定ファイルから参照されるコードのみに翻訳漏れを検証するカスタムESLint
ごきげんよう！技術イベント大好き、941です。好きすぎて自分で開催したり、仕事で担当したり、同人誌を出したりしています。 そういえばブログに書くの忘れてたんですが、技術書典の「第7回 刺され！技術書アワード」大賞を受賞しました。やったね！ありがとうございます。 というわけで技術イベントの運営陣たちにジワジワと根強い人気がある当ブログの「さらりと参加してきた」シリーズです。最新はこちら、ドン！ TSKaigi 2024！でございます。これまで参加できてなかったんですが、TypeScript周辺は利用者がグイグイ増えていて注目しているコミュニティでもあります。フロントエンド・バックエンド・インフラと幅広いエンジニアが集う、TypeScriptに関する幅広いテーマを取り上げる幅広いイベントであるというのも要チェックポイントですね。 参加したいなーと思っていたけど気づいていた頃にはチケットが売り切
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年間維持し続けている経験から紹介していきます。
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 Playgroundにまとめていますので、 もし実際にコードを確認したい場合はそちらでご確認ください。 26以上のメンバーを持つMappedTypeで型の絞り込みができない 表題の通りですが、実際にコードを見てもらうのがわかりやすいでしょう。 const maxMap = { one: {a: 1}, two: {b: 2}, three: {c: 3}, four: {d: 4}, ... twentyThree: {w:23}, twentyFour: {x:24}, twentyFive: {y:25}, twentySix: {z:26}, } type MapKey = keyof MaxMap type MapValue<T extends MapKey> = MaxMap[T] interface ObjectImpl<Key,
Today we are excited to announce the availability of the release candidate of TypeScript 5.5. To get started using the RC, you can get it through NuGet, or through npm with the following command: npm install -D typescript@rc Here’s a quick list of what’s new in TypeScript 5.5! Inferred Type Predicates Control Flow Narrowing for Constant Indexed Accesses Type Imports in JSDoc Regular Expression Syn
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Python + VSCode の環境構築 20240604
TypeScript 関数型スタイルでバックエンド開発のリアル
Prisma ORMを2年運用して培ったノウハウを共有する
TSKaigi 2024 スライドまとめ【非公式】
TypeScriptとGraphQLで実現する型安全なAPI実装
TypeScriptのパフォーマンス改善
Zod を使って CSV からの入力データをバリデーションする - ドワンゴ教育サービス開発者ブログ
TypeScript の抽象構文木を用いた、数百を超える API の大規模リファクタリング戦略
TSKaigiは配信画面もTypeScript製だったという話
Prismaでスキーマ変更を行う際のベストプラクティス
neverthrow で局所的に Result 型を使い、 try-catch より安全に記述する
Live types in a TypeScript monorepo
明示的な型注釈によって推論コストを下げるというアプローチ
tsc の代替実装は作れるのか - mizdra's blog
tRPCを実務に導入して分かった旨味と苦味
ハードウェアを動かすTypeScriptの世界
Powerfully Typed TypeScript
TSKaigi 2024 Prettierの未来を考える スピーカーノート
【TSkaigi】2024/05/11 当日スライド
TSKaigi 2024 参加レポート - ドワンゴ教育サービス開発者ブログ
TypeScriptの型とパフォーマンス (TSKaigi 2024)
TSKaigiのスポンサーです、リフレッシュクイズの解答解説をお送りします - エムスリーテックブログ
ZodでJSONのオブジェクトを実行時に都合の良い型に変換する | フューチャー技術ブログ
Real World Type Puzzle and Code Generation
TypeScriptを導入する意味と限界、型レベルプログラミングの紹介 - Qiita
TypeScriptを活用したi18n対応
TSKaigi 2024にさらりと参加してきた #TSKaigi - 941::blog
TypeScriptは26以上のメンバーを絞り込めない！
Announcing TypeScript 5.5 RC - TypeScript