ひびのログ

日々ではないけどログを出力していくブログ

その date-fns-tz、本当に必要?

実は date-fns で事足りるというケースが多いよ、という話。 date-fns-tz はどういうライブラリ? date-fns-tz の README より引用。 Working with UTC or ISO date strings is easy, and so is working with JS dates when all times are displayed in a us…

個人的な名言集

仕事において、自分が名言だなって思った言葉をリスト化する。 定期的に見直して思い出すことで強くなれる。 事実とそれ以外を分けて話す 「なぜ」を考える 具体と抽象 相手の時間を使わせるな ロジカルシンキング・テクニカルライティング ロジックツリー …

SPA でユーザーに新しいコードを使ってもらうための方法を検討した

なぜやるのか SPA は、新しいコードがデプロイされた後もリロードしない限り古いコードで動き続ける。 例えば古い API を廃止したいのに、古いコードで使い続けているユーザーがいると困る。 新しいコードがあったら新しいコードを使うようにするための方法…

エンジニアが「THE MODEL」を読んでみた - 内容まとめ&感想

読んだ本 THE MODEL(MarkeZine BOOKS) マーケティング・インサイドセールス・営業・カスタマーサクセスの共業プロセス | 福田 康隆 | セールス・営業 | Kindleストア | Amazon SLG(Sales-Led Growth:セールス主導の営業手法)の教科書って言われているら…

Vue.js + dialog 要素で使いやすいモーダルダイアログ

使いやすい(個人の感想)(人による) 考えたこと せっかく <dialog> があるので使いたい props に boolean を渡したらダイアログが開閉する もちろんモーダルで テキストだけ設定すれば使えるようにしたい フォームなどを表示できるように slot も渡せるようにした</dialog>…

型引数が整数かどうか調べる型関数

