サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
掃除・片付け
qiita.com/uhyo
Q. なぜJavaScriptのDateコンストラクタは例外を投げないのか? A. NaNがあるから DateはJavaScriptで日時を扱うためのAPIで、JavaScriptの当初から存在します。 Dateオブジェクトは主にDateコンストラクタを用いて作られます。Dateコンストラクタにはいろいろな機能があり、new Date()のように引数なしで呼び出すと現在時刻を取得できるほか、new Date("2020-04-24T00:00+09:00")のように文字列から日時に変換したり、new Date(1587654000000)のように数値(UNIX時間)を日時に変換したりすることができます。 一般に、データの変換作業には失敗が付き物です。しかし、new Dateは決して失敗しません1。例えば、new Date("foobar")のように明らかに日時を表していない文字列からDat
この記事は「Concurrent Mode時代のReact設計論」シリーズの6番目の記事です。 シリーズ一覧 Concurrent Mode時代のReact設計論 (1) Concurrent Modeにおける非同期処理 Concurrent Mode時代のReact設計論 (2) useTransitionを活用する Concurrent Mode時代のReact設計論 (3) SuspenseやuseTransitionが何を解決するか Concurrent Mode時代のReact設計論 (4) コンポーネント設計にサスペンドを組み込む Concurrent Mode時代のReact設計論 (5) トランジションを軸に設計する Concurrent Mode時代のReact設計論 (6) Concurrent Modeと副作用 Concurrent Mode時代のReact設計論 (
この記事は「Concurrent Mode時代のReact設計論」シリーズの5番目の記事です。 シリーズ一覧 Concurrent Mode時代のReact設計論 (1) Concurrent Modeにおける非同期処理 Concurrent Mode時代のReact設計論 (2) useTransitionを活用する Concurrent Mode時代のReact設計論 (3) SuspenseやuseTransitionが何を解決するか Concurrent Mode時代のReact設計論 (4) コンポーネント設計にサスペンドを組み込む Concurrent Mode時代のReact設計論 (5) トランジションを軸に設計する Concurrent Mode時代のReact設計論 (6) Concurrent Modeと副作用 Concurrent Mode時代のReact設計論 (
この記事は「Concurrent Mode時代のReact設計論」シリーズの2番目の記事です。 シリーズ一覧 Concurrent Mode時代のReact設計論 (1) Concurrent Modeにおける非同期処理 Concurrent Mode時代のReact設計論 (2) useTransitionを活用する Concurrent Mode時代のReact設計論 (3) SuspenseやuseTransitionが何を解決するか Concurrent Mode時代のReact設計論 (4) コンポーネント設計にサスペンドを組み込む Concurrent Mode時代のReact設計論 (5) トランジションを軸に設計する Concurrent Mode時代のReact設計論 (6) Concurrent Modeと副作用 Concurrent Mode時代のReact設計論 (
Concurrent Mode時代のReact設計論 (3) SuspenseやuseTransitionが何を解決するか この記事は「Concurrent Mode時代のReact設計論」シリーズの3番目の記事です。 シリーズ一覧 Concurrent Mode時代のReact設計論 (1) Concurrent Modeにおける非同期処理 Concurrent Mode時代のReact設計論 (2) useTransitionを活用する Concurrent Mode時代のReact設計論 (3) SuspenseやuseTransitionが何を解決するか Concurrent Mode時代のReact設計論 (4) コンポーネント設計にサスペンドを組み込む Concurrent Mode時代のReact設計論 (5) トランジションを軸に設計する Concurrent Mode時代
Concurrent Modeは、現在(2020年3月)実験的機能として公開されているReactの新しいバージョンです。Reactの次のメジャーバージョン(17.x)で正式リリースされるのではないかと思っていますが、確証はありません。なお、React公式からもすでに結構詳細なドキュメントが出ています。 並列モードの導入(実験的機能) Concurrent Modeに適応したアプリケーションを作るためには、従来とは異なる新しい設計が必要となります。筆者はConcurrent Modeを使ったアプリケーションをひとつ試作してみました。この記事から始まる「Concurrent Mode時代のReact設計論」シリーズでは、ここから得た知見を共有しつつ、Concurrent Mode時代に適応したReactアプリケーションの設計を提案します。 なお、Concurrent Modeはまだ正式リリース
今時のJavaScript開発において、JavaScriptが持つモジュールの機能は欠かすことができません。我々はプログラムをいくつものファイル(モジュール)に分割し、import文とexport文を使ってそれらを繋げています。各モジュールはexport文を用いてそのモジュール内で定義した変数・関数などをエクスポートすることができ、別のモジュールがimport文でそれらの値を取得することができるのです。 皆さんは、このimport・export文がどのように働いているのか正確に説明できるでしょうか。実は、import文やexport文というのは値をインポート・エクスポートしているのではなく、言わば変数そのものをインポート・エクスポートしているのです。これを理解するのがこの記事のゴールです。 ※ 本当は変数ではなく「バインディング」といったほうが用語としてより正確なのですが、この記事では分か
JavaScriptプログラムの基本的な構成要素のひとつが演算子です。多くの方が普段のJavaScriptプログラミングで演算子を使っているでしょう。 では、あなたは「演算子とは何か」という問いに答えられますか? 演算子と演算子以外の違いはどこにあるのでしょうか? 演算子とは何かという定義は、人によって考え方が違うでしょう。筆者の個人的な考えとしては、演算子は「1つ以上の式から別の式を構成する構文を特徴づけるトークン」であると考えています。 しかし、JavaScriptには仕様書があります。仕様書はJavaScript (ECMAScript) に関する最も信頼できる情報源ですから、何が演算子で何が演算子でないのかについてもたいへん強力な基準を与えてくれることが期待できます。 そこで、この記事では何が仕様書で演算子と呼ばれているのかについて全て解説します。併せて、演算子っぽいけど演算子とは
先日、TypeScript 3.8 RCが公開されました。TypeScript 3.8はクラスのprivateフィールド(#nameみたいなやつ)を始めとして、ECMAScriptの新機能のサポートがいくつか追加されています。この記事で取り扱うtop-level awaitもその一つです。 この記事ではtop-level awaitに焦点を当てて、その意味や使い方について余すところなく解説します。top-level awaitは一見単純な機能に見えますが、実はモジュール (ES Modules) と深い関係があり、そこがtop-level awaitの特に難しい点です。そこで、この記事ではECMAScriptのモジュールについても詳しく解説します。この記事を読んでtop-level awaitを完全に理解して備えましょう。 ※ この記事は3分の1くらい読むと「まとめ」があり、残りはおまけで
皆さんこんにちは。この記事では、TypeScriptにおいて型レベル連結リストが役に立つ一例をご紹介します。当初以下のように練習問題の形でツイートしたところ、型レベル連結リストを用いる想定解にたどり着いた方がいました。おめでとうございます。 TypeScript練習問題: このようなContainer型をつくれ(ぇ https://t.co/zq25GiXDM2 pic.twitter.com/llveS6MCjG — 🈚️うひょ🤪✒📘 (@uhyo_) February 1, 2020 型レベル連結リストとは 連結リストはリストの表現方法の一種です。連結リストではリストの各要素が「自身の値」と「次の要素への参照」(あるいは次の要素そのもの)を保持しています。リストの各要素には、先頭要素から順番にたどることでアクセスできます。 型レベル連結リストでは、連結リストの構造を型として表現し
TypeScriptでは、オブジェクト型のプロパティをreadonlyにできる機能があります。型でreadonlyと宣言されているプロパティを書き換えようとするとコンパイルエラーとなります。 type MyObj = { readonly foo: string; }; const obj: MyObj = { foo: "Do not change me!" }; // これは MyObjのfooプロパティがreadonlyなのでコンパイルエラー obj.foo = "hi";
React Hooksの正式リリース(2019年2月)からそろそろ一年が経とうとしています。Hooksの登場によってReactのコンポーネントは関数コンポーネントが一気に主流になり、クラスコンポーネントが新規に作られる機会は激減しました。 また、React 17.x系ではConcurrent Modeの導入とともにさらに2種類の新フックが追加される見込みであり、いよいよ関数コンポーネントの能力がクラスコンポーネントを真に上回る時代が来ることになります。 この記事では、フックの一種であるuseReducerに焦点を当てて、どのようなときにuseReducerが適しているのかを説明します。究極的には、useReducerによって達成できるパフォーマンス改善があり、ときにはそれがコンポーネント設計にまで影響を与えることを指摘します。 useStateの影に隠れたり、なぜかReduxと比較されたり
Help us understand the problem. What are the problem?
継承は、クラスベースのオブジェクト指向における基本的な概念のひとつであると信じられています。JavaScriptにもES2015以降はclass構文があり、extendsを用いてクラスの継承を記述することができます。また、それより以前もprototypeを通じてオブジェクト指向的なプログラムが書かれてきました。 この記事では、JavaScriptにおける「継承」がどのようなものであり、どのように定義されるのかを解説します。タイトルにある通り、今回はECMAScript仕様書に対する解説を中心とします。 仕様書はJavaScriptというプログラミング言語がどのようなものかを定義する文書であり、あなたが書いたJavaScriptプログラムは仕様書に書かれた通りの動きをすることになります1。したがって、たとえあなたが自分自身で書いたものだったとしても、JavaScriptプログラムの意味を完全
この記事では、HandledPromiseと~.について概説します。例によって、これらはStage 1プロポーザルです。つまり、「こういうのがあってもいいんじゃない?」と思われている段階であり、具体的な方向性とかは何一つ決まっていないということです。この記事でお伝えするのは現段階での構想であり、当然ながらまだJavaScriptに正式採用されたものではありません。何年後かにこの機能が採用されたときに全然別の見た目になっていたとしても、悪しからずご了承ください。 この記事は以下の2つのプロポーザルを基に書かれています。 HandledPromise proposal-wavy-dot また、このPolyfillも参考になるでしょう。 https://www.npmjs.com/package/@agoric/eventual-send HandledPromiseの意義 ざっくりと言えば、H
皆さんこんにちは。この記事では、TwitterのPlayer cardを用いてツイートにスーパー正男のプレイ動画(?)を埋め込めるようにした話をしようと思います。 この記事はスーパー正男Re同盟 年越しカレンダー2019-2020 の10日目の記事です。 ツイートに載せるには このプレイログもなかなかインパクトがあるな(ぇ 裏技ステージなので理解が難しいのが難点だが(ぇ https://t.co/ilSE3SZJHA — 🈚️うひょ🤪 (@uhyo_) January 1, 2020 ↑プレイ動画(?)を埋め込んだツイートの例。Web版Twitterならツイートのなかでプレイ動画(?)を再生できます。Qiitaに埋め込んだツイート経由でもそのままプレイ動画(?)を再生できて大変よいですね。 背景 スーパー正男は福田直人さんによって開発された同人ゲームで、ジャンルは2Dアクションです。当
オブジェクトリテラル内のスプレッド構文は、ES2018で追加されたたいへん便利な構文です。特に、{ ...obj }という形のコードでオブジェクトをコピーするのはJavaScriptプログラミングでは極めて頻出です。 スプレッド構文が無かった時代はObject.assign({}, obj)として同様のことを達成していた方も多いと思われます。Object.assignはES2015から使用可能でした。 では、この2種類の方法は同じでしょうか。タイトルにもある通り、もちろん違います。今回は、この違いに触れている日本語資料がMDN日本語版で一瞬触れているくらいしか無かったので記事にまとめました。 結論 最初に結論を述べると、Object.prototypeが汚染されていた場合にのみ違いが発生します。特に、Object.prototypeにsetterを持つプロパティ名が存在し、そのプロパティ名
概要 TypeScriptは,動的型付けシステムであるJavaScriptに静的型システムによる検査を部分的に導入できるプログラミング言語であり,gradual typing (漸進的型付け)システムであるとされることがあります.Siekらは,動的型付けと静的型付けの融合を図るシステム全般が無闇にgradual typingを名乗ることを疑問視して,gradual typingシステムが満たすべき基準を提案しました.本稿では,この基準に照らしてTypeScriptがgradual typingの条件を満たしていないことを指摘します.特に,ランタイムの型チェックを行わないというTypeScriptのデザインが,gradual typingの意味での健全性を明らかに阻害しています. 1 背景 ソフトウェア開発が大規模化する状況において,コード品質の担保や開発速度の維持は重要な課題です.静的型付
社長「やめ太郎くん」 ワイ「なんでっか社長、ワイは今Reactのアプリを半分だけVueに書き換える作業で忙しいんでっせ」 ハスケル子「(何でそんな意味不明なことを……)」 社長「せやったな、これからはVueの時代やからVueの使用実績を増やさなあかんねん」 ワイ「とはいえReactも今年公式ドキュメントの日本語版が出たり勢いづいとるから捨てがたい」 社長「せやから半々にしてどっちも取り入れるんや! 素晴らしい施策やろ!」 ワイ「さすが社長!」 ハリー先輩「(案件を半々にするんちゃうのかい!)」 ハスケル子「(私は何でこんな所でインターンしているんだろう)」 ※ この記事は全面無職やめ太郎さんリスペクトのワイ記法でお送りする二次創作記事です。(6ヶ月ぶり3回目) Reactでアニメーションを実装したい 社長「さて、今回はアプリにいい感じのアニメーションを追加してもらいたいんや。これからはUX
この表を上から読みつつ多少言葉で説明すると以下のようになります。 const foo = bar + 3;はStatementListItemである。なぜなら、DeclarationはStatementListItemの一種であると定義されているから。 const foo = bar + 3;はDeclarationである。なぜなら、LexicalDeclarationはDeclarationの一種であると定義されているから。 const foo = bar + 3;はLexicalDeclarationである。なぜなら、LetOrConst, BindingList, ;が並んだものはLexicalDeclarationであると定義されているから。 constはLetOrConstであると定義されている。 foo = bar + 3 はBindingListである。LexicalBind
🎊Reactの2種類の新フック「useTransition」と「useDeferredValue」を最速で理解する(プレビュー版)JavaScriptReact 10月25日、Reactの新機能であるConcurrent Modeのプレビュー版が発表されました。この中には、Concurrent Modeの恩恵を得るために必要となる新しいAPIが含まれています。 これらのAPIの中心となるのが、Suspenseと2種類の新しいフックuseTransitionとuseDeferredValueです。この記事ではこの2種類のフックに焦点を当てて、これらが何をしてくれるのか、どのようにこれらが新しいのかを解説します。 要するに、Reactの公式ドキュメントを読んでまとめましたということです。特に、ガイドを一通り読んで理解しないとこれらのフックが何をしているのか理解しにくいため、最速で理解できるよ
みなさん、Optional Chaining使ってますか? 私は先日出たTypeScript 3.7 Betaを小さいプロジェクトに導入して使ってみました。これはとても快適ですね。 例によって、Optional ChainingはECMAScriptに対するプロポーザルの一つです。つまり、もうすぐ入りそうなJavaScriptの新機能です。プロポーザルはたくさんの種類がありますが、その中でもOptional Chainingはその高い有用性からこれまで多くの注目を集めてきました。Optional Chainingは2019年6月のTC39ミーティングでStage 3に上昇し、いよいよ正式採用が近く期待も高まってきたところです。TypeScript 3.7にも導入されたため、TypeScriptユーザーの方々は11月上旬に正式リリースが予定されているTypeScript 3.7を今か今かと待
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を使う場合安全性を保証する責任はコ
ほとんどの方が🤔という顔をしているかと思いますので、何をやっているのか理解するためにJavaScriptにざっくりと翻訳したバージョンを載せておきます。inputは標準入力の内容だと思ってください。 const line = input.split('\n')[0]; const ints = line.split(' ').map(x => parseInt(x, 10)); const prod = ints.reduce((a, b) => a * b); console.log(["Odd", "Even"][(prod - 1) % 2]); さすがコードゴルフ用言語だけあって、JavaScriptバージョンに比べて随分短いですね。 とはいえこれだけ見てもJellyを知らない方には何が何だか分からないと思いますので、上のJellyプログラムを順番に解説していきます。 まず、Je
posted articles:JavaScript:61%TypeScript:38%ECMAScript:28%React:22%dom:3%
この記事で紹介しているExplicit Resource Managementでは、もはやtry-using文は無くなりました。この記事の内容は最新の情報ではありませんのでご注意ください。 最新のプロポーザルでは、using const文やusing await const文が使われることになっています。(2021年10月) リソース管理というのはプログラミングにおける頻出課題のひとつです。そもそもリソースとは何かというのは人によって思い浮かべるものが違うかもしれませんが、ここでいうリソースは「使ったらちゃんと後始末(解放)をしないといけないもの」だと思ってください。今時はピンと来ない方もいるかもしれませんが、「ファイルをopenしたらちゃんとcloseする」とかおおよそそういう話です。 このようなリソースは、一度使おうものならその後何が起ころうとも必ず後始末をしないといけません。たとえ使
イテレータは今となっては多くのプログラミング言語に存在する概念で、繰り返し処理やループ、ストリームといった対象を抽象化してくれるものです。JavaScriptにはES2015でイテレータが追加されており、JavaScriptを触っている方にとっては既に馴染み深いものとなっています。 とはいえ、JavaScriptのイテレータにはひとつ問題点がありました。それは「イテレータを直接変換・操作できるメソッドが存在しない」という点です。従来イテレータが持つメソッドはイテレータから一つ値を取り出すnextメソッドのみであり1、それ以上の機能は何も提供されていませんでした。これにより、Rustなどのイテレータが強い言語に比べてJavaScriptのイテレータは有用性が大幅に低いものとなっていました。 この記事では、この問題を多少解消するプロポーザル「Iterator Helpers」を紹介します。これ
DOMはHTMLの木構造(あとXMLも)やイベント等をプログラムから操作するためのAPIです。DOMの実装者として有力なのがウェブブラウザであり、ブラウザが提供するDOMのAPIを用いてJavaScriptプログラムからウェブページを制御するというのがDOMの極めてメジャーな使い道です。 近年知名度を増してきたReactやVueなどのライブラリも、もちろんこのDOMを用いて実装されています(Reactだとreact-domというあからさまな名前のパッケージがDOMを扱う部分を担当しています)。 この記事では、DOMで提供されるAPIを用いて木構造にノードを挿入する方法全38種類を列挙します。 ノードの挿入とは DOMにおいて基本的な操作のひとつがノードの挿入です。ノードというのは木構造の最小構成単位であり、要素ノードやテキストノードなどの種類があります。例えば<u>は</u>というのはu要
const arr1 = [1, 2, 3]; const arr2 = [...arr1, 4, 5]; func(...arr1, ...arr2); また、ES2018からはオブジェクトの中でも...が使えます。 当初この...を「スプレッド演算子」(spread operator)と呼ぶ向きがありましたが、よく見るとこれは全然演算子ではありませんね。 演算子の定義は人によって異なるかもしれませんが、「いくつかの式から式を作る働きをする構文」というのが一般に受け入れられている定義だと思います。例えばx + 1という式は、xという式と1という式を+で繋げる事でx + 1という式を得ています。この働きをする+が演算子です。 こうしてみると、...は式を作るのではありません。つまり、const arr2 = ...arr1;のようなものは受け付けられないということです。...が使えるのは配
次のページ
このページを最初にブックマークしてみませんか?
『@uhyoのマイページ - Qiita』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く