プログラムメモ

enum

Fri, 02 Jun 2023 16:17:01 +0900

``` const getKeyFromValue = ( enumObj: {}, value: string | number, ): string | undefined => (Object.entries(enumObj).find( (e) => isNaN(Number(e[0])) && e[1] === value, ) ?? [undefined])[0]; const getEnumFromValue = >( enumObj: T, value: string | number, ) => { const key: keyof T | undefined = getKeyFromValue(enumObj, value); if...

typescript で配列からUnion 型

Thu, 01 Jun 2023 18:26:55 +0900

# ● typescript で配列からUnion 型 ``` const currencies = ["CNY", "EUR", "GBP", "JPY", "KRW", "USD"] as const; type Currency = typeof currencies[number]; // type Currency = "CNY" | "EUR" | "GBP" | "JPY" | "KRW" | "USD" ```

VS Code の Thunder Client で graphql を使う

Thu, 01 Jun 2023 10:39:33 +0900

nestjs + graphql で input の @IsOptional() がうまく聞かない時の修正箇所

Tue, 30 May 2023 09:48:46 +0900

# ● nestjs + graphql で input の @IsOptional() がうまく聞かない時の修正箇所 **teamName** をオプショナルに変更する ``` @Field() teamName: string; ``` 　　　　　↓ **✅ @IsOptional() と { nullable: true } を加えるとオプショナルになります ** ``` @IsOptional() @Field({ nullable: true }) teamName?: string; ``` **❌ { nullable: true } が抜けているとオプショナルになりません** ``` @IsOptional() @Field() teamName?: string; ```

全てのクエリを取得する

Mon, 29 May 2023 15:55:23 +0900

# ● (grapql) 全てのクエリを取得する ``` query { __schema { queryType { fields { name } } } } ``` # ● (grapql) 全てのミューテーションを取得する ``` query { __schema { mutationType { fields { name } } } } ``` # ● (grapql) 全ての作スクリプションを取得する ``` query { __schema { subscriptionType { fields { name } } } } ```

作業中ブランチにいながら、派生元ブランチ（master）で行われた更新を取り込む（マージする）

Thu, 25 May 2023 17:21:07 +0900

# ● 作業中ブランチにいながら、派生元ブランチ（master）で行われた更新を取り込む（マージする）ブランチが master とそこからブランチを切った devブランチがあるとします。例 : **dev**ブランチを作業しながら **master** に適用されたアップデートを取り込む方法です。 ## 1. source tree アプリの場合 ``` ・「フェッチ」をクリックして取り込む・ブランチ「dev」をダブルクリックしてチェックアウトする・「マージ」をクリックしてマージするコミットを選択（オプションも合わせて選択）してマージを実行する ``` ## 2. git コマンドの場合（現在の作業ブランチは dev とします。） ``` # origin を更新 git fetch origin # 作業中ブランチへ master...

CSSだけのUI フレームワーク daisyui

Thu, 25 May 2023 16:50:52 +0900

https://daisyui.com/

nestjs graphql のテストを書く

Thu, 25 May 2023 14:39:15 +0900

https://github.com/jmcdo29/testing-nestjs/tree/master/apps/graphql-sample

aws CDK

Wed, 24 May 2023 14:53:03 +0900

# ● mac へ aws-cdk のインストール ####・1. aws cli コマンドのインストールまた更新 https://awscli.amazonaws.com/AWSCLIV2.pkg ####・2. aws cli コマンドの確認 ##### バージョン確認 ``` which aws aws --version ``` 例えば以下のように返ってきます ``` /usr/local/bin/aws aws-cli/2.11.21 Python/3.11.3 Darwin/22.3.0 exe/x86_64 prompt/off ``` ####・3. aws cdk コマンドのインストール ``` npm install -g aws-cdk ``` ####・4. aws cdk コマンドの確認 ##### バージョン確認 ``` cdk...

EC2 のやりがちな Elastic IP address not attached による請求に対応する

Wed, 24 May 2023 13:23:58 +0900

# ● 1. EC2 の Elastic IP へ移動する ``` AWSコンソール → EC2 → Elastic IP ``` # ● 2. 不要なグローバルIPを削除する ``` 削除したいIPアドレスにチェックをつけ IPアドレスの解放を行う ``` 以上です。

WebStorm で graphql のクエリでエラーが出る場合の対応

Tue, 23 May 2023 15:07:48 +0900

