なんでもノート

なんでも書くノートみたいなブログ

技術記事

Romeを使ってみた

Rome という開発ツールを使ってみた。RomeはRome1つでフォーマットやlintなどができる統合開発ツールを目指していて、2023年1月現在はフォーマッターとLinterがリリースされている。そのフォーマッターとLinterを使ってみた。最近開発しているChrome拡張にPr…

GitHub ActionsからGitHubへpushできないエラー

GitHub Actionsで以下のエラーが出た。 Push the commit or tag /usr/bin/git push origin master remote: Permission to azujuuuuuun/azujuuuuuun.github.io.git denied to github-actions[bot]. fatal: unable to access 'https://github.com/azujuuuuuun/…

GitHub ActionsからGoogle Cloudに認証する

GitHub Pagesにはてなブログの最新記事を表示する - なんでもノートにGitHub ActionsからGCSへの認証に困ったと書いた。詳細をこの記事に書く。 前回の記事ではGCSにアップロードしたJSONを取得し、そのJSONに入っているブログの最新記事を表示した。JSON取…

GitHub Pagesにはてなブログの最新記事を表示する

https://azujuuuuuun.github.ioにブログの最新記事を出した。 実装方法 はてなブログの更新フィードを取得する Atomフォーマットを取得する 1の更新フィードをJSONに変換する XMLより扱いに慣れているのでJSONに変換した 2のJSONをGoogle Cloud Storage(以…

VSCodeのデバッガーでTypeScriptのスクリプトをデバッグをする

恥ずかしながらこれまでJavaScriptの開発にデバッガーを使ってこなかった。ひたすらconsole.logを仕込みデバッグしていた。VSCodeでTypeScriptのデバッグをする方法を調べた。 とりあえずデバッガーを起動できるようになった設定ファイルはこちら。 type デ…

新型コロナウイルス新規感染者数をSlackに通知する

いつからかコロナの感染者数の推移を見なくなった。メディアの公式LINEから速報で来なくなったし、自分から調べる回数も減った。7月から新型コロナウイルス新規感染者数が増えている。早く落ち着いてほしいと願っている。在宅勤務でテレビでもネットでもニュ…

依存パッケージを更新することなくpackage.jsonとpackage-lock.jsonのversionを上げる

依存パッケージを更新することなくpackage.jsonとpackage-lock.jsonのversionを上げる方法をまとめる。 $ npm version patch このコマンドでセマンティックバージョニングのパッチバージョンを上げることができる。versionが 1.0.0 だった場合、1.0.1 になる…

GitHub ActionsでNotionの日記ページを毎日作成する

タイトルにある通り、1日1ページNotionに日記を書いている。「YYYY/MM/DD(ddd)」というタイトルをつけているのだが、この入力が地味にめんどくさかった。「きょう」→変換→ 「(」→「つき」→変換→「)」という手順で入力していた。Notion APIを使ってみた - な…

Notion APIを使ってみた

Notionでネットの記事の積読を管理している。積読の数が1000を超え、ノイズになっていたので一度全て断捨離することにした。 状況・やりたかったこと Articleというデータベースで積読を管理 Read StatusというSelectカラムでステータス管理 未設定:積読 Re…

.gitconfigを整備した

git config --global コマンドで各種設定値を設定できる ~/.gitconfig ファイルを整備した。整備した .gitconfig ファイルは https://github.com/azujuuuuuun/dotfiles/blob/master/.gitconfig にpushした。変更前のファイルをコミットしていなかったので差…

GitHubでメールアドレスをプライベートにする

https://github.com/settings/emails へアクセスする 「Keep my email addresses private」(2022/08/11現在の文言)をチェックする これでGitHubからマージや編集などのGitの操作をしたときのメールアドレスが ID+username@users.noreply.github.com になる…

Node.jsのバージョン管理をVoltaに移行してみた

Nodeのバージョン管理にnodenvを利用していた。Voltaは良いと聞いていたが、面倒くさくて触ってこなかった。今更ながら重い腰を上げて移行してみた。 やったこと nodenvのアンインストール https://github.com/nodenv/nodenv#uninstalling-nodenv に書いてあ…

ZodをNext.jsで使ってみた

最近、Zodという名前をTwitterでよく見かける。 github.com TypeScriptファーストなスキーマベースのバリデーションライブラリらしい。試しにNext.jsのクエリパラメーターのバリデーションで使ってみた。 github.com 架空の検索結果ページのクエリパラメータ…

iOS Safariでvideo要素に設定した動画が表示されない

<input type="file”>で同じファイルを選択できるようにする

<video>に読み込んだ動画の秒数を取得する - なんでもノート に続きtipsの3個目。でファイルを選択し、再度同じファイルを選択しても1度目のvalueが残ってしまっているため、changeイベントが発火しない。対応方法は2つある。1つ目は1度目のchangeイベントの処理の</video>…

<video>に読み込んだ動画の秒数を取得する

