thasmto's blog

フロントエンドエンジニアやってます。プログラマーとして学んだことや考えていることを投稿するブログです。

npm init や yarn create でジェネレータを利用できる理由

Next.js や Slidev などのフロントエンドのOSSで npm init slidev や npx create-next-app のようなテンプレートからプロジェクト作成するためのジェネレータが用意されており、なぜ npm init や npx など複数の方法でジェネレータを利用できるのか気になっ…

Fish shellを導入した時の手順メモ

Fish インストール brew install fish iterm2起動時のシェルをfishに変更 ターミナルでwhich fishを実行して、fish実行ファイルの場所を確認 iterm2 → preferences → profiles → general → command Custom Shellを選択 1で確認したfish実行ファイルのパスを…

Emotion コーディングルール案

はじめに 社内のプロジェクトでCSSinJSライブラ入りとしてemotionを導入したのでコーディングルールを考えてみました。 プロジェクトで使用する技術 package version next v11.1.2 typescript v4.4.3 @emotion/react v11.4.1 css関数を使ってスタイルを定義…

コンポーネント設計の基礎

ソフトウェアコンポーネントについて、Wikipediaでは以下のように記載されています。 Wikipedia:ソフトウェアコンポーネント 事前に製作されたコンポーネント群を組み合わせて、電気製品や機械製品を作るようにソフトウェアを作れることを強調する。 このよ…

コードリーディング reg-suit/reg-keygen-git-hash-plugin

業務でビジュアルリグレッションテストの導入を進めており、画像の比較と差分出力のツールとしてNode.jsで動くreg-suitを使用することになりました。 reg-suitではGitのコミットを辿り、どのコミットを比較対象にするか選択することができる「reg-keygen-git…

テスト駆動開発 第一部

テスト駆動開発の第一部を読んだのでそのメモ。 TDDのゴール 「動作するきれいなコード」 (以下、本書の引用) 「動作するきれいなコード」。RonJeffriesのこの簡潔な言葉が、テスト駆動開発(TDD)のゴールだ。動作するきれいなコードはあらゆる意味で価値…

TypeScriptでUnion型の判別

実際に案件でTypeScriptのリファクタリングを行ったのでざっくりメモ。 もともとのコードは以下のような内容。 type Form = CheckForm | FreeTextForm; interface BaseForm { id: number; type: 'checkbox' | 'freeText'; description: string; } interface …

grepコマンド基礎

シェルスクリプトやコマンドを使った開発や作業の効率化に興味があり、 Software Design 2021年6月号に掲載されていた「シェルとコマンドで使う正規表現」という章を読んだのでまとめる。 基本正規表現(BRE) grepでデフォルトで使用されている正規表現は、…