プログラムメモ

Laravel で API の入出力を自動的にキャメルケースに変換するミドルウェア。

Thu, 06 Nov 2025 22:36:14 +0900

# ● rizkussef/laravel-snake-to-camel-case https://github.com/RizkUssef/laravel-snake-to-camel-case Laravel 内ではスネークケースで統一して、あとは自動的にフロントエンドとのやり取りをキャメルケースにしてくれます。

Laravel で実際にデータベースを見に行った上でTypeScriptの型を生成するパッケージ

Thu, 06 Nov 2025 22:25:32 +0900

# ● fumeapp/modeltyper https://github.com/fumeapp/modeltyper 導入と生成がとても簡単なのでおすすめです。 #### インストール ```sh composer require --dev fumeapp/modeltyper ``` #### 実行（ type を使う場合） ``` php artisan model:typer --use-types ``` #### 実行（ interface を使う場合） ``` php artisan model:typer ``` # ● nolanos/laravel-model-typescript-transformer https://github.com/nolanos/laravel-model-typescript-transfomer...

codeigniter でログを取得する

Mon, 03 Nov 2025 17:06:28 +0900

明示的にメソッドを呼び出してログを記録する方法をご説明します。 ## CodeIgniterの標準ログメソッド特定のコントローラー内で以下のように記述します： ```php _log_access(); // 通常の処理 // ... } public function complete() { // アクセスログを記録...

Laravelで日本語の住所からGoogleマップのURLを取得する関数

Sat, 01 Nov 2025 13:16:41 +0900

# ● composer require spatie/geocoder インストール ``` composer require spatie/geocoder ``` 取得関数 ``` setApiKey(config('geocoder.key'));...

PHPのLaravelでURLをQRコードにするQRコード画像を生成するパッケージ

Sat, 01 Nov 2025 09:15:48 +0900

最短手順は「インストール →（自動登録）→ Bladeやコントローラで QrCode ファサードを呼ぶ」です。SVG表示は即使え、PNG出力は GD/Imagick が必要です。[1][2][3] ### インストール - 実行: composer require simplesoftwareio/simple-qrcode（v4系が推奨）。[2][3] - Laravelの自動パッケージ発見でプロバイダ/エイリアス登録は不要（古い記事の手動追記は基本不要）。[3] ### もっとも簡単な表示（SVG） - Bladeにそのまま埋め込み・{!! QrCode::generate('https://example.com') !!}（デフォルトはサイズ100のSVG）。[4][3] - サイズ指定・{!!...

Laraelのモデルでグローバルスコープ、ローカルスコープを動的なパラメーターでセットする

Fri, 31 Oct 2025 20:51:33 +0900

# ● Laravelのモデルの「スコープ」とは Laravelのモデルのスコープとは簡単にいうと SQL文の「 WHERE aaa = 'bbb'」みたいなWHERE句なのですが、 ``` ・「User」モデルの中の管理者フラグを持つものだけを取り扱う・「User」モデルが既にあるときに、現在削除されてないユーザー（ WHERE is_deleted = 0 ）を「Activeuser」モデルとして作成する。 ``` みたいなところで使います。その時に使うのが　モデルの「スコープ」です。好きな時につけたり外したりできる「ローカルスコープ」と基本的につけっ放しの「グローバルスコープ」があります。 # ● グローバルスコープの作成方法（A. スコープクラスを作成して使う場合）...

Claude Code 便利集

Wed, 05 Nov 2025 13:41:29 +0900

# ● claude -r の代わりに ccr コマンドでClaude Code のセッションを再開する ```sh npm install -g @sasazame/ccresume ``` **.bash_profile** ``` alias ccr='ccresume' ``` ccrコマンドで起動できるようになります。 ``` ccr ``` # ● ccv コマンドでClaude Code の昔のセッションを再開する **.bash_profile** ``` alias ccv='PORT=3400 npx @kimuson/claude-code-viewer@latest; open http://localhost:3400' ``` ccvコマンドで起動できるようになります。 ``` ccv ``` # ● Claude...

