プログラムメモ

vs code の typescript おすすめ設定

Wed, 24 Jul 2024 10:06:18 +0900

# ● vs code の typescript おすすめ設定 ``` "[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.organizeImports": "explicit", // import自動ソート "source.fixAll": "explicit", // eslintやprettierのfixを実行 "source.addMissingImports": "explicit" //...

typescript の tsconfig.json の include と exclude

Fri, 12 Jul 2024 09:54:04 +0900

# ● tsconfig.json の include https://www.typescriptlang.org/ja/tsconfig/#include ``` プログラムに含めるファイル名またはパターンのリストを指定します。ファイル名はtsconfig.jsonファイルを含んでいるディレクトリからの相対パスとして解決されます。 ``` **tsconfig.json** ``` { "include": ["src/**/*", "tests/**/*"] } ``` # ● tsconfigの exclude https://www.typescriptlang.org/ja/tsconfig/#exclude ``` includeの解決時にスキップさせるファイル名やパターンのリストを指定します。 ```

typescript ?修飾子と undefined の違い

Thu, 11 Jul 2024 10:32:52 +0900

``` address?: string; ``` と ``` address: string | undefined; ``` を同じと認識されている方が多いようですが、以下のようにキーが存在するかどうか？という点で違いがあります。 ``` interface Person { name: string; age: number; address?: string; } const person1:Person = { name:"yamada", age:20 }; const person2:Person = { name:"yamada", age:20, address: undefined }; console.log(person1.address); // undefined...

dnf update に失敗する場合の対応

Thu, 04 Jul 2024 15:17:15 +0900

``` dnf update -y ``` が以下のエラーで失敗する場合の対応 ``` CentOS Stream 8 - AppStream Errors during downloading metadata for repository 'appstream': - Curl error (6): Couldn't resolve host name for http://mirrorlist.centos.org/?release=8-stream&arch=x86_64&repo=AppStream&infra=stock [Could not resolve host: mirrorlist.centos.org] ``` ``` cd /etc/yum.repos.d/ ``` ``` sed -i 's/mirrorlist/#mirrorlist/g'...

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

Tue, 25 Jun 2024 17:14:22 +0900

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

npm i を実行した時の prepare , postinstall の実行順

Fri, 21 Jun 2024 16:33:40 +0900

**package.json** ``` { "name": "example-project", "version": "1.0.0", "scripts": { "preinstall": "echo preinstall", "install": "echo install", "postinstall": "echo postinstall", "prepare": "echo prepare" }, "dependencies": { "react": "^18" } } ``` ``` npm i ``` **結果** ``` preinstall install postinstall prepare ``` # ● preinstall, install, postinstall,...

2つ前のコミットのタイトルを変更したい

Wed, 19 Jun 2024 13:07:00 +0900

# ● git rebase -i を使用する ``` git rebase -i コマンドは、インタラクティブリベースを実行するためのコマンドです。これは、コミットの履歴を再整理し、コミットメッセージを変更したり、コミットを結合したり、不要なコミットを削除したりするために使用されます。 ``` # ● 2つ前のコミットのタイトルを変更したい ### ・直近 2つのコミットを操作する ``` git rebase -i HEAD~2 ``` 以下のように表示されます。 ``` pick f1e2d3f 初めのコミットメッセージ pick a4b5c6g 次のコミットメッセージ ``` ###・操作を指定する操作としては以下の記述のどれかを指定します。 ``` pick：そのままコミットを使う reword：コミットメッセージを変更する...

iphone で /etc/hosts を変更する代わりにMacでプロキシサーバ立てる

Fri, 14 Jun 2024 11:25:04 +0900

``` brew install squid brew services start squid ``` vi /opt/homebrew/etc/squid.conf ``` # # Recommended minimum configuration: # # Example rule allowing access from your local networks. # Adapt to list your (internal) IP networks from where browsing # should be allowed acl localnet src 0.0.0.1-0.255.255.255 # RFC 1122 "this" network (LAN) acl localnet src 10.0.0.0/8 # RFC 1918...

curl より見やすい httpie をインストールする

Tue, 11 Jun 2024 11:58:45 +0900

# ● httpie をインストールする ``` brew install httpie ``` # ● http コマンドの実行 ``` http GET https://www.google.co.jp/ ``` # ● http コマンドの実行（表示を詳しく） ``` http --follow --verbose GET https://www.google.co.jp/ ```

ChatGPTに素早く質問するためにファイル名とファイル内容をクリップボードにコピーするコマンドを作成する vs code / webstorm

Fri, 07 Jun 2024 16:07:07 +0900

# ● ChatGPTに素早く質問するためにファイル名とファイル内容をクリップボードにコピーするコマンドを作成する ## 1. cfc コマンドの作成 ``` sudo vi /usr/local/bin/cfc ``` ``` #!/bin/bash if [ -z "$1" ]; then echo "No file path provided" exit 1 fi FILE_PATH="$1" FILE_NAME=$(basename "$FILE_PATH") FILE_CONTENT=$(cat "$FILE_PATH") FORMATTED_CONTENT="**${FILE_NAME}**\n\n\`\`\`\n${FILE_CONTENT}\n\`\`\`" # MacOSの場合: echo -e "$FORMATTED_CONTENT" |...

