at backyard

Color my life with the chaos of trouble.

JavaScript

JavaScriptの三項演算子に関する、どうでもいいメモ書き

例えばこんな文字列を出力したいとする。 const isInvalid = true; `is invalid: ${isInvalid ? true : false}` 結果は下記のような文字列となる。 is invalid: true だが、下記のようにすると、結果は true となる。 const isInvalid = true; "is invalid: …

複数ファイルのダウンロード時に、各ダウンロードごとの進捗を個別に表示したい (fetchでStream APIを使う)

fetchを用いてダウンロードする際にダウンロード進捗を表示させる方法については以下に書いた。 今回はこちらの発展形について。 shinshin86.hateblo.jp 複数ファイルのダウンロードをすることになった際、各ファイルそれぞれのダウンロード進捗を表示させる…

Fetchを用いてダウンロードの進捗状況を表示させながらダウンロードを行う

fetchで画像をダウンロードしようとした際に、ダウンロードの進捗状況も画面上に表示させようとしたときの備忘録。 基本的にサンプルレベルの雑なコードのメモです。 目次 目次 ダウンロードの進捗状況を%で表示するサンプル sleep処理をあえて挟んでいる 画…

WailsでのGoとJS側でのEventsのやりとりについて

基本的に下記を見ればOK wails.io イベントの送り方は EventsOn とか EventsOnceとか複数あるが、ひとまずどうやって送るかのサンプルだけ下記に書き残しておく。 GoからJS側にイベントを送る場合 Goでは下記のようにEventsを設定する ※コードはかなりいい加…

JavaScriptライブラリをTypeScriptからも型チェックエラーなく呼べるためにやったこと

自分向け備忘録。簡単なメモ。 ES ModulesのCSVパーサーを書いた 車輪の再発明かもしれないが、ES ModulesでのCSVパーサーを書いた github.com JS(ES Modules)で書いたのだが、これをTypeScriptから呼ぶ際には型情報がない場合、型チェックエラーが出てしま…

フォロー返ししてくれないアカウントをJavaScript(Node.js)を用いて特定する(Twitter API v2)

タイトルはネタであり、このあとに書く文章も適当な文章です。 まえがき 昔々、フォロー返しという文化がありました。Twitterで誰かをフォローするとお返しにフォロー返しをするというやつです。 その文化を利用してたくさんのアカウントがフォロワー数を増…

Twitter API v2を用いてツイートするためのCLIプログラムをNode.jsで書いた

下記の記事でTwitter API v2を用いてツイートをするプログラムを書いてみた。 shinshin86.hateblo.jp 上の記事の中では既存のサンプルを参考にしつつ、結構色々と試行錯誤しながらサンプルコードを書いていたので、もう少し頭の中を整理したいと思い、CLI上…

公式のTwitter SDKをJavaScriptから触ってみたメモ(APIを用いたツイート編)

前回Twitter APIを用いてツイート取得やアカウントの取得について書いた。 shinshin86.hateblo.jp 今回はツイート編。 目次 長くなるので目次 目次 Twitter API V2を用いてツイートをする Twitter APIを用いてツイートした際の表示 Twitter API v2を用いてツ…

Bun(JavaScript runtime)を試すだけのメモ

最近話題のZigで書かれているJavaScriptのRuntimeであるBunを試す。 bun.sh Bunのインストール インストールの仕方がcurlでスクリプト取得してbashで実行するタイプの方式。 curl https://bun.sh/install | bash 一応公式ページからinstall スクリプトの内容…

公式のTwitter SDKをJavaScriptから触ってみたメモ(ツイート取得、アカウント取得編)

昨日の続き shinshin86.hateblo.jp 目次 目次 公式のTwitter TypeScript SDKを触ってみる 特定のツイートを取得するサンプル 指定したツイートをLikeしたアカウントの一覧を取得するサンプル 指定したツイートをリツイートしたアカウントの一覧を取得するサ…

Dropbox APiを用いてファイルアップロードを実装する(JavaScript)

