TypeScript

【Remix】loaderとは

loaderとはloader関数は「レンダリング前にサーバーサイドでデータを取得し、HTMLに埋め込んで表示したい」ときに利用する関数である。レンダリング時に必要なデータはこれを使って取得すると覚えておけば良い。基本的な使い方jsonpla...

【NestJS】初心者がNestJSを用いてGraphQLのAPIを構築をする

NestJSとはTypeScriptを用いてAPIを構築したいときのフレームワークの一つ。何もせずに利用し始めるとREST APIが使えるが、GraphQLのライブラリをいれることによりGraphQLのエンドポイントを作ることが可能。今回や...

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

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

React.js/Next.js

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

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

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

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

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

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

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

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

React.js/Next.js

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

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

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

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

React.js/Next.js