at backyard

Color my life with the chaos of trouble.

備忘録

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

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

create-next-appを用いてTypeScriptプロジェクトの雛形を作る

いつも忘れて都度調べている気がしたので、コマンドをメモしておく。 mkdir my-project cd my-project npx create-next-app --example with-typescript . yarn dev あとは localhost:3000 にアクセスすればOK

Warning: You're using a string directly inside <Link>. This usage has been deprecated. Please add an <a> tag as child of <Link> の対応法

何度も起きていることだが、下書きフォルダに入れっぱなし案件。 定期的に下書きフォルダ見ていくと、大抵公開忘れのポストがいくつか新たに塩漬けになっている気がする。。 ただ、これは書き捨てて的な文章なので、公開していなかっただけかもしれない。 以…

Next.jsアプリをNetlifyにデプロイしたとき、想定したURLでアクセスができなくて対応したときのメモ(動的パスでの扱い)

入力されたパスに応じて、クライアント側でデータを読み込むような処理が書かれたNext.jsアプリをNetlifyにデプロイした際、 実際の挙動が開発時(ローカル)と本番(Netlify)で異なっていたのを対応したので、備忘録として残しておく。 ここで扱っている内容自…

Gatsbyで作ったサイトをGoogle Search Consoleに登録する方法(Google Analyticsのタグを用いて認証させる)

Gatsbyでサイトを作った際、Google Search Consoleに登録をしようとしたら、所有権を証明できませんでした というエラーが出てしまった。 Google Analytics自体は既に gatsby-plugin-google-analytics を用いて設定済みの状態。 Gatsbyを用いている場合、う…

今月GitHubに作成したpublicリポジトリを振り返る(2020年8月)

一月の成果として振り返ることで来月も頑張れる気がしたので、振り返ります。 確認については下記のシェルコマンドを叩きました。 curl https://api.github.com/users/shinshin86/repos?sort=created | jq -r '.[] | { full_name: .full_name, created_at: .…

ts-loader(webpack)を用いてのTypeScript開発の際、Node.js実行のためのshebangでTypeScriptのコンパイルエラーが起きたときの対応メモ

