async/await周りで苦しんだ箇所の例と対策 | DevelopersIO
どうも。CX事業本部Delivery部のえーたん（@eetann092）です。 今まで雰囲気でJavaScript（TypeScript）のasync/await、Promiseを使っていて最近苦しんだため、ハマったところの例と対策を備忘録として残しておきます。 await付け忘れ やらかした例 まず、awaitを付け忘れた例です。 import { setTimeout } from "timers/promises"; const unit = 1000; async function logSleepLog(msg: string) { console.log(msg); await setTimeout(1.5 * unit); console.log(msg); } (async () => { logSleepLog("hoo"); console.log("finish");
個人開発してるサービスをExpressからNext.jsにしたり、BusBoyを使った話しなど - maru source
2017年から個人で開発しているTrickleというサービスがある。最近、これのバックエンド構成を変えたり、新機能追加などをした。技術的に目新しいものや凄いものはないけど、頑張ったのでその時の話を残しておく。 バックエンド Express → Next.js Multer → BusBoy Web版 GAE → Cloud Run クライアントアプリ React Nativeのアップグレード react-native-image-crop-picker → react-native-image-picker ソーシャルログイン アイコン変更 バックエンド Express → Next.js これまではExpressでモバイルアプリ向けのWeb APIを作っていたが、今回Web版も作るにあたり、Next.jsに移行した。 まずはこれまでのモバイルアプリ向けAPIをNext.jsのAPI Ro
速くてAll in OneなJavaScriptランタイム 「Bun」 | DevelopersIO
Introduction JavaScriptランタイムといえば一般的にはNodeかDenoが思い浮かびます。 Bunはこれらに並ぶ選択肢に なりえるかもしれないJavaScriptランタイムです。 Bunは、下記ポイントに焦点を当てて開発されているとのこと。（公式より） Start fast（エッジを考慮して設計） 新しいレベルのパフォーマンス（JavaScriptCoreエンジンを拡張） All in One(bundler, transpiler, package managerが統合) Bunは、ローカルマシン、サーバサイド、Edge環境で現在のJavaScriptや TypeScriptのアプリやスクリプトを リプレイスするものとして開発されています。 (WASMとかぶる？) 現状、Node API関数の90%以上をネイティブで実装しているそうです。 簡単にいうと、Bunは「速く
User Agent文字列を使ったブラウザ判定の事例 2022年版 - yigarashiのブログ
やむを得ず、User Agent文字列を使って特定のブラウザ向けにJavaScriptの処理を分岐する必要が生まれてしまったので、調査・検討のログを記事にまとめます。 基本的にはバッドプラクティスである ユーザーエージェント文字列を用いたブラウザーの判定 - HTTP | MDN まずはMDNがドキュメントを公開しているので読みましょう。要点は以下です。 基本的にUser Agent文字列に基づいて処理を出し分けるのはバッドプラクティス 多くのケースではUser Agent文字列を使うよりも良い手段がある 例えば特定の機能の実装状況に基づく分岐を行いたければそれを直接検出する それでもやむを得ない場合、User Agent文字列からブラウザ名、レンダリングエンジン、バージョン、OS、端末といった情報を取得することができる ただし各ブラウザのUser Agent文字列は嘘をついていることもあ
ファイルダウンロード完全マスター | フューチャー技術ブログ
Real World HTTPでも紹介したネタですが、お仕事で受けている技術コンサル中に質問をいただいた時に、微妙に本で紹介した内容では少し足りなかったので、改めて整理のためにブログ記事にしてみました。次回、本が改訂されることがあればこのブログエントリーの内容も入れて加筆したいと思います。 Real World HTTPだとGoを使っていましたが、フロントとサーバーを同時にいじるので、本エントリーではNext.jsをサンプルに使います。Next.jsでプロジェクトを作って（npx create-next-app@latest –ts)、適当なプロジェクト名を入れてアプリケーションの雛形を作っておいてください。 Next.jsでは、1つのスクリプトファイルを作成すると、それがサーバーAPI(/pages/api以下)と、フロントの画面(/pages/以下のapi以外)になります。Next.j
【書き起こし】Merpay Tech Talk〜Monorepo開発におけるツール選定〜 #merpay_techtalk | メルカリエンジニアリング
【書き起こし】Merpay Tech Talk〜Monorepo開発におけるツール選定〜 #merpay_techtalk 2022年4月21日に、メルペイ・メルコインのエンジニアたちによる「Merpay Tech Talk〜Monorepo開発におけるツール選定〜」を開催しました。 Monorepo開発を進めるにあたって、メルコインではNx、メルペイではTurborepoを利用しています。Monorepo開発を導入した背景やツール選定の理由、実際に導入した所感などをご紹介します。 アーカイブはこちら！ https://www.youtube.com/watch?v=I0Wxr1JCvhs 登壇者紹介 @tokuda109 / 株式会社メルペイ Frontend Engineer 2019年10月に入社し、クーポン機能のフロントエンド開発を担当後、パフォーマンスやテスト等のフロントエンドの
Node.jsのバージョン管理にVoltaを推したい
Volta とは Voltaとは、JavaScript ツールマネージャーです。 タイトルでは Node.js のバージョン管理としていますが、 npm・yarn のバージョン管理も行うことができます。 公式サイトでは、「The Hassle-Free JavaScript Tool Manager（手間のかからない JavaScript ツールマネージャー）」と紹介されています。 チームの Node.js のバージョン管理を Volta に統一したところ非常に DX が上がり、Volta の恩恵を感じています。 この記事では、開発者の Volta 人口を増やすべく Volta の紹介と使用方法について解説していきたいと思います。 なかなか詳しく解説している日本語のソースはないので、公式ドキュメントを読んで適宜和訳しています。 公式ドキュメントを読むのがめんどくさいという人に読んでいただい
JavaScriptでAVIFをJPEGに変換する
{ "name": "avif-to-jpeg", "version": "0.0.1", "description": "Command line tool to convert AVIF to JPEG", "dependencies": { "fs": "^0.0.1-security", "path": "^0.12.7", "sharp": "^0.33.0" } } const fs = require("fs").promises; const path = require("path"); const sharp = require("sharp"); const convert = async (inputPath, outputDir) => { const obj = path.parse(inputPath); const outputPath = path.joi
Re: 僕らを縛る Node.js という呪いについて - あるいはなぜ TypeScript 以外が真っ当な選択肢にならなかったか
Re: 僕らを縛る Node.js という呪いについて - あるいはなぜ TypeScript 以外が真っ当な選択肢にならなかったか https://d.potato4d.me/entry/20220405-nodejs/ へのアンサーソング。 プログラミング言語としての JavaScript の話をする。 2010年頃、Python 2 でプログラミングを学習した自分にとっては Node.js + CoffeeScript が Better Python だった。 CoffeeScript は当時の JS(ES3~5) に足りない機能を補ってくれて、Python と同じく空白制御のオフサイドルールなのが気に入った。見た目が少しだけ Ruby っぽいので当時全盛だった Rails の人間に訴求するにも有利だった。 Node.js のモジュールシステムである Commonjs は Pytho
JavaScriptで性能テストやってみた〜K6編〜 | DevelopersIO
こんにちはMAD事業部のホンギです。 負荷テストや性能テストという言葉を聞いたことありますか。 プロダクトの性能をテストするためや大量のアクセスを受けた時どれだけのアクセスまで耐えられるのかなど プロダクトが持っている性能の限界を測るために行うテストです。 今日は数多い性能テストツールの中でJSで書けるk6というツールをご紹介します。 この記事を読み終わってからはk6でテストを実施できるようになるのが今回の目標です。 k6 k6の実行イメージ（k6 GitHub 抜粋） k6を一言で言うとJSで書けるツールでユニットテストみたいに性能テストすることを目指しいるOSSです。 なおk6コミュニティーではシナリオ作成を柔軟にするためPostmanやSwagger,OpenAPIなどで定義されているAPIも変換対応しています。 API実行でよく使われてるPostmanの場合postman-to-k
5年かけて作ったウェブアプリを Hacker News に投稿し、最初の1ドルを得た話
これは5年かけて JavaScript の技術スタックの間をうろつき、無駄な時間を過ごし、迷い、そしてなんとかローンチにこぎつけた体験の記録です。 自己紹介 初めまして。私は小さなモバイルアプリ開発会社を運営しているエンジニアです。 プログラミングを始めたのと同じくらいのときから、趣味で作曲活動をしています。 今日の作曲は DAW と呼ばれる大型のソフトウェアを利用することがスタンダードになっています。しかしたくさんのプラグインをマシンにインストールしなければならないことや、すぐに立ち上がる作曲ソフトが無いことにフラストレーションを覚え、軽量な MIDI シーケンサーアプリを好んで使っていました。 しかしそれらの多くは Windows2000 の時代から存在し、アップデートされず、その上 Windows 10 以降 MIDI の再生はまともにサポートされなくなりました。 その問題を解決する
Re: Rails を主戦場としている自分が今後学ぶべき技術について
この記事は、 Rails を主戦場としている自分が今後学ぶべき技術について(随筆) | うなすけとあれこれ についてのアンサー記事です。 うなすけ君が Ruby on Rails で育ってきたように、僕も JavaScript とともに育ってきたという自覚があります。なので、これについて書くことは、ポジショントークは避けられない、という感覚があります。 冷静に比較しようとも思いましたが、やっぱり開き直って思いっきりポジショントークをすることにしました。そっちのほうが面白いと思うので。 自分の基本的な主張は、こちらの記事にあるとおりです。 Frontend Study #1: 基調講演 - Frontend 領域を再定義する 自分と Ruby on Rails 僕は、キャリアとしては Rails の会社で JavaScript を書いてきたことが多かったです。学生の頃は socket.io
意図していない横スクロールの原因を一瞬で特定する方法
ウェブサイト制作時。初心者のかたにありがちですが、「知らないうちに横スクロールバーが発生したけど消し方がわからない！」という問題があります。 そんな意図しない横スクロールが発生しているとき、問題となっている要素を一瞬で特定するテクニックを紹介します。 「CSSを使う方法」と「JavaScriptを使う方法」の2種類があります。 「JavaScriptを使う方法」は具体的にはブラウザのデベロッパーツールのConsoleを使う方法になります。 問題の原因と解決方法は？ そもそもブラウザで意図していない横スクロールが発生するのは、CSSで横幅の計算を間違えて表示領域を超えてしまうことが原因です。 多くはwidthをpxで指定していたり、marginとpaddingの兼ね合い、table要素の横幅問題のいずれかでしょう。 各要素のアウトラインを視覚的にわかりやすく表示させれば問題となっている要素を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JSのウェブフレームワークで高速なルーターを実装する方法
JavaScript のクロージャーと for 文の let 初期化の例外
Webフロントエンド基礎研修 ~歴史から学ぶ、現場のスタンダードな開発~
フロントエンドのデザインパターン
JavaScript で parseInt / parseFloat を使わない方が良い理由
JS Visualizer 9000
JavaScript Class Privates