unix の kill コマンドを操る

Fri, 19 Apr 2024 14:36:30 +0900

# ● プロセスを終了させる（SIGTERM を送信する） ``` kill プロセス番号 ``` # ● プロセスを終了させる（SIGHUP を送信する） ``` kill -HUP プロセス番号 ``` # ● プロセスを終了させる（SIGINT を送信する） ``` kill -INT プロセス番号 ``` # ● プロセスを終了させる（SIGQUIT を送信する） ``` kill -QUIT プロセス番号 ``` ...

「あるポート」を使用している「プロセス」と「プロセスID」を調べる

Thu, 25 Apr 2024 17:02:36 +0900

# ● lsof を使用して「あるポート」を使用している「プロセス」と「プロセスID」を調べる ``` lsof -i :3000 ``` # ● netstat を使用して「あるポート」を使用している「プロセス」と「プロセスID」を調べる ``` netstat -tulpn | grep :3000 ``` # ● ss を使用して「あるポート」を使用している「プロセス」と「プロセスID」を調べる ``` ss -ltnp | grep :3000 ```

nginx の 3つのロードバランス方法

Tue, 16 Apr 2024 20:56:47 +0900

# ● 1. ラウンドロビン（デフォルト）リクエストを順番に各サーバーに分配します。 ``` upstream myapp { server backend1.example.com; server backend2.example.com; server backend3.example.com; } ``` # ● 2. 最少接続数 (Least Connections) 最少接続数は現在処理中の接続が最も少ないサーバーにリクエストを割り当てる方法です。 ``` upstream myapp { least_conn; server backend1.example.com; server backend2.example.com; server backend3.example.com; } ``` #...

Google Analytics で User-ID を収集する

Tue, 16 Apr 2024 13:58:36 +0900

# ● Google Analytics で User-ID を収集する Google Analytics の管理画面から以下をたどって設定することができます ``` 管理（ギアアイコンクリック）　→　データの収集と修正　→　データの収集 ``` # ● ユーザー ID を送信する https://developers.google.com/analytics/devguides/collection/ga4/user-id?sjid=3844786493617880499-AP&hl=ja&client_type=gtag Googleタグ ``` // ユーザー ID をアナリティクスに送信するには、ウェブサイトの各ページに設置している測定コードの config コマンドに user_id パラメータを追加します。 // 次のスニペットを使って、G-XXXXXXXX...

lefthook

Tue, 09 Apr 2024 10:55:26 +0900

``` brew install lefthook ``` hooks を設定したい gitリポジトリのトップへ移動して ``` lefthook install ``` lefthook.yml を編集します。 https://github.com/evilmartians/lefthook/blob/master/docs/configuration.md

Pleskでサーバのホスト名を設定する

Mon, 22 Apr 2024 13:35:56 +0900

# ● Pleskでサーバのホスト名を設定する ``` 「ツールと設定」→「般設定」→「サーバ設定」へ移動し「フルホスト名」で設定します。 ```

CDK for Terraform のインストール

Mon, 01 Apr 2024 15:59:54 +0900

# ● Terraformのバージョンマネージャーのインストール ``` brew install tfenv ``` ``` tfenv --version ``` ``` tfenv 3.0.0 ``` tfenv でインストール可能なバージョンの一覧を表示させる ``` tfenv list-remote ``` バージョンはこちらも参考に https://developer.hashicorp.com/terraform/install バージョン 1.7.5 のインストール ``` tfenv install 1.7.5 tfenv use 1.7.5 ``` # ● インストール済みの tfenv 一覧 ``` tfenv list ``` Terraform のインストール ``` brew tap hashicorp/tap brew...

KUSANAGI9 の初期設定とドメイン作成（プロビジョン）方法

Sun, 31 Mar 2024 21:11:39 +0900

# ● 1. KUSANAGI9 のバージョンチェックと yum のアップデートを行う **KUSANAGI9 から kusanagiユーザーから実行できるようになりました。kusanagiコマンドは root ユーザーまたは kusanagi ユーザーから行います** ``` kusanagi --version ``` 以下のようにバージョンが帰ってきます ``` KUSANAGI Version 9.4.2-1.el9 ``` dnf は **root** ユーザーから行います ``` sudo dnf update -y ``` パッケージのupdateは **yum** コマンドではなく **dnf** コマンドを使用します。 # ● 1-2 現在のunixマシン名（ホスト名）を確認・変更する #### 確認 ``` hostname ```...