# ● WebStorm で graphql のクエリでエラーが出る場合の対応 webstorm などで以下のようなエラーが出ることがあります ``` apollo client the parent selection or operation does not resolve ``` 対策 **graphql.config.yml** をプロジェクトトップに作成する **graphql.config.yml** ``` { "name": "Gatsby Schema", "schemaPath": "gatsby.graphql", "extensions": { "endpoints": { "Gatsby GraphQL Endpoint": { "url":...

schema.prisma から graphql のコードを自動生成する便利なジェネレータ prisma-nestjs-graphql

Fri, 19 May 2023 18:09:20 +0900

# ● prisma-nestjs-graphql https://github.com/unlight/prisma-nestjs-graphql # ● prisma-nestjs-graphql のインストール **prisma-nestjs-graphql**　に加えて **class-transformer ** もインストールしておきます ``` npm i -D prisma-nestjs-graphql class-transformer # エラーが出る場合は npm i add -D prisma-nestjs-graphql@17.1.0 ``` # ● 設定 **schema.prisma ( npm の場合 )** ``` generator nestgraphql { provider = "node...

gitignore を globalで設置する

Thu, 18 May 2023 16:08:50 +0900

# ● gitignore を globalで設置する ``` mkdir -p ~/.config/git vi ~/.config/git/ignore ``` 例えば、以下のように、グローバルで除外したいファイルやディレクトリを記述します ``` .DS_Store .idea/* ```

Prisma で 1対1( One to One ) 1対多( One to Many )リレーションの定義

Thu, 18 May 2023 12:49:38 +0900

# ● Prisma で 1対1( One to One )リレーションの定義 ###・呼び出す側（メインとなるモデル） ``` model User { id Int @id @default(autoincrement()) profile Profile? } ``` ###・呼び出される側（サブとなるモデル） ``` model Profile { id Int @id @default(autoincrement()) user User @relation(fields: [userId], references: [id]) userId Int @unique // relation scalar field (used in the `@relation` attribute above) } ```...

graphql-codegen を使って、フックを自動生成し tanstack query + graphql クエリを実行する

Tue, 23 May 2023 19:57:31 +0900

# ● graphql-codegen を使って、フックを自動生成し tanstack query + graphql クエリを実行する ``` npm i -D @graphql-codegen/cli npm i -D @graphql-codegen/client-preset npm i -D @graphql-codegen/typescript-react-query ``` **codegen.ts** ``` import { CodegenConfig } from "@graphql-codegen/cli"; const config: CodegenConfig = { schema: "http://localhost:4100/graphql", documents: ["./src/graphql/**/*.graphql"],...

next.js で .envにtypescript 型定義をつける

Mon, 15 May 2023 09:33:29 +0900

**src/types/env.d.ts ( ファイル名やディレクトリはどこでもokです )** ``` declare namespace NodeJS { interface ProcessEnv { readonly APP_NAME: string; readonly NEXT_PUBLIC_APP_NAME: string; } } ``` .env ``` # APP APP_NAME=アプリ名 NEXT_PUBLIC_APP_NAME=${APP_NAME} ``` 引用 : https://bit.ly/3OcVU7p

AWS CLI を aws-vault を使って安全に使用する

Fri, 12 May 2023 14:16:50 +0900

# ● aws-vault とは? ``` cat ~/.aws/credentials は平文のまま保存するので少々危険です aws-vault を使用しましょう ``` # ● 1. aws-vaultのインストール ``` brew install --cask aws-vault ``` # ● 2. aws-vaultのインストールの確認 ``` aws-vault --version ``` # ● 3. aws cli の代わりに aws-vault で認証情報のプロファイルを設定する **aws cli の場合、次のコマンドで設定を行いますが ..... ** ``` aws configure --profile ＜プロファイル名＞ ``` #####aws cli の代わりに aws-vault で認証情報のプロファイルを設定します...

Prisma で多対多( Many to Many )リレーションの定義

Thu, 11 May 2023 15:43:18 +0900

# ● Prisma で多対多( Many to Many )リレーションの定義以下の2通りの方法があります。 ``` ・A. 中間テーブルを明示的に定義する方法 ( explicit ) ・B. 中間テーブルを定義せずおまかせで自動生成する方法 ( implicit ) ``` ##・A. 中間テーブルを明示的に定義する方法 ( explicit ) 公式 : https://www.prisma.io/docs/concepts/components/prisma-schema/relations/many-to-many-relations#explicit-many-to-many-relations 中間テーブル **CategoriesOnPosts** を定義します。命名は**「2つのテーブルをアルファベット順に並べてToで繋げる。」**...

