Perry — TypeScript → Native
v0.5.306 — generational GC + lazy JSON tape default, faster than Node and Bun on most benchmarks One Codebase. Every Platform. Native Performance.Perry compiles TypeScript to native GUI and CLI apps on macOS, iPadOS, iOS, Android, Linux, Windows, watchOS, tvOS, WebAssembly, and the Web. No runtime. No Electron. Just native binaries.
生成AIでJavaScript/TypeScriptを扱うときに設定しておきたい ESLintルール - プププなテクブ
このエントリはTSKaigi Mashup Kansai 生成AIでTSを扱うときに考えたい設計&ガードレールでの発表内容です。登壇資料をブログとして読めるように再構成して公開しています。 はじめに 去年あたりは「ジュニアエンジニアレベルと思ってね」と公式各所から言われていたコーディングエージェントも、もはやそのレベルを超えてきました。 今や副操縦席に座っているのは人間の側です。しかし、AIが機長だからといって自由に飛行機を操縦してよいかというとそうではありません。決められた航路や離着陸の手順を守る必要があり、そこを外れないガードレールが必要です。 またこれはAIに限った話でもありません。AIであれ人間であれ、「開発者」はもれなく全員が決められたルールに違反しないようコードを書くべきです。またレビュワーも完璧ではありません。問題に気づかないまま変更を承認してしまうこともあるでしょう。 なの
【結論】TypeScriptの型定義はtypeよりinterfaceを使うべき理由
はじめに TypeScriptでコンポーネントのPropsやオブジェクトの型を定義するとき、typeとinterfaceのどちらを使うべきか、一度は悩んだことがあるのではないでしょうか。 巷では「どちらでも良い」「チームで統一されていればOK」といった意見もよく見かけます。 しかし、私は 明確な理由をもって「基本的にはinterfaceを使うべき」 だと主張します。 この記事では私の実体験で遭遇したReactのPropsの深刻なパフォーマンス問題を例に交えながら、なぜinterfaceが優れているのか、そしてtypeはどのような場面で使うべきなのかを解説します。 type aliasを使いたくなる魅力と、その裏に潜む罠 まず、なぜ多くの開発者がtypeを選びがちなのでしょうか。 それは、開発体験の良さにあります。 typeで定義した型は、VSCodeなどのエディタでホバーすると、最終的に解
同じ5行のコードが全く違って見える12の瞬間、なぜ私たちは学ぶのか？
最近、ふとした気づきがありました。 それは、「同じものを見ていても、過去と現在の自分では見えている世界がまったく違っている」ということです。 みなさんには、このコードからどんな世界が見えますか？ async function getUserName(userId) { const response = await fetch(`https://api.example.com/users/${userId}`); const user = await response.json(); return user.name; } はじめに こんにちは、株式会社ココナラ在籍のKです。 本記事では、冒頭の5行のコードを通して、私たちが学ぶ理由について考えてみたいと思います。 TL;DR 同じコードを見ても、人によって見えるものが違っている 学習を重ねることで、それまで見えなかった世界が見えてくる 学習
【TypeScript】enumを使ったっていいじゃないか
TypeScriptで定数をどのように表現するか、というのは意外に意見が分かれるテーマです。本稿では、enumの特徴とその代替手段を整理し、何を採用すべきかを考えてみます。 enumを推奨しないという意見が多いのは知っていても、何故そう言われているのか、を理解していますか？ 「使ってはダメ」と思考停止するのではなく、この記事を読むことでメリット・デメリットを理解して自分で選択できるようになる、かもしれません！ 列挙型（enum）とは enumはJavaScriptにはないTypeScript独自の構文で、定数を集合としてまとめて扱うことができます。 enum Mode { Auto = 'Auto', UDP = 'UDP', TCP = 'TCP', } const mode: Mode = Mode.Auto
TypeScript では T[] ではなく ReadonlyArray<T> を使おう
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%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)
MCP-UI
🌐 Standardized ProtocolMCP-UI is standardized into MCP Apps. The MCP-UI SDKs are fully compliant and ready to use. 🛠️ Client & Server SDKsProvides powerful utilities to create interactive UI resources in MCP servers (Typescript, Ruby, and Python), as well as robust components for simple host integration (React and Web Components).
TypeScriptの条件分岐をスマートに記述するためのTips - Nealle Developer's Blog
はじめに こんにちは、ARCH チームの立川です。 今回が初めてのテックブログになります。 先日、社内で「条件分岐をスマートに評価する」というテーマで、TypeScript（JavaScript）における条件分岐の書き方について発表する機会がありました。古いコードに触れる中で、見通しの悪い記述を多く見かけることがあったため、発表に至った経緯があります。 この記事では、その発表内容をベースにコードの可読性を高める条件分岐のテクニックをご紹介します。基礎的な内容ではありますが、少しでも役立つヒントがあれば幸いです！ 三項演算子をよりスマートに使うためのヒント 三項演算子は非常に便利ですが、状況によってはもっとシンプルで読みやすい代替手段があります。ここでは、等価な三項演算子と比較しながら、それらの方法を紹介します。 null 合体演算子（ ?? ）を活用する null 合体演算子は、左辺が n
.d.tsファイルをちゃんと使うために必要な知識
.d.tsファイルとは、TypeScriptにおいて型定義ファイルと呼ばれるファイルのことです。残念なことに、.d.tsファイルは誤った使い方をされているのを見かけることがあります。そこで、この記事では、.d.tsファイルを正しく使うために必要な知識を解説します。 .d.tsファイルとは .d.tsファイルについては、とりあえずTypeScript公式による以下の説明を読んでください（Announcing TypeScript 5.5から引用）。 Declaration files (a.k.a. .d.ts files) describe the shape of existing libraries and modules to TypeScript. This lightweight description includes the library’s type signatures
TS特化Clineプログラミング(テキスト版)
tskaigi で発表した https://tskaigi.mizchi.workers.dev/ のコピペしやすい用にしたバージョンです。 ほぼ marp のソースコードそのままですが、プロンプトのコピペ用にそのまま公開します。 本資料の内容 うまくいくプロンプト うまくいかないプロンプト、その理由 現状認識 注意: 前日リリースのClaude 4 の評価は間に合ってません!!!! Claude 4 Opus の高すぎる怖い 数時間触った感じ: 改善傾向だが、抱えてる問題も同じ傾向 主張: 言語特化プロンプトが必要(今は) Coding Agent は言語ごとのユースケースに最適化されていない ベストプラクティスをユーザーが取捨選定する必要 TS 周辺は技術選定で発散しがち プログラミング言語間の転移学習は不安定 GitHub を丸暗記しても、コンテキストに応じて翻訳&参照できるかは別の
TS特化Clineプログラミング
Previous slideNext slideToggle fullscreenOpen presenter view TS特化Clineプログラミング mizchi / tskaigi 2025 mizchi: パフォーマンスチューニングの傭兵 一ヶ月で御社のプロダクトをコスパよく高速化します フロントエンド視点のE2Eチューニング(Lighthouse) CI/CD 高速化 (Linux, GitHub Actions) New プロンプトエンジニアリングでワークフロー自動化 主な環境 VSCode + RooCode (ほぼ常に Orchestrator モード) Claude 3.7 + Gemini 2.5 (約2~3万円/月) TypeScript / Node / Deno / Cloudflare あらすじ 2014: なぜ仮想DOMという概念が俺達の魂を震えさせるのか
君だけのオリジナル async / await を作ろう / TSKaigi 2025
TSKaigi 2025 での発表資料です - スピーカーノート リポジトリ…
VoltAgent - Open Source TypeScript AI Agent Framework
import { openai } from "@ai-sdk/openai"; import { Agent, VoltAgent, createTriggers } from "@voltagent/core"; import { createPinoLogger } from "@voltagent/logger"; import { honoServer } from "@voltagent/server-hono"; import { weatherTool } from "./tools/weather"; const logger = createPinoLogger({ name: "with-slack", level: "info" }); const slackAgent = new Agent({ name: "slack-agent", instructions:
【2025年】爆速でゼロイチ開発するための技術スタック
はじめに 個人開発やゼロイチの立ち上げに最適な技術スタックを書いていく。 なるべく安上がりな構成を目指す。 TypeScriptをベースに よっぽどパフォーマンスにこだわりがなければTypeScriptを採用したい。 1つの言語でフルスタック開発可 脳の言語スイッチング不要 型定義を使い回せる トレンドで将来性がある 小〜中規模開発ならこの恩恵はでかいため、フルスタックTypeScriptフレームワークを採用したい。 Next.js or React Router よっぽどパフォーマンスにこだわりがなければReact Routerを採用したい。 個人的にNext.jsはゼロイチ開発にはオーバースペックだと感じる。 以下のような点からNext.jsの採用は見送りたい。 Server/Clientの境界線がわかりづらい Server Components, Actions, Functions
フロントエンド API コール時のエラーハンドリングを軽く整理（Fetch API・typescript-fetch・TanStack Query） - カミナシ エンジニアブログ
カミナシのソフトウェアエンジニア佐藤です。カミナシレポートの開発に携わっています。 フロントエンドのエラーは「画面リロードやブラウザ再起動で復旧できる（かもしれない）」「クラッシュしてもユーザーの端末に閉じる」などの理由から、バックエンドよりは精緻に扱われない傾向があると個人的には感じています。 その一方、カミナシレポートは、ノンデスクワーカー向けの不安定なネットワーク環境で利用されることも多々あるアプリです。そのため、デジタルツールに不慣れな方のために精緻なフィードバックが必要とされる、リロードに頼ることが難しいケースがある、などの理由でエラーの扱いにも慎重になる必要があります。 本記事では、カミナシレポートのフロントエンド開発をする中で、 バックエンドの API コール時にエラーが発生する条件とその内容（型・クラス） これらエラーをハンドリングする箇所 について、把握しておきたいと感じ
TypeScript/React/Next.jsおすすめ学習資料のご紹介
はじめに 今回は、現代のWEB開発で最も使用されている言語/フレームワークであるTypeScript/React/Next.jsについて学ぶために、私がおすすめしたい学習資料についてご紹介したいと思います。 非常に有用で、初心者から中級者、上級者まで幅広い層に向けた内容が含まれていますので、時間を見つけて是非読んでみてください。 ※TypeScript/React/Next.jsって何？という方のために、簡単に以下にそれぞれご説明いたします。 TypeScript Microsoftが開発した、JavaScriptを拡張したプログラミング言語。JavaScriptに比べ、型安全性の向上によるエラーの早期発見や、型注釈でコードの意図を明確にすることによる可読性/メンテナンス性の向上が期待できる。現代のWEB開発においては、ほとんどの開発者がJavaScriptからTypeScriptへ移行し
4 ステップでモダンな tsconfig.json を作る - mizdra's blog
tsconfig.json を使うと、型チェックを緩く/強くしたり、また出力する JS の形式を変えたりできる。しかしいくつかの事情から、正しく書くのが難しい。 オプションの数が非常に多い その数なんと 133 個 *1 オプションの意味や役割が理解しにくい 公式ドキュメントは丁寧にかかれているが... JavaScript や TypeScript の仕様、型の知識、歴史的経緯などを知らないと理解しづらい 推奨されるオプションが変わっていく 言語やエコシステムの進化/変化によって変わる 最近だと Node.js の TypeScript サポートで変わった 「オプションの細かい意味とかは一旦いいから、モダンで最小限の tsconfig.json がすぐに欲しい！！！」。そうした声に応えて、id:mizdra がオススメする「4 ステップでモダンな tsconfig.json を作る方法」
MastraとNext.jsで製造業の工場トラブル事例検索チャットボットを作ってみた | DevelopersIO
はじめに MastraはAIアプリケーションを構築するためのTypeScriptのフレームワークです。ELv2ライセンスで、マネージドサービスとして他社に提供することはNGですが、業務アプリの構築は可能です。なぜELv2なのかドキュメントもありますので詳細はこちらをご参照ください。 The primary limitation is that you cannot provide Mastra as a hosted or managed service that offers users access to the substantial functionality of the software. (訳) 主な制限は、ソフトウェアの重要な機能にユーザーがアクセスできるホスト型または管理型のサービスとして Mastra を提供できないことです。 またAIを活用したTypeScriptツー
TypeScript で MCP サーバーを実装し、Claude Desktop から利用する
MCP（Model Context Protocol）とはアプリケーションが LLM にコンテキストを提供する方法を標準化するプロトコルです。MCP を使用することで、LLM は外部ツールやサービスからコンテキストを取得するだけでなく、コードの実行やデータの保存など、さまざまなアクションを実行できるようになります。この記事では MCP サーバーを TypeScript で実装する方法を紹介します。 MCP（Model Context Protocol）とはアプリケーションが LLM にコンテキストを提供する方法を標準化するプロトコルです。多くの LLM ではユーザーに適切な回答を提供するために追加のコンテキスト情報を必要とします。例えば、今日の天気の情報をユーザーから求められたとしても LLM が学習したデータにはその情報は含まれていないため、正確な回答ができません。このような状況では L
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TypeScript入門
