i_20220622– Author –

「何をテストすべきか」「モックはどこまで使うべきか」で手が止まることがある。 ここではVitestを使い、APIクライアントのユニットテストを書く際の考え方と具体的な書き方を整理する。 Vitestを選ぶ理由 Vitestは Vite と同じトランスフォーマを共有す...

アプリ開発がチーム化してくると、「誰がいつどんな SQL を流したのか分からない」という問題が必ず起きる。手元では動くのに、同僚の環境では users テーブルにカラムが足りない。ステージングに反映したつもりが一部漏れている。こうした事故の多くは、...

GitHub Actionsを複数リポジトリで運用していると、必ずぶつかるのが「同じようなworkflowファイルがあちこちに散らばり、メンテナンスが追いつかない」という問題です。 本記事では、workflowの基本的な動作原理から、別リポジトリのworkflowを呼び出す仕...

業務システムでメールを扱う場面は意外と多い。通知メールの一覧取得、特定条件での検索、メールスレッドの表示……いずれもAPIを通じてメールを取得する処理が必要になる。そしてメール取得で必ずぶつかるのがページネーションの壁だ。 メールボックスには...

VS Codeには「JavaScript Debug Terminal」という機能が組み込まれています。通常のターミナルと見た目はほぼ同じですが、ここで起動したNode.jsプロセスには自動的にデバッガがアタッチされます。launch.jsonを書く必要がなく、ターミナルでコマンドを打...

この記事では、MacとWindowsの操作感を無料ツールでできるだけ統一する方法を紹介します。 そもそも何がストレスなのか？3つの「ズレ」を整理する MacとWindowsを併用するストレスは、大きく分けると3種類あります。 ショートカットキーの位置が違う Macで...

Stripe Checkout を Express.js に組み込めば、単発決済からサブスクリプションまで半日で実装できる。本記事では、パッケージ導入から Webhook によるステータス同期、本番デプロイまで解説する。 導入、実装手順 Express.js バックエンドに以下の決済機...

paizaスキルチェックはTypeScriptに対応していない。。 対応言語の一覧にはJava、Python、C++、JavaScript などが並ぶが、TypeScriptの名前はない。 しかし実務のWeb開発現場ではTypeScriptが事実上の標準になりつつある。React、Next.js、Nuxt、Angular──...

ウェブアプリケーションにメール機能を組み込むとき、自前のSMTPサーバーを立てる時代はとうに過ぎた。現在は外部のメール送信APIを使うのが標準的なアプローチだが、選択肢が多すぎてどれを選べばいいか迷う開発者は多い。 特に個人開発者やフリーランス...

Webサイトを公開しても、検索エンジンに正しくページを認識してもらえなければ、検索結果には表示されない。 特に動的にページが生成されるサイト（Next.jsの動的ルート）では、Google Search Consoleから手動で1ページずつインデックス登録をリクエストす...

最近はCopilotやChatGPTなどのAIツールを使えば、バックエンドAPIが数分で動くコードとして生成されます。でも、「動いてはいるけど中身がわからない」状態は危険です。バグが出たとき、機能追加したいとき、自分のコードなのに手が出せなくなります。 こ...

AWS IVS（Amazon Interactive Video Service）は、ライブ動画配信をアプリやウェブサイトに簡単に組み込むためのマネージドサービスです。 AWS IVS 概要 APIコール一つでゼロからライブ配信環境を立ち上げられる Low-Latency Streaming（低レイテンシーの...

v-data-table は Vuetify が誇る高機能テーブルコンポーネントだが、グルーピングとソートを組み合わせた途端に「あれ、思った通りに動かない」という壁にぶつかることが多い。この記事では、公式ドキュメントだけでは辿り着きにくい実践的なテクニックを...

個人開発で使っているNext.js + Express + React Viteの構成、デプロイまわりがかなり場当たり的になっていたので、GHCRを軸にCI/CDを整理し直すことにした。進捗あれば随時追記していく。 そもそもDockerイメージビルド（GHCR）を使用したデプロイとは Do...

Vue.jsで開発していると、「このコンポーネントのpropsやdata、今どうなっている？」と確認したい場面は日常的にあります。Vue DevToolsを使うのが一般的ですが、DevToolsが使えない環境や、コンソールから素早く値を確認したいケースもあるでしょう。 こ...

validate() メソッドを使用したシンプルな場合 // バリデーションを実行（コントローラー） public function store(Request $request) { // バリデーションを実行 $validated = $request->validate([ 'title' => 'required|max:255'...

Shopify始め方 https://www.shopify.com/jp にアクセス 「無料で始める」クリック 2025年12月現在Shopifyは、登録してから3日間は無料、その後も最初の3ヶ月は月額150円程度で使えます。 依頼者に確認すべき項目 Shopifyの保守・修正案件を受注する際、事...

