はじめにlink 最近受けるNode.js + TypeScript環境の相談の中で、CommonJSやECMAScript Modulesのあたりで落とし穴にはまっている人が多いという事に気づいた。 Node.jsは歴史的にCommonJSとECMAScript Modules（以後ESMと表記）がどうしても入り乱れる環境にあり、これにTypeScriptのモジュールが加わると組み合わせでさらに複雑度が増すのが現状である。 説明する際に口頭より整理した文章が欲しいと思ったので記事にする。 以下のリポジトリで検証コードを管理している。 https://github.com/koh110/module_test Node.jsモジュールチェックシートlink まず最初にNode.jsにおけるCommonJSとESMの挙動について整理する。 いきなり書かれても把握できないかもしれないが、一旦こ

2025/01/04 Git Hooks ツールの Lefthook を追記 2025/01/05 フロントエンドの状態管理に XState を追記 各リンクテキストを対象名がわかりやすい形式に変更 概要 以前のプロジェクトで使っていたり、進行中に差し替えまでは出来ないけど次使うならこれを使おうと思っていたライブラリやツールなどが、いざ新しくプロジェクトを作ろうと初期構築を始めたら色々と失念している事ってよくありませんか？ 最近実際それがあり、個別のページにわかれて技術メモはとってあったりするのですが探しながらは手間なのとブクマしただけのものもあるので、インデックス的に手軽に気になった技術をメモっておく見ながら構築したり技術選定の前段階に使うようなノートを作ったので誰かのお役に立つかもと公開してみます。 気軽に雑にメモるのを前提に作ったものをそのまま公開しているので文体等は統一されてません

TypeScriptの判別可能なユニオン型は、ユニオンに属する各オブジェクトの型を区別するための「しるし」がついた特別なユニオン型です。オブジェクトの型からなるユニオン型を絞り込む際に、分岐ロジックが複雑になる場合は、判別可能なユニオン型を使うとコードの可読性と保守性がよくなります。 通常のユニオン型は絞り込みが複雑になる​TypeScriptのユニオン型は自由度が高く、好きな型を組み合わせられます。次のUploadStatusはファイルアップロードの状況を表現したユニオン型です。アップロード中InProgress、アップロード成功Success、アップロード失敗Failureの組み合わせです。

TypeScriptは強力な型システムが魅力です。 しかし、複雑な型定義は理解が難しいです。特にライブラリの型定義などはジェネリクスや交差型などがネストしていることも多く、すぐに把握するのが難しい場合があります。 Visual Studio Code（以下VSCode）でTypeScriptの開発をしている際、型にカーソルをホバーすると型情報が表示されます。 しかし、深いネストや複雑な型の場合、展開される情報が不十分で、定義を追う必要があります。 そんな時に役立つVSCodeの拡張機能がないかな〜と探していたら「Prettify TypeScript」というぴったりの拡張機能を発見しました！この拡張機能を使うと、ホバーした時に型が展開された状態で表示されるため、型情報を把握しやすくなります。 Prettify TypeScriptの概要 Prettify TypeScriptを使用すること

Yusuke Wada 2024-10-22 さくらじまハウス 2024

この本では、初心者・入門者の方に向けて、Next.jsの知識や使い方を体系的にまとめました。 【概要】 ・内容：HTML・CSS・JavaScriptとは？、Next.jsとは？、アプリを作る上での環境を整えよう！、Next.jsのプロジェクトを作ろう！、チャットアプリのパーツを作ろう！、オウム返しAPIを作ろう！、MUIを使ってリッチにしよう！、Vercelにデプロイしよう！、【余談】Joy.uiによるUIの変更 ・所要時間：約3時間 ・必須条件：HTMLの知識、CSSの知識、JavaScriptの知識 ・推奨OS：macOS / windows(WSL2) ・レベル：★★☆☆☆

はじめに 「Flat Config が何かはわかったからサンプルをくれ！」という方向けの記事です。 筆者が普段使用している eslint.config.js をご紹介します。 Flat Config については良記事がたくさんあるため ↓ などを参照してください。 今回ご紹介する設定は、React × TypeScript を使用し、フォーマットは Prettier に任せる前提になっています。 しかし、Vue やサーバー Node.js でも使いまわせる箇所は多いと思います。 eslint.config.js まずは結論から。 // @ts-check import { fixupConfigRules } from '@eslint/compat'; import { FlatCompat } from '@eslint/eslintrc'; import eslint from '@