lint-staged と husky を設定する

Fri, 05 Apr 2024 11:07:58 +0900

# ● lint-staged と husky のインストール ``` npm i -D husky lint-staged ``` # ● husky の初期化（v9） ``` npx husky init ``` # ● husky の初期化（v8） ``` npx husky install ``` # ● huskyのpre-commit の追加 .husky/ディレクトリ内の **pre-commit** に作成する ``` echo "npx lint-staged" > .husky/pre-commit ``` # ● husky の設定ファイルの作成 **huskyの設定を書ける箇所** ``` 1. package.json 2. .huskyrc 3. husky.config.js 4. .husky/ディレクトリ ``` # ●...

eslint で typescript エラーを吐かせる

Fri, 05 Apr 2024 11:09:26 +0900

# ● eslint で typescript エラーを吐かせる（eslintプラグインを使う方法） ``` npm i -D @typescript-eslint/eslint-plugin ``` **.eslintrc.json** に吐かせたいルールを追記することで、typescriptエラーも表示させることができます。 ``` { "extends": [ "plugin:@typescript-eslint/recommended", "next/core-web-vitals" ], "rules": { "@typescript-eslint/no-unused-vars": "warn", "@typescript-eslint/no-explicit-any": "warn" } } ``` # ●...

ローカルPCのサーバーを同じネットワーク内のスマホから確認する。

Wed, 27 Mar 2024 09:25:22 +0900

# ● charles https://www.charlesproxy.com/download/beta/ 30日間お試しができるシェアウェアです。 # ● 設定1. Mac または PC 側 charles を起動しておきます。 # ● 設定2. iphone側 ``` iPhoneは接続しているWifi設定で i マークをタップします。プロキシを構成 → 「手動」にします ========================== サーバ：192.168.1.xx ポート:8888 ========================== プロキシを構成を手動ににしてサーバに自分のPCのIPアドレスを登録してポート8888を設定します。 ``` # ● 設定3. macからのアクセスを許可する...

supervisordでプロセス監視

Wed, 17 Apr 2024 09:33:41 +0900

# ● pipのインストール ``` dnf install python3 python3-pip ``` # ● バージョンを確認する ``` python -V pip3 -V ``` ``` pip3 install --upgrade pip ``` ``` pip3 install supervisor ``` バージョン確認 ``` supervisord --version ``` 設定ファイルの作成 ``` mkdir /etc/supervisor/ mkdir /etc/supervisor/conf.d /etc/supervisor/supervisor.sock vi /etc/supervisor/supervisord.conf ``` **supervisord.conf** ``` [supervisord] #...

next.js の多言語ブログでビルド時に静的にルートを生成して高速化する

Thu, 21 Mar 2024 17:25:30 +0900

# ● npm run build の結果が Dynamic の時は、静的にルート生成できるかどうかを検討すると良いです。 ``` ┌ ○ / 141 B 84.6 kB ├ λ /[Code]/about 2.16 kB 276 kB ``` ``` λ (Dynamic) server-rendered on demand using Node.js ``` ↑ この記号が出ているということはダイナミックルートになっています。こちらを静的ルートに変更してみましょう。 **page.tsx** に以下を追加します。 ``` export async function getLangNameStaticParams():...

TTFB

Thu, 21 Mar 2024 14:28:09 +0900

# ● TTFB とは ``` TTFBとは、Time To First Byte の略で、ウェブページの読み込み時間を測る指標の1つです。具体的には、クライアント(通常はウェブブラウザ)がウェブサーバーに対してリソース(HTMLファイル、画像、JavaScriptなど)を要求してから、最初のバイトデータを受信するまでの時間を示します。 TTFBが短いほど、ユーザーがページの表示を視覚的に認識するまでの時間が短縮されるため、ユーザーエクスペリエンス(UX)の改善につながります。一方、TTFBが長くなると、ユーザーが待たされる時間が長くなり、ストレスやフラストレーションを感じる可能性があります。...

