プログラムメモ

flexboxでテキストに押し出されて要素が小さくなるのを防ぐ

Wed, 16 Apr 2025 14:41:20 +0900

``` .item { flex-shrink: 0 } ```

Redux使うなら知っておいてほしい selector とは

Tue, 15 Apr 2025 09:26:00 +0900

Redux の selector は、Redux ストア内の特定の状態（state）を取得するための関数です。selector を使うことで、コンポーネントは必要な状態だけを効率的に取得でき、不要な再レンダリングを防ぐことができます。 # Selector の基本 selector は単純に言うと、Redux ストアの状態から必要なデータを抽出する純粋関数です： ```typescript // 基本的な selector const selectCounter = (state: RootState) => state.counter; ``` # Selector のメリット 1. **関心の分離**: UI コンポーネントがストアの構造を知る必要がなくなります 2. **再利用性**: 同じデータ抽出ロジックを複数のコンポーネントで再利用できます 3....

next.js 本番環境でデバッグする

Wed, 09 Apr 2025 17:24:53 +0900

**next.config.js** ``` const nextConfig = { ......... // 追加 productionBrowserSourceMaps: true, } ``` これで .ts ファイルが見えるようになります。あとは command + shift + P からブレイクポイント追加してデバッグします。

縦横比を固定する aspect-ratio

Mon, 31 Mar 2025 14:03:59 +0900

``` .mydiv { width: 900px; height: 600px } ``` ↓ aspect-ratio を使ってこのように書くことができます ``` .mydiv { aspect-ratio: 900 / 600; width: 900px; } ```

lets encrypt

Tue, 25 Mar 2025 16:51:38 +0900

https://letsencrypt.org/2025/01/22/Ending-Expiration-Emails

ヒラギノ角ゴシックとNoto Sans JP の見分け方

Tue, 25 Mar 2025 16:37:58 +0900

次のように「あ」や「め」のくっつき具合で見るのが良いでしょう。

先頭の「　の隙間をなくす

Mon, 17 Mar 2025 09:09:18 +0900

# ● 先頭の「　の隙間をなくす先頭の「」が入ると隙間が空いて嫌だ、というときはこちらんフォントを使います。約物半角専用のフォント　YakuHan JP https://yakuhanjp.qranoko.jp/

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

Fri, 07 Mar 2025 16:09:33 +0900

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

変更なしで initial commit

Fri, 07 Mar 2025 16:09:21 +0900

# ● git で変更なしで initial commit ``` git commit --allow-empty -m "Initial commit" ```

git で revertコミットをrevertする

Fri, 07 Mar 2025 15:55:20 +0900

# masterブランチから新しいブランチを作成 ``` git checkout master git checkout -b feature/fix-revert-my-feature ``` # revertコミットをrevertする (5698b6eをrevert) ``` git revert a1b2c3d4 ```

wgetでURLのリストから全てを一気にダウンロードしたい

Wed, 26 Feb 2025 16:52:21 +0900

`wget`を使って複数のURLから一度にファイルをダウンロードする方法をご紹介します。最も簡単な方法は、URLリストをテキストファイルに保存し、そのファイルを`wget`コマンドで参照する方法です。 1. まず、ダウンロードしたいURLを1行に1つずつ記載したテキストファイル（例：`urls.txt`）を作成します。 ``` https://example.com/file1.zip https://example.com/file2.pdf https://example.com/file3.jpg ``` 2. 次に、以下のコマンドを実行します： ```bash wget -i urls.txt ``` `-i`オプション（または`--input-file`）は、指定したファイルからURLを読み込みます。 ### 追加オプション...

Laravel Bladeの@pushと@stack

Thu, 20 Feb 2025 14:59:53 +0900