gitプロジェクト内にスニペットを作成する

Wed, 05 Jun 2024 09:26:11 +0900

# ● gitプロジェクト内にスニペットを作成する **.vscode/myteam.code-snippets** (名前は何でも良い。) 以下のフォーマットで置くだけです。 ``` { "console.log (独自スニペット)": { "scope": "javascript,typescript", "prefix": "cl", "body": ["console.log('$1');", "$2"], "description": "console.log snippet" }, } ``` 改行は変換しないといけないので、拡張機能を使用しましょう。 # ● snippet-generator...

vscode , cursor エディタなどで .git フォルダが見えないのを見えるようにする

Mon, 03 Jun 2024 15:53:10 +0900

# ● vscode , cursor エディタなどで .git フォルダが見えないのを見えるようにする下記のように指定ファイルとフォルダを表示する設定を変更します ``` 1. VSCode のメニューから File (またはファイル) > Preferences (または設定) > Settings を選択します。 2. 左側の検索バーに「files: exclude」と入力します。 3. Files: Exclude 設定のリストから .git フォルダが含まれているか確認し、もし含まれている場合はそのチェックを外します。 ```

laravel で controller からある artisan コマンドを実行する

Sun, 02 Jun 2024 09:18:29 +0900

# ● laravel で controller からある artisan コマンドを実行するまず、コントローラーの中でArtisanファサードをインポートします。 ``` use Illuminate\Support\Facades\Artisan; ``` ``` public function runCustomCommand() { $exitCode = Artisan::call('your:command', [ 'name' => 'value', ]); return response()->json(['message' => 'Custom command executed successfully.', 'exitCode' => $exitCode]); } ```

Mac に rustと wasm-pack をインストールする

Tue, 28 May 2024 17:05:15 +0900

# ● rustupのインストール ``` curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh ``` **.bash_profile** ``` source ~/.cargo/env ``` # ● rustのバージョン確認 ``` rustc --version ``` # ● wasm-pack のインストール ``` cargo install wasm-pack ```

png画像の最適化は結局何を使う

Mon, 27 May 2024 10:17:03 +0900

png画像最適化の選択肢引用 : https://tinyurl.com/29qksq92

画像形式ロッシープラグインロスレスプラグイン

JPEG imagemin-mozjpeg imagemin-jpegtran

PNG

next.js で Google Analytics

Fri, 17 May 2024 17:51:44 +0900

# ● react-ga4 を使用する場合 ``` npm i react-ga4 ``` **src/googleAnalytics/GoogleAnalytics.tsx** ``` 'use client'; import ReactGA from 'react-ga4'; import { usePathname, useSearchParams } from 'next/navigation'; import { useEffect } from 'react'; export const GOOGLE_ANALYTICS_ID = process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID ?? ''; ReactGA.initialize(GOOGLE_ANALYTICS_ID, { // testMode: true,...

eslint で現在の設定値を確認する

Tue, 14 May 2024 09:39:17 +0900

# ● eslint で現在の設定値を確認する ``` npx eslint --print-config ファイル名 ``` とすると、設定一覧が出てきます。

ncu npm パッケージのアップグレードを楽にする

Wed, 15 May 2024 16:04:26 +0900

# ● ncuのインストール ``` インストールは不要です。npx コマンドで実行するので。どうしてもインストールしたい方はこちらのコマンドから npm install -g npm-check-updates ``` # ● 1. ncuによる package.json の書き換え（パッチバージョン）例: 10.5.1 → 10.5.21 のようにパッチバージョンをアップグレードします ``` npx npm-check-updates -u --target patch // その後プロジェクトのnpmパッケージをアップグレードする npm i ``` # ● 2. ncuによる package.json の書き換え（マイナーバージョン）例: 10.5.1 → 10.6.9 のようにマイナーバージョンをアップグレードします ``` npx...

RTK Query

Fri, 26 Jul 2024 12:31:08 +0900

# ● RTK Queryのインストール ``` npm install @reduxjs/toolkit react-redux ``` # ● 作成するファイル ``` ・src/providers/ReduxProvider.tsx ・src/stores/myApi.ts ・src/stores/store.ts ``` # ● ファイルの作成 1 **src/providers/ReduxProvider.tsx** ``` 'use client'; import React from 'react'; import { store } from '../stores/store'; import { Provider } from 'react-redux'; export const ReduxProvider = (props:...

dynamic assetPrefix

Wed, 01 May 2024 20:07:54 +0900

引用 : https://github.com/vercel/next.js/discussions/18301 ``` if you use a custom server, after calling next(), you can reset the asset path at any time if (assetPrefix) { nextApp.setAssetPrefix(assetPrefix); } ```

dig コマンドで DNS,WWW,MX（メール）サーバを調べる

Thu, 25 Apr 2024 18:25:30 +0900