<input type="file">で選択したファイルのサイズを取得する - なんでもノート に続きtips2個目。video要素に読み込んだ動画の秒数を取得する方法。durationchangeイベント発生時にdurationから読み取れる。以下、React + TypeScriptのサンプルコード。 import React, { useRef }…

<input type="file">で選択したファイルのサイズを取得する

最近使ったtipsを1つずつブログにまとめておこうと思う。1つ目はで選択したファイルのサイズを取得する方法。以下、React + TypeScriptでのサンプルコード。 const onChangeFile = (e: React.ChangeEvent<HTMLInputElement>) => { const fileSize = e.target?.files?.[0]?.size</htmlinputelement>…

Docker ComposeでMySQLを動かしてみた

Docker ComposeでMySQLを動かしてみたのでメモ。 リポジトリ:https://github.com/azujuuuuuun/try-docker-mysql image: https://hub.docker.com/_/mysql 環境変数は .env ファイルで設定している https://github.com/azujuuuuuun/try-docker-mysql/blob/d13…

marginとpaddingの使い分け

CSSのmarginとpaddingの使い分けについてふと思ったので書く。 対象要素とその兄弟要素との間の余白を確保する場合はmarginを使う 対象要素とその子要素との間の余白を確保する場合はpaddingを使う このシンプルなルールで大抵の場合は使い分けられるのでは…

vegetaのmultipart/form-dataリクエストでハマった

vegetaは負荷テストツール。vegetaでmultipart/form-dataでリクエストができず、ハマった。2日くらい時間を使った。 検索したら以下の記事が出てきたので簡単にできそうだとたかを括っていた。 負荷テストツール vegeta で multipart/form-data で画像を送る…

ビックバンリリースを避ける

Webサービスのリリースの話。ビックバンリリースは簡単に言えば大きなリリースのこと。ビッグバンとまでいかずとも、大きなリリースを避けて小さくリリースしたいと思っている。 どれくらいが大きいかの明確な基準はないが、以下のようなリリースは個人的に…

Node.jsのBufferをStringに変換する

自分用のメモ記事。サンプルコードは以下。 const buf = Buffer.from("hoge"); console.log(buf.toString()); // hoge console.log(buf.toString("utf8")); // hoge toStringを呼び出すだけ。エンコーディングのデフォルト値は utf8 なので2行目と3行目の出…

GraphQL Code GeneratorでTypeScriptのコードを生成してみる

GraphQL Code Generatorで以下の2つの要望を満たす設定をする。 aliasで指定したfield名の型定義を生成したい リクエストクエリをstring型の変数で生成したい 最初に結論として、codegen.ymlに以下のような設定にする。schemaやdocuments、出力先は環境によ…

即時関数を使ってletをconstに置き換える

※ 置き換えられないケースもあるかと思いますので、ご承知おきください。 JavaScriptの即時関数を使って、letを使いそうになるところをconstで定義できるようになることがある。 具体的には条件分岐で活躍する。 複雑なif文やswitch文で変数の値が変わるとき…

gzip圧縮について調べたまとめ

gzip圧縮について調べたのでまとめる。 概要 gzip - Wikipedia gzip(ジー・ジップ)は、データ圧縮プログラムのひとつ、およびその圧縮データのフォーマットである。 圧縮を有効にする | PageSpeed Insights | Google Developers 最新のブラウザはすべて gz…

Setオブジェクトによる配列の要素の重複排除

JavaScriptのSetオブジェクトを使って簡単に配列の要素の重複を排除できることを知った。 const array = [1, 2, 3, 1]; const set = new Set(array); const uniqueArray = [...set]; console.log(uniqueArray); // [ 1, 2, 3 ] オブジェクトの重複も排除する…

Jestの.toBeDefined()マッチャー

Jestの .toBeDefined() マッチャーを知った。 最初見たときは何を検証しているのか分からなかったが、ドキュメントを読んだら当たり前すぎた。 https://jestjs.io/ja/docs/expect#tobedefined 変数が undefined ではないことを検証するには、.toBeDefined を…

Next.jsのgetInitialPropsの実行順序

Next.jsのPage ComponentとCustom App ComponentとCustom Document ComponentのgetInitialPropsの実行順序を整理する。 // pages/index.tsx ... Home.getInitialProps = async (ctx: NextPageContext) => { console.log("Home.getInitialProps"); return { h…

GraphQL Directiveを使って三項演算子

GraphQLのDirectiveという機能を使って三項演算子を再現する。 実行環境にはhttps://graphql.org/learn/queries/#directivesを使う(いつか動かなくなってしまうかもしれない)。 例ではwithFriends variableの真偽値を変えることによって、friends.nameを取…

Gitのsubmoduleを理解するためのインデックス

※ 自分の頭の中にインデックスを貼るための備忘録的な記事です。 仕事でGitのsubmoduleを使っているが、なんとなく使っているので改めて理解しようと思った。 「Git submodule」で検索して1番上に出てきたGit submodule の基礎 - Qiitaがかなり分かりやすか…