httpCache-Controlでprivateとno-storeを指定する理由
HTTP caching - HTTP | MDNについてのページを見てると 「ブラウザにしか保存させたくないキャッシュはno-storeだけじゃなくてprivateも必要やで」と書かれていました。 え？no-storeって付けたらキャッシ...
httphttpコンテンツネゴシエーションとは？わかりやすく
以下のMDNで「コンテンツネゴシエーション」について解説がありますが、 コンテンツネゴシエーション - HTTP | MDN 「初心者がこのページを見ても意味不明なのでは？」と思ったので、めちゃくちゃ簡単に説明してみます。 まず、コンテンツ...
文字コードつながった横線を表示する
ジョジョをセリフを書くにあって、つながった横線を書きたいと思いました。 結論からいうと、「けいせん」（罫線）と打って出てくる「─」を使うと表現できました。 ✅例 ド低脳がァ――――――――ッ!!（罫線の例） ド低脳がァ――――――――ッ!!...
作ったものバドミントン/テニス/卓球で使えるペア分けアプリの紹介【Pair Matcher】
以前、こういう風な👇アプリをつくりました。 アプリページ：Pair Matcher | スポーツや日常生活で、ペアの組み合わせを作成することができるアプリ もっといろいろな人に使ってほしいので、このアプリの紹介記事を書きたいと思います。 こ...
DappイーサリアムアドレスのTypeScriptの型
ethers.jsを見ても、イーサアドレスの型は存在しないっぽくて 「じゃあ作るしかないな」と思って書いてみました👇 class Brand { private IDENTITY!: T; } type Address = Brand<"A...
MySQLトランザクション分離レベルの違いをわかりやすく
毎回「なんだっけ」ってなるのでメモ。 トランザクション分離レベルとは？ トランザクションを複数同時に実行するとき、「どれだけ影響を分離させるか？」の設定のこと。 SERIALIZABLE (シリアライズ可能) 「絶対に分離する」なレベル。 ...
HTML/CSS/JavaScriptNext.jsアプリをTWA化してGoogle Playに公開するまでの手順
忘れそうなので手順をメモしておきます。 自分は以前、JavaでAndroidアプリを作ってGoogle Playで公開したことがあります。 なのでGoogle Playには以前から登録済みでした。 それによって、この記事では抜けている手順も...
HTML/CSS/JavaScriptデプロイしたアプリでSentryが動かない
SSGで個人開発アプリを作っていて、そのアプリを以下のような環境にデプロイしています。 本番：Cloudflare Pages 開発：Vercel このアプリに、エラー追跡のためにSentryを入れました。 そしてきちんとエラーが追跡できる...
HTML/CSS/JavaScriptZustand+persistでcustom classを保存する
たとえば、以下のようなclassがあるとします。 class Human { name: string; constructor(name:string){ this.name = name; } Hello(){ console.log(...
HTML/CSS/JavaScriptclassからメソッドを除いた型を作る【TypeScript】
以下のようなコードがあったとき、 class Human { constructor(public name: string){} SayHello(){ console.log(`こんにちは。私の名前は${this.name}です。`) ...
作ったものAlexaに「おやすみ」→部屋の電気を自動OFF＋LINE APIで「おやすみ」とメッセージ
Alexaに「おやすみ」や「おはよう」と呼びかけると、以下などを同時に実行できるようにして生活の質を上げた･･･という話を書きます。 部屋の電気を自動OFF LINE APIで家族に「おやすみ」とメッセージ ※WEBエンジニア向けの記事です...
Node.jsレンタルサーバーでNode.jsアプリを永続化する
Xserverのようなレンタルサーバー上で、Node.jsのWebアプリを永続化する方法について調べたメモ。 Node.js＝シングルプロセス・シングルスレッド Node.jsは、シングルプロセス・シングルスレッドです。 なので、マルチコア...
読んだ本「実践Firestore」を読んだ感想 ⭐⭐⭐⭐⭐
「実践Firestore」という本を読んだ。 結論からいうと、神本だった。 書評 思ったこと箇条書き。 どんな本か Firestoreを中心に、Firebaseをざっくり学べる本 読者想定 たぶん「WEBエンジニア経験1年以上あります。RD...
その他LINEグループのIDを確認する方法【TypeScript】
LINEのMessage APIを使って、 BotをグループAに招待する BotからグループAに対して「hoge」と送信したい みたいにしようと思いました。 ですが、これをする場合、グループAのグループIDとやらを取得しないといけないらしい...
AWSserverless frameworkでLambdaにExpressをデプロイ
serverless frameworkというツールを使えば、LambdaにExpress（Node.js）のコードを簡単にデプロイできるよ！ ･･という記事を書きます。 成果物がこちら👇 penpendayo/aws-node-expre...
HTML/CSS/JavaScriptTypeScript＋モノレポで型がなぜかanyになった
以下のようなディレクトリ構成で、 └📁backend └📝tsconfig.json └📝teamA.ts └📁frontend └📝tsconfig.json └📝team.type.ts └📝member.type.ts ファ...
その他TwitterのOAuth認証でlocalhostと127.0.0.1が入力できない問題
以前からlocalhostは登録できなかったらしいけど、127.0.0.1なら登録できてたらしい。 でも今回試してみると、127.0.0.1も登録できなくなってるっぽかった👇 対策1. hostsファイルを使う hostsファイルは「このド...
React【Next.js】You may need an appropriate loader to handle this file type, なエラー
Next.jsで以下のようなエラーが出ました。 error - ../backend/src/member/dto/hoge.ts Module parse failed: Unexpected token (24:6) You may n...
HTML/CSS/JavaScriptgrid-template-columnsの違い【auto-fit、auto-fill】
デモページ（ソース） 上から順に、以下のとおりです。 grid-template-columns: repeat(3, minmax(250px, 1fr)); 絶対に3カラムになる。 grid-template-columns: rep...
HTML/CSS/JavaScriptモノレポでVScodeのimport補完をうまく機能させる
たとえば、以下のような構成のモノレポがあるとします。 └📁backend（たとえばNestJS） └🔵user.type.ts └📝tsconfig.json └📁frontend（たとえばNext.js） └🟣hoge.ts └📝...
その他複数のGitHubリポジトリのスターの推移数を比較できる「GitHub Star History」
「GitHub Star History」という素晴らしいサイトを見つけたのでメモ。 GitHub Star Historyとは？ 指定したGitHubリポジトリのスターの増加数をグラフにして表示できるサイトです。 たとえば ライブラリA ...
HTML/CSS/JavaScript[改]Google翻訳でページを翻訳すると語順がめちゃくちゃになるのを回避するブックマークレット
以下のページ様の改良なのですが Google翻訳でページを翻訳すると語順がめちゃくちゃになるのを回避するブックマークレット | 迫真の氷結晶 こちらのページ様のブックマークレットだと、以下のようなHTMLもspanに変換されてしまい、コード...
ReactNext.jsのapp directoryでProviderを設定する
Next.js13のβ機能であるapp directoryを試しています。 以前のバージョンでは、_app.tsxにProvider系（たとえばReact QueryのQueryClientProviderだったり、RecoilのRecoi...
Node.jsレンタルサーバーのMySQLに他サーバーからSSH＋Node.jsで接続する
レンタルサーバー（たとえばXサーバー）のMySQLに、他サーバーにデプロイしたNode.jsアプリから接続する方法についてメモ。 前知識 基本的に、どのレンタルサーバーも外部から直接MySQLに接続することは許可していないらしい。 たとえば...
HTML/CSS/JavaScriptTypeScriptで自作の型定義ファイルを追加する
「あんまり分かってないけどこう書いたらなぜか動いた」くらいの理解度なので ベストプラクティスではない可能性があるので注意してください。 tunnel-sshというnpmパッケージを使おうと思いました。 でも型定義ファイルが提供されていません...
読んだ本「作って学ぶ Next.js/React Webサイト構築」を読んだ感想 ⭐⭐
エビスコムさんの「作って学ぶ Next.js/React Webサイト構築」という本を読んだ。 結論からいうと、微妙だった。 書評 どんな本か ”WEB制作者”向けのNext.jsの使い方を”浅く”学べる本 （WEB開発者向けではない） 読...
読んだ本「図解！TypeScriptのツボとコツがゼッタイにわかる本」を読んだ感想 ⭐
「図解！TypeScriptのツボとコツがゼッタイにわかる本」という本を読んだ。 結論からいうと、微妙だった。 書評 どんな本か TypeScriptのことをすごく浅く学べる本 読者想定 たぶん「プログラミングやったことないです」みたいな人...
読んだ本「プロを目指す人のためのTypeScript入門」を読んだ感想 ⭐⭐⭐⭐⭐
「プロを目指す人のためのTypeScript入門」という本を読んだ。 結論からいうと、神本だった。 書評 Web業界で有名な「uhyo」さんが書いてる本なので、どうせ神本だろうなと思ってたのですが、案の定でした。 どんな本か TypeScr...
読んだ本「知識ゼロから学ぶソフトウェアテスト」を読んだ感想 ⭐⭐
「知識ゼロから学ぶソフトウェアテスト」という本を読んだ。 結論からいうと、微妙だった。 書評 書いてる内容は良いんだけど、気になる部分が多すぎて「うーん･･･」って感じでした。 どんな本か ソフトウェア開発における「テスト」の基本的な考え方...
その他ステップイン、ステップアウト、ステップオーバーの違い
VScode や Chromeのデバッグ機能を使うときに 「これってどれがどういう意味なんだっけ･･」ってなるのでメモ。 違い ステップイン →関数parentの中にいて、今いる行が関数child();のとき、関数childの中に入っていく...