mysqlのインストールについて オープンソース版と商用版の違い MySQL Community Edition（オープンソース版） 無料 GPLライセンス 基本的な機能は全て使える コミュニティサポートのみ MySQL Enterprise Edition（商用版） 有料（サブスクリプション） Ora...

LightSailでの問題内容 LightSailでWebアプリケーションをデプロイしているのですが、サイトに接続できない事象が発生します。 再起動すれば解消されるのですが、、 LightSailのWebコンソールからssh接続をしようとすると下記のメッセージです インスタン...

8 . 0 . 33 ↑ ↑ ↑ メジャー マイナー パッチ (Major) (Minor) (Patch) パッチバージョンアップ（8.0.40 → 8.4.6）ではどのリリースノートの確認すればいいか 8.0.40から8.4.6へのアップグレードについて、以下のリリースノートを確認します。 MySQL 8.4 Re...

Web開発プロジェクトでMySQLを扱う際、設定ファイルの構造を理解しておくとトラブルシューティングがスムーズになります。 メインの設定ファイル MySQLの設定はmy.cnf(Linux/Mac)またはmy.ini(Windows)で管理されます。これがメインの設定ファイルです。 ...

VPNの基本的な仕組み VPN（Virtual Private Network）は、インターネット上に仮想的な専用回線を構築し、安全な通信を実現する技術です。企業のリモートワークや個人のセキュリティ強化において欠かせないツールとなっています。 SSHトンネルとVPN SSHトン...

A5M2（A5:SQL Mk-2）とは A5M2（A5:SQL Mk-2）は、日本製の無料のデータベース開発ツールです。 主にMicrosoft SQL Server、Oracle、MySQL、PostgreSQLなどのデータベースを管理・操作するためのGUIツールとして使われています。 A5:SQL Mk-2 インストール...

そもそもSVNとは SubversionはApache財団が管理しているバージョン管理システムです。以前広く使われていたCVS（Concurrent Versions System）の後継として開発されました。 現在では、GitやGitHubの普及により、新規プロジェクトではGitを使うことが多く...

WebSocketとは WebSocketは、「サーバーとブラウザを常時つなぎっぱなしにして、お互いに好きなタイミングでデータを送り合える技術」といえます つまり「双方向通信を行うためのプロトコル」です 従来のHTTP通信は一方通行（「クライアントがリクエスト」...

そもそもLaravelではどのようにDB操作しているのかを確認 LaravelでのDB操作は、書いたコードがそのままDBに届くわけではなく、裏側で翻訳されてから届きます。 Eloquentクラスの機能を使う User::find(1) 「SQL」ではなく「PHPのクラス」でDB操作をコーデ...

導入手順 UserモデルにSoftDeletesを追加 Laravelのモデルについての確認 Laravelのモデルとは基本的には「モデル ＝ データベースのテーブル」と考えてOK クラス（User） は、「usersテーブル全体」を表します。 インスタンス（$user） は、「テーブルの...

画像の扱いについて、当初のS3利用からDB保存へ移行し、さらにその実装方式を最適化しました。これまでの3つの変遷をまとめます。 1. AWS S3 ストレージ 外部ストレージ（S3）に実体を保存し、DBにはパス（URL）のみを保存する一般的な構成です。 こちらで...

この記事では、Vue環境における主要なリッチテキストエディタライブラリとその特徴、実装のポイントをまとめます。 主要なライブラリの選択肢 現在、Vueコミュニティで特に支持を集めているライブラリがいくつかあります。 Tiptap (現在の本命) 現在最も人...

React Hook Formは、Reactアプリケーションで高パフォーマンスなフォームを構築するためのライブラリです。非制御コンポーネントベースの設計により、入力のたびに再レンダリングが走る従来のアプローチと比べて、描画コストを大幅に削減できます。 この記...

状況はお名前ドットコムで取得したドメインをさくらインターネットで使用 さくらインターネットのコントロールパネルで、お名前ドットコムで取得したドメインを追加 さくらのレンタルサーバ ホーム ドメイン/SSL > メール > Webサイト/データ > ドメイン/S...