Vercel の X-Vercel-Cache　ヘッダ

Thu, 21 Mar 2024 13:39:57 +0900

``` bypass:キャッシュがバイパスされたため、応答はオリジンサーバーから提供されました。 hit : 応答はエッジから提供されました。 miss : 応答はエッジで見つからなかったため、オリジンサーバーから取得されました。 prerender : 応答は静的ストレージから提供されました。 revalidated : エッジで古い応答が見つかりましたが、同期的に再検証されました。 stale : 応答が古い (エッジから提供される)。 ```

ファイル転送コマンド scp , rsync

Tue, 19 Mar 2024 13:30:10 +0900

# ● scpコマンド ``` scp -r -P <ポート番号> <ソースファイル/ディレクトリ> <ユーザー名>@<サーバーホスト>:<転送先パス> ```

-r オプションでディレクトリを再帰的にコピー
-P オプションでSSHポート番号を指定(デフォルトは22)
転送が中断された場合、再開が可能

```...

github の Dependabot で通知を送りたい

Fri, 15 Mar 2024 15:16:37 +0900

GitHubのDependabotを活用して、npmパッケージの脆弱性を監視し、通知を受け取る設定は次のように行えます。 ## 1.リポジトリにDependabotを有効化する ``` リポジトリのSettings > Security > Code security and analysis > Enablgit を選択し「Enable Dependabot alerts」と「Enable Dependabot security updates」の両方にチェックを入れます。 ``` ## 2.脆弱性の通知設定を行う ``` Settings > Security > Code security and analysis > Dependabot alerts で通知設定を行います。「Add advisors...」から通知を受け取る対象のメンバーやTeamを追加...

Google Core Web Vitals とは

Fri, 15 Mar 2024 09:58:13 +0900

# ● Core Web Vitals とは ``` Core Web Vitalsは、Googleが提唱するウェブサイトのユーザーエクスペリエンス指標の集合体です。ユーザーにとって快適なWebサイトを実現するための重要な指標となっています。 ``` Core Web Vitalsは以下の3つの指標で構成されています。 ####・Largest Contentful Paint (LCP) ``` メインコンテンツが読み込まれるまでの時間を測定ユーザーが待たされすぎると離脱するため、重要な指標 ``` ####・First Input Delay (FID) ``` ユーザーがサイトと最初にインタラクション(クリック、タップ、スクロールなど)した時の応答性を測定応答が遅れるとフラストレーションを感じるユーザーが多い ``` ####・Cumulative...

cssのカスケードレイヤー(@layer)の書き方

Thu, 14 Mar 2024 15:07:48 +0900

# ● cssのカスケードレイヤー(@layer)の書き方 ## ・パターン 1 全てのレイヤーを宣言する場合 ``` /* レイヤー宣言 (後にくるレイヤーの優先順位が高くなる) */ @layer base, components; @layer components { .alert { font-weight: bold; background-color: rgb(222, 255, 222); color: green; padding: 1rem; border-radius: 5px; margin-bottom: 1rem; } } @layer base { .alert { font-size: 40px; background-color: #f8d7da;...

Next.js の App Router ざっくりまとめ

Fri, 29 Mar 2024 11:06:56 +0900

# ● Next.jsの App Router , Pages Router で登場する名称 | ---- | App Router | Pages Router | | ---- | ---- | ---- | | APIルートの名前 | Route Handlers | API Routes | | useRouterの場所 | import {useRouter} from "next/navigation" | import { useRouter } from "next/router" # ● app router の特別な命名 /app/ ディレクトリ以下では次の命名は特別な意味を持ちます。

名前	番号	動作（※）	意味

...

Lambda関数URL に独自ドメイン

Mon, 11 Mar 2024 16:09:32 +0900

# ● 1. 【AWS Cloud Front】Lambda関数URLに Cloud Front の URLを割り当てる ### 1. 「AWS Console」 → 「Cloud Front」へ移動 ### 2. 「ディストリビューションを作成」からURLにlambda関数を指定して作成する。 ### 3. 作成された URL でLambda関数が実行されることを確認する。 # ● 2. 【AWS Rouite53】AWS以外で取得管理しているドメインを AWS で使用できるようにする。（NSサーバを AWS Rouite53 にする） ### 1. 「AWS Console」 → 「Route 53」へ移動 ### 2. 「ホストゾーンを作成」からドメイン名を入力し、作成する。一覧に NS のホスト名が表示されるのでコピーする（例） ```...

