TypeScript の型のみで世界一型の厳しいプログラミング
はじめに TypeScript の型は世界一自由度の高い設計になっていると思います。 その根拠として、型を関数型のように書けるというのが大きいと思います。 type Trim<S extends string> = S extends ` ${infer R}` | `${infer R} ` ? Trim<R> : S; 例えば、これは文字列の両端から空白を取り除く、str.trim() 相当のジェネリクスを含んだ型です。 (ジェネリクスは、型で用いられる引数のような存在だと思って貰えれば大丈夫です。) 実際に見てみましょう。 TypeScript Playground (この記事では、TypeScript v5.8 を使用します。) しっかり、str.trim() 相当の処理が型のみで推論できていることが分かります。 こんな事をここまで簡単に出来る言語は、TypeScript ぐらいで
【図解解説】MCPを実装理解！Next.jsでAIアシスタントを開発するチュートリアル【Hono/TypeScript/Prisma】 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに こんにちは、Watanabe Jin(@Sicut_study) です。 私はよくQiitaやZennなど技術記事サイトを見ているのですが、最近はランキングがMCPという技術の記事ばかりで埋まっていることに気づきました。 「MCP？こんなに話題なら勉強しておかないといけない」 解説記事を読んで以下の図をたくさん目にしました。 「なんとなくわかるけど、なんとなくしかわからない！！」 なんとなくイメージはわかるのですが、MCPが何故いいいのか、どのように使えるのかが説明できるレベルにはなれませんでした。 やはり文章の説明だけでなく
TypeScript の codemod ツール開発時の失敗談と得た知見メモ
更新履歴 (2025-05-15) ts-morph の API で躓いたポイントの具体例を追記 (2025-05-13) 公開 Codemod とは Codemod（コードモッド）とは、"Code Modification"（コード修正）の略語で、プログラムを使ってコードベース全体にわたる変更やリファクタリングを自動的に行うプロセスや、そのためのツールを指します。 手作業で一つ一つコードを修正する代わりに、スクリプト（codemodスクリプトやトランスフォームと呼ばれる）を実行することで、大規模なコードベースに対しても一貫性のある変更を効率的かつ正確に適用することを目的としています。 主な目的と用途: APIの変更への追従: ライブラリやフレームワークがバージョンアップし、古いAPIが非推奨になったり、使い方が変わったりした場合に、コードベース全体の該当箇所を新しいAPIの呼び出し方に自
うさぎでもわかる！TypeScriptの型レベルプログラミングと高度な設計手法
うさぎでもわかる！TypeScriptの型レベルプログラミングと高度な設計手法 👇️ポッドキャストでも聴けます こんにちは、🐰です！今日はTypeScriptを使いこなすための高度なテクニックについてお話しします。TypeScriptは単なる「JavaScriptに型をつけただけの言語」ではなく、型システムを活用した表現力豊かなプログラミングが可能なんです！ 私自身、TypeScriptでの開発に挑戦し、「こんなこともできるんだ！」と驚くことがたくさんありました。この記事では、型レベルプログラミングや高度な設計パターン、パフォーマンス最適化など、実践的で役立つ知識を共有します。 TypeScriptの型システムを極め、より安全で保守性の高いコードを書く冒険に一緒に出かけましょう！🥕 TypeScriptの型システムを極める TypeScriptの型システムとは何が凄いのか TypeS
同じ名前で分割代入する場合はショートハンドで強制するESLintルールをTypeScriptで作った
2025/05/12 有識者から no-useless-rename というESLint本体に含まれているルールを紹介していただき、これでこと足りそうでした。 この記事のカスタムルールの内容自体はほぼ意味のないものになってしまいましたが、カスタムルールを作っていく過程においては参考になるところもあると思うので引き続き残しておきたいと思います。 始めに 弊社ではESLintルールのobject-shorthandを設定しており、ショートハンドで書けるものはショートハンドで強制されるようにしています。これによってコードがスッキリしたものになるのですが、一部ショートハンドにならないケースがありました。
MDN推奨JavaScriptコーディングガイド徹底解説｜React・TypeScript対応の最新ベストプラクティス | しんすーブログ
MDN推奨JavaScriptコーディングガイド徹底解説｜React・TypeScript対応の最新ベストプラクティス JavaScript は自由度が高く、個々の書き方が混在しやすい言語です。チーム開発ではスタイルの不一致がバグの温床になり、レビュー工数も膨らみます。 Mozilla が公開する JavaScript Sample Code Guide は、同社が社内のドキュメントやチュートリアル用に用いているコーディング規約を外部公開したものです。公式の絶対基準ではありませんが、実践的かつ網羅的に整理されているため、社内ガイドのたたき台として価値があります。 ここではこのガイドを軸に、最新ブラウザ環境・React 18・TypeScript 5 で役立つベストプラクティスを具体例付きで解説します。 配列初期化のベストプラクティス ― Array.from と new Array の使い
TypeScriptとは？JavaScriptとの違いや導入のメリット・課題を解説｜Udemy メディア
システム開発 2025/05/02 TypeScriptとは？JavaScriptとの違いや導入のメリット・課題を解説 TypeScriptの利用を検討しているものの、 ・使い方が分からない…。 ・JavaScriptとの違いが知りたい…。 という方も多いのではないでしょうか。そこでこの記事では、 ・TypeScriptのメリット・デメリットやJavaScriptとの関係性 ・TypeScriptのインストールからコンパイルまでの方法 について解説します。 TypeScriptの利用経験がない方でも、この記事を読めば、TypeScriptの特徴や基本的な使い方がわかります。 また、Udemyの講座を併用すれば、TypeScriptでアプリ開発をするための実践的な内容が学べます。 公開日：2020/03/16 TypeScriptとは？ TypeScript（タイプスクリプト）は、JavaS
Effective TypeScript 読んだ / 郷に入っては郷に従う - Object.create(null)
Effective TypeScript (第2版) を読んだ なんらか他の人に読んでおくと良いよと紹介できる本があると良いなと思って読みました. 2020 年以降に TypeScript を書く上での常識が概ね網羅されていると思うので, そういった前提知識に自信をつけたいならおすすめです. www.oreilly.co.jp ただ「項目18 推論可能な型でコードを乱雑にしない」で, 関数の戻り値の型アノテーションをデフォルトで省略するよう推奨していることについては明確に反対したい. より正確には, コールバックなど再利用を想定しない関数についてはデフォルトで省略してもよいが, 通常関数は再利用を目的として定義されがちなことを考えると, デフォルトで省略するというのはあまり実態に則していないと思う. 実際にこの本の後の章には戻り値の型アノテーションを書いておけばよかったのにという状況がしば
【保存版】 2 万文字で語る Python の with 文で始めるリソース管理 ── C++/Go/TypeScript の技法を横断
本記事では、Python の with 文を起点に、多言語の with に相当する概念を横断的に比較し、 リソース管理という "地味だけど重要" なテーマ を一気に理解できるように整理しました。 「〇〇をしたら必ず △△ する」 をコードで保証する ── リソース管理とは？ A. 「そのタスク終わったら Slack で私に連絡してくださいね！」 B. 「はい、わかりました！」 (数日後...) A. 「あれ、Slack で連絡来てないな。」 B. 「違う仕事していたら、Slack で連絡するの忘れてました！」 そんな経験、ありませんか？ 「〇〇をしたら絶対にこれをやる」ということを強制する。 それを実現するのが、Python の with 文です。 〇〇をしたら絶対にこれをやるというのは、 例えばファイルを open したら必ず close をするなどのリソースに対して行うことは特に多く、
TypeScriptのexhaustiveness checkをsatisfiesで簡単に書く
みなさん、TypeScript書いてますか？ ふと気づくと、もうTypeScript 1.0から数えても11年が経過しているんですね。筆者も2015年くらいから本格的に触り始めた組なので、そろそろTypeScript 10年選手を名乗ってもよさそうです。 さて、これだけ長いことTypeScriptを触っていると、昔の文法を前提とした手癖というものも蓄積されていくものです。同僚と雑談していたところ、手癖を改めるべき便利なイディオムを教えてもらったので、備忘録として残しておきます。 Before: 手癖で書いていたexhaustiveness check TypeScriptには、exhaustiveness checkというテクニックがあります。これは、TypeScriptの型システムを利用して、switch文やif文でユニオン型やEnum型の全てのケースを網羅しているかをチェックする手法で
EM候補/フロントエンド（クラウドサイン）
EM候補/フロントエンド（クラウドサイン） 弁護士ドットコム株式会社 @bengo4 TypeScript I want to hear a detailed クラウドサインのエンジニア組織拡大を牽引 クラウドサイン®︎について クラウドサイン®︎は、契約の締結から管理、AIレビューと、一貫してデジタル上で完結できる契約マネジメントプラットフォームです。電子署名法に準拠した電子署名とタイムスタンプによって円滑かつ安全な契約締結ができ、2023年には汎用型電子契約サービスで日本初となる『マイナンバーカード署名』機能もスタート。また、AI契約書管理機能や、AIレビュー支援サービス『クラウドサイン レビュー』などAI技術を積極的に採用することで、契約業務全体の時間短縮を実現しています。また、電子契約市場においては企業や自治体などで幅広く導入されている、No.1※のサービスです。 ※株式会社富士キ
ESLint コアルールの TypeScript 対応について
ESLint コアルールの TypeScript 対応について ESLint v9.23.0 で ESLint のコアルールの TypeScript 対応が開始しました。 その後の ESLint のアップデートでもコアルールの TS 対応が進んでいます。ESLint コアの責務を増やすような機能追加は少し意外だと感じたので、その背景について調べてみました。 背景: 従来のコアルールの拡張方法の課題 ESLint のコアルールは JavaScript を想定して書かれたものであるが、TypeScript に対してもほぼ期待通り動作するルールが多い。TypeScript は JS のほぼ上位互換な言語であるため、TypeScript 用のパーサー (@typescript-eslint/parser) が吐き出す AST もほぼ上位互換であり、パーサーさえ TS 用のものを使えば多くの ESL
【東証グロース上場｜React,React Native】新規プロダクトのアプリ開発をメインに、既存プロダクトのアプリやフロントエンド開発にも携われるリードエン
【東証グロース上場｜React,React Native】新規プロダクトのアプリ開発をメインに、既存プロダクトのアプリやフロントエンド開発にも携われるリードエン 株式会社ハウテレビジョン @howtelevision TypeScript React I want to hear a detailed 募集背景 開発生産性や保守性の観点から進めていた大規模な技術的負債の返済に目処が立ち、2024年12月からCTOにめもりー氏（@m3m0r7）が就任し、開発組織も新体制になった現在、本格的な新規開発を加速していきたいと考えております。 これまで「外資就活ドットコム」「Liiga」「mond」を主軸に事業成長を続けてきたハウテレビジョンですが、新規プロダクトの企画・開発に着手し、さらなる能力開花の促進を実現していきたい背景があり、その新規プロダクト内でモバイルアプリ開発(React Nativ
React + Vite + TypeScript で診断アプリを作ってみた記録（Step2） - Qiita
Step2：UI仮構築とJSONデータ連携 今回は、診断アプリの Step2 として以下の実装を行いました。 ✅ 今回の目的 ハードコーディングではなく、外部JSONファイルから質問データを読み込む仕組みを作る JSXにベタ書きしていたUIを、動的に表示される構成へ変換 質問と選択肢の管理が柔軟になるように構造化する ✅ 追加・変更した内容 1. UIコンポーネントの作成（仮質問画面） return ( <div style={{ padding: '2rem' }}> <h2>質問：{question.text}</h2> <div style={{ marginTop: '1rem' }}> {question.options.map((option, index) => ( <OptionButton key={index} label={option.label} /> ))} <
非同期処理のエラーがErrorBoundaryで捕捉できなかった話
この記事は「Medley (メドレー) Advent Calendar 2024」の16日目の記事となります。 はじめに こんにちは、メドレーの村上です。 今回はTanStack Query（旧React Query）を使用した非同期処理のエラーハンドリングで遭遇した問題とその解決方法について共有させて頂きます。 使用しているライブラリとバージョンはこちらです。 { "react": "^19.0.0", "@tanstack/react-query": "^5.62.7", "@sentry/react": "^8.43.0" } export const App: FC = () => { const { mutateAsync } = useMutation({ mutationFn: async () => { // APIリクエストが失敗した場合にエラーをスロー throw ne
型システムのしくみ ― TypeScriptで実装しながら学ぶ型とプログラミング言語
紙書籍をお届けします（PDFがついてきます） PDFのみ必要な場合は、こちらからPDF単体を購入できます 通常はご注文から2～3営業日で発送します。 年末年始や大型連休など、1週間から10日程度、配送のお休みをいただく場合があります。詳しくはお知らせをご覧ください。 型システムがようやくわかった！ 遠藤侑介 著 184ページ A5判/1色刷 ISBN：978-4-908686-20-7 2025年4月15日 第1版第1刷 現代の開発環境では、エディタ上でコードを書いている最中から、実行もせずにエラーが判明することがあります。コードの補完でも、文脈に適した候補が魔法のように提示されてきます。こうした機能で中心的な役割を果たすのが「型システム」です。 では、なぜ型システムはプログラムのエラーを早期に発見したり、適切な補完候補を絞り出せたりするのでしょうか？ 背景となる数学の理論を教科書で学ぶ以
TypeScript以外が嫌いです
TypeScript以外が嫌いです こんにちは、TypeScript原理主義者のTakoです。今日は私がなぜTypeScript以外の言語が心の底から嫌いなのかをお話しします。 はじめに みなさん、世の中にはプログラミング言語がたくさんありますよね。Java、Python、JavaScript、Ruby、Go...。でも、私にとってそれらは全て「TypeScriptではない言語」というカテゴリに分類されます。つまり、使う価値のない言語です。 型がないなんて、人生がないようなもの JavaScript？あんなの型がなくて何が楽しいんですか？undefined is not a functionとかcannot read property of nullとかいうエラーと戯れるのが好きですか？私は嫌いです。 // TypeScriptの美しさ interface User { id: numbe
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptやTypeScriptで出てくる記述の意味や名称など - Qiita
【React + TypeScript】メニューボタンの押下位置に応じたメニューの表示 - Qiita
Next.js個人備忘録④：Next.jsでTypeScriptとJavaScript、どちらを使うか迷ったため、記事にまとめてみた - Qiita