TinyMCEとは リッチテキストエディタのJavaScriptライブラリです。 WordPressクラシックエディタで標準で搭載されている点からも、安心して使用できるライブラリかと思います TinyMCE エディタ構造 ブラウザ ツールバー B I U 画像 表 リンク 編集エリア (...

ファイルの所有者とパーミッション アクセス権 読み取りr書き込みw実行権x 権限ファイルの適用ディレクトリに適用読み内容を参照内容を参照書き書き込みファイルの新規作成、削除、名前変更実行ファイルを実行ディレクトリのファイルにアクセス、ディレク...

1）テーマのディレクトリ作成する wp-content/themes/ ディレクトリ内にテーマ名のディレクトリを作成します。 public\wp-content\themes\テーマ名 2）テーマに必要なファイルの作成（最小構成） 最小構成 テーマ名ディレクトリ直下にstyle.cssとindex.php...

Next.js 13以降では、@next/third-partiesの使用が推奨 タイミングの問題： インラインスクリプトは即時実行されますが、loadingクラスを使用して可視性を制御しています 2000msのタイムアウトが設定されており、その間にGTMが正しく初期化されない可能性...

ネットワークセキュリティ OSアプリケーションの定期的な更新セキュリティホール（プログラムの不具合のよるセキュリティ上の弱点）を防ぐためネットワークデバイスの物理的な保護鍵付きのラックに保護ユーザに対するセキュリティ教育FW、IDS/IPS、ウィル...

1）CSSファイルを用意 下記のように実際の表示に近いスタイルをあてれるよう記載 https://siennahare23.sakura.ne.jp/e-style/editor.css h2.wp-block-heading { font-size: 1.3rem; border-top: 1px solid var(--main-color); border-bottom: 1px solid v...

完成イメージ このチュートリアルでは、以下のような機能を持つギャラリーを作成します ソースファイル imageGallery.tsx // src/components/imageGallery.tsx 'use client' import { useState } from 'react' import { X, ChevronLeft, C...

ダミーテキスト https://webtools.dounokouno.com/dummytext この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミー...

Twitterタイムラインの埋め込み https://publish.twitter.com/# こちらのページに行き、タイムラインを表示したいツイッターアカウントのURLを入れて、エンターキーを押します。 次に、左側の「Embedded Timeline」をクリックします。 コードが表示される...

コンピュータの主要な5大機能 入力装置 キーボード・マウス 出力装置 ディスプレイ・プリンタ 記憶装置 メモリ・HDD 演算装置 計算実行 制御装置 全体を コントロール 制御装置他の4つの装置を協調して動作させる装置。全体をコントロールする。演算装置計...

CCNAとは 「CCNA（Cisco Certified Network Associate）」は、世界最大手のネットワーク関連機器メーカーであるシスコシステムズ社が実施する、ネットワークエンジニアの技能を認定する試験です。 同社の主力商品であるCiscoルータ、Catalystスイッチに関...

Googleアドセンスに申請 https://snow-monkey.2inc.org/forums/topic/googleadsense%e3%81%ae%e8%a8%ad%e5%ae%9a%e6%96%b9%e6%b3%95%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/

HTTP HTTP（Hyper Text Transfer Protocol）とはクライアント（Webブラウザなど）とWebサーバ間でデータを送受信するためのプロトコルです HTTPの仕組み クライアントが「HTTPリクエスト」を送信し、それに応じてWebサーバが「HTTPレスポンス」が返信され...

ICMP ICMP（Internet Control Message Protocol）はエラー通知や問い合わせ情報を転送するためのプロトコル。 ベストエフォート型のため通信状況やエラーの確認を行わないIPを補う役割を担い、IPとセットで用いられる。 インターネット層のプロトコルであ...

OSI参照モデル OSI参照モデルとは、コンピュータネットワークに求められる機能（通信機能）を7階層の構造に分割し定義したものです。 ＜OSIとTCP/IPの比較＞ TCP/IPOSI参照モデルよりも運用重視 物理層 ビット列（0と1の情報）と物理的な電気信号を変換 ht...

MACアドレスはコンピュータのNIC（network interface card：LANケーブルを挿す穴がくっついている、パソコンに合体させる部品のこと）やネットワーク機器の各ポートに対して製造時に割り当てられます。 フレームの送信元や宛先を識別するためにデータリン...

イーサネット（Ethernet）は物理層〜データリンク層を規定するネットワーク規格の一つ。 イーサネットにはDIXイーサネットとIEEE 802.3の2つの企画が存在する。 通信速度 Ethernetは最大10Mbpsの速度に対応しているインターフェイスです。ネットワーク図で...

オリジナルプラグイン作成 ソースファイル wp-content/ 　┣　plugins/ 　　　　┣　simple-image-search/ 　　　　　　　┣　simple-image-search.php 　　　　　　　┣　js/search.js 　　　　　　　┗　css/style.css simple-image-search.php 下記のように...

セキュリティ対策 ユーザーアカウントの権限レベル AAA AAAとはAutentication（認証）、Authorization（許可）、Accounting（アカウンティング）の頭文字を繋げたものです。これら3つのセキュリティ機能を提供する仕組みを表しています。 認証：ユーザの識...