next.js standalone

Fri, 19 Apr 2024 18:05:18 +0900

# ● next.js の standaloneモードを有効にしてビルドする https://nextjs.org/docs/app/api-reference/next-config-js/output **next.config.js** ``` /** * @type { import("next").NextConfig} */ const config = { output: 'standalone' } ``` ### ビルド ``` npm run build ``` ### サーバースタート ``` node .next/standalone/server.js ``` 引用 : https://bit.ly/4a1YSDs ```...

git コミット　取り消し

Fri, 08 Mar 2024 16:47:13 +0900

# ● gitで一番最後のコミットを取り消してステージングに戻す ``` git reset --soft HEAD~ ``` # ● gitで一番最後のコミットを取り消して、修正自体も行わなかったことにする ``` git reset --hard HEAD~ ```

Laravel 10 へのアップグレード

Wed, 06 Mar 2024 21:08:38 +0900

古いLaravelアプリを最新 Laravelへアップグレードする場合、おすすめの方法は # ● 1. Laravel アプリを初期化 ``` composer create-project laravel/laravel my_app ``` # ● 2. composer.json で使用しているパッケージをcomposerコマンドを使ってインストール自動的に最新バージョンがインストールされます。また、最新の環境でインストールできないものも教えてくれます。 ``` composer require <パッケージ名> ``` ``` # ● インストールNG パッケージ chumper/zipper # ● 廃止パッケージ fideloper/proxy # ● Laravel11で廃止されるパッケージ laravelcollective/html →...

削除されたヘルパー関数 Call to undefined function str_limit() を修正する

Wed, 06 Mar 2024 16:13:01 +0900

以下のような str_limit() 関数で「Call to undefined function str_limit()」エラーになることがあります ``` str_limit($publication->name_zh, 50, '...') ``` ↓ パッケージ laravel/helpers をインストールします ``` composer require laravel/helpers ```

PHP 7.4 や 8 で出るエラー「Array and string offset access syntax with curly braces is no longer supported」の修正

Wed, 06 Mar 2024 15:11:30 +0900

次はエラーとなります。 ``` echo $information->img_html_name_{$column_index}; ``` ↓　このように修正します ``` echo $information->{"img_html_name_".$column_index}; ```

Laravel 10 から削除された Model の $dates を $casts で書き換える

Wed, 06 Mar 2024 13:04:54 +0900

# ● Laravel 10 から削除された Model の $dates を $casts で書き換える ``` protected $dates = ['posted_date']; ``` 　↓ ``` protected $casts = [ 'posted_date' => 'immutable_datetime' ]; ```

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

Tue, 05 Mar 2024 09:54:11 +0900

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

next.js アプリを https で起動する

Thu, 29 Feb 2024 17:15:27 +0900

# ● npm run dev で起動する開発サーバーのnext.js アプリを https で起動する #### package.json に dev:https コマンドを追加 **package.json** ``` "scripts": { "dev": "next dev", "dev:https": "next dev --experimental-https", "build": "next build", "start": "next start", "lint": "next lint" }, ``` ``` npm run dev:https ``` https://localhost:3001 にアクセスできることを確認します。以上です。簡単ですね。 # ● npm run start...

npm init vite@latest で作成したreactアプリで purgecss したい

Thu, 29 Feb 2024 17:46:17 +0900

