React.js/Next.js【Next.js】jestを使ったユニットテストを導入する(TypeScript利用) 環境 next 13.2.1 jest 29.5.0 参考ページ 今回の記事は、Next.jsのテストに関するページをもとに作成している。 テスト対象のコンポーネント 今回のテスト対象コンポーネントは以下。 ボタンと言いつつ、ただのh3タグ... 2023.06.11React.js/Next.js
JavaScriptCannot find module ‘./manifest.json’. Consider using ‘–resolveJsonModule’ to import module with ‘.json’ extension. 原因 .jsonファイルをimportしようとするとTypeScriptの設定によって怒られる。 解決策 以下2点を確認すればOK。 tsconfig.jsonの設定値で、esolveJsonModuleを有効にする tsconfig.js... 2023.03.25JavaScript
設計【やさしいDDD入門 第2章】エンティティとは エンティティとは 値オブジェクトと同じく、ざっくり言うと現実世界の物をクラスで表したもの。 他の用語であるエンティティ データベースやJavaでもこの単語を利用するが、DDDにおいては意味合いが異なる。 上記ではデータベースの値をマッピング... 2021.11.03設計
設計【やさしいDDD入門 第1章】値オブジェクトとは 値オブジェクトとは ざっくり言うと、現実世界の物をクラスで表現したもの。 エンティティと似ているが、その違いについてはエンティティの章で解説する。 例:ユーザー名 例えば、ユーザー名について考えてみる。 特に何も考えなければ、ユーザー名は以... 2021.09.19設計
React.js/Next.js【Next.js/React.js】TypeScriptで書かれたプロジェクトにESLintとPrettierを導入する 概要 Next.jsTypeScript という条件のプロジェクトに、いい感じに静的解析ツールとコードフォーマッターを入れる。 ESLint(静的解析ツール)の導入 公式ページを参考に導入する。 インストール $ npm install e... 2021.05.22React.js/Next.js
JavaScriptESLint/Prettierとは何か、両者の違いについて解説 ESLintとは ESLintはJavaScriptの静的解析ツールで、コードの問題点(バグの可能性があるコードなど)を発見、修正してくれる。 例えば下記のような指摘をしてくれる。 letを使っているが再代入していないので、constを使う... 2021.05.19JavaScript
React.js/Next.js【Next.js】SCSSを使う環境を構築する(TypeScript利用) まずはnpm install こちらの公式ドキュメントに記載されている通り、sassのインストールを行う。 $ npm install sass scssファイルを作成 .scssの拡張子でcss modulesを作成する。 ./style... 2021.04.29React.js/Next.js