※本記事で言及しているReflexのdiscord内に日本語チャンネルをつくってもらいました。もし、興味をもった人がいたら参加してみてください。 １．PythonだけでWebアプリをつくるライブラリが増えている 最近（2024.05）、Python界隈ではPythonだけでWebアプリが作れるライブラリが増えています。詳しくは他の記事を参照してもらえればと思います。 以下の記事がとても参考になりました。ありがとうございます。 ２．ライブラリの分類 こうしたライブラリも大きくわけて２つの種類があるように思います。 ①データ解析の結果を表示するダッシュボードライブラリ ②汎用的なWebアプリをつくるローコードライブラリ ①ダッシュボード系ライブラリ たとえば、上記の記事にも出てきますし、ネットでもかなり情報の多い、StreamlitやDashは項番1のダッシュボードライブラリに該当すると思いま
切り替える理由 自社の主力製品で利用している技術(WebRTC / WebTransport)がブラウザベースのため TypeScript を利用する Go を採用したのは sqlc が使いたかったという理由 sqlc-gen-typescript が出てきたのでもう Go を使う理由がなくなった 自社サービスチーム全員が Go にまったく興味が無い sqlc 自体は便利 そもそも自社に Go への興味がある人がいない 自社サービスの規模ではボトルネックになるのはデータベースであって言語ではない もしアプリでスケールが必要なときは Rust や Erlang/OTP に切り替えれば良い コネクションプールは PgBouncer を利用すればいい TypeScript からは 1 コネクション 1 接続で問題無い どうせフロントエンドでは TypeScript を書く 自社では React
巷の「ReactとNext.jsの比較」はここがおかしい、というか比較すること自体が微妙 - honey32
(WIP まとまったら Qiita とかに上げるかも) TLDR; 「React と Next.js を比較」という記事で、 Next.js と比較できるのは「フレームワークなしで React を使うという選択肢」であって、「React そのもの」ではない。 ✅️ React を使うのに 「フレームワークあり」 vs 「フレームワークなし」 ❌️「React」 vs 「Next.js」 それはそうと、「create-react-app の機能・特徴」のことを、「React の機能・特徴」であるかのように書いてしまっている記事が多い create-react-app 自体が擬似的なフレームワーク（といえそう） そもそも、create-react-app は今は更新されてないので create-vite-app を使うべき フレームワークあり or フレームワークなし 【フレームワークあり】
はじめに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の挙動について整理する。 いきなり書かれても把握できないかもしれないが、一旦こ
Deno first でやっていく
去年末ぐらいから Deno を使う割合がグッと増えてきた。最近のJS関連は7割ぐらい deno 環境の VSCode でコードを書いている気がする。 今回はいくつかの実例を示しながら、実際に Deno 使えるじゃんというイメージを持ってもらうためのユースケースを紹介していく。 というか、 deno が普及してくれないと、自分が作ったツールの紹介を全部 deno のインストールから書かないといけなくなる。みんなインストールしといて。 最初に: なぜ Deno を使いたいか 一番の問題点、Node は新しいプロジェクトを一式整えるための手間が非常に重い。 とくに ts で書いたものを他の環境に渡すための方法が未だにしんどい。ある環境で動いたコードをそのままコピーしても、プロジェクト設定の非互換を踏む可能性が非常に高い。 deno にそういう側面がないとは言わないが、非常に少ない。とくに TS
TypeScript の型システムを活用して、本番のアプリケーションにおける実用的な問題を解決することを目指しています。Effect-TS は、以下のような特徴を備えています。 並行性（concurrency）：Fiber ベースの並行モデルにより、高いスケーラビリティと低レイテンシを実現 コンポーザビリティ（composability）：小さく再利用可能なパーツを組み合わせることで、メンテナンス性、可読性、柔軟性の高いソフトウェアを構築する リソースの安全な管理（resource-safety）：処理が失敗したとしても、安全にリソースを開放する 型安全性（type-safety）：TypeScript の型システムを活用した型推論と型安全性に焦点を当てている エラー処理（error handling）：構造化された信頼性の高い方法でエラーを処理する 非同期性（asynchronicity
Next.js 型安全なルーティングを使う
Next.js 型安全なルーティングを使う 2024.04.28 Next.js では実験的な機能として、型安全なルーティングを利用できます。この機能を使うことでリンク先のパス名を静的に検査できるため、typo などのエラーを事前に防ぐことができます。 この記事における「型安全」とは、静的な型検査によりランタイムで起こり得るエラーを事前に検知することを指します。 Next.js では Next.js 13.2 より実験的な機能として、型安全なルーティングを利用できます。この機能を使うことでリンク先のパス名を静的に検査できるため、typo などのエラーを事前に防ぐことができます。 なお、型安全なルーティングを利用するためには App Router と TypeScript を使用している必要があります。 型安全なルーティングの利用方法 型安全なルーティングを有効にするためには、experim
こんにちは。ナレッジワークの torii です。 最近、プロジェクトで使用している TypeScript の型検査にかかる時間を 3 割ほど短縮することに成功しました。 参考までにどのようにボトルネックを調査して改善に繋げたのかを書いてみます！ きっかけ 改善のきっかけは、たまたまネットを徘徊していて見つけた Zenn 記事でした。 （素晴らしい記事をありがとうございます！） これを読んで「自社のプロダクトでも型検査にかかる時間を短縮できるのでは？」と思い立ち、試してみたところ実際に改善に役立てることができた、というのがこの記事の概要になります。 改善対象 改善対象は、弊社のメインプロダクトであるナレッジワークのフロントエンドです。現在マルチプロダクト化に向けたコード分割に取り組んでいる最中ですが、執筆時点はモノリシックな構成となっています。 改善前の TypeScript ファイルは自動
見よ、これがHonoのRPCだ
僕が開発しているWebフレームワークHonoは、同じJavaScriptのフレームワーク、Expressと比べられることが多いです。どちらもやれることはほぼ同じですが、HonoのアドバンテージはファーストクラスでTypeScriptをサポートしていることです。特に「RPC」機能は他のフレームワークにはなかった「TypeScriptの型でサーバーとクライアントの仕様を共有する」ことを可能にしています。今回はそのHonoのRPCについて紹介します。 どんなものか まず、どんなものかを箇条書きで共有します。 Web APIの仕様、特にインプット・アウトプットをサーバーとクライアント間で共有するためのもの OpenAPIやgRPCを使ってやりたかったことを叶えるかもしれない サーバーとクライアントをどちらもTypeScriptで書くことが大前提である 同種のものにtRPCがあるが、Honoの場合、
JSR の紹介
JSR の紹介
【ハンズオン】RemixでTODOアプリを作ってReactの違いを体感しよう【TypeScript/Supabase/TailwindCSS】 - Qiita
【ハンズオン】RemixでTODOアプリを作ってReactの違いを体感しよう【TypeScript/Supabase/TailwindCSS】TypeScriptハンズオンRemixtailwindcssSupabase はじめに Reactを使っていてステートがクライアントとサーバーで辻褄が合わなくなった そんな経験がReactをある程度使ったことがある人はおそらく経験したことがあるはずです。 Reactにおいて状態管理は誰でも使いやすく直感的である半面、クライアントとサーバーの状態を意識する必要が有ります。 どのタイミングでステートの変更をサーバーでも行うのか難しく思う場面もしばしばあります。 今回は最近巷でReactと並んで見かけるようになったRemixについてハンズオン形式で学べるような記事を書いていきます。 ハンズオンを通してRemixの特徴であったり、SupabaseやTail
デザインパターンライブラリを作った JSRの話だけ読みたい人は読み飛ばしてもOKです。 JavaScriptのtry-catchはC++の影響を受けており、以下の特徴があります。 (A) throwは大域脱出的である。 (B) try-catchはブロック内の全ての例外副作用に対して一括で作用する。 (C) try-catchは文であり、値を返せない。 (D) TypeScriptにおいて、例外型は明示されない。 このうち (B), (C), (D) の問題を解決するため、RustのResultや類似のパラダイムをJSに輸入する試みがしばしば行われています。しかしこの解決手段にはいくつかの問題があり、 (E) rethrowの専用構文がないためボイラープレートが増える。 (F) 出力ストリームに対するwriteなど、戻り値を持たない副作用関数に対するエラーハンドリングが抜け落ちないようにL
Brainfuck 実装で学ぶ TypeScript 型レベルプログラミング - Object.create(null)
およそ 4 年前に「TypeScript で型レベル Brainfuck」という記事を書きました. susisu.hatenablog.com それから 4 年間の間に TypeScript も進化し, 型レベルプログラミングの技法にも大きな変化がありました. 特に顕著な影響があったものでは, TypeScript 4.0 のタプル型の改善 TypeScript 4.1 のテンプレートリテラル型や条件型での再帰 TypeScript 4.5 の条件型での末尾再帰の除去と, 再帰の上限の緩和 などがあります. こういった変化も踏まえた上で, いまから TypeScript の型レベルプログラミングに入門する人に向けて改めてまとめ直したものがこの記事です. 内容は記事執筆時点の最新版である TypeScript 5.4.5 で動作を確認しています. ぜひ Playground などを使って,
サーバサイドで実行可能なJavaScriptランタイム「Bun」は、2023年5月に登場したバージョン0.6で、単独の実行ファイルを生成できる「bun build」機能が搭載されました。 単独の実行ファイルは、Bunをインストールすることなく、そのまま実行可能です。 そして4月26日にリリースされたBun 1.1.5では、このBun buildの機能にクロスコンパイルの機能が追加されました。 Bun v1.1.5 - Fixes 64 bugs (addressing 101) - Cross-compile standalone JS/TS binaries - https://t.co/8hd5RVXz0H is bun's new crash reporter - package.json won't error on comments & trailing commas - Nod
Fashionably flexible responsive web design (full day workshop)
カリー化と部分適用
カリー化と部分適用 先日同僚にカリー化を説明する機会がありました．その際に，簡潔に説明に適した自分用の資料があるといいなと思いましたので，こちらの記事を書くことにしました． この記事ではカリー化と部分適用について解説します．歴史等には触れずにただその内容について述べます． 混同しやすいという情報があるのですが，割と違うレイヤの話なのでなぜなのかは不明ですが，関連性に関する私見も末尾に書いておきます． カリー化 カリー化 (Currying)[1]とは 複数の引数を取る関数を，単一の引数を取る関数に翻訳する手法 のことです． 簡単な例を見ます．以下のような2つの引数を持つ関数を考えます． const add = (a: number, b: number) => a + b; console.log(add(1, 3)); // 4 関数を値のように返す関数のことを高階関数と呼びます． カリ
Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting
# Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting This slides are used at VS Code Conference Japan 2024 https://vscodejp.github.io/conference-2024/ (15 ~ 20 minutes) ## References: - Extension API | Visual Studio Code Extension API https://code.visualstudio.com/api - The Biome Tool Chain https://fosdem.org/2024/schedule/event/fosdem-2024-2563-the-biome-toolchain/ - Mo
VSCodeでJavaScript / TypeScirptの未使用import文を自動で削除する - Qiita
こうするとファイル保存時に未使用のimport文を削除し、さらにimport文の順番を並べ替えてくれます。順番はimport元のファイルパスをアルファベット順に並べているようですね。 指定できるキーはexplicit以外にもありますので、詳しくはドキュメントをご覧ください。 最後まで読んでいただき、ありがとうございました！
去る2024年4月25日にTypeScript 5.5 ベータ版リリースの情報が発表されました。 どうやら今回の目玉機能は、『推論されたtype predicate』ということです。 この記事では、これまでとこれからでtype predicateがどのように変わるのかをお話ししたいと思います。 環境の用意 これまでの動作を確認するための環境は、既に用意していた別プロジェクトのランタイムを利用しました。バージョンは5.1.6です。 ベータ版環境は新たに用意します。公式のリリースノートにもありますが、以下のコマンドを実行するだけです。 これでベータ版の実行環境ができたのですが、VSCodeさんが最新版の仕様で型推論を行なってくれません。 ので、調教強制的にいうことを聞かせます。 やり方は、適当なtsファイル開いてshift + cmd + p → typescript:Select Types
株式会社ドワンゴは2024年5月11日に開催される日本最大級のTypeScriptをテーマとした技術カンファレンス TSKaigi 2024 にプラチナスポンサーとして協賛いたします。 TSKaigi 2024 当日は弊社教育事業エンジニアが複数名参加します。スポンサーブースをいただいていますので、現地で参加される方は是非お気軽にお越しください。 スポンサーブースではN予備校内にあるTypeScriptの教材を触れる他、限定ノベルティもご用意しております！ ドワンゴの教育事業とは？ 私たちは、未来の「当たり前」の教育をつくるため、生徒・学生や教職員の「学ぶ」「教える」体験の最大化を日々目指しています。 日本発の本格的なオンライン大学「ZEN大学(仮称)(設置認可申請中)」や、2万名を超え日本最大の生徒数であるネットの高校「N高等学校・S高等学校」と連携し、ネットの時代に合わせた教育関連のサ
JSR Meetup に参加してきた
JSR Meetup JSR が気になっていたことや、Deno の中の人が主催というのも良いなと思って、ささっと参加してきました。自分用に雑にまとめておきます。 https://jsr.io/ https://github.com/jsr-io/jsr ハッシュタグ 自分のメモ Deno Land Inc. が開発、運用しているパッケージレジストリ プライベートは今のところ予定されていない TypeScript をそのまま登録できる ESM 対応 OSS で開発されている 自前の JSR を立てることもできる 積極的に改善されていきそう ドキュメントが生成される Web UI がモダン Deno が流行らないと苦しそう @std を Deno が持ってるのは他からはちょっとな ... って思われそう キレイな npm 雑感 印象としては使ってみても良さそうという感じです。ただ無理に npm
はじめに TSKaigi本番も迫り緊急でテックブログを書いています、VPoEの河合です。 来る5月11日(土)、TSKaigi 2024が開催されます。エムスリーエンジニアリンググループは、TSKaigiをリフレッシュメントスポンサーとして応援しています。 本記事は、少しばかりTSKaigiの宣伝をしつつ、エムスリーのJavaScript/TypeScript文化のお話をするものです。 はじめに TSKaigiとは エムスリーにおけるTypeScript 学生向けLTも開催 おわりに We are hiring !! TSKaigiとは TSKaigiは、一般社団法人TSKaigi Associationが企画、運営する、国内最大級のTypeScriptをテーマにした技術カンファレンスです。 今年が第1回目とのことですが、KeynoteにはTypeScript Product Manage
史上初のdeprecationから最新のバリデーションライブラリまで！TypeScriptの最新動向をうひょさんに聞いてきた
こんにちは、テックフィード白石です。 日本のエンジニア界隈をリードするエキスパートに、テクノロジーの最前線を語っていただくYouTube動画連載「Ask the Expert」の新着動画が公開されました！ 今回は、TypeScriptのエキスパートうひょさんに、TypeScriptの最新動向について詳しく伺ってきました。 うひょさんのアカウントをぜひフォローしましょう！ うひょさん（株式会社カオナビ フロントエンドエンジニア） ついでに白石のもフォロー推奨: 聞き手: テックフィード白石 以下に掲載するのは、インタビュー動画の内容の要約です（正確な書き起こしではありません）。 内容をフルにご覧になりたい方は、ぜひ動画をご視聴ください。 （ご質問、ご感想などはYouTubeのコメント、もしくはこの記事のコメント欄でも受け付けております） TypeScript史上初めてのdeprecation
Today we are excited to announce the availability of TypeScript 5.5 Beta. To get started using the beta, you can get it through NuGet, or through npm with the following command: npm install -D typescript@beta 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 Syntax Checking Iso
ユビーではNestJSでGraphQLのサーバー実装をおこなっています。今回は実践で得られた知見を元にNestJSでGraphQLのResolverに対してGraphQLのスキーマから生成したTypeScriptの型を適用する方法について解説します。 前提としてNestJSにはスキーマファーストとコードファーストがありますが、今回はスキーマファーストで書いたうえで、スキーマから型を生成するアプローチを紹介します。 NestJS組み込みの型生成を使う NestJSのスキーマファーストのアプローチではNestJSの組み込みの機能でスキーマからTypeScriptの型を生成することができます。 以下のように書くことで、 graphql.ts に型が生成されます。 GraphQLModule.forRoot<ApolloDriverConfig>({ driver: ApolloDriver, t
TypeScriptの高度な型をマスターする
先週、TypeScriptの3つの黄金ルール（独自解釈）について説明しました。 その中で第三のルール「型の派生を優先する：汎用型（ジェネリクス）」は特に実装が難しいものです。 型システムが効果的に機能するのは、その定義が正確であるためです。 しかし、より正確になるほど、型の複製が増え、コードが保守不可能になるリスクが高まります。その解決策は、派生（=他の型から型を定義すること）を利用することです。 しかし、簡単ではありません。そこで今日は、型を最適に設定するためのいくつかの重要な概念をステップバイステップで紹介します。これらの概念を徐々に理解することで、コードの任意の部分を型付けするための自立を目指すことができるでしょう💪（頑張る） 取り上げる概念 オブジェクトのキーを取得する オブジェクトのキーをフィルタリングする クラスを操作する 文字列を操作する inferを使用して既存の型から型
Over the past years, new package managers like yarn and pnpm have emerged, enhancing how packages are downloaded. However, the npm package registry, a cornerstone of the JavaScript ecosystem, has barely evolved. Its last notable update was a “files” tab added years ago. The JavaScript language, known for its vibrant evolution, seems paradoxically mired in a distribution model that hasn’t kept pace
型システムに関する新機能リスト 本連載は、TypeScriptのバージョン3から5.2までのアップデート内容を、テーマごとにバージョン横断で紹介する連載です。第3回である今回紹介するのは、TypeScriptの根幹ともいえる型システムの変更点です。具体的には、以下の内容を順に紹介します。 ジェネリクスと「...」に関する新機能 constキーワードに関する新機能 型定義におけるテンプレート文字列 Mapped型での再マッピング インデックスシグネチャの新しいキー catchブロック変数でunknownが可能 returnのない関数の戻り値 ジェネリクスと「...」に関する新機能 最初に紹介するのは、ジェネリクスと「...」演算子に関する新機能です。 ジェネリクスとスプレッド演算子の組合せ 例えば、個人情報を表す型定義としてPersonalBaseDataがあり、プロパティとしてid（num
TSConfig Guide - Generate a modern TSConfig file from just a few toggles.
Sick of scouring the TypeScript docs to setup your TSConfig?I was too, so I built this tool to get you started with some smart defaults! This TSConfig builder is heavily influenced by Matt Pocock's TSConfig Cheat Sheet. I highly encourage you to check it out for further explanation of these properties.
Biome v1.7
Today we’re excited to announce the release of Biome v1.7! This new version provides an easy path to migrate from ESLint and Prettier. It also introduces experimental machine-readable reports for the formatter and the linter, new linter rules, and many fixes. Update Biome using the following commands:
こんにちは、戸田です。 このブログではTypeScriptの環境構築からJestを使用した簡単な四則演算のテストの方法を解説します。 環境構築 まずは環境構築をします。 今回はかなりシンプルな環境を構築します。 今回使用した環境は以下です。 Node.js v21.5.0 TypeScript v5.4.0 Jest v29.7.0 TypeScriptのインストール package.jsonをセットアップする npm init -y TypeScriptをインストールする npm install typescript --save-dev Node.jsのプログラムに必要な型宣言ファイルnode.d.tsをインストール npm install @types/node --save-dev TypeScriptの設定ファイルtsconfig.jsonを初期化 npx tsc --init
TypeScript: Branded Types 🔧
PART 1: TypeScript Mapped Type Magic Ahoy there TypeScript warriors! 👋 Today we're extending our work in the TypeScript mapped types article to provide branding. The previous article discussed how to use TypeScript mapped types in a nominal rather than structural nature. type A = { x: number } type B = { x: number }This is a fancy way of saying TypeScript is structural by default, i.e. it will se
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PythonだけでWebアプリが作れるライブラリが増えている（2024.05） - Qiita
自社サービスのバックエンドを Go から TypeScript へ切り替えるための整理
Node.js + TypeScriptのモジュールを整理してみる
エラーや非同期処理をより安全に扱うための TypeScript ライブラリ Effect-TS
TypeScript の型検査にかかる時間を短縮した話
JSのデザインパターンライブラリを試作した話と、それをJSRにアップロードしたら無茶苦茶簡単で感動した話
Bun 1.1.5でクロスコンパイルが可能に。LinuxでWindows対応の実行ファイルなどビルド
JavaScriptエンジンから見るランタイム / 2024-04-25
TypeScript 5.5からは関数からType predicatesの型推論が有効になるよ！
株式会社ドワンゴは TSKaigi 2024 をスポンサーしています - ドワンゴ教育サービス開発者ブログ
TSKaigiのスポンサーです、リフレッシュメントについて全てをお話します - エムスリーテックブログ
Announcing TypeScript 5.5 Beta - TypeScript
NestJSのGraphQL Resolver関数を型安全にしたい
JSR Is Not Another Package Manager
TypeScriptの根幹「型システム」、バージョン3から5.2までの変更点を解説！
TypeScriptの環境構築から分かる、Jestを使用したテストの方法 | DevelopersIO