jest のMultiple configurations found エラーの対応

Tue, 09 May 2023 16:03:56 +0900

# ● jest のMultiple configurations found エラー「jestの設定」が2つ以上存在するというエラーです # ● jest の設定の記述箇所 https://archive.jestjs.io/docs/ja/22.x/configuration

Jestの設定は
・1. プロジェクトの package.json ファイルか、 
・2. jest.config.jsファイルまたは
・3. --config オプション
から、定義することができます。 

package.json に Jest の構成を保存する場合は、Jest が設定を見つけられるように "jest" キーをトップレベルに設定する必要があります：

...

graphqlリクエストが「This operation has been blocked as a potential Cross-Site Request Forgery (CSRF).」になる現象の対策

Tue, 09 May 2023 07:30:08 +0900

ヘッダを確認して修正しましょう ``` 'Content-Type: text/plain;charset=UTF-8' ``` 　　↓ ``` 'content-type: application/json' ```

npm script でブラウザを開く

Mon, 08 May 2023 08:14:21 +0900

# ● npm script でブラウザを開く ##・1. npm-run-all , opener のインストール ``` npm install --save-dev npm-run-all opener ``` **package.json** ``` "scripts": { "dev": "npm-run-all --parallel dev:next dev:browser", "dev:next": "next dev -p 3999", "dev:browser": "sleep 1 && opener http://localhost:3999/", }, ``` 実行 ``` npm run dev ``` npm-run-allのオプション ``` 順次実行「npm-run-all...

React Hook Form + zod

Sun, 07 May 2023 13:40:54 +0900

# ● React Hook Form + zod のインストール ``` npm install react-hook-form zod ``` # ● React Hook Form + zod のコンポーネントサンプル ###・1. バリデーションの定義を別ファイルにします **src/validations/mysourceCreateSchema.ts** ``` import { z } from "zod"; export const mysourceCreateSchema = z.object({ source: z.string().nonempty("翻訳したい文章を入力してください"), answer: z.string().nullish(), }); export type MysourceCreateSchema =...

MySQL8.0ではGRANT構文でユーザを作成できない

Fri, 05 May 2023 19:45:36 +0900