Bladeの@pushと@stackは、レイアウトテンプレートを使用する際に、子ビューから親レイアウトの特定の場所にコンテンツを追加するための機能です。基本的な使い方を説明します： ```php // 親レイアウト（layouts/app.blade.php）アプリケーション @yield('content') // メインコンテンツ用 // ここにスクリプトを集める @stack('scripts') // スクリプト用のスタック ``` ```php // 子ビュー（child.blade.php） @extends('layouts.app')...

npm パッケージを2つのバージョンインストールする

Thu, 13 Feb 2025 18:00:12 +0900

# ● npm パッケージを2つのバージョンインストールする npm パッケージをアップグレードするときに、プログラムのいろんなカ所で呼ばれているパッケージを一度に更新するのは難しい。 2つのバージョンを同時にインストールして順番に更新していくと言うやり方をお教えします。 ## 以下のような方法で実装できます： 1 . パッケージのエイリアスをつけてインストール: ``` npm install react@17.0.2 npm install react-17@npm:react@17.0.2 ``` 2 . コードでの使用例: ``` // 古いバージョンを使用するコンポーネント import React from 'react' // 新しいバージョンを使用するコンポーネント import React from 'react-17' ``` この方法の利点: -...

Web Workerの基本

Thu, 13 Feb 2025 10:02:35 +0900

# Web Workerのライフサイクル 1. **作成と初期化** ```typescript // メインスレッド const worker = new Worker('worker.js'); ``` 2. **実行状態** - WorkerはメインスレッドとはUIをブロックすることなく並行して動作します - 独自のグローバルスコープ(WorkerGlobalScope)を持ちます 3. **終了** ``` // メインスレッドからの終了 worker.terminate(); // Worker内からの終了 self.close(); ``` # 主要なイベント ## メインスレッド側のイベント 1 . **message** ``` worker.addEventListener('message', (event: MessageEvent) =>...

読みやすい日本語フォントのcssカーニング - font-feature-settingsと文字詰めの調整について

Mon, 17 Feb 2025 22:05:39 +0900

# Webfont-feature-settingsと日本語文字詰めの調整について ## 文字詰めとは？最近のWebデザインでは、`font-feature-settings: "palt"`を使って文字間を自動調整する手法が広く使われています。これにより日本語の文章がすっきりと見やすくなるのですが、時として文字が詰まりすぎてしまい、かえって読みづらくなることがあります。 ## 文字詰めの調整テクニック ### 1. letter-spacingとの組み合わせ文字が詰まりすぎる場合、もっともシンプルな解決策は`letter-spacing`との組み合わせです。 ```css .text { font-feature-settings: "palt"; letter-spacing: 0.05em; } ```...

RTK Query での効率的な初期データ管理とレンダリング最適化

Thu, 06 Feb 2025 08:49:19 +0900

# ● RTK Query での効率的な初期データ管理とレンダリング最適化 ### 課題 Next.jsのページコンポーネントでよくある実装パターンとして、以下のような流れがあります： 1. サーバーサイドで初期データを取得 2. クライアントサイドでRTK Queryを使用して最新データを取得 3. データの更新があった場合に画面を更新この実装で注意したいのが、不要なレンダリングです。単純な実装では以下のような問題が発生します： 1. 初回レンダリング 2. RTK Query のローディング開始時のレンダリング 3. データ取得完了時のレンダリング解決方法これらの課題を解決するカスタムフックを実装してみましょう ``` type PageData = { title: string; content: string; lastUpdated:...

git log をカラフルにする git plog

Tue, 04 Feb 2025 11:36:16 +0900

``` [alias] plog = !git log --abbrev=7 --format='%C(yellow)%h %C(green)%cd %C(reset)%s %C(red)%d %C(cyan)[%an]' --date=format:'%Y-%m-%d %H:%M' -25 ```

カリー化をマスターしよう

Thu, 30 Jan 2025 17:35:17 +0900

# ● カリー化とは？引数が2個必要な関数があった時、とりあえず、まず1つの引数を受け取って、その後で残りの1つの引数を受け取る。と言う手法です。 ``` // カリー化していない関数 const add = (a: number, b: number): number => a + b; add(2, 3); // 5 // カリー化した関数 const curriedAdd = (a: number) => (b: number): number => a + b; curriedAdd(2)(3); // 5 // 部分適用の例 const add2 = curriedAdd(2); // 2を固定した新しい関数 add2(3); // 5 add2(4); // 6 ```