を作ったのでご紹介。 先人がいそうだけど、自分なりに考えて作ったので残しておく。 コード Playground Link type Num = `${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 0}` type Token = `${Num | "-" | "+"}` type IsInt<N extends string> = N extends Num ? true : N extends `$</n>…

スペルを間違えやすいやつ

エンジニアたるもの、こういうところにも気を配って然るべき やりがちなのでメモの意味も込めて togetter.com JavaScript, TypeScript Firefox Facebook YouTube Twitter Homebrew ESLint Stylelint GitHub callback(一般名詞) Salesforce Datadog UI Flow…

Git Hooks を複数実行したかった

何がしたかったのか Git でコミットをする前に、コミットに使われるユーザーの名前を表示したかった。 なぜ? 会社の PC で、会社のリポジトリだけでなく自分の個人リポジトリにもアクセスしている。 具体的には、dotfiles を GitHub で管理しているのでそれ…

「エンジニアリング組織論への招待」内容まとめ&感想

今回読んだ本はこれ Chapter 1 - 思考のリファクタリング 個人の話 「エンジニアリング」とは 「実現の科学」といえる 要求に含まれる「曖昧さ」を減らして、実際のものとして具体化する(「具体性・明確さ」を増やす)行為 「不確実性を削減し、秩序を作る…

コードレビューの複雑度を数値化しようとしている

コードレビューをするときに、「これは明らかに一回のコードレビューで見られる量じゃない」という PR が飛んでくることがある。 いい感じに評価できないかと思って、いい感じの計算式を作ってみた。 PR の複雑度を減らしたほうがいい理由 レビュワーの負担…

SolidJS に入門した

いつもは Vue.js をやってるけど、たまには他のものも触ってみたい。 React も触ってるけど、もっといい感じのやつがほしい。 と思っていたところにいい感じのやつを発見(前から知ってたけど)。 SolidJS とは View ライブラリ。 React みたいに JSX を使う…

個人振り返りを毎月やっている話

まえがき 仕事をしていく中で、「先週何やってたっけ」や「何か改善したかったんだけど忘れた」と思うことが多々あった。 そこで、「毎月振り返りをやる」というアクション案が出た。 個人でやったことを振り返り、思ったことなどをメモしておこうという作戦…

ドキュメント作成がうまくなるための情報まとめ

エンジニアとして仕事をする中で、ドキュメントを書くということが非常に重要であると度々感じていた。 これまでドキュメントライティングを学んできた中で役に立った記事や書籍、そしてキーワードとおすすめの学習順を紹介する。 キーワード ロジカルシンキ…

WCAG 超まとめ

WCAG 2.1 を読んで超短縮してまとめたものです Abstract WCAG とは Web Content Accessibility Guidelines の略 このガイドラインには、ウェブコンテンツをよりアクセシブルにするための推奨事項が載っている なぜ WCAG があるのか このガイドラインに従うと…

フロントエンド開発の流れ

フロントエンドのコードをいじるときは、だいたいこういう流れでやるとよさそうというのを書いたものです。 あくまで「自分はこう思う」という一例です。 特にフロントエンド開発をするとき固有の事情について記載してあります。 フレームワークは Vue.js で…

英語入門

「英語の学び方」を学ぶ記事。 エンジニア向けに作ったけど誰にでも刺さる内容になってた。 いちばん大事なこと 楽しむ 「勉強」と捉えてしまうと楽しくない。 そして続かない。 後述するが、英語学習は日々のトレーニングが重要なので、モチベーションを保…

CSS ではショートハンドの使用には注意しなければいけないという話

CSS

複数のプロパティをまとめて指定できるショートハンド。 自分も気軽に利用していたが、詳しく調べてみると気をつけなければいけない仕様が結構あり、なるべく使わないほうがいいのではないかと感じた。 対象 あらゆるショートハンドプロパティ。 all, animat…

GAS のスニペット

基本的にほとんどコピペで動くようになっているはず Slack に Webhook 通知する const sendWebhook = (webhookUrl, payload) => { const options = { method: 'post', contentType: 'application/json', payload: JSON.stringify(payload), } UrlFetchApp.fe…

BFF(Backend for Frontend)とはなんなのか

BFF(Backend for Frontend)という言葉を気軽に使っているが、結局なんなのか分かってなかったので、ちゃんと本を読んで理解してみた。 読んだ本 マイクロサービスアーキテクチャ 第2版 雑な要約 「14 章 UI」の「14.8 制約」以降のまとめ。 前提 デスクト…

本の読み方

国語の教科書のように最初から最後まで本を読んでいると、一冊読むのに凄まじい時間を消費してしまう。 そんなことをせず、効率的に本を読んで知識を仕入れるための方法を解説する。 忙しい人は「TL; DR」だけ読んだらいいけど、全部読んだほうが時短できる…

「ソフトウェアテストの教科書」内容まとめ&感想

本 【この1冊でよくわかる】 ソフトウェアテストの教科書 [増補改訂 第2版] https://www.amazon.co.jp/dp/481560875X TL; DR ソフトウェアテストの目的 ソフトウェアの欠陥を取り除く ソフトウェアがユーザーの要求を満たせるようにする ソフトウェアが顧客…

シェル芸ロードマップ

シェル芸(シェルコマンド)の使い方を覚えるための課題を作ってみた。 内容は「自分はこんな感じで学んでいったような気がする」という完全なる主観。 課題 ファイル一覧を出す ls とよく使うオプション a, l, t, 1 ls のヘルプを見る ls --help, man ls ls…

mp3 ファイルのメタ情報に入っているタイトルを CLI で一括変更

iTunes で複数の関連する CD を取り込んだのだが、曲のタイトルが統一されていなかった。 具体的には、「[CD 番号]-[トラック番号]」みたいになってほしかったのに、1 つの CD だけ「トラックxx」みたいな形式でインポートされてしまった。 ファイル名を変え…

JavaScript に入るかもしれない「Temporal」とは何なのか、使えるのか?

Temporal とは JavaScript で日付を扱うための新しい API。 github.com ポリフィルが 2 つあって、1 つはブラウザでポリフィルが試せる。 www.npmjs.com 現在のステータスは stage 3 なので、普通はいくつかのランタイムで実装されれば stage 4 になり、晴れ…

ブックマークレット化するスクリプト

FILE_PATH="ファイルパス"; echo 'javascript:(async () => {' "$(deno bundle ${FILE_PATH} | egrep -v '^// ' | tr -d '\n' | gsed -r -e 's/ +/ /g')" '})()' | pbcopy TS をコンパイルするときは // @ts-nocheck をつけてあげれば型チェックを無効にでき…

メッセージを伝えるときのポイント

これまで「伝える」ということについて自分が学んだことをまとめた すべてできているわけではないし、これが 100% あっているというわけではないし、メッセージの種類によってもポイントは違ってくる 不足しているものがあるはずなので追記していきたい ポイ…

「技術者のためのテクニカルライティング入門講座」内容まとめ&感想

読んだ本 技術者のためのテクニカルライティング入門講座 https://www.amazon.co.jp/dp/B07JHZMH9C 以前読んでまとめていたものがあったのでブログに投下。 本の要約 読みやすい文章を書くために 読みづらい文書になる要素 一文が長い 自分視点で書いている …

Next.js で作ったアプリを爆速で公開する(Firebase CLI framework-awareness)

こちらのツールを使用すると、Next.js で作ったアプリを Firebase に公開するのがめちゃめちゃ簡単にできました。 github.com Google 社員が管理しているものの、Firebase 公式ツールではないし現時点では experimental なので、理解した上で利用してくださ…

npm ってなんだ

一言に「npm」って言っても実はいろんな意味があるのでまとめた そもそもなんの略? Node Package Manager Node.js のパッケージを管理するやつ パッケージ? 使い回せるようにしたコード 誰かが作って公開している関数とかクラスとかそういうやつ Node.js …

HTML には自己終了タグがない

自己終了タグとは、<タグ名 /> のように、/> で終わっているタグのこと。 ……だと思っていた。 ふとしたタイミングで「自己終了タグが書けるのはどの HTML タグなんだろう」と疑問に思ったので調べてみた。 仕様を調べてみる HTML のシンタックスはこちらに記…