gitであるファイルが変更されたコミットを検索する

Thu, 30 Oct 2025 09:10:22 +0900

``` git log --all --full-history --oneline -- "path/to/your/file/test.html" | head -20 ```

LaravelでPest使う

Sat, 08 Nov 2025 09:43:54 +0900

# 1 . PHPユニットに感謝しつつ削除する ```sh composer remove phpunit/phpunit ``` # 2 . Pest をインストール ```sh composer require pestphp/pest --dev --with-all-dependencies ``` # 3 . Pest の初期化 ```sh ./vendor/bin/pest --init ``` # 4 . テスト実行 ```sh ./vendor/bin/pest ``` **.bash_profile** Aliasを設定しておきましょう。 ``` alias pest='./vendor/bin/pest' ``` #### laravle pest で指定したタイトルにマッチするテストだけを実行 ```sh pest...

laravel-arsenal-core を使ってみる

Tue, 28 Oct 2025 20:12:17 +0900

```bash composer create-project laravel/laravel laravel-lac-app ``` ```bash cd laravel-lac-app ``` ```bash composer require lac/toolkit --dev ``` Post テーブルをスキャフォールディングする ``` php artisan lac:scaffold Post php artisan lac:sync-routes ```

vscodeでplant uml を表示する

Tue, 28 Oct 2025 13:35:51 +0900

``` brew install openjdk java --version ``` ``` brew install graphviz brew install plantuml ``` # ● PlantUML https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml

I AM Identity Center / SSO

Fri, 24 Oct 2025 10:50:58 +0900

# ● I AM ユーザーを作ったら負け引用 : https://speakerdeck.com/opelab/20240621-aws-summit-iam?slide=41 ### 従来の方法(IAMユーザー+アクセスキー)の問題点 ``` ・アクセスキーは長期的な認証情報で、漏洩リスクが高い・ローテーションが手動で面倒・ハードコードやGitへの誤コミットのリスク・複数の環境で同じキーを使い回しがち ``` **恒常的なクレデンシャルが常にAWSの外にあることが問題である** ### IAM Identity Centerを使う利点 ``` ・一時的な認証情報を自動取得(数時間で自動失効) ・AWS CLIでaws sso loginコマンドで認証・1つのログインで複数のAWSアカウント・ロールにアクセス可能・より安全で、認証情報の管理が楽 ``` #...

AWS CloudWatchで AWS CloudFrontへのアクセスを調べる

Thu, 23 Oct 2025 13:16:23 +0900

AWS CloudWatchでCloudFrontのファイルアクセスを調査する方法 ## 前提確認が必要な点 CloudFrontのログ設定により調査方法が異なります: ### 1. **CloudFront Real-time Logs**が有効な場合 CloudWatch Logsに直接ログが送信されているため、**CloudWatch Logs Insights**でクエリ可能です。 ``` # 特定のファイルへのアクセスを検索 fields @timestamp, c-ip, cs-uri-stem, sc-status, cs-method | filter cs-uri-stem like /\/path\/to\/your\/file\.ext/ | sort @timestamp desc | limit 1000 ``` **CloudFront...

Webサーバーの負荷テストコマンド ab

Thu, 23 Oct 2025 10:32:29 +0900

# ● Webサーバーの負荷テストコマンド ab ``` ab -n 1000 -c 100 http://localhost/ ``` ## 各オプションの意味 - **`-n 1000`**: 合計で **1000回のリクエスト** を実行 - **`-c 100`**: **同時に100個の並行リクエスト** を実行 - **`http://localhost/`**: ベンチマーク対象のURL ## 動作の流れ 1. 100個の並行接続を確立 2. それらの接続を使って合計1000回のリクエストを送信 3. 各接続は約10回ずつリクエストを処理（1000 ÷ 100） 4. すべてのリクエストが完了したら統計情報を表示 ## 出力される主な情報 - **Requests per second**: 1秒あたりの処理リクエスト数 - **Time per...