Dropbox APiを用いてファイルアップロードを行う処理を作成したので備忘録。 Dropbox APIの利用開始手順 まずは下記のページからアプリを作成をクリック。 Developers - Dropbox アプリ作成に関するフローでは特に詰まるところはなかったので割愛する。 (ま…

HTMLCollectionを配列で扱いたいときはObject.valuesやArray.fromやスプレッド構文を使うと便利

最初に結論 たぶん、検索で引っかかってきた人は結論だけ知りたいはずなので、まずは結論だけ書く。 配列として扱うには Object.valuesを使うと想定したような使い方ができる。 (他にはArray.fromやスプレッド構文を使う方法もある。それらは本文に書いた) O…

Node.jsでファイルを再帰的に探索してから最後に指定の処理を実行するサンプル

Node.jsでファイルを再帰的に探索する際、投げっぱなしの処理はすぐに書けたが、投げっぱなしではなくすべてのファイルの探索を終了したあとで特定の処理を行いたいとなったときにどうすれば良いのか調べてみたので、そちらの内容をメモする。 色々と考えて…

Node.js + Protocol Bufferで時刻を扱う場合に利用するgoogle.protobuf.Timestampについて

自分向けの割合がだいぶ高い備忘録。 gRPCを扱う際に時刻を利用する場合、protocol bufferでは時刻を表す型として google.protobuf.Timestamp が利用できる。 これが個人的にはちょっと癖のある感じで、今のところは使いづらい。 ひとまず概要についてはGitH…

Node.jsでgRPCに入門する

実は何度目かの入門。 普段から使わないとすぐ忘れてしまうのでHello worldなサンプルを動かすまでの過程をメモで残すことにした。 なるべくコードはシンプルになるように意識している。 目次 書いていたら長くなってしまったので目次つけます 目次 自身の環…

todoistのAPIを用いて日付を指定してタスクを追加するサンプル

todoistのAPIを用いることでプログラムを通じて操作をすることが可能。 ※開発者向けドキュメントはこちら developer.todoist.com 今回はこちらのAPIを用いて日付を指定してタスクを追加するサンプロをこちらに書き残しておく なおAPIを操作するにはトークン…

vim-sonictemplateが楽しそうなので試してみた(JavaScriptにて)

GitHubをサーフィンしていたら見つけたvim-sonictemplateが楽しそうだったので、試してみることにした。 github.com vim-plugでインストール vim-plugを利用しているので、こちらを利用してインストールします。 .vimrc に下記を書いて、Vimを開き、PlugInst…

JavaScriptで動的に関数の引数を与える場合はスプレッド構文を使えばよかった

最近、こういう使い方もできるのかと学んだので備忘録がてら残しておこうと思ったのだが、書き始めてからMDNを参照したら、自分がこれから書こうと思ったそのままの例が載っていて、自分の知識の無さに幻滅した次第。 developer.mozilla.org せっかく書き出…

colors.jsの今回の問題で我々が対応すべきことについての個人的なメモ(実務的な部分のみ)

colors というnpmパッケージの最新versionについて意図的に悪意のあるコードが実行されるようになっている。 こちらの問題のあるversionなどの具体的な内容についてはazuさんが分かりやすくまとめてくれているので、こちらを参照してみるのが良い。 zenn.dev…

Denoでfetchを用いてEUC-JPのサイトをスクレイピングするときのサンプル

Denoを使ってスクレイピングする処理を書いていた際に、データ取得元のサイトがEUC-JPだったため文字化けを起こしていました。 Denoを使っている場合、こういうケースはどうすれば良いのか調べたので備忘録として残しておくことにします。 (というか、Deno特…

変数、または関数のあとに `?.(クエスチョンとピリオド)` を記載するオプショナルチェーンについて

変数、または関数のあとに ?. を記載するオプショナルチェーンについて ライブラリのコードを読んでいたら変数の前に ?. (クエスチョンとピリオド) という記法、自分の中であまり馴染みがなかったので調べてみたら、これはオプショナルチェーンと呼ばれてい…

小さなテストライブラリをNode.jsで作ってみる(テストライブラリの自作)

以前から気になっていたことの一つに、mochaやjestなどのテストライブラリはどういう動きをしているのだろうか?というのがあった。 describe や it や expect などなど、独自の関数をテストコード内に書いてテストを実行していくが、別にこれらのコードは直…

target="_blank"のリンクを踏んだのにwindow.openerにnullが入ることについて

目次 目次 target="_blank"の危険な理由 “target=_blank”のリンクは“rel=noopener”が付いているものとして扱われることになった window.open関数を使えばwindow.openerにはアクセスできる onclickイベントの最後に "return false;"を付ける理由 window.opene…

”が"と見た目は似ていて紛らわしい(全角のダブルクオーテーションについて)

突然だが、ブラウザの開発者ツールを開き、下記のコードを入力すると構文エラーとなる。 console.log(”Hello World”); // => Uncaught SyntaxError: Invalid or unexpected token 原因は単純で上で使われている ” の文字にある。 一見すると、上の Hello Wor…

Top level awaitについて整理した

トップレベルawait(Top level await)について改めて自分の中で整理することにした。 これはその際の備忘録的なものとなる。 目次 目次 Top level awaitとは? Top level awaitをブラウザで試すシンプルな方法 実際に読み込まれたJSファイル上でTop level awa…

JavaScriptのimport時のファイル読み込み時、複数から呼ばれたJSファイルの挙動について

JavaScriptを書いていて、挙動を理解していない箇所があるので今日はそのメモを書く。 例えば下記のような3つのファイルがある。 // sample1.js import { userList } from "./sample2"; import sample3 from "./sample3"; console.log('===> call sample1.j…

【備忘録】JavaScriptでRadioNodeListを配列に変換する

JavaScriptに関する個人的なメモ、備忘録。 RadioNodeList を配列に変換して処理したいときがあって、配列に変換するための方法を調べたメモです。 例えば下記のようなradioボタンを配置したフォームがあるとする。 <div> <form name="testTypeForm"> <div> <input type="radio" id="test1" name="testType" value="test1" checked /> <label for="test1">Test 1</label> </div> <div> </div></form></div>

JavaScriptのfocusメソッドを使ったときにiPhoneのSafari上でソフトウェアキーボードが出てこないようにしたい

先日のポストにも書いた下記のサイト。 (Slackのリマインダーの日時指定や時間指定方法をいつも忘れるので、用途ごとにすぐにコピペして利用できるサイトです) slack-remind.shinshin86.com こちらのサイトではコピーボタンが実装されており、コピーを押すこ…

Gatsby.jsで新しいGoogle Analyticsを使う場合は、gatsby-plugin-google-analyticsではなく、gatsby-plugin-google-gtagを使うこと

Gastbyで新しいバージョンのGoogle Analyticsが動かない gatsby-plugin-google-analytics のドキュメントを参考に設定したのだが、なぜかうまく行かない。 Googleの提供しているChrome拡張であるTag Assistantでチェックしてみると、無効なIDだという理由で…

random-fruits-name.jsにロゴが追加されました。またオランダ語サポートを追加したv1.6.0をリリース

以前から何度かこちらのブログにも書いている、random-fruits-name.js。 shinshin86.hateblo.jp random-fruits-name.jsのロゴを書いていただきました。 今も少しずつ開発が進められており、最近ではこのプロジェクトのロゴも書いていただきました。 GitHubの…