TypeScriptの型を展開してホバー表示してくれるVSCode拡張「Prettify TypeScript」が便利
TypeScriptは強力な型システムが魅力です。 しかし、複雑な型定義は理解が難しいです。特にライブラリの型定義などはジェネリクスや交差型などがネストしていることも多く、すぐに把握するのが難しい場合があります。 Visual Studio Code（以下VSCode）でTypeScriptの開発をしている際、型にカーソルをホバーすると型情報が表示されます。 しかし、深いネストや複雑な型の場合、展開される情報が不十分で、定義を追う必要があります。 そんな時に役立つVSCodeの拡張機能がないかな〜と探していたら「Prettify TypeScript」というぴったりの拡張機能を発見しました！この拡張機能を使うと、ホバーした時に型が展開された状態で表示されるため、型情報を把握しやすくなります。 Prettify TypeScriptの概要 Prettify TypeScriptを使用すること
「State of JavaScript 2023」公開。フロントエンドライブラリ利用率1位はReact、メタフレームワークはNext.jsなど、2万3500人のエンジニアが回答
JavaScriptに興味を持つ世界中のIT技術者2万3540人が回答したアンケートの結果をまとめた「State of JavaScript 2023」が公開されました。 回答者の国別分布を見ると米国が16％、フランスが7％、ドイツも7％、イギリス（UK）が5％、ポーランドが4％、ロシアが3％、カナダが3％などで、日本は2％（回答者280人）でした。 ここでは発表された内容から、多くの読者が興味を持つであろう、JavaScriptライブラリの人気など、結果の一部を紹介してみます。 フロントエンドフレームワークはReactが1位、2位にVue.js フロントエンドフレームワークの利用率ランキングはReactで、2位以下を引き離して8年連続1位、しかも利用率を伸ばしています。2位にはAngularを抜いてVue.jsが初めて入り、3位は昨年よりランクも利用率も落としたAngularとなりました
OpenAPI TypeScript
OpenAPI TypeScriptConvert OpenAPI 3.0/3.1 schemas to TypeScript types and create type-safe fetching.
Vite ってよく聞くけど何なんですか？ あれは
初めに Vue.js の学習をしているとよく「Vite」という単語を目にすると思います。 一体全体あれはなんなのでしょうか？？ なんだかよく分からないコマンドを打つと、いつの間にかプロジェクトが作成されていたり、 ファイルを編集するだけでブラウザで動くようになっていたりします。 そもそも読み方も良くわかりません 😵💫 (ヴィテ...？ ヴァイト...？) この記事では、Vite についての基本的な情報をまとめてみます。 発音？ 発音の仕方は「ヴィート」です。こちらは公式ドキュメントにも書かれています。 Vite（フランス語で「素早い」という意味の単語で /vit/ ヴィートのように発音）は、 しかし、実はこれにはやや表記揺れがあって、「ヴィット」と表記されているところもあります。 例えば、話題になった Kawaii ロゴではそのように表記されています。 まぁこれらはカタカナ表記の限界
「Astro DB」登場。LibSQLベース、TypeScript ORM搭載、1GBまで無料。静的サイト生成用データベース
「Astro DB」登場。LibSQLベース、TypeScript ORM搭載、1GBまで無料。静的サイト生成用データベース 静的サイトジェネレータAstro用のデータベースサービス「Astro DB」が登場しました。 簡単にAstroに組み込むことが可能で、Astroのバックエンドデータベースとして、例えばフォームやコメントのデータの入出力、ユーザー認証などに利用可能です。 Introducing: Astro DB Add a hosted database to any Astro project in seconds. Includes a TypeScript ORM, schema manager, and automatic migrations out-of-the-box. Try it today! Every database comes with a generou
型パズルを理解しTypeScript中級者になる8のポイント - 弁護士ドットコム株式会社 Creators’ blog
この記事は、弁護士ドットコム株式会社の Advent Calendar 2023 の 22 日目の記事です。 前日は @et_tei さんの「FireHOL で公開されているブラックリストからの接続 Akamai でブロックする」でした。 こんにちは。税理士ドットコム事業部の @komtaki です。 数年間 TypeScript を業務で使っていたのですが、型パズルの Type Challenges をやってようやく TypeScript の本質を理解していないことに気づきました。 この記事では Type Challenges を通して、私のような型パズルが難しいと感じる人のために型パズルを理解するための言語機能と使い方を 8 つのポイントでまとめます。 この 8 つのポイントを理解すれば、いろんな型パズルが理解できるようになるはずです。 Type Challenges とは TypeS
業務システム SPA のフロントエンド技術選定（2023年版） - KAKEHASHI Tech Blog
本エントリはカケハシ Part 2 Advent Calendar 2023の13日目の記事です。 （Part 1もおもしろい記事がいっぱいあるので、ぜひご覧ください。） はじめに こんにちは。カケハシでソフトウェアエンジニアをしている平松です。 今年、新規プロダクト立ち上げの機会があり、その際に行ったフロントエンドの技術選定について紹介したいと思います。 フロントエンドの領域は選択肢が豊富で、変化のスピードも速いため、プロダクトの要件に適した技術を選ぶことはひとつの挑戦です。 実際、フロントエンド技術選定のヒント 【令和五年度版】のアドベントカレンダー記事を読んで、その難しさを改めて感じました。 今回の新規プロダクトは、ユーザがログインして利用するtoBの業務システムです。 私はカケハシでは2度目の新規プロダクト立ち上げですが、前回の経験を活かしつつ、新しいアプローチにも挑戦しています。
TypeScriptでどこまで「関数型プログラミング」するか ─ 「手続き Haskell」から考察する - 一休.com Developers Blog
この記事は 一休.comのカレンダー | Advent Calendar 2023 - Qiita 10日目の記事です。 昨今は Web アプリケーション開発の世界でも、関数型プログラミングのエッセンスを取り入れるような機会が増えてきました。 とはいえ、一つのアプリケーションを 1 から 10 までがっちり関数型プログラミングで構成するというわけではなく、そのように書くこともあればそうでない従来からの手続き的スタイルで書くところもあるというのが現状で、どこまで関数型プログラミング的な手法を取り入れるかその塩梅もまちまちだと思います。まだ今はその過渡期という印象も受けます。 本稿ではこの辺りを少々考察してみたいと思います。 先日、Qiita Conference 2023 Autumn で以下のテーマで発表を行いました。 この発表では「関数型プログラミング最強!」という話をしたわけではなく、
CSS・TypeScriptの相性が抜群。vanilla-extractが最高のCSS開発体験をくれた
私はこれまで、 React ・ Next.js でのスタイリングには、CSS Modules + Sass を使っていましたが、最近は vanilla-extract を使うようになりました。TypeScript との相性が良く、長い間求めていた CSS 開発体験が実現できるためです。 vanilla-extract とは、CSS を TypeScript で型安全に書ける CSS in JS です。 State of CSS 2022 でも満足度が高く、先日は Next.js の appDir でも正式サポートされました。 本記事では、CSS Modules から vanilla-extract に移行した経緯と、そのメリットについて紹介します。 CSS Modules で限界を感じていた CSS Modules を使っていた理由はいくつかありますが、主に次のようなものです。 従来の C
初めてのTypeScript
TypeScriptの本格的な入門書。TypeScriptは、世界で最もよく使われ、かつ最も好まれているプログラミング言語の1つです。本書では、JavaScriptの基礎的な知識のあるプログラマーを対象に、「型」や「型システム」の基本から、明快かつ包括的にTypeScriptを解説します。TypeScriptはバグやタイプミスを防ぎ、コードを読みやすくするのに有用なだけでなく、JavaScriptがどのように動くべきかを宣言し、それを維持するのに役立つ優れたシステムです。読者は本書を読むことで、TypeScriptの基礎と最も重要な機能をマスターできるでしょう。 賞賛の声 監訳者まえがき まえがき 第I部 TypeScriptの概念 1章 JavaScriptからTypeScriptへ 1.1 JavaScriptの歴史 1.2 バニラJavaScriptの欠陥 1.2.1 コストのかかる
React TypeScript Cheatsheets | React TypeScript Cheatsheets
React TypeScript CheatsheetsCheatsheets for experienced React developers getting started with TypeScript
【Vue.js/TypeScript】 emitで理解するVue.jsの本質
この記事は？ 著者はReactを軸に開発をおこなってきたが、仕事の関係でVueをやることになって「emit」周りの理解が難しく、調べてもなかなかわかりづらかったので改めて記事にすることにした。 対象読者 ・Vueのemitを使う理由がわからない人 ・Vue3•TSでのemitを使い方を知りたい人 Vueの基礎(復習) この記事では以下のようなことがわかることは前提にしています。 ・ref/reactive 値が監視され、変更が検知される状態のことをリアクティブといい、refはプリミティブな値をリアクティブにし、reactiveはObjectの値をリアクティブした変数を作る。 ・props Vueでは親から個コンポーネントにpropsを経由して情報を渡す。 ・v-model Vueではデータの変更とViewが同期する双方向バインディングを提供しており、v-modelを使って変数と入力フォーム
𝚜𝚞𝚖𝚒 on Twitter: "vscodeでexportされたTSの関数がどこで/いくつ参照されてるか表示するオプションを初めて知った。地味に便利ー typescript.referencesCodeLens.enabled: true https://t.co/iUIcKFuDcI"
vscodeでexportされたTSの関数がどこで/いくつ参照されてるか表示するオプションを初めて知った。地味に便利ー typescript.referencesCodeLens.enabled: true https://t.co/iUIcKFuDcI
Lodash is dead. Long live Radash.
Lodash is old and lame, Radash is new and kool. What more do you need to know? What’s wrong with Lodash?In a time when Javascript’s dynamic abilities were held as a feature instead of a bug, Lodash was made to be as helpful as possible by providing functions that behave differently given different inputs. These days, we know better. Functional concepts like pure functions, deterministic behavior,
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - microsoft/tsyringe: Lightweight dependency injection container for JavaScript/TypeScript
Preventing Logical Errors in TypeScript with Nominal Typing
関数型プログラミングと型システムのメンタルモデル
スタートアップでこそCDKが活きた〜生産性を向上できた5つの理由〜 / startup-cdk-productivity
ビギナー向け エッジランタイムのすすめ | エッジランタイムを意識した開発をはじめよう
Node.js ORMs overview and comparison