今年は１年間の振り返りネタがあるので書き残しておきます。 「URL化」を意識するようになった１年 今年１月に fukabori.fm というポッドキャストに出演されていた @t_wada さんの回（2019年2月）を聞いて、それ以降「URL化」を意識するようになりました。 …

なぜやろうと思ったのか モチベーションの変化 ネタの集め方 なぜ「はてな」？ やってみてどうだったか 得た知見が検索可能になった １年間の成長が目に見える 業務のwikiを書くのが早くなった（苦じゃなくなった） 今後の改善点 まとめ 今年の1月6日の仕事…

とあるAPIで 次のようなメッセージ認証を行うサービスがあった 次の値を\n区切りで結合した文字列にする HTTPリクエストメソッド (GET or POST) URLのパス (e.g. /path/to/api/{id}) クエリパラメータ (e.g. targets=default). 送信リクエストのUTCタイムス…

とあるAPIで HMAC-SHA512 でメッセージ認証を行うサービスがあった HMAC-SHA512がなんなのか知らなかったので調べた HMACとは HMACは一方向ハッシュ関数を用いてメッセージ認証コードを構成する手法（RFC2104） HMACのHは、Hashを意味する HMACでは、強い一…

Chrome87へのバージョンアップした上で、あるサイトで検索などを実行したときに「送信しようとしている情報は保護されません」と表示される事象にでくわした これはChrome87のバージョンアップで、POST処理を実行したときにHTTPSとHTTPが混在するstrict-orig…

大学生と話す機会があったとき、「リーンローンチパッドをやって」というワードが出て「あぁーあれね」って雰囲気で話したけど全然しらなかったので調べた こちらのスライドが参考になった リーンローンチパッド特別講義（公開用） from Takashi Tsutsumi ww…

Elasticsearchをつかった検索で、複数のフィールドを検索対象とするクエリを発行したい、かつ、完全一致する場合はそのdocを通常の2倍のスコアにしたい このとき、ESのMulti-matchクエリを使うことを検討してみた www.elastic.co 基本的な使い方 this is a t…

JavaのライブラリのMapStructを使うことになったので、ざっくり調べる mapstruct.org MapStruct は Annotation Processor を使って、Javaのオブジェクト間のマッピングに対するコードをコンパイル時に自動生成するマッピングライブラリ 複数のレイヤーで構成…

2秒ごとにカウンタをインクリメントするカウンターアプリを例にuseCallbackの落とし穴について教えてもらった 例とするカウンターアプリの機能 ・2秒ごとにカウンタをインクリメントする ・リセットボタンが押されたら ・カウンタを0にする ・インターバルを…

以前に調査した、GCSの大容量長期アーカイブ向け「Archive」クラスの調査不足によりやらかした uga-box.hatenablog.com 調査不足していたこと Archive Storageへのアクセスに対する認識 ライフサイクルでクラスを変更した場合の料金 早期削除 Archive Storag…

JavaScriptのクロージャと関数オブジェクトのお話を聞く機会があり、自分なりに整理してみた 先に関数オブジェクトについてまとめていたとき uga-box.hatenablog.com 関数オブジェクトは「実行時にnameとlengthをもったオブジェクトが作られる」とイメージす…

以前、useCallbackについて調べた uga-box.hatenablog.com ただ、このとき メモ化されたコンポーネント（不必要なレンダーを避けるために参照の同一性を見るよう最適化されたコンポーネント）にコールバックを渡す場合に便利 という部分がよく理解できていな…

「CDN-Cache-Control」 ヘッダという仕様が提案されていること知ったので調査する こちらの記事が参考になった asnokaze.hatenablog.com 中継サーバーのキャッシュはCache-Control: max-age, s-max-ageで制御できるが、CDNサーバー専用のキャッシュを制御す…

MSに申請したらIE11 で起動して表示したドメインであってもEdgeを起動するようにしてくれるみたい docs.microsoft.com Webサイト所有者はIE互換性リストに申請する必要があるとのこと ユーザーのフロー IEを開こうとすると、Microsoft Edgeにリダイレクトさ…

HTTP/1.1には仕様が新旧2つあって、この新旧の違いとしてCache-Controlが明確にHop-by-hopではないという記述がなくなったという話を聞いたのでメモしておく 古い方のRFC 2616ではHop-by-hopのヘッダーの記述がある https://tools.ietf.org/html/rfc2616#sec…