Next.js production mode でログを取得したい

Wed, 29 Jan 2025 13:54:16 +0900

現時点でまだオプションとしては存在しておらず、以下のような方法をよく見かけます # ● middlewareで行う方法 https://codeparrot.ai/blogs/nextjs-middleware-simple-guide-to-control-requests # ● パッチを当てる方法 https://www.tomups.com/posts/log-nextjs-request-response-as-json/

Next.js app router の SSR の Data cache Revalidation について

Fri, 24 Jan 2025 12:18:41 +0900

# ● Next.js app router の SSR の Data cache Revalidation について https://nextjs.org/docs/app/building-your-application/caching#revalidating-1 ### 1. Time-based Revalidation ``` 一定時間が経過し、新しいリクエストが行われた後にデータを再検証する。これは、変更頻度が低く、鮮度がそれほど重要でないデータに有効である。 ``` ``` 時間間隔でデータを再検証するには、fetchのnext.revalidateオプションを使用して、リソースのキャッシュ寿命（秒）を設定します。 ``` ### 2. On-demand Revalidation ```...

flex で幅を比率で設定する

Sun, 19 Jan 2025 14:37:18 +0900

# ● flex で幅を比率 2 : 5 で設定する場合 ``` .container { display: flex } .boxA{ /* flexはflex-grow、flex-shrink、flex-basisの省略形です */ flex: 2 1 0%; } .boxb{ /* flexはflex-grow、flex-shrink、flex-basisの省略形です */ flex: 5 1 0%; } ``` ## **flex-grow** **flex-grow**は、フレックスアイテムが親要素内の利用可能なスペースをどれだけ占有するかを指定するプロパティです。デフォルト値は0で、値が大きいほど他のアイテムに対して多くのスペースを占有します。 ## **flex-shrink**...

package.jsonのバージョンを固定する ( save-exact=true )

Wed, 08 Jan 2025 16:37:30 +0900

# ● package.jsonのバージョンを固定する ( save-exact=true ) ### A . グローバルにnpmでインストールするパッケージのバージョンを固定する ``` npm config set save-exact true ``` 実行する。ホームフォルダーの下に `.npmrc` ファイルが生成されて、そこに以下のように書き込まれます ``` save-exact=true ``` ### B . ローカルにnpmでインストールするパッケージのバージョンを固定するプロジェクターフォルダのトップのプロジェクトのトップ、ディレクトリ直下に .npmrc を作成してそこに設定を書き込みます。 ``` vi .npmrc ``` ``` save-exact=true ```

cssで改行コードをそのまま表示する

Thu, 17 Apr 2025 17:07:22 +0900

# ● cssで改行コードをそのまま表示する（自動で折り返さない場合） ``` white-space: pre; ``` （自動で折り返す場合） ``` white-space: pre-wrap ```

div を比率を決めて 100% 表示とする

Mon, 30 Dec 2024 10:30:05 +0900

# ● ある div を 390px:220px の比率で width 100% とする ``` .aspect-box { width: 100%; aspect-ratio: 390 / 220; } ```

Claude MCP のはじめ方（Mac Claudeアプリ + brave検索）

Fri, 11 Apr 2025 17:32:00 +0900

# ● 1 . Claude アプリをダウンロード https://claude.ai/download # ● 2 . node.js をインストールしnpxのフルパスを調べておく ``` which npx ``` # ● 3 . Brave Search API を取得する ## 1. ここからBrave Search APIへユーザー登録する https://brave.com/search/api/ ## 2. ユーザー登録完了後ログインして「Subscription」から「Free」プランを追加する ## 3. 「API Keys」から Add API key する # ● 4 . Claudeの設定ファイルを編集する ```...

KUSANAGI で wasm を扱えるようにする

Sat, 14 Dec 2024 21:06:35 +0900

