こちらは<a href="https://www.hoshico.dev/blog/nestjs-googleauth" target="_blank" rel="noopener noreferrer">前回の記事</a>のフロント側の実装になります。 ポイントとしては、 ①Googleログイン後にid_tokenとrefresh_tokenを取得する ②id_tokenが有効期限(1時間)を過ぎていた場合はrefresh_tokenを使用し、id_tokenを再取得する ※ 今回はauth-optionsのみの説明になります <h2 id="hb592ad2792">auth-options</h2><pre><code>import GoogleProvider from 'next-auth/providers/google';
import type { NextAuthOptions, Session } from 'next-auth';

export const authOptions: NextAuthOptions = {
 debug: true,
 session: { strategy: 'jwt' },
 providers: [
 // 1) providers内でGoogleProviderを指定する
 GoogleProvider({
 clientId: process.env.GOOGLE_CLIENT_ID!,
 clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
 authorization: { params: { access_type: 'offline', prompt: 'consent' } },
 }),
 ],
 callbacks: {
 async jwt({ token, account }) {
 if (account) {
 /*
 2) 初回ログイン後はこちらの処理が走ります。accountにGoogleの認証サーバーから取得した情報が入ってきます。
 　　id_tokenとrefresh_tokenをproviderに持たせます
 */
 return {
 access_token: account.access_token,
 expires_at: account.expires_at,
 refresh_token: account.refresh_token,
 user: token,
 id_token: account.id_token,
 };
 } else if (Date.now() &lt; (token.expires_at as number) * 1000) {
 　// 3) id_tokneの有効期限(1時間)内の場合
 return {
 ...token,
 };
 } else {
 if (!token.refresh_token) throw new Error('Missing refresh token');
　　　　　　　　
　　　　　　　　// 4) id_tokenの期限切れの場合
 try {
 const urlSerchParamsArgs: Record&lt;string, string&gt; = {
 client_id: process.env.GOOGLE_CLIENT_ID!,
 client_secret: process.env.GOOGLE_CLIENT_SECRET!,
 grant_type: 'refresh_token',
 refresh_token: token.refresh_token as string,
 };
　　　　　　　　　
　　　　　　　　　// 5) id_tokenを再取得しに行きます
 const response = await fetch('https://oauth2.googleapis.com/token', {
 headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
 body: new URLSearchParams(urlSerchParamsArgs),
 method: 'POST',
 });

 const tokens = await response.json();
 
 if (!response.ok) throw tokens;

 return {
 ...token, 
 access_token: tokens.access_token,
 expires_at: Math.floor(Date.now() / 1000 + tokens.expires_in),
 refresh_token: tokens.refresh_token ?? token.refresh_token,
 id_token: tokens.id_token,
 };
 } catch (error) {
 console.error('Error refreshing access token', error);
 return { ...token, error: 'RefreshAccessTokenError' as const };
 }
 }
 },
 session: ({ session, token }: { session: Session; token: any }) =&gt; {
 return {
 ...session,
 user: {
 name: token?.user?.name,
 email: token.user.email,
 image: token.user.picture,
 role: token.role,
 id_token: token.id_token,
 },
 };
 },
 },
};</code></pre> このようにすることで1時間以内のid_tokenを保持することができます

Nest.jsでGoogle認証(OAuth2.0)を使う【フロントエンド編】

フロントエンドがNext.jsでバックエンドがNest.jsのアプリケーションにおいて、Google認証を入れたいときのバックエンド側の実装をまとめてみました。 ※ フロントエンドの実装に関しては後日掲載します。 調べた中でいろんな実装方法があるようですが今回の実装方法としましては ①Next.js(フロントエンド)でAuth.jsを使用してGoogle認証をする ②認証後、id_tokenとrefresh_tokenが発行され request header経由でバックエンドにid_tokenを渡す ※ id_tokenは有効期限が1時間なので、期限切れの場合はrefresh_tokenを使用しid_tokenを再取得する ③バックエンド側のmiddlewareでrequest header内のid_tokenが有効なものかチェックする といった流れになります。 今回は、③のバックエンドのmiddlewareでのid_tokenのチェックを実際に見ていきます。 <h2 id="hd6273ca8d5">ミドルウェアを用意</h2>src &gt; middleware &gt; auth.middleware.ts<pre><code>import {
 Injectable,
 NestMiddleware,
 UnauthorizedException,
} from '@nestjs/common';
import { Request, Response, NextFunction } from 'express';

// 1) google-auth-libraryをインストールしておきます
import { OAuth2Client } from 'google-auth-library';


// 2) NestMiddlewareを継承したAuthMiddlewareを用意します。injectableも忘れずに！
@Injectable()
export class AuthMiddleware implements NestMiddleware {
 private readonly googleClient: OAuth2Client;
 // 3) Next.jsのGoogle認証の際に作成したclientIdをenvファイルから読み込みます
 constructor() {
 this.googleClient = new OAuth2Client(process.env.GOOGLE_CLIENT_ID);
 }
 async use(
 // 4) reqの中にuser情報を入れたかったので拡張しています
 req: Request &amp; { user: { name: string; email: string } },
 res: Response,
 next: NextFunction,
 ) {
 // 5) Authorizationリクエストヘッダーの中身を所得
 const auth = req.headers['authorization'];


 if (!auth) {
 throw new UnauthorizedException('Unauthorized');
 }

 // 6) フロントエンド側で &lt;type&gt; &lt;id_token&gt; 形で用意しています。今回はid_tokenのみ取得
 const items = auth.split(' ');
 const idToken = items[1];

 if (!idToken) {
 throw new UnauthorizedException('Unauthorized');
 }

 try {
 // 7) id_tokenとclientIdをgoogleClientのverifyIdTokenに渡すことで有効どうかチェックしてくれます
 const ticket = await this.googleClient.verifyIdToken({
 idToken: idToken,
 audience: process.env.GOOGLE_CLIENT_ID,
 });


 const payload = ticket.getPayload();
 const user = {
 name: payload.name,
 email: payload.email,
 };
 req.user = user;

 next();
 } catch (error) {
 throw new UnauthorizedException('Unauthorized');
 }
 }
}</code></pre> <h2 id="ha81cb5b9a5">moduleで適用</h2>AppModuleに以下のように書くことで この作成したmiddlewareを全体で適用することができます。 src &gt; app.module.ts<pre><code>import { MiddlewareConsumer, Module, NestModule } from '@nestjs/common';
// 省略
import { AuthMiddleware } from './middleware/auth.middleware';

@Module({
 // 省略
})

export class AppModule implements NestModule {
 configure(consumer: MiddlewareConsumer) {
 consumer.apply(AuthMiddleware).forRoutes('*');
 }
}</code></pre> 以上がNest.js側でのid_tokenの実装になります。

Nest.jsでGoogle認証(OAuth2.0)を使う

最近はNext.jsにおいてPages RouterではなくApp Routerを使う様になってきましたので 今回は以前作ったNext.js用のスニペットをApp Router仕様に変更していきたいと思います。 ちなみにですがスニペットに関して聞き馴染みがない方もいるかもしれないので一応説明しておくと 本来は「断片」「切れ端」みたな意味で、プログラミングにおいては簡単に切り離して再利用可能なものを指す様でが 簡単に呼び出せるテンプレートみたいなものだと思ってください。 例えば user &gt; page.tsx において"npage"と打ち込み <img src="https://images.microcms-assets.io/assets/18284c98be04489799d8c61e785bf180/538d606d458645778e053c7805605a8e/snippet_1.png" alt=""> enterを押すと <img src="https://images.microcms-assets.io/assets/18284c98be04489799d8c61e785bf180/23d6c6e2f99c416bb574cca6b59db80c/snippet_2.png" alt=""> ここまで自動で用意してくれる便利なショートカットだと思ってください。 では実際にスニペットを作ってみましょう <h2 id="hd6601e9604">page.tsx用のスニペット</h2>1つ目はNext.jsのpage.tsx用のスニペットで、特徴としては<ul><li>実際に記述するファイルが格納されているディレクトリ名が関数名になるようにしたい</li><li>その関数名の頭文字を大文字にしたい</li></ul>の2点にです では実際にスニペットの作成に入りましょう 1.まずはVSCode左下の歯車マークをクリックし、ユーザースニペットを選択 <img src="https://images.microcms-assets.io/assets/18284c98be04489799d8c61e785bf180/6f9729edc3054fd3a0d1403d19bb9385/vscode_1.png" alt=""> 2.上の検索で「typescriptreact.json」と入力してください <img src="https://images.microcms-assets.io/assets/18284c98be04489799d8c61e785bf180/4ba7d2741a6f4c8aa16cf5880b479826/vscode_2.png" alt=""> こちらのjsonファイルに"Next Page"から始まるコードを追加してください<pre><code>{
 // 何かしら記述があればそのままで！！
 // この後に記述を追加していくので末尾に","を追加してください
 "Next Page": {
		"prefix": "npage" ,
		"body": [
			"",
			"",
			"export default function ${TM_DIRECTORY/^.+\\\\/(.*)$/${1:/capitalize}/}() {",
			" return &lt;div className=''&gt;&lt;/div&gt;",
			"};",
			"",
		]
	}
}</code></pre> 今回は"npage"という呼び出し方にしていますが変更したい方は“prefix”を変更していただくことで呼び出し方を自由に変更できます また、関数式への変更や、最後にexport defaultを記述したいなどの変更もbodyを変更しいただくことで可能になります 僕は三行目からexport defaultが始まるようにしているのでそちらも””,の削除 or 追加で変更できます <h2 id="h6422bc5ed1">component用のスニペット</h2>続いてはコンポーネント用になります。 こちらの特徴としましては<ul><li>ファイル名が直接関数名になる</li><li>またinterfaceも用意</li><li>スニペット呼び出し後のカーソルの位置を指定</li></ul>という点です 以下の様に記述します<pre><code>	"React Next Component": {
		"prefix": "ncom" ,
		"body": [
			"",
			"interface Props {$0}",
			"",
			"export function ${TM_FILENAME_BASE/(.*)$/${1:/capitalize}/}(props:Props) {",
			" return &lt;div className=''&gt;&lt;/div&gt;",
			"};",
			"",
		]
	},</code></pre>呼び出した後のカーソルの初期位置は{$0}で指定されたとこになりますのでお好みで変更加えてみてください

