プログラムメモ

NestJS + Prisma

Tue, 21 Mar 2023 22:23:18 +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 対応する

Fri, 17 Mar 2023 11:03:36 +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' const pwaOptions: Partial = { manifestFilename: "manifest.webmanifest.json", minify: true,...

PWA対応する

Wed, 15 Mar 2023 10:23:06 +0900

# ● manifest.json の作成 web app manifest generator から manifest.json を生成します。 https://app-manifest.firebaseapp.com/ 以下のような jsonファイルが生成されます ``` { "name": "MY APP", "short_name": "myapp", "theme_color": "#fff", "background_color": "#fff", "display": "browser", "orientation": "portrait", "scope": "/", "start_url": "/", "icons": [ { "src": "icons/icon-72x72.png",...

すでに作成ずみの Next.js アプリを Firebase Hosting へデプロイする

Mon, 13 Mar 2023 23:53:31 +0900

# ● すでに作成ずみの Next.js アプリを Firebase Hosting へデプロイする ( SSR は Firebase Functionsへ。) ### 1. アプリの作成 ``` npx create-next-app@latest --use-npm <アプリ名> ``` ### 2. firebase コンソールからプロジェクトを作成する https://console.firebase.google.com/ からプロジェクトを作成します。プロジェクト名はアプリ名と同じとしておくと良いでしょう。 ### 3. package.json を変更する以下を**それぞれの場所に追記**します。 ``` { "main": "firebaseFunctions.js", "scripts": { "serve": "npm run...

テンプレートを使ってNext.js を Firebase Hosting へデプロイする ( SSR は Firebase Functionsへ )

Mon, 13 Mar 2023 23:30:37 +0900

# ● 1. テンプレートを使って「Next.js を Firebase Hosting へ手動デプロイ」の練習をする **なお、SSR は Firebase Functions としてデプロイされるのでSSR可能です。** ### 1. アプリの作成例: アプリ名 **my-test-hosting-app** としています ``` npx create-next-app@latest --use-npm --example with-firebase-hosting my-test-hosting-app ``` ### 2. Firebase のコンソールから新規プロジェクトを作成プロジェクト名はアプリ名と同じ **my-test-hosting-app** とするとわかりやすいです。プロジェクト名はコピーしてクリップボードに保存しておきます ###...

Github https で clone する

Thu, 09 Mar 2023 15:02:50 +0900

# ● github token の作成 ``` ・Github ログイン　　　↓ ・Settings 　　　↓ ・Developer Settings 　　　↓ ・Personal Access Tokens 　　　↓ ・Toikens(classic) ``` こちらからトークを作成してクリップボードにコピーします。あとは ``` git clone https://.......... ``` で。最初にメールアドレスとパスワードを入力させられるので、そこにメールアドレスと先ほどコピーしたトークンを入力します。

firebase hosting

Thu, 09 Mar 2023 18:26:45 +0900

# ● Firebase CLI ( firebase-tools ) のインストール ``` npm install -g firebase-tools firebase --version ``` #### firebase アカウントが既にある場合は一度ログアウトしてからログインしなおすと良いです ``` firebase logout firebase login firebase init hosting ``` ### アプリのディレクトリに移動してFirebaseをインストールする ``` npm install firebase ```

javascriptでURLの ?以降 #以降を取得する

Thu, 09 Mar 2023 10:05:34 +0900

# javascript で URLの ?以降（#は含まれない）を取得する ``` const queryString = location.search; ``` # javascript で URLの #以降を取得する ``` const fragmentIdentifier = location.hash; ```

● Next.js のコンポーネントが「サーバー」/「クライアント」どちらかのみで動作することを限定する

Wed, 08 Mar 2023 23:08:02 +0900

# ● server-only コンポーネントのインストール ``` npm i server-only ``` # ● サーバーサイドのみに限定する ``` import "server-only"; ``` を先頭に記述します。これをクライアントで描画すると以下のようなエラーがスローされます。 # ● クライアントサイドのみに限定する（サーバーサイドで実行された時にエラーがスローされます） ``` import "client-only"; ```

