TypeScript

スポンサーリンク
React.js/Next.js

【Next.js】jestを使ったユニットテストを導入する(TypeScript利用)

環境 next 13.2.1 jest 29.5.0 参考ページ 今回の記事は、Next.jsのテストに関するページをもとに作成している。 テスト対象のコンポーネント 今回のテスト対象コンポーネントは以下。 ボタンと言いつつ、ただのh3タグ...
JavaScript

Cannot find module ‘./manifest.json’. Consider using ‘–resolveJsonModule’ to import module with ‘.json’ extension.

原因 .jsonファイルをimportしようとするとTypeScriptの設定によって怒られる。 解決策 以下2点を確認すればOK。 tsconfig.jsonの設定値で、esolveJsonModuleを有効にする tsconfig.js...
設計

【やさしいDDD入門 第2章】エンティティとは

エンティティとは 値オブジェクトと同じく、ざっくり言うと現実世界の物をクラスで表したもの。 他の用語であるエンティティ データベースやJavaでもこの単語を利用するが、DDDにおいては意味合いが異なる。 上記ではデータベースの値をマッピング...
設計

【やさしいDDD入門 第1章】値オブジェクトとは

値オブジェクトとは ざっくり言うと、現実世界の物をクラスで表現したもの。 エンティティと似ているが、その違いについてはエンティティの章で解説する。 例:ユーザー名 例えば、ユーザー名について考えてみる。 特に何も考えなければ、ユーザー名は以...
React.js/Next.js

【Next.js/React.js】TypeScriptで書かれたプロジェクトにESLintとPrettierを導入する

概要 Next.jsTypeScript という条件のプロジェクトに、いい感じに静的解析ツールとコードフォーマッターを入れる。 ESLint(静的解析ツール)の導入 公式ページを参考に導入する。 インストール $ npm install e...
JavaScript

ESLint/Prettierとは何か、両者の違いについて解説

ESLintとは ESLintはJavaScriptの静的解析ツールで、コードの問題点(バグの可能性があるコードなど)を発見、修正してくれる。 例えば下記のような指摘をしてくれる。 letを使っているが再代入していないので、constを使う...
React.js/Next.js

【Next.js】SCSSを使う環境を構築する(TypeScript利用)

まずはnpm install こちらの公式ドキュメントに記載されている通り、sassのインストールを行う。 $ npm install sass scssファイルを作成 .scssの拡張子でcss modulesを作成する。 ./style...
スポンサーリンク