[小ネタ]forEachではasync/awaitが使えない | DevelopersIO
IoT事業部の木村です。 DynamoDBからGetItemをするという処理を書いていて、forEachの中でasync/awaitが効かないということに気づかず非常に多くの時間を使ってしまいました。大変基礎的でお恥ずかしい内容ですが、今後の備忘のために書き記しておきます。 Array.prototype.forEach() 実行環境 node.js v12.22.1 準備 「test」という名前のDynamoDBテーブルを作成して、idだけの単純なデータを1000件入れておきます。 動かなかったコード ということで、動かなかったコードは以下の通りです。 forEachは非同期処理に対応した設計をされていないようです。 const AWS = require('aws-sdk'); AWS.config.update({ region: 'ap-northeast-1' }); const
![[小ネタ]forEachではasync/awaitが使えない | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/ebd583c26aaaf637324637dc6f04df98290e60db/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2020%2F04%2Fjavascript.png)
JavaScriptのIterator / Generatorの整理
目的と対象読者 IteratorとIterableとGeneratorとGenerator Functionの区別が曖昧な人 (記事前半) Generatorの制御フローを完全理解したい人 (記事後半) の理解を深めるための記事です。 まとめ IteratorとIterableの関係 Iteratorは狭義には呼び出し元の next 呼び出しに応じて要素を出力するインターフェースである。 IterableはIteratorを生成するインターフェースである。 IterableだからといってIteratorとは限らず、IteratorだからといってIterableとは限らない。しかし実際には多くのIteratorはIterableのインターフェースも実装している。 Iterableとコレクションは相互変換可能である。 Iterableは for-of ループで処理できる。 IteratorとG
with IE(JavaScriptのIE11対応) - Qiita
はじめに 政府や行政サイトの「IE縛り」に代表されるように、IE汚染国である日本で仕事としてJavaScriptを書く場合、IEと共存するしなければならない場合が多いです。 with コロナならぬwith IEです。 IE生活様式 Transpile Bundle Polyfill TranspileとBundle は、ES5の書き方で1つのファイルに書いていれば不要です。 エンジニアが不便を我慢すれば必要ない工程ではありますが、そんな我慢はしたくありません。 コロナで言えばマスク、消毒、手洗い、うがい、密を避ける、換気のような個人でできる対策に当たると思います。 Polyfillは、もともとIE11が対応していない機能に対応させるもので、コロナでいえば治療薬ともいえるものだと思いますが、薬なのでリスクもあります。 コロナと違って、みんなでIEやめる合意が取れればIE対応せずに済む世界にな
Webアプリでの画面タッチによるいろいろな操作を制限してみた | DevelopersIO
こんにちは、CX事業本部 IoT事業部の若槻です。 最近、タッチ型PC端末を店頭に設置して不特定多数の人がタッチにより操作するWebアプリケーションを実装する機会があり、その中で下記のタッチ操作を無効にしたいという要望がありました。 ピンチズーム：2本指でタッチすると画面がズームイン/ズームアウトできてしまう。 スワイプ：左右にスワイプするとブラウザの「戻る」「進む」ができてしまう。 テキスト選択：テキストを長押しすると選択でき、そのままweb検索ができてしまう。 右クリック：長押しすると右クリックメニューが出てしまう。 そこで今回は、Webアプリケーションで画面タッチによるいろいろな操作を制限（無効化）する方法を確認してみました。 ピンチズーム ピンチズーム操作はJavaScript（TypeScript）で以下の記述をすれば制限可能です。 const touchHandler = (e
[React / JavaScript] データのExcel/CSV出力機能を実装する | DevelopersIO
こんにちは、CX事業本部 IoT事業部の若槻です。 今回は、ReactアプリケーションにデータのExcel/CSV出力機能を実装してみました。 デモ CodeSandboxのデモを埋め込んでいますが、埋め込まれたサンドボックスの場合はボタンをクリックしてもブラウザにファイルダウンロードをさせることが出来ません。 ダウンロードのデモを試したい場合は、下記URLよりサンドボックスをブラウザの別タブで開いてください。 https://85dsd.csb.app/ 別タブで開いたら、いずれかのボタンをクリックすれば指定の形式でファイルがダウンロードされます。 CSV形式でダウンロードしたファイル。 Excel（.xlsx）形式でダウンロードしたファイル。 コード概要 import React from "react"; import "./styles.css"; import ExcelJS f
mouseover 中に表示される DOM のデバッグ | blog.jxck.io
Update 2024-03-30: Chrome 123 から "Emulate a focused page" が追加された。 これを用いれば良いため、以降の全ての方式は古くなった。 Apply other effects: enable automatic dark theme, emulate focus, and more https://developer.chrome.com/docs/devtools/rendering/apply-effects#emulate_a_focused_page マウスが乗ってないと出ない UI も、そこに Tab などでフォーカスを移し、その状態で Dev Tools の "Emulate a focused page" を有効にすれば良い。 Intro 先日、後輩が「mouseover 中にしか表示されない DOM のデバッグ」に手こずっ
Webアプリケーションの実装ネタをブログ記事にするならCodeSandboxがすごく便利 | DevelopersIO
こんにちは、CX事業本部 IoT事業部の若槻です。 私はReactやその周辺機能を中心にWebアプリケーションの実装に関するブログをよく書くのですが、その際に以下のようなペインがありました。 検証環境の作成 -> 毎回環境を作成するのは大変 （動きのある）UIの伝え方 -> 画像で済ますか、動画やGIFを作ってアップロードするのか悩む。後者は大変 ソースコードの公開 -> するのが望ましいが、GitHubにリポジトリを作って公開するのは大変 今回は、これらペインの解決策として、CodeSandboxが便利で良さそうだったので共有をします。 CodeSandboxとは CodeSandboxとは、Webアプリの作成と共有を迅速に行うことができるオンラインコードエディターおよびプロトタイピングツールです。 CodeSandbox: Online Code Editor and IDE for
AWS SDK for JavaScriptを実行可能なTypeScript環境をサクッと作る | DevelopersIO
やってみる 環境の作成 まず、npm initを実行しディレクトリ内でnpmプロジェクトを初期化します。対話式でプロジェクトの設定を聞かれるので指定します。今回はすべてエンターキーを押して既定の設定としました。 % npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. See `npm help json` for definitive documentation on these fields and exactly what they do. Use `npm install <pkg>` afterwards to install a pac
JavaScriptのコレクション操作入門 | フューチャー技術ブログ
はじめに TIG DXユニット真野です。フロントエンド連載の7記事目です。 ここ数年はGo言語ばかり利用していたのですが、フューチャー技術ブログで利用している静的サイトジェネレータがHexoである関係上、テンプレートの編集やカスタムスクリプト作成のためにJavaScriptもよく利用するようになりました。 静的サイトジェネレータのカスタムスクリプトを書いたことがある方ならよく分かってくれると思いますが、ページ追加なんかの内容はフレームワーク側が用意してくれる変数のコレクション操作がほぼ大半です。この記事ではこのフューチャー技術ブログを機能拡張1する過程で学んだコレクション操作で利用頻度が高い順にまとめます。ブログ運営（？）の保守運用な雰囲気が少しでも伝わればなと思います。 コレクションと言いながらほとんど Array です。元がJava出身者の自分からすると、配列はコレクションじゃなくて、
ES2021／ES2022を知ろう | フューチャー技術ブログ
こんにちは、2017年入社の柏木です。この記事はフロントエンド連載の4記事目です。 少し前にES2021にて変更される新機能が発表されました。 JavaScriptを扱う上では知っとくべき！ と意気込んだもののECMAScriptが何者なのかすら曖昧な理解だったので、この機会に学んだことをまとめてみようと思います。 この記事のゴール ECMAScriptがJavaScriptにとってどのような役割を持つのかを知る ここ最近のECMAScriptの動向を知る 記事の想定読者 JavaScriptは触ったことがあるけど、記法のことは詳しく知らない人 ES2021/ES2022とは ESは ECMAScript（エクマスクリプト）の略称で、JavaScriptの標準規格のことです。2021や2022というのはその規格がリリースされる年度のことで、たとえばES2021は今年リリース、ES2022は
テストデータ作成にCodeceptJSを使ってみた | DevelopersIO
はじめに 事業開発部でQAエンジニアをしている長友です。 今日はCodeceptJSというものを使ってみましたという記事です。 CodeceptJSはE2Eテストのフレームワークです。 今回はこちらを使ってテストデータを作成してみたというお話です。 経緯 急遽テスト実施をしてほしいということでとある案件に送り込まれました。 何もわからない状態で入ったので、どんな状況なのかやどんな感じでテストが行われているのかもわかってませんでした。 CodeceptJSについては、「Software Design 2020年6月号」〜「Software Design 2020年8月号」まで連載されていた「はじめよう、高速E2Eテスト」という記事を見たりしていて知っていました。そして、2020年の年末に開催されたソフトウェアテスト自動化カンファレンス2020で連載記事を書かれていた末村さんが「"全部乗せ"
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - markdown-it/markdown-it: Markdown parser, done right. 100% CommonMark support, extensions, syntax plugins & high speed
JavaScriptのバンドルとトランスパイルが不要なモダンWebアプリ | POSTD
How to Create a UUID in JavaScript
GitHub - tutida/Pack: Cakephp3 variables in JS
JavaScript クイズ解説: NaN === NaN の結果はどうなる？
aws-sdk-mock
Promise Anti patterns
GitHub - bnthor/animon: Animate DOM elements when the appear in the viewport
この書籍について · JavaScript Plugin Architecture