JavaScriptのジェネレータ関数を実務で使った話 - Qiita
ジェネレータ関数はJavaScriptの機能の中でもマイナーな機能で、functionの代わりにfunction*で関数を作るのが特徴です（アロー関数版のジェネレータ関数式はありません）。また、その中ではyieid式が使用可能になります。 ジェネレータ関数については、存在は知ってるけど実務で使ったことがないという方も多いのではないかと思います。 そこで、今回は筆者がこれまでの経験で唯一、ジェネレータ関数を実務で使ったケースを紹介します（具体的なユースケースについては実際の業務そのままではなくこの記事用に用意したシチュエーションとなるので、そこはご了承ください）。 配列の組み立てが複雑になりがち 例えば、「メインメニューの表示内容が、ユーザーが管理者ユーザーかどうかで異なる」という仕様を実装したい場合を考えましょう。普通に実装すると、こんな感じになるはずです。 function getMai
ReactとCSSで一定時間表示される通知をやるときの色々な方法 - Qiita
フロントエンド、というよりUI一般では、ユーザーの操作に対してまったく無反応なのは良くありません。ユーザーが意味のある操作をしたならば、何らかのフィードバックを返すべきです。 例えば、何かをユーザーのクリップボードにコピーするボタンというのはありがちですが、クリップボードに何かを書き込んでもそれだけだと目に見える変化がないので、追加で「コピーしました」のような通知を出すというのはよくあるパターンです。 ここでは、そのような通知が、ちょっとフェードインしながら表示され、一定時間後にフェードアウトしながら消えていくという要件を想定することにしましょう。 transitionを使う基本的な実装 まずはReactの部分をざっくりお見せします。 import { useState } from "react"; import "./styles.css"; export default functi
【2024年4月1日のTypeScriptニュース】次期バージョンでオブジェクト型に追加される新機能の紹介 - Qiita
本日、2024年4月1日は、TypeScriptの歴史に残る記念すべき日となりそうです。TypeScriptの次期バージョン5.5.555に実装予定の新機能の概要が公開されたのです。 この記事では、本日投稿された以下のissueの内容をかみ砕いて解説します。 Arranged Field Definitionの概要とモチベーション issueのタイトルにもあるように、今回公開された新機能はArranged Field Definition (AFD) と題されています。ここでのarrangedという単語は、「順序に意味がある」という意味に解するのがよいでしょう。つまり、オブジェクト型のフィールド定義において順序まで考慮されるということです。 TypeScriptはJavaScriptに型をつけた言語ですが、JavaScriptではオブジェクトのプロパティに順序があることが知られています。つ
React脳によるUIライブラリ書きやすさランキング - Qiita
前回のおさらい 前回の記事では、Reactに有利なベンチマークでUIライブラリに競ってもらいました。 こういうベンチマークに対しては、「実務では〜」みたいな反応が一定数出てくるのが自然の摂理です。 書きやすさランキング そこで、シリーズのまとめとして、より実務に近い指標として「書きやすさ」で競ってもらおうと思います。ただし、今回は筆者の独断と偏見によるランキングとなります。せっかく6つのライブラリで同じアプリケーションを書いたので、感想を記事にして残しておきたいという意図です。筆者と同じくReact脳の方にとっては参考になるかもしれません。 なお、前の記事を読んだ方はお分かりの通り、今回書いたアプリケーションはコンポーネントが何個かのものであり、React以外の知識は公式ドキュメントを一通り読んだ程度です。したがって、今回のランキングはコンポーネントの書きやすさに着目しています。大規模開発
Reactに有利なベンチマークを作ってみた - Qiita
皆さんこんにちは。現在、フロントエンドでは宣言的UIが大流行しており、そのためのライブラリもReactを筆頭に複数存在しています。 ライブラリが複数存在するところには当然のように比較や論争が起こるものですが、UIライブラリの場合はパフォーマンスがよく焦点となります。 筆者はReactの信者ですが、Reactは古株ということもあってか、最近の議論ではReactは他のライブラリと比較されるかませ犬のような役割を担うのがよく見られます。「仮想DOMは必要ない」といった類のものです。 しかし、筆者の考えではReactは今でも、もっとも真剣にパフォーマンスに取り組んでいるUIライブラリです。特に、Reactはパフォーマンスを高いユーザーエクスペリエンスのための手段として捉えており、ドキュメントにもユーザーエクスペリエンスという言葉が多く出てきます。 そこで、今回はReactが最も有利になるようなベン
TypeScriptのmoduleSuffixesについて考えて納得した - Qiita
みなさんこんにちは。今日は、TypeScriptの新しいコンパイラオプション（おそらく4.7で導入）であるmoduleSuffixesについての話題がTwitterで見られました。 moduleSuffixesについて詳しくはこちらをご参照ください。 これについては、「モジュール解決がさらに複雑化する」などいくつかの方向性から否定的な意見が見られました。しかし、筆者が考えてみたところ、正当性のある機能追加だと納得できたので考えをご紹介します。 3行でまとめると これまで通りランタイムの挙動に影響しないから大丈夫だよ pathsが怖くないならmoduleSuffixesも怖くないよ TypeScriptはJavaScript環境に追随するよ moduleSuffixesとは では、moduleSuffixesはどんなコンパイラオプションなのかという解説をまず少しします。これはTypeScri
useRefでステートを管理するのはReact18でアンチパターンになるからやめよう - Qiita
こんにちは。最近、Reactでのステート管理において「useStateの中にステートを置くのではなく、useRefで得たrefオブジェクトの中にステートを置いてuseState（またはuseReducer）をコンポーネントの再レンダリングを発生させるためだけに使う」というやり方を複数の記事で見かけました。このパターンは、今（React 17以前）は動くけどReact 18でアンチパターンに変貌するやり方なので、啓蒙するためにこの記事を用意しました。 ステート（コンポーネントのレンダリングに使用される値）は、useRefではなくuseState（またはuseReducer）をちゃんと使って管理するようにすれば、React 18以降も安泰です。 useRefをステート管理に使うパターンとは こういうやつです。 // 普通のやり方 const Counter1: React.VFC = () =
React 18に備えるにはどうすればいいの？ 5分で理解する - Qiita
React 18はReactの次期メジャーバージョンで、2021年の6月にalpha版が、11月にbeta版が出ました。また、Next.js 12でもReact 18のサポートが実験的機能として追加されました。React 18の足音がだんだんと我々に近づき、アーリーアダプターではない皆さんの視界にもいよいよReact 18が入ってきたところです。 特に、React 18ではServer-Side Rendering (SSR) のストリーミングサポートが追加されます。現在ReactでSSRを行いたい人の強い味方としてNext.jsが存在しているわけですが、Next.js 12でもReact 18を通してストリーミングの恩恵を受けることができます（Next.jsではSSR Streamingと呼んでいるようです）。また、厳密にはReact 18とは別ですが、React Server Comp
アンサー： なぜ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 の型定義に凝りすぎじゃね？ まず最初に、この記事（以下では元記事と呼びます）の著者を攻撃したり、元記事の内容を否定する意図はないことをご理解ください。結局のところ、考え方が異なり、前提が異なるから異なる結論になっているだけなのです。TypeScriptを使う皆さんがいろいろな観点から見た情報を取得し、自分の状況に応じた適切な
TypeScript 4.0で導入されるVariadic Tuple Typesをさっそく使いこなす - Qiita
今日、Anders HejlsbergさんによってTypeScript 4.0に導入予定の新機能のプルリクエストが出されました。この記事では、この新機能Variadic Tuple Typesを解説します。 ちなみに、現在（この記事の執筆時）のTypeScriptのバージョンは3.9であり、4.0はその次のバージョンです。一見メジャーバージョンアップに見えますが、TypeScriptはsemantic versioningを採用していないため、3.9 → 4.0は特別なリリースというわけではなく、3.8 → 3.9とかと規模は同程度です。 Variadic Tuple Typesの基本 さて、Variadic Tuple Typesは、一言でいえばタプル型の中に...Tと書ける機能です。この構文はよく知られたスプレッド構文のいわば型バージョンであり、あるタプル型の要素たちを別のタプル型に埋
JavaScriptの「継承」はどう定義されるのか？ 仕様書を読んで理解する - Qiita
継承は、クラスベースのオブジェクト指向における基本的な概念のひとつであると信じられています。JavaScriptにもES2015以降はclass構文があり、extendsを用いてクラスの継承を記述することができます。また、それより以前もprototypeを通じてオブジェクト指向的なプログラムが書かれてきました。 この記事では、JavaScriptにおける「継承」がどのようなものであり、どのように定義されるのかを解説します。タイトルにある通り、今回はECMAScript仕様書に対する解説を中心とします。 仕様書はJavaScriptというプログラミング言語がどのようなものかを定義する文書であり、あなたが書いたJavaScriptプログラムは仕様書に書かれた通りの動きをすることになります1。したがって、たとえあなたが自分自身で書いたものだったとしても、JavaScriptプログラムの意味を完全
JavaScriptの ~. 構文って知ってる？ Promise Pipeliningが拓く非同期処理の未来 - Qiita
PromiseはES2015からJavaScriptに導入された機能で、非同期処理をいい感じに記述できるたいへんありがたいオブジェクトです。実は、Promiseの強化版ともいえる新機能、その名もHandledPromiseが提案されています。また、このHandledPromiseのための新構文~.も同時に提案されています。 例えば、~.を用いて次のようなプログラムを書くことができます。 この記事では、HandledPromiseと~.について概説します。例によって、これらはStage 1プロポーザルです。つまり、「こういうのがあってもいいんじゃない？」と思われている段階であり、具体的な方向性とかは何一つ決まっていないということです。この記事でお伝えするのは現段階での構想であり、当然ながらまだJavaScriptに正式採用されたものではありません。何年後かにこの機能が採用されたときに全然別の
TypeScriptはgradual typingシステムか - Qiita
概要 TypeScriptは，動的型付けシステムであるJavaScriptに静的型システムによる検査を部分的に導入できるプログラミング言語であり，gradual typing （漸進的型付け）システムであるとされることがあります．Siekらは，動的型付けと静的型付けの融合を図るシステム全般が無闇にgradual typingを名乗ることを疑問視して，gradual typingシステムが満たすべき基準を提案しました．本稿では，この基準に照らしてTypeScriptがgradual typingの条件を満たしていないことを指摘します．特に，ランタイムの型チェックを行わないというTypeScriptのデザインが，gradual typingの意味での健全性を明らかに阻害しています． 1 背景 ソフトウェア開発が大規模化する状況において，コード品質の担保や開発速度の維持は重要な課題です．静的型付
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2021年のTypeScript環境構築で絶対入れるべき「better-typescript-lib」の紹介 - Qiita
TypeScriptのunion型はorです 〜union型、構造的部分型、余剰プロパティチェックの話〜 - Qiita
TypeScriptの型レベル連結リスト活用術：型を変えられるコンテナを作る - Qiita
TypeScriptのreadonlyプロパティを使いこなす - Qiita