はてなブックマーク

はじめに 最初はなんとなくで書いていたDockerfileなのですが、社内用にベストプラクティスを整理するタイミングがあったので、実際にNode.js + TypeScriptでアプリケーションを作成しながらまとめることにしました。 この記事でフォーカスするのは、 Dockerfileのベストプラクティスそのものの詳細ではなく、それらを整理と「結局どう実装すんねん？」ってところです。 主に以下の内容を参考にしています。 想定読者 Node.jsにおけるDockerfileのベストプラクティスの具体を知りたい方についてはピッタリだと思いますが、その他の言語でも参考になる部分はあると思います。 本記事では、各用語やベストプラクティスの詳細は記載しませんが、該当箇所へのリンクを載せているので必要に応じて参照してください。 また、この記事に書いていない内容で、上記3つの記事に書かれているベストプラ

はじめに 本記事では、命題論理の定理であるド・モルガンの法則を、TypeScript を用いて証明することを目指します。 ド・モルガンの法則とは、任意の命題 P, Q について、 \neg (P \lor Q) \leftrightarrow \neg P \land \neg Q \\ \neg (P \land Q) \leftrightarrow \neg P \lor \neg Q が成り立つことを言います。 さて証明です。命題の真偽のみに興味があるので、P, Q を p: boolean, q: boolean で表現し、全パターン試してみればいいわけです。\neg は !、\land は &&、\lor は ||、 \leftrightarrow は === と対応づけることができます。 const booleans = [true, false] booleans.forEa

何についての話か すでに散々書かれた内容だが、アプリケーションの UI を組む上で、ボタンの文言は「名詞(体言止め)」を使うか、「動詞(〇〇する)」を用いるかの話。 (例) 「保存」or「保存する」 「投稿を削除」or「投稿を削除する」 なんとなく手癖で「名詞(体言止め)」を使っていたが、しっかりルールを決めたいと思ったので調べつつ考えをまとめた。 前提 この記事でいう動詞とは、「〇〇する」で表せるもののことを指す 「戻る」「進む」など「〇〇する」の形でないものの扱いについては、また別の機会にまとめる 結論 基本的には名詞 動詞が良い場合もある そのアクションがプロダクトにとって大きな意味がある場合 そのアクションを自分ごととして捉えてほしい場合 名詞の特徴 ユーザーの認知負荷を軽減できる 当たり前だが、文字数を減らせるため、ユーザーの認知負荷を軽減できる。 ボタンを小さくできる これはデ

mutexの桝田です！ Reactのデータフェッチに、Vercel社が提供する「SWR」やTanStackコミュニティが提供する「React Query（TanStack Query）」が使われることが多くなってきています。 これらのライブラリは単なるフェッチだけでなく、キャッシュやデータの更新を担ってくれます。また、Reactが志向する「宣言的」な記述を体現できることも大きなメリットです。 本稿では、（我々が採用する）React Queryにフォーカスし、React Queryを使って実現している状態管理について説明します。SWRを普段お使いの方に関してもかなり共通する部分が多いのではないかと思います。 1. 対象読者 Reactのデータフェッチライブラリの使用を検討している方 普段SWRやReact Queryを使用している方 普段Reactを使用するすべての方

最近では、環境別に.env.development や.env.production などのファイルを作って運用する形態も増えています。 弊社では、TypeScript+Node.js によるバックエンド開発をしていますが、node では process.env で環境変数を参照します。しかし、process.env の型は 以下のように定義されており、型付けが弱く、補完が効かないという難点があります。また、string しか表現できないため、数値などはパースする必要があるのも面倒です。

フロントエンド開発は一般的に複雑性との戦いです。放ったらかしにしておくとますます複雑になり、変更するのが難しくなります。これまでにも、このような複雑さをどうにかして制御しようとして、Atomic Designをはじめとした様々な設計手法（デザインパターン）が考えられてきました。 しかし、React / Next.js を使ってチーム開発を行う際に、現状のデザインパターンでの運用では「どうもうまくいかないな」と思う場面に多々遭遇しました。そのような経験を踏まえて、「コンポーネントをどのように設計するか」「どのようにディレクトリを分けるか」を徹底的に考え、新しいデザインパターン「Tree Design」にまとめました。 Tree Design はまだまだ仮説段階です。今後弊社チームで運用していく中でブラッシュアップする予定です。しかし、他のフロントエンド開発チームがデザインパターンを再考する際