全てのコンテンツ

React

【React】Suspenseでデータ取得中に、Loading…を表示する

Suspense を使うと、データ取得中にスピナーや Loading…などを表示することができます。 JSON Placeholder( https://jsonplaceholder.typicode.com/ )からデータを取得中に、Loading…

続きを読む
2022年06月29日1 分
React

【React】React18の新機能である自動バッチを試す

React18では、自動バッチ機能が搭載されました。 React17までは、promiseやsetTimeout、イベント内の更新でバッチ処理がされていませんでした。 例えば、React17で以下のコードを実行し、一回ボタンをクリックすると、 console.logが…

続きを読む
2022年06月28日1 分
HTML&CSS

【HTML&CSS】上部を固定した表をスクロールすると、線が消えてしまう問題を解消する

table で表を作成した時、表の上部を固定するために、 thead タグに position: stickey; を設定しました。 このままでは、枠線が二重線になるので、 table に border-collapse: collapse…

続きを読む
2022年06月22日1 分
Flutter

【Flutter】背景をグラデーションで表示する

Flutterで背景をグラデーションで表示します。 まずは、 AppBar に flexibleSpace を追加します。 また、 flexibleSpace に Container を設定します。 Container 内で、 decoration の BoxDecoration…

続きを読む
2022年06月19日1 分
HTML&CSS

【HTML&CSS】数字の入力欄に出てくる上下のアイコンを削除する

フォームを作成している時、数字の入力欄を作成すると、上下のアイコンが出てきます。 こちらのアイコンを削除するには、CSSで以下の内容を追加します。 画面を確認すると、

続きを読む
2022年06月17日1 分
JavaScript

【JavaScript】デバッガーを使って、コードの実行を追跡する方法

デバッガーを使うと、コードがどのように実行され、どの値を返しているかがわかるようになります。 以下のコードがあるとします。 こちらのコードに debugger を追加します。 Chrome…

続きを読む
2022年06月13日3 分
Shopify

【Shopify】商品購入画面に備考欄を追加する

Shopify の商品購入画面で、数量の下に備考欄を追加します。 デフォルトでは、設定がないので、Liquid に備考欄のコードを追加します。 Shopify のテーマは、Dawn を使用しています。 まずは、Shopify UI Elements Generator…

続きを読む
2022年06月10日3 分
React

【React】React QueryでAPIから特定のデータを取得する

前回は、React Queryでキャッシュを設定します。 今回は、React QueryでAPIから特定のデータを取得します。 JSON Placeholder( https://jsonplaceholder.typicode.com/ )からPost…

続きを読む
2022年06月06日3 分
React

【React】React Queryでキャッシュを設定する

前回は、ReactQueryDevtools を使って、React Query の状態を確認しました。 今回は、React Query でキャッシュを設定します。 React Query…

続きを読む
2022年06月05日1 分
React

【React】ReactQueryDevtoolsを使って、React Queryの状態を確認する

前回は、React Queryを使って、APIを取得しました。 今回は、ReactQueryDevtoolsを使って、React Queryの状態を確認します。 まずは、 react-query/devtools から ReactQueryDevtools…

続きを読む
2022年06月04日1 分