このYouTubeライブはフロントエンドの最適化を専門にするmizchiさんがCloudflare Meet-up Tokyoで行った同タイトルのプレゼンを、RustやRDBの実装に詳しいkoba789さんを話し相手に語っていくというものだ。背景としては2人ともチーム開発の現場でのRailsが活発に利用されていた時期にウェブ開発を経験し、現在はNode.jsのサーバーサイドも実践している。 ライブは3時間半という長時間におよび、スライド外の周辺情報や持論や余談など多岐に渡るので、すでにこのプレゼンに触れた人でもさらに深掘りできるようなコンテンツになっている。 全体を大まかに1時間ごとの3パートに区切って視聴するとわかりやすい。前半はRailsからNext.jsに辿り着くまでのウェブ開発の変遷。ORMの話は主に後半戦で。最後の1時間はアフタートークになっている。 内容としてはRailsアプリ

TypeScriptではtype alias syntax（型エイリアス構文）とinterface declaration（インターフェース宣言）を使って型を定義できます。 おおよそ両者同じことができるので、どちらを使うか迷います。 両者の使い分けに関する記事は沢山あります。 これらの記事を読んで基本的にはtypeを使えば良いと思っていました。 ですが最近以下のことがあり、typeとinterfaceの使い分けがわからなくなってしまいました。 typeよりもinterfaceの方がコンパイルのパフォーマンスが良いという話を耳にした。 interfaceしか使えない特定の機能を知った。 そこでtypeとinterfaceの違いを学んで、どう使い分ければよいかを整理しました。 type, interfaceそれぞれのメリット typeのメリット interfaceで表現できないことが表現できる

オープンデベロッパーズカンファレンス(ODC)2024 での発表資料

2024-08-06 TSKaigi サブイベント #1 フロントエンド

はじめに フロントエンドもバックエンドもTypescriptで書きたい！ということで、T3 Stack（T3スタック）について調べてみました。 T3 Stackを利用したプロジェクトを作成するためのCLIツールcreate-t3-appが用意されており、簡単に雛形プロジェクトが作れるため、実際に使ってみました。 この記事は以下の内容をメインに紹介します。 create-t3-appの環境構築手順 雛形プロジェクトの解説（特にtRPCを用いたAPIの呼び出し方法について） T3 Stackとは T3 Stackとはsimplicity（簡潔さ）、modularity（モジュール性）、full-stack type safety（フルスタックの型安全）を追求した思想に焦点を当てています。 そしてそれらを実現するために以下6つの技術スタックが採用されています。 ✅ Next.js ✅ tRPC

初めに Vue.js の学習をしているとよく「Vite」という単語を目にすると思います。 一体全体あれはなんなのでしょうか？？ なんだかよく分からないコマンドを打つと、いつの間にかプロジェクトが作成されていたり、 ファイルを編集するだけでブラウザで動くようになっていたりします。 そもそも読み方も良くわかりません 😵‍💫 (ヴィテ...？ ヴァイト...？) この記事では、Vite についての基本的な情報をまとめてみます。 発音？ 発音の仕方は「ヴィート」です。こちらは公式ドキュメントにも書かれています。 Vite（フランス語で「素早い」という意味の単語で /vit/ ヴィートのように発音）は、 しかし、実はこれにはやや表記揺れがあって、「ヴィット」と表記されているところもあります。 例えば、話題になった Kawaii ロゴではそのように表記されています。 まぁこれらはカタカナ表記の限界

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

去年末ぐらいから Deno を使う割合がグッと増えてきた。最近のJS関連は7割ぐらい deno 環境の VSCode でコードを書いている気がする。 今回はいくつかの実例を示しながら、実際に Deno 使えるじゃんというイメージを持ってもらうためのユースケースを紹介していく。 というか、 deno が普及してくれないと、自分が作ったツールの紹介を全部 deno のインストールから書かないといけなくなる。みんなインストールしといて。 最初に: なぜ Deno を使いたいか 一番の問題点、Node は新しいプロジェクトを一式整えるための手間が非常に重い。 とくに ts で書いたものを他の環境に渡すための方法が未だにしんどい。ある環境で動いたコードをそのままコピーしても、プロジェクト設定の非互換を踏む可能性が非常に高い。 deno にそういう側面がないとは言わないが、非常に少ない。とくに TS

