async/await

こんにちは！ スマレジ テックファームのMichiです！ この記事は、『JavaScriptの非同期処理についてまとめてみた①』の続きになります。 前回のおさらい Promise 完成形 解説 でも、まだちょっと分かりにくくない…？ async/await 完成形 解説 まとめ 前回のおさらい さて、前回はsetTimeout関数を利用して、「5、4、3、2、1、0」のように1秒ずつカウントダウンする処理を作った結果、地獄のようなコードが生まれたのでした。 console.log('開始') setTimeout(() => { console.log(5); setTimeout(() =>…

useEffectとは 暗黙のリターン useEffectでのasync/await 最後に React.jsでは副作用を処理するためのフックが２つございます。 ・ useEffect ・ useLayoutEffect これらの主な違いは、詳しくは解説致しませんが、全ては実行時のタイミングです。 簡単に言ってしまえば、非同期なのか同期処理なのかです。 以下で、解説しておりますので参照下さい。 dev-k.hatenablog.com useEffectとは useEffectフックは２つの引数を受け入れます。 useEffect(() => { // Mounting return () =…

最近SwiftConcurrencyに既存プロジェクトを置き換えたりする中で色々と調べたので備忘録として書き残します。 主にasync/await, Async(Throwing)Stream, Taskについての記事になります。 async/awaitの基本的な使い方 asyncとawaitについて asyncはメソッドが非同期作業を実行することを明確にするメソッド属性です。 例としてAppleが提供しているTask型のstaticメソッドsleepなどがあります。 public static func sleep(nanoseconds duration: UInt64) async th…

はじめに Fetchメソッド ReactフックでFetchAPIとPromisesの使用 async関数の作成 ReactでAPIからユーザーデータを取得して表示する方法 条件付きtryブロックのエラー処理 他のReact開発者たちから悲鳴を聞かないために知っておきたいポイント 最後に はじめに React開発者の皆さん、こんにちは！本日はuseEffectフックとasync関数の適切な使い方についてお話しします。これらの機能を理解し、正しく活用することで、より効果的なコーディングが可能になりますので、是非参考にしてみてください。 以前の記事では、Reactフックを利用してFetchメソッドを…

こんにちは、FAANS部の中島 (@burita083) です。2021年10月に中途入社し、FAANSのiOSアプリの開発を行なっています。 FAANSの由来は「Fashion Advisors are Neighbors」で、「ショップスタッフの効率的な販売をサポートするショップスタッフ専用ツール」です。現在正式リリースに向けて、WEARと連携したコーディネート投稿機能やその成果を確認できる機能など開発中です。 はじめに FAANS iOSでは非同期処理にCombineを利用しています。Combine自体は本記事では詳しく解説をしませんが、RxSwiftを利用したことがある方なら特に違和感…

祝 .NET 6 GA アドベントカレンダー、23日の記事になります。 .NET 6 のリリースに伴い、C# の言語バージョンがついに 10.0 となりました。 C# の進化は早く、ちょっと気を抜いている隙に、見たことのない書き方のコードがどんどん出現します。 その一方で、業務の現場では、5年前10年前に書かれたソースコードを保守することも決して珍しくありません。 新しいコードでも古いコードでも、「なんだっけこれ？」という書き方がでてきたときに、同じことを従来の書き方／現在の書き方でどうやるかのリファレンスにできるよう、主要な機能・構文ごとに縦断的に整理してみました。

下記ブログへ移行しました。 octomblog.com

Vue.jsを使って以下のようなボタンクリック方式のシンプルなページャーを作成したのでメモ📝 以下のような感じでボタンクリックの度にサーバー側に/feeds?page=1のようなリクエストを送信して結果を元に処理を行うことができます。 <template> <div class="collection"> <p v-for="feed in feeds">{{ feed.title }}</p> <div class="button-pager"> <span v-if="status === 'complete'" class="button-pager__loader-info">全て読み…

問題のコード Jestでテストしたかったのは、TypeScriptでfetch()を使った簡単な関数。 export function getData(): Promise<Profile> { return fetch("https://jsonplaceholder.typicode.com/users").then(handleResponse); } 事象に直接は関係ないけど、テストコードはこんな感じ。 test("データ取得成功", async () => { await expect(getData()).resolves.toHaveLength(10); }); npm tes…

最近は、こちらの本でフロントエンドのテストについて勉強しています。テストって書いた方がいいんだろうな〜と思いながらもとっつきにくいというか何をしたらいいか分からなかったので、体系的に学べるのは大変助かるしとても勉強になります！ フロントエンド開発のためのテスト入門 今からでも知っておきたい自動テスト戦略の必須知識 [ 吉井 健文 ]価格: 3080 円楽天で詳細を見る その中から、Jestで非同期のテストをするときの書き方パターンを、本の内容+自分で調べたことのまとめ。 Jestはドキュメントも丁寧。 非同期コードのテスト · Jest テストしたい関数 // 必ず成功するPromiseを返す…

Test Runner は、Node.js にビルトインされているテスト実行の仕組みです。 3rd party の jest を使うことが多いですが、処理系だけでテストを完結させることができるということです。 使い方 node:test モジュールを使用してテストを書きます。第一引数にテスト名、第二引数にテストを実行するコールバック関数を渡します。jest と同じような使い方ですね。 下記のようなコードの書き振りです。 import assert from "node:assert/strict"; import { test } from "node:test"; test("テストが成功す…

はじめに 復習：PGlite pg-gateway pg-gatewayとPGliteを起動してSQLクライアントから接続する まとめ

◎学習時間：14時間20分◎ ①【Javascript編/中級】 ■JavaScriptの文字列メソッド■ -searchメソッド（呼び出した文字列の中から、最初にマッチした文字列のインデックス番号を取得） -matchメソッド（呼び出した文字列の中から、マッチした文字列を配列で取得し） -replaceメソッド（呼び出した文字列の中から、最初にマッチした文字列を置換します） -replaceAll（呼び出した文字列の中から、マッチした文字列をすべて置換します） など。 ■JavaScriptのオブジェクト・基礎■ -オブジェクトコピー -既存のオブジェクトのプロパティを基に新しいオブジェクト…

自分の場合は Service Worker が起動する前にリクエストが走って、画面リロードしようがキャッシュが有効で304 Not Modifiedが返ってくる状況だったと思われる。 Async/Awaitを使って起動順を整理したら解消した。 main.ts でcreateAppしているところを以下のように修正して worker.startとcreateAppの順番を整理した。 main.ts async function enableMocking() { if (process.env.NODE_ENV !== 'development') { return } const { worke…

少し前にどころか、数か月前に Unity で画像を取得する方法を調べた続きです。 前々回に Web Request を コルーチン で待機し、前回に Async/Await で待機しました。 前々回 zako-lab929.hatenablog.com 前回 zako-lab929.hatenablog.com 今回は、前回作った Async/Await なメソッド を コルーチン で待機しようと思います

少し前にどころか、数か月前に Unity で画像を取得する方法を調べた続きです。 zako-lab929.hatenablog.com 先日の記事では StartCoroutine を使って、 コルーチン として UnityWebRequestTexture を実行しました。 今回は、Async/Await で待機できるパターンに変更してみます。

はじめに プロダクト開発がスケールしていくと、事業ドメインが枝分かれしていき、1つに集約されていたデータベースを複数のデータベースへと切り分けていきたい要求が生まれたりします。 そうした場面でDBの移行をする手段はいくつかあります。 同一データベース内に新規テーブルを作成し、既存テーブルと並行して利用 旧DBと新DBに分けて、異なるアプリケーションが書き込みを行う Kafkaを使ったメッセージキューでの処理 Change Data Capture (CDC) を利用してDBの変更を検知し、新DBに書き込む こうしたパターンの中で、今回はCDCを用いたDB検知での新DBへの書き込みを試してみます…

◎学習時間：44.12ｈ◎ ①【HTMLCSSでのWeb制作入門】 ■中央揃えのやり方について学ぼう■ -transform -translateX() -rotate() など。 ■レスポンシブ対応するためのスキルを身につけよう■ -display: none -flex-direction -@media screen and -overflow-x: scroll など。 ■CSSの詳細度について学ぼう■ -cssのカスケード・詳細度・継承について学習しました。 ■リセットCSSを導入しよう■ ■【HTML/CSS コーディング練習】入門編：プロフィールサイト／LP■ -コーディング、サ…

Weekly Review お盆休みを頂いて1週間ずっと休み 月曜火曜は遠出して、一生分の流れ星を見れて最高だった 水曜から地元帰って家族や友達や取引先とアポ なんやかんやで疲れてあんまり副業の実装進められなかったので、明日本気出す とはいえ、会いたい人とは会えたし、話したいことも話せたので満足 台風の影響で1日帰宅が後ろにずれたが、むしろそれがよかった チャリで遠出してハードオフで中古のギターを購入した そのまま浜辺へ散歩いって、セルフ弾き語り一人カラオケを2日間した その結果喉を痛めて、放置すると風邪ひきそう 風呂と睡眠の環境だけすごい悪かったから、土曜に帰ってきてからすごい調子が悪かった…