``` Viteを使用して作成されたReactアプリでPurgeCSSを組み込む場合、設定はWebpackベースのプロジェクトとは異なります。 Viteは、デフォルトでRollupまたはesbuildを使ってバンドルを行うため、Webpackのプラグインを直接使用することはできません。しかし、PostCSSを介してPurgeCSSを使用することができます。 ``` ``` npm i -D postcss postcss-cli @fullhuman/postcss-purgecss ``` ``` vi postcss.config.js ``` **postcss.config.js** ``` import purgecss from '@fullhuman/postcss-purgecss'; export default { plugins: [...

findとgrepによる再帰検索

Tue, 27 Feb 2024 14:05:30 +0900

# ● grepによる再帰検索 **拡張子 .ts と .tsx ファイルを文字列 foobar で検索（カレントディレクトリ ./ 以下）** ``` grep -rnw './' -e 'foobar' --include=\*.{tsx,ts} ``` # ● findとgrepによる再帰検索 **再帰的に文字列【onClick】でカレントディレクトリ以下の全ての【拡張子 .tsxファイル】を検索するには** ``` find . -name "*.tsx" -print0 | xargs -0 grep 'onClick' ``` とやります。拡張子による絞り込みが不要の場合は、以下のようにしてもokです ``` grep -r 'onClick' . ```

Mapオブジェクトの .set() とコンストラクタの違い

Tue, 27 Feb 2024 09:35:09 +0900

# ● Mapオブジェクトの .set() ``` const myMap = new Map().set('myData', { name: 'lang', value: 'japanese' }) ``` # ● Mapオブジェクトのコンストラクタ ``` const myMap = new Map([ ['myData', { name: 'lang', value: 'japanese' }] ]); ```

ベンチマークコマンド siege wrk

Tue, 16 Apr 2024 18:24:16 +0900

ab 以外のベンチマークを使いたい場合、他にも選択があります。 # ● siege ``` Siege は ab コマンドよりも進んだ機能を提供し、ウェブページ内で参照される静的コンテンツ（CSS、JavaScript、画像など）を含むリクエストの処理が可能です。 ``` **siegeのインストール** mac ``` brew install siege ``` unix ``` apt-get install siege ``` **siegeの実行例** ``` siege --benchmark --concurrent=5 --time=10s http://127.0.0.1:3000/ ``` # ● wrk **wrk のインストール** ``` git clone https://github.com/wg/wrk.git cd...

React hooksの概要 useContext による Provider

Fri, 29 Mar 2024 08:59:05 +0900

### 1. Providerコンポーネント /src/providers/MyValueProvider.tsx ``` 'use client'; import React, { createContext, useContext, useState, ReactNode, Dispatch, SetStateAction, } from 'react'; type Myvalue = 'ja' | 'en'; const initialValue = 'ja'; // 値を保持するコンテキスト export const MyvalueContext = createContext(initialValue); // 値を更新する関数を提供するコンテキスト const MyvalueDispatcherContext =...

WebStorm で next.js のサーバーサイドをデバッグ

Thu, 22 Feb 2024 16:29:53 +0900

# ● WebStorm で next.js のサーバーサイドをデバッグ vscodeより簡単です。 # 1. package.json を右クリックして「npm スクリプトの表示」を選択する（ディレクトリツリーの下にnpmスクリプト一覧が表示されます） # 2. npm スクリプト一覧からdevを右クリックし「'dev'設定の編集」を選択し、「起動前」に「Webブラウザーの起動」を追加するこれで起動は完了です。...

Next.js のページが「サーバー」/「クライアント」でどう動いているかを調べる

Tue, 20 Feb 2024 19:19:34 +0900

# ● Next.js のページが「サーバー」/「クライアント」でどう動いているかを調べる https://next-code-elimination.vercel.app/ 左側がページのコンポーネント全て、右側がクライアントに渡されるコードです。 [App Router導入後のNext\.js開発におけるDead Code Eliminationの活用](https://zenn.dev/ryosuketter/articles/e8514930ecc3db) # ● クライアント側だけで処理を行う。 isClient を定義して、これを利用します ``` const isClient = typeof window !== 'undefined'; ```

bun create next-app と npx create-next-app の違い

Mon, 19 Feb 2024 10:04:38 +0900

# ● bun create next-app と npx create-next-app の違いこの２つのコマンドで違うことは何か？ ``` ・bun.lockb が生成される。 ``` つまり **package.json** に変更はありません。では bun.lockb を後から生成してみましょう。 # ● package.json から bun.lockb を生成する ``` bun i ``` 以下のように表示され、同時に bun.lockb が生成されます。 ``` bun install v1.0.27 (c34bbb2e) [7.78ms] migrated lockfile from package-lock.json 15 packages installed [87.00ms] ``` # ● bun.lockb が git...

bun を全てのユーザーが使えるようにする

