at backyard

Color my life with the chaos of trouble.

JavaScript

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…

yarn add @babel/babel-cliでインストールできない

babel7のcliを試そうとしたところ、ちょっと躓いたので、発生した事象と対応策を書いていく。 下記のコマンドを叩くと、エラーとなり、インストールできない。 yarn add @babel/babel-cli 下記のコマンドを実行することでインストールできる。 (npmでも同様…

ネットワークがない環境で、擬似的にnpmでパッケージをglobal installしたことにして作業することは可能か?

"npm install -g {package}"がしていること 実現させたいこと ネットワークがない環境で(npm install -g {package}ができない)、npm install -g {package}した時と同じような状態にしたい。 例えば、npm install -g webpackは出来ないが、webpackのモジュー…

そのうちコードリーディングしようと思っているオープンソースのプロジェクト

最初に ずっと"下書き"の状態のまま、保存されていた記事。 最近Rubyを触り始めた、と書かれているので去年に書かれた投稿であると思う。 ふと思い立って読み返してみたら、やはりコールドリーディング欲が掻き立てられたので記事を公開することにした。 こ…

様々な言語からMinioのファイルアップロードを試す

様々な言語からMinioを試してみる。 ※といっても、現在は3言語しかまだ書いていない最近 Go言語で書かれた、S3互換のオブジェクトストレージサーバを触り始めたので、 各言語での試し方をこちらにメモしておく。 なお、あくまで現時点でのやり方となるので…

Ruby on Rails 5でページ遷移時にJavaScriptが読み込まれない問題の解決法

個人度がいつも以上に高い備忘録なので、この内容がリーチしない方にとっては読む意味ありません。表題の件で悩まれている方がこのページに訪れた際は、下に貼ったリンク先の記事が解決の手立てとなるかもしれませんので、ぜひ見てみてください。 (現に私が…

Node.js v 0.10系で、Promiseなどを使わないで、無理矢理に同期処理を行う。

JavaScript備忘録記事。今年に入ってからNode.js + MongoDB(with mongoose)という組み合わせで仕事をしている。 ただ、プロジェクトの諸事情により、最近までNode.jsはPromiseが使えない古いバージョンを使わざる負えない状況だった。 具体的には0.10系。 そ…

各言語で文字列変換を試みる。

備忘録である。 先日、Javascriptを使った文字の変換について触れる機会があったので、他の言語ではどうか?と思い、調べてみた。 Javascript まずはJavascriptから。String.prototype.charCodeAtはUnicodeを10進数に変換するStringメソッドであり、 String.…