at backyard

Color my life with the chaos of trouble.

JavaScript

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の…

とてもシンプルな sitemap 作成のためのnpmライブラリをリリースした。

作った報告、ということで書き残しておく。 www.npmjs.com 完全に自分が使う用として、npmでリリースした。 元々、Next.jsでアプリを書くときに毎回sitemap生成用のスクリプトを書いていたが、そういうケースが何度かあったので、npmにしたというだけ。 生成…

random-fruits-nameのv1.4.0をリリースした。

以前こちらのブログでも書いたnpmパッケージのrandom-fruits-name。 shinshin86.hateblo.jp 今回、機能リクエストを頂き、maxWords オプションを追加した。 github.com 詳細は上のissueや、GitHubやnpm内のREADMEを見ていただけたらと思うが、例えば maxWord…

ランダムな果物の名前を生成するだけのnpm package、random-fruits-name.js

以前、物凄くシンプルなnpm packageを作っていた。 random-fruits-name.js という名前のpackageである。 GitHubはこちら。 github.com READMEにも書いているが、ReactでもNode.js環境下でも動くものになっている。 Reactでのコードサンプルはこちら。 import…

JavaScriptでJSON配列の特定のkeyにおける、重複数をカウントする使い捨てスクリプトメモ

開発をしていて必要になったので、書いた。 1回使えば役目を終えるコードだったため、使い捨てスクリプト的な形で書いている。 今後もまたどこかで使用するシーンがでてくると思ったので、こちらに書き残しておく。 なお、このスクリプトはこちらのQiitaで…

BUMP OF CHICKENの藤くん結婚、ecmcorsというnpmパッケージについて

BUMP OF CHICKENの藤くん結婚について 朝起きてコードを書いていたとき、ちょっと集中力が切れてTwitterを開いたら、トレンドに 藤くん結婚 というキーワードが踊っていた。 もしや...!と思って調べたら下記のとおりである。 (なぜか公式サイトの詳細ページ…

imgurに匿名で画像アップロードするためのnpmパッケージ "imgur-anonymous-uploader" を作った

imgurに匿名で画像アップロードするためのnpmパッケージ "imgur-anonymous-uploader" を作ったので、そちらについて書いていきます。 目次 目次 追記: imgurに匿名で画像アップロードを行いたい方へ imgurについて imgurのclient id発行方法について imgur-a…

配列内の重複を削除する方法(JavaScript)

例えば下記のような配列の重複を削除したい場合 ['AAA', 'BBB', 'AAA', 'BBB', 'CCC'] ↓ ['AAA', 'BBB', 'CCC'] reduceを使えばシンプルに書けそう。 Array.prototype.reduce() - JavaScript | MDN const list = ['AAA', 'BBB', 'AAA', 'BBB', 'CCC']; const…

JavaScriptのクエスチョンを2つ連続で各ショートハンドの正体(??)

コールドリーディングしていたら出てきた、これ ⇒ ?? なんていう名前なのか調べたら、 Null合体演算子 という名前らしい developer.mozilla.org この演算子は左辺が null または undefined の場合に右の値を返し、それ以外の場合に左の値を返します。 実際に…

利用しているデバイスのバッテリー状況を取得するWeb API (Battery Status API)

このAPI自体は現在 Deprecated となっているようなので、使用しないことをお勧めします。 (あくまで自身の勉強メモとしてこちらに書き残しています) 利用しているデバイスのバッテリー状況を取得するWeb API (Battery Status API) たまたま見つけた Battery …

PaginationをReactで実装したサンプル (Bootstrap使用)

去年書いていたポストだが、下書きの状態のママになっていたため、公開することにした。 以下本文。 最近Reactで実装されたPaginationに触れる機会があったので、自分の理解を深める意味も込めて、自分なりに1から実装してみる。 といっても、スタイルはboo…

Array.map.filter(Boolean)で繋げば、mapの返り値にundefinedを含めることもなくなる (JavaScript)

JavaScriptのmapを使ったときにundefinedがついてきてしまうときの対応法を備忘録がてら書く。 例えば下記のようなコードを書く。 const userList = [ {id:1, name:'Test1', isAdmin: true}, {id:2, name:'Test2', isAdmin: true}, {id:3, name:'Test3', isA…

JavaScript のsplit() メソッドで配列に分割する際に、数値型で分割する方法

今日何気なく発見したことを書く。どうでも良いことだけど、そういえばそうかーというようなプチ発見。 const numberList = '1,2,3' // 普通にsplitすると文字列型の配列で返る numberList.split(',') // => ["1", "2", "3"] // 下記のようにやると、数値型…

Babel 7 へのupgrade toolを使ってみたメモ

あくまで個人用メモ、備忘録的なものになります。 babel7がリリースされましたが、Babel7へのupgradeツールもリリースされています。 github.com 試しに自身のリポジトリに適用してみました。 全然更新できていない、todoアプリ。 react/reduxの練習用に、触…

s2sを使ってVuexを自動生成させるbabelプラグインを書いてみた

作ったのは少し前なのだけど、こちらのブログにも書き残しておく。 (本当はもう少し早くポストしたかったのだけど、なんだかんだ後ろに伸びてしまった。最近ブログ書く時間をあまり確保できていない。。。) s2sを使ってVuexを自動生成させるbabelプラグイン…

SyntaxError: 'import' and 'export' may appear only with 'sourceType: "module"'ってエラー出て困ったけど、まずはエラーの内容を確認しろよって話

こんなエラーが出ました。 ログは割愛しています。 SyntaxError: 'import' and 'export' may appear only with 'sourceType: "module"' (2:0) このエラー文に解決法がすでに載っているのですが、アホなので、最初になんでエラーなの!?となってしまい、ちょ…

Babel pluginを作成する際に見ておきたい動画

動画を見てモチベーションと"なんとなく"な感覚を掴んでいきたい私の、個人的なメモになります。 youtu.be youtu.be youtu.be youtu.be

babel7を使用したとき、jestのテストがTypeError: Cannot read property 'loose' of undefinedでコケたので、その対応をメモ

babel7を使ってプラグインを試しに書いてみようとした際、jestのテストがTypeError: Cannot read property 'loose' of undefinedでコケたので、そのときの対応と原因を自分への備忘録としてメモする。 結論 最初に結論から書くと、babel-core@7.0.0-bridge.0…