Next.jsでFirebase Analyticsを使う

Mon, 20 Oct 2025 16:31:04 +0900

Next.jsにFirebaseアナリティクス（Google Analytics）を追加するには、クライアントサイドでFirebase Analyticsを初期化し、必要に応じてイベント計測を行うようにします ### 手順概要 1. Firebaseプロジェクト作成・設定 2. Firebase SDK依存パッケージのインストール 3. 環境変数でFirebase設定情報を管理 4. クライアントコンポーネントでAnalytics初期化 5. カスタムイベントの記録 *** ### 1. Firebaseプロジェクト作成 - [Firebaseコンソール](https://console.firebase.google.com/)で新規プロジェクトを作成し、Google Analyticsの設定を有効化します。 - プロジェクトの「設定」→「全般」→「マイアプリ」から...

CloudWatch で EC2 の使用状況確認する

Thu, 16 Oct 2025 15:29:47 +0900

### 必要な設定の流れ - IAMロールの作成（CloudWatchへの書き込み権限が必要）[2][1] - CloudWatch エージェントのインストール（EC2にログインしてインストール）[1][2] - CloudWatch エージェントの設定と起動（ディスク監視用）[2][1] - CloudWatchメトリクスの確認（カスタムメトリクスとして表示）[4][5] ### メニューと設定手順 1. **IAMロール作成** AWSコンソール > IAM > ロール作成 → EC2用のCloudWatch書き込み権限付きポリシー（例: AmazonCloudWatchAgent）をアタッチ[6][1][2] 2. **エージェントインストール** EC2インスタンスにログインし、下記URLからCloudWatch...

ngixであるIPからのアクセスのときはベーシック認証を回避するが、それ以外のときはベーシック認証を出す

Thu, 16 Oct 2025 14:34:36 +0900

EngineX（nginx）で特定のIPアドレスからのアクセスはベーシック認証を回避し、それ以外のアクセスにはベーシック認証をかける設定は、nginxの「satisfy any;」ディレクティブを使って実現できます。具体的には、以下のような設定例です： ``` server { listen 80; server_name example.com; location / { satisfy any; # 許可するIPを指定（認証回避） allow 192.168.1.100; allow 127.0.0.1; # 他のIPは拒否 deny all; # ベーシック認証設定 auth_basic...

gitであるコミットの特定ファイルだけを取り出して、自分のブランチに適用させる。

Thu, 16 Oct 2025 12:03:44 +0900

# ● gitであるコミットの特定ファイルだけを取り出して、自分のブランチに適用させる。 cherry-pick より細かいファイル単位で取り出したいときに使います。 ```sh git checkout ＜コミットID＞ -- ＜ファイル名＞ ```

CircleCI CLI を使ってデバッグする

Thu, 16 Oct 2025 09:32:33 +0900

## 1. CircleCI CLI を使う（推奨） CircleCI CLIをインストールして、ローカルでジョブを実行できます。 ```bash # インストール（macOS の場合） brew install circleci # 設定ファイルのバリデーション circleci config validate # ローカルでジョブを実行 circleci local execute --job nextjs_test ``` ただし、`circleci-agent step halt` などの一部のCircleCI専用コマンドはローカルでは動作しません ## 2. ブランチをプッシュしてテスト（プルリクエストなし） ```bash # テスト用ブランチを作成 git checkout -b test/circleci-test # 変更をコミット git...

Go ECHO でログを JSON形式、LTSV形式にする

Tue, 14 Oct 2025 22:40:07 +0900

``` // LoggerミドルウェアをJSON形式で e.Use(middleware.LoggerWithConfig(middleware.LoggerConfig{ Format: `{"time":"${time_rfc3339}","method":"${method}","uri":"${uri}","status":${status},"latency_ms":${latency_ms},"remote_ip":"${remote_ip}","error":"${error}"}` + "\n", })) ``` ``` // LoggerミドルウェアをLTSV形式で e.Use(middleware.LoggerWithConfig(middleware.LoggerConfig{ Format:...

Go ECHO の Recoverミドルウェア

Tue, 14 Oct 2025 22:37:03 +0900

``` // Recoverミドルウェア（panicをキャッチしてログ出力） e.Use(middleware.RecoverWithConfig(middleware.RecoverConfig{ LogLevel: log.ERROR, })) ```