Sun, 18 Feb 2024 09:45:02 +0900

# ● bun のインストール（rootユーザー） root ユーザーで行います ``` curl -fsSL https://bun.sh/install | bash ``` # ● bun を全てのユーザーが使えるようにする root ユーザーで行います ``` sudo mv /root/.bun/bin/bun /usr/local/bin/ sudo chmod a+x /usr/local/bin/bun ```

アプリが bun で動いているのか node.js で動いているのかを判別する

Sat, 17 Feb 2024 21:19:18 +0900

アプリが bun で動いているのか node.js で動いているのかを判別する ``` const bunVersion = process.versions.bun ?? "" ```

react で i18n

Fri, 16 Feb 2024 17:00:42 +0900

``` npm init vite@latest i18n-ts-app ``` ``` npm i react-i18next npm i i18next npm i i18next-browser-languagedetector ``` ``` cd src mkdir i18n vi i18n/configs.ts ``` **src/i18n/configs.ts** ``` import i18n from 'i18next'; import { initReactI18next } from 'react-i18next'; import LanguageDetector from 'i18next-browser-languagedetector'; import translation_en from './en.json'; import...

Lighthouseのスコア上げ

Wed, 14 Feb 2024 15:08:29 +0900

# ● Lighthouseのスコア上げ https://jpsern.com/lighthouse-score-attack/ https://originale.cc/css-customize/

Redux のフック

Thu, 14 Mar 2024 17:28:55 +0900

### useSelector * **用途**: Redux ストアの状態からデータを選択（抽出）するために使用します。 * **使い方**: `useSelector(selectorFunction)` は、`selectorFunction` を使用して Redux ストアの状態から特定の部分を選択します。このフックを使用すると、コンポーネントは選択した状態の部分が更新されるたびに再レンダリングされます。 ### useDispatch * **用途**: Redux ストアにアクションをディスパッチ（運ぶ）するために使用します。 * **使い方**: `const dispatch = useDispatch()` でフックを使用して、`dispatch` 関数を取得します。この関数を通じてアクションをディスパッチすることができます（例:...

npm で指定したパッケージだけupgradeしたい

Tue, 13 Feb 2024 09:21:05 +0900

# ● 特定のnpmパッケージのバージョン一覧を表示 ``` npm view パッケージ名 versions ``` # ● npm で指定したパッケージだけupgradeする ``` npm install パッケージ名@バージョン ```

プロジェクト内の npm パッケージの更新手順

Tue, 06 Feb 2024 16:32:07 +0900

# ● 1. npm outdated でパッケージが最新かどうかを確認する。 ``` npm outdated ``` # ● 2. npm update でメジャーバージョンをまたがない update を行う ``` npm update はセマンティックバージョニングに従った package.json で指定されたバージョン範囲内で最新のバージョンを探します。たとえば、^1.0.0 と指定されている場合、1.x.x の最新バージョンにアップデートしますが、2.0.0 にはアップデートしません。またメジャーバージョンが変わるような大きな変更（破壊的変更）は行いません。依存関係を最新の状態に保ちつつ、プロジェクトの互換性を保つために使用されます。 ``` # ● 3. npm audit でパッケージの脆弱性の検査を行う ``` npm audit...

npm バージョンをマイナーで留めておく

Tue, 06 Feb 2024 10:17:00 +0900

# ● キャレット指定（メジャーバージョンで止める） **package.json** ``` "my-package": "^3.1.5", ``` これは最大で 3.9.99 のように「同一のメジャーバージョン内で最大のバージョン指定」となります # ● チルダ指定（マイナーバージョンで止める） **package.json** ``` "my-package": "~3.1.5", ``` これは最大で 3.1.99 のように「同一のマイナーバージョン内で最大のバージョン指定」となりますその他の指定方法はこちらがよくまとまっています。 [【package\.json】バージョン指定の書き方と調べ方【11種類】 \- 空色彩開発ブログ](https://skyblue-dev.com/package-json-version/)

layout.tsx

プログラムメモ

react で svg を import して扱う

次世代画像フォーマット avif に変換する / Finder右クリックで変換できる様にする

MySQL ( MariaDB )の最低限のメモリチューニング

Next.js Web Vitals