引用元 : [MySQL8\.0ではGRANT構文でユーザを作成できない – guro\_chanの手帳](https://www7390uo.sakura.ne.jp/wordpress/archives/456) ``` grant all on *.* to 'guro'@'localhost' identified by 'avava' with grant option; ``` 　　　　　　　　　　　　↓ ``` create user 'guro'@'localhost' identified by 'avava'; grant all on *.* to 'guro'@'localhost' with grant option; flush privileges; ```

AWS をコマンドから操作する AWS CLI

Wed, 24 May 2023 13:52:33 +0900

# ● 1. AWS CLIのダウンロード https://aws.amazon.com/jp/cli/ ###・1-1.AWS CLIインストールの確認 ``` which aws aws --version ``` 以下のように返ってくればインストールok ``` /usr/local/bin/aws aws-cli/2.11.17 Python/3.11.3 Darwin/22.4.0 exe/x86_64 prompt/off ``` # ● 2. AWS CLI の設定次の2つの設定が必要です。設定しましょう。 ``` 2-1. アクセスキーを作成する ( ~/.aws/credentials ) 2-2. 認証情報のプロファイルを設定する ( ~/.aws/config ) ``` 引用 : https://bit.ly/424HSsx ###・2-1....

Slack に GitHub を連携させる

Wed, 03 May 2023 07:28:44 +0900

# ● 1. Slack に GitHub を連携させる 1. http://slack.github.com/ にアクセスする 2. slack の URLを入れる（ログインする） 3. slack に GitHub からメッセージが送られてくるので GitHub にログインしてコードを入力する # ● 2. 連携したい「チャンネル」に以下のメッセージを送信するとGitHubから情報が返ってきます ###・現在購読しているGitHubリポジトリの通知を表示する ``` /github subscribe list features ``` # ・新たに GitHubリポジトリを指定して通知を受け取る ``` /github subscribe owner/repository ```

conditional update query in sql

Wed, 26 Apr 2023 18:57:38 +0900

例えば、customersテーブルでcity列が'New York'の顧客のstateを'NY'に更新する場合、次のクエリを使用できます。 ``` UPDATE customers SET state = 'NY' WHERE city = 'New York'; ```

react , graphql の Colocated Fragments

Sun, 07 May 2023 15:55:08 +0900

# ⚫︎ Colocated Fragments ( フラグメントコロケーション ) ``` // Avatar.jsx import gql from 'graphql-tag'; export const Avatar = ({ user }) => { return (

{user.name}

); }; Avatar.fragments = { user: gql` fragment Avatar on User { id name image } ` }; ```...

mysql であるユーザーに別DBを操作する権限を追加する

Thu, 27 Apr 2023 09:44:49 +0900

# ● データベース覧の確認 ``` show databases; ``` # ● ユーザ一覧の確認 ``` SELECT user, host FROM mysql.user; ``` # ● あるユーザー ( myuser% ) があるDBに対してどの権限を持っているか確認（全ての権限が表示されるので対象となるデータベースの権限が付与されているかどうかを調べる） ``` SHOW GRANTS FOR 'myuser'@'%'; ``` https://dev.mysql.com/doc/refman/8.0/en/show-grants.html # ●あるデータベースを操作する権限を持つユーザー一覧を表示させる ``` SELECT User FROM mysql.db WHERE db ="my-database"; ``` # ● あるユーザー (...

concurrently で npm スクリプトを並列実行

Sat, 22 Apr 2023 08:21:28 +0900

# ● concurrently のインストール ``` npm install --save-dev concurrently ``` 以下のようなコマンドを並列実行することができます。 ``` concurrently "yarn start:server" "yarn start:client" ``` これにより、start:serverとstart:clientの2つのyarnコマンドが同時に実行されます。

bash /zsh 履歴に追加するコマンド

Fri, 21 Apr 2023 17:41:03 +0900

# ● bash /zsh 履歴に追加するコマンド ``` history -s string ``` # ● bash /zsh 履歴に追加するコマンド ``` print -S string ```

nestjs のテストを高速化する ( esbuild / swc )

Wed, 03 May 2023 07:47:54 +0900

# ● A. nestjs のテストを esbuild で高速化する ``` npm i -D esbuild-jest esbuild ``` **jest.config.js** ``` module.exports = { testEnvironment: 'node', transform: { '^.+\\.tsx?$': 'esbuild-jest', }, }; ``` # ● B. nestjs のテストを swc で高速化する ``` npm i -D @swc/core @swc/jest ``` **jest.config.js** ``` module.exports = { testEnvironment: 'node', transform: { '^.+\\.tsx?$': ['@swc/jest'],...

GraphQL Playgroundより便利な Apollo Studio Explorer

Thu, 20 Apr 2023 10:55:16 +0900

# ● Apollo Studio Explorer **エンドポイント : localhost:4000/graphql で起動します** https://studio.apollographql.com/sandbox?endpoint=http%3A%2F%2Flocalhost%3A4000%2Fgraphql%2F # ● ドキュメント https://www.apollographql.com/docs/graphos/explorer/ ###・ schema diff https://www.apollographql.com/blog/announcement/platform/how-to-run-diffs-and-operation-checks-in-apollo-sandbox/

xargsの進化版としても使用できる GNU parallels

Wed, 19 Apr 2023 12:45:48 +0900

# ● インストール ``` brew install parallel ``` # ● 実行例（前から挿入） **コマンド** ``` echo hoge build | parallel --no-notice echo {}/{} ``` **結果** ``` hoge/hoge ``` # ● 実行例（後ろから挿入） **コマンド** ``` parallel --no-notice echo {}/{} ::: hoge ``` **結果** ``` hoge/hoge ```

Next.js で emotion

Mon, 15 May 2023 12:43:39 +0900

###・ next.jsアプリの初期化 ``` npx create-next-app@latest --use-npm next-emotion-minimal-app ``` ###・ emotion のインストール ``` npm install @emotion/react ``` ###・ tsconfig の設定 ``` { "compilerOptions": { // emotion "jsx": "preserve", "jsxImportSource": "@emotion/react", ``` ###・ emotion を使ったCSSスタイリングの例 (1. jsx に直接記述) **src/pages/index.tsx** ``` import { css } from '@emotion/react';...

github の graphql API を使用する

Thu, 01 Jun 2023 10:16:42 +0900

# ● GitHub GraphQL API (エクスプローラー) https://docs.github.com/ja/graphql/overview/explorer # ● 自分のログイン名アイコン、URLなどを取得する ``` query { viewer { login,name,id,avatarUrl } } ``` # ● 指定したID（この例では hogehoge）のアイコンURLを取得する（ユーザー名直接渡し） ``` query { user(login:"hogehoge"){ name, avatarUrl } } ``` # ● 指定したID（この例では hogehoge）のアイコンURLを取得する（ユーザー名変数渡し）変数を **$userName: String!** で定義します。 ```...

graphql の mutation で値を渡す方法

Fri, 14 Apr 2023 12:16:28 +0900

# ● （graphql Mutation）で直接値を渡す **graphql** ``` mutation createSource { createSource(createSourceInput:{ userId: 1, locale: "ja", text: "日本語のサンプルです" }) { id,userId,locale,text } } ``` # ● （graphql Mutation）でvariables で値を渡す方法 **graphql** ``` mutation createSource($input:CreateSourceInput!) { createSource(createSourceInput:$input) { id,userId,locale,text } ```...

Docker で KUSANAGI

Tue, 11 Apr 2023 18:32:49 +0900

# ● KUSANAGI Run on Docker のインストール ``` curl https://raw.githubusercontent.com/prime-strategy/kusanagi-docker/master/install.sh |bash ``` docker machine がインストールされていませんというエラーが出ますが、無視してokです **~/.kusanagi/bin/kusanagi-docker** コマンドが使用できるようになります # ● kusanagi-docker コマンドを使って（バーチャルドメインの作成）プロビジョン ``` ~/.kusanagi/bin/kusanagi-docker provision --lamp --fqdn <ドメイン名> --dbname --dbuser <ユーザー名>...

fzf で bash / zsh のコマンドを便利にする

Fri, 05 May 2023 11:48:10 +0900

# ● mac でのインストール **fzf** と **bat** をインストールします ``` brew install fzf brew install bat ``` # ● スクリプトのダウンロード以下のURLからbashまたはzsh用のファイルをダウンロードします。 https://github.com/junegunn/fzf/tree/master/shell ホームフォルダの /fzf/ 以下に保存します # ● スクリプトの設定 **.bash_profile** に以下のように記述します ( bash の場合 ) ``` # FZF source ~/fzf/completion.bash source ~/fzf/key-bindings.bash ``` # ● 使い方の例 # ● 1....

Alma Linux 9 で Apache , MySQL , PHP

Mon, 10 Apr 2023 15:01:00 +0900

# ● dnfのアップデート ``` dnf update -y ``` # ● apache のインストール ``` dnf install -y httpd systemctl start httpd systemctl enable httpd ``` ``` systemctl status httpd ``` なお設定ファイルは **/etc/httpd/conf/httpd.conf** にあります。 # ● 443 , 80 番ポートを開く ``` firewall-cmd --permanent --zone=public --add-service=http firewall-cmd --permanent --zone=public --add-service=https firewall-cmd --reload firewall-cmd...

apollo client で graphqlからの query の戻り値に型をつける

Wed, 10 May 2023 11:02:11 +0900

# ● apollo client で graphqlからの query の戻り値に型をつける ###・ A. 明示的に型を指定する型 **UserData** を指定する ``` const { error, loading, data } = useQuery(QUERY_VIEWER) ``` ###・B. apollo client:codegen コマンドを使用する **パッケージのインストール** ``` npm i @apollo/client npm i @graphql-codegen/add npm i @graphql-codegen/cli npm i @graphql-codegen/typescript npm i @graphql-codegen/typescript-operations ``` 参考:...

nestjs + graphql + で firebase auth token認証

Mon, 17 Apr 2023 08:34:07 +0900

# ● nestjs + graphql + で firebase auth token認証引用 : https://bit.ly/3K7o4x5 # ● firebase-admin SDK を追加する ### ・firebase-adminのインストール ``` npm install firebase npm install firebase-admin ``` ### ・firebase-adminの設定 **src/main.ts** の bootstrap() に以下を追加する **firebaseコンソールからサービスアカウントのjsonファイルをダウンロードしておきます** ``` import * as admin from 'firebase-admin'; import * as serviceAccount from...

zustand

Mon, 05 Jun 2023 10:57:13 +0900

# ● zustandのインストール ``` npm i zustand ``` # ● storeの作成 **src/stores/book.ts** ``` import create from "zustand"; type BookStoreData = { amount: number; title: string; }; const initialData: BookStoreData = { amount: 0, title: "", }; interface BookStore { book: BookStoreData; updateAmount: (newAmount: number) => void; updateTitle: (newTitle: string) => void; fetchTitle: () =>...

NestJS で CORS を有効にする

Wed, 29 Mar 2023 17:10:13 +0900

# ● NestJS で CORS を有効にする **src/main.ts** ``` const app = await NestFactory.create(AppModule); ``` 　↓　以下のように変更します。 ``` const app = await NestFactory.create(AppModule, { cors: true }); ``` オプションを加える場合は、以下のようにします ``` const app = await NestFactory.create(AppModule); app.enableCors({ origin:’http://localhost:3000/’, }); ```

NestJS / Prisma で本番環境( .env.production ) / 開発環境( .env.development )ごとの .env を使用する

Tue, 02 May 2023 17:07:54 +0900

# ● NestJS で本番 / 開発環境ごとの .env を使用する ###・パッケージのインストール ``` npm i --save @nestjs/config ``` ###・ファイルの修正 **src/app.module.ts** の imports に下記を追加 ``` import { ConfigModule } from '@nestjs/config'; @Module({ imports: [ ConfigModule.forRoot({ isGlobal: true, envFilePath: `.env.${process.env.NODE_ENV}`, }), ``` また、確認ように、次のようなコンソール表示を追加しておくのも良いです ``` console.log(`NODE_ENV...

NestJS + Prisma で O/R マッピング

Fri, 02 Jun 2023 09:43:55 +0900

# ● 1. MySQL の作成 ( Docker ) ``` vi docker-compose.yml ``` ``` version: "3.8" services: db: container_name: myapp-api-db image: mysql:8.0 restart: always ports: - 13306:3306 environment: MYSQL_ROOT_PASSWORD: password MYSQL_DATABASE: myapp_api_db MYSQL_USER: myapp_api_db MYSQL_PASSWORD: db_password volumes: -...

Laravel でアスペクト志向 Laravel-Aspect

Mon, 27 Mar 2023 10:18:56 +0900

# ● Laravel-Aspect https://github.com/ytake/Laravel-Aspect https://www.slideshare.net/KenjiroKubota/laravel-aspect # ● 登場する用語引用 : https://camp.trainocate.co.jp/magazine/whats-aop-programming/ ...

Google Chrome を Sidekick みたいにするサイドバー拡張機能

Thu, 23 Mar 2023 12:05:40 +0900

# ● Bookmark Sidebar https://chrome.google.com/webstore/detail/bookmark-sidebar/afdfpkhbdpioonfeknablodaejkklbdn?hl=en # ● Switch Workstation Tab Manager https://chrome.google.com/webstore/detail/switch-workstation-tab-ma/foilkalbafoifklkphdkijdcnkgcjefn?hl=en

Firebase Cloud Messaging (FCM)で通知を送る

Mon, 27 Mar 2023 10:56:42 +0900

# ● WEB アプリへの通知の流れ ###・1. クライアントアプリ側で getToken() で token を受け取る vapidKey（公開鍵, firebase console にて確認できる）をセットしてトークンを生成する ``` messaging.getToken({ vapidKey: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX' }) ``` ###・2. クライアントアプリからサーバーアプリへ token を送信する ###・3. サーバーアプリから特定の端末（token）へ通知を送信する参考 ; https://blog.ojisan.io/fcm-push/ # ● 通知の送信方法 ```...

NestJS + Prisma

Mon, 08 May 2023 12:05:50 +0900

# ● NestJS アプリの初期化 ``` nest new my-api ``` # ● DB (MySQL)を docker で用意する vi docker-compose.yml ``` version: "3.8" services: db: container_name: translate-api-db image: mysql:8.0 restart: always ports: - 13306:3306 environment: MYSQL_ROOT_PASSWORD: password MYSQL_DATABASE: translate_api_db MYSQL_USER: translate_api_db MYSQL_PASSWORD:...

vite-plugin-pwa を使って PWA 対応する

Mon, 03 Apr 2023 16:04:25 +0900

# ● vite-plugin-pwa https://github.com/vite-pwa/vite-plugin-pwa （Reactに限りません。viteのプラグインなので、Vueなどviteを使用しているアプリで使えます） # ● vite-plugin-pwa のインストール ``` npm i vite-plugin-pwa -D ``` # ● vite-plugin-pwa を読み込むすでに存在する **vite.config.ts** に以下の行を追加します ``` import { VitePWA } from 'vite-plugin-pwa' import type { VitePWAOptions } from "vite-plugin-pwa"; const pwaOptions: Partial...

①アドバイス（Advice）	処理内容を記述したものを「アドバイス」と呼びます。
②ジョインポイント（JoinPoint）