Hono × Inertia.js が作る新しい型貫通体験に触れてみた
// サーバー側（Hono） app.get('/posts/:id', (c) => { const post = findPost(c.req.param('id')) return c.render('Posts/Show', { post }) }) // クライアント側（React） export default function Show({ post }: PageProps<'Posts/Show'>) { return <h1>{post.title}</h1> } post の型は Post として完全に推論される。間に API 定義も DTO も tRPC もスキーマ生成もない。サーバーで c.render() の第2引数に渡したオブジェクトが、そのまま React の props として、しかも完全に型付きで届く。 「API なし SPA」を謳う Inertia.j
最高の TypeScript 開発環境を最速で作っていくよ 2025 秋
この記事では、TypeScript の開発環境を最速で整えます。単に動く環境ではなく、最低限必要なツールも一通りそろえていきます。(2025 年秋時点の情報です) この記事で作る開発環境について この記事のゴール bun run コマンドで TypeScript ファイルを実行できる bun repl コマンドで REPL を起動して TypeScript を実行できる bun tsc --noEmit コマンドで（厳しい）型チェックができる TypeScript Language Server でコード補完と型チェックができる bun biome コマンドでフォーマットとリントができる Biome の拡張機能でリントが開発中にも実行される Biome の拡張機能でフォーマットと自動修正が保存時に自動で実行される bun test コマンドでテストコードを実行できる Bun の拡張機能でテ
TypeHero
Connect, collaborate, and grow with a community of TypeScript developers. Elevate your skills through interactive coding challenges, discussions, and knowledge sharing
4 ステップでモダンな tsconfig.json を作る - mizdra's blog
tsconfig.json を使うと、型チェックを緩く/強くしたり、また出力する JS の形式を変えたりできる。しかしいくつかの事情から、正しく書くのが難しい。 オプションの数が非常に多い その数なんと 133 個 *1 オプションの意味や役割が理解しにくい 公式ドキュメントは丁寧にかかれているが... JavaScript や TypeScript の仕様、型の知識、歴史的経緯などを知らないと理解しづらい 推奨されるオプションが変わっていく 言語やエコシステムの進化/変化によって変わる 最近だと Node.js の TypeScript サポートで変わった 「オプションの細かい意味とかは一旦いいから、モダンで最小限の tsconfig.json がすぐに欲しい！！！」。そうした声に応えて、id:mizdra がオススメする「4 ステップでモダンな tsconfig.json を作る方法」
TypeScript 環境構築ガイドラインを書いてLLMに再現させる
TypeScript ツールチェインは多種多様で、毎回目的に沿ってプロジェクトを設定するのが非常に大変です。 なので、再現性のある環境構築手順を作って LLM に丸投げすることにしました。 (この記事の7割はAIに書かせて、自分で30分かけて書き直しました) tl;dr Claude Code に読ませる前提のTypeScriptの環境構築ガイドラインを作った docs/ts-guide/ にドキュメントを配置して、LLM（Claude）にそれを読ませる プロジェクトの要件を伝えて、LLMに適切な設定を追加させる ベースラインとなる基礎部分から始めて、対話的に必要な機能を追加していく How to use すごい雑に実態を説明すると共通セットアップとただのライブラリの使い方のドキュメントです。 # 新しいプロジェクトを作成 mkdir my-app cd my-app # ts-guide
Announcing Oxlint 1.0
TL;DR: The first stable version Oxlint has been released! With a 50~100x performance improvement over ESLint, support for over 500 ESLint rules, and usage in major companies like Shopify, Airbnb, and Mercedes-Benz, you should give it a try. Get started now. Oxlint is a Rust-powered linter for JavaScript and TypeScript is designed to be fast and simple to adopt. Since its first announcement back in
フロントエンド API コール時のエラーハンドリングを軽く整理（Fetch API・typescript-fetch・TanStack Query） - カミナシ エンジニアブログ
カミナシのソフトウェアエンジニア佐藤です。カミナシレポートの開発に携わっています。 フロントエンドのエラーは「画面リロードやブラウザ再起動で復旧できる（かもしれない）」「クラッシュしてもユーザーの端末に閉じる」などの理由から、バックエンドよりは精緻に扱われない傾向があると個人的には感じています。 その一方、カミナシレポートは、ノンデスクワーカー向けの不安定なネットワーク環境で利用されることも多々あるアプリです。そのため、デジタルツールに不慣れな方のために精緻なフィードバックが必要とされる、リロードに頼ることが難しいケースがある、などの理由でエラーの扱いにも慎重になる必要があります。 本記事では、カミナシレポートのフロントエンド開発をする中で、 バックエンドの API コール時にエラーが発生する条件とその内容（型・クラス） これらエラーをハンドリングする箇所 について、把握しておきたいと感じ
Effective TypeScript 読んだ / 郷に入っては郷に従う - Object.create(null)
Effective TypeScript (第2版) を読んだ なんらか他の人に読んでおくと良いよと紹介できる本があると良いなと思って読みました. 2020 年以降に TypeScript を書く上での常識が概ね網羅されていると思うので, そういった前提知識に自信をつけたいならおすすめです. www.oreilly.co.jp ただ「項目18 推論可能な型でコードを乱雑にしない」で, 関数の戻り値の型アノテーションをデフォルトで省略するよう推奨していることについては明確に反対したい. より正確には, コールバックなど再利用を想定しない関数についてはデフォルトで省略してもよいが, 通常関数は再利用を目的として定義されがちなことを考えると, デフォルトで省略するというのはあまり実態に則していないと思う. 実際にこの本の後の章には戻り値の型アノテーションを書いておけばよかったのにという状況がしば
TypeScript/React/Next.jsおすすめ学習資料のご紹介
はじめに 今回は、現代のWEB開発で最も使用されている言語/フレームワークであるTypeScript/React/Next.jsについて学ぶために、私がおすすめしたい学習資料についてご紹介したいと思います。 非常に有用で、初心者から中級者、上級者まで幅広い層に向けた内容が含まれていますので、時間を見つけて是非読んでみてください。 ※TypeScript/React/Next.jsって何？という方のために、簡単に以下にそれぞれご説明いたします。 TypeScript Microsoftが開発した、JavaScriptを拡張したプログラミング言語。JavaScriptに比べ、型安全性の向上によるエラーの早期発見や、型注釈でコードの意図を明確にすることによる可読性/メンテナンス性の向上が期待できる。現代のWEB開発においては、ほとんどの開発者がJavaScriptからTypeScriptへ移行し
「MCP？聞いたことあるけど使ってない…😅」人向けに初歩から少し踏み込んだ内容まで解説
今回は一気に「MCPなにもわからない」から「MCP完全に理解した」に一気にレベルアップすることを目的に書いています。 そのために以下をモリモリに解説していきます。 ModelContextProtocol(MCP)とは？ MCPがあることでできること MCPを実装するライブラリmodelcontextprotocolを使ってチュートリアル 実装のためのネゴシエーションや通信プロトコルの説明も踏まえてのチュートリアルです。 CursorへのMCPサーバーの登録方法 MCPがどのように動作してツールが使われるのか？ FunctionCallingとの違い MCPって単語聞きすげてわからないままに嫌になっている人はこれを読むことで解放されてください。 ModelContextProtocol(MCP)とは？ まずはイメージを見てもらうとわかりやすいと思います。 (https://modelcon
TypeScript/JavaScript Array完全攻略2024 | フューチャー技術ブログ
TypeScriptアドベントカレンダーの12/5のエントリーです。昨日は@nanasi-1さんの【TypeScript】ジェネレーターによる遅延評価でフィボナッチ数列を生成するでした。 イマドキのJavaScriptの書き方2018というのを以前書いたのだけど、配列周りはかなり変わっているな、というのを思ったので、そこの部分だけアップデートするつもりで書いてみました。 実環境で使えるECMAScriptバージョン今時のブラウザは常に最新に更新されるはずなのでECMAScript 2024の機能もフルに使えるはずですが、おそらくNode.jsのLTSが一番古いJavaScriptエンジンということになるのかな、と思います。本記事執筆時点でサポート中のバージョンは以下の4つです。軽くメソッドを調べたりした感じ、こんな感じかと。202x年の11月ぐらいになると、ES202xがLTSバージョンで
TypeScript 製の AI エージェントフレームワーク Mastra
import { Mastra } from '@mastra/core/mastra'; import { createLogger } from '@mastra/core/logger'; import { weatherAgent } from './agents'; export const mastra = new Mastra({ agents: { weatherAgent }, logger: createLogger({ name: 'Mastra', level: 'info', }), }); エージェントを定義する src/mastra/agents/index.ts では Agent クラスを使用して天気情報を提供するエージェントを定義しています。 import { anthropic } from '@ai-sdk/anthropic'; import { A
MCPクライアントアプリを作ってコマンドラインでエージェントを走らせよう - laiso
なぜ MCP クライアント側開発の解説が必要か Model Context Protocol（MCP） は、さまざまな AI アプリケーションや LLM（Large Language Model）を外部ツール・リソース・ワークフローに接続するためのプロトコルです。これはサーバーとクライアントの 2 つの側面があるのですが、現在 Web 検索などで見つかる情報は主に「MCPサーバーの呼び出し方」と「（呼び出される）MCPサーバーの作り方」というテーマが中心になっています。しかし実際に MCP サーバーを呼び出せるのは、Claude アプリや Zed などのエディタ*1、VS Code 拡張の Cline*2 といった、すでにクライアント（ホストアプリケーション）を実装している限られたアプリケーションに限られます。 そのため、サーバーを実装するだけでは、現状対応しているアプリ(多くはCalau
URLシェアを支える技術 lz-string
WebアプリでURLシェアを実装する際に、URLにすべての情報を持たせてしまいたい場合があります。そのとき、情報をそのままクエリ文字列に渡してしまうとURLの文字数制限に引っかかってしまうかもしれません(厳密にはURLに上限はないようですが、現実はいつもブラウザ実装依存)。 そんなときURLセーフな文字列形式で圧縮してくれるライブラリがあります。lz-sringです。 変換の例 ライブラリで compressToEncodedURIComponent というAPIが提供されているのでこれを使用します。標準のencodeURIComponentでURLセーフな文字列に変換した場合とサイズ比較をしてみましょう。 import lzstring from "lz-string"; const rawData = "Lorem ipsum dolor sit amet, consectetur a
PrismaのTypedSQLがなぜアツイのか
Prisma界隈で話題沸騰中（自分調べ）のTypedSQLだが、自分の中ではかなりアツいと思っているので、その理由を語ろう。なおTypedSQLの機能とか仕組みについては記述しないのでドキュメントや以下の記事を参照するとよい。 Prismaの難しさ 複雑なクエリを組み立てるのが特に難しい。複雑といっても何10行もあるようなクエリとかではなく、joinとか集計関数がいくつかあるくらいで十分複雑になる。たとえば特定のユーザーに紐づく記事をコメントの数を含めて取得したいとする。クエリは雰囲気こんな感じ。SQLとしては全然難しくない。 SELECT posts.id, count(comments.id) AS cnt FROM posts INNER JOIN users ON posts.author_id = users.id LEFT JOIN comments ON posts.id =
TypeScriptで知ってコードの安全性が上がったtips集
TypeScriptを用いた開発では、その型システムを活かしてランタイムエラーを事前に防いだり、実装漏れを防いだりとコードの安全性の向上を図ることができます。 本記事では、個人的に知ったおかげでコードの安全性が増した！と感じたtipsをまとめました。 ※ なお、linterを用いたコードの安全性向上も非常に有効ですが、この記事では主にTypeScriptの型システムに焦点を当てています。 tips集 配列周りのtips まずは配列を扱う際に役立つ、tipsを紹介します。 配列からUnion型を作成する ↓のように(typeof array)[number]で配列の全要素を持つUnion型を作成できます。 const fruits = ["apple", "banana", "lemon"] as const; type Fruit = (typeof fruits)[number]; //
Introducing JSR - the JavaScript Registry | Deno
↑↓Up or down tonavigate↵Enter toselectESCEscape toclose
Learn TypeScript - Free Interactive TypeScript Tutorial
Welcome to Learn TypeScript - the Interactive TypeScript Tutorial Welcome to learn-ts.org - the Interactive TypeScript tutorial. This website is proudly supported by Boot.dev's Learn TypeScript course. If you'd like to learn TypeScript from start to finish, become a member and use code LEARNXORG for 25% off your first year! Whether you are new to TypeScript or aiming to deepen your knowledge, this
【NextAuth.js 入門】認証機能から認証情報によるページの表示制御を学ぶ（Next.js & Typescript）
【NextAuth.js 入門】認証機能から認証情報によるページの表示制御を学ぶ（Next.js & Typescript） アプリケーションを開発するにあたって、避けて通れないのが認証機能の実装です。 本書籍では、NextAuth.js を使って Next.js で作成したアプリケーションに認証機能を実装していきます。さらに、認証情報を使って、表示するページの制御も行います。 認証情報によるページの表示制御にはいくつか方法がありますが、本書籍では NextPage 型を拡張した CustomNextPage 型を作成することによって、ページの表示制御を実現します。 一緒に NextAuth.js による認証機能を学んでいきましょう。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JSR の話
