TypeScript wayでReactを書く - Qiita
TypeScriptはJavaScriptに静的型による型チェックを加えた言語で、Microsoftによって開発されています。TypeScriptの登場以降その人気上昇は留まるところを知らず、Webアプリの開発に採用される例も増えているようです。TypeScriptはJavaScriptと同じ構文・言語機能を持ち、唯一の違いは型がある点、つまり型が書けて型チェックがあるというところです1。 また、ReactはJavaScript向けのUIライブラリで、HTML要素やコンポーネントを第1級オブジェクトとして扱いUIを構築するスタイルが特徴的です。こちらはFacebookが開発しています。 この最高のプログラミング言語（個人の感想です。）に最高のライブラリ（個人の感想です。）を組み合わせるのがWebアプリ開発におけるまさに唯一無二の解であることはかけらも疑う余地が無いのですが（個人の感想です。
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を使う場合安全性を保証する責任はコ
TypeScriptで | を使わずにユニオン型を得る方法大全 - Qiita
ユニオン型は、string | numberのような記法で「stringまたはnumber」のような意味の型を作る方法です。TypeScriptプログラミングではユニオン型は非常に便利で、様々なインターフェースを的確に型で表現するためには欠かせない道具です。 ユニオン型を得るためには上の例のように|記法を使いますが、この記事では|と書かずに型推論を用いてユニオン型を得る方法を集めてみました。 構文系 JavaScriptの構文の意味から型推論でユニオン型が推論される系です。 条件分岐 条件分岐の構文では、ランタイムの条件によって結果が変わるため、コンパイル時には結果がどちらに分岐するか分かりません。そのため、TypeScriptコンパイラはどちらでも対処できるようにユニオン型を推論します。 条件演算子
TypeScriptで最低一つは必須なオプションオブジェクトの型を作る - Qiita
document.addEventListener('touchend', handler, { once: false, passive: true, }); この例では第3引数でオプションたちをオブジェクトにまとめて渡しています。 オプションたちは往々にして省略可能です。 さて、TypeScriptでもこのようなオブジェクトに型をつけることは容易です。TypeScriptにはオブジェクトの省略可能なプロパティを意味する?が備わっているからです。 この例では、Options型の3つのプロパティは全て省略可能です。そのため、{capture: false, once: true, passive: false}や{passive: true}、あるいは{}などは全てOptions型がつきます。 この記事ではもう少し複雑な場合を考えます。オプションのうち、「どれか一つは必須でほかは省略可能」
TypeScriptのreadonlyプロパティを使いこなす - Qiita
TypeScriptでは、オブジェクト型のプロパティをreadonlyにできる機能があります。型でreadonlyと宣言されているプロパティを書き換えようとするとコンパイルエラーとなります。 type MyObj = { readonly foo: string; }; const obj: MyObj = { foo: "Do not change me!" }; // これは MyObjのfooプロパティがreadonlyなのでコンパイルエラー obj.foo = "hi";
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するということ自体に焦点
全部言えたらDOMマスター！ HTML+DOMでノードを挿入する方法大全 - Qiita
DOMはHTMLの木構造(あとXMLも）やイベント等をプログラムから操作するためのAPIです。DOMの実装者として有力なのがウェブブラウザであり、ブラウザが提供するDOMのAPIを用いてJavaScriptプログラムからウェブページを制御するというのがDOMの極めてメジャーな使い道です。 近年知名度を増してきたReactやVueなどのライブラリも、もちろんこのDOMを用いて実装されています（Reactだとreact-domというあからさまな名前のパッケージがDOMを扱う部分を担当しています）。 この記事では、DOMで提供されるAPIを用いて木構造にノードを挿入する方法全38種類を列挙します。 ノードの挿入とは DOMにおいて基本的な操作のひとつがノードの挿入です。ノードというのは木構造の最小構成単位であり、要素ノードやテキストノードなどの種類があります。例えば<u>は</u>というのはu要
TypeScriptコンパイラ入門 (1) エラーメッセージを改善しよう - Qiita
皆さん、TypeScript使ってますか？ TypeScriptはオープンソースで開発されているプログラミング言語であり、JavaScriptプログラミングに静的型による安全性をもたらしてくれます……という説明は、おそらくこの記事を開いたみなさんには今さらでしょう。 TypeScriptはOSSであり、我々ユーザーがPull Requestを送って開発に貢献することができます。筆者はこの前のゴールデンウィークに初めてのPRをTypeScriptに送って数時間くらいでマージされました。これは先日リリースされたTypeScript 3.5に含まれています。 このとき初めてTypeScriptコンパイラのソースコードをじっくり読んでおり、それが筆者が最近書いた別記事TypeScriptの型推論詳説の執筆にも役立っています。 皆さんにもぜひTypeScriptへの貢献をおすすめしたく、その手引とし
TypeScriptで超型安全なBuilderパターン - Qiita
Builderパターンとは、オブジェクトを作る際にBuilderオブジェクトを用いるデザインパターンです。Builderオブジェクトは各パラメータを設定するメソッドを持ちます。必要なだけメソッドを呼び出してパラメータを設定し、最後にオブジェクト生成メソッドを呼び出すことで目的のオブジェクトを得ます。イメージとしてはこんな感じです。 const obj = (new FooBarBuilder) .foo(123) .bar("456") .build(); /* { foo: 123, bar: "456", } */ console.log(obj); この例では、FooBarBuilderオブジェクトがBuilderオブジェクトです。典型的にはBuilderオブジェクトのメソッドはメソッドチェーンの形で呼び出せるようになっており、foo, bar, buildはFooBarBuilde
今からでも間に合う！ JavaScriptのWake Lock APIの使い方
2019/05/28 追記： Wake Lock APIの仕様が大幅に変更されたので、この記事は役に立たなくなりました。改稿をお待ちください。 近頃、PWAに代表されるような、ブラウザアプリのモバイル端末への進出が進んでいることは皆さんご存知かと思います。とはいえ、ネイティブアプリに比べると、ブラウザ上で動くJavaScriptにできることは限られています。現在、それを補うために、JavaScriptから使用することができる様々なAPIが次々と策定されています。この記事で紹介するWake Lock APIもその1つです。 Wake Lockという言葉は、ネイティブアプリ開発をしている方なら知っている言葉かもしれません。これは、要するにほっといても画面が勝手に消えない機能です。 スマートフォンのような端末は、一定時間触らないでいると画面が消えてアプリ等の動作も止まるのが普通です。しかし例えば
今からでも追いつける！ JavaScriptの「標準ライブラリ」を学ぶ - Qiita
標準ライブラリは、大ざっぱに言えばプログラミング言語に標準で備え付けられている機能群です。多くのプログラミング言語では、形態は様々ですが何らかの形で標準ライブラリが備え付けられています。標準ライブラリはプログラミング言語の一部であり、言語のバージョンアップに伴って標準ライブラリに機能が追加されることは良くあります。 この記事ではJavaScriptにおける「標準ライブラリ」がどんなものなのか、その歴史的経緯なども交えながら解説します。「標準ライブラリ？ 何それ」という方も「そんなの基本だろｗ解説されなくても分かるわｗ」という方もぜひ一読していってください。 なお、記事執筆時点では標準ライブラリに関することは何一つとして標準化が完了しておらず、内容が今後大きく変化する可能性が十分にあります。この記事で概要を理解したあと、いざ使用する際にはご自分で最新の情報を調べたほうがよいでしょう。 お詫び
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