# ● dig コマンドで DNS,WWW,MX（メール）サーバを調べる # ● 1.MXレコード（そのドメインのメールサーバ）を調べる /【dig mx】 ``` dig mx yahoo.co.jp ``` 実はオプションは最後でも同じです。（こちらの方がヒストリから違うレコードを見たいときに便利です） ``` dig yahoo.co.jp mx ``` # ● 2.TXTレコード（spfレコード）を調べる /【dig txt】 ``` dig txt yahoo.co.jp ``` ###なお SPF レコード記述例は ↓ このように記述します例 1. IPアドレス「123.123.123.123」を登録 ``` v=spf1 +ip4:123.123.123.123 ~all ``` 例 2. IPアドレス...

react で svg を import して扱う

Wed, 24 Apr 2024 15:35:22 +0900

# ● vite + react の場合 import された .svg は string として扱われます。 ``` import temperatureLogo from '/temperature.svg'; console.log('● temperatureLogo'); console.log(temperatureLogo); ``` temperatureLogo の中身 ``` /temperature.svg ``` # ● next.js の場合 import された .svg はオブジェクト（any型）として扱われます。 ``` import temperatureLogo from '/temperature.svg'; console.log('● temperatureLogo');...

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

Thu, 04 Jul 2024 16:00:20 +0900

# ● libavif のインストール macの brew コマンドでインストールします ``` brew install libavif ``` linuxでdnfを使う場合は ``` dnf install libavif ``` その後にこちらからCLIコマンドをダウンロードして好きな場所に配置しましょう https://github.com/kornelski/cavif-rs?tab=readme-ov-file # ● avif に変換するターミナルから以下のコマンドで実行します。 ``` avifenc 元ファイル名 -o 変換先ファイル名 ``` 例 ``` avifenc myfile.png -o myfile.avif ``` # ● Finder右クリックで .png や .jpg 画像を .avif に変換できる様にする ```...

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

Thu, 25 Apr 2024 09:22:12 +0900

# ● （MySQL 、 MariaDB）innodb_buffer_pool_size innodb_buffer_pool_size デフォルト値 : 128M ``` innodb_buffer_pool_size = 128M ``` ``` MySQLのみが稼働する専用のサーバーでInnoDBのみを利用している場合メインメモリの50～75%程度を割り当てると言われていたり、また、AWS RDSでMySQLを使用する場合のデフォルト値はメインメモリの3/4に設定されています。 ``` **設定例** いわゆるvpsでDB以外にも色々サーバが入っているメモリ4Gマシンの場合 ( 50%を割り当てます) ``` [mysqld] innodb_buffer_pool_size = 2G ``` 確認方法 ``` SELECT...

Next.js Web Vitals

Fri, 19 Apr 2024 15:12:49 +0900

https://nextjs-ja-translation-docs.vercel.app/docs/advanced-features/measuring-performance https://zenn.dev/uttk/scraps/f67550053d9f16

unix の kill コマンドを操る

Wed, 01 May 2024 09:06:46 +0900

# ● プロセスを終了させる（SIGTERM を送信する） ``` kill プロセス番号 ``` # ● プロセスを終了させる（SIGHUP を送信する） ``` kill -SIGHUP プロセス番号 ``` # ● プロセスを終了させる（SIGINT を送信する） ``` kill -SIGINT プロセス番号 ``` # ● プロセスを終了させる（SIGQUIT を送信する） ``` kill -SIGQUIT プロセス番号 ``` # ● プロセスを終了させる（SIGKILL を送信する） ``` kill -SIGKILL プロセス番号 ``` kill -SIGKILL <プロセスID>

名前

番号

動作（※）

意味...

「あるポート」を使用している「プロセス」と「プロセス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...

husky+lint-staged からの引っ越し先 → lefthook

Tue, 25 Jun 2024 11:39:25 +0900

# ● lefthookのインストール ### ・npm でインストールする場合 ``` npm i -D lefthook ``` ### ・Go でインストールする場合 ``` go install github.com/evilmartians/lefthook@latest ``` ### ・Ruby でインストールする場合 ``` gem install lefthook ``` # ● lefthookの使い方 ``` ・1. lefthook.yml をプロジェクトルートに作成する・2. コマンド lefthook install を実行して　lefthook.yml から .git/hooks/ ファイルを生成する ``` あとは hooks ファイルがそれぞれのタイミングで自動起動します。 # ● lefthook.yml の書き方...

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 エラーを吐かせる

Wed, 29 May 2024 14:41:05 +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で通知を送る

Tue, 16 Jul 2024 09:00:59 +0900

# ● GithubのDependabotで通知を送る GitHubのDependabotを活用して、npmやcomposerなどのパッケージの脆弱性を監視し、通知を受け取る設定は次のように行えます。なお、脆弱性データベースはこちらを参照しています。 https://github.com/advisories ## 1.リポジトリにDependabotを有効化する ``` リポジトリのSettings > ( Security ) Code security and analysis を選択し「Dependabot alerts」「Enable Dependabot alerts」と「Enable Dependabot security updates」の両方にチェックを入れます。 ``` オプションの説明はこちらです。

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 ```

layout.tsx