curl コマンドでGETメソッドのレスポンスヘッダーだけを見る

Tue, 14 Oct 2025 18:12:48 +0900

# ● curl コマンドでGETメソッドのレスポンスヘッダーだけを見る ``` curl -s -D - -o /dev/null https://example.com ``` 注意として、-I オプションははHEADメソッドでアクセスするので、厳密にヘッダーを見たい場合は上のようなコマンドを送ります。

Javascript の Set と Map

Tue, 14 Oct 2025 13:33:29 +0900

# ● Javascript の Set #### 1 . Set は重複しないリストを作ることができます ``` const mySet = new Set(); mySet.add(1); mySet.add(1); console.log(mySet); // Set { 1 } // 結果 // { // 0: 1 // } ``` #### 2 . ただし、オブジェクトの場合は参照先が異なるので、別のものとして重複配置はできません。 ``` const myCollection = new Set(); myCollection.add({id: 1, name: 'John'}); myCollection.add({id: 1, name: 'John'}); console.log(myCollection); // 結果 // { //...

git マージしたPRのブランチを checkoutする

Tue, 14 Oct 2025 11:31:04 +0900

# ● git マージしたPRのブランチを checkoutする ``` git fetch <リモート名> <リモート参照>:<ローカルブランチ名> ``` PR#1234 をローカルのブランチ名 my-local-branch-name で checkout する ``` git fetch origin pull/1234/head:my-local-branch-name ```

RTK Query の infiniteQuery

Mon, 13 Oct 2025 10:00:26 +0900

# ● RTK Query の infiniteQuery ## 概要 `build.infiniteQuery()`は、エンドポイント定義時に使用するメソッドで、TypeScriptでは3つのジェネリック型引数を必要とします [1](#5-0) : ```typescript build.infiniteQuery() ``` ## ジェネリック型引数 | 引数 | 説明 | |------|------| | `ResultType` | 単一ページのデータ型（例: `Pokemon[]`） | | `QueryArg` | キャッシュキーとして使用される引数の型（引数がない場合は`void`） | | `PageParam` | ページを特定するためのパラメータの型（例: `number`,...

next.js ondemand ISR のキャッシュの場所

Fri, 10 Oct 2025 11:32:32 +0900

# ● next.js ondemand ISR のキャッシュファイル保存場所 ## 1. キャッシュファイルの保存場所オンデマンドISRのキャッシュファイルは、`FileSystemCache`クラスの`getFilePath`メソッドによって決定されます。 next.js:450-471 キャッシュの種類によって、以下のように保存されます： - Fetchキャッシュ → `.next/cache/fetch-cache`ディレクトリに保存されます。 - ページキャッシュ → `.next/server/app`ディレクトリに保存されます。具体的には ``` ・HTMLファイル: `{key}.html` ・RSCデータ: `{key}.rsc`（PPR有効時は`{key}.prefetch.rsc`）・メタデータ: `{key}.meta`...

ls コマンドの色設定をする

Mon, 06 Oct 2025 09:31:31 +0900

# ● ls コマンドの色設定をするファイル **ls_colors.txt** に色設定を保存して、それを読み出します ``` cd ~ vi ls_colors.txt ``` **ls_colors.txt** ```...

ここで今一度javascriptのランタイムについて整理しておこう

Fri, 03 Oct 2025 09:39:13 +0900

ここで今一度javascriptのランタイムについて整理しておこう # ● ブラウザ以外の主要なJavaScriptランタイム | ランタイム名 | ベースエンジン | 特徴・用途 | |------------------------------|----------------------|--------------------------------------------------------| | Node.js | V8 | サーバーサイドの定番。豊富なnpmエコシステム、API群が充実 | | Deno...

