公式 - Error Boundary error boundary は自身の子コンポーネントツリーで発生した JavaScript エラーをキャッチし、エラーを記録し、クラッシュしたコンポーネントツリーの代わりにフォールバック用の UI を表示する React コンポーネント クラスコンポーネ…

Suspenseとは、React 18から追加された機能で、Suspenseを使用することで、その配下のツリーにレンダーする準備ができていないコンポーネントがあるときに表示するローディングインジケータを指定できる 例 使用前 import { useQuery } from 'react-query' e…

外部からデータを受け取る場合、アプリが停止することを防ぐためにデータの型をチェックする必要がある typeof演算子やin演算子の他、ユーザー定義型ガードを利用することでチェックできる 例 { "setting1": 1, "setting2": "a" } import * as data from "./…

型アサーションとは、TypeScriptのコンパイラがコードから推論した型を開発者が上書きすること 例 使用前 let value = {} value.name = "logosware" // error TS2339: Property 'name' does not exist on type '{}' 使用後 type User = { name: string } // …

双方向データバインディング テンプレートとデータオブジェクトの双方向のデータを反映することを双方向データバインディングと呼ぶ 以下のソースコードではテキストボックスに入力された名前に応じて「こんにちは、○○さん！」という挨拶を表示する ※v-model…

Vueではhtmlに対してディレクティブと呼ばれる属性形式の命令を付与することで、ページに機能を付与している <a v-bind: href="url">...</a> ディレクティブは用途に応じて以下のように分類できる 分類 概要 主なディレクティブ データバインド 式の値をページに反映 v-bind, v-htmlな…

Vueクラスのdataオプションに登録されたデータは変更があれば自動的にページに反映される 以下のコードを実行すると現在時刻が表示され、1秒毎に更新される <div id="app"> <p>現在時刻：{{ current.toLocaleString() }}</p> </div> new Vue({ el: "#app", data: { // 現在時刻 current:…

Vue.jsの基礎となる3つのしくみについて書いていく ディレクティブ 算出プロパティおよびメソッド ライフサイクルフック 1. ディレクティブ テンプレートに属性やスタイルの操作、条件分岐、繰り返し処理など、より複雑な機能を組み込みたい場合は、ディレク…

JavaScriptフレームワークのVueについて勉強し始めたのでメモ Vueの特徴 コンポーネント指向 仮想DOMを利用している ルーティングやグローバルの状態管理は関連ライブラリに担当させている プログレッシブに導入できる 導入方法（選択肢は3つ） CDN経由でラ…