サバイバルTypeScriptは有志で執筆を進めているTypeScriptのOSSドキュメントです。 今回、サバイバルTypeScriptのドキュメントをベースにTypeScriptに関する質問に答えてくれるGPTsを作成・公開しました✨ この記事ではGPTs公開の背景や作成手順、現状の課題などをまとめています。 GPTs公開の背景 LLMによるドキュメント検索は近い将来（既に？）一般的になると思い、サバイバルTypeScriptでも実験的にチャットボットでの情報アクセスを作成・公開しました。 ドキュメントの情報アクセスの課題 ドキュメントが多くなると、目次やサイトマップ、サイト内検索だけでは必要な情報にアクセスするのが困難になる。 チャットボットのメリット 雑な質問でも意図を汲んで、知りたい情報にアクセスしやすい 内容を要約して説明してくれるので、手軽に情報にアクセスできる 回答の信頼性

TypeScript を学習中の方に勧められる練習問題集として手頃なものがないなと思い、作ってみました。 TS の問題集としてはtype-challenges がよく話題に上がりますが、実用上あそこまでの型パズルを使うことはあまりないため、最初に取り組むにはハードルが高いです（もちろん知っていたら便利ではありますが、初学者向けではない）。 想定読者 JavaScript を書くことには慣れている TypeScript はこれから・まだ慣れていない TypeScript の基本的な型についてはすでに知っている はじめに JavaScript の機能に関する問題は扱いません。TypeScript の型システムに関する問題のみ扱います。 そもそも TypeScript についてよくわかっていない場合、サバイバル TypeScriptなどで学習から始めてみてください。 「型がつけられると何が嬉しい

JavaScriptランタイムのBunは、新機能としてシェルスクリプトをJavaScriptもしくはTypeScriptで記述し、特定のOSに依存せずに実行できる「Bun Shell」を発表しました。 シェルスクリプトは特定のシェルに依存するもの LinuxやmacOS、WindowsなどのOSは一般に、「シェル」（Shell）と呼ばれる機能を備えています。 シェルはコマンドラインインターフェイスなどのユーザーとの対話機能を備えており、例えばLinuxのコマンドラインで「ls」コマンドを打ち込むとファイルの一覧が返ってくるという動作はシェルが提供しています。 そしてシェルでは一般に、こうしたコマンドを複数つなげた一連の動作をスクリプトとして定義し実行できる「シェルスクリプト」が利用可能です。例えば、次のシェルスクリプトは、「ls」コマンドによるファイルの一覧をファイル「list.txt」に

TypeScriptとドメイン駆動設計（DDD）を組み合わせ、APIを構築するハンズオンガイドです。この本では、DDDとは何かという基礎的なところからソフトウェア開発における戦略的設計、戦術的設計まで、包括的な知識を提供します。 戦略的設計では、ビジネスの要求に合わせたドメインモデルの設計をイベントストーミングを用いて行います。その後、戦術的設計では、具体的なコードの実装に関連するDDDの原則と実践を学びます。 TypeScriptを使ってコードを書きながら、DDDの概念を実際のプロジェクトに適用するヒントを紹介します。

この記事は、弁護士ドットコム株式会社の Advent Calendar 2023 の 22 日目の記事です。 前日は @et_tei さんの「FireHOL で公開されているブラックリストからの接続 Akamai でブロックする」でした。 こんにちは。税理士ドットコム事業部の @komtaki です。 数年間 TypeScript を業務で使っていたのですが、型パズルの Type Challenges をやってようやく TypeScript の本質を理解していないことに気づきました。 この記事では Type Challenges を通して、私のような型パズルが難しいと感じる人のために型パズルを理解するための言語機能と使い方を 8 つのポイントでまとめます。 この 8 つのポイントを理解すれば、いろんな型パズルが理解できるようになるはずです。 Type Challenges とは TypeS