uhyoさんが語る、「TypeScriptエキスパートへの道しるべ」 — TypeScriptの入門、学習法から最新トレンドまで
本連載は、「 エキスパートへの道しるべ（Load to Expert） 」をテーマとして、初級者がエキスパートになるためのヒントを、日本を代表するエキスパートの方々に伺う企画です。 TypeScriptは現代のWeb開発において欠かせない言語となっています。今回は、TypeScriptのエキスパートとして知られるuhyo氏に、初学者向けのTypeScript学習法や魅力について詳しく話を伺いました。これからTypeScriptを学ぼうと考えている方に、確かな道筋を示す内容となっています。 uhyoさんをTechFeed上でフォローしよう！ TypeScriptとは？その魅力と重要性 ――自己紹介をお願いします。 uhyo: uhyoと申します。TypeScriptのTechFeed公認エキスパートとして、TypeScriptに関する情報発信を行っています。 普段はReactなどを使用した、
非同期処理のエラーが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
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
【第2回】TypeScriptもウェブも仕様や原理から楽しむ | GeeklyMedia(ギークリーメディア) | Geekly（ギークリー） IT・Web・ゲーム業界専門の人材紹介会社
2022年4月に著書『プロを目指す人のためのTypeScript入門』が発売された鈴木僚太さん(https://twitter.com/uhyo_)。QiitaやTwitterでは「うひょ（uhyo）」さんとして、TypeScriptやフロントエンドの話題を中心にウェブ技術に対する踏み込んだ解説でも知られています。 著書ではあえて触れられなかったという「TypeScriptでウェブアプリケーションをどう書くか」という観点へのヒント、なぜそれを書かなかったのか、そして仕様や原理に立ち返って自ら考えることの楽しさについて、株式会社一休CTOの伊藤直也さん(https://twitter.com/naoya_ito)が聞き出します。 ・伊藤 直也さん / 株式会社 一休 執行役員 CTO 新卒入社したニフティ株式会社でブログサービス「ココログ」を立ち上げ、CTOを務めた株式会社はてなでは「はてな
TypeScript 4.9のas const satisfiesが便利。型チェックとwidening防止を同時に行う
TypeScript 4.9 から、satisfies operator が使えるようになりました。従来のas constと組み合わせ、型チェックと widening 防止を同時に行えます。筆者的には、"顧客が本当に必要だったもの"です。 本記事では satisfies とは何か？ as const とは何か？ 2つを組合わせるとどのようなメリットがあるのか？ について、実際のコードと共に解説します。 結論 TypeScriptで 定数を export する場合は、as const satisfies を設定しておくと便利です。 export const myName = "田中" as const satisfies string; export const foodList = { ramen: "ラーメン", udon: "うどん", soba: "そば" } as const sa
JavaScript／TypeScriptランタイム「Deno 1.25」が公開、npmパッケージの実験的サポートなど変更多数
「Deno 1.25」では、8月15日に開発チームが予告した通り、npmパッケージに対応し、高速なHTTPサーバーを提供している。ただしnpmパッケージへの対応については「実験的」な段階にあるため、「deno vendor」「deno info」「deno install」といったコマンドではnpmパッケージを利用できない。 HTTPサーバーについてもまだ実験的としているが、現段階でも前バージョンまでに付属していたHTTPサーバーに比べて3倍速く、Node.jsのHTTPサーバーに比べて4倍速いという。ただ、新しいHTTPサーバーはHTTP/1.1にしか対応しない。HTTP/2以降への対応は計画しているというが、時期は明らかにしていない。そして、新しいHTTPサーバーを呼び出すAPIとして「Deno.serve()」を用意した。 さらに、サンプルプログラムとそれに対応するテストプログラムを
TypeScript 型レベルプログラミング フリースタイルガイド - Object.create(null)
TypeScript の型レベルプログラミングのための真面目なスタイルガイドではありません. 型なしラムダ計算で喜ぶような人間が使うための諸刃の剣です. この記事の内容は TypeScript の 2022 年 1 月時点での最新版である 4.5.4 に基づいています. 将来のバージョンでの妥当性は保証しません. 「型〜」「〜型」という用語の「型」はしばしば省略します. 値レベルの話題は一切登場しません. 以前作った型レベル Brainfuck インタプリタはこのスタイルに則っているので参考にどうぞ. いつまでこのネタを引きずるんですか? パラメータに対して制約を付与しない 型定義のパラメータに対して extends を使って制約を付与すると, そのパラメータに与えられる引数を制約を満たすもののみに限定することができます. 例として, 以下の Append には string の部分型のみ
AWS CDKでAPIGateway/SQSと連携した2層LambdaをTypeScriptで開発してみる | DevelopersIO
Lambda/API GatewayをAWS SAMを利用して定義していた所に代わり、CDKを使ったプロジェクトがもっと普及してもいいんじゃないかな？と思い、AWS CDK(Typescript)を利用してサーバーレスアプリケーションを開発してみました。 どうも、もこ@札幌オフィスです。 最近CDKにお熱で、Lambda/API GatewayをAWS SAMを利用して定義していた所に代わり、CDKを使ったプロジェクトがもっと普及してもいいんじゃないかな？と思い、AWS CDK(Typescript)を利用してサーバーレスアプリケーションを開発してみました。 作る物 APIGateway / Lambdaを利用して、SQSにキューイングする一般的なサーバーレスアプリケーションを作ってみます。 API Gateway/Lambdaの構成だけでは味気ないので、SQSをイベントソースに処理用のL
TypeScriptで境界と戦う
TypeScriptで境界に立ち向かう方法を整理してみました。 本編はその導入部になります。機会があれば続編があるかも.. Table of Contents はじめに 開発をしていると境界と向き合う機会が多いのではないでしょうか。 代表的な境界には以下のようなものがあります。 設定ファイルの入出力 Web APIのインタフェース DBにアクセスするDaoとテーブル定義 ビジネスロジックとそれ以外 最近だとDDDが再び注目されている気がします。 私もDDD本をちゃんと読んだことが無かったので以下を読み始めました。 本記事ではDDDについて語るつもりはありません。 DDDでも取り上げられている境界について、TypeScriptを使って今までどのように実装してきたかをまとめています。 想定する読者 TypeScriptを使って普通に開発できる読者を想定しています。 TypeScriptで実装し
TypeScriptによるデコレータの基礎と実践 - Qiita
はじめに アドベントカレンダーに参加した途端に仕事が忙しくなったため、死にそうになりながらこの記事を書いています。 早速ですがタイトルの通り「デコレータ」について少しまとめてみましょう。 書くこと デコレータの基礎 reflect-metadata 実践 デコレータの基礎 公式 とりあえず何事も本家のドキュメントを見てみるのが一番 公式 公式の日本語訳 デコレータはJavaScriptのStage-2状態の機能であり、 今後仕様変更が入る可能性があります。 ドラフト状態の仕様についての詳しい内容は こことかここ！ ↑の日本語訳サイトを読めば大体わかりますし こういった素晴らしい記事もあるので 本記事では簡単なおさらい程度にします。 デコレータとは デコレータとはクラスの宣言などにアタッチできる特別な宣言です。 クラス宣言 メソッド アクセサ(get, set) プロパティ メソッド引数 ↑
10 bad TypeScript habits to break this year
2021-01-21 TypeScript10 bad TypeScript habits to break this yearTypeScript and JavaScript have steadily evolved over the last years, and some of the habits we built over the last decades have become obsolete. Some might never have been meaningful. Here's a list of 10 habits that we all should break. If you are interested in more articles and news about web product development and entrepreneurship,
TypeScript 4.1で密かに追加されたintrinsicキーワードとstring mapped types
TypeScript 4.1では、Mapped typesにおけるkey remappingやtemplate literal typesに付随する新機能として、標準ライブラリにUppercaseなどの型が追加されました。 上の例から分かるように、Uppercase型は一つの文字列を受け取る型関数で、文字列のリテラル型を渡すとその文字列中の小文字を全て大文字にした文字列のリテラル型が返ります。他にも、Lowercase、Capitalize, Uncapitalizeがあります。 これらの型は標準ライブラリ（lib/es5.d.ts）にその定義があります。そこで使われているのがintrinsicキーワードなのです。以下はTypeScript 4.1時点の標準ライブラリからの引用です。 /** * Convert string literal type to uppercase */ typ
ワイ「TypeScriptのエラーが読まれへん」 - Qiita
前回の記事の続きです。 TypeScriptが気に入ったワイ ワイ「TypeScript、素敵やん」 ワイ「だって、ミスったコードを書くと・・・」 ワイ「↑こんな感じで、コンパイラが教えてくれるから」 ワイ「だいぶバグ発生率を抑えられそうや〜ん」 しかし ワイ「おっ」 ワイ「またエラーメッセージが出たで」 ワイ「ファッ！？」 ワイ「今度は英語やないか」 ワイ「しかもちょっと長い！」 ワイ「意味わからんで」 ワイ「Google翻訳してみよか」 タイプの引数 '{名前：文字列; 年齢：文字列; } 'はタイプ' User 'のパラメータに割り当てることはできません。 プロパティ「age」のタイプには互換性がありません。 タイプ 'string'はタイプ 'number'に割り当てることができません。 ワイ「いや翻訳しても分からん！」 助けを呼ぶ ワイ「ハスケル子ちゃ〜ん！」 ハスケル子「なんで
ワイ「TypeScriptなんも分からん」 - Qiita
ハスケル子「↑このコードは正しく動くと思いますか？」 ワイ「ええと」 ワイ「まずはtitlesという変数に、記事タイトルが3つ入った配列を格納するんやな」 ワイ「そんで、配列が持ってるpop()メソッドを実行して」 ワイ「一番最後の要素を取得しとるわけか」 ワイ「ほな、newestTitleという変数には'記事タイトル3'が格納されるな」 ワイ「せやから、コンソールには'記事タイトル3と表示されるはずや」 ワイ「問題ないな」 ワイ「これは、正しく動くコードやで！」 ハスケル子「そうですよね」 ハスケル子「じゃあ次は・・・」 ハスケル子「↑このコードはどうですか？」 ハスケル子「正しく動きますか？」 ワイ「ええと、titlesという変数に'記事タイトル1'という文字列を格納して」 ワイ「そのあとtitles.pop()しとるわけか」 ワイ「あれ、文字列はpop()なんてメソッドを持ってたっけ
TypeScript学習ロードマップ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? TypeScript全然わかんない... という状態から、プロジェクトに導入できるまでになんとかなったので、 学習の参考になったものなどをまとめて学習ロードマップを作成いたしました。 私自身もまだまだのレベルですが、これからTypeScriptを勉強したい!という方の道しるべになれば幸いです Level 0: TypeScriptってなんぞや？ まず学習する前に、その対象がなんなのか、を見極める作業です。 TypeScriptは altJS の１つです。 JSは元々大規模なコードを組むには不向きな設計になっているので、 altJSという
TypeScript入門 #01：トランスパイルとTypeScript
現代のJavaScriptは、ECMAScript2015(ES6)で開発できますが過去のブラウザーでは動作しません。そこで登場するのが、トランスパイルです。この講座では、TypeScriptのコンパイラーをトランスパイラーとしてES6を学習していきます。 再生リストはこちら https://www.youtube.com/playlist?list=PLh6V6_7fbbo9_OAa_Uu8j6oTaHogUHhW4 【参考書籍】実践TypeScript ~ BFFとNext.js&Nuxt.jsの型定義~ https://amzn.to/31GaXv9 独学応援コミュニティ運用中（Slackアカウントが必要です） https://01w.me/tomostacommunity 各講座の学習の順序は、こちらを参考にしてください。 https://chanto.blog/2019/
仕事ですぐに使えるTypeScript — 仕事ですぐに使えるTypeScript ドキュメント
注釈 本ドキュメントは、まだ未完成ですが、ウェブフロントエンドの開発を学ぶときに、JavaScriptを経由せずに、最初からTypeScriptで学んでいく社内向けコンテンツとして作成されはじめました。基本の文法部分以外はまだ執筆されていない章もいくつもあります。書かれている章もまだまだ内容が追加される可能性がありますし、環境の変化で内容の変更が入る可能性もあります。 書籍の原稿はGitHub上で管理しております。もしTypoを見つけてくださった方がいらっしゃいましたら、 GitHub上で連絡 をお願いします 1 。reSTファイルだけ修正してもらえれば、HTML/PDFの生成までは不要です。フィードバックなども歓迎しております。 1 https://github.com/future-architect/typescript-guide/pulls
TechFeed Live#2 「React vs Angular2」 に行ってきたメモ #techfeed - console.lealog();
そもそものところで色々ツッコミたい気持ちはみなさんあるでしょうが、せっかく当選したので観戦に行ってきました。 React陣営は @koba04 & @yosuke_furukawa Angular陣営は @laco0416 & @armorik83 モデレータは @Shumpei メモは雑なので、漏れとか齟齬とかあるかもですよ。 トークバトル React / Angular 2の概要 スター数とかバージョンとか コードがだいたいこんな感じとか 開発言語 こば: だいたいBabel、TypeScriptでもやれる 会長: だいたいBabel使ってると幸せになれる らこ: JavaScript or TypeScript or Dart らこ: まあTypeScriptですよね らこ: Dartはリポジトリが分かれました はち: ReactやるからAngularやるからで開発言語を選ぶのはナン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Microsoft、「TypeScript」高速化のために開発した「Deopt Explorer」を一般提供／「V8」の内部構造を理解している上級ユーザー向けの「Visual Studio Code」拡張機能
TypeScriptの設定の良し悪し