Next.js で多言語

Tue, 07 Mar 2023 15:41:10 +0900

# ● A. ディレクトリで言語ごとに分ける方法 /ja/ またはロケールなし　の場合は日本語 /en/ の場合は英語とするには以下のように記述します **next.config.js** ``` /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, i18n: { locales: ["en", "ja"], defaultLocale: "ja", }, }; module.exports = nextConfig; ``` これで ``` http://localhost:3000/login の場合は日本語 http://localhost:3000/ja/login の場合は日本語...

react で scss(sass) を使用する

Tue, 07 Mar 2023 18:18:34 +0900

``` npm i -D sass ``` **App.tsx** ``` import "./assets/scss/style.scss"; ```

Macで現在のローカルIPアドレスを知るターミナルコマンド

Wed, 15 Mar 2023 17:32:29 +0900

# ● Macで現在のローカルIPアドレスを知るターミナルコマンド ``` ipconfig getifaddr en0 ``` エイリアス localip をつけておくといいでしょう。

Vite で react-app を初期化した後の eslint , prettier インストール方法

Tue, 07 Mar 2023 12:15:55 +0900

# ● eslint ``` npm i -D eslint npm i -D eslint-plugin-react-hooks npm i -D eslint-plugin-unused-imports ``` ``` npx eslint --init ``` 簡単な英語で質問されるので答えます。インストール完了後に一度 eslint を実行してみます ``` ./node_modules/.bin/eslint src --ext js,jsx,ts,tsx ``` **.eslintrc.cjs** を少し修正します。 ``` module.exports = { "env": { "browser": true, "es2021": true }, "extends": [...

Laravel で inertia を使用するときの cdn での css ファイルの設置方法

Thu, 16 Feb 2023 21:37:56 +0900

**resources/views/app.blade.php** に記述します ``` {{ config('app.name', 'Laravel') }} ...

● Laravel10 + Vue3 + inertia

Tue, 14 Feb 2023 17:37:50 +0900

# ● Laravelのインストール ``` composer create-project --prefer-dist laravel/laravel laravel10-app dev-master cd laravel10-app php artisan -V cat package.json ``` # ● Vue3のインストール ``` npm install npm update npm i @vitejs/plugin-vue cat package.json ``` # ● vite.config.js を変更 ``` import { defineConfig } from 'vite'; import laravel from 'laravel-vite-plugin'; import vue from '@vitejs/plugin-vue';...

composer にパッケージを登録する

Sat, 11 Feb 2023 23:01:13 +0900

# ● バージョンタグをつけるバージョンが **1.2.1** の時の例 ``` git tag v1.2.1 ``` ``` git push origin master git push origin v1.2.1 ``` # ● インストールしたパッケージのバージョンを調べる ``` composer show ``` # ● composer のキャッシュをクリアする ``` composer clear-cache ```

Vue3でページがリロードされたかどうかを検知する方法

Fri, 10 Feb 2023 09:23:46 +0900

``` import { onMounted } from 'vue'; export default { setup() { onMounted(() => { if (performance.navigation.type === 1) { console.log("This page is reloaded"); } else { console.log("This page is not reloaded"); } }); }, }; ``` i

Macに便利な node.js バージョン自動切り替え nodenv をインストールする

Thu, 09 Feb 2023 12:46:03 +0900

# ● まず anyenv をインストールターミナルから以下を実行します。 ``` brew install anyenv ``` ``` echo 'eval "$(anyenv init -)"' >> ~/.bash_profile echo $SHELL -l ``` 一旦ターミナルを終了して、再度起動。メッセージが出るので次のコマンドを実行 ``` anyenv install --init ``` ##・2. anyenv を使って nodenv をインストール ``` anyenv install nodenv ``` ``` exec $SHELL -l ``` これでインストールは完了です。 ##・2-B. node.jsインストール時に同時に自動的にyarnもインストールしてくれるように設定する yarn自動インストールの設定 ```...

Google Drive API V3

Wed, 08 Feb 2023 10:17:19 +0900