なんだかタイトルが長ったらしくなってしまった。 Node.js製のCLIツールを作っていた。 npmにてリリースして、globalインストールして使う予定だ。 そちらのツールに関する内容は本題ではないので、一旦そちらは脇にどけておく。 (たぶん、またどこかでそれ…

手っ取り早くsitemapを作成する(npmが使える環境にて)

私はNext.js環境で実施したが、npm or yarn が使える環境であれば、特に環境には左右されないかと思う。 使用するのはsitemapというnpmパッケージ。 www.npmjs.com yarn add -D sitemap sitemapに記載したいURLのリストを用意する。 vim listofurls.txt ※サ…

react-notificationsをNext.jsから使う場合の備忘録

今日Next.jsでアプリを書いていたときに出会ったことをメモする。 といっても、Next.jsはエラーメッセージが親切なので、メモを残さなくとも、対処方法がわかりやすくエラーログに出てくる。 こういうのは本当に素晴らしいなと思う。 エラーの原因を探ってア…

ランダムな音楽アルバムの情報を取得するGo製のCLIツールを書いた

ちょいとツイッターで脳内を垂れ流してしまった。 Spotifyで生計立てるのは「夢のまた夢」 データから見える収入格差の実態 #SmartNews https://t.co/rbjH9b6ET2— Yuki Shindo (@shinshin86) 2020年8月18日 ここに書いたとおりだが、とにかく音楽で稼いで生…

瞬間日記 (Moment Diary)のバックアップ方法の一つがWebエンジニア向けだったので書いていく

特に理由はないが(というか忘れてしまったが)、プライベートな日記をつけるのに瞬間日記 (Moment Diary)というのを使っている。 瞬間日記 (Moment Diary)Utagoe Inc.ライフスタイル無料apps.apple.com もう数年使っていて今までバックアップを取ったことがな…

ターミナル上でニュースをチラ見したくて、Yahoo Japan Newsを表示させるGoツールを作った

コーディングをしていると、ニュースがふと気になる時があるが、ニュースを見ようとブラウザに移動してしまうと、別のものまで読み始めて時間を浪費してしまうことがあるので、なるべく集中力を切らさないでニュースを見れるよう、 yjn-topics というGo製のC…

AMP対応のページで月ごとのグラフを表示させる

少し前に書いていたもの。ついつい下書きフォルダに忘れがち。。 AMP対応させたページでグラフを動的に表示させるとなると、基本的にJavaScriptは使用できないので、CSSで頑張ることになりそう。 というわけで、Next.js環境で頑張ってみた結果がこれ。 githu…

Netlifyのデプロイ時に "internal/modules/cjs/loader.js”がエラーになる問題の対応(備忘録)

Gatsbyのサイトをデプロイ中にエラーになった。 ちょうど前回ポストしていたnikkiのサイトのリリースでだ。 internal/modules/cjs/loader.js:969 throw err; エラーログを追っていると、どうやら下記のmoduleが見つからないというのが原因らしい。 Error: Ca…

nikkiという日記を書くためのWebサイトを作った

Gatsby Starter: Minimal Blogを用いて個人的な日記サイトを作った 自分自身の日記をwebに載っけてみようと思い、作った。 nikki.shinshin86.com 日記サイト自体はGatsbyで構築しようと前々から考えており、良い感じのテンプレートがなければいっそ自作テン…

textlintでmdxファイルをチェックする方法

textlintでmdxファイル内のテキストをチェックする方法 textlintでのmarkdownチェック処理の際に、 MDX ファイルも一緒にチェックしたいというお話 github.com textlintではデフォルトでMarkdownとplain textをサポートしている。 (他のファイルについてはpl…

VSCodeでファイルを開いた時に、前に開いたファイルのタブが上書きされる問題を回避する方法(GUIで設定する)

下記のQiita記事と全く同様の問題。なので解決方法は同じ。 qiita.com この設定はGUI上からも行えるので、一応そのやり方を備忘録として残しておく。 (残すほどでもないのかもしれないが、VSCode新しくしたときとかになるべく迷いたくない。。。) VSCode の…

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

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

自宅のインターネットサービスプロバイダ(ISP)を調べる方法

契約先のインターネットサービスプロバイダ(ISP)の調べ方 少し前のことだが、Googleのドキュメントを見てる時にたまたま発見した。 www.whoismyisp.org 自宅のIPアドレスとかの確認方法はcmanとかがあるけど、ISPはそういえば知らなかったなと思い、メモ。 (…

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

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

使用していないDockerコンテナを一括で削除する方法

今更ながら知ったのだが、使用していないDockerコンテナを一括で削除する便利なコマンドがDockerには用意されていた。 (ただしバージョンが 1.13 以上である必要がある。ただ、今であれば基本的に使えるはず) docker container prune | Docker Documentation…

Dockerを使ってmacからwindowsアプリに触る

ちょっとした好奇心でmacからwindowsアプリに触れてみたくなった。 これはそんな備忘録であり、とりあえず試してみた的なメモとなっている。 Dockerでwineを動かす こちらのリポジトリを使わせてもらった。感謝。 github.com なお、こちらのREADMEにも書かれ…

AWSの仮想MFAを失くしそうになって焦った話(携帯を変える際は要注意、Google Authenticator)

先日ひさしぶりにプライベートで利用している個人のAWSにログインしようとした。 ちょいと用事がありでルートでログインしようとしたのだが、そのときにMFAの番号を求められた。 私はこのアカウントのMFAをGoogle Authenticatorで管理していたので、普段どお…

プロジェクトごとの.nvmrcファイルを勝手に読み取って、使用しているNode.jsのversionに自動的に設定する方法

そういう事できないかなーと思っていた。 いや、正確にはできるんだろうけど、ちょっと設定めんどいかもなーなんて勝手に思っていた。 結論、そんなことはなかった。 設定の方法はnvmのREADMEに記載されていた。 私はzshを使っているので、下記を参考にした…

既存のWebページ(静的HTMLのペラサイト)をAMP対応してみた

自身の音楽ポートフォリオサイト(静的HTMLのペラサイト)をAMP対応してみた 以前、自身が作ってきた音楽をまとめた音楽ポートフォリオを、HTML5 UPのテンプレートを用いて、1枚だけのペラサイトとして作成した。 shinshin86.com その時の詳細は下記に書いた…

Next.jsでAMPのサンプルを最速で試す

完全なる自分用メモ(備忘録) 下記を参考にすればOK (Next.jsのAMPのサンプル) github.com 以下のコマンドを順に実行すればAMPのサンプルページが立ち上がる。 あとは localhost:3000にアクセスするだけ。 yarn create next-app --example amp amp-app cd amp…

macOS環境にて、brewでインストールしているgoをupgradeする

macに入っているgoのversionをupgradeしたくなった そもそもmacへのインストールはどうやったのか調べたところ、下記の結果を見るに、どうやら brew を使ってインストールしていたようだ。 which go # => /usr/local/bin/go そのためここに記載されるのは、b…

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

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

【作曲・DTM 脱初心者向け】既存の楽曲をLogic Pro Xに取り込んで耳コピ・分析環境を整える方法

耳コピ・楽曲分析は【作曲・DTM 脱初心者】になるためには必要不可欠 耳を引きそうなタイトルを付けてしまったが、まず耳コピや既存楽曲の分析は現代における作曲・DTMのスキルアップには必要不可欠なので、このようなタイトルを付けた。 私自身は耳コピはか…

【2020年版】ペラサイトを半日で作って独自ドメインでリリースまで行う方法(費用はドメイン代のみ)

【2020年版】ペラサイトを半日で作って独自ドメインでリリースまで行う方法(かかるお金はドメイン代だけ) 最近自身の音楽的な部分での名刺代わりとなるような、簡単な音楽ポートフォリオサイトを作った。 サイトを作った、という表現はだいぶ大げさで、自分…