なんでもノート

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

技術記事

依存パッケージを更新することなく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がかなり分かりやすか…

続・WebP対応ブラウザを判定する

WebP対応ブラウザかサーバーサイドで判定する - なんでもノートでWebP対応ブラウザをサーバーサイドで判定する方法を調べた。Acceptヘッダーに image/webp が含まれているかどうかで判定する方法をまとめた。 これ以外にUser-Agentで判定する方法がある。Web…

WebP対応ブラウザかサーバーサイドで判定する

WebP対応ブラウザかどうかをサーバーサイドで判定する方法を調べた。 判定方法 Webサービス上の画像変換とWebPの利用について | メルカリエンジニアリング が分かりやすかった。 おそらく最も一般的なのがAcceptヘッダーを使う方法だと思います。 ...(中略…

transitionendイベントとanimationendイベント

最近transitionendイベントとanimationendイベントを知った。 transitionendイベントはCSSトランジッションが終わったときに発生する。 HTMLElement: transitionend イベント - Web API | MDN 最初書いたときはtransitionedとタイポした。過去形を表すedでは…

Reactのイベントハンドラの命名

Reactのイベントハンドラの命名規則はプロジェクト、実装者によってかなりばらつきがあるように思う。以下、今まで見たことがある命名一覧(例:削除ボタンのclickイベントハンドラ)。 onClick onClickDelete onClickDeleteButton onDeleteButtonClicked ha…

Reactのコンポーネントのpropsの露出は控えめに

Reactのコンポーネントのpropsの露出は控えめにした方がいい気がする。ここでpropsの露出とは、子コンポーネントのpropsや子要素の属性を親コンポーネントのpropsにそのまま定義することを言う。現時点では「気がする」レベル。 新しいコンポーネントを作成…

自分が出したPRのコードにコメントしすぎない

PR = プルリクエスト。GitHubのPRの話。 自分が出したPRのコードにコメントをすることがある。レビュアーがレビューしやすいように補足説明している。自分以外でもこのようなPRを見かける。 それ、PRではなくコードにコメントを残すべきでは? と、ふと思っ…