SWRの期間もCDN（Fastly）のキャッシュを使う場合はどうするべきかの話を聞いたので整理する stale-while-revalidate（SWR）を使うとmax-ageの期限が切れた状態でも、しばらくそのままキャッシュを利用し、かつ、裏で非同期でデータをフェッチさせておくこと…

例えば、Cache-Control: max-age=3000を指定した場合、Fastly のキャッシュサーバー、Fastly とブラウザ間のキャッシュサーバー、およびブラウザ自体がこのヘッダーに従う 自分のリソースを Fastly に永久的にキャッシュさせたいが、ブラウザがそのリソース…

JavaScriptの関数オブジェクトのお話を聞く機会があり、理解していたつもりだが深くはできていなかったことに気づいた なので、自分でももまとめてみる tc39.es 関数の定義方法 function add(x, y) { return x + y; } const add = function(x, y) { return x…

どの文脈かは忘れたが、multi-tenancyというワードを聞いたので調べた こちらの記事がわかりやすかった whatis.techtarget.com マルチテナンシーとは マルチテナンシーは、ソフトウェアアプリケーションの単一インスタンスが複数の顧客にサービスを提供する…

JavaScriptのクロージャのお話を聞く機会があり、理解していたつもりだが深くはできていなかったことに気づいた なので、自分でももまとめてみる Closure（関数閉包） ▼閉じた関数 自分が定義した引数/変数だけを使っている関数 function f (x, y) { const z…

同じdocのはずがscoreが違う謎の事象と遭遇した 具体的には tweetインデックスに以下のdocが入っている id user message likes 1 Aさん elasticsearch 14 2 Bさん elasticsearch 10 3 Cさん elasticsearch 12 4 Aさん elasticsearch 10 5 Bさん elasticsearc…

Storybook(v6.1.7)を導入する storybook.js.org 公式にあるコマンドを実行 $ npx sb init 実行すると以下のソースが生成される .storybook ├── main.js └── preview.js src/stories ├── Button.stories.tsx ├── Button.tsx ├── Header.stories.tsx ├── Heade…

以前、Firebase AuthenticationでGoogle認証を行う方法を調べた uga-box.hatenablog.com 今度は認証情報（JWT）を使って更新機能をつくりたい このときAuthorization ヘッダ付与したJWTの検証をFirebase Authentication Adminで検証する必要がある その方法…

Aleph.jsというワードを聞いたのでドキュメントを読んで軽くまとめてみた alephjs.org Aleph.jsはNext.jsにインスパイアされたDenoのReactフレームワーク 設定不要で、TypeScript、ESモジュールのインポート、ファイルシステムルーティング、SSRとSSG、 高速…

Next.jsのAPI Routesを使ってAPIサーバーをつくれることを知った uga-box.hatenablog.com このAPIでのやりとりに際し、認証機能やDBからデータを取得する場合のミドルウェアを考える このときにnext-connectを使うと簡単につくれそうなので調べてみた www.np…

API Routes は、Next.jsを使用してAPIを構築することができる機能 nextjs.org わざわざ別途サーバー用意しなくてもpages/apiにファイルをおくとそれがAPIのエンドポイントURLになるから便利 pages/ ├ blog/ │ └index.tsx ← http://localhost/blog のページ U…

Next.jsにstyled-componentsを導入したい styled-components側にNext.jsへの導入方法がちょろっとだけ書かれている styled-components.com そこにはサーバーサイド側でheadにスタイルを埋め込むため、pages/_document.jsに以下のコードをコピペしろとある ht…

Next.jsでtypescriptを導入したい はじめ方 nextjs.org 空のtsconfig.jsonをプロジェクトのルートに用意し、npm run devを実行するとNext.jsが検知してくれる # You'll see instructions like these: # # Please install typescript, @types/react, and @typ…

ページをローカライズする場合にはGoogleに言語別に翻訳されたページが複数あるということを伝える必要がある uga-box.hatenablog.com やり方は、headに以下を追加する <link rel="alternate" hreflang="lang_code" href="url_of_page" > Next.jsでheadに要素を埋め込むやり方を調査する nextjs.org ドキュメントの例ではnext</link>…

Next.jsで環境変数を扱いたい nextjs.org Next.jsは.env.localというファイルに変数を記載するとそれをprocess.env.に組み込んでくれるようになっているらしいので、例えば .env.localに DB_HOST=localhost DB_USER=myuser DB_PASS=mypassword と記載してお…