# ● 1. mimeタイプを追加 ``` vi /etc/opt/kusanagi/nginx/mime.types ``` 以下を追加 ``` application/wasm wasm; ``` # ● 2 . wasm.incを追加 ``` vi wasm.inc ``` ``` location ~* \.(wasm)$ { types { application/wasm wasm; } add_header Cache-Control "public, max-age=604800"; add_header Cross-Origin-Opener-Policy "same-origin"; add_header...

Perlのバージョンを確認する

Sat, 14 Dec 2024 15:12:13 +0900

``` perl -v ``` ``` This is perl 5, version 32, subversion 1 (v5.32.1) built for x86_64-linux-thread-multi (with 53 registered patches, see perl -V for more detail) Copyright 1987-2021, Larry Wall Perl may be copied only under the terms of either the Artistic License or the GNU General Public License, which may be found in the Perl 5 source kit. Complete documentation for Perl, including...

typescript で ?? と || の違いとは？

Wed, 11 Dec 2024 09:24:15 +0900

# ● typescript で ?? と || の違いとは？ ``` myData ?? undefined ``` と ``` myData || undefined ``` TypeScriptにおける ??（Nullish Coalescing）と ||（論理和）演算子の違いとは ### ?? (Nullish Coalescing): null または undefined の場合のみ右側の値を返します空文字列 ''、数値の 0、false などは有効な値として扱います ### || (論理和): falsy な値（false、0、''、null、undefined、NaN）の場合に右側の値を返しますより広い範囲の値を「無効」として扱います

WordpressのプラグインSmash Balloon Social Photo Feedのデータをデコードする

Thu, 05 Dec 2024 22:18:41 +0900

``` key = 'put your unique phrase here'; $this->salt = 'put your unique phrase here'; } public function decrypt($raw_value) { $decoded = base64_decode($raw_value); $method = 'aes-256-ctr'; $ivlen = openssl_cipher_iv_length($method); $iv =...

cssで下のレイヤーの要素にスクロールを伝播しない方法

Tue, 26 Nov 2024 20:33:02 +0900

# ● cssで下のレイヤーの要素にスクロールを伝播しない方法 ``` .content { overscroll-behavior: none; } ```

Go の New 命名規則

Fri, 22 Nov 2024 19:39:27 +0900

# ● Go の New 命名規則 ### ・関数名としての NewXxx New というプレフィックスを持つ関数名は、特定の型や構造体の新しいインスタンスを生成するためのコンストラクタ関数として使われます。 ``` func NewXxx(parameters) *Xxx { return &Xxx{...} // Xxx構造体のポインタを返す } ``` 例 ``` type person struct { height float32 weight float32 } func NewPerson(height, weight float32) *person{ return &person{height: height, weight: weight} } func main() { p := NewPerson(182.0, 75.5)...

cssで親要素（親 div）のサイズ幅でレスポンシブ

Sat, 25 Jan 2025 09:47:50 +0900

コンテナクエリー親DIVが768px未満の時に非表示にする。 ``` .parent{ container-type: inline-size; container-name: parent-container; /* 任意のコンテナ名をつけれます */ } .child { @container parent-container (max-width: 768px) { display: none; } } ```

Gemini / ChatGPT / Claude APIでの戻り値の例

Fri, 15 Nov 2024 08:36:13 +0900

各API にそれぞれ「こんにちは」のメッセージを投げた時の戻り値です # ● Gemini ``` { "candidates": [ { "content": { "parts": [ { "text": "こんにちは！何かお手伝いできることはありますか？ \n" } ], "role": "model" }, "finishReason": "STOP", "index": 0, "safetyRatings": [ { "category": "HARM_CATEGORY_SEXUALLY_EXPLICIT",...

アプリ生成AI

Sun, 10 Nov 2024 22:59:59 +0900

アプリ生成AI で、1番有名なのはv0ですが、対抗馬として以下のようなものもあります # ● v0 https://v0.dev/ # ● bolt.new https://bolt.new/ # ● Create https://www.create.xyz/ replit https://replit.com/

MySQL の CHECK 制約

Thu, 07 Nov 2024 12:37:24 +0900

``` MySQL の CHECK 制約とは簡単に言うと**「記述した条件式に合わない行の挿入・更新を防ぐ」**ものです。 INSERT, UPDATE, REPLACE, LOAD DATA, LOAD XMLの実行時に評価される評価の結果がFALSEの場合にエラーになる（行の挿入・更新が行われない） ``` 引用 : https://bit.ly/3YV6d50 CHECK制約を作成する ``` ALTER TABLE users ADD COLUMN default_width TINYINT UNSIGNED NOT NULL DEFAULT 16 COMMENT 'デフォルト幅%（1-99）' AFTER email, ADD CONSTRAINT chk_slide_default_width CHECK (default_width >= 1...

Next.js Version 15 でのキャッシュ挙動のまとめ

Wed, 30 Oct 2024 15:03:55 +0900

# ● Next.js AppRouter には 4種類のキャッシュがある https://nextjs.org/docs/app/building-your-application/caching | 種類 | デフォルト on / off | | ---------------------------- | -------------- | | 1 . Request Memoization | **on** | | 2 . Data Cache | off | | 3 . Full Route Cache | **on** | | 4 . Client-side Router Cache | off...

next.js の /api/ エンドポイントを /apinext/ に変えたい

Thu, 24 Oct 2024 17:46:55 +0900

# ● next.js の /api/ エンドポイントを /apinext/ に変えたい Next.jsのAPIルートのパスを変更するには、next.config.jsでリライトルールを設定します。 ``` // next.config.js /** @type {import('next').NextConfig} */ const nextConfig = { async rewrites() { return [ { source: '/apinext/:path*', destination: '/api/:path*', }, ]; }, } module.exports = nextConfig ```

Next.js で Stripe

Thu, 24 Oct 2024 17:35:26 +0900

stripe のインストール ``` npm i stripe @stripe/stripe-js @stripe/react-stripe-js npm i -D @types/stripe ``` **types/stripe.ts** ``` export interface PaymentIntentRequest { amount: number; contentId: string; } export interface PaymentIntentResponse { clientSecret: string; } ```

新しいメディアクエリの書き方

Thu, 24 Oct 2024 08:37:27 +0900

# ● 新しいメディアクエリの書き方 ``` @media (width < 640px) { .myclass { padding: 0 4px; } } @media (768px <= width < 1024px) { .myclass { padding: 0 8px; } } @media (1024px <= width < 1280px) { .myclass { padding: 0 16px; } } @media (1280px <= width) { .myclass { padding: 0 16px; } } ``` # ● Tailwind CSS 互換のブレイクポイント ``` /* Tailwind CSS...

vs codeとIntelliJ IDEAでファイル名と内容を一度にコピー

Fri, 18 Oct 2024 17:59:13 +0900

# ● vs code **~/Library/Application Support/Code/User/keybindings.json** ``` { "key": "cmd+alt+shift+a", "command": "workbench.action.terminal.sendSequence", "args": { "text": "(echo \"**$(basename \"${file}\")**\"; echo; echo '```'; cat \"${file}\"; echo '```') | pbcopy \n" } } ``` # ● IntelliJ IDEA ```...

jest の transformer でカスタムトランスフォーマーを使用する

Fri, 18 Oct 2024 08:33:50 +0900

**jest.config.js** ``` /** * For a detailed explanation regarding each configuration property, visit: * https://jestjs.io/docs/configuration */ /** @type {import('jest').Config} */ const config = { coverageProvider: "v8", // カスタムトランスフォーマー設定 transform: { "^.+\\.ts$": "/my-transformer.js", }, }; module.exports = config; ``` **my-transformer.js** ``` //...

fabric

Fri, 15 Nov 2024 09:05:00 +0900

# ● pythonのバージョン確認 ``` python --version Python 2.7.18 ``` # ● pyenvのインストール ``` brew install pyenv ``` ``` echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.bash_profile echo 'export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.bash_profile echo 'eval "$(pyenv init -)"' >> ~/.bash_profile source ~/.bash_profile ``` ``` pyenv --version ``` # ● pythonのインストール ``` pyenv install --list pyenv install...

必須のOGP設定

Tue, 15 Oct 2024 13:38:29 +0900

# ● 必須のOGP設定 ``` ```

mysql8 で起動エラー「mysqld_safe mysqld from pid file xxxxx ended」を解消する

Fri, 11 Oct 2024 15:07:41 +0900

# ● mysql8 で起動エラー「mysqld_safe mysqld from pid file xxxxx ended」を解消する ``` mysqld_safe mysqld from pid file /opt/homebrew/var/mysql/xxxxxxxx.local.pid ended ``` # ● ログファイルの特定 ``` cd /opt/homebrew/var/mysql ls -l *.err ``` # ● ログを表示します ``` tail -f xxxxxxx.local.err ``` # ● 別のターミナルでmysqlを実行します ``` mysql.server start ``` エラー箇所を発見 ``` [ERROR] [MY-014061] [InnoDB] Invalid MySQL server...

Next.js で警告「Skipping auto-scroll behavior due to `position: sticky` or `position: fixed` on element」

Thu, 03 Oct 2024 17:30:12 +0900

# ● Next.js で警告「Skipping auto-scroll behavior due to `position: sticky` or `position: fixed` on element」が出る場合の対応 ``` router.push(`/mypage`); ``` 　　↓ ``` router.push(`/mypage`, { scroll: false }); ```

reactでvideo.js

Thu, 03 Oct 2024 18:55:49 +0900

video.js のインストール ``` npm i video.js npm i -D @types/video.js ``` # ● VideoPlayer コンポーネントの作成 **src/VideoPlayer.tsx** ``` import React, { useEffect, useRef, useState } from 'react'; import videojs from 'video.js'; import Player from 'video.js/dist/types/player'; interface VideoPlayerProps { src: string; type?: string; } const VideoPlayer: React.FC = ({ src, type =...

「親DIVの横幅が300px以内の場合...」を実現するコンテナクエリ

Mon, 30 Sep 2024 21:12:20 +0900

# ● 1. 親divのコンテナタイプを設定する ``` .container { container-type: inline-size; } ``` ``` size：横方向と縦方向のサイズに応じてスタイルを適用する inline-size：横方向のサイズに応じてスタイルを適用する normal：通常動作 ``` # ● 2. レスポンシブにしたいdivに @container を記述する **親DIVの横幅が300px以内の場合** ``` @container (max-width: 300px) { .child { /* スタイル定義 */ } } ``` #### 対象となるコンテナ: @container クエリは、直近の祖先要素の中で container-type プロパティが設定されている要素を対象とします。...

css で長いテキストを ... で表示する。マウスオーバーで全て表示する。

Mon, 30 Sep 2024 08:16:33 +0900

# ● css で長いテキストを ... （3点リーダー）で表示する ## ● css で長いテキストを ... （三点リーダー）で表示する（1行の場合） ``` overflow: hidden; white-space: nowrap; text-overflow: ellipsis; ``` ## ● css で長いテキストを ... （三点リーダー）で表示する + マウスオーバーで全て表示させる ``` .column_name { display: block; font-size: 12px; color: #afafaf; max-width: 140px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }...

英語テキスト（連続したアルファベット）の折り返し（divをはみ出る）の対応

Fri, 20 Sep 2024 17:26:01 +0900

# ● 英語テキスト（連続したアルファベット）の折り返し（divをはみ出る）の対応 ``` 解決策1: word-break: break-all; 解決策2: overflow-wrap: break-word; 解決策3: word-break: break-word; 解決策4: hyphens: auto; ```

centos に redis をインストールする

Wed, 18 Sep 2024 10:23:38 +0900

# ● redisのインストール ``` sudo dnf info redis ``` ``` sudo dnf install -y redis ``` # ● redisの起動 ``` sudo systemctl start redis ``` # ● サーバーマシン再起動時に自動起動する設定 ``` sudo systemctl enable redis ``` # ● redisのステータスの確認 ``` systemctl status redis ```