# ● Google Drive APIが使用できるまでの流れ ``` 1. google cloud consoleから設定する　・Google Drive APIを有効にする　・クライアントIDやAPIキーなどを設定する（好きな言語で開発します） 2. google api でログイン 3. google drive api を使う ``` # ● html , javascript を使用したクイックスタート https://developers.google.com/drive/api/quickstart/js?hl=ja ###・クライアントID , APIキーが必要。「APIとサービス」 → 「認証情報」 → 「認証情報を作成」 → 「APIキー」から作成します。...

node.jsのバージョン管理 volta

Tue, 07 Feb 2023 17:54:59 +0900

# ● install ``` curl https://get.volta.sh | bash ``` **（インストール後にターミナルを終了して、再起動します）** # ● volta を使って node.js の特定バージョンをインストールするバージョン 14.17.0 をインストールする例 ``` volta install node@14.17.0 ``` # ● volta を使って node.js の特定メジャーバージョンの最新版をインストールするバージョン 18系の最新をインストールする例 ``` volta install node@18 ``` # ● volta を使ってインストールしたnode.jsのすべてのバージョンを表示させる ``` volta list all ```...

Vue3のcomposable( hook )を使ったシンプルな確認ダイアログ

Fri, 03 Feb 2023 11:27:25 +0900

# ● 使い方 **src/views/AboutView.vue** ``` import { useConfirmDialog } from "@/composables/useConfirmDialog"; import ConfirmDialog from "@/components/ConfirmDialog.vue"; const { confirm } = useConfirmDialog({ title: "HOME画面に移動してよろしいですか？", text:...

Sentry

Tue, 21 Feb 2023 11:41:57 +0900

# ● sentry のインストール ``` npm install --save @sentry/vue @sentry/tracing @sentry/integrations ``` # ● sentry のDSNの確認方法 ``` Sentry ログインする「Settings」 →「Projects」 →「<あなたのプロジェクト>」 →「client keys(DSN)」から参照する ``` ``` import { BrowserTracing } from "@sentry/tracing"; import { CaptureConsole } from "@sentry/integrations"; ``` ``` Sentry.init({ app, dsn: "xxxxxxxxxxxxxxxx", denyUrls:...

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

Wed, 01 Feb 2023 13:01:32 +0900

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

フロントエンド側で画像圧縮する

Tue, 31 Jan 2023 15:49:01 +0900

# ● image-resize https://github.com/kode-team/image-resize ``` npm i image-resize ``` ``` import ImageResize from "image-resize"; const getCompressedImageFile = async (file: File) => { const imageResize = new ImageResize(); let res = await imageResize .updateOptions({ height: 1000, quality: 0.75 }) .get(file); res = await imageResize.resize(res); const blob = (await...

pleskで管理中のWEBサイトが「502 Bad Gateway エラー」となる時の対処方法

Sun, 29 Jan 2023 09:53:44 +0900

# ● pleskで管理中のWEBサイトが「502 Bad Gateway エラー」となる時の対処方法 # ● apacheの起動状態を確認する ###・「ツールと設定」「サービス管理」から Syslog Watch　から「ウェブサーバ（Apache）」の起動状況を確認する ###・コマンドラインからウェブサーバー（Apache）の起動状況確認する ``` service httpd status ``` # ● ウェブサーバー（Apache）が以下のようなエラーが出て起動できない場合 ``` Failed to start The Apache HTTP Server. ``` # ● ログを確認する ``` less /var/log/messages ``` 例えば次のようなエラーがある場合 ``` httpd: httpd: Syntax error on...

svg アイコンの線や背景の色をcssで変更する

Wed, 25 Jan 2023 10:57:57 +0900

# ● svg アイコンの線や背景の色をcssで変更する ## ● A. ❌ 読み込み + cssの fill または stroke による色変更は出来ません。残念ながらこれはできないようです。 ## ● B. 読み込み + css の filter による色変更こちらのサイトに変換したい色を入力すると、黒色から指定の色に変換する filter を生成してくれます。 svg アイコンは黒色で作成しておく必要があります。 https://codepen.io/sosuke/pen/Pjoqqp 例 ```