javascript で配列を高速に初期化する

Tue, 30 Sep 2025 09:47:49 +0900

# ● javascript で配列を高速に初期化する js で配列をクリアする時 ```js myarray.length = 0; 　　と myarray= []; ``` どちらが早い？　　　　↓ ```js // 配列 myarray を初期化する myarray.length = 0; ``` の方が高速です！

Amazon ElastiCache

Fri, 26 Sep 2025 16:43:27 +0900

Amazon ElastiCacheとは、AWSが提供するフルマネージド型のインメモリキャッシングサービスです Valkeyが安いので最初に試すにはValkeyが良いでしょう。 # ● キャッシュを作成する ``` AWS Console → ElasitiCache → Valkeyキャッシュ→ キャッシュを作成デフォルト設定をカスタマイズ → 使用量の制限を「データストレージを最大1GB」に設定する ``` これでokです。

circleciで更新がない場合にテストをスキップ

Fri, 26 Sep 2025 13:20:25 +0900

# ● circleciで更新がない場合にテストをスキップ ## 方法1 steps の中で直接判定する。更新がない場合は `circleci-agent step halt` と `exit 0` で以降を中断します。 ``` frontend: docker: - image: cimg/node:200 steps: - checkout - run: name: Check files command: | CHANGED_FILES=$(git diff origin/main --name-only | grep '^PATH/TO/YOUR/PROJECT/') if [ -z...

React19 における React.ReactElement と React.JSX.Element の違い

Thu, 25 Sep 2025 10:31:19 +0900

**React.ReactElement** ``` interface ReactElement< P = unknown, T extends string | JSXElementConstructor = string | JSXElementConstructor, > { type: T; props: P; key: string | null; } ``` **React.JSX.Element** ``` interface Element extends React.ReactElement {} ``` React公式サイトでは ReactElement推しのようです。...

Key , Value でオブジェクトを保存する WeakMap

Tue, 14 Oct 2025 12:29:06 +0900

TypeScript の WeakMap は、JavaScript 標準の WeakMap を型安全に扱うためのものです。参考 : https://ja.javascript.info/weakmap-weakset --- ## 基本 * **キーはオブジェクトのみ** `string` や `number` は使えない（`object | function | symbol` 系が必要）。 * **キーへの参照がなくなると、自動的にGC対象になり、値も破棄される** → メモリリーク防止に便利。 * **列挙不可** `for...of` や `.keys()` などはない。（中身を全部見たい用途では使えない） --- ## 型の書き方 ```ts // WeakMap<キー型, 値型> const wm = new...

TypeScript の satisfies 演算子

Mon, 22 Sep 2025 11:28:54 +0900

## 1. TypeScript の satisfies 演算子とは？ TypeScript 4.9 で導入された演算子で、\*\*「ある値が特定の型制約を満たしているかをコンパイル時に確認する」\*\*ために使います。実行時の挙動には影響せず、完全に **型チェック専用** です。 #### サンプル ```ts type Route = "home" | "about" | "contact"; const routes = { home: "/", about: "/about", contact: "/contact", } satisfies Record; // ✅ Route に対応する URL が必ず存在することを保証 // ✅ 値は string でリテラル保持 ```

Google Chrome Dev Tools でタブのフォーカスを検知する

Tue, 16 Sep 2025 17:28:50 +0900

Dev Tools → More Tools → Rendering → Emulate a focused page に ✅ ただし、バージョンによってはうまく動作しないので注意！ Brave ブラウザなどを使いましょう。

Grid drag & drop npm

Tue, 16 Sep 2025 09:10:20 +0900

# ● react-grid-layout https://github.com/react-grid-layout/react-grid-layout # ● gridstack.js https://github.com/gridstack/gridstack.js

超便利 git grep

Tue, 21 Oct 2025 16:02:26 +0900

# ● 超便利 git grep ## 普通のgrepとgit grepの違いって何？ ``` 検索対象をリポジトリ内に限定できる追跡しているファイルのみ対象に検索できる過去のある時点のファイル状態を検索できる ``` # ● あるフォルダ内でgit grep かけるフォルダに移動してから実行します ``` cd PATH/TO/MY/FOLDER git grep hogehoge ``` # ● あるファイルに限定してgit grep かけるフォルダに移動してから実行します拡張子 .ts に限定して検索する ``` git grep hogehoge -- '*.ts' ```

Goのビルドタグ

Wed, 10 Sep 2025 13:08:46 +0900

# ● Goのビルドタグとは？ Go のソースコードに「このファイルをどの条件でビルド対象に含めるか」を指定する仕組みです。複数の環境（OS、アーキテクチャ、機能の有無など）で異なるソースを切り替えるのに使います。 # ● Goのビルドタグの書き方 ``` //go:build staging ``` # ● 例えば以下のビルドタグを設定するとどうなるのか？ ``` //go:build staging ``` とすると、staging が有効な場合のみこのファイルが読み込まれます。 # ● IntelliJ や Goland で設定する

Amazon linux のバージョンを調べる

Fri, 05 Sep 2025 13:26:13 +0900

# ● Amazon linux のバージョンを調べる ``` cat /etc/system-release ``` CPUアーキテクチャを調べる ``` arch ``` ``` aarch64 : ARM64ビット x86_64 : 64ビットIntel/AMD系CPU ```

なぜgitのコミットメッセージは、現在系を使っているのか？

Thu, 04 Sep 2025 10:08:57 +0900

Gitのコミットメッセージでは**命令形（imperative mood）**を使うのが慣習です。 ## なぜ「add」（原型）なのか **コミットメッセージの考え方：** 「このコミットを適用すると何をするか」を表現するため **テスト方法：** 「If applied, this commit will [your commit message]」で文章が成り立つかチェック ✅ **正しい例：** - "If applied, this commit will **Add** Next.js test job" - "If applied, this commit will **Fix** authentication bug" - "If applied, this commit will **Update** dependencies" ❌ **間違った例：** -...

設定なしで SSR対応できる高速css in js ！ linaria を使ってみる

Mon, 29 Sep 2025 08:58:31 +0900

# ● 1. linaria のインストール ``` npm install @linaria/core @linaria/react npm install next-with-linaria ``` # ● 2. Next.js設定（next.config.ts） ```ts import type { NextConfig } from "next"; import withLinaria from "next-with-linaria"; const nextConfig: NextConfig = { /* config options here */ }; export default withLinaria(nextConfig); ``` # ● コンポーネントで使用するなんと、SSR自動で対応できます。 ``` "use client";...

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

Fri, 29 Aug 2025 08:55:56 +0900

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

Laravel ベンチマークとってみた Laravel / Tempest / CodeIgniter 4

Mon, 01 Sep 2025 12:04:51 +0900

# ● ベンチマーク結果 ``` ・（1位）Codeigniter4 （46.55 req / sec ）・（2位）Laravel8 （16.66 req / sec ）・（3位）Laravel12 （12.17 req / sec ）・（4位）Tempest （ 4.80 req / sec ） ``` # ● php 8.4.1 + Laravel Framework 12.26.3 ``` ab -n 1000 -c 15 http://localhost/ ``` ``` Server Software: Apache/2.4.62 Server Hostname: localhost Server Port: 80 Document Path: / Document Length:...

unixのシェル( bash )の便利な設定(1文字ショートカットとヒストリ)。gitブランチ表示

Thu, 28 Aug 2025 08:53:28 +0900

#● lsコマンドを短縮する unixシェルで一番よく使うコマンドの代表格といえば ``` ls -la ``` だと思います。これを短縮して ``` l [Enter] ``` で実行できると便利なので以下のようにbash のエイリアスを設定します。ホームディレクトリ内の .bash_profile または .bashrc に記述 ``` # alias alias ll='ls -la' alias l='ls -laF' alias c='cd' alias h='history' alias gr='grep' alias hg='history | grep ' alias g='git' alias d='docker' alias dc='docker-compose' alias tf='terraform' alias r='rsub '...

pnpm をインストールする

Thu, 09 Oct 2025 20:11:07 +0900

# ● pnpm の特徴 - シンボリックリンクを使うので使用するディスク容量が圧倒的に少なくなる - node.js のバージョン管理もできる（volta , nodenv 不要です） - npmパッケージインストールが速い（ただし最速を求めるなら bun の方が圧倒的に速いです） # ● pnpm をインストールする npmを使う ```sh npm install -g pnpm ``` brewを使う（めっちゃ遅いです） ``` brew install pnpm ``` # ● pnpm のバージョンを確認する ``` pnpm -v ``` ``` 10.15.0 ``` コマンド名を p にしておく .bash_profile や .zshrc ``` alias p='pnpm ' ``` とすると ``` p i ``` で...

Next.js 14 → 15 へのアップグレード時に考慮すべきこと

Mon, 25 Aug 2025 17:15:58 +0900

# ● Next.js 14 → 15 へのアップグレード時に考慮すべきことをまとめました（ with AI ） # Next.js 15.x 完全変更点まとめ Next.js 14からNext.js 15への移行を検討している方向けに、Next.js 15.xの全バージョンの変更点を網羅的にまとめました。 ## 📋 概要 **リリース日程** - Next.js 15.0: 2024年10月21日（安定版） - Next.js 15.1: 2024年12月10日 - Next.js 15.2: 2025年2月26日 - Next.js 15.3: 2025年4月9日 - Next.js 15.4: 2025年7月14日 - Next.js 15.5: 2025年8月18日 --- ## 🔧 Next.js 15.0（メジャーリリース） ### 主要な変更点...

npm install を 30 〜 50% 高速化する? 。flash-install

Mon, 25 Aug 2025 17:05:23 +0900

# ● flash-install のインストール ``` npm install -g @flash-install/cli ``` # ● flash-install の使い方 ``` # Install dependencies flash-install install # Create a snapshot for faster future installs flash-install snapshot # Restore from a snapshot (ultra-fast) flash-install restore # Clean up flash-install clean ```

3000番ポートを開放する

Mon, 25 Aug 2025 11:45:23 +0900

# ● 3000番ポートを開放する ``` lsof -i :3000 ``` 結果例 ``` COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAME node 23409 kato 13u IPv6 0xd079e406c320d408 0t0 TCP *:hbci (LISTEN) node 23409 kato 25u IPv6 0x4d1ed927682eeb8f 0t0 TCP localhost:hbci->localhost:64032 (CLOSED) node 23409 kato 29u IPv6 0x5df33dc0b699ffd 0t0 TCP...

Next.js に HeroUI ( + tailwindcss@4 ) を設定する。

Mon, 25 Aug 2025 13:35:03 +0900

新しいバージョンの HeroUI ( + tailwindcss@4 )をノリで適当にインストールすると、cssがきなかい。ということが起きるのでしっかりと設定方法を確認しましょう。 # ● heroui のインストール ``` npm install @heroui/react framer-motion ``` # ● hero.ts の作成と読み込み hero.tsが必要になります。hero.ts - HeroUIプラグインの定義です。重要なのは： 1. hero.ts - HeroUIプラグインの定義 2. @plugin "./hero.ts" - プラグインの読み込み 3. @source - HeroUIテーマファイルの読み込みを行うということです。 **hero.ts** ``` import { heroui } from...

黄金比でレイアウトされるLiftkitコンポーネント

Thu, 21 Aug 2025 23:06:57 +0900

Liftkitのインストール ``` npm install @chainlift/liftkit --save-dev ``` ``` npx liftkit init ``` ボタンコンポーネントをインストールする ``` npm run add button ``` ``` import Button from "@/components/button"; ``` ```