Next.js App Router用のスニペットを作る

今回はMongoDBで集計する際に使用するaggregateに関して、基礎的なものをまとめておこうと思います。 ※ Aggregate Piplineのみ 今回は以下のようなMLBの選手成績のデータを用意しました。 obpは"出塁率"、slgは"長打率"で leagueに関してはALは"アメリカンリーグ"、NLは”ナショナルリーグ”になります。<pre><code>[
&nbsp; {
&nbsp; &nbsp; "_id": 1,
&nbsp; &nbsp; "name": "Ohtani",
&nbsp; &nbsp; "obp": 412,
&nbsp; &nbsp; "slg": 654,
&nbsp; &nbsp; "league": "AL",
&nbsp; },
&nbsp; {
&nbsp; &nbsp; "_id": 2,
&nbsp; &nbsp; "name": "Yoshida",
&nbsp; &nbsp; "obp": 338,
&nbsp; &nbsp; "slg": 445,
&nbsp; &nbsp; "league": "AL",
&nbsp; },
&nbsp; {
&nbsp; &nbsp; "_id": 3,
&nbsp; &nbsp; "name": "Betts",
&nbsp; &nbsp; "obp": 408,
&nbsp; &nbsp; "slg": 579,
&nbsp; &nbsp; "league": "NL",
&nbsp; },
&nbsp; {
&nbsp; &nbsp; "_id": 4,
&nbsp; &nbsp; "name": "AcunaJr",
&nbsp; &nbsp; "obp": 416,
&nbsp; &nbsp; "slg": 596,
&nbsp; &nbsp; "league": "NL",
&nbsp; }
]</code></pre> <h2 id="h1f787cfdef">$addFields</h2>addFieldsを使用することで、集計時にフィールドを追加することができます。 obp(出塁率)とslg(長打率)を足した値を新しく加えたopsというフィールドに出力したい場合は以下のようになります。 ($addで配列の中の要素を足し合わせることができます)<pre><code>db.collection.aggregate([
&nbsp; {
&nbsp; &nbsp; "$addFields": {
&nbsp; &nbsp; &nbsp; "ops": { 
&nbsp; &nbsp; &nbsp; &nbsp; $add: [
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "$obp",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "$slg"
&nbsp; &nbsp; &nbsp; &nbsp; ]
&nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; }
&nbsp; }
])</code></pre> 出力結果:<pre><code>[
&nbsp; {
&nbsp; &nbsp; "_id": 1,
&nbsp; &nbsp; "league": "AL",
&nbsp; &nbsp; "name": "Ohtani",
&nbsp; &nbsp; "obp": 412,
&nbsp; &nbsp; "ops": 1066,
&nbsp; &nbsp; "slg": 654
&nbsp; },
&nbsp; {
&nbsp; &nbsp; "_id": 2,
&nbsp; &nbsp; "league": "AL",
&nbsp; &nbsp; "name": "Yoshida",
&nbsp; &nbsp; "obp": 338,
&nbsp; &nbsp; "ops": 783,
&nbsp; &nbsp; "slg": 445
&nbsp; },
&nbsp; {
&nbsp; &nbsp; "_id": 3,
&nbsp; &nbsp; "league": "NL",
&nbsp; &nbsp; "name": "Betts",
&nbsp; &nbsp; "obp": 408,
&nbsp; &nbsp; "ops": 987,
&nbsp; &nbsp; "slg": 579
&nbsp; },
&nbsp; {
&nbsp; &nbsp; "_id": 4,
&nbsp; &nbsp; "league": "NL",
&nbsp; &nbsp; "name": "AcunaJr",
&nbsp; &nbsp; "obp": 416,
&nbsp; &nbsp; "ops": 1012,
&nbsp; &nbsp; "slg": 596
&nbsp; }
]</code></pre> 上記のようにopsが追加できました。 <h2 id="he691e5ffcd">$match</h2>$matchを使用することで、条件に合うものに絞り込むことができます。 今回は追加した先ほど追加したopsが.800を超える選手に絞り込むように$matchを使ってみます。<pre><code>db.collection.aggregate([
&nbsp; {
&nbsp; &nbsp; "$addFields": {
&nbsp; &nbsp; &nbsp; "ops": {
&nbsp; &nbsp; &nbsp; &nbsp; $add: [
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "$obp",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "$slg"
&nbsp; &nbsp; &nbsp; &nbsp; ]
&nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; }
&nbsp; },
　　　// 以下を追加
&nbsp; {
&nbsp; &nbsp; $match: {
&nbsp; &nbsp; &nbsp; "ops": {
&nbsp; &nbsp; &nbsp; &nbsp; $gt: 800
&nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; }
&nbsp; }
])</code></pre> 出力結果:<pre><code>[
&nbsp; {
&nbsp; &nbsp; "_id": 1,
&nbsp; &nbsp; "league": "AL",
&nbsp; &nbsp; "name": "Ohtani",
&nbsp; &nbsp; "obp": 412,
&nbsp; &nbsp; "ops": 1066,
&nbsp; &nbsp; "slg": 654
&nbsp; },
&nbsp; {
&nbsp; &nbsp; "_id": 3,
&nbsp; &nbsp; "league": "NL",
&nbsp; &nbsp; "name": "Betts",
&nbsp; &nbsp; "obp": 408,
&nbsp; &nbsp; "ops": 987,
&nbsp; &nbsp; "slg": 579
&nbsp; },
&nbsp; {
&nbsp; &nbsp; "_id": 4,
&nbsp; &nbsp; "league": "NL",
&nbsp; &nbsp; "name": "AcunaJr",
&nbsp; &nbsp; "obp": 416,
&nbsp; &nbsp; "ops": 1012,
&nbsp; &nbsp; "slg": 596
&nbsp; }
]</code></pre> $matchを使用することで3選手に絞ることができました。 <h2 id="h88416c70c3">$project</h2>$projectを使用することで残すフィールドや取り除くフィールドを設定することができます。 今回は先ほどの集計結果からnameとopsだけを残したものにして見ようと思います。 残したいフィールドには"1"を 取り除きたいフィールドには"0"を指定します。 何も設定しなければ取り除かれますが、"_id"に関しては削除したい場合は明示的に"0"を指定する必要があります。 <pre><code>db.collection.aggregate([
&nbsp; {
&nbsp; &nbsp; "$addFields": {
&nbsp; &nbsp; &nbsp; "ops": {
&nbsp; &nbsp; &nbsp; &nbsp; $add: [
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "$obp",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "$slg"
&nbsp; &nbsp; &nbsp; &nbsp; ]
&nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; }
&nbsp; },
&nbsp; {
&nbsp; &nbsp; $match: {
&nbsp; &nbsp; &nbsp; "ops": {
&nbsp; &nbsp; &nbsp; &nbsp; $gt: 800
&nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; }
&nbsp; },
 // 以下を追加
&nbsp; {
&nbsp; &nbsp; $project: {
&nbsp; &nbsp; &nbsp; _id: 0,
&nbsp; &nbsp; &nbsp; name: 1,
&nbsp; &nbsp; &nbsp; ops: 1
&nbsp; &nbsp; }
&nbsp; }
])</code></pre> 出力結果:<pre><code>[
&nbsp; {
&nbsp; &nbsp; "name": "Ohtani",
&nbsp; &nbsp; "ops": 1066
&nbsp; },
&nbsp; {
&nbsp; &nbsp; "name": "Betts",
&nbsp; &nbsp; "ops": 987
&nbsp; },
&nbsp; {
&nbsp; &nbsp; "name": "AcunaJr",
&nbsp; &nbsp; "ops": 1012
&nbsp; }
]</code></pre> かなりスッキリした形になりました。 そして$projectは$addFieldsのように新しいフィールドの指定をすることで可能です。 以下のように指定します。<pre><code>db.collection.aggregate([
&nbsp; {
&nbsp; &nbsp; $project: {
&nbsp; &nbsp; &nbsp; _id: 0,
&nbsp; &nbsp; &nbsp; name: 1,
&nbsp; &nbsp; &nbsp; ops: {
&nbsp; &nbsp; &nbsp; &nbsp; $add: [
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "$obp",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "$slg"
&nbsp; &nbsp; &nbsp; &nbsp; ]
&nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; }
&nbsp; }
])</code></pre> 出力結果:<pre><code>[
&nbsp; {
&nbsp; &nbsp; "name": "Ohtani",
&nbsp; &nbsp; "ops": 1066
&nbsp; },
&nbsp; {
&nbsp; &nbsp; "name": "Yoshida",
&nbsp; &nbsp; "ops": 783
&nbsp; },
&nbsp; {
&nbsp; &nbsp; "name": "Betts",
&nbsp; &nbsp; "ops": 987
&nbsp; },
&nbsp; {
&nbsp; &nbsp; "name": "AcunaJr",
&nbsp; &nbsp; "ops": 1012
&nbsp; }
]</code></pre> 今回は $matchを使用していないのでyoshidaも残っています 最後にリーグ別にopsの高い順に並び替えたいと思います。 <h2 id="h08c01cb82a">$facet</h2>$facetを使用することで複数の集計結果を出すことができます。 <pre><code>db.collection.aggregate([
&nbsp; {
&nbsp; &nbsp; $project: {
&nbsp; &nbsp; &nbsp; _id: 0,
&nbsp; &nbsp; &nbsp; name: 1,
&nbsp; &nbsp; &nbsp; league: 1,
&nbsp; &nbsp; &nbsp; ops: {
&nbsp; &nbsp; &nbsp; &nbsp; $add: [
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "$obp",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "$slg"
&nbsp; &nbsp; &nbsp; &nbsp; ]
&nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; }
&nbsp; },
 // 以下を追加
&nbsp; {
&nbsp; &nbsp; "$facet": {
&nbsp; &nbsp; &nbsp; "NL": [
&nbsp; &nbsp; &nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $match: {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "league": "NL"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; ],
&nbsp; &nbsp; &nbsp; "AL": [
&nbsp; &nbsp; &nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $match: {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "league": "AL"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; ],
&nbsp; &nbsp; }
&nbsp; }
])</code></pre> 出力結果:<pre><code>[
&nbsp; {
&nbsp; &nbsp; "AL": [
&nbsp; &nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; "league": "AL",
&nbsp; &nbsp; &nbsp; &nbsp; "name": "Ohtani",
&nbsp; &nbsp; &nbsp; &nbsp; "ops": 1066
&nbsp; &nbsp; &nbsp; },
&nbsp; &nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; "league": "AL",
&nbsp; &nbsp; &nbsp; &nbsp; "name": "Yoshida",
&nbsp; &nbsp; &nbsp; &nbsp; "ops": 783
&nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; ],
&nbsp; &nbsp; "NL": [
&nbsp; &nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; "league": "NL",
&nbsp; &nbsp; &nbsp; &nbsp; "name": "Betts",
&nbsp; &nbsp; &nbsp; &nbsp; "ops": 987
&nbsp; &nbsp; &nbsp; },
&nbsp; &nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; "league": "NL",
&nbsp; &nbsp; &nbsp; &nbsp; "name": "AcunaJr",
&nbsp; &nbsp; &nbsp; &nbsp; "ops": 1012
&nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; ]
&nbsp; }
]</code></pre> 4選手をNLとALで分けることができました。 <h2 id="hfe70785577">$sort</h2>次に$sortを使用してopsの高い順に並び替えたいと思います。 $sortに1を指定することで昇順 -1を指定することで降順並び替えることができます。<pre><code>db.collection.aggregate([
&nbsp; {
&nbsp; &nbsp; $project: {
&nbsp; &nbsp; &nbsp; _id: 0,
&nbsp; &nbsp; &nbsp; name: 1,
&nbsp; &nbsp; &nbsp; league: 1,
&nbsp; &nbsp; &nbsp; ops: {
&nbsp; &nbsp; &nbsp; &nbsp; $add: [
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "$obp",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "$slg"
&nbsp; &nbsp; &nbsp; &nbsp; ]
&nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; }
&nbsp; },
&nbsp; {
&nbsp; &nbsp; "$facet": {
&nbsp; &nbsp; &nbsp; "NL": [
&nbsp; &nbsp; &nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $match: {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "league": "NL"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp; },
　　　　　　　　　　 // $sortを追加
&nbsp; &nbsp; &nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "$sort": {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "ops": -1
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; ],
&nbsp; &nbsp; &nbsp; "AL": [
&nbsp; &nbsp; &nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $match: {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "league": "AL"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp; },
 // $sortを追加
&nbsp; &nbsp; &nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "$sort": {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "ops": -1
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; ]
&nbsp; &nbsp; }
&nbsp; }
])</code></pre> 出力結果:<pre><code>[
&nbsp; {
&nbsp; &nbsp; "AL": [
&nbsp; &nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; "league": "AL",
&nbsp; &nbsp; &nbsp; &nbsp; "name": "Ohtani",
&nbsp; &nbsp; &nbsp; &nbsp; "ops": 1066
&nbsp; &nbsp; &nbsp; },
&nbsp; &nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; "league": "AL",
&nbsp; &nbsp; &nbsp; &nbsp; "name": "Yoshida",
&nbsp; &nbsp; &nbsp; &nbsp; "ops": 783
&nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; ],
&nbsp; &nbsp; "NL": [
&nbsp; &nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; "league": "NL",
&nbsp; &nbsp; &nbsp; &nbsp; "name": "AcunaJr",
&nbsp; &nbsp; &nbsp; &nbsp; "ops": 1012
&nbsp; &nbsp; &nbsp; },
&nbsp; &nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; "league": "NL",
&nbsp; &nbsp; &nbsp; &nbsp; "name": "Betts",
&nbsp; &nbsp; &nbsp; &nbsp; "ops": 987
&nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; ]
&nbsp; }
]</code></pre> 上記のようにALとNLのリーグごとのOPSの高い順に情報を集計することができました。

MongoDBのaggregateの基礎

久々の更新になります！ さて、今回はMapについて少し掘り下げていきます。 <h2 id="h477d79f2dc">Mapの値取得</h2> Mapの値取得の前にオブジェクトのついての少し触れておきます。 objectでは値の取得を行いたい場合<pre><code>const fruits = {
 En: "apple",
 Ja: "りんご"
};

console.log(fruits.En); // apple
console.log(fruits.Ja); // りんご</code></pre>と取得できます。 そしてmapではどのように値の取得をするかといいますと以下のようになります。<pre><code>const fruits = new Map&lt;string, string&gt;([
 ["En", "apple"],
 ["Ja", "りんご"]
]);

console.log(fruits.get("En")) // apple
console.log(fruits.get("Ja")) // りんご</code></pre> <h2 id="ha9178b72f9">keysとvaluesについて</h2>ではkeyの配列を取得する場合はどうでしょうか？ オブジェクトの場合は、<pre><code>// keyの型定義
type Lang = "En" | "Ja";

const fruits2: { [key in Lang]: string } = {
 En: "apple",
 Ja: "りんご"
} 

const keys = Object.keys(fruits)
console.log(keys) // ["En", "Ja"]</code></pre>といった具合で取得することが可能です。 そしてmapの場合は、<pre><code>// keyの型定義
type Lang = "En" | "Ja";

const fruits = new Map&lt;Lang, string&gt;([
 ["En", "apple"],
 ["Ja", "りんご"]
]);

const keys = Array.from(fruits.keys()) 
console.log(keys) // ["En", "Ja"]</code></pre>といったようにArray.fromと合わせて使用することで取得できます。 また以下のように[...]と合わせても取得可能です。<pre><code>const keys = [...fruits.keys())];

console.log(keys) // ["En", "Ja"]</code></pre> 以下のようにkeysのみでは取得はできません。<pre><code>// これでは取得不可能
const keys = fruits.keys()</code></pre> 同様にvaluesについても紹介すると<pre><code>const values = Array.from(fruits.values())

console.log(values) // ["apple", "りんご"]</code></pre> もしくは<pre><code>const values = [...fruits.values()];

console.log(values) // ["apple", "りんご"]</code></pre>で取得することが可能になります。

Mapのkey()とvalues()について

前回に引き続き、今回はReactのonchangeの型に付け方についてもまとめていこうと思います。 <h2 id="h24597f9823">(1) changeEventの基本</h2>changeEventの主な使用ケースとしてはinput要素(inputタグ)やselect要素(selectタグ)になります。 changeEventはこの要素の値が変化するたびに発火します。 <h2 id="h4f042bbaac">(2) inputタグで使用した場合</h2>inputタグの中でonChangeを使用するケースについて具体的にみていきます。<pre><code>const InputText = () =&gt; {
 const [text, setText] = useState("")
 const onInputText = (e: ChangeEvent&lt;HTMLInputElement&gt;) =&gt; {
 setText(e.target.value);
 };
 
 return (
 &lt;input type="text" onChange={(e) =&gt; onInputText(e)} /&gt;
 )
} 

</code></pre> 上記のようにinputタグの中で値が変わったときに発火するイベントをonChangeで登録した場合(今回はonInputTextをeを引数にして登録してます。)、onInputTextで受け取ったeの型は 型引数でHTMLInputElementを受け取る<pre><code>ChangeEvent&lt;HTMLInputElement&gt;</code></pre>という形になります。 onClick(MouseEvent)との違いとしてはジェネリクスを1つしか取らないことが挙げられます。 <h2 id="h8db5a8e130">(2) selectタグの中で使用した場合</h2>こちらは型引数を以下のように変更することで型を指定することができます。<pre><code>ChangeEvent&lt;HTMLSelectElement&gt;</code></pre> ※ ただしmuiのv5で使用する場合は以下のように"SelectChangeEvent"というものを使用する必要があります。<pre><code>const onSelectDrink = (e: SelectChangeEvent&lt;string&gt;) =&gt; {
 setMenu(e.target.value);
}

--- 省略 ---

&lt;Select
 label="ドリンクメニュー"
 value={priority}
 onChange={(e) =&gt; onSelectDrink(e)}
 &gt;
 &lt;MenuItem value="coffee"&gt;コーヒー&lt;/MenuItem&gt;
 &lt;MenuItem value="orangeJuece"&gt;オレンジジュース&lt;/MenuItem&gt;
 &lt;/Select&gt;

</code></pre> 今回紹介したonChangeと前回紹介したonClickはよく使うのでしっかり抑えておきたいところですね。

ReactでのonChangeの型について

今回はReactでのonClickの型の付け方についてまとめておこうと思い記事にしてみました。 先に結論ですが、onClickの型は引数でeventをとる場合と取らない場合で型の指定の仕方が変わります。 <h2 id="h1255a48957">(1) 引数にeventを取る場合</h2><pre><code>onClick: (event: MouseEvent&lt;HTMLElement, MouseEvent&gt;) =&gt; void;</code></pre>となります。 eventには<pre><code>MouseEvent&lt;HTMLElement, MouseEvent&gt;</code></pre>のようにジェネリクスを2つ持つMouseEventの型をつけることになります。 MouseEventが2回出てきていますが、 1つ目はReactのMouseEventで 2つ目はNativeEventのMouseEventになります。 実際には以下のコードのように型を付けつことができます。<pre><code>const handleClick = (event: MouseEvent&lt;HTMLElement, MouseEvent&gt;) =&gt; {
 console.plog(event);
}</code></pre> そして1つ目のジェネリクスですが、こちらは使用するタグによって指定の仕方が変化します。 button要素の場合 使用するタグがbuttonの場合、1つ目のジェネリクスは"HTMLButtonElement"と指定してあげます。<pre><code>const handleButtonClick = (event: MouseEvent&lt;HTMLButtonElement, MouseEvent&gt;) =&gt; {
 console.log(event)
} ;

---省略--- 

&lt;button type="button" onClick={handleButtonClick}&gt;
 Click
&lt;/button&gt;</code></pre> div要素の場合 使用するタグがdivの場合、1つ目のジェネリクスは"HTMLDivElement"と指定します。<pre><code>const handleClick = (event: MouseEvent&lt;HTMLDivElement, MouseEvent&gt;) =&gt; {
 console.log(event)
} ;

---省略--- 

&lt;div onClick={handleClick}&gt;
 Click
&lt;/div&gt;</code></pre> 以上のように要素によってHTMLElementを指定する方が望ましいようです。 ※ 判別がつかない場合はユニオンで指定することも可能 <h2 id="h90da069544">(2) 引数にeventを取らない場合</h2> 続いてeventを取らないケースでの型の指定の仕方を見ていきます。 こちらも先に結論になりますが、<pre><code>onclick: MouseEventHandler&lt;HTMLElement&gt;;</code></pre>となります。 具体的なコードとしては<pre><code>const handleClick: MouseEventHandler&lt;HTMLElement&gt; = () =&gt; {
　　console.log("クリックされました");
};

 ---省略---

&lt;button type="button" onClick={handleClick}&gt;
　　Click
&lt;/button&gt;</code></pre>となります。 こちらも(1)同様に button要素の場合には<pre><code>MouseEventHandler&lt;HTMLButtonElement&gt;</code></pre>div要素の場合には<pre><code>MouseEventHandler&lt;HTMLDivElement&gt;</code></pre> とより具体的な指定の仕方をすることができます。

ReactでのonClickの型について

今回はNext.jsでファイルのファイルを選択選択し、選択されたファイル名を表示させる実装についての記事になります。 まずは今回の実装の要件をまとめておきたいと思います。 ①画像ファイル(jpeg/jpg/png)を選択、登録できるようにしたい。 ②ファイル選択後、選択されたファイル名が画面上に表示される。 ③ファイル選択はHTML標準のinputタグではなく、自作のボタンを使用して行いたい。 です。 ※ 今回はMUIを使用しています。 まずは今回の実装の全体になります。<pre><code>const FileRegister = () =&gt; {
 const [file, setFile] = useState&lt;File | null&gt;(null);
 const filePickerRef = useRef&lt;HTMLInputElement&gt;(null);
 const showFolder = () =&gt; {
 if (filePickerRef.current) {
 filePickerRef.current.click();
 }
 };

 const selectFile = (e: ChangeEvent&lt;HTMLInputElement&gt;) =&gt; {
 const files = e.target.files;
 if (files &amp;&amp; files.length !== 0) {
 setFile(files[0]);
 }
 e.target.value = '';
 };

 return (
 &lt;Stack&gt;
 &lt;Grid&gt;
 &lt;input
 type="file"
 accept=".png, .jpeg, .jpg "
 ref={filePickerRef}
 onChange={(e) =&gt; selectFile(e)}
 hidden
 /&gt;
 &lt;Button onClick={showFolder}&gt;ファイル登録&lt;/Button&gt;
 &lt;Typography&gt;{file?.name}&lt;/Typography&gt;
 &lt;/Grid&gt;
 &lt;/Stack&gt;
 );
};

export default FileRegister;</code></pre> では要件ごとにコードの方を解説していきたいと思います。 <h2 id="hf9c23910da">①画像ファイル(jpeg/jpg/png)を選択、登録できるようにしたい。</h2>今回はinputタグ内の"accept"で".png, .jpeg, .jpg"を指定することで選択できるファイルを絞り込んでいます。<pre><code>&lt;input
 type="file"
 accept=".png, .jpeg, .jpg "
 ref={filePickerRef}
 onChange={(e) =&gt; selectFile(e)}
 hidden
/&gt;</code></pre> <h2 id="hb0e235623e">②ファイル選択後、選択されたファイル名が画面上に表示される。</h2>こちらは選択されたファイルをstateで管理するようにします。<pre><code>const [file, setFile] = useState&lt;File | null&gt;(null);</code></pre> そしてstateが更新されれば、ファイル名を表示させるようにします。<pre><code>&lt;Typography&gt;{file?.name}&lt;/Typography&gt;</code></pre> <h2 id="hcccb3099cc">③ファイル選択はHTML標準のinputタグではなく、自作のボタンを使用して行いたい。</h2>こちらはすこし工夫が必要です。 まずはinputタグを用意し<ul><li>useRefでinputのDOMを保持するようにする</li><li>ファイル選択(onChange)でstate(ファイル情報)更新。具体的な"selectFile"の説明は後程。</li><li>inputタグ自体はhiddenで非表示にする</li></ul><pre><code>const filePickerRef = useRef&lt;HTMLInputElement&gt;(null);

--省略--

&lt;input 
　　type="file"
 accept=".png, .jpeg, .jpg "
 ref={filePickerRef}
 onChange={(e) =&gt; selectFile(e)}
 hidden
/&gt;</code></pre> hiddenで非表示になっているのでこのinput自体は直接操作することができません。 実際にファイル選択をする操作をするButtonを以下のように用意します。 <pre><code>const showFolder = () =&gt; {
 if (filePickerRef.current) {
 filePickerRef.current.click();
 }
 };

-- 省略 --

&lt;Button type="button" onClick={showFolder}&gt;ファイル登録&lt;/Button&gt;</code></pre> useRefのclick()を利用することで "ファイル登録"ボタンをクリック→useRefに登録されているinputタグをクリックする挙動になります。 では最後にファイル選択の実装について見ていきます。<pre><code>const selectFile = (e: ChangeEvent&lt;HTMLInputElement&gt;) =&gt; {
 const files = e.target.files;
 if (files &amp;&amp; files.length !== 0) {
 setFile(files[0]);
 }
};

-- 省略 --

&lt;input
 type="file"
 accept=".png, .jpeg, .jpg "
 ref={filePickerRef}
 onChange={(e) =&gt; selectFile(e)}
 hidden
/&gt;</code></pre> ファイル選択のダイアログで選択されたファイルは"selectFile"に渡ることになります。 selectFile内での処理ですが、e.target.filesには配列が入り、その配列の先頭に選択されたfile(files[0]に入ります)が来ることになります。 選択されたfileがあれば、そのfileでstateを更新します。 補足になりますが、もし選択したファイルを削除できるようなボタンを用意する場合は、<pre><code>&lt;button type="button" onClcik={() =&gt; setfile(null)}&gt;ファイル削除&lt;/button&gt;</code></pre> でfileをnullに更新し、ファイル名の表示をクリアすることができますが、 inputに登録されたvalueが先ほど選択したファイル情報が入ったままになってしますので、 再度同じファイルを選択した場合、"onChange"が効かなくなります。(変化なしのため) ですので最後にe.target.valueを初期化しておくことが必要になってきます。<pre><code>const selectFile = (e: ChangeEvent&lt;HTMLInputElement&gt;) =&gt; {
 const files = e.target.files;
 if (files &amp;&amp; files.length !== 0) {
 setFile(files[0]);
 }
　　e.target.value = "";
};</code></pre> 以上、ファイル選択の実装についてでした。

Next.jsでローカルファイルを選択する

今回はjestのmock関数の「jest.fn()」に関しての基本をまとめていきます。 <h2 id="h9dec35124d">(1)jest.fn()について</h2>関数に関して、このjest.fn()を利用することで指定した値を返すようなmock関数にすることができます。 今回は例としてMath.randomをmock関数にするケースを考えていきます。 ①ランダムにランクを返す関数を作成<pre><code>export　const getRank = () =&gt; {
 const rundomNum = Math.floor(Math.random() * 10);
 if(rundomNum &gt;= 8) {
 return 'great';
 } else if(rundomNum &gt;= 4) {
 return 'good';
 } else {
 return 'normal';
 }
};</code></pre>この関数は本来 "great" "good" "normal"のどれが取得できるかわからない関数であります。 <pre><code>describe('getRank', () =&gt; {
 it('Math.randomが0.5の時はgoodが取得できる', () =&gt; {

 // Math.randomを0.5を返すmock関数にする
　　　　Math.random() = jest.fn(() =&gt; 0.5);

 expect(getRank()).toBe('normal');
 });
});

</code></pre>テストの中でMath.randomに対して常に0.5を返す様にmock化しました。 この結果、getRank()も常に'normal'を返すのが期待できますのでテストが通るようになります。<h2 id="h1a21ee8c99"> (2)戻り値を1度だけ固定する方法</h2> (1)ではmock関数の返り値が常に同じになるように設定しましたが、次は1度のみ固定させる方法で考えてみます。 「mockImplementationOnce」を使用する場合 この関数を使用すると指定した返り値が1度のみ適用されます。 Pointとしては ・jest.jn()に対してメソッドチェーンさせる ・引数にコールバック関数を取ります ・複数繋げつことが可能です <pre><code>describe('getRank', () =&gt; {
 it('Math.randomが0.5の時はgoodが取得できる', () =&gt; {

 // Math.randomを1回目は0.5を2回目は0.8を返すmock関数にする
　　　　Math.random() = jest.fn().mockImplementationOnce(() =&gt; 0.5).mockImplementationOnce(() =&gt; 0.8);

 // 1回目: 0.5が返るので'normal'
 expect(getRank()).toBe('normal');
 // 2回目: 0.8が返るので'great'
 expect(getRank()).toBe('great');
 });
});</code></pre> となります。 「mockReturnValueOnce」を使用する場合 こちらは先ほどのmockImplementationOnceと同様のことをより簡単に記述することが可能となります。 1点違う点は引数として"値を"直接記述することになります。<pre><code>describe('getRank', () =&gt; {
 it('Math.randomが0.5の時はgoodが取得できる', () =&gt; {

 // Math.randomを1回目は0.5を2回目は0.8を返すmock関数にする
　　　　Math.random() = jest.fn().mockReturnValueOnce(0.5).mockReturnValueOnce(0.8);

 // 1回目: 0.5が返るので'normal'
 expect(getRank()).toBe('normal');
 // 2回目: 0.8が返るので'great'
 expect(getRank()).toBe('great');
 });
});</code></pre> 以上、jestのjest.fnの基本のメモです。

jestでmockを作成する

今回は繰り返し使用するようなコンポーネントの中でReact Hook Formを使用する際のポイントをまとめていきます。 ※ MUIはv5 / react-hook-form v7 になります <h2 id="hbc9e6d4346">(1)イメージ図</h2>下の画像のように(親)コンポーネント内に共通の(子)コンポーネントが2つある <img src="https://images.microcms-assets.io/assets/18284c98be04489799d8c61e785bf180/8e6b82e7b6f94949a0d2a7bacdc80045/group%2015.jpg" alt=""> <h2 id="hc59df50bc5">(2)親コンポーネントの準備</h2>親コンポーネントでやることは以下のことです。 ①useFormを呼び出し、"useFormMethods"(こちらの命名はご自由に)に格納 ※defaultValuesやrezolver(zod)の登録もここでしておく ②useFormMethodsからhandlSubmitを使用できるようにしておく。 ③FormProviderでform全体を囲っておく。FormProviderに先ほど用意した"useFormMethods"を渡しておく フォームの項目は今回は「title」と「description」を作成。 それぞれ子コンポーネントにpropsとして渡しておきます。 <pre><code>const ParentChild = () =&gt; {
 // ①useFormを呼び出し
 const useFormMethods = useForm({
 defaultValues: {
 title: '',
 description: ''
 }
 });

　　// ②使用するメソッドを取り出す
 const {
 handleSubmit
 } = useFormMethods;

 const onSubmit = (data: Inputs) =&gt; {
 console.log(data);
 };

 return (
 // ③FormProvierで囲っておく
 &lt;FormProvider {...useFormMethods}&gt;
 &lt;Stack m={4} component="form" noValidate onSubmit={handleSubmit(onSubmit)}&gt;
 &lt;TextFieldcontrol name="title" /&gt;
 &lt;TextFieldcontrol name="description" /&gt;
 &lt;Box mt={2}&gt;
 &lt;Button type="submit" color="secondary" variant="contained"&gt;
 送信
 &lt;/Button&gt;
 &lt;/Box&gt;
 &lt;/Stack&gt;
 &lt;/FormProvider&gt;
 );
};

export default ParentChild;</code></pre> 以上になります。 <h2 id="h376c88a964">(3)子コンポーネントの準備</h2>TextFieldControlという名前の子コンポーネントを用意します。 この中ではやることは以下のことです。 ①useFormContextを呼び出し、controlを使用できるようにする ②Controllerでcontrolとpropsで受け取った項目名を登録してく ③TextFieldをControllerでラップする 以上になります。 <pre><code>export const TextFieldcontrol = ({ name }: { name: string }) =&gt; {
 // ①userformContextを用意
 const { control } = useFormContext();
 return (
 &lt;Box mt={4}&gt;
 &lt;Typography&gt;{name}&lt;/Typography&gt;
 // ②Controllerでcontrol/name設定
 &lt;Controller
 name={name}
 control={control}
　　　　　　　 // ③TextFieldをラップする
 render={({ field }) =&gt; &lt;TextField id={name} {...field} /&gt;}
 /&gt;
 &lt;/Box&gt;
 );
};</code></pre> 以上で送信ボタンを押下することで入力した値が取得できる状態になりました。

React Hook Formを親子コンポーネントで使用する

TypeScriptのinferについてしっかり理解できるように使用パターンから考えてみました。 ※ 今回はTypeScriptのi<a href="https://github.com/microsoft/TypeScript/blob/4076ff8fd6c91c07f6baefa0843e22e33168e164/tests/cases/conformance/types/conditional/inferTypes1.ts" target="_blank" rel="noopener noreferrer">nferTypes1.ts</a>を参考にしています。 <h2 id="h6f9d85f407">(1) T extends ( infer U )? U : never;</h2><pre><code>type Unpacked&lt;T&gt; = T extends (infer U) [] ? U : never;

type T01 = Unpacked&lt;string[]&gt;;
// string
type T02 = Unpacked&lt;{a: strng}&gt;;
// never</code></pre> この場合、 Unpackedの型引数で与えられた型が「Uの配列」を満たすなら「U」が適用され、そうでなければneverが適用されます。 ちなみにですが<pre><code>type Unpacked&lt;T&gt; = T extends Array&lt;infer U&gt; ? U : never;</code></pre> のような書き方も可能です。 <h2 id="h95b22cad44">(2) T extends (...args: any[] ) =&gt; infer U ? U : never;</h2><pre><code>type Unpacked&lt;T&gt; = T extends (...args: any[]) =&gt; infer U ? U : never;

type T03 = Unpacked&lt;() =&gt; string&gt;;
// string
type T04 = Unpacked&lt;() =&gt; number&gt;;
// number

type T05 = Unpacked&lt;number&gt;;
// never</code></pre> こちらは「Tが返り値がUの型を返す関数の型」を満たす場合は「U」を適用、そうでなければneverを適用となります。 より具体的な関数で見てみます<pre><code>type Unpacked&lt;T&gt; = T extends (...args: any[]) =&gt; infer U ? U : never;

const sum = (a: number, b: number): number =&gt; {
 return a + b;
};

const sum2 = (a: number, b: number, c: number): number =&gt; {
 return a + b + c;
};

type T06 = Unpacked&lt;typeof sum&gt;;
// number

type T07 = Unpacked&lt;typeof sum&gt;;
// number
// (...args: any[])とすることで引数が3つに増えても対応可能</code></pre>このようにsumというnumberを返す関数に使用すると返り値の型を取得することが可能になります。 <h2 id="h52d4f897b1">(3) T extends Promise&lt;infer U&gt;? U : never;</h2><pre><code>type Unpacked&lt;T&gt; = T extends Promise&lt;infer U&gt; ? U : never;

type T08 = Unpacked&lt;Promise&lt;string&gt;&gt;;
// string;</code></pre> これはTの型が「Promise&lt;U&gt;」になる場合「U」を適用する、そうでなければneverが適用となります。 <h2 id="ha214098e44">まとめ</h2>３つの例でのわかったinferの特徴としては ①Conditional Typeで使用される ②条件式で使用されている型を再利用したい時(抽出したい時)に使用できる ③Conditional Type内で使用されるinfer UのUはこの時点では未確定 という特徴があるということがわかりました。

パターンで考えるInfer

TypeScriptのextendsについての学習のメモ。 ※extendsの継承については今回は触れません。 このextendsを使用すれば、型引数に制約をかける事が可能になります。 ではでは順を追って説明していきます。 <h2 id="hb39206cc77">・型引数を持つ型(ジェネリック型)について</h2><pre><code>type User&lt;T&gt; = {
 name: string;
 age: T;
};</code></pre> <h2 id="h81fe2b916e">・型引数に制約をつける</h2>上のUser型はnameはstring型ですが、ageに関しは任意に型を取れるようにしています。 ※ 年齢の場合はnumber。年齢を内緒にしたい人のために"secret"のようなstringも取れるようにしています。 ただ上のUser型のままだと、型引数としてnumber、string以外に配列など思わぬ型も許容してしまうことになります。 こういうケースで使用できるのがextendsになります。 上記の型引数にextendsを使用して、制約をつけます。<pre><code>type User&lt;T extends number | "secret"&gt; = {
 name: string;
 age: T;
};</code></pre> こうすることでageは"number(実年齢)"か"secret"しか取れなくなります。 また、関数の引数の型に制約をかけることも可能です。<pre><code>// userのnameを返すだけの関数
const getUserName = &lt;T enxtends User&gt;(user: T) =&gt; user.name;</code></pre> 上のようにgetUserNameの引数の前に"TはUserの部分型である"という制約をかけることで、 user.nameがあることを担保することが可能です。 ※ 制約なしの&lt;T&gt;のみだとerrorになります。 <h2 id="h1671524e08">・conditonal Typesにextendsを使用する</h2>conditional Typesでextendsを使用する際は以下のような構文を取ります。<pre><code>X enxtends Y ? S : T</code></pre> これは"XがYの部分型であればSになり、そうでなければTをとるといった意味になります。 具体的に見ていきます。<pre><code>// TがnumberならNameOrIdは、IdLabel 
// TがsringならNameorIdは、NameLabel

type NameOrId&lt;T extneds number | string&gt; = T extends number ? IdLabel : NameLabel;</code></pre> このように Tがstringの部分型かnumberの部分型かによって、NameOrIdの型が変化するものができます。 こちらはユニオン型を使用して、"どっちの部分型か？"のチェックをしていますが、下記のように"指定した型の部分型かどうか？(条件を満たしているか)"のパターンにも使用されます。 <pre><code>type Animal = {
 name: string;
};

type Human = {
 name: string;
 language: string;
};

type U = Human extends Animal ? true : false; 
// type U: true; になります</code></pre> Human型はAnimal型の部分型になるのでUはtrueになります。

TypeScriptの型引数にextendsを使用する

今回はJSのメソッドのflatとflatMapとfillについてまとめていきます。 ちなみにこのメソッドたちは下の問題に挑戦するまでは一切使用したことがなかったものです... <img src="https://images.microcms-assets.io/assets/18284c98be04489799d8c61e785bf180/aa3b418867ca443ab961d44cc0ecc568/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-11-13%2012.57.02.png?w=500&amp;h=118" alt=""> <h2 id="h59aadfbe84">・flatメソッドについて</h2> mdnより<pre><code>const arr1 = [0, 1, 2, [3, 4]];

console.log(arr1.flat());
// expected output: [0, 1, 2, 3, 4]</code></pre>簡単に言うと、 配列を要素に持つ配列(配列の中に配列がある)に対して使用すると、要素の配列(中の配列)が分解されるイメージです。 [3, 4] → 3, 4 になていますね。 もう何重にも配列に入ってしまっていても flat()の引数を合わせてあげることでこちらもflatな配列にすることができます。<pre><code>const arr2 = [0, 1, 2, [[[3, 4]]]];

console.log(arr2.flat(3));
// expected output: [0, 1, 2, 3, 4]</code></pre> <h2 id="h802b9cd3d0">・concatについて</h2> こちらは配列と配列を合わせて新しい一つの配列にするのによく使用されるメソッドになります。(配列ではなく値を追加することも可能) 注意点としてはconcatを使用した配列自体は変更されないので、新しい配列を用意してそちらに返り値を代入する必要があります。<pre><code>const array1 = [1, 2];
const array2 = [3, 4];

// array1にconcatを使用(引数にarray2)
const addArray = array1.concat(array2);

console.log(addArray);
// expected output: [1, 2, 3, 4]

// arrry1に4つの数値を追加
const addNumber = array1.concat(3, 4, 5, 6);

console.log(addNumber);
// expected output: [1, 2, 3, 4, 5. 6]</code></pre>ですのでmdnにあるようにconcatとreduceを使用してflatと同様のことができます。<pre><code>const arr = [1, 2, [3, 4]];

// 空の配列にarrの要素をconcatで足していく
arr.reduce((acc, val) =&gt; acc.concat(val), []);
// [1, 2, 3, 4]

// または、分割代入の構文を使用して
const flattened = (arr) =&gt; [].concat(...arr);</code></pre>となります。 <h2 id="h4003a70366">・flatMapについて</h2>こちらはES2019にて追加されたメソッドになります。 簡単に言うと配列に対して「map() + flat()」を一度にできるメソッドになります。<pre><code>const array = [1, 2, 3];

// 配列内の要素を2つに複製する
const DuoArray = array.flatMap(n =&gt; [n, n]);

console.log(DuoArray);
// // expected output: [1, 1, 2, 2, 3, 3]</code></pre>「配列内の要素の値を変化させる」なんかは実装のイメージし易いですが、 上のように「配列内の要素の個数を操作する」のはなかなかイメージしにくいですが、このflatMapを仕様すれば操作も簡単にできます。 ちなみにこちらも新しい配列に格納する形で使用します。 <h2 id="h7056d3ee78">・fillについて</h2>こちらは配列をfillで指定した値で埋め尽くす(書き換える)メソッドになります。 mdnより<pre><code>const array1 = [1, 2, 3, 4];

// ６で書き換えて出力
console.log(array1.fill(6));
// expected output: [6, 6, 6, 6]</code></pre> 第2引数、第3引数も指定することもできその場合は<pre><code>const array1 = [1, 2, 3, 4];

// 書き換える値は0 開始は2から　終了は4(規定値はarray1.lengthになります) 
console.log(array1.fill(0, 2, 4));
// expected output: [1, 2, 0, 0]</code></pre>となります。 これらを使用して「ゆめみからの挑戦状」の模範解答を用意すると [flatMap使用ver ] <pre><code>const array1 = [1, 2, 3, 4, 5, 6]
// n =&gt; n%2 は偶数の時はfalse 奇数の時はtrueになります。
const array2 = array1.flatMap(n =&gt; n % 2 ? [n, n, n] : [n, n])

console.log(array2)
// -&gt; [1, 1, 1, 2, 2, 3, 3, 3, 4, 4, 5, 5, 5, 6, 6]</code></pre> [flatMapとfill使用ver]<pre><code>const array1 = [1, 2, 3, 4, 5, 6]
const array2 = array1.flatMap(n =&gt; Array(n % 2 + 2).fill(n)) 

console.log(array2)
// -&gt; [1, 1, 1, 2, 2, 3, 3, 3, 4, 4, 5, 5, 5, 6, 6]</code></pre> となります。

JSのflatとconcatとflatMapとfillを一気に学ぶ

今更ながらfindIndexというものを最近知ったので、indexOfとfindと一緒にまとめておこうと思います。 <h2 id="hacd94a577e">・3つのポイント</h2>３つとも配列に対して、「何かを探す」という操作をするのだが この3つのポイントを知っておけば少しは違いがわかりやすいかもです。 ①"index"と付くものは、【index"(配列の何番目にあったのか)】が返ってくる(なければ-1が返ってくる) ②"find"と付くものは、【条件式】を引数に持つ ③これは3つとも共通するが、値や条件をクリアするものが配列内に複数あっても【最初の1つ目】しか見ない 具体的にみていくと <h2 id="ha534a7bbd6">・indexOf</h2><pre><code>const array = [1 ,3, 9, 3];

// 配列.indexOf(値)
// 配列の中に値があればそのindexを、なければ-1返す
// 複数あっても最初のものだけ

const oddByIndexOf = array.indexOf(3);
console.log(oddByIndexOf);
// 1 が出力 </code></pre> このindexOfは3つのpointでも説明した通り、 "index"とつくので配列の中に引数で指定した値が ある場合は → 最初に見つかったindex(何番目か) なかった場合は → -1 といずれにしても数値が返ってくることになリます。 ということで当然、TypeScriptで型のチェックをした場合、<pre><code>const oddByIndexOf: number</code></pre>となりますね。 <h2 id="ha3213f2996">・findIndex</h2><pre><code>const array = [1 ,3, 9, 3];

// 配列.findIndex(条件)
// 条件を満たす値があればそのindexを、なければ-1を返す
// 複数あっても最初のものだけ

const oddByFindIndex = array.findIndex((num) =&gt; num % 3 === 0);
console.log(oddByFindIndex);
// 1 が出力 </code></pre> このfindIndexに関しては "find"とつくので値ではなく条件(引数にはコールバック関数を指定)を指定することになります。 そして "index"とつくので、配列の中に指定した条件が ある場合は → 最初に見つかったindex(何番目か) なかった場合は → -1 と、こちらも同様に数値が返ってくることになります。 ということでこちらも当然、TypeScriptで型のチェックをした場合、<pre><code>const oddByFindIndex: number</code></pre>となります。 <h2 id="h691b1791b8">・findに関して</h2><pre><code>const array = [1 ,3, 9, 3];

// 配列.find(条件)
// 条件を満たす値があればその要素を、なければundefinedを返す
// 複数あっても最初のものだけ

const oddByFind = array.find((num) =&gt; num % 3 === 0);
console.log(oddByFind);
// 3 が出力 </code></pre> こちらのfindはもちろん"find"が含まれているので条件を取ることになります。 上の2つと大きな違いとしては、indexが返ってくるのではなく 最初に見つかった要素自体が返ってくることになります。 今回でいうと <pre><code> num % 3 === 0</code></pre>という条件。 流れとしては「3で割ってあまりが0。つまり３の倍数を配列の中で探しにいき、最初に見つかった要素を返す」 となるので、最初に条件を満たす3が返ってきます。 注意点としては このfindに関しては配列の中に条件を満たすものがない可能性があるので TypeScriptの型では<pre><code>const oddByFind: number | undefined</code></pre>というふうに「undefinedの可能性もあるよ」となります。 ※ 今回はnumberの配列なので numerとundefinedのユニオンですが、stringの配列の場合は stringとundefinedのユニオン型になります。

JSのindexOfとfindIndexとfindの特徴とTSでの型をほんのりと覚えられるようになるコツ

型アサーション自体は使用することを推奨されていないが、こちらのas constに関しては使用することでより安全に使用できるとのこと。 <h2 id="hd46e79331b">・as const とは？</h2>typeof を使用して配列やオブジェクトから型を生成する際に、すべての要素、プロパティにreadonlyの機能を一気に追加することが可能。 これがどうおいしいのかは以下で確認 <h2 id="h7597b5ee52">・配列で使用</h2>【as const なし】<pre><code>const colors = ['red', 'blue', 'yellow'];

// type ColorType = string となる
type ColorType = typeof colors[number];</code></pre> ここにas constを使用すると 【as const あり】<pre><code>// 配列の後に as const を追加
const colors = ['red', 'blue', 'yellow'] as const;

// type ColorType = "red" | "blue" | "yellow" とユニオン型になる
type ColorType = typeof colors[number];</code></pre>となる <h2 id="h7a38224ca5">・オブジェクトで使用</h2><pre><code>const user = {
 name: '矢野',
 age: 53,
} as const;

type UserType = typeof user;</code></pre> この場合UserTypeはどうなるかというと<pre><code>type UserType = {
 readonly name: "矢野";
 readonly age: 53;
}</code></pre>となる。 もちろんここで生成した型を使用することで安全性を高めることができます。<pre><code>const user2: UserType = {
 name: '岡田',
 age: 64,
}</code></pre>と使用してみると、下記のように怒られてしまします。 nameの箇所で<pre><code>Type '"岡田"' is not assignable to type '"矢野"'.</code></pre>ageの箇所で<pre><code>Type '64' is not assignable to type '53'.ts(2322)</code></pre> ちなみに追加もできなくなるようです。<pre><code>// nameとageはクリア。positionが追加されている状態
const user2: ProfileType = {
 name: '矢野',
 age: 53,
 position: 'second'
}</code></pre>だと<pre><code>Type '{ name: "矢野"; age: 53; position: string; }' is not assignable to type '{ readonly name: "矢野"; readonly age: 53; }'.
 Object literal may only specify known properties, and 'position' does not exist in type '{ readonly name: "矢野"; readonly age: 53; }'.</code></pre> とういう事でas constに関しては積極的に使用していきたいと思いました。

TypeScriptの as const を理解する

React Hook FormをMUIで使用した時のメモ。 今回はMUIの「TextField」と「CheckBox」に関して考えていきます。 <h2 id="h0b6c60f378">・型を用意</h2>まずはInputの型を定義<pre><code>// TextFieldでtitleをCheckBoxでimportantを入力
type Inputs = {
 title: string;
　　important: boolean;
};

// keyの配列も事前に用意しておく
type InputsKeys = Array&lt;keyof Inputs&gt;;</code></pre> <h2 id="hf16df2035f">・関数などの準備</h2>まずはuseFormから必要なものを使用できるようにしておく<pre><code>const {
 getValues,
 control,
 handleSubmit,
 unregister,
 formState: { 
 errors: formErrors, isDirty, dirtyFields 
 }
} = useForm&lt;Inputs&gt;({
　　defaultValues: {
 title: "React-Hook-FomeとMUI",
 important: true,
 }
});</code></pre> getValues - 入力した値を取得 control - タブ内で使用 handleSubmit - submitの際に使用 unregister - 入力した値を削除する際に使用 isDirty - 入力に変更があるかのチェック(全体) dirtyFields - 入力に変更があるかのチェック(個別) defaultValues - 初期値を設定 <h2 id="h5f8701d978">・バリデーションを用意</h2><pre><code> const validationRules = {
 title: {
 required: '名前を入力してください',
 minLength: { value: 4, message: '4文字以上で入力してください。' }
 },
 };</code></pre> <h2 id="h21f6efd297">・フォームの中身</h2><pre><code>&lt;Stack m={4} component="form" novalidate onSubmit={handleSubmit(onSubmit)}&gt;
 &lt;Box&gt;
 　// ControllerでTextFieldをラップする
 &lt;Controller
 name="title"
 control={control}
 rules={balidationRules.title}
　　　　　// {field , fieldState}を引数にする
 render={({ field, fieldState }) =&gt; (
 &lt;TextField
 {...field}
 type="text"
 label="タイトル"
 // fieldState.invalidは非推奨のようです。
　　　　　　　　　　error={fieldState.invalid}
 helperText={fieldState.error?.message}
 /&gt;
 )} 
 /&gt;
 &lt;/Box&gt;
　　　// ControllerでCheckBoxをラップ
　　　&lt;Box mt={2}&gt;
 　　&lt;Controller
 　　name="important"
　　　　　　　control={control}
 　　render={({ field }) =&gt; &lt;FormControlLabel label="重要" {...field} control={&lt;Checkbox /&gt;} /&gt;}
 /&gt;
 &lt;/Box&gt;
 // 送信ボタン
　　　　&lt;Button variant="contained" type="submit"&gt;
 送信
　　　　&lt;/Box&gt;
&lt;/Stack&gt;</code></pre> <h2 id="ha71cecc62e">・onSubmit</h2><pre><code>// dataで全てに入力値を確認できる
const onSubmit = (data: Inputs) =&gt; {
 // 取得した値を確認できる
 console.log(data); 
};</code></pre> もし画面遷移せずに送信と同時に入力した値を消去したいときは<pre><code>const key = Object.keys(data) as InputsKeys;

// keyには入力値のkeyが配列で入る。
unregister(key, {keepDirty: false});</code></pre>

React Hook FormをMUIで使用してみた。

最近Reactのリアルタイム検索(入力されるたびに検索かけるやつ)を実装した際に使用したメソッドのメモ。 <h2 id="h280ca86814">・Object.valuesについて</h2> これはオブジェクト内のプロパティの値のみを配列として返すメソッドになります。 <pre><code>const user = {
 name: "Tom",
 age: 30,
};

// userのプロパティの値が配列に格納
const userValues = Object.values(user);

// ["Tom", 30]
console.log(userValues);</code></pre> <h2 id="h785367ba5a">・someについて</h2>配列内に指定された要素があるかのチェックをしてくれるメソッドになります。(true/falseが返ってくる)<pre><code>// 先ほどのプロパティの値が入った配列を用意
const array = ["Tom", 30];

// 配列の中に Tom があるかのチェック → true
console.log(array.some((value) =&gt; value === "Tom");

// 配列の中に 30 があるかのチェック → true
console.log(array.some((value) =&gt; value === 30);

// 配列の中に サトテル があるかのチェック → false
console.log(array.some((value) =&gt; value === "サトテル");</code></pre> <h2 id="h69ff626e26">・indexOfについて</h2>文字列の中に、検索したい文字列が入っているかのチェックをしてくれます。 検索したいものが入っている場合 → 初めて出現したindexを返す。 検索したいものが入っていない場合 → -1 が返ってきます。 <pre><code>// Tom という文字列についてのチェック
const value = "Tom"

// Tom と入力しようとして、最初の T を入力したとこを想定
const input = "T";

// Tom の中に T はあるので → 0が返る(index番号)
console.log(value.indexOf(input));



// Tom　とは関係ない k を入力したとこを想定
const anotherInput = "k";

// Tom の中に k はないので→ -1 が返る
console.log(value.indexOf(anotherInput));</code></pre> リアルタイム検索の際は、index番号は特に必要ないので 要素があるかどうか("-1"ではない)を確かめるだけでOKです。 注意点としてはTypeScriptを使用している際は、indexOfは文字列にしか使用できないのでtypeofを使用して型ガードをする必要があります。

JSのメソッド(Object.values / some / indexOf )

最近Reactのコードを書いていて親から子へのpropsの渡し方って色々あるなと思いまとめてみました。 多分他にも色んな渡し方があると思うので随時更新していきます。 前提として親コンポーネント(App.tsx)から子コンポーネント(Home.tsx)へ<pre><code>const user = {
 name: "tanaka",
 age: 25,
};</code></pre> このuserのデータを渡すという前提で考えます。 <h2 id="h132a275762">・(1)userの情報を分けて渡す</h2> 親コンポーネント(App.tsx)<pre><code>// userを用意
const user: Props = {
 name: "Tanaka",
 age: 25,
};

// userの型を用意。exportさせておく
export type Props = {
 name: string;
 age: number;
};

/* 
 子のコンポーネントへuser.nameとuser.ageをそれぞれ
 "name""age"として分けて渡す
*/
export default function App() {
 return (
 &lt;&gt;
 &lt;Home name={user.name} age={user.age} /&gt;
 &lt;/&gt; 
 )
}</code></pre> 子コンポーネント(Home.tsx)<pre><code>// 型をimportしておく
import { Props } from "../App";

export const Home = ({ name, age }: Props) =&gt; {
　　return (
 &lt;&gt;
 &lt;p&gt;{name}&lt;/p&gt;
 &lt;p&gt;{age}&lt;/p&gt;
 &lt;/&gt;
 )
}; </code></pre> これで画面上には Tanakaと25が表示されます。 個人的にはこの形が好みです。 <h2 id="h01c8922dbd">・(2)userの情報を一括で渡す</h2>続いてこちらは親のコンポーネントから一気にuserオブジェクトを渡す方法です。 親コンポーネント(App.tsx)<pre><code>// userを用意
const user: Props = {
 name: "Tanaka",
 age: 25,
};

// userの型を用意。exportさせておく
export type Props = {
 name: string;
 age: number;
};

/* 
 user={user}で一気に渡す
*/
export default function App() {
 return (
 &lt;&gt;
 &lt;Home user={user} /&gt;
 &lt;/&gt; 
 )
}</code></pre> 子コンポーネント(Home.tsx)<pre><code>import { Props } from "../App";

/* 
 オブジェクトがネストされて渡ってきているため
　　　さらに型を用意します。
*/
type HomeProps = {
 user: Props;
};

export const Home = ({ user }: HomeProps) =&gt; {
 // user.name user.ageとして使用可能
 return (
 &lt;&gt;
 &lt;p&gt;{user.name}&lt;/p&gt;
 &lt;p&gt;{user.age}&lt;/p&gt;
 &lt;/&gt;
 );
};</code></pre> 新たに型を用意しないといけないのが手間ですね。 <h2 id="h702fa017e3">・(3)userの情報の中身を一括で渡す </h2>(2)では、<pre><code>user={user}</code></pre> の形で一気渡していたため、ネストされたオブジェクトになっていました。 これをクリアすべくオブジェクトの中身を一気に渡すパターンも紹介します。 親コンポーネント(App.tsx)<pre><code>// userを用意
const user: Props = {
 name: "Tanaka",
 age: 25,
};

// userの型を用意。exportさせておく
export type Props = {
 name: string;
 age: number;
};

/* 
 　　{...user}でプロパティのみを渡す
*/
export default function App() {
 return (
 &lt;&gt;
　　　　　　&lt;Home {...user} /&gt; 
　　　　&lt;/&gt; 
 )
}</code></pre> 子コンポーネント(Home.tsx)<pre><code>import { Props } from "../App";

export const Home = ({ name, age }: Props) =&gt; {
 return (
 &lt;&gt;
 &lt;p&gt;{name}&lt;/p&gt;
 &lt;p&gt;{age}&lt;/p&gt;
 &lt;/&gt;
 );
};</code></pre> こっちの方が(2)よりもシンプルに記述できる。

Reactのpropsの渡し方と型の付け方

このページはNext.jsに関するメモ(基本的なこと)のページ。 随時更新予定 <h2 id="h48bcafb90f">・アプリケーション作成</h2><pre><code>npx create-next-app &lt;アプリ名&gt; --typescript</code></pre> <h2 id="hef82369010">・pages/api/hello.tsの型</h2><pre><code>// NextApiRequestとNextApiResponseを追加
import { NextApiRequest, NextApiResponse } from "next"; 

export default function handler(req: NextApiRequest, res: NextApiResponse) { 
 res.status(200).json({ name: 'John Doe' }) 
}</code></pre> <h2 id="h990c56f7a8">pages/_app.tsxの型</h2><pre><code>import '../styles/globals.css';
// AppPropsを追加
 import type { AppProps } from 'next/app'; i
mport Layout from '../components/Layout';

// 全てのページで読み込ませたいコンポーネントも追記(Layout)
function MyApp({ Component, pageProps }: AppProps) { 
　　return ( 
　　　　&lt;&gt; 
　　　　　　&lt;Layout&gt; 
　　　　　　　　&lt;Component {...pageProps} /&gt; 
　　　　　　&lt;/Layout&gt; 
　　　　&lt;/&gt; 
　　　); 
}
export default MyApp;</code></pre> <h2 id="h8cfc09803a">・faviconの設定</h2>public/static配下にfaviconを用意<pre><code>// pages配下に_document.tsxを作成
import Document, { Head, Main, NextScript } from "next/document";

export default class MyDocument extends Document {
 rendet() {
 return (
 &lt;html&gt;
 &lt;Head&gt;
 // faviconをここに記述
 &lt;link rel="icon" type="image/png" sizes="32x32" href="static/favicon/hoshico32.png" /&gt;
 &lt;link rel="icon" type="image/png" sizes="16x16" href="static/favicon/hoshico16.png" /&gt;
 &lt;/Head&gt;
 &lt;body&gt;
 &lt;Main /&gt;
 &lt;NextScript /&gt;
 &lt;/body&gt;
 &lt;/html&gt;
 )
 }
}

</code></pre> <h2 id="hf4ba27984e">・next/imageで外部のURLを使用するとき</h2>next.config.jsで外部ドメインを設定しておく必要がある<pre><code>// images.microcms-assets.ioが外部ドメイン

module.exports = {
 images: {
 domains: ['images.microcms-assets.io'],
 },
};</code></pre>

Next.js(~12v)に関するメモ

今回はTypeScriptのインデックスシグネチャとMappedTypesについての投稿になります。 <h2 id="hbf1644ef69">・インデックスシグネチャとは？</h2>「どんなプロパティ名(※ 指定された任意の型を持つ)が来てもOK」にできる特殊な記法になります。 具体的に見ていきましょう。 <pre><code>/*
　　　プロパティ名はstirngで形成されていて
　　　それに対応する型はnumber
　　　のtype(文) Price
*/

type Price {
 [key: string]: number;
};

const data: Price = {
 // それぞれstring: numberの形になってる
 coffee: 350,
 tea: 300
}; </code></pre> ここに新たなプロパティを追加したい場合、下のようになります。<pre><code>// waterがstring、200がnumberになってるので追加可能。
data.water = 200;

// これはエラーになる
data.juice = "無料";</code></pre>このようにプロパティを後から追加できるので汎用性があります。 <h2 id="h9b9ae26b2e">・Mapped Typesとは？</h2>インデックスシグネチャとは違い、決められたプロパティ名(ユニオン型がよく使われます)に対して任意の型を指定していく記法になります。 決められたプロパティ名のみ使用できるのでインデックスシグネチャのように追加はできません。(※ ただし、インターセクションを使用すれば追加はできます。) 具体的に見ていきましょう。<pre><code>type Drink = "beer" | "coffee" | "tea";

/*
　　　Mapped Typesを使用してDrinkPrice作成
　　　Pには Drinkから"beer"、"coffee"、"tea"が順番に入っていく
　　　型はnumberに指定
*/

type DrinkPrice = {
 [ P in Drink ]: number;
};

const drinkPrice: DrinkPrice = {
 beer: 350,
 coffee: 300,
 tea: 300
};</code></pre> また既存の型を使用する方法もあります。<pre><code>type Product = {
 name: string;
 price: number;
};

type Optional&lt;T&gt; = {
 /*
　　　　　　keyofでオブジェクトのプロパティ名を文字列リテラル型のunionにする
　　　　　　下の場合(Productを型引数にした場合)、 "name" | "string" になる
　　　　　　プロパティのバリューには"型[キー名]"で型を与える
　　　　　　今回はProductを利用してオプショナルな型を作成
 */
 [P in keyof T] ?: T[p];
};

type OptioanProduct = Optional&lt;product&gt;;
/*
　　　type OptionalProduct = {
　　　　　　name?: string | undefined;
　　　　　　age?: number | undefined; 
　　　}; 
　　　となる
*/
 </code></pre>

インデックスシグネチャとMappedTypesについて

今回は配列の中に特定の要素がいくつあるかをカウントする方法についての投稿になります。 <h2 id="ha6e063cad3">・考え方</h2>今回はfilterメソッドを使用します。 大まかな流れとしては、 ①ある配列からfilterを使用し特定の要素を抜き出して別の配列を作成する ②新しく作成した配列のlengthを取得する 以上になります。 <h2 id="h9c17282225">・コードで確認</h2>今回はあるランダムな配列の中に1がいくつあるかをカウントします。<pre><code>// ランダムな配列用意
const arry = [1, 3, 5, 1, 2, 4, 6, 1, 5, 10];

// filterを使用し、１だけ取り出した新しい配列を用意
const newArry = arry.filter(num =&gt; num === 1);

// 新しい配列の長さ = １の個数になります
console.log(newArry.length);


</code></pre>

特定の要素の個数をカウントする方法

今回はJavaScriptのメソッドである「filter」を使用した filter(Boolean)について解説していきます。 <h2 id="hc8a700acd3">・filter(Boolean)とは？</h2>結論ですがfilter(Boolean)を使用することでfalseになるものを排除することができます。 まずは基本的なおさらいから<h2 id="hc9861c1855">・filterとは？</h2>filterは配列から条件を満たす要素のみを取り出し、新しい配列を生成するメソッドになります。<pre><code>const arry = [1, 2, 3, 4]

// 2で割って余りが0のもの、つまり偶数を取り出す
const evenArry = arry.filter((num) =&gt; num % 2 === 0) 

console.log(evenArry); // [2, 4]</code></pre> <h2 id="h7e842f8d8e">・filter(Boolean)の仕組み</h2>ではfilter(Boolean)はどうなるのか 実はfilterを扱う上でもう一つ重要なことがあります。 それは"true"となる要素のみ新しい配列に返すと言うことです。<pre><code>const randomArry = [1, null, 3, undefined, false, 5]

const newRandomArry = randomArry.filter(num =&gt; num)

// null undefined falseはtrueではないので新しい配列には入らない
console.log(newRandomArry) // [1, 3, 5]</code></pre> そしてこの2行目の<pre><code>const newRandomArry = randomArry.filter(num =&gt; num)</code></pre>の箇所は<pre><code>const newRandomArry = randomArry.filter(Boolean)

// [1, 3, 5]</code></pre>と書き換えることが可能になります。 <a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Boolean" target="_blank" rel="noopener noreferrer">Booleanオブジェクト参照</a>

filter(Boolean)について

現状(2022/5/2現在)React18が不安定な箇所もあるそうなので今回はReact17へのダウングレードの方法を投稿します。 ちなみにですが<pre><code>create-next-app </code></pre>や<pre><code>create-react-app</code></pre>だとデフォルトでReact18がインストールされるようです。 <h2 id="hfba78b0cfa">・ダウングレード方法</h2>(1)package.json内の"dependencies"の記述を変更 [変更前]<pre><code>"react": "18.0.0",
"react-dom": "18.0.0",</code></pre> [変更後]<pre><code>"react": "^17.0.2",
"react-dom": "^17.0.2",</code></pre> (2)npm installする<pre><code>npm install --save react@17.0.2 react-dom@17.0.2</code></pre> 以上になります。 こちらはqiitaへも<a href="https://qiita.com/yasu-hoshi/items/d2744006fe7754966ba7" target="_blank" rel="noopener noreferrer">同じ内容の投稿</a>しておりますので、ご指摘等あればぜひそちらへリクエストお送りください。