TS 5.6のiterator helpersサポート――BuiltinIteratorsのwhat & whyを知る - Qiita
先日、TypeScript 5.6 Betaが公開され、あわせてリリースノートも出ました。 この記事では、TS 5.6の新機能の中でもIterator helpersに注目します。特に、Iterator helpersのサポートに合わせて型定義に追加されたBuiltinIteratorsやBuiltinAsyncIteratorsについて解説します。 Iterator helpersとは Iterator helpersは、ECMAScriptのプロポーザルのひとつであり、この記事の公開時点ではStage 3という完成目前の状態にあります。TypeScriptではStage 3に到達したプロポーザルが実装されるので今回これが実装されることになりました。 ランタイムの実装としては、この記事公開時点ではGoogle Chrome 122, Node.js 22.0.0, Deno 1.42など
TypeScriptの型演習 - Qiita
この記事は、TypeScriptの型を使いこなすための演習として、TypeScriptの型に関する練習問題を提供する記事です。解いて自分のTypeScript力を確かめてみましょう。 問題のレベルは、筆者の既存記事「TypeScriptの型入門」「TypeScriptの型初級」を完全に理解した人なら全部解けるという想定で作られています。記事を読んでいない人が腕試しに解いてみるのも問題ありません。また、記事を読んだけど全部は理解していないという場合でもご安心ください。解ける問題はありますから、ぜひ挑戦してみましょう。 問題は20問あり、4段階の難易度別に分かれています。同じ難易度帯の問題は思いついた順で並んでいるので、後のほうが難しいわけではありません。問題は執筆時点の最新版のTypeScript（TypeScript 3.3.3333）で--strictオプションありの状態で動作を確認して
Node.jsを過去の物にする最速の肉まん - Qiita
その名はBun ﾃﾞﾃﾞﾝ BunはNode.jsやDenoのようなJavascriptランタイムです。(2022/7/8現在ベータ版) ちなみにロゴが本当に肉まんなのかはわかりません。（赤ちゃんの頭にも見えるけど名前がBun/パンだしなぁ...) この記事ではNode.jsやDenoと比較をしつつ、bunの解説させていただきます。 割となんでもできる Bunはただのランタイムではありません。下のように、開発に必須の多くな機能を最初から有しています。 TypescriptからJavascriptへのトランスパイル jsxからJavascriptへのトランスパイル npmのようなパッケージのインストール&管理 webpackのようなプロジェクトのバンドル化 もちろんランタイムなのでNode.jsのようにサーバーでJavascriptを実行することも可能です。 これらに加えてBunには様々な機
TypeScriptのmoduleSuffixesについて考えて納得した - Qiita
みなさんこんにちは。今日は、TypeScriptの新しいコンパイラオプション（おそらく4.7で導入）であるmoduleSuffixesについての話題がTwitterで見られました。 moduleSuffixesについて詳しくはこちらをご参照ください。 これについては、「モジュール解決がさらに複雑化する」などいくつかの方向性から否定的な意見が見られました。しかし、筆者が考えてみたところ、正当性のある機能追加だと納得できたので考えをご紹介します。 3行でまとめると これまで通りランタイムの挙動に影響しないから大丈夫だよ pathsが怖くないならmoduleSuffixesも怖くないよ TypeScriptはJavaScript環境に追随するよ moduleSuffixesとは では、moduleSuffixesはどんなコンパイラオプションなのかという解説をまず少しします。これはTypeScri
Promiseをthrowするのはなぜ天才的デザインなのか - Qiita
ReactのConcurrent Modeが最初に発表されたのはもう1年近くも前のことです（記事執筆時点1）。Concurrent Modeはたいへん奥深い機能で正式版がたいへん待ち遠しいですが、Concurrent Modeの代名詞として多くのReactユーザーに知られているのはPromiseをthrowするというAPIデザインです。Concurrent Modeでは、コンポーネントがレンダリング時にPromiseをthrowすることで、レンダリングをサスペンドした（Promiseが解決されるまでレンダリングできない）ことを表します。 Concurrent Modeに関しては筆者の既存記事Concurrent Mode時代のReact設計論 (1) Concurrent Modeにおける非同期処理などをご参照いただきたいのですが、ここではPromiseをthrowするということ自体に焦点
React開発において便利なTypeScriptの型まとめ - Qiita
React開発において個人的に便利だなーと思っているTypeScriptの型をだだーっとまとめてみました。私自身もまだまだTypeScript修行中の身ですので、新たに気づいたものがあったら随時追記していきます。みなさんも「こういう使い方できるぜ！」みたいなのがあったら、ぜひ教えていただければと思います。 対象とする読者 最近ReactにTypeScriptを導入し始めた人 ReactにTypeScriptを導入してそこそこ経つけど、いまいち使いこなせてる気がしない人 TypeScriptにあまり詳しくない人でもわかるように説明しているつもりではありますが、以下の記事がTypeScriptの入門用に素晴らしいので、そちらを先に読むとスムーズに読み進められると思います。 TypeScriptの型入門 Partial React開発においてよく定義する型としてコンポーネントのpropsの型があ
Node.js v12のES Modulesと、Babel/TypeScriptの対応について - Qiita
本日は誕生日です。みなさんプレゼントありがとうございます。まだの方は急いでください。 あと年齢は聞かないでください。 はじめに Node.js v12で変更されるES Modulesの挙動についてと、Babelでの対応方法についての記事です。 10月に開催された関西Node学園 8時限目で発表した内容＋α（後日談含む）です。 対象者 ES Modules（import構文）は知ってるけどNode.js v12で何か変わったの？ 非対象者 v12での変更点もちゃんと知ってるし！ そういう強い子は、この記事本文はスルーしてもいいので最後にある「おまけ」だけでも見てください。 ES Modulesって何？ ていうかJavaScriptって何？ この記事のゴール Node.js v12におけるES Modulesの変更点について理解し、適切なコードを書けるようになる Babelを使っている場合は適
ニジボックスで実施してきた研修 - Qiita
ニジボックスの研修を何個か企画して実施したので、その内容を紹介します。 JavaScript 研修 JavaScript の研修です。古川が担当しました。研修の内容としては JavaScript の基本文法から文法内容を使って簡単な関数を書くパートが前半、後半は小さいアプリケーションを何のフレームワークも使わずに書いてみるところまで、ほぼ丸一日かかる6時間の研修です。 リクルートの JavaScript Bootcamp の内容がベースですね。 かなりインタラクティブな講義で、参加者がただ座学的に受けるというよりは、聞いた内容に対して質問してもらい、受けた質問から展開して、色々説明します。 イベントループの話みたいな若干マニアックな話から、ページネーションをどうやって実装するかという実践的な話もしてました。 この画像はページネーションをどうやって実装するかを解説してるところですね。 ページ
Next.js+TypeScriptでシンプルなニュースサイトを作ってみた。 - Qiita
作ったもの タイトルはSimple Newsです。 サイトURLは、 こちらです。 ソースコードは こちらです。 Google News を参考にしました。 どんな機能があるの？ NewsAPIからニュースサイトの記事のデータを取得し、タイトルと画像を表示 NewsAPIは、世界中のニュースサイトから検索をかけて、情報を取得できるAPI ( Application Programming Interface ) OpenWeatherMapから取得した、現在の天気情報と5日間の天気予報を表示 OpenWeatherMapは、現在の気象やある期間の気候の予測データを取得できるAPI ページ遷移が高速 記事をクリックすると、記事が掲載されているサイトへ飛びます。 こんな感じでとてもシンプルで高速に動くニュースサイトです。 こんな人に読んでほしい Next.jsを使ってみたい初心者 外部APIを
Deno が Node.js に依存しなくなった - Qiita
Deno (ディノ) Advent Calendar 2020、25日目の記事です。今日は Deno が Node.js に依存しなくなった経緯の話をします。 Node.js に依存しながら始まった Deno の開発 Deno は、プロジェクトが始まって以来いくつかの点で Node.js に依存して開発が進められてきました。おもに Node.js に依存していたのは以下の3種類のプログラムです。 バンドラ parcel (のちに rollup に移行) フォーマッタ prettier リンタ tslint (のちに eslint に移行) この中でバンドラが最も最初に Deno 製のツールにリプレースされ、その後フォーマッター、リンターの順でリプレースされていきました。リンターがリプレースされたのはつい最近 (2020年11月) のことです。この記事ではそれぞれの経緯・手法について紹介して
TypeScript v3.6.3 変更点 - Qiita
こんにちはメルペイ社な@vvakameです。 TypeScript 3.6がアナウンスされました。 …えぇ、3.7じゃなくて3.6の記事です。現時点では3.7 Betaが出ています。 技術書典の運営タスクに圧殺され3.6.0-rcは未実装なものが多いな… つってスルーしてたらこんな有様です。 実際の動作確認は現在のlatestであるv3.6.3で行っています。 What's new in TypeScript in 3.6 wikiページはサイズでかすぎてレンダリングできなくなってた… wikiページのmarkdownからhandbook側も生成しているはずなので問題ないはず Breaking Changes in 3.6 TypeScript 3.6 Iteration Plan TypeScript Roadmap: July - December 2019 Roadmapはこちら。
Nuxt v3はどうなるのか - Qiita
2020/09/19にめでたくVue.js v3がリリースされました🎉 さて、私の関心は業務でも利用しているNuxt.jsがVue.js v3に対応するとどうなるのか、Nuxt.js v3はどうなっていくのか気になっています。 Vue.js Amsterdamで紹介されたNuxt.js v3のスライドから個人的に気になったところを抜粋して紹介します。 The State of Nuxt by Sébastien Chopin Nuxt 3 Architecture Updates by pooya parsa 詳しくはスライドを参照ください。 TypeScriptのサポート core や vue-appが型付になる @nuxt/typesやnuxt-tsが不要になる VueComponentのTypescriptサポート（SFC？） ランタイムとnuxt.configのサポート 現状はN
Apollo LinkでGraphQLのCustom Directiveを作ろう - Qiita
これは GraphQL アドカレ2019 の記事です。 アドカレを覗いたとき、最終日だけ空いていたので予約しておいたのですが、最終日のエントリとするにはかなりニッチなネタになってしまった気がしないでもないです。 GraphQLのDirectiveとは 知っている人も多いと思いますが、GraphQLのDirectiveというのは文中に @include のように@マークをつけて注釈をつけるための機能です。 query ProfileView($renderingDetailedProfile: Boolean!){ viewer { handle # These fields will be included only if the check passes: ... @include(if: $renderingDetailedProfile) { location homepageUrl
graphql-codegen で型定義を生成する (React, Apollo, TypeScript) - Qiita
graphql-codegen で型定義を生成する (React, Apollo, TypeScript)TypeScriptReactGraphQLapollo 本記事はこのリポジトリでやったことのまとめです。 GraphQL + TypeScript への課題感 TypeScript(に限らず他の静的型付の言語) と GraphQL を使うと、型の二重定義が発生がちです。折角 GraphQL に通信規約としての型を書いているのに、それを多重定義することで、運用の面倒臭さやバグの温床になりかねない、という懸念がありました。 今回は、graphql のスキーマとクエリを書くと、サーバー向けに resolver の型定義、クライアント向けにクエリの型定義を生成し、それによってできるかぎり型安全なコードを扱うのをゴールとします。 やり方 graphql-code-generator を使います
現場に残る Vuex の map ヘルパーのコードベースを消し去り、 Vue 3 時代の型に追従するための CLI ツールを TypeScript Compiler API で実現する - Qiita
現場に残る Vuex の map ヘルパーのコードベースを消し去り、 Vue 3 時代の型に追従するための CLI ツールを TypeScript Compiler API で実現するJavaScriptNode.jsTypeScriptVue.jsVuex はじめに Vue.js 製アプリケーションのレガシーコードベースにおいて、頻繁に課題となるのが mapGetters のような map ヘルパーのメソッドです。 これらはショートハンド的に使えて過去には便利なケースもありましたが、現在ではほとんど利用されることもなくなりました。 それもそのはず。現在のフロントエンド開発の主流となる言語は JavaScript ではなく TypeScript となっています。しかし、 map 系ヘルパーはその構造から任意の文字列を受け取った上でオブジェクトに影響を及ぼす形となっており、根本的に型システム
敗北者のTypeScript - Qiita
TypeScriptはJavaScriptに静的型を導入したプログラミング言語で、登場から現在までその人気を増し続けています。 動的型付き言語であるJavaScriptに静的型の安全性（コンパイル時にバグ・間違いを発見することができる能力）を与えることで、TypeScriptはJavaScriptによる開発の効率を上げてくれます。 裏にJavaScriptがあるという特性もあり、TypeScriptは「部分的に静的型チェックをする」というような挙動をサポートしています1。詳しくは後述しますが、これによりJavaScriptからTypeScriptへの移行が可能となっています。TypeScriptは@ts-check（あるいは@ts-ignore）などを通じてこのようなユースケースも手厚くサポートしています。 このことの裏返しとして、TypeScriptを利用するときは注意すべき点があります
TypeScript 3.7の`asserts x is T`型はどのように危険なのか - Qiita
TypeScirptの動向を少し熱心に追っている方ならば、8月頭にAnders HejlsbergさんがTypeScriptリポジトリに次のプルリクエストを出したことは記憶に新しいでしょう。 Assertions in control flow analysis これはTypeScript 3.7で導入される予定の機能で、関数の返り値の型宣言においてasserts x is T （xは引数名でTは型）という構文を書くことが可能になるというものです。 この機能はたいへん面白いのですが、誤った使い方をするととても危険です。そこで、この記事では、assertsという新しい型述語1を正しく使いこなせるように皆さんをガイドします。 3行でまとめると assertsによる宣言はTypeScriptにより正しさがチェックされるわけではありません。 よって、assertsを使う場合安全性を保証する責任はコ
2020年の11の必見のフロントエンドトレンド - Qiita
こちらの記事は、Jonathan Saring 氏により2019年12月に公開された『 11 Must-Know FrontEnd Trends for 2020 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 ランチ中のフロントエンドトークでスマートに見られる方法！ チームのランチトークでスマートに見られることは、最新のフロントエンドのトレンドを常に把握しておくための大きな理由であることは言うまでもない。 それは、あなたがより良い開発者になり、より良い技術とより良い製品を作るのに役にたつかもしれない。 たぶんね。 だから、いくつかの興味深い方向を示すことで、この名誉あるクエストを君が簡単に達成できるように少し時間をもらいたい。 すべてのコンセプトについて1から10まで説明するのではなく、そのコンセプトとそれがどのように有用であるか紹介しよう。最後にはさらなるリソー
Slackのチャンネルをprefixでまとめてくれる拡張を作りました！
チャンネルが増えすぎて目が辛いので、いい感じにまとめてくれる拡張を作りました！ これが こうなります インストールはこちら Chrome: Slack Channels Grouping - Chrome ウェブストア Firefox: Slack Channels Grouping – 🦊 Firefox (ja) 向け拡張機能を入手 Opera: Slack Channels Grouping extension - Opera add-ons Edge: Slack Channels Grouping – Microsoft Edge Addons 特徴 ハイフンやアンダースコアで区切られたものをまとめます。 chat-犬 chat_猫 DOMの更新を監視しているので、チャンネル作成や名前変更などにも対応しています。 タブが非アクティブな場合はDOMの監視は止めています。 経緯 チ
tsconfigのmoduleとtargetには何を設定すればいいか - TypeScript - Qiita
TypeScriptの設定ファイルを雰囲気でコピらないための記事 TL;DR moduleはどのモジュールパターンで出力するかを指定する Node.jsでの利用想定ならcommonjs ブラウザ側での利用ならumd targetはどの動作環境向けにトランスパイルするかを指定する 利用環境が想定できないならes3やes5 下位互換性のあるコードへの変換をBabelで行うならesnext module とは JavaScriptにはいくつかのモジュールパターン（CommonJSやAMD、ECMAScriptなど）がある。TypeScriptをJavaScriptに変換する際、どのモジュールパターンにするかをmoduleに指定する必要がある。 moduleには'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'esnext'
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
