# Fullstack Next > Next.js・Vercel・Prisma・microCMS … Web開発フルスタック情報を届ける --- ## 投稿 - [Reactコンポーネントライブラリを作ろう！npmパッケージ開発入門](https://bizlabo.site/dbrep/react%e3%82%b3%e3%83%b3%e3%83%9d%e3%83%bc%e3%83%8d%e3%83%b3%e3%83%88%e3%83%a9%e3%82%a4%e3%83%96%e3%83%a9%e3%83%aa%e3%82%92%e4%bd%9c%e3%82%8d%e3%81%86%ef%bc%81npm%e3%83%91%e3%83%83%e3%82%b1%e3%83%bc/): こんにちは！今回は、npmパッケージの作... - [Next.jsのAPIルートとは？フロントもバックも一体で作れる強力な仕組み](https://bizlabo.site/dbrep/next-api-root/): Next. jsは、Reactベースのフ... - [「useEffectの乱用」を避けよう](https://bizlabo.site/dbrep/%e3%80%8cuseeffect%e3%81%ae%e4%b9%b1%e7%94%a8%e3%80%8d%e3%82%92%e9%81%bf%e3%81%91%e3%82%88%e3%81%86/): 🔰 useEffectって何？ useE... - [【徹底解説】スムーススクロールを完全に制御する方法：React/Next.js編](https://bizlabo.site/dbrep/smooth-scroll-react/): 【React対応】ぬるっと動く！スムース... - [Next.js・React系でよく出るエラーリスト、ReactのError Boundaryの使い方](https://bizlabo.site/dbrep/next-js-react-error-list/): エラー文で単語の意味さえ知っていれば、お... - [Next.jsの.nextフォルダとビルドキャッシュについて](https://bizlabo.site/dbrep/next-js%e3%81%ae-next%e3%83%95%e3%82%a9%e3%83%ab%e3%83%80%e3%81%a8%e3%83%93%e3%83%ab%e3%83%89%e3%82%ad%e3%83%a3%e3%83%83%e3%82%b7%e3%83%a5%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/): . nextフォルダとは . nextフ... - [Next.js 静的サイト生成 (SSG) と output: 'export'](https://bizlabo.site/dbrep/next-js-ssg-output-export/): SSGの仕組み 従来のSSRやCSRとは... - [Webマーケティングの基礎知識：オーガニックサーチとペイドサーチの違い、CPCの仕組み、WBRAIDとは？](https://bizlabo.site/dbrep/web%e3%83%9e%e3%83%bc%e3%82%b1%e3%83%86%e3%82%a3%e3%83%b3%e3%82%b0%e3%81%ae%e5%9f%ba%e7%a4%8e%e7%9f%a5%e8%ad%98%ef%bc%9a%e3%82%aa%e3%83%bc%e3%82%ac%e3%83%8b%e3%83%83%e3%82%af%e3%82%b5%e3%83%bc/): こんにちは！今日はWebマーケティングの... - [PHPの比較演算子「==」と「===」の違いを徹底解説！](https://bizlabo.site/dbrep/php%e3%81%ae%e6%af%94%e8%bc%83%e6%bc%94%e7%ae%97%e5%ad%90%e3%80%8c%e3%80%8d%e3%81%a8%e3%80%8c%e3%80%8d%e3%81%ae%e9%81%95%e3%81%84%e3%82%92%e5%be%b9%e5%ba%95%e8%a7%a3%e8%aa%ac%ef%bc%81/): こんにちは！今回はPHPでよく混乱しがち... - [php.ini の error_log でエラーログを出力する先を指定する方法、パス指定の注意点](https://bizlabo.site/dbrep/php-ini-%e3%81%ae-error_log-%e3%81%a7%e3%82%a8%e3%83%a9%e3%83%bc%e3%83%ad%e3%82%b0%e3%82%92%e5%87%ba%e5%8a%9b%e3%81%99%e3%82%8b%e5%85%88%e3%82%92%e6%8c%87%e5%ae%9a%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95/): ログファイルに記録するための php. ... - [Meta広告運用の要！Facebook PixelとGTMの基本と実践](https://bizlabo.site/dbrep/meta%e5%ba%83%e5%91%8a%e9%81%8b%e7%94%a8%e3%81%ae%e8%a6%81%ef%bc%81facebook-pixel%e3%81%a8gtm%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%a8%e5%ae%9f%e8%b7%b5/): こんにちは、マーケティングテックブログを... - [Next.jsでのGoogleタグマネージャー実装とデータレイヤー（dataLayer.push）活用方法](https://bizlabo.site/dbrep/next-js%e3%81%a7%e3%81%aegoogle%e3%82%bf%e3%82%b0%e3%83%9e%e3%83%8d%e3%83%bc%e3%82%b8%e3%83%a3%e3%83%bc%e5%ae%9f%e8%a3%85%e6%96%b9%e6%b3%95%ef%bc%9a2%e3%81%a4%e3%81%ae%e3%82%a2%e3%83%97%e3%83%ad/): はじめに Next. jsでGoogle... - [Next.jsにおけるレスポンシブ実装とちらつき対策](https://bizlabo.site/dbrep/next-js%e3%81%ab%e3%81%8a%e3%81%91%e3%82%8b%e3%83%ac%e3%82%b9%e3%83%9d%e3%83%b3%e3%82%b7%e3%83%96%e5%ae%9f%e8%a3%85%e3%81%a8%e3%81%a1%e3%82%89%e3%81%a4%e3%81%8d%e5%af%be%e7%ad%96/): はじめに Next. jsでレスポンシブ... - [リゾット米](https://bizlabo.site/dbrep/%e3%83%aa%e3%82%be%e3%83%83%e3%83%88%e7%b1%b3/): 鍋にバター100 玉名者ぎ外側1枚火にか... - [【WordPress】「Smush」や「EWWW Image Optimizer」などのプラグインで画像を圧縮](https://bizlabo.site/dbrep/%e3%80%90wordpress%e3%80%91%e3%80%8csmush%e3%80%8d%e3%82%84%e3%80%8cewww-image-optimizer%e3%80%8d%e3%81%aa%e3%81%a9%e3%81%ae%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e3%81%a7%e7%94%bb%e5%83%8f/): メリット WordPressで画像を圧縮... - [【CSS】疑似要素で吹き出し](https://bizlabo.site/dbrep/%e3%80%90css%e3%80%91%e7%96%91%e4%bc%bc%e8%a6%81%e7%b4%a0%e3%81%a7%e5%90%b9%e3%81%8d%e5%87%ba%e3%81%97/): サンプルコード こんにちは！これは吹き出... - [【CSS】floatで画像を下に配置してテキストを回り込ませる](https://bizlabo.site/dbrep/%e3%80%90css%e3%80%91float%e3%81%a7%e7%94%bb%e5%83%8f%e3%82%92%e4%b8%8b%e3%81%ab%e9%85%8d%e7%bd%ae%e3%81%97%e3%81%a6%e3%83%86%e3%82%ad%e3%82%b9%e3%83%88%e3%82%92%e5%9b%9e%e3%82%8a%e8%be%bc%e3%81%be/): floatで画像を下に配置することは難し... - [【Illustrator初心者向け】デザインカンプからコーディング、効率的な書き出し方法](https://bizlabo.site/dbrep/illustrator%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%82%ab%e3%83%b3%e3%83%97%e3%81%8b%e3%82%89%e3%82%b3%e3%83%bc%e3%83%87%e3%82%a3%e3%83%b3%e3%82%b0%e5%8a%b9%e7%8e%87%e7%9a%84%e3%81%aa%e6%9b%b8%e3%81%8d/): そもそもIllustratorはWebサ... - [ローストビーフ](https://bizlabo.site/dbrep/%e3%83%ad%e3%83%bc%e3%82%b9%e3%83%88%e3%83%93%e3%83%bc%e3%83%95/): 肉　1キロ 塩　12g B. P. 　2... - [WindowsかMacか](https://bizlabo.site/dbrep/windows%e3%81%8bmac%e3%81%8b/): ひらがな / 半角英数字の切り替え - [ワードプレスのメディアに保存した画像（upload_max_filesize, post_max_size, memory_limit）](https://bizlabo.site/dbrep/%e3%83%af%e3%83%bc%e3%83%89%e3%83%97%e3%83%ac%e3%82%b9%e3%81%ae%e3%83%a1%e3%83%87%e3%82%a3%e3%82%a2%e3%81%ab%e4%bf%9d%e5%ad%98%e3%81%97%e3%81%9f%e7%94%bb%e5%83%8f%e3%81%a8%e3%83%87%e3%83%bc%e3%82%bf/): 画像はどこに保存される？ WordPre... - [【WordPressプラグイン】Reactをショートコードで挿入](https://bizlabo.site/dbrep/wp-react-shortcord/): プラグイン単体のディレクトリだけでRea... - [TypeScriptでWordPressのブロックを開発する「参考記事リンクブロック」パート2](https://bizlabo.site/dbrep/typescript%e3%81%a7wordpress%e3%81%ae%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%82%92%e9%96%8b%e7%99%ba%e3%81%99%e3%82%8b%e3%80%8c%e5%8f%82%e8%80%83%e8%a8%98%e4%ba%8b%e3%83%aa%e3%83%b3%e3%82%af%e3%83%96/): 参考サイト ソースファイル index.... - [@wordpress/scriptsでオリジナルブロック作成](https://bizlabo.site/dbrep/4062-2/): @wordpress/scriptsとは... - [Wordpressプラグインでオリジナルブロックを追加（静的ブロック）](https://bizlabo.site/dbrep/wordpress%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e3%81%a7%e3%82%aa%e3%83%aa%e3%82%b8%e3%83%8a%e3%83%ab%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%82%92%e8%bf%bd%e5%8a%a0/): ゴール、制作物 下記の「筆者ブロック」 ... - [WordPressテーマにReactを統合](https://bizlabo.site/dbrep/wordpress%e3%83%86%e3%83%bc%e3%83%9e%e3%81%abreact%e3%82%92%e7%b5%b1%e5%90%88/): 参考サイト Reactを使用してWord... - [Salsiccia](https://bizlabo.site/dbrep/salsiccia/): ボイラー5分 - [初心者のための「Optimize Next」導入ガイド](https://bizlabo.site/dbrep/%e5%88%9d%e5%bf%83%e8%80%85%e3%81%ae%e3%81%9f%e3%82%81%e3%81%ae%e3%80%8coptimize-next%e3%80%8d%e5%b0%8e%e5%85%a5%e3%82%ac%e3%82%a4%e3%83%89/): 無料のABテストツール「Optimize... - [Next.js NEXT_PUBLIC_環境変数の完全ガイド：安全な使い方とセキュリティリスクの回避](https://bizlabo.site/dbrep/next-js%e3%81%ae%e7%92%b0%e5%a2%83%e5%a4%89%e6%95%b0%ef%bc%9anext_public_%e3%81%ae%e4%bd%bf%e3%81%84%e6%96%b9%e3%81%a8%e9%87%8d%e8%a6%81%e6%80%a7/): Next. jsアプリケーション開発にお... - [next.config.js](https://bizlabo.site/dbrep/%e3%80%90next-js%e3%80%91%e6%a4%9c%e8%a8%bc%e3%83%86%e3%82%b9%e3%83%88%e3%81%ae%e3%81%9f%e3%82%81%e7%8f%be%e5%9c%a8%e6%99%82%e5%88%bb%e3%82%92%e5%a4%89%e6%9b%b4%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95/): next. config. jsとは N... - [【Next.js】Imageコンポーネントnext/image（画像最適化機能）とは](https://bizlabo.site/dbrep/%e3%80%90next-js%e3%80%91next-image%ef%bc%88%e7%94%bb%e5%83%8f%e6%9c%80%e9%81%a9%e5%8c%96%e6%a9%9f%e8%83%bd%ef%bc%89%e3%81%a8%e3%81%af/): 参考サイト Next. js 13のIm... - [【Next.js】App Routerでメタタグを設定する方法](https://bizlabo.site/dbrep/%e3%80%90next-js%e3%80%91/): Next. jsのApp Routerで... - [【Next.jsビルド】画像最適化（next/image）の落とし穴](https://bizlabo.site/dbrep/next-js%e3%83%93%e3%83%ab%e3%83%89/): Next. jsのバージョン14. 0.... - [【mermaidコード】生成AIを使用して、フローチャート作成](https://bizlabo.site/dbrep/%e7%94%9f%e6%88%90ai%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%97%e3%81%a6%e3%80%81%e3%83%95%e3%83%ad%e3%83%bc%e3%83%81%e3%83%a3%e3%83%bc%e3%83%88%e4%bd%9c%e6%88%90/): フローチャートは複雑なプロセスを理解しや... - [Next.js バージョン15 App Router 始め方 フォルダ構成ベストプラクティス](https://bizlabo.site/dbrep/next-js-app-router%e5%ae%8c%e5%85%a8%e3%82%ac%e3%82%a4%e3%83%89/): ディレクトリベースのルーティング app... - [【CSS】カラム子要素　下揃え](https://bizlabo.site/dbrep/3636-2/): カラム子要素　下揃え 各カラムでテキスト... - [【CSS】backgroundプロパティ](https://bizlabo.site/dbrep/%e3%80%90css%e3%80%91background%e3%83%97%e3%83%ad%e3%83%91%e3%83%86%e3%82%a3/): background ＜一括指定の順番＞... - [Next.js の Blog Starter Kit を使ったブログサイト作成手順](https://bizlabo.site/dbrep/next-js-%e3%81%ae-blog-starter-kit-%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%9f%e3%83%96%e3%83%ad%e3%82%b0%e3%82%b5%e3%82%a4%e3%83%88%e4%bd%9c%e6%88%90%e6%89%8b%e9%a0%86/): Blog Starter Kitとは？ ... - [WinSCPのインストール方法](https://bizlabo.site/dbrep/winscp%e3%81%ae%e5%9f%ba%e6%9c%ac%e7%9a%84%e3%81%aa%e4%bd%bf%e7%94%a8%e6%96%b9%e6%b3%95/): インストール 下記サイトよりhttps:... - [EC2インスタンス起動、停止方法](https://bizlabo.site/dbrep/ec2%e3%82%a4%e3%83%b3%e3%82%b9%e3%82%bf%e3%83%b3%e3%82%b9%e8%b5%b7%e5%8b%95%e6%96%b9%e6%b3%95/): 起動方法 コンソール画面で「EC2」と検... - [構造化データ入門：SEOを強化する簡単な方法](https://bizlabo.site/dbrep/%e6%a7%8b%e9%80%a0%e5%8c%96%e3%83%87%e3%83%bc%e3%82%bf%e5%85%a5%e9%96%80%ef%bc%9aseo%e3%82%92%e5%bc%b7%e5%8c%96%e3%81%99%e3%82%8b%e7%b0%a1%e5%8d%98%e3%81%aa%e6%96%b9%e6%b3%95/): 今日は、ウェブサイトのSEO（検索エンジ... - [useRef](https://bizlabo.site/dbrep/useref/): ReactのuseRefフックは、主に2... - [DockerでApacheのSSL接続](https://bizlabo.site/dbrep/docker%e3%81%a7apache%e3%81%aessl%e6%8e%a5%e7%b6%9a/): こんにちは！今回は、Docker環境での... - [ティラミス](https://bizlabo.site/dbrep/%e3%83%86%e3%82%a3%e3%83%a9%e3%83%9f%e3%82%b9/): クリーム　400　114　① エスプレッ... - [定型文は辞書登録、またはテンプレート登録する](https://bizlabo.site/dbrep/%e5%ae%9a%e5%9e%8b%e6%96%87%e3%81%af%e8%be%9e%e6%9b%b8%e7%99%bb%e9%8c%b2%e3%80%81%e3%81%be%e3%81%9f%e3%81%af%e3%83%86%e3%83%b3%e3%83%97%e3%83%ac%e3%83%bc%e3%83%88%e7%99%bb%e9%8c%b2%e3%81%99%e3%82%8b/): 「お世話になっております。」や「よろしく... - [スプレッドシートからメール送信](https://bizlabo.site/dbrep/%e3%82%b9%e3%83%97%e3%83%ac%e3%83%83%e3%83%89%e3%82%b7%e3%83%bc%e3%83%88%e3%81%8b%e3%82%89%e3%83%a1%e3%83%bc%e3%83%ab%e9%80%81%e4%bf%a1/): 注意点： - [PowerShell](https://bizlabo.site/dbrep/powershell/): PowerShellはコマンドプロンプト... - [JSON Server初心者向けチュートリアル：ハンズオン形式で学ぶ](https://bizlabo.site/dbrep/json-server%e5%88%9d%e5%bf%83%e8%80%85%e5%90%91%e3%81%91%e3%83%81%e3%83%a5%e3%83%bc%e3%83%88%e3%83%aa%e3%82%a2%e3%83%ab%ef%bc%9a%e3%83%8f%e3%83%b3%e3%82%ba%e3%82%aa%e3%83%b3%e5%bd%a2%e5%bc%8f%e3%81%a7/): こんにちは！今回は、Web開発の学習や小... - [POSTリクエスト](https://bizlabo.site/dbrep/3043-2/): 〇リクエスト受信: Google CHR... - [【初心者向け】PHPエラー確認方法](https://bizlabo.site/dbrep/%e3%80%90%e5%88%9d%e5%bf%83%e8%80%85%e5%90%91%e3%81%91%e3%80%91php%e3%82%a8%e3%83%a9%e3%83%bc%e7%a2%ba%e8%aa%8d%e6%96%b9%e6%b3%95/): エラーの発生の確認方法 方法（1）ブラウ... - [バスクチーズケーキ](https://bizlabo.site/dbrep/%e3%83%90%e3%82%b9%e3%82%af%e3%83%81%e3%83%bc%e3%82%ba%e3%82%b1%e3%83%bc%e3%82%ad/): ポマード状に ... A 3回湯でこぼし... - [ガトーショコラ](https://bizlabo.site/dbrep/%e3%82%ac%e3%83%88%e3%83%bc%e3%82%b7%e3%83%a7%e3%82%b3%e3%83%a9/): 湯煎で溶かし混ぜる チョコ 100 バタ... - [フィナンシェ](https://bizlabo.site/dbrep/%e3%83%95%e3%82%a3%e3%83%8a%e3%83%b3%e3%82%b7%e3%82%a7/): 粉糖でなくてもグラニュー糖でもいけないこ... - [PHPでメールフォーム作成](https://bizlabo.site/dbrep/php%e3%81%a7%e3%83%a1%e3%83%bc%e3%83%ab%e3%83%95%e3%82%a9%e3%83%bc%e3%83%a0%e4%bd%9c%e6%88%90/): デモページ https://bizlab... - [【PHP】初心者向け：PHPのGETメソッドとPOSTメソッドの違いを図解で解説](https://bizlabo.site/dbrep/%e3%80%90php%e3%80%91/): GETとPOSTの基本的な違い どちらを... - [【GitHub】プルリク（プルリクエスト）流れ](https://bizlabo.site/dbrep/%e3%80%90github%e3%80%91%e3%83%97%e3%83%ab%e3%83%aa%e3%82%af%ef%bc%88%e3%83%97%e3%83%ab%e3%83%aa%e3%82%af%e3%82%a8%e3%82%b9%e3%83%88%ef%bc%89%e6%b5%81%e3%82%8c/): プルリクエストとは マージを提案し、レビ... - [GitHubのPersonal Access Tokens (Classic)](https://bizlabo.site/dbrep/github%e3%81%aepersonal-access-tokens-classic/): どんなときにPersonal Acces... - [Gitコマンド](https://bizlabo.site/dbrep/git%e3%82%b3%e3%83%9e%e3%83%b3%e3%83%89/): Gitユーザーを確認するコマンド 現在の... - [Webマーケティング初心者のための主要用語](https://bizlabo.site/dbrep/web%e3%83%9e%e3%83%bc%e3%82%b1%e3%83%86%e3%82%a3%e3%83%b3%e3%82%b0%e5%88%9d%e5%bf%83%e8%80%85%e3%81%ae%e3%81%9f%e3%82%81%e3%81%ae%e4%b8%bb%e8%a6%81%e7%94%a8%e8%aa%9e/): SEO (Search Engine O... - [.sshディレクトリについて、【実践】さくらインターネットに公開鍵認証方式でssh接続](https://bizlabo.site/dbrep/ssh%e3%83%87%e3%82%a3%e3%83%ac%e3%82%af%e3%83%88%e3%83%aa/): . sshディレクトリとは . sshデ... - [「ローカルとさくらインターネット」をssh接続、「さくらインターネットとGitHub」をssh接続の手順](https://bizlabo.site/dbrep/%e3%80%90%e3%81%95%e3%81%8f%e3%82%89%e3%82%a4%e3%83%b3%e3%82%bf%e3%83%bc%e3%83%8d%e3%83%83%e3%83%88%e3%80%91ssh%e6%8e%a5%e7%b6%9a%e6%89%8b%e9%a0%86/): 「ローカルとさくらインターネット」をss... - [手動でのsitemap.xmlの作成手順](https://bizlabo.site/dbrep/%e6%89%8b%e5%8b%95%e3%81%a7%e3%81%aesitemap-xml%e3%81%ae%e4%bd%9c%e6%88%90%e6%89%8b%e9%a0%86/): そもそも「sitemap. xml」の意... - [WordPressプラグイン「WPGraphQL」使用してヘッドレスCMSとして活用](https://bizlabo.site/dbrep/graphql%e3%81%a8%e3%81%af/): GraphQLとは GraphQLはAP... - [Next.js"AppRouterで始めるNext.js：最新のルーティング機能を徹底解説"Next.js](https://bizlabo.site/dbrep/next-js/): プロジェクトの作成 コマンドのオプション... - [【PHP】Docker環境でPHPのリダイレクトを学ぶ：初心者向けハンズオン・ガイド](https://bizlabo.site/dbrep/header/): PHPのリダイレクトの重要性 PHPでの... - [【PHP】Dockerでデバッグ](https://bizlabo.site/dbrep/%e3%80%90php%e3%80%91%e3%80%8c_server%e3%80%8d/): 前提条件 「$_SERVER」はスーパー... - [WSLとは](https://bizlabo.site/dbrep/wsl%e3%81%a8%e3%81%af/): WSL（Windows Subsyste... - [npmコマンド一覧](https://bizlabo.site/dbrep/npm%e3%82%b3%e3%83%9e%e3%83%b3%e3%83%89%e4%b8%80%e8%a6%a7/): npm install -g パッケージ... - [【VSCode連携】「GitHub Copilot」使い方](https://bizlabo.site/dbrep/%e3%80%90vscode%e3%80%91%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e3%80%8cgithub-copilot-chat%e3%80%8d%e4%bd%bf%e3%81%84%e6%96%b9/): 「GitHub Copilot」の特徴 ... - [【VSCode】プラグイン「Git Graph」](https://bizlabo.site/dbrep/%e3%80%90vscode%e3%80%91%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e3%80%8cgit-graph%e3%80%8d/): ブランチや履歴がビジュアルでかくにんでき... - [Node.jsの開発環境をセットアップしよう！「nvm-windows」インストール手順](https://bizlabo.site/dbrep/%e3%80%8cnvm-windows%e3%80%8d%e3%82%a4%e3%83%b3%e3%82%b9%e3%83%88%e3%83%bc%e3%83%ab%e6%89%8b%e9%a0%86/): Node. jsとは ブラウザ外でJav... - [「Docker Desktop」インストール手順、有料化について](https://bizlabo.site/dbrep/docker/): 「Docker Desktop」インスト... - [【JavaScript】map()関数](https://bizlabo.site/dbrep/%e3%80%90javascript%e3%80%91map%e9%96%a2%e6%95%b0/): map関数のできること 配列の各要素に対... - [「Jekyll」でGithub PagesのURL一覧を生成](https://bizlabo.site/dbrep/%e3%80%8cjekyll%e3%80%8d%e3%81%a7github-pages%e3%81%aeurl%e4%b8%80%e8%a6%a7%e3%82%92%e7%94%9f%e6%88%90/): 参考サイト Github Pagesで、... - [Rubyインストール手順（Windows）](https://bizlabo.site/dbrep/%e3%83%ab%e3%83%93%e3%83%bc%e3%82%a4%e3%83%b3%e3%82%b9%e3%83%88%e3%83%bc%e3%83%ab%e6%89%8b%e9%a0%86%ef%bc%88windows%ef%bc%89/): Rubyインストーラーをダウンロード R... - [【ReactでFirebaseエラー】FirebaseError: Firebase: Error (auth/unauthorized-domain).](https://bizlabo.site/dbrep/%e3%80%90react%e3%81%a7firebase%e3%82%a8%e3%83%a9%e3%83%bc%e3%80%91firebaseerror-firebase-error-auth-unauthorized-domain/): エラー内容 1）Reactプロジェクトで... - [【Firebase】Firestoreコレクション作成手順](https://bizlabo.site/dbrep/%e3%80%90firebase%e3%80%91firestore/): コレクション作成手順 〇＋コレクションを... - [【Javascript】非同期処理を書いてみよう！Promiseオブジェクト、async/await、「then()メソッド」、「catch()メソッド」とは](https://bizlabo.site/dbrep/%e3%80%90javascript%e3%80%91promise%e3%82%aa%e3%83%96%e3%82%b8%e3%82%a7%e3%82%af%e3%83%88%e3%80%81%e3%80%8cthen%e3%83%a1%e3%82%bd%e3%83%83%e3%83%89%e3%80%8d%e3%80%81%e3%80%8ccatch%e3%83%a1/): 非同期処理とは 非同期処理とはすぐに終わ... - [【Googleタグマネージャー】「Page Path」で設定したが正しく発火しない](https://bizlabo.site/dbrep/google%e3%82%bf%e3%82%b0%e3%83%9e%e3%83%8d%e3%83%bc%e3%82%b8%e3%83%a3%e3%83%bcpage-path%e3%81%a7%e8%a8%ad%e5%ae%9a%e3%81%97%e3%81%9f%e3%81%8c%e6%ad%a3%e3%81%97%e3%81%8f%e7%99%ba%e7%81%ab%e3%81%97/): ▽タグを作成したが発火しない トリガーの... - [【WordPressエラー】「Warning: Undefined variable $post in …」「Warning: Attempt to read property "ID" on null in …」](https://bizlabo.site/dbrep/%e3%80%90wordpress%e3%82%a8%e3%83%a9%e3%83%bc%e3%80%91%e3%80%8cattempt-to-read-property-id-on-null%e3%80%8d/): PHP7. 3からPHP8. 0に変更が... - [「Advanced Custom Fields」の内容を自動でタイトルに反映させたい](https://bizlabo.site/dbrep/%e3%80%8cadvanced-custom-fields%e3%80%8d%e3%81%ae%e5%86%85%e5%ae%b9%e3%82%92%e8%87%aa%e5%8b%95%e3%81%a7%e3%82%bf%e3%82%a4%e3%83%88%e3%83%ab%e3%81%ab%e5%8f%8d%e6%98%a0%e3%81%95%e3%81%9b%e3%81%9f/): カスタムフィールドの値を自動でタイトルに... - [【Javascript】コールバック関数とは](https://bizlabo.site/dbrep/%e3%80%90javascript%e3%80%91%e3%82%b3%e3%83%bc%e3%83%ab%e3%83%90%e3%83%83%e3%82%af%e9%96%a2%e6%95%b0%e3%81%a8%e3%81%af/): コールバック関数とは コールバック関数と... - [【React】useContext](https://bizlabo.site/dbrep/%e3%80%90react%e3%80%91usecontext/): propsを利用せずに異なるコンポーネン... - [【React】useCallbackの使い方](https://bizlabo.site/dbrep/%e3%80%90react%e3%80%91usecallback%e3%81%ae%e4%bd%bf%e3%81%84%e6%96%b9/): 使い方 useCallback は関数の... - [useHistoryの使い方](https://bizlabo.site/dbrep/usehistory%e3%81%ae%e4%bd%bf%e3%81%84%e6%96%b9/): useHistoryの使い方 ※push... - [【illustrator】文字部分にエンベロープを作成](https://bizlabo.site/dbrep/%e3%80%90illustrator%e3%80%91%e6%96%87%e5%ad%97%e9%83%a8%e5%88%86%e3%81%ab%e3%82%a8%e3%83%b3%e3%83%99%e3%83%ad%e3%83%bc%e3%83%97%e3%82%92%e4%bd%9c%e6%88%90/): 1）対象の「テイストオブジェクト」と「エ... - [chakra](https://bizlabo.site/dbrep/chakra/): インストールと導入 Installati... - [【JavaScript】let、var、constの違い](https://bizlabo.site/dbrep/%e3%80%90javascript%e3%80%91let%e3%80%81var%e3%80%81const%e3%81%ae%e9%81%95%e3%81%84/): let const var 再宣言 不可... - [【生成AI】【illustrator】テキストからベクター生成の使い方（バージョン28.0～新機能）](https://bizlabo.site/dbrep/%e3%80%90%e7%94%9f%e6%88%90ai%e3%80%91%e3%80%90illustrator%e3%80%91%e3%83%86%e3%82%ad%e3%82%b9%e3%83%88%e3%81%8b%e3%82%89%e3%83%99%e3%82%af%e3%82%bf%e3%83%bc%e7%94%9f%e6%88%90%e3%81%ae%e4%bd%bf/): テキストからベクター生成の使い方 ▽長方... - [「Github Page」にReactを公開する方法](https://bizlabo.site/dbrep/%e3%80%8cgithub-page%e3%80%8d%e3%81%abreact%e3%82%92%e5%85%ac%e9%96%8b%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95/): 1）Reactプロジェクトを作成 2）B... - [【GitHub】VSCodeからプッシュする方法](https://bizlabo.site/dbrep/%e3%80%90github%e3%80%91vscode%e3%81%8b%e3%82%89%e3%83%97%e3%83%83%e3%82%b7%e3%83%a5%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95/): そもそもプッシュとは ローカルリポジトリ... - [GitHubに無料でWebサイト公開する方法](https://bizlabo.site/dbrep/github%e3%81%ab%e7%84%a1%e6%96%99%e3%81%a7web%e3%82%b5%e3%82%a4%e3%83%88%e5%85%ac%e9%96%8b%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95/): 1）アカウント作成、ログイン 下記URL... - [gulpでSassをコンパイルする方法](https://bizlabo.site/dbrep/gulp%e3%81%a7sass%e3%82%92%e3%82%b3%e3%83%b3%e3%83%91%e3%82%a4%e3%83%ab%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95/): 参考サイト - [【SWELL】サイドバーの幅を変更する方法](https://bizlabo.site/dbrep/%e3%80%90swell%e3%80%91%e3%82%b5%e3%82%a4%e3%83%89%e3%83%90%e3%83%bc%e3%81%ae%e5%b9%85%e3%82%92%e5%a4%89%e6%9b%b4%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95/): 下記のようにサイドバーを狭くしたもしくは... - [【illustrator】初心者向けのポイント ショートカット](https://bizlabo.site/dbrep/illustrator/): ショートカット 基本操作 画面の中央にペ... - [【JavaScript】スプレッド構文 「3つのドット “...”」](https://bizlabo.site/dbrep/%e3%80%90javascript%e3%80%91%e3%82%b9%e3%83%97%e3%83%ac%e3%83%83%e3%83%89%e6%a7%8b%e6%96%87-%e3%80%8c3%e3%81%a4%e3%81%ae%e3%83%89%e3%83%83%e3%83%88-%e3%80%8d/): 配列の展開 使用例）1ずつ増えていく整数... - [Custom Post Type UI](https://bizlabo.site/dbrep/custom-post-type-ui/): 編集画面で作成したタクソノミーのチェック... - [React Router導入&事前準備 useLocation](https://bizlabo.site/dbrep/react-router%e5%b0%8e%e5%85%a5%e4%ba%8b%e5%89%8d%e6%ba%96%e5%82%99/): react-router-dom をイン... - [【JavaScript】function(e)の「e」とは？](https://bizlabo.site/dbrep/%e3%80%90javascript%e3%80%91functione%e3%81%ae%e3%80%8ce%e3%80%8d%e3%81%a8%e3%81%af%ef%bc%9f/): function(e)の「e」とは イベ... - [【JavaScript】分割代入](https://bizlabo.site/dbrep/%e3%80%90javascript%e3%80%91%e5%88%86%e5%89%b2%e4%bb%a3%e5%85%a5/): 分割代入とは 1）オブジェクト、配列を宣... - [【初心者】ReactのPropsとは](https://bizlabo.site/dbrep/%e3%80%90%e5%88%9d%e5%bf%83%e8%80%85%e3%80%91react%e3%81%aeprops%e3%81%a8%e3%81%af/): Propsとは 親コンポーネントから子コ... - [【JavaScript】アロー関数の定義の仕方](https://bizlabo.site/dbrep/%e3%80%90javascript%e3%80%91%e3%82%a2%e3%83%ad%e3%83%bc%e9%96%a2%e6%95%b0%e3%81%ae%e5%ae%9a%e7%be%a9%e3%81%ae%e4%bb%95%e6%96%b9/): アロー関数とは 従来の関数定義を簡略化し... - [CSSでよくある記述まとめ](https://bizlabo.site/dbrep/css%e3%81%a7%e3%82%88%e3%81%8f%e3%81%82%e3%82%8b%e8%a8%98%e8%bf%b0%e3%81%be%e3%81%a8%e3%82%81/): @charset “UTF-8”; この... - [【初心者】WordPressでjQuery使用するときの注意「Uncaught TypeError: $ is not a function」](https://bizlabo.site/dbrep/wordpress%e3%81%a7jquery%e4%bd%bf%e7%94%a8%e3%81%99%e3%82%8b%e3%81%a8%e3%81%8d%e3%81%ae%e6%b3%a8%e6%84%8f%e3%80%8cuncaught-typeerror-is-not-a-function%e3%80%8d/): Uncaught TypeError: ... - [Googleサーチコンソール権限を付与](https://bizlabo.site/dbrep/google%e3%82%b5%e3%83%bc%e3%83%81%e3%82%b3%e3%83%b3%e3%82%bd%e3%83%bc%e3%83%ab%e6%a8%a9%e9%99%90%e3%82%92%e4%bb%98%e4%b8%8e/): 権限付与手順 ▼Googleサーチコンソ... - [ネームサーバーをLOLIPOPに設定していて、DNSレコード設定がしたい場合（Googleサーチコンソールのプロパティの確認で必要）](https://bizlabo.site/dbrep/%e3%83%8d%e3%83%bc%e3%83%a0%e3%82%b5%e3%83%bc%e3%83%90%e3%83%bc%e3%82%92lolipop%e3%81%ab%e8%a8%ad%e5%ae%9a%e3%81%97%e3%81%a6%e3%81%84%e3%81%a6%e3%80%81dns%e3%83%ac%e3%82%b3%e3%83%bc%e3%83%89%e8%a8%ad/): Googleサーチコンソールでプロパティ... - [【Googleサーチコンソール】プロパティタイプ「ドメイン」と「URLプレフィックス」違い](https://bizlabo.site/dbrep/%e3%83%97%e3%83%ad%e3%83%91%e3%83%86%e3%82%a3%e3%82%bf%e3%82%a4%e3%83%97%e3%80%8curl%e3%83%97%e3%83%ac%e3%83%95%e3%82%a3%e3%83%83%e3%82%af%e3%82%b9%e3%80%8d/): 「ドメイン」と「URLプレフィックス」の... - [Windows に Yarn をインストールする方法（インストーラ）](https://bizlabo.site/dbrep/780-2/): 下記サイトよりインストーラをダウンロード... - [【初心者】Reactのスタイルのあて方](https://bizlabo.site/dbrep/%e3%80%90%e5%88%9d%e5%bf%83%e8%80%85%e3%80%91react%e3%81%ae%e3%82%b9%e3%82%bf%e3%82%a4%e3%83%ab%e3%81%ae%e3%81%82%e3%81%a6%e6%96%b9/): Inline Style 波カッコの一つ... - [【初心者】Reactのイベント処理の書き方](https://bizlabo.site/dbrep/%e3%80%90%e5%88%9d%e5%bf%83%e8%80%85%e3%80%91react%e3%81%ae%e3%82%a4%e3%83%99%e3%83%b3%e3%83%88%e5%87%a6%e7%90%86%e3%81%ae%e6%9b%b8%e3%81%8d%e6%96%b9/): HTMLとの違い 例）クリックするとアラ... - [fast-forwardマージとは【Git】](https://bizlabo.site/dbrep/fast-forward%e3%83%9e%e3%83%bc%e3%82%b8/): Fast-Forwardマージのしくみ ... - [【React】useState（デモコンポーネント：続きを読むボタン）](https://bizlabo.site/dbrep/%e3%80%90react%e3%80%91usestate/): Stateの概念とは それぞれのコンポー... - [SSL化済のサイトなのに検索結果にhttpsとならない](https://bizlabo.site/dbrep/ssl%e5%8c%96%e6%b8%88%e3%81%ae%e3%82%b5%e3%82%a4%e3%83%88%e3%81%aa%e3%81%ae%e3%81%ab%e6%a4%9c%e7%b4%a2%e7%b5%90%e6%9e%9c%e3%81%abhttps%e3%81%a8%e3%81%aa%e3%82%89%e3%81%aa%e3%81%84/): 参考サイト SSL化について質問です。 ... - [【お名前.com】Googleサーチコンソールで「所有権を証明できませんでした」の対応](https://bizlabo.site/dbrep/%e3%80%90%e3%81%8a%e5%90%8d%e5%89%8d-com%e3%80%91google%e3%82%b5%e3%83%bc%e3%83%81%e3%82%b3%e3%83%b3%e3%82%bd%e3%83%bc%e3%83%ab%e3%81%a7%e3%80%8c%e6%89%80%e6%9c%89%e6%a8%a9%e3%82%92%e8%a8%bc%e6%98%8e/): 起きていること ▼Googleサーチコン... - [Xserverドメインで取得した独自ドメインをロリポップで使用](https://bizlabo.site/dbrep/xserver%e3%83%89%e3%83%a1%e3%82%a4%e3%83%b3%e3%81%a7%e5%8f%96%e5%be%97%e3%81%97%e3%81%9f%e7%8b%ac%e8%87%aa%e3%83%89%e3%83%a1%e3%82%a4%e3%83%b3%e3%82%92%e3%83%ad%e3%83%aa%e3%83%9d%e3%83%83%e3%83%97/): 手順 ▼Xserverレンタルサーバの管... - [ロリポップ設定](https://bizlabo.site/dbrep/%e3%83%ad%e3%83%aa%e3%83%9d%e3%83%83%e3%83%97/): ロリポップ初期の構成 最初に配置されてい... - [Reactプロジェクト作成方法](https://bizlabo.site/dbrep/react%e3%83%97%e3%83%ad%e3%82%b8%e3%82%a7%e3%82%af%e3%83%88%e4%bd%9c%e6%88%90%e6%96%b9%e6%b3%95/): 作業ディレクトリを作成 作成したディレク... - [Googleタグマネージャーで好きな地点までのスクロール計測](https://bizlabo.site/dbrep/google%e3%82%bf%e3%82%b0%e3%83%9e%e3%83%8d%e3%83%bc%e3%82%b8%e3%83%a3%e3%83%bc%e3%81%a7%e5%a5%bd%e3%81%8d%e3%81%aa%e5%9c%b0%e7%82%b9%e3%81%be%e3%81%a7%e3%81%ae%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc/): chrome拡張機能「Page Perc... - [Looker Studio使用法](https://bizlabo.site/dbrep/looker-studio/): Looker Studioとは 無料のダ... - [【Googleタグマネージャー】バナー表示イベント](https://bizlabo.site/dbrep/%e3%80%90google%e3%82%bf%e3%82%b0%e3%83%9e%e3%83%8d%e3%83%bc%e3%82%b8%e3%83%a3%e3%83%bc%e3%80%91%e3%83%90%e3%83%8a%e3%83%bc%e8%a1%a8%e7%a4%ba%e3%82%a4%e3%83%99%e3%83%b3%e3%83%88/): バナークリックイベントの作成 ↓ページ下... - [【CSS】「grid」便利な使い方、flexボックスでjustify-content: center;だけど子要素は左寄せにしたい場合](https://bizlabo.site/dbrep/%e3%80%90css%e3%80%91flex%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%81%a7justify-content-center%e3%81%a0%e3%81%91%e3%81%a9%e5%ad%90%e8%a6%81%e7%b4%a0%e3%81%af%e5%b7%a6%e5%af%84%e3%81%9b%e3%81%ab/): ↑下の行を左寄せにしたい display... - [【GA4】キーイベント（コンバージョンイベント）の登録](https://bizlabo.site/dbrep/%e3%80%90ga4%e3%80%91%e3%82%ad%e3%83%bc%e3%82%a4%e3%83%99%e3%83%b3%e3%83%88%ef%bc%88%e3%82%b3%e3%83%b3%e3%83%90%e3%83%bc%e3%82%b8%e3%83%a7%e3%83%b3%e3%82%a4%e3%83%99%e3%83%b3%e3%83%88%ef%bc%89/): ※アナリティクスのコンバージョンは、キー... - [【Google Tag Manager】サンクスページ到達イベントの作成](https://bizlabo.site/dbrep/%e3%80%90google-tag-manager%e3%80%91%e3%82%b5%e3%83%b3%e3%82%af%e3%82%b9%e3%83%9a%e3%83%bc%e3%82%b8%e5%88%b0%e9%81%94%e3%82%a4%e3%83%99%e3%83%b3%e3%83%88%e3%81%ae%e4%bd%9c%e6%88%90/): 準備 今回はプラグイン「コンタクトフォー... - [設定したイベントをGA4の探索で見る方法](https://bizlabo.site/dbrep/%e8%a8%ad%e5%ae%9a%e3%81%97%e3%81%9f%e3%82%a4%e3%83%99%e3%83%b3%e3%83%88%e3%82%92ga4%e3%81%ae%e6%8e%a2%e7%b4%a2%e3%81%a7%e8%a6%8b%e3%82%8b%e6%96%b9%e6%b3%95/): 探索機能で設定した情報を確認する方法 デ... - [【Wordpress】カラーパレット追加方法](https://bizlabo.site/dbrep/%e3%80%90wordpress%e3%80%91%e3%82%ab%e3%83%a9%e3%83%bc%e3%83%91%e3%83%ac%e3%83%83%e3%83%88%e8%bf%bd%e5%8a%a0%e6%96%b9%e6%b3%95/): ▼functions. php ▼追加C... - [【Googleタグマネージャー】内部リンククリックイベント作成手順](https://bizlabo.site/dbrep/%e3%80%90google%e3%82%bf%e3%82%b0%e3%83%9e%e3%83%8d%e3%83%bc%e3%82%b8%e3%83%a3%e3%83%bc%e3%80%91%e5%86%85%e9%83%a8%e3%83%aa%e3%83%b3%e3%82%af%e3%82%af%e3%83%aa%e3%83%83%e3%82%af%e3%82%a4%e3%83%99/): 1）組み込み変数の設定 ▼Googleタ... - [「Googleタグマネージャー」アカウントを作る→「GA4」を設定する方法](https://bizlabo.site/dbrep/google%e3%82%bf%e3%82%b0%e3%83%9e%e3%83%8d%e3%83%bc%e3%82%b8%e3%83%a3%e3%83%bc%e3%81%abga4%e3%82%92%e8%a8%ad%e5%ae%9a%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95/): Google Tag Manager（G... - [【テンプレートタグ】the_post_thumbnailでサイズ指定ができない](https://bizlabo.site/dbrep/%e3%80%90wordpress%e3%80%91the_post_thumbnail%e3%81%a7%e3%82%b5%e3%82%a4%e3%82%ba%e6%8c%87%e5%ae%9a%e3%81%8c%e3%81%a7%e3%81%8d%e3%81%aa%e3%81%84/): 上記のように(200, 100)と指定し... - [WordPressの編集画面にCSSをあてる方法](https://bizlabo.site/dbrep/wordpress%e3%81%ae%e7%b7%a8%e9%9b%86%e7%94%bb%e9%9d%a2%e3%81%abcss%e3%82%92%e3%81%82%e3%81%a6%e3%82%8b%e6%96%b9%e6%b3%95/): 1）CSSファイルを用意 下記のように実... - [【WordPress】オリジナルテーマ作成手順](https://bizlabo.site/dbrep/%e3%83%86%e3%82%b9%e3%83%88%e6%8a%95%e7%a8%bf/): 1）テーマのディレクトリ作成する wp-... --- ## 固定ページ - [お問い合わせありがとうございます。](https://bizlabo.site/dbrep/thanks/): 3営業日以内に担当より折り返しご連絡いた... - [お問い合わせ](https://bizlabo.site/dbrep/%e3%81%8a%e5%95%8f%e3%81%84%e5%90%88%e3%82%8f%e3%81%9b/): ホームページ制作承っております。 こんな... - [サイトマップ](https://bizlabo.site/dbrep/%e3%82%b5%e3%82%a4%e3%83%88%e3%83%9e%e3%83%83%e3%83%97/): https://ida240609. g... - [プライバシーポリシー](https://bizlabo.site/dbrep/privacy-policy/): 私たちについて https://bizl... --- # # Detailed Content ## 投稿 ### Reactコンポーネントライブラリを作ろう！npmパッケージ開発入門 - Published: 2025-06-12 - Modified: 2025-06-12 - URL: https://bizlabo.site/dbrep/react%e3%82%b3%e3%83%b3%e3%83%9d%e3%83%bc%e3%83%8d%e3%83%b3%e3%83%88%e3%83%a9%e3%82%a4%e3%83%96%e3%83%a9%e3%83%aa%e3%82%92%e4%bd%9c%e3%82%8d%e3%81%86%ef%bc%81npm%e3%83%91%e3%83%83%e3%82%b1%e3%83%bc/ - カテゴリー: React こんにちは！今回は、npmパッケージの作り方について学んだ内容をまとめてみました。特にReactコンポーネントをライブラリとして公開する方法を中心に、初心者にもわかりやすく解説していきます。 npmパッケージって何？ npmパッケージとは、簡単に言うと「みんなで使える便利なコードの塊」のことです。例えば、日付を扱うライブラリや、UIコンポーネントなど、一度作ったものを他の人も使えるように公開できる仕組みです。 事前準備：npmアカウントを作ろう まずはnpm公式サイトでアカウントを作成します。 ... --- ### Next.jsのAPIルートとは？フロントもバックも一体で作れる強力な仕組み - Published: 2025-06-07 - Modified: 2025-06-07 - URL: https://bizlabo.site/dbrep/next-api-root/ - カテゴリー: Next.js Next. jsは、Reactベースのフレームワークとして有名ですが、実はバックエンド的な処理も書けるのをご存知でしょうか？その仕組みが「APIルート（API Routes）」です。 この記事では、Next. jsのAPIルートの基本から使い方、注意点までを解説します。 APIルートとは？ APIルートとは、サーバーサイドで実行される関数（APIエンドポイント）をNext. jsの中に作れる仕組みです。Expressなどの別サーバーを用意しなくても、同じプロジェクト内でAPIを定義できます。 構... --- ### 「useEffectの乱用」を避けよう - Published: 2025-05-26 - Modified: 2025-05-27 - URL: https://bizlabo.site/dbrep/%e3%80%8cuseeffect%e3%81%ae%e4%b9%b1%e7%94%a8%e3%80%8d%e3%82%92%e9%81%bf%e3%81%91%e3%82%88%e3%81%86/ - カテゴリー: React useEffectって何？ useEffect は 「副作用（= side effect）」を扱うための仕組み（フック） です。 基本の書き方 useEffect( => { // ここが「副作用」処理（エフェクト本体） return => { // ここが「クリーンアップ」（必要なときだけ） } }, ) コンポーネントの一生 誕生 成長 消滅 マウント 画面に表示される 更新 内容が変わる アンマウント 画面から消える 例：ホームページ → ボタンクリック → 別ページへ移動 誕生 → 成長... --- ### 【徹底解説】スムーススクロールを完全に制御する方法：React/Next.js編 - Published: 2025-05-22 - Modified: 2025-05-22 - URL: https://bizlabo.site/dbrep/smooth-scroll-react/ - カテゴリー: Next.js, React 【React対応】ぬるっと動く！スムーススクロールを自作で完全制御する方法 「セクションリンクをクリックしたとき、ページを滑らかにスクロールさせたい」──そんな場面は、ブログやドキュメント系のページでよくありますよね。 本記事では、React（Next. js）環境で「完全に制御されたスムーススクロール」を実現する方法を、JavaScript（TypeScript）によるアニメーション制御をベースに紹介します。 この記事で実現すること 任意のセクションIDへのスムーススクロール スクロール速度の... --- ### Next.js・React系でよく出るエラーリスト、ReactのError Boundaryの使い方 - Published: 2025-04-27 - Modified: 2025-06-08 - URL: https://bizlabo.site/dbrep/next-js-react-error-list/ - カテゴリー: Next.js, PHP, React エラー文で単語の意味さえ知っていれば、おおよその内容をつかめる！ 「覚えておくと楽になるエラー単語」まとめたよ！ 一般的なエラー単語 エラー単語意味・説明argument（引数）関数に渡す「値」のことparameter（パラメータ）関数が受け取る側の引数や設定値undefined（未定義）変数や値が「存在していない」状態null（ヌル）「存在はしているが中身は空」という状態unexpected（予期しない）想定外の入力や状態が発生syntax error（構文エラー）コードの書き方のルール違反r... --- ### Next.jsの.nextフォルダとビルドキャッシュについて - Published: 2025-04-14 - Modified: 2025-04-14 - URL: https://bizlabo.site/dbrep/next-js%e3%81%ae-next%e3%83%95%e3%82%a9%e3%83%ab%e3%83%80%e3%81%a8%e3%83%93%e3%83%ab%e3%83%89%e3%82%ad%e3%83%a3%e3%83%83%e3%82%b7%e3%83%a5%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/ - カテゴリー: Next.js . nextフォルダとは . nextフォルダは、Next. jsアプリケーションを動かすために必要な「出来上がった部品」が入る場所です。あなたが書いたコード（JSファイル、CSSなど）を、ブラウザが理解できる形に変換して保存する倉庫のようなものです。簡単に言うと: コードを書く → Next. jsが加工する → . nextフォルダに保存されるあなたが直接触る必要はなく、自動的に作られます削除しても問題ありません（再度ビルドすれば復活します） ビルドキャッシュとは ビルドキャッシュとは「一度... --- ### Next.js 静的サイト生成 (SSG) と output: 'export' - Published: 2025-03-17 - Modified: 2025-06-10 - URL: https://bizlabo.site/dbrep/next-js-ssg-output-export/ - カテゴリー: Next.js SSGの仕組み 従来のSSRやCSRとは異なり、SSGは開発・デプロイ段階でHTMLファイルを完全に生成します。 ユーザーがアクセスする時点では、すでに完成されたHTMLファイルがCDNから即座に配信されるため、極めて高速な表示が実現できます。 SSR、CSR、SSGの違い SSR: サーバーでHTMLを生成してから送信。初期表示が速く、SEOに有利 SSR (Server-Side Rendering) クライアント ブラウザ Webサーバー Node. js リソース DB・API・ ファイ... --- ### Webマーケティングの基礎知識：オーガニックサーチとペイドサーチの違い、CPCの仕組み、WBRAIDとは？ - Published: 2025-03-14 - Modified: 2025-06-19 - URL: https://bizlabo.site/dbrep/web%e3%83%9e%e3%83%bc%e3%82%b1%e3%83%86%e3%82%a3%e3%83%b3%e3%82%b0%e3%81%ae%e5%9f%ba%e7%a4%8e%e7%9f%a5%e8%ad%98%ef%bc%9a%e3%82%aa%e3%83%bc%e3%82%ac%e3%83%8b%e3%83%83%e3%82%af%e3%82%b5%e3%83%bc/ - カテゴリー: Web広告 こんにちは！今日はWebマーケティングの世界でよく耳にする「オーガニックサーチ」と「ペイドサーチ」について解説します。サイト運営やマーケティングに携わる方は必ず押さえておきたい基本中の基本ですよ！ ウェブマーケティング すべて 画像 動画 ニュース 広告 効果的なウェブマーケティング戦略 www. company-a. com/marketing 最新のマーケティング手法でビジネスを加速。無料相談実施中！ SEO対策なら株式会社B www. company-b. com 上位表示で売上アップ！実... --- ### PHPの比較演算子「==」と「===」の違いを徹底解説！ - Published: 2025-03-14 - Modified: 2025-03-14 - URL: https://bizlabo.site/dbrep/php%e3%81%ae%e6%af%94%e8%bc%83%e6%bc%94%e7%ae%97%e5%ad%90%e3%80%8c%e3%80%8d%e3%81%a8%e3%80%8c%e3%80%8d%e3%81%ae%e9%81%95%e3%81%84%e3%82%92%e5%be%b9%e5%ba%95%e8%a7%a3%e8%aa%ac%ef%bc%81/ - カテゴリー: PHP こんにちは！今回はPHPでよく混乱しがちな比較演算子「==」と「===」の違いについて、わかりやすく解説します。 「==」と「===」の基本的な違い PHPには2種類の等価比較演算子があります： 「==」: 値が同じかを比較（型変換あり） 「===」: 値と型が両方同じかを比較（型変換なし） この違いを簡単に言うと： 「==」は「だいたい同じ」 「===」は「完全に同じ」 PHPの「==」演算子：ゆるい比較（型変換あり） 値が同じなら型が違っても true を返す $a = 5 (integer... --- ### php.ini の error_log でエラーログを出力する先を指定する方法、パス指定の注意点 - Published: 2025-03-13 - Modified: 2025-03-13 - URL: https://bizlabo.site/dbrep/php-ini-%e3%81%ae-error_log-%e3%81%a7%e3%82%a8%e3%83%a9%e3%83%bc%e3%83%ad%e3%82%b0%e3%82%92%e5%87%ba%e5%8a%9b%e3%81%99%e3%82%8b%e5%85%88%e3%82%92%e6%8c%87%e5%ae%9a%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95/ - カテゴリー: PHP ログファイルに記録するための php. ini の設定 // php. ini での設定 error_reporting = E_ALL // すべてのエラーを報告 display_errors = Off // ブラウザへのエラー表示をオフ log_errors = On // エラーログの記録をオン error_log = "/var/www/html/logs/php_error. log" // ログファイルのパス PHPエラー出力の制御設定 ; php. ini設定 display_e... --- ### Meta広告運用の要！Facebook PixelとGTMの基本と実践 - Published: 2025-02-28 - Modified: 2025-02-28 - URL: https://bizlabo.site/dbrep/meta%e5%ba%83%e5%91%8a%e9%81%8b%e7%94%a8%e3%81%ae%e8%a6%81%ef%bc%81facebook-pixel%e3%81%a8gtm%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%a8%e5%ae%9f%e8%b7%b5/ - カテゴリー: Google Tag Manager こんにちは、マーケティングテックブログをご覧いただきありがとうございます。今回は、Meta広告（旧Facebook広告）運用において欠かせない「Facebook Pixel」と「Google Tag Manager（GTM）」について、初心者の方にもわかりやすく解説していきます。 Facebook Pixelとは？ Facebook Pixelは、ウェブサイト訪問者の行動を追跡するためのJavaScriptコードです。簡単に言えば、「誰があなたのウェブサイトで何をしたか」をMetaに伝えるための... --- ### Next.jsでのGoogleタグマネージャー実装とデータレイヤー（dataLayer.push）活用方法 - Published: 2025-02-20 - Modified: 2025-02-20 - URL: https://bizlabo.site/dbrep/next-js%e3%81%a7%e3%81%aegoogle%e3%82%bf%e3%82%b0%e3%83%9e%e3%83%8d%e3%83%bc%e3%82%b8%e3%83%a3%e3%83%bc%e5%ae%9f%e8%a3%85%e6%96%b9%e6%b3%95%ef%bc%9a2%e3%81%a4%e3%81%ae%e3%82%a2%e3%83%97%e3%83%ad/ - カテゴリー: Google Tag Manager, Next.js はじめに Next. jsでGoogleタグマネージャー（GTM）を実装する方法には、大きく分けて2つのアプローチがあります： 公式ライブラリ @next/third-parties を使用する方法（推奨） カスタム実装による方法 それぞれの実装方法について詳しく見ていきましょう。 1. @next/third-parties を使用する方法 インストール npm install @next/third-parties 実装手順 app/layout. tsx（もしくはpages/_app. j... --- ### Next.jsにおけるレスポンシブ実装とちらつき対策 - Published: 2025-02-16 - Modified: 2025-02-16 - URL: https://bizlabo.site/dbrep/next-js%e3%81%ab%e3%81%8a%e3%81%91%e3%82%8b%e3%83%ac%e3%82%b9%e3%83%9d%e3%83%b3%e3%82%b7%e3%83%96%e5%ae%9f%e8%a3%85%e3%81%a8%e3%81%a1%e3%82%89%e3%81%a4%e3%81%8d%e5%af%be%e7%ad%96/ - カテゴリー: Next.js はじめに Next. jsでレスポンシブ対応を実装する際、SSRやSSGの特性により初期レンダリング時にちらつきが発生することがあります。今回は、その問題の解決方法と実装のベストプラクティスについて解説します。 レスポンシブ実装の2つのアプローチ レスポンシブ実装アプローチ CSS Media Query スタイル定義のみの変更 メリット: ・DOMツリー構造不変 ・SSR/SSG時から適用 ・実装がシンプル useMediaQuery コンポーネントの切り替え ユースケース: ・複雑なレイアウ... --- ### リゾット米 - Published: 2024-12-15 - Modified: 2024-12-15 - URL: https://bizlabo.site/dbrep/%e3%83%aa%e3%82%be%e3%83%83%e3%83%88%e7%b1%b3/ - カテゴリー: 未分類 鍋にバター100 玉名者ぎ外側1枚火にかける バターが泡立ち玉ねぎがすきとおってきたら、アクエレッロイルリーゾ1キロ入れて、さわれないくらい熱くする ブロード800別で温めておく 両方温まったら、ブロードを米に入れてふたをして弱火は12分 120gポーションが使いやすい --- ### 【WordPress】「Smush」や「EWWW Image Optimizer」などのプラグインで画像を圧縮 - Published: 2024-12-15 - Modified: 2024-12-22 - URL: https://bizlabo.site/dbrep/%e3%80%90wordpress%e3%80%91%e3%80%8csmush%e3%80%8d%e3%82%84%e3%80%8cewww-image-optimizer%e3%80%8d%e3%81%aa%e3%81%a9%e3%81%ae%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e3%81%a7%e7%94%bb%e5%83%8f/ - カテゴリー: WordPress メリット WordPressで画像を圧縮することには、以下のようなメリットがあります。 ページ表示速度の向上 圧縮状況ページサイズ（MB）読み込み時間（秒）圧縮前5. 2MB4. 8秒圧縮後2. 1MB1. 9秒 サーバー負荷の軽減 圧縮した画像を使用すると、サーバーが配信するデータ量が減少します。特にアクセス数が多いサイトでは、サーバーの帯域幅やリソースの節約に直結します。 SEOの向上 Googleはページ速度を検索順位の要因として重視しています。 画像圧縮によってページ速度が向上することで... --- ### 【CSS】疑似要素で吹き出し - Published: 2024-11-28 - Modified: 2024-11-30 - URL: https://bizlabo.site/dbrep/%e3%80%90css%e3%80%91%e7%96%91%e4%bc%bc%e8%a6%81%e7%b4%a0%e3%81%a7%e5%90%b9%e3%81%8d%e5%87%ba%e3%81%97/ - カテゴリー: CSS サンプルコード . bubble { position: relative; background: #ffffff; border: 4px solid #000000; border-radius: 12px; padding: 20px; width: 300px; margin: 40px; } . bubble:after, . bubble:before { content: ''; position: absolute; left: -20px; top: 50%; transfo... --- ### 【CSS】floatで画像を下に配置してテキストを回り込ませる - Published: 2024-11-28 - Modified: 2024-12-01 - URL: https://bizlabo.site/dbrep/%e3%80%90css%e3%80%91float%e3%81%a7%e7%94%bb%e5%83%8f%e3%82%92%e4%b8%8b%e3%81%ab%e9%85%8d%e7%bd%ae%e3%81%97%e3%81%a6%e3%83%86%e3%82%ad%e3%82%b9%e3%83%88%e3%82%92%e5%9b%9e%e3%82%8a%e8%be%bc%e3%81%be/ - カテゴリー: CSS floatで画像を下に配置することは難しい点があります floatを使って画像の下にテキストを回り込ませる実装は、一見シンプルに見えて実は複雑です。以下のような課題があります： floatは基本的に左右への配置を想定しており、下方向への回り込みは直接的には制御できません 画像の高さが動的に変わる場合、それに合わせたレイアウト調整が必要になります レスポンシブ対応時に、画像とテキストの位置関係が崩れやすい サンプル ボックス左の「赤いボーダー」を目印にして、実際のレイアウトにあわせて値を調節してく... --- ### 【Illustrator初心者向け】デザインカンプからコーディング、効率的な書き出し方法 - Published: 2024-11-21 - Modified: 2024-11-29 - URL: https://bizlabo.site/dbrep/illustrator%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%82%ab%e3%83%b3%e3%83%97%e3%81%8b%e3%82%89%e3%82%b3%e3%83%bc%e3%83%87%e3%82%a3%e3%83%b3%e3%82%b0%e5%8a%b9%e7%8e%87%e7%9a%84%e3%81%aa%e6%9b%b8%e3%81%8d/ - カテゴリー: Illustrator - タグ: pickup そもそもIllustratorはWebサイトのデザインカンプ作成には不向き IllustratorはWebサイトのデザインカンプ作成にも使用できますが、Photoshopや専用のUI/UXデザインツール（FigmaやAdobe XD）と比較すると、いくつかのポイントで利便性が劣る場合があります。 Photoshopのほうピクセル単位での編集が得意 印刷物向け FigmaやAdobe XDがWebデザインに選ばれることが多い 最近では、PhotoshopやIllustratorよりもFigmaやA... --- ### ローストビーフ - Published: 2024-11-17 - Modified: 2024-11-17 - URL: https://bizlabo.site/dbrep/%e3%83%ad%e3%83%bc%e3%82%b9%e3%83%88%e3%83%93%e3%83%bc%e3%83%95/ - カテゴリー: 未分類 肉　1キロ 塩　12g B. P. 　2g 人参 セロリ ハーブ ニンニク --- ### WindowsかMacか - Published: 2024-10-20 - Modified: 2024-10-20 - URL: https://bizlabo.site/dbrep/windows%e3%81%8bmac%e3%81%8b/ - カテゴリー: Windows ひらがな / 半角英数字の切り替え https://pc. asobu. co. jp/windows-ime/ --- ### ワードプレスのメディアに保存した画像（upload_max_filesize, post_max_size, memory_limit） - Published: 2024-10-19 - Modified: 2024-11-23 - URL: https://bizlabo.site/dbrep/%e3%83%af%e3%83%bc%e3%83%89%e3%83%97%e3%83%ac%e3%82%b9%e3%81%ae%e3%83%a1%e3%83%87%e3%82%a3%e3%82%a2%e3%81%ab%e4%bf%9d%e5%ad%98%e3%81%97%e3%81%9f%e7%94%bb%e5%83%8f%e3%81%a8%e3%83%87%e3%83%bc%e3%82%bf/ - カテゴリー: WordPress 画像はどこに保存される？ WordPressに画像をアップロードすると、2つの場所に情報が保存されます： サーバーのディレクトリ：実際の画像ファイルがここに保存されます。 データベース：画像に関する情報（メタデータ）がここに記録されます。 サーバー wp-content/uploads image. jpg データベース wp_posts テーブル ID: 123 post_author: 1 post_date: 2024-10-20 guid: /uploads/image. jpg データ... --- ### 【WordPressプラグイン】Reactをショートコードで挿入 - Published: 2024-10-16 - Modified: 2025-05-11 - URL: https://bizlabo.site/dbrep/wp-react-shortcord/ - カテゴリー: React, WordPress プラグイン単体のディレクトリだけでReact開発環境 React をテンプレートとしてとして指定 npm create vite@latest . --template react npm create vite@latest の直後は、まだ依存モジュールがインストールされていない状態だから、npm install を実行して初めてプロジェクトが実行可能に npm install Viteの設定ファイルを修正 import { defineConfig } from 'vite' import ... --- ### TypeScriptでWordPressのブロックを開発する「参考記事リンクブロック」パート2 - Published: 2024-10-14 - Modified: 2024-10-15 - URL: https://bizlabo.site/dbrep/typescript%e3%81%a7wordpress%e3%81%ae%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%82%92%e9%96%8b%e7%99%ba%e3%81%99%e3%82%8b%e3%80%8c%e5%8f%82%e8%80%83%e8%a8%98%e4%ba%8b%e3%83%aa%e3%83%b3%e3%82%af%e3%83%96/ - カテゴリー: React, TypeScript, WordPress 参考サイト https://bizlabo. site/dbrep/typescript/ ソースファイル index. tsx import { registerBlockType } from '@wordpress/blocks'; import { useBlockProps } from '@wordpress/block-editor'; import { TextControl, Button } from '@wordpress/components'; import { use... --- ### @wordpress/scriptsでオリジナルブロック作成 - Published: 2024-10-06 - Modified: 2024-10-12 - URL: https://bizlabo.site/dbrep/4062-2/ - カテゴリー: Docker, PHP, React @wordpress/scriptsとは WordPress開発のためのNode. jsベースのビルドツールキットで、ビルドプロセスを簡素化することができます。 開発プロセスの3要素 ビルド (webpack) • モジュールのバンドル • コード最適化 コンパイル (Babel) • ES6+ → ES5変換 • ブラウザ互換性確保 リント (ESLint) • コード品質チェック • エラー検出 Babel:Babelは、最新のJavaScript（ES6+）を古いブラウザでも動作する形に変... --- ### Wordpressプラグインでオリジナルブロックを追加（静的ブロック） - Published: 2024-10-03 - Modified: 2024-10-06 - URL: https://bizlabo.site/dbrep/wordpress%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e3%81%a7%e3%82%aa%e3%83%aa%e3%82%b8%e3%83%8a%e3%83%ab%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%82%92%e8%bf%bd%e5%8a%a0/ - カテゴリー: WordPress ゴール、制作物 下記の「筆者ブロック」 事前にアップロードしたファイルを使用し動的な内容の変更をしない仕様です ワタナベ タクヤ 東京都内でフロントエンドエンジニアとして働いています。Wordpress、Next. jsが専門です。 構成ファイル wp-content ┗　plugins ┗　author-info-block ┣　author-info-block. php ┣　block. js ┣　style. css ┣　template. html ┗　author-image. sv... --- ### WordPressテーマにReactを統合 - Published: 2024-10-02 - Modified: 2025-06-07 - URL: https://bizlabo.site/dbrep/wordpress%e3%83%86%e3%83%bc%e3%83%9e%e3%81%abreact%e3%82%92%e7%b5%b1%e5%90%88/ - カテゴリー: React, WordPress 参考サイト Reactを使用してWordPressテーマを開発する方法https://kinsta. com/jp/blog/wordpress-react-theme/ 前提条件 WordPressサイト（ローカル開発環境推奨） Node. jsとnpm（またはyarn）のインストール ステップ1: 開発環境セットアップ 1 開発環境でのみNode. jsが必要 React + @wordpress/scriptsを使用してコンポーネントを開発 Node. js 開発環境 ビルドツール npm... --- ### Salsiccia - Published: 2024-09-28 - Modified: 2024-09-28 - URL: https://bizlabo.site/dbrep/salsiccia/ - カテゴリー: 未分類 豚ひき肉　300グラム 豚背油　50グラム ローズマリー　1パック セージ　1パック 1本　豚腸 塩　3. 5グラム ブラックペッパー　1. 5グラム フェンネルパウダー ガーリックパウダー ボイラー5分 --- ### 初心者のための「Optimize Next」導入ガイド - Published: 2024-09-27 - Modified: 2024-12-10 - URL: https://bizlabo.site/dbrep/%e5%88%9d%e5%bf%83%e8%80%85%e3%81%ae%e3%81%9f%e3%82%81%e3%81%ae%e3%80%8coptimize-next%e3%80%8d%e5%b0%8e%e5%85%a5%e3%82%ac%e3%82%a4%e3%83%89/ - カテゴリー: SEO 無料のABテストツール「Optimize Next」の導入方法について、初心者の方にも分かりやすく解説していきます。 導入手順 1. アカウント作成 まずは「Optimize Next」のウェブサイトにアクセスし、アカウントを作成しましょう。 Optimize Next ウェブサイト アカウント作成 必要情報を入力 「Optimize Next」の公式サイトを開く（https://optimize-next. com/） 「無料で利用する」または「アカウント作成」ボタンをクリック 必要な情報（メ... --- ### Next.js NEXT_PUBLIC_環境変数の完全ガイド：安全な使い方とセキュリティリスクの回避 - Published: 2024-09-26 - Modified: 2025-06-07 - URL: https://bizlabo.site/dbrep/next-js%e3%81%ae%e7%92%b0%e5%a2%83%e5%a4%89%e6%95%b0%ef%bc%9anext_public_%e3%81%ae%e4%bd%bf%e3%81%84%e6%96%b9%e3%81%a8%e9%87%8d%e8%a6%81%e6%80%a7/ - カテゴリー: Next.js Next. jsアプリケーション開発において、クライアントサイドで環境変数を使用する際に欠かせないNEXT_PUBLIC_プレフィックスについて、その仕組みから正しい使用法、そして重要なセキュリティリスクまで詳しく解説します。 NEXT_PUBLIC_とは？ NEXT_PUBLIC_は、Next. jsで使用する特別なプレフィックス（接頭辞）です。環境変数の名前の前にこのプレフィックスを付けることで、その環境変数をサーバーサイドだけでなく、ブラウザ側（クライアントサイド）でも使用できるようになり... --- ### next.config.js - Published: 2024-09-23 - Modified: 2024-09-29 - URL: https://bizlabo.site/dbrep/%e3%80%90next-js%e3%80%91%e6%a4%9c%e8%a8%bc%e3%83%86%e3%82%b9%e3%83%88%e3%81%ae%e3%81%9f%e3%82%81%e7%8f%be%e5%9c%a8%e6%99%82%e5%88%bb%e3%82%92%e5%a4%89%e6%9b%b4%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95/ - カテゴリー: Next.js - タグ: pickup next. config. jsとは Next. jsプロジェクトの設定を行うための重要なファイル 一般的な設定項目 const nextConfig = { // リアクトの厳格モードを有効化 reactStrictMode: true, // 画像最適化の設定 images: { domains: , deviceSizes: , imageSizes: , }, // 環境変数の設定 env: { customKey: 'my-value', }, // ウェブパックの設定をカスタマイズ ... --- ### 【Next.js】Imageコンポーネントnext/image（画像最適化機能）とは - Published: 2024-09-23 - Modified: 2024-11-17 - URL: https://bizlabo.site/dbrep/%e3%80%90next-js%e3%80%91next-image%ef%bc%88%e7%94%bb%e5%83%8f%e6%9c%80%e9%81%a9%e5%8c%96%e6%a9%9f%e8%83%bd%ef%bc%89%e3%81%a8%e3%81%af/ - カテゴリー: Next.js 参考サイト Next. js 13のImageコンポーネントの簡単な使い方とメリットhttps://www. zenryoku-kun. com/post/nextjs13-image 画像最適化の舞台裏をのぞき見してnext/imageを使いこなすhttps://zenn. dev/reiwatravel/articles/fb1586ea9463a1 Next. js の Image コンポーネントの使い方をまとめてみたhttps://dev. classmethod. jp/article... --- ### 【Next.js】App Routerでメタタグを設定する方法 - Published: 2024-09-23 - Modified: 2024-09-23 - URL: https://bizlabo.site/dbrep/%e3%80%90next-js%e3%80%91/ - カテゴリー: Next.js Next. jsのApp Routerでメタタグを設定する方法を解説します。 新しいApp Routerは、従来のpagesディレクトリを使用する方法とはいくつか違いがあり、設定方法が少し変わっています。 旧pagesディレクトリでのメタタグ設定 以前のNext. js（pagesディレクトリを使う方法）では、各ページのメタタグはコンポーネントを使用して設定していました。pagesディレクトリの中のコンポーネントファイルに以下のように記述していました： import Head from 'nex... --- ### 【Next.jsビルド】画像最適化（next/image）の落とし穴 - Published: 2024-09-21 - Modified: 2025-02-16 - URL: https://bizlabo.site/dbrep/next-js%e3%83%93%e3%83%ab%e3%83%89/ - カテゴリー: Next.js Next. jsのバージョン14. 0. 0で、静的サイト生成（SSG）のビルド方法が変わりました： 新しい方法： next. config. jsファイルに"output": 'export'を追加します。 next buildコマンドを実行すると、outフォルダに静的ファイルが生成されます。 以前の方法： next build && next exportコマンドを使用していました。 そもそもSSGとは？（Static Site Generation） 「静的サイト生成」 ウェブサイトのコン... --- ### 【mermaidコード】生成AIを使用して、フローチャート作成 - Published: 2024-09-21 - Modified: 2025-06-12 - URL: https://bizlabo.site/dbrep/%e7%94%9f%e6%88%90ai%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%97%e3%81%a6%e3%80%81%e3%83%95%e3%83%ad%e3%83%bc%e3%83%81%e3%83%a3%e3%83%bc%e3%83%88%e4%bd%9c%e6%88%90/ - カテゴリー: 未分類 フローチャートは複雑なプロセスを理解しやすいように視覚化しするのに役立ちますが、手作業で作成には時間がかかることがあります。 そこで登場するのが生成AI。Claude 3やChatGPTといったAIを活用すれば、テキストベースの簡単な説明から素敵なフローチャートを作り出してくれるんです！ 生成AIにファイルを読み込みマーメイドコードを生成 「添付ファイルをマーメイドコードを使ってフローチャートを作成してください。」 このように指示すると、マーメイド形式でダイアグラムを生成し、それを添付ファイルと... --- ### Next.js バージョン15 App Router 始め方 フォルダ構成ベストプラクティス - Published: 2024-09-19 - Modified: 2025-02-24 - URL: https://bizlabo.site/dbrep/next-js-app-router%e5%ae%8c%e5%85%a8%e3%82%ac%e3%82%a4%e3%83%89/ - カテゴリー: Next.js ディレクトリベースのルーティング appディレクトリ配下の構造がそのままウェブサイトのページ構成になります。 各page. jsファイルでデフォルトエクスポートされたコンポーネントが表示内容 そもそもデフォルトエクスポートとは？ 機能や値を外部に提供 ファイルごとに1つだけ export default が使えます。 インポートするとき、好きな名前を付けられます。 →　各ページファイル（page. js）は、Reactコンポーネントをデフォルトエクスポートとして提供する必要があります。 基本構文... --- ### 【CSS】カラム子要素　下揃え - Published: 2024-09-19 - Modified: 2024-09-19 - URL: https://bizlabo.site/dbrep/3636-2/ - カテゴリー: CSS カラム子要素　下揃え 各カラムでテキストの量に違いがあったりする場合、カラム下部子要素の高さ位置がバラバラになってしまうことがあると思いますが、CSSで下ぞろえにすることができます！ ダミーボタン 各カラムで下部子要素の高さをそろえたいとき、CSSで可能です！ ダミーボタン 各カラムでテキストの量に違いがあったりする場合、カラム下部子要素の高さ位置がバラバラになってしまうことがあると思いますが、CSSで下ぞろえにすることができます！ ダミーボタン . columns-f . wp-block-c... --- ### 【CSS】backgroundプロパティ - Published: 2024-09-19 - Modified: 2024-09-19 - URL: https://bizlabo.site/dbrep/%e3%80%90css%e3%80%91background%e3%83%97%e3%83%ad%e3%83%91%e3%83%86%e3%82%a3/ - カテゴリー: CSS 背景 background ＜一括指定の順番＞ background: url background-position / background-size background-repeat; background-position / background-size　の記述は決まっている liner-gradient background: linear-gradient(red, #eee); background: linear-gradient(to bottom, red, #eee)... --- ### Next.js の Blog Starter Kit を使ったブログサイト作成手順 - Published: 2024-09-16 - Modified: 2024-09-19 - URL: https://bizlabo.site/dbrep/next-js-%e3%81%ae-blog-starter-kit-%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%9f%e3%83%96%e3%83%ad%e3%82%b0%e3%82%b5%e3%82%a4%e3%83%88%e4%bd%9c%e6%88%90%e6%89%8b%e9%a0%86/ - カテゴリー: Next.js, 未分類 Blog Starter Kitとは？ Next. jsは、ブログ作成のためのスターターキットも提供しています。 Next. jsのBlog Starter Kitは、ブログ作成に必要な基本的な機能と構造が既に実装されたテンプレートです。このキットを使用することで、ゼロからブログシステムを構築する手間を省き、すぐにコンテンツの作成に集中できます。 主な特徴 Markdownサポート: 記事をMarkdown形式で書くことができます。 静的サイト生成（SSG）: 高速なページ読み込みと優れたSEO... --- ### WinSCPのインストール方法 - Published: 2024-09-12 - Modified: 2024-10-20 - URL: https://bizlabo.site/dbrep/winscp%e3%81%ae%e5%9f%ba%e6%9c%ac%e7%9a%84%e3%81%aa%e4%bd%bf%e7%94%a8%e6%96%b9%e6%b3%95/ - カテゴリー: 未分類 インストール 下記サイトよりhttps://winscp. net/eng/download. php 「DOWNLOAD WINSCP」をクリック ダウンロードしたインストーラーを実行 自分のみの利用の為、「現在のユーザー用にインストール」 使用許諾を「許諾」 標準的なインストール インターフェースの設定は後から変更可能です 表示　→環境設定 インストール 完了 接続方法 プロトコル　→SFTP（デフォルト） ホスト名 ポート番号　→22（デフォルト） ユーザ名 パスワード ssh接続を初回実... --- ### EC2インスタンス起動、停止方法 - Published: 2024-09-10 - Modified: 2024-09-10 - URL: https://bizlabo.site/dbrep/ec2%e3%82%a4%e3%83%b3%e3%82%b9%e3%82%bf%e3%83%b3%e3%82%b9%e8%b5%b7%e5%8b%95%e6%96%b9%e6%b3%95/ - カテゴリー: AWS 起動方法 コンソール画面で「EC2」と検索 →EC2ダッシュボード画面に移動します 画面右上のリージョンのプルダウンよりリージョンを選択 「インスタンスを起動」をクリック 例）各種設定↓ 名前とタグmy-linux-serverクイックスタートAmazon Linux AWSAMI（Amazon マシンイメージ）Amazon Linux 2023 AMIアーキテクチャ64ビット(x86)インスタンスタイプt2. micro 「新しいキーペアの作成」をクリック キーペアタイプでは「RSA」が広く使... --- ### 構造化データ入門：SEOを強化する簡単な方法 - Published: 2024-08-30 - Modified: 2024-08-30 - URL: https://bizlabo.site/dbrep/%e6%a7%8b%e9%80%a0%e5%8c%96%e3%83%87%e3%83%bc%e3%82%bf%e5%85%a5%e9%96%80%ef%bc%9aseo%e3%82%92%e5%bc%b7%e5%8c%96%e3%81%99%e3%82%8b%e7%b0%a1%e5%8d%98%e3%81%aa%e6%96%b9%e6%b3%95/ - カテゴリー: SEO 今日は、ウェブサイトのSEO（検索エンジン最適化）を強化する上で非常に重要な「構造化データ」について、初心者の方にもわかりやすく解説します。 構造化データとは？ 構造化データとは、ウェブページの内容を検索エンジンが理解しやすい形式で提供する方法です。簡単に言えば、人間向けに書かれた情報を、機械（検索エンジン）が理解できるように整理して記述することです。 人間向けコンテンツ 構造化データ G --- ### useRef - Published: 2024-08-29 - Modified: 2024-09-13 - URL: https://bizlabo.site/dbrep/useref/ - カテゴリー: JavaScript, React ReactのuseRefフックは、主に2つの目的で使用される便利なツールです DOM要素への参照 再レンダリングを引き起こさない値の保持 useRefの基本的な役割： useRefは、主に「何かを覚えておく」ための道具です。特に、画面の要素（例：ボタンや入力欄）を記憶するのによく使います。 useRefの特徴： useRefで覚えた情報は変更しても、画面は自動で更新されません。これは、useState（画面に表示する情報を管理するもの）とは違います。 useRefの一般的な使い方： 画面の要素を... --- ### DockerでApacheのSSL接続 - Published: 2024-08-28 - Modified: 2024-10-05 - URL: https://bizlabo.site/dbrep/docker%e3%81%a7apache%e3%81%aessl%e6%8e%a5%e7%b6%9a/ - カテゴリー: Apache, Docker こんにちは！今回は、Docker環境でのSSL接続設定について詳しく解説します。SSL（Secure Sockets Layer）は、インターネット上での通信を暗号化し、セキュリティを向上させる重要な技術です。Dockerを使用した開発環境でも、SSL接続を適切に設定することで、より本番環境に近い安全な環境を構築できます。 自己署名証明書を使用する場合 https://localhostとしてブラウザで確認すると警告がでます 警告ページで「詳細」や「続行」などのオプションを探します。 リスクを理... --- ### ティラミス - Published: 2024-08-18 - Modified: 2024-11-17 - URL: https://bizlabo.site/dbrep/%e3%83%86%e3%82%a3%e3%83%a9%e3%83%9f%e3%82%b9/ - カテゴリー: 未分類 クリーム　400　114　① エスプレッソ　6 フィンガービスケット 卵黄　5　1. 4グラニュー　80　22　② ゼラチン　2枚　0. 57　③水マルサラ　30 マスカルポーネ　350　100　④ --- ### 定型文は辞書登録、またはテンプレート登録する - Published: 2024-08-18 - Modified: 2024-08-18 - URL: https://bizlabo.site/dbrep/%e5%ae%9a%e5%9e%8b%e6%96%87%e3%81%af%e8%be%9e%e6%9b%b8%e7%99%bb%e9%8c%b2%e3%80%81%e3%81%be%e3%81%9f%e3%81%af%e3%83%86%e3%83%b3%e3%83%97%e3%83%ac%e3%83%bc%e3%83%88%e7%99%bb%e9%8c%b2%e3%81%99%e3%82%8b/ - カテゴリー: 未分類 「お世話になっております。」や「よろしくお願いいたします。」など、頻繁に使用する定型文は予めIMEに辞書登録するか、Gmailにテンプレート登録すると便利です 例）IMEに辞書登録で（登録単語）「お世話になっております。」：（よみ）：「おせ」 「設定」で登録単語の確認できます --- ### スプレッドシートからメール送信 - Published: 2024-08-13 - Modified: 2024-08-14 - URL: https://bizlabo.site/dbrep/%e3%82%b9%e3%83%97%e3%83%ac%e3%83%83%e3%83%89%e3%82%b7%e3%83%bc%e3%83%88%e3%81%8b%e3%82%89%e3%83%a1%e3%83%bc%e3%83%ab%e9%80%81%e4%bf%a1/ - カテゴリー: 未分類 スクリプトエディタを開く： スプレッドシートを開き、上部メニューから「ツール」→「スクリプトエディタ」を選択します。 スクリプトを作成： スクリプトエディタで、以下のような基本的なコードを入力します： function sendEmailFromSpreadsheet { var sheet = SpreadsheetApp. getActiveSheet; var dataRange = sheet. getRange('A2:C'); // メールデータの範囲を指定 var data = d... --- ### PowerShell - Published: 2024-08-11 - Modified: 2025-04-22 - URL: https://bizlabo.site/dbrep/powershell/ - カテゴリー: Windows PowerShellはコマンドプロンプトの1種です。 主要なコマンドライン環境の比較 以下の表は、主要なコマンドライン環境とその特徴をまとめたものです。 ツール 主な特徴 一般的なコマンド例 主な用途 Bash UNIXベース、スクリプト可能 ls, cd, grep, awk Linux/Unix系OS管理 PowerShell オブジェクト指向、. NET統合 Get-ChildItem, Set-Location Windows管理、自動化 CMD Windows標準、バッチ処理 dir,... --- ### JSON Server初心者向けチュートリアル：ハンズオン形式で学ぶ - Published: 2024-08-11 - Modified: 2025-03-19 - URL: https://bizlabo.site/dbrep/json-server%e5%88%9d%e5%bf%83%e8%80%85%e5%90%91%e3%81%91%e3%83%81%e3%83%a5%e3%83%bc%e3%83%88%e3%83%aa%e3%82%a2%e3%83%ab%ef%bc%9a%e3%83%8f%e3%83%b3%e3%82%ba%e3%82%aa%e3%83%b3%e5%bd%a2%e5%bc%8f%e3%81%a7/ - カテゴリー: JavaScript, Node.js こんにちは！今回は、Web開発の学習や小規模プロジェクトで非常に便利なツール、「JSON Server」について、初心者の方にも分かりやすく解説していきます。実際に手を動かしながら学んでいきましょう。 JSON Serverとは？ JSON Serverは、ローカル環境で簡単にREST APIをモックアップ（模型、サンプル）できるツールです。 本格的なバックエンドを構築する前に、フロントエンド開発をスムーズに進めたい場合や、APIの動作を確認したい場合に非常に役立ちます。 ハンズオン：JSON ... --- ### POSTリクエスト - Published: 2024-08-08 - Modified: 2024-08-09 - URL: https://bizlabo.site/dbrep/3043-2/ - カテゴリー: PHP クライアント サーバー | | | ---- POSTリクエスト ---> | | | | | | | | | | | | --- ### 【初心者向け】PHPエラー確認方法 - Published: 2024-08-07 - Modified: 2024-09-22 - URL: https://bizlabo.site/dbrep/%e3%80%90%e5%88%9d%e5%bf%83%e8%80%85%e5%90%91%e3%81%91%e3%80%91php%e3%82%a8%e3%83%a9%e3%83%bc%e7%a2%ba%e8%aa%8d%e6%96%b9%e6%b3%95/ - カテゴリー: Docker, PHP エラーの発生の確認方法 方法（1）ブラウザ上にエラーメッセージを直接表示 下記のコードでdisplay_errorsをOnにすることで、ブラウザ上にエラーメッセージが直接表示されます。 ※ 本番環境では、セキュリティ上の理由からエラーを画面に表示しないことが推奨されます。 ini_set('display_errors', 1); ini_set('display_startup_errors', 1); error_reporting(E_ALL); 1. ini_set('display_e... --- ### バスクチーズケーキ - Published: 2024-08-03 - Modified: 2024-11-16 - URL: https://bizlabo.site/dbrep/%e3%83%90%e3%82%b9%e3%82%af%e3%83%81%e3%83%bc%e3%82%ba%e3%82%b1%e3%83%bc%e3%82%ad/ - カテゴリー: 未分類 ポマード状に 300 クリームチーズ 70 バター 125 ヨーグルト ... A 3回湯でこぼし 1/2 レモンの皮 みじん切りにし、Aに入れる 白くなるまで混ぜる 4 卵黄 80 砂糖 ※控え目なので調節してください（150くらいいれていいかも） ... B スイスメレンゲ？ 4 卵白 ... 焼く直前に合わせる（好みの仕上がりによって混ぜ方を調節してください） ふるいにかける 30 薄力粉 25 コーンスターチ Bに入れる 沸かないよう温める 125 牛乳 1/2 バニラ A、Bに分けて入... --- ### ガトーショコラ - Published: 2024-08-03 - Modified: 2024-08-03 - URL: https://bizlabo.site/dbrep/%e3%82%ac%e3%83%88%e3%83%bc%e3%82%b7%e3%83%a7%e3%82%b3%e3%83%a9/ - カテゴリー: 未分類 湯煎で溶かし混ぜる チョコ100バター75生クリーム50 ケンミックスで合わせる 卵白3個分グラニュー糖100 卵黄3個分グラニュー糖80 ふるっておく 薄力粉15ココアパウダー80 ダークチェリー缶適量刻む 湯銭オーブン 180℃ 45分 --- ### フィナンシェ - Published: 2024-08-03 - Modified: 2024-08-03 - URL: https://bizlabo.site/dbrep/%e3%83%95%e3%82%a3%e3%83%8a%e3%83%b3%e3%82%b7%e3%82%a7/ - カテゴリー: 未分類 薄力粉　265グラム　53グラム 粉糖　465グラム　93グラム アーモンドパウダー　150グラム　30グラム ベーキングパウダー　10グラム　2グラム 塩　1つまみ 粉糖でなくてもグラニュー糖でもいけないことはないです 卵白　500グラム　100グラム 溶かしバター　300グラム　60グラム はちみつ　スプーン2 200℃　10分　※湯煎不要 --- ### PHPでメールフォーム作成 - Published: 2024-08-03 - Modified: 2024-08-05 - URL: https://bizlabo.site/dbrep/php%e3%81%a7%e3%83%a1%e3%83%bc%e3%83%ab%e3%83%95%e3%82%a9%e3%83%bc%e3%83%a0%e4%bd%9c%e6%88%90/ - カテゴリー: PHP デモページ https://bizlabo. site/dbrep/contact-mt/index. php 作成手順 1）ローカルDocker環境でプロジェクトディレクトリ作成 project-dir ├　Dockerfile └　docker-compose. yml project-dir\Dockerfile FROM php:7. 4-apache RUN apt-get update && apt-get install -y \ libzip-dev \ zip \ && doc... --- ### 【PHP】初心者向け：PHPのGETメソッドとPOSTメソッドの違いを図解で解説 - Published: 2024-08-02 - Modified: 2024-08-02 - URL: https://bizlabo.site/dbrep/%e3%80%90php%e3%80%91/ - カテゴリー: PHP GETとPOSTの基本的な違い データの送信方法： GET：URLの一部としてデータを送信します。（クエリストストリング... ? 以降） POST：HTTP リクエストの本文（ボディ）にデータを含めて送信します。 セキュリティ： GET：URLに表示されるため、機密情報の送信には適していません。 POST：URLに表示されないため、GETよりも安全です。 データ量： GET：URLの長さ制限があるため、少量のデータに適しています。 POST：大量のデータを送信できます。 キャッシュ： GET：... --- ### 【GitHub】プルリク（プルリクエスト）流れ - Published: 2024-07-28 - Modified: 2024-07-28 - URL: https://bizlabo.site/dbrep/%e3%80%90github%e3%80%91%e3%83%97%e3%83%ab%e3%83%aa%e3%82%af%ef%bc%88%e3%83%97%e3%83%ab%e3%83%aa%e3%82%af%e3%82%a8%e3%82%b9%e3%83%88%ef%bc%89%e6%b5%81%e3%82%8c/ - カテゴリー: GitHub プルリクエストとは マージを提案し、レビューを要求するプロセスです。 場所：通常、GitHubなどのリモートプラットフォーム上で行われます。 操作：プラットフォームのインターフェースを通じて作成します。 プルリクエスト流れ 1） プルリクエスト要求元のブランチに移動し「Pull requests」→「New pull request」 2） 受け入れ側ブランチ、マージ元ブランチをプルダウンより選択→「Create pull request」 （下記は「main ブランチ（受け入れ側）に prac... --- ### GitHubのPersonal Access Tokens (Classic) - Published: 2024-07-27 - Modified: 2024-07-27 - URL: https://bizlabo.site/dbrep/github%e3%81%aepersonal-access-tokens-classic/ - カテゴリー: GitHub どんなときにPersonal Access Tokens (Classic)使用するか Git操作: HTTPSでリポジトリをクローンする際、パスワードの代わりにトークンを使用します。 API呼び出し: HTTP認証ヘッダーにトークンを含めます。 コマンドライン: curlなどのコマンドでAPIを呼び出す際にトークンを使用します。 作成手順 1） GitHubにログインし、Settings > Developer settings > Personal access tokens > Token... --- ### Gitコマンド - Published: 2024-07-25 - Modified: 2024-08-03 - URL: https://bizlabo.site/dbrep/git%e3%82%b3%e3%83%9e%e3%83%b3%e3%83%89/ - カテゴリー: GitHub Gitユーザーを確認するコマンド 現在のGitユーザーを確認するコマンドgit config user. namegit config user. emailグローバル設定を確認したい場合git config --global user. namegit config --global user. email Git設定のすべての項目を一覧表示 git config --list ユーザー名（user. name） メールアドレス（user. email） エディタ設定 カラー設定 エイリアス ... --- ### Webマーケティング初心者のための主要用語 - Published: 2024-07-25 - Modified: 2024-07-25 - URL: https://bizlabo.site/dbrep/web%e3%83%9e%e3%83%bc%e3%82%b1%e3%83%86%e3%82%a3%e3%83%b3%e3%82%b0%e5%88%9d%e5%bf%83%e8%80%85%e3%81%ae%e3%81%9f%e3%82%81%e3%81%ae%e4%b8%bb%e8%a6%81%e7%94%a8%e8%aa%9e/ - カテゴリー: 未分類 SEO (Search Engine Optimization): 検索エンジン最適化 SEM (Search Engine Marketing): 検索エンジンマーケティング PPC (Pay Per Click): クリック課金型広告 CTR (Click Through Rate): クリック率 CPA (Cost Per Acquisition): 顧客獲得単価 ROI (Return On Investment): 投資収益率 KPI (Key Performance Indicato... --- ### .sshディレクトリについて、【実践】さくらインターネットに公開鍵認証方式でssh接続 - Published: 2024-07-18 - Modified: 2024-07-27 - URL: https://bizlabo.site/dbrep/ssh%e3%83%87%e3%82%a3%e3%83%ac%e3%82%af%e3%83%88%e3%83%aa/ - カテゴリー: ssh, さくらインターネット . sshディレクトリとは . sshディレクトリは、SSHプロトコルに関連する「設定ファイル」や「鍵ファイル」を格納するためのディレクトリです。 例 . ssh ├ config ├ id-rsa ├ id-rsa. pub ├ known_hosts ├ known_hosts. old └ web_scj. pem 主に以下の重要な要素が含まれます： 秘密鍵と公開鍵：認証に使用される鍵ペア known_hostsファイル：接続したことのあるリモートホストの公開鍵を記録 configファイル... --- ### 「ローカルとさくらインターネット」をssh接続、「さくらインターネットとGitHub」をssh接続の手順 - Published: 2024-07-13 - Modified: 2024-08-25 - URL: https://bizlabo.site/dbrep/%e3%80%90%e3%81%95%e3%81%8f%e3%82%89%e3%82%a4%e3%83%b3%e3%82%bf%e3%83%bc%e3%83%8d%e3%83%83%e3%83%88%e3%80%91ssh%e6%8e%a5%e7%b6%9a%e6%89%8b%e9%a0%86/ - カテゴリー: GitHub, ssh, さくらインターネット 「ローカルとさくらインターネット」をssh接続の手順 本手順はパスワード認証方式  パスワード認証方式公開鍵認証方式手段パスワード「公開鍵」など生成したファイル安全度低いパスワード流出で第3者にログインされる恐れがあります高い作業について簡単複雑 1）Winキー + R →「CMD」と入力ターミナルを起動 2）「ssh ユーザー名@サーバー名」と入力 C:\Users\jingt>ssh shiennahare23@siennahare23. sakura. ne. jp The authent... --- ### 手動でのsitemap.xmlの作成手順 - Published: 2024-07-12 - Modified: 2024-07-12 - URL: https://bizlabo.site/dbrep/%e6%89%8b%e5%8b%95%e3%81%a7%e3%81%aesitemap-xml%e3%81%ae%e4%bd%9c%e6%88%90%e6%89%8b%e9%a0%86/ - カテゴリー: SEO そもそも「sitemap. xml」の意味 検索エンジンのクローラーにウェブサイトの構造を伝えるための重要なファイルです。その主な意味と目的は以下の通りです： サイト構造の明確化: ウェブサイト内のすべての重要なページのリストを提供します。 サイトの階層構造を明確に示します。 クローリングの効率化: 検索エンジンのクローラーがより効率的にサイトをクロールできるようにします。 新しいページや更新されたページを素早く発見できるようにします。 インデックス化の促進: 重要なページが確実に検索エンジンの... --- ### WordPressプラグイン「WPGraphQL」使用してヘッドレスCMSとして活用 - Published: 2024-07-06 - Modified: 2025-05-11 - URL: https://bizlabo.site/dbrep/graphql%e3%81%a8%e3%81%af/ - カテゴリー: Next.js, WordPress GraphQLとは GraphQLはAPIのためのクエリ言語（問い合わせ言語） 柔軟なデータ取得: クライアントが必要なデータのみを指定して取得できます。 単一エンドポイント: 複数のリソースを1回のリクエストで取得できます。 型システム: スキーマ定義により、APIの構造が明確になります。 効率的: オーバーフェッチ（過剰な取得）やアンダーフェッチを防ぎます。 進化しやすい: 既存のクエリを壊さずに新しいフィールドを追加できます。 GraphQLはRESTful APIの代替として注目されてお... --- ### Next.js"AppRouterで始めるNext.js：最新のルーティング機能を徹底解説"Next.js - Published: 2024-07-06 - Modified: 2024-08-13 - URL: https://bizlabo.site/dbrep/next-js/ - カテゴリー: Next.js プロジェクトの作成 npx create-next-app@latest . --typescript --eslint --src-dir --app --import-alias "@/*" コマンドのオプションについて 「. 」 は、現在のディレクトリにプロジェクトを作成します 通常、Next. jsプロジェクトではルートディレクトリに 「 app」 ディレクトリが直接置かれすが、「-src-dir」 オプションを使用すると、「 src」 ディレクトリ内に配置されます。→ルート階層がわかり... --- ### 【PHP】Docker環境でPHPのリダイレクトを学ぶ：初心者向けハンズオン・ガイド - Published: 2024-07-05 - Modified: 2024-07-31 - URL: https://bizlabo.site/dbrep/header/ - カテゴリー: Docker, PHP PHPのリダイレクトの重要性 PHPでのリダイレクトは、Webアプリケーション開発において非常に重要な機能です。 ユーザーを適切なページに自動的に誘導することで、スムーズなナビゲーションを提供します。 エラーページや存在しないページへのアクセスを適切に処理できます。 URLが変更された際に、古いURLから新しいURLへのリダイレクトを設定できます。 認証されていないユーザーを適切に制限されたエリアから排除できます。 フォーム送信後の適切なページへの誘導など、アプリケーションの流れを制御できます。... --- ### 【PHP】Dockerでデバッグ - Published: 2024-07-04 - Modified: 2024-09-30 - URL: https://bizlabo.site/dbrep/%e3%80%90php%e3%80%91%e3%80%8c_server%e3%80%8d/ - カテゴリー: Docker, PHP - タグ: pickup 前提条件 Docker Desktop がインストールされていること Visual Studio Code がインストールされていること VS Code の PHP Debug 拡張機能がインストールされていること 「$_SERVER」はスーパーグローバル変数 「global」の宣言無しでどこでも参照が可能です $_SERVERについて、初心者向けに説明いたします。 「$_SERVER」は連想配列 $_SERVERはウェブサーバーやリクエストに関する情報を含む連想配列です。 $_SERVER$_... --- ### WSLとは - Published: 2024-07-02 - Modified: 2024-07-06 - URL: https://bizlabo.site/dbrep/wsl%e3%81%a8%e3%81%af/ - カテゴリー: Windows WSL（Windows Subsystem for Linux） →Windows上でLinuxを使用 https://learn. microsoft. com/ja-jp/windows/wsl/install-manual --- ### npmコマンド一覧 - Published: 2024-07-02 - Modified: 2024-07-03 - URL: https://bizlabo.site/dbrep/npm%e3%82%b3%e3%83%9e%e3%83%b3%e3%83%89%e4%b8%80%e8%a6%a7/ - カテゴリー: 未分類 npm install -g パッケージをグローバルにインストール githubリポジトリからローカルにダウンロード後 --- ### 【VSCode連携】「GitHub Copilot」使い方 - Published: 2024-07-02 - Modified: 2024-07-06 - URL: https://bizlabo.site/dbrep/%e3%80%90vscode%e3%80%91%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e3%80%8cgithub-copilot-chat%e3%80%8d%e4%bd%bf%e3%81%84%e6%96%b9/ - カテゴリー: GitHub 「GitHub Copilot」の特徴 VSCodeと連携可能（その他エディターも） 「GitHub Copilot」の費用 GitHub Copilot Individual サブスクリプションは、月単位または年単位のサイクルで利用できます。 毎月の支払いサイクルを選択すると、カレンダー月ごとに 10 米国ドル が課金されます。 年単位の支払いサイクルを選択した場合、年間 100 米ドル が課金されます。 GitHub Copilot の課金https://docs. github. com/... --- ### 【VSCode】プラグイン「Git Graph」 - Published: 2024-07-02 - Modified: 2024-07-30 - URL: https://bizlabo.site/dbrep/%e3%80%90vscode%e3%80%91%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e3%80%8cgit-graph%e3%80%8d/ - カテゴリー: GitHub ブランチや履歴がビジュアルでかくにんできます。 リポジトリをクローンする GitHubで下記の通りコピー ターミナルでコピーしたコードを使用 git clone コピーしたコード ブランチの切り方 サイドの「ソース管理」のアイコンをクリックし、「View Git Graph」をクリックするとGit Graphのタブが表示されます 用語補足 origin：デフォルトのリポジトリ、リモートリポジトリ master： デフォルトのブランチの名前 rv（リビジョン）：「修正」「改訂」 【Git】ブランチ... --- ### Node.jsの開発環境をセットアップしよう！「nvm-windows」インストール手順 - Published: 2024-07-02 - Modified: 2025-06-29 - URL: https://bizlabo.site/dbrep/%e3%80%8cnvm-windows%e3%80%8d%e3%82%a4%e3%83%b3%e3%82%b9%e3%83%88%e3%83%bc%e3%83%ab%e6%89%8b%e9%a0%86/ - カテゴリー: Node.js Node. jsとは ブラウザ外でJavaScriptを動かせるようにする実行環境です 「実行環境、、って何」かというと コードが動く土台（ランタイム + OS + 周辺ツール） 実行環境 (Execution Environment) 例：Node. js、ブラウザ、JVMなど ランタイム (Runtime) ・メモリ管理 (GC) ・非同期処理 (イベントループなど) ・標準API (fs, fetch, etc) エンジン (Engine) ・ソースコード実行 (パース・JITなど) ・例... --- ### 「Docker Desktop」インストール手順、有料化について - Published: 2024-07-01 - Modified: 2024-07-06 - URL: https://bizlabo.site/dbrep/docker/ - カテゴリー: Docker 「Docker Desktop」インストール手順 「コントロールパネル」→「プログラム」→「Windowsの機能の有効化または無効化」 下記項目をチェックし有効化 再起動 docker-desktopよりインストーラーをダウンロードhttps://www. docker. com/products/docker-desktop/ Docker Desktop Installerを実行 ※インストール完了後「Close and restart」をクリックで再起動になります 再起動後下記ポップアップ... --- ### 【JavaScript】map()関数 - Published: 2024-06-29 - Modified: 2024-06-29 - URL: https://bizlabo.site/dbrep/%e3%80%90javascript%e3%80%91map%e9%96%a2%e6%95%b0/ - カテゴリー: JavaScript map関数のできること 配列の各要素に対して処理（コールバック関数）を行う 例）配列の各要素を2倍する 1）for文を使用した場合 const arry1 = ; const newArry1 = ; for(let i = 0; i < arry1. length; i++) { newArry1. push(arry1 * 2) } console. log(newArry1); 2）map関数を使用した場合 const arry2 = ; const newArry2 = arry2. m... --- ### 「Jekyll」でGithub PagesのURL一覧を生成 - Published: 2024-06-28 - Modified: 2024-06-28 - URL: https://bizlabo.site/dbrep/%e3%80%8cjekyll%e3%80%8d%e3%81%a7github-pages%e3%81%aeurl%e4%b8%80%e8%a6%a7%e3%82%92%e7%94%9f%e6%88%90/ - カテゴリー: GitHub 参考サイト Github Pagesで、ディレクトリのファイル一覧を自動生成するhttps://qiita. com/masru0714/items/f64c0081551276c16004 --- ### Rubyインストール手順（Windows） - Published: 2024-06-28 - Modified: 2024-06-28 - URL: https://bizlabo.site/dbrep/%e3%83%ab%e3%83%93%e3%83%bc%e3%82%a4%e3%83%b3%e3%82%b9%e3%83%88%e3%83%bc%e3%83%ab%e6%89%8b%e9%a0%86%ef%bc%88windows%ef%bc%89/ - カテゴリー: 未分類 Rubyインストーラーをダウンロード RubyInstallerのダウンロードページhttps://rubyinstaller. org/downloads PCのビット数を確認し、インストーラーを選択 ▽設定→システム→バージョン情報より確認できます インストーラーを実行 1）「Install for me only」をクリック 2）同意して「Next」をクリック 3）下記の設定（デフォルトのまま）「Install」をクリック 4）下記の設定（デフォルトのまま）「Next」をクリック →インス... --- ### 【ReactでFirebaseエラー】FirebaseError: Firebase: Error (auth/unauthorized-domain). - Published: 2024-06-27 - Modified: 2024-06-27 - URL: https://bizlabo.site/dbrep/%e3%80%90react%e3%81%a7firebase%e3%82%a8%e3%83%a9%e3%83%bc%e3%80%91firebaseerror-firebase-error-auth-unauthorized-domain/ - カテゴリー: React エラー内容 1）ReactプロジェクトでFirebaseの「Authentication」でユーザー認証（Googleでログイン）を実装 2）ローカルから「GitHub Pages」に公開したところ、「irebaseError: Firebase: Error (auth/unauthorized-domain). 」のエラー発生 解決方法 1）Firebaseの「Authentication」設定の「承認済みドメイン」より「ドメインの追加」をクリック 2）利用ドメインを入力（今回の場合は. g... --- ### 【Firebase】Firestoreコレクション作成手順 - Published: 2024-06-26 - Modified: 2024-06-27 - URL: https://bizlabo.site/dbrep/%e3%80%90firebase%e3%80%91firestore/ - カテゴリー: 未分類 コレクション作成手順 〇＋コレクションを開始を選択 〇「コレクションID」を入力し、「次へ」をクリック 〇「自動ID」をクリック 〇IDが付与されます、「保存」をクリック （フィールドは空欄でOK） ※フィールドはデータ 〇コレクション、ドキュメントが作成されました 参考サイト （公式ドキュメント）Cloud Firestore データモデルhttps://firebase. google. com/docs/firestore/data-model? hl=ja --- ### 【Javascript】非同期処理を書いてみよう！Promiseオブジェクト、async/await、「then()メソッド」、「catch()メソッド」とは - Published: 2024-06-26 - Modified: 2025-03-22 - URL: https://bizlabo.site/dbrep/%e3%80%90javascript%e3%80%91promise%e3%82%aa%e3%83%96%e3%82%b8%e3%82%a7%e3%82%af%e3%83%88%e3%80%81%e3%80%8cthen%e3%83%a1%e3%82%bd%e3%83%83%e3%83%89%e3%80%8d%e3%80%81%e3%80%8ccatch%e3%83%a1/ - カテゴリー: JavaScript 非同期処理とは 非同期処理とはすぐに終わらない処理を、待たずに次に進めるしくみのこと。 実行中、別のタスクを行うことができるしくみです。 非同期処理 vs 同期処理 同期処理 タスク1 タスク2（時間がかかる） タスク3 タスク2が終わるまで 全てのタスクが待つ 非同期処理 タスク1 開始 タスク3（先に進む） 実行中 タスク2の完了を待たずに 次のタスクに進む 非同期処理は制御が難しい 重い処理もユーザを待たせずほかの操作がサクサク可能となる（グーグルマップ等）メリットはあります。 デメリット... --- ### 【Googleタグマネージャー】「Page Path」で設定したが正しく発火しない - Published: 2024-06-22 - Modified: 2024-06-22 - URL: https://bizlabo.site/dbrep/google%e3%82%bf%e3%82%b0%e3%83%9e%e3%83%8d%e3%83%bc%e3%82%b8%e3%83%a3%e3%83%bcpage-path%e3%81%a7%e8%a8%ad%e5%ae%9a%e3%81%97%e3%81%9f%e3%81%8c%e6%ad%a3%e3%81%97%e3%81%8f%e7%99%ba%e7%81%ab%e3%81%97/ - カテゴリー: Google Analytics, Google Tag Manager, SEO ▽タグを作成したが発火しない トリガーの設定は「Page Path」 トリガーの設定は「Page Path」で「含む」です。 パスはドメインの後ろの文字列です 「パス（/○○/）」の文字も間違いなく、サイトと一致しているのにもかかわらず発火しない 発火しない理由 「パス（/○○/）」に全角文字が含まれているからかと思われます。 ▽WordPressパーマリンク設定で投稿名にチェックしているため、記事タイトルを日本語で書くと日本語パーマリンクになります 日本語パーマリンクの注意点 日本語パーマリン... --- ### 【WordPressエラー】「Warning: Undefined variable $post in …」「Warning: Attempt to read property "ID" on null in …」 - Published: 2024-06-22 - Modified: 2024-06-22 - URL: https://bizlabo.site/dbrep/%e3%80%90wordpress%e3%82%a8%e3%83%a9%e3%83%bc%e3%80%91%e3%80%8cattempt-to-read-property-id-on-null%e3%80%8d/ - カテゴリー: WordPress PHP7. 3からPHP8. 0に変更がありWordPressでエラーメッセージが発生しました。 表題のエラーがPHP8. 0より通知ではなく、独立エラーとして扱われるようになった為です エラー内容 「get_the_terms」記事に基づくタクソノミーの取得のための下記の記述でエラー発生 Warning: Undefined variable $post in ... Warning: Attempt to read property "ID" on null in ... （解決策）変数を定... --- ### 「Advanced Custom Fields」の内容を自動でタイトルに反映させたい - Published: 2024-06-21 - Modified: 2024-06-21 - URL: https://bizlabo.site/dbrep/%e3%80%8cadvanced-custom-fields%e3%80%8d%e3%81%ae%e5%86%85%e5%ae%b9%e3%82%92%e8%87%aa%e5%8b%95%e3%81%a7%e3%82%bf%e3%82%a4%e3%83%88%e3%83%ab%e3%81%ab%e5%8f%8d%e6%98%a0%e3%81%95%e3%81%9b%e3%81%9f/ - カテゴリー: WordPress カスタムフィールドの値を自動でタイトルに反映させたい ▽投稿画面の編集項目をカスタムフィールドの値のみ（お知らせ内容のテキスト）にしています。 ▽タイトルがないので、（タイトルなし）となります。そこで「カスタムフィールドの値を自動でタイトルに反映させたい」ということになりました。 functions. phpを編集 // wordpressでタイトルを空白で投稿した時に、自動的にタイトルを挿入する // https://teratail. com/questions/38598 add_acti... --- ### 【Javascript】コールバック関数とは - Published: 2024-06-20 - Modified: 2024-06-29 - URL: https://bizlabo.site/dbrep/%e3%80%90javascript%e3%80%91%e3%82%b3%e3%83%bc%e3%83%ab%e3%83%90%e3%83%83%e3%82%af%e9%96%a2%e6%95%b0%e3%81%a8%e3%81%af/ - カテゴリー: JavaScript コールバック関数とは コールバック関数とは親関数の引数に渡される関数のことを指します 「非同期処理」、「イベントハンドリング」などが可能に 〇単純なコールバック関数の使用例 // コールバック関数を定義 const cb = => { console. log('こちらは具体的な内容です'); }; // 親関数を定義 const sentence = (callback) => { console. log('まず一般的な内容です'); callback; }; // cbをコールバック関数と... --- ### 【React】useContext - Published: 2024-06-20 - Modified: 2024-06-20 - URL: https://bizlabo.site/dbrep/%e3%80%90react%e3%80%91usecontext/ - カテゴリー: JavaScript, React propsを利用せずに異なるコンポーネントにデータを共有できる→propsのバケツリレーを防ぐ 参考サイト 【React】useContextの使い方https://qiita. com/knm/items/69a4c6bf916a2d1ca9dd --- ### 【React】useCallbackの使い方 - Published: 2024-06-18 - Modified: 2024-10-15 - URL: https://bizlabo.site/dbrep/%e3%80%90react%e3%80%91usecallback%e3%81%ae%e4%bd%bf%e3%81%84%e6%96%b9/ - カテゴリー: JavaScript, React 使い方 useCallback は関数の定義と一緒に使用します。 const memoizedFunction = useCallback( => { // 関数の本体 }, ); useCallback は2つの引数を取ります: 第1引数: メモ化（記憶）したい関数 第2引数: 依存配列（この配列の値が変わったときだけ、関数が再作成されます） 通常の関数定義 再レンダリングごとに 新しい関数が作成される 関数 ver. 1 関数 ver. 2 useCallback 一度作成された関数が 再利... --- ### useHistoryの使い方 - Published: 2024-06-18 - Modified: 2024-06-18 - URL: https://bizlabo.site/dbrep/usehistory%e3%81%ae%e4%bd%bf%e3%81%84%e6%96%b9/ - カテゴリー: React useHistoryの使い方 import { useHistory } from "react-router-dom"; // 1. useHistoryを宣言 const history = useHistory; // 2. pushメソッドにURLを指定 const onClickHome = => history. push("/home"); return ( Go home ); } ※push　... 　配列に要素を追加 参考サイト 【react-router-dom】ページ遷移... --- ### 【illustrator】文字部分にエンベロープを作成 - Published: 2024-06-18 - Modified: 2024-11-24 - URL: https://bizlabo.site/dbrep/%e3%80%90illustrator%e3%80%91%e6%96%87%e5%ad%97%e9%83%a8%e5%88%86%e3%81%ab%e3%82%a8%e3%83%b3%e3%83%99%e3%83%ad%e3%83%bc%e3%83%97%e3%82%92%e4%bd%9c%e6%88%90/ - カテゴリー: Illustrator 1）対象の「テイストオブジェクト」と「エンベロープオブジェクト」を選択 ※エンベロープオブジェクトを最前面に配置 2）「オブジェクト」→「エンベロープ」→「最前面のオブジェクトで作成」をクリック 3）完成 --- ### chakra - Published: 2024-06-17 - Modified: 2024-06-18 - URL: https://bizlabo.site/dbrep/chakra/ - カテゴリー: React インストールと導入 Installation - Chakra UIhttps://v2. chakra-ui. com/getting-started 上記サイトから下記コードをコピー npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion ▽ターミナルで上記コードを実行するとpackage. jsonでインストールされたことが確認できます "dependencies": { "@chakra-ui/react":... --- ### 【JavaScript】let、var、constの違い - Published: 2024-06-16 - Modified: 2024-06-17 - URL: https://bizlabo.site/dbrep/%e3%80%90javascript%e3%80%91let%e3%80%81var%e3%80%81const%e3%81%ae%e9%81%95%e3%81%84/ - カテゴリー: JavaScript letconstvar再宣言不可不可可再代入可不可可スコープブロックスコープブロックスコープ関数スコープ繰り返し構文可不可可 「var」について 基本的には使用しない 意図しない変数の書き換えが起きるリスクがあります 「const」 基本は「const」で宣言 再代入も再宣言もできない定数とする場合に使用 「let」 再代入が必要なとき「let」を使用 参考サイト 【JavaScriptの基本】letとconstの使い分けhttps://tcd-theme. com/2021/04/javasc... --- ### 【生成AI】【illustrator】テキストからベクター生成の使い方（バージョン28.0～新機能） - Published: 2024-06-14 - Modified: 2024-11-24 - URL: https://bizlabo.site/dbrep/%e3%80%90%e7%94%9f%e6%88%90ai%e3%80%91%e3%80%90illustrator%e3%80%91%e3%83%86%e3%82%ad%e3%82%b9%e3%83%88%e3%81%8b%e3%82%89%e3%83%99%e3%82%af%e3%82%bf%e3%83%bc%e7%94%9f%e6%88%90%e3%81%ae%e4%bd%bf/ - カテゴリー: Illustrator テキストからベクター生成の使い方 ▽長方形ツールで表示させたい場所に作成 ▽「ウィンドウ」→「プロパティ」をクリックするとプロパティ、「テキストからベクター生成（Beta）」が表示されます ▽プロンプトに生成したい画像の検索ワードを入力するとバリエーションが表示されます 似たようなテイストのイラストを作成する方法 ▽「参照アセット」を有効化し「ピッカー」をクリックし似たテイストにしたい画像を選択→「生成（Beta）」をクリック 参考サイト 【イラレの生成AI】 テキストからベクター作成の使い方【... --- ### 「Github Page」にReactを公開する方法 - Published: 2024-06-12 - Modified: 2024-06-29 - URL: https://bizlabo.site/dbrep/%e3%80%8cgithub-page%e3%80%8d%e3%81%abreact%e3%82%92%e5%85%ac%e9%96%8b%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95/ - カテゴリー: GitHub, JavaScript, React 1）Reactプロジェクトを作成 npx create-react-app app-dir 2）Branchの発行し、GitHubのリポジトリを作成 VS Codeの場合「Branchの発行」をクリックしリポジトリ名を入力する 3）Reactアプリのビルド npm run build →buildディレクトリが作成されます 4）gh-pagesをインストール Reactアプリを簡単にデプロイできる「gh-pages」ツールをインストール npm install --save gh-pages p... --- ### 【GitHub】VSCodeからプッシュする方法 - Published: 2024-06-12 - Modified: 2024-07-25 - URL: https://bizlabo.site/dbrep/%e3%80%90github%e3%80%91vscode%e3%81%8b%e3%82%89%e3%83%97%e3%83%83%e3%82%b7%e3%83%a5%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95/ - カテゴリー: GitHub そもそもプッシュとは ローカルリポジトリの変更をリモートリポジトリに反映させること 新規フォルダを作成、VSCodeで開く 新規フォルダを作成し、VSCodeで開きます 配下にindex. htmlを作成 ローカルリポジトリを作成 ▽「ソース管理」→「リポジトリを初期化する」をクリック ▽「リポジトリを初期化する」をクリックすると下記の画面 変更したファイル ファイルの状態「U」... add前のファイル 変更した内容を「add」 そもそも「add」とは 変更内容をバージョン管理の対象として追加... --- ### GitHubに無料でWebサイト公開する方法 - Published: 2024-06-09 - Modified: 2024-06-09 - URL: https://bizlabo.site/dbrep/github%e3%81%ab%e7%84%a1%e6%96%99%e3%81%a7web%e3%82%b5%e3%82%a4%e3%83%88%e5%85%ac%e9%96%8b%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95/ - カテゴリー: GitHub 1）アカウント作成、ログイン 下記URLよりアカウント作成後、GitHubにログインhttps://github. com 2）リポジトリ作成 画面右上の「＋」マークから「New repositoriy」をクリック リポジトリ名を決める リポジトリ名でURLが決まります 1. アカウント名. github. iohttps://アカウント名. github. io2. 1. 以外のリポジトリ名https://アカウント名. github. io/リポジトリ名 ▽今回はURLがシンプルになるので、... --- ### gulpでSassをコンパイルする方法 - Published: 2024-06-09 - Modified: 2024-06-09 - URL: https://bizlabo.site/dbrep/gulp%e3%81%a7sass%e3%82%92%e3%82%b3%e3%83%b3%e3%83%91%e3%82%a4%e3%83%ab%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95/ - カテゴリー: CSS, JavaScript, Node.js 参考サイト https://digitalidentity. co. jp/blog/creative/gulp. html --- ### 【SWELL】サイドバーの幅を変更する方法 - Published: 2024-06-09 - Modified: 2024-06-09 - URL: https://bizlabo.site/dbrep/%e3%80%90swell%e3%80%91%e3%82%b5%e3%82%a4%e3%83%89%e3%83%90%e3%83%bc%e3%81%ae%e5%b9%85%e3%82%92%e5%a4%89%e6%9b%b4%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95/ - カテゴリー: CSS, SWELL, WordPress 下記のようにサイドバーを狭くしたもしくは、サイドバーを広くしたい場合 ▽CSSに下記の通り記述 /* サイドバーの横幅調整 */ /* 横幅「250px」の場合 */ @media (min-width: 960px) { . -sidebar-on #sidebar { width: 250px; } . -sidebar-on . l-mainContent { width: calc(100% - 250px - var(--swl-sidebar_margin)); } } --- ### 【illustrator】初心者向けのポイント ショートカット - Published: 2024-06-07 - Modified: 2024-11-24 - URL: https://bizlabo.site/dbrep/illustrator/ - カテゴリー: Illustrator ショートカット 基本操作 画面の中央にペーストCtrl + Pコピーしたオブジェクトと同じ場所の「手前」、「背面」に張り付けCtrl + F、Ctrl + B画面サイズに拡大Ctrl + 0重ね順を前面へShift + ]重ね順を最前面へCtrl + Shift + ]重ね順を背面へShift + [重ね順最を背面へCtrl + Shift + [カラーを初期設定にD ツール選択 ダイレクト選択ツールa 選択ツールv押している間だけ選択ツールCtrl押している間だけ手のひらツールSpaceスポイ... --- ### 【JavaScript】スプレッド構文 「3つのドット “...”」 - Published: 2024-06-07 - Modified: 2024-06-07 - URL: https://bizlabo.site/dbrep/%e3%80%90javascript%e3%80%91%e3%82%b9%e3%83%97%e3%83%ac%e3%83%83%e3%83%89%e6%a7%8b%e6%96%87-%e3%80%8c3%e3%81%a4%e3%81%ae%e3%83%89%e3%83%83%e3%83%88-%e3%80%8d/ - カテゴリー: JavaScript 配列の展開 const arr1 = ; console. log(arr1); console. log(... arr1); // // 1 2 使用例）1ずつ増えていく整数の配列「」 const arr = ; console. log(arr); // (10) 参考サイト： はやめた方がいいのでは？https://zenn. dev/uhyo/articles/array-n-keys-yamero 配列の連結 const arr2 = ; const = arr2; console.... --- ### Custom Post Type UI - Published: 2024-06-06 - Modified: 2024-06-06 - URL: https://bizlabo.site/dbrep/custom-post-type-ui/ - カテゴリー: SWELL, WordPress 編集画面で作成したタクソノミーのチェックボックスで選択できるようにしたい ▽設定より階層を「True」を選択すると表示されました カスタム投稿タイプの記事一覧を表示 ▽SWELLの場合投稿リストブロックを選択 ▽投稿タイプで絞り込むより設定できました --- ### React Router導入&事前準備 useLocation - Published: 2024-06-04 - Modified: 2024-06-18 - URL: https://bizlabo.site/dbrep/react-router%e5%b0%8e%e5%85%a5%e4%ba%8b%e5%89%8d%e6%ba%96%e5%82%99/ - カテゴリー: JavaScript, React react-router-dom をインストールする npm install react-router-dom 参考サイト：React】react-router-domの使い方https://zenn. dev/yurarin/articles/8369bfe666bff0 を記述した時にエラーが発生 export 'Switch' (imported as 'Switch') was not found in 'react-router-dom' 下記の通り記述したところ、画像のエラー発生 i... --- ### 【JavaScript】function(e)の「e」とは？ - Published: 2024-06-03 - Modified: 2025-04-17 - URL: https://bizlabo.site/dbrep/%e3%80%90javascript%e3%80%91functione%e3%81%ae%e3%80%8ce%e3%80%8d%e3%81%a8%e3%81%af%ef%bc%9f/ - カテゴリー: JavaScript function(e)の「e」とは イベントオブジェクトのこと ↓イベントオブジェクトの内容はイベントの情報です プロパティtargetイベントの発生元typeイベントの型 console. log(e)で確認してみる ボタンをクリックするときの「e」 const btn = document. querySelector(". btn"); btn. addEventListener("click", (e) => { console. log(e); }); btn const btn = ... --- ### 【JavaScript】分割代入 - Published: 2024-06-03 - Modified: 2024-06-03 - URL: https://bizlabo.site/dbrep/%e3%80%90javascript%e3%80%91%e5%88%86%e5%89%b2%e4%bb%a3%e5%85%a5/ - カテゴリー: JavaScript 分割代入とは 1）オブジェクト、配列を宣言 2）要素、プロパティそれぞれの値を変数に定義（分割代入） 3）2）で定義した変数を利用 オブジェクトのプロパティの分割代入 const myProfile = { name: "okada", age: "36" }; // 変数に分解 const { name, age } = myProfile; console. log("名前は" + name + "年齢は" + age); // 出力結果→ 1 2 3 配列の要素の分割代入 取り出すときの変... --- ### 【初心者】ReactのPropsとは - Published: 2024-06-03 - Modified: 2024-06-03 - URL: https://bizlabo.site/dbrep/%e3%80%90%e5%88%9d%e5%bf%83%e8%80%85%e3%80%91react%e3%81%aeprops%e3%81%a8%e3%81%af/ - カテゴリー: JavaScript, React Propsとは 親コンポーネントから子コンポーネントに渡す値 子コンポーネントが動的に変化→一つの子コンポーネントが再利用できる ▼親コンポーネント import { ColorfulMessage } from ". /components/ColorfulMessage"; export const App = => { return ; }; export default App; ▼子コンポーネント export const ColorfulMessage = (props) => { ... --- ### 【JavaScript】アロー関数の定義の仕方 - Published: 2024-06-03 - Modified: 2024-06-03 - URL: https://bizlabo.site/dbrep/%e3%80%90javascript%e3%80%91%e3%82%a2%e3%83%ad%e3%83%bc%e9%96%a2%e6%95%b0%e3%81%ae%e5%ae%9a%e7%be%a9%e3%81%ae%e4%bb%95%e6%96%b9/ - カテゴリー: JavaScript, React アロー関数とは 従来の関数定義を簡略化した書き方です ▼従来 function func1(str) { console. log(str); } func1("func1です"); ▼アロー関数 const func2 = (str) => { console. log(str); } func2("func2です"); アロー関数特有のルール 引数が一つの場合、が省略できます const func2 = (str) => { console. log(str); } ▼省略 const fu... --- ### CSSでよくある記述まとめ - Published: 2024-06-01 - Modified: 2024-06-01 - URL: https://bizlabo.site/dbrep/css%e3%81%a7%e3%82%88%e3%81%8f%e3%81%82%e3%82%8b%e8%a8%98%e8%bf%b0%e3%81%be%e3%81%a8%e3%82%81/ - カテゴリー: CSS @charset “UTF-8”; @charset "UTF-8"; この表記によりhtmlやcssがどの文字コードで書かれているかをブラウザが判断（文字化けを防ぐ）→現在はブラウザ自動で判断することから、不要論もあります。 カスタムプロパティ（CSS変数） ハイフン2つ「--」を頭文字につけて定義します :root { --primary-color: #45CCC4; --red: #EB4E45; --blue: #0158A8; --bg-color: #ECFCFB; --text-... --- ### 【初心者】WordPressでjQuery使用するときの注意「Uncaught TypeError: $ is not a function」 - Published: 2024-06-01 - Modified: 2024-06-01 - URL: https://bizlabo.site/dbrep/wordpress%e3%81%a7jquery%e4%bd%bf%e7%94%a8%e3%81%99%e3%82%8b%e3%81%a8%e3%81%8d%e3%81%ae%e6%b3%a8%e6%84%8f%e3%80%8cuncaught-typeerror-is-not-a-function%e3%80%8d/ - カテゴリー: jQuery, WordPress Uncaught TypeError: $ is not a function WordPressでjQueryを使用し「Uncaught TypeError: $ is not a function」と表示され、処理がされないとなりました。 そもそも「$(function{})」とは 「$(function{})」の記述によって中の処理はHTMLを読み込んでから実行されます →この記述がないとHTMLの指定を含まれるjQueryのプログラムでエラーとなります 「Uncaught TypeErr... --- ### Googleサーチコンソール権限を付与 - Published: 2024-05-30 - Modified: 2024-06-03 - URL: https://bizlabo.site/dbrep/google%e3%82%b5%e3%83%bc%e3%83%81%e3%82%b3%e3%83%b3%e3%82%bd%e3%83%bc%e3%83%ab%e6%a8%a9%e9%99%90%e3%82%92%e4%bb%98%e4%b8%8e/ - カテゴリー: Google Search Console, SEO 権限付与手順 ▼Googleサーチコンソールで該当ドメインを選択 ▼「設定」→「ユーザーと権限をクリック」 ▼ユーザー一覧が表示されます、「ユーザーを追加」をクリック ▼ユーザーを追加とモーダルが表示されるので、付与先のメールアドレスと権限を設定し「追加」をクリック ▼委任者に通知メールが届きます ※権限が所有者の場合、所有者の確認を実施することで「委任された所有者」から「確認済みの所有者」となります。 参考サイト https://digitalidentity. co. jp/blog/seo... --- ### ネームサーバーをLOLIPOPに設定していて、DNSレコード設定がしたい場合（Googleサーチコンソールのプロパティの確認で必要） - Published: 2024-05-30 - Modified: 2024-05-30 - URL: https://bizlabo.site/dbrep/%e3%83%8d%e3%83%bc%e3%83%a0%e3%82%b5%e3%83%bc%e3%83%90%e3%83%bc%e3%82%92lolipop%e3%81%ab%e8%a8%ad%e5%ae%9a%e3%81%97%e3%81%a6%e3%81%84%e3%81%a6%e3%80%81dns%e3%83%ac%e3%82%b3%e3%83%bc%e3%83%89%e8%a8%ad/ - カテゴリー: Google Search Console, LOLIPOP, SEO Googleサーチコンソールでプロパティを追加する際にプロパティタイプをドメインを選択した場合、DNSレコードの確認が必要になります。（↓所有権の証明） そこでDNSレコードの設定をすることになるのですが、LOLIPOPではできません。 ですが、LOLIPOPのサーバー契約のまま（サイトの表示等のサービスを利用）DNSレコードの設定をする方法がありますので、本記事投稿しました。 やや複雑な手順で、DNSレコードの意味や、各サーバー、ドメイン会社の特徴を理解しておく必要があります。 ネームサーバー... --- ### 【Googleサーチコンソール】プロパティタイプ「ドメイン」と「URLプレフィックス」違い - Published: 2024-05-30 - Modified: 2024-05-30 - URL: https://bizlabo.site/dbrep/%e3%83%97%e3%83%ad%e3%83%91%e3%83%86%e3%82%a3%e3%82%bf%e3%82%a4%e3%83%97%e3%80%8curl%e3%83%97%e3%83%ac%e3%83%95%e3%82%a3%e3%83%83%e3%82%af%e3%82%b9%e3%80%8d/ - カテゴリー: Google Search Console 「ドメイン」と「URLプレフィックス」の2種類のプロパティタイプ Googleサーチコンソールでプロパティを追加する場合「ドメイン」と「URLプレフィックス」の2種類のプロパティタイプがあります。 それぞれの特徴は下記の通り プロパティタイプが「ドメイン」 wwwあり/なし、http/https、サブドメイン、すべてのドメインを1つのプロパティで確認できる https://ntorelabo. com/（httpsでwwwあり） http://www. ntorelabo. com/（httpで... --- ### Windows に Yarn をインストールする方法（インストーラ） - Published: 2024-05-30 - Modified: 2024-05-30 - URL: https://bizlabo.site/dbrep/780-2/ - カテゴリー: 未分類 下記サイトよりインストーラをダウンロード インストールhttps://chore-update--yarnpkg. netlify. app/ja/docs/install ダウンロードしたインストーラを実行する Next チェックNext Next Install 1～2分後 Finish --- ### 【初心者】Reactのスタイルのあて方 - Published: 2024-05-29 - Modified: 2024-06-04 - URL: https://bizlabo.site/dbrep/%e3%80%90%e5%88%9d%e5%bf%83%e8%80%85%e3%80%91react%e3%81%ae%e3%82%b9%e3%82%bf%e3%82%a4%e3%83%ab%e3%81%ae%e3%81%82%e3%81%a6%e6%96%b9/ - カテゴリー: CSS, React Inline Style export const App = => { return ( こんにちは ); }; 波カッコの一つはJavaScriptの記述のため、中の波カッコはオブジェクト colorというプロパティの値は文字列でないといけないので値の部分は""で囲みます 変数として用意する書き方 export const App = => { const contentStyle = { color: "red" }; return ( こんにちは ); }; 注意 CSSと違いfont-... --- ### 【初心者】Reactのイベント処理の書き方 - Published: 2024-05-29 - Modified: 2024-06-03 - URL: https://bizlabo.site/dbrep/%e3%80%90%e5%88%9d%e5%bf%83%e8%80%85%e3%80%91react%e3%81%ae%e3%82%a4%e3%83%99%e3%83%b3%e3%83%88%e5%87%a6%e7%90%86%e3%81%ae%e6%9b%b8%e3%81%8d%e6%96%b9/ - カテゴリー: JavaScript, React HTMLとの違い 例）クリックするとアラートがでるボタン const buttonAlert = => { alert; } ボタン ▼HTML const buttonAlert = => { alert; } ボタン ▼React const App = => { const buttonAlert = => { alert; } return( ボタン ); } ※=以降なみカッコで囲むとJavaScriptと認識されます Reactのイベント処理の特徴 camelCase 関数 --- ### fast-forwardマージとは【Git】 - Published: 2024-05-29 - Modified: 2024-10-13 - URL: https://bizlabo.site/dbrep/fast-forward%e3%83%9e%e3%83%bc%e3%82%b8/ - カテゴリー: GitHub - タグ: pickup Fast-Forwardマージのしくみ Fast-Forwardマージが起こる条件： メインブランチが、分岐したブランチを作った時点から全く変更されていない場合。 Fast-Forwardマージの動作： 新しいマージコミットを作らない。 代わりに、メインブランチの位置を単純に前に進める（Fast-Forward）。 ブランチがマージされたという情報が履歴に残りません。 Normal Merge main feature Merge commit Fast-Forward Merge main (... --- ### 【React】useState（デモコンポーネント：続きを読むボタン） - Published: 2024-05-29 - Modified: 2024-10-26 - URL: https://bizlabo.site/dbrep/%e3%80%90react%e3%80%91usestate/ - カテゴリー: JavaScript, React - タグ: pickup Stateの概念とは それぞれのコンポーネントが持っている状態です。 例 エラーがあるのか、ないのか モーダルが開いているのか、いないのか ユーザーが入力した内容 React Component useState State setState Read Update Trigger Re-render useStateの使い方 1）「useState」をインポート 「React」からフック「useState」をインポートします import { useState } from "react"; ... --- ### SSL化済のサイトなのに検索結果にhttpsとならない - Published: 2024-05-29 - Modified: 2024-05-29 - URL: https://bizlabo.site/dbrep/ssl%e5%8c%96%e6%b8%88%e3%81%ae%e3%82%b5%e3%82%a4%e3%83%88%e3%81%aa%e3%81%ae%e3%81%ab%e6%a4%9c%e7%b4%a2%e7%b5%90%e6%9e%9c%e3%81%abhttps%e3%81%a8%e3%81%aa%e3%82%89%e3%81%aa%e3%81%84/ - カテゴリー: SEO 参考サイト SSL化について質問です。 Googleで検索した直後の一覧ではhttp表示なのですが、サイトに移行するとhttps化に成功しています。 検索直後の一覧でもhttps表示させたいのですが、どのようにしたら良いでしょうかhttps://detail. chiebukuro. yahoo. co. jp/qa/question_detail/q11257939911 【SSL化が反映されない】検索結果にhttp:~と表示される原因と対処法https://tetsuooo. net/it/... --- ### 【お名前.com】Googleサーチコンソールで「所有権を証明できませんでした」の対応 - Published: 2024-05-28 - Modified: 2024-05-30 - URL: https://bizlabo.site/dbrep/%e3%80%90%e3%81%8a%e5%90%8d%e5%89%8d-com%e3%80%91google%e3%82%b5%e3%83%bc%e3%83%81%e3%82%b3%e3%83%b3%e3%82%bd%e3%83%bc%e3%83%ab%e3%81%a7%e3%80%8c%e6%89%80%e6%9c%89%e6%a8%a9%e3%82%92%e8%a8%bc%e6%98%8e/ - カテゴリー: Google Search Console 起きていること ▼Googleサーチコンソールでプロパティを追加する際、下記の通り 対応方法 ▼お名前ドットコムにログインしドメイン設定を選択 ▼「DNS設定/転送設定」を選択 ▼該当ドメイン選択後、次へクリック ▼DNSレコード設定を利用するの「設定する」をクリック ▼下記表のとおり各欄を入力後、追加をクリック ホスト名TYPETTLVALUE優先状態空白(所有権の証明を行うドメイン名)TXT3600google-site-verification=**********(※Google管理コン... --- ### Xserverドメインで取得した独自ドメインをロリポップで使用 - Published: 2024-05-22 - Modified: 2024-05-28 - URL: https://bizlabo.site/dbrep/xserver%e3%83%89%e3%83%a1%e3%82%a4%e3%83%b3%e3%81%a7%e5%8f%96%e5%be%97%e3%81%97%e3%81%9f%e7%8b%ac%e8%87%aa%e3%83%89%e3%83%a1%e3%82%a4%e3%83%b3%e3%82%92%e3%83%ad%e3%83%aa%e3%83%9d%e3%83%83%e3%83%97/ - カテゴリー: LOLIPOP 手順 ▼Xserverレンタルサーバの管理画面にログインし対象のドメインを選択 ▼ドメインの契約情報のネームサーバー設定の「設定変更」を選択 ▼その他のサービスで利用するを選択しネームサーバー1、ネームサーバー2に下記の通り入力 ネームサーバー1uns01. lolipop. jpネームサーバー2uns02. lolipop. jp 確認画面へ進むをクリック ▼「設定を変更する」をクリック ▼ロリポップユーザー専用画面にて 公開（アップロード）フォルダについては複数のドメインを運用する場合は必ず... --- ### ロリポップ設定 - Published: 2024-05-22 - Modified: 2024-05-24 - URL: https://bizlabo.site/dbrep/%e3%83%ad%e3%83%aa%e3%83%9d%e3%83%83%e3%83%97/ - カテゴリー: LOLIPOP ロリポップ初期の構成 最初に配置されているファイルはwelcome. htmlのみ クライアント様環境 WordPressインストール履歴 構成ファイル wp . htaccess index. php sitemap. xml welcome. html index. php --- ### Reactプロジェクト作成方法 - Published: 2024-05-20 - Modified: 2024-05-30 - URL: https://bizlabo.site/dbrep/react%e3%83%97%e3%83%ad%e3%82%b8%e3%82%a7%e3%82%af%e3%83%88%e4%bd%9c%e6%88%90%e6%96%b9%e6%b3%95/ - カテゴリー: React 作業ディレクトリを作成 作成したディレクトリをVSCodeでひらきます Node. jsをインストールする 下記コマンドでバージョン確認ができればインストール済みです node -v Reactのひな型作成 npx create-react-app プロジェクト名 ↓Happy hacking! の表示が確認できればReactのひな型完成 プロジェクトディレクトリ内でVSCodeをひらきます cd プロジェクト名 code . 構成ファイルについて \package. json ▼scripts... --- ### Googleタグマネージャーで好きな地点までのスクロール計測 - Published: 2024-05-19 - Modified: 2024-05-21 - URL: https://bizlabo.site/dbrep/google%e3%82%bf%e3%82%b0%e3%83%9e%e3%83%8d%e3%83%bc%e3%82%b8%e3%83%a3%e3%83%bc%e3%81%a7%e5%a5%bd%e3%81%8d%e3%81%aa%e5%9c%b0%e7%82%b9%e3%81%be%e3%81%a7%e3%81%ae%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc/ - カテゴリー: Google Tag Manager chrome拡張機能「Page Percentizer」 10%刻みで線を引くことができます https://chromewebstore. google. com/detail/page-percentizer/dlgollejhdkimfihhhlocjpbdjgkffij Googleタグマネージャーでイベントの設定 変数設定 ▼Googleタグマネージャーの「変数」から組み込み変数の設定を選択し「Scroll Depth Threshold」を追加 タグの設定 名前：スクロール タグの種... --- ### Looker Studio使用法 - Published: 2024-05-17 - Modified: 2024-05-18 - URL: https://bizlabo.site/dbrep/looker-studio/ - カテゴリー: Google Analytics Looker Studioとは 無料のダッシュボードツールです Googleアナリティクスのイベントを可視化できます GA4のレポート探索より自由度が高く定点観測がしやすいです Looker Studioのアカウント作成方法 https://cloud. google. com/looker-studio? hl=ja ▼上記リンクより使ってみるを選択 ▼始めて使用する場合レポートを選択するとアカウント作成の画面になります 国、会社名（任意）を設定 GA4で使用しているGoogleアカウントにロ... --- ### 【Googleタグマネージャー】バナー表示イベント - Published: 2024-05-17 - Modified: 2024-05-17 - URL: https://bizlabo.site/dbrep/%e3%80%90google%e3%82%bf%e3%82%b0%e3%83%9e%e3%83%8d%e3%83%bc%e3%82%b8%e3%83%a3%e3%83%bc%e3%80%91%e3%83%90%e3%83%8a%e3%83%bc%e8%a1%a8%e7%a4%ba%e3%82%a4%e3%83%99%e3%83%b3%e3%83%88/ - カテゴリー: Google Tag Manager バナークリックイベントの作成 ↓ページ下部のようなIDが付与されているバナーの表示イベントを考えます。 ▼Googleタグマネージャーの変数より【Click Element】があるか確認、なければ追加します タグの作成 下記記事のボタンAクリックをコピーして作成します https://ntorelabo. com/? p=11193 ▼コピーした内容のイベント名を記事中バナークリック、イベントパラメータのcta_idの値を取得したIDに変更します トリガーの作成 ▼コピーした内容のイベント名を記... --- ### 【CSS】「grid」便利な使い方、flexボックスでjustify-content: center;だけど子要素は左寄せにしたい場合 - Published: 2024-05-16 - Modified: 2024-06-06 - URL: https://bizlabo.site/dbrep/%e3%80%90css%e3%80%91flex%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%81%a7justify-content-center%e3%81%a0%e3%81%91%e3%81%a9%e5%ad%90%e8%a6%81%e7%b4%a0%e3%81%af%e5%b7%a6%e5%af%84%e3%81%9b%e3%81%ab/ - カテゴリー: CSS ↑下の行を左寄せにしたい display: grid; display: flex;ではなくdisplay: grid;にする . grid { display: grid; grid-template-columns: repeat(auto-fit, 80px); justify-content: center; max-width: 400px; grid-gap: 30px; background: #f2f2f2; padding: 8px; } レスポンシブデザインを再現grid-t... --- ### 【GA4】キーイベント（コンバージョンイベント）の登録 - Published: 2024-05-16 - Modified: 2024-05-16 - URL: https://bizlabo.site/dbrep/%e3%80%90ga4%e3%80%91%e3%82%ad%e3%83%bc%e3%82%a4%e3%83%99%e3%83%b3%e3%83%88%ef%bc%88%e3%82%b3%e3%83%b3%e3%83%90%e3%83%bc%e3%82%b8%e3%83%a7%e3%83%b3%e3%82%a4%e3%83%99%e3%83%b3%e3%83%88%ef%bc%89/ - カテゴリー: Google Analytics, Google Tag Manager ※アナリティクスのコンバージョンは、キーイベントという名前に変更されました。 方法（1）キーイベントから設定 ▼データの表示からキーイベントを選択 ▼新しいキーイベントでイベント名を入力（GTMからコピー）して保存する 方法（2）イベントから設定 ▼イベントを選択して、チェックボックスでオンオフを設定できます カウント方法の変更 各イベントの右の3点アイコンでカウント方法の変更が可能です --- ### 【Google Tag Manager】サンクスページ到達イベントの作成 - Published: 2024-05-16 - Modified: 2024-05-16 - URL: https://bizlabo.site/dbrep/%e3%80%90google-tag-manager%e3%80%91%e3%82%b5%e3%83%b3%e3%82%af%e3%82%b9%e3%83%9a%e3%83%bc%e3%82%b8%e5%88%b0%e9%81%94%e3%82%a4%e3%83%99%e3%83%b3%e3%83%88%e3%81%ae%e4%bd%9c%e6%88%90/ - カテゴリー: Google Tag Manager 準備 今回はプラグイン「コンタクトフォーム7」でフォームを作成、サンクスページを下記記事参考で作成しました https://wpmake. jp/contents/plugin/contact-form7/thanks-page タグの作成 ▼サイドメニューのタグを選択し新規をクリック ▼タグの設定を下記の通り行います タグの名前：問い合わせ完了 タグの種類：Google アナリティクス: GA4 イベント 測定ID：GA4測定ID（GA4測定IDで変数に登録済みのものを使用） イベント名：ge... --- ### 設定したイベントをGA4の探索で見る方法 - Published: 2024-05-16 - Modified: 2024-05-16 - URL: https://bizlabo.site/dbrep/%e8%a8%ad%e5%ae%9a%e3%81%97%e3%81%9f%e3%82%a4%e3%83%99%e3%83%b3%e3%83%88%e3%82%92ga4%e3%81%ae%e6%8e%a2%e7%b4%a2%e3%81%a7%e8%a6%8b%e3%82%8b%e6%96%b9%e6%b3%95/ - カテゴリー: Google Analytics 探索機能で設定した情報を確認する方法 データ探索で空白を選択（基本的な内容） ▼Googleアナリティクスで探索から空白を選択 ディメンションを選択する ※ディメンション... データの切り口 ▼ディメンションの＋のアイコンからディメンションを選択しインポートをクリック 下記を選択 ページ / スクリーン ページパスとスクリーン クラス... URLからドメイン部分を除いたもの カスタム form_typehttps://bizlabo. site/dbrep/wp/%e3%80%90googl... --- ### 【Wordpress】カラーパレット追加方法 - Published: 2024-05-15 - Modified: 2024-05-15 - URL: https://bizlabo.site/dbrep/%e3%80%90wordpress%e3%80%91%e3%82%ab%e3%83%a9%e3%83%bc%e3%83%91%e3%83%ac%e3%83%83%e3%83%88%e8%bf%bd%e5%8a%a0%e6%96%b9%e6%b3%95/ - カテゴリー: WordPress ▼functions. php function my_wp_theme_json_data_theme( $theme_json ){ $new_data = 2; // カラーパレット カスタマイズ 既存パレットに追加（単色） $new_data = array( array( 'name' => esc_attr__( 'Primary', 'theme_domain' ), 'slug' => 'primary', 'color' => '#f4f4f4', ), array( 'nam... --- ### 【Googleタグマネージャー】内部リンククリックイベント作成手順 - Published: 2024-05-15 - Modified: 2024-05-15 - URL: https://bizlabo.site/dbrep/%e3%80%90google%e3%82%bf%e3%82%b0%e3%83%9e%e3%83%8d%e3%83%bc%e3%82%b8%e3%83%a3%e3%83%bc%e3%80%91%e5%86%85%e9%83%a8%e3%83%aa%e3%83%b3%e3%82%af%e3%82%af%e3%83%aa%e3%83%83%e3%82%af%e3%82%a4%e3%83%99/ - カテゴリー: Google Tag Manager 1）組み込み変数の設定 ▼Googleタグマネージャーで変数を選択し組み込み変数の設定をクリック ▼Click URLとClick Textを追加 2）タグの作成 タグの設定 名前：内部リンククリック（任意のもの） タグの種類：Google アナリティクス: GA4 イベント イベント名：internal_link_click（任意のもの） イベントパラメータ イベントパラメータ：click_url、値：Click URL イベントパラメータ：click_text、値：Click Text イベ... --- ### 「Googleタグマネージャー」アカウントを作る→「GA4」を設定する方法 - Published: 2024-05-13 - Modified: 2024-06-21 - URL: https://bizlabo.site/dbrep/google%e3%82%bf%e3%82%b0%e3%83%9e%e3%83%8d%e3%83%bc%e3%82%b8%e3%83%a3%e3%83%bc%e3%81%abga4%e3%82%92%e8%a8%ad%e5%ae%9a%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95/ - カテゴリー: Google Analytics, Google Tag Manager, WordPress Google Tag Manager（GTM）とは Google Tag Managerで扱うタグとはWebサイトとマーケティングツール間で情報をやりとりするためのコードです Googleアナリティクス、Google広告など、、 のような形式で記述される場合が多いです Googleタグマネージャーを使用すればhtmlの編集をせずにタグの管理が可能です タグ：タグトリガー：タグを動かすきっかけ変数：タグに追加で情報を設定 GTMアカウント作成 Googleタグマネージャーで検索 アカウントの各項目... --- ### 【テンプレートタグ】the_post_thumbnailでサイズ指定ができない - Published: 2024-05-13 - Modified: 2024-05-14 - URL: https://bizlabo.site/dbrep/%e3%80%90wordpress%e3%80%91the_post_thumbnail%e3%81%a7%e3%82%b5%e3%82%a4%e3%82%ba%e6%8c%87%e5%ae%9a%e3%81%8c%e3%81%a7%e3%81%8d%e3%81%aa%e3%81%84/ - カテゴリー: WordPress 上記のように(200, 100)と指定しているのに、実際は img { width: 150px; aspect-ratio: auto 150 / 100; height: 100px; } 検証画面で見てみるとwidth: 150px;となってしまう （対応）アイキャッチ画像のimgを書き換える add_filter( 'post_thumbnail_html', 'custom_attribute' ); function custom_attribute( $html ){ $html ... --- ### WordPressの編集画面にCSSをあてる方法 - Published: 2024-05-12 - Modified: 2024-05-12 - URL: https://bizlabo.site/dbrep/wordpress%e3%81%ae%e7%b7%a8%e9%9b%86%e7%94%bb%e9%9d%a2%e3%81%abcss%e3%82%92%e3%81%82%e3%81%a6%e3%82%8b%e6%96%b9%e6%b3%95/ - カテゴリー: WordPress 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 var(--main-color); padding: . 625em 1em; } ... --- ### 【WordPress】オリジナルテーマ作成手順 - Published: 2024-05-10 - Modified: 2024-05-14 - URL: https://bizlabo.site/dbrep/%e3%83%86%e3%82%b9%e3%83%88%e6%8a%95%e7%a8%bf/ - カテゴリー: WordPress 1）テーマのディレクトリ作成する wp-content/themes/ ディレクトリ内にテーマ名のディレクトリを作成します。 public\wp-content\themes\テーマ名 2）テーマに必要なファイルの作成（最小構成） 最小構成 テーマ名ディレクトリ直下にstyle. cssとindex. phpを作成します。 index. php：テーマの基本テンプレート style. css：テーマの名前などを記述※テーマ名も必須 「style. css」を作成 style. cssにコメント形... --- --- ## 固定ページ ### お問い合わせありがとうございます。 - Published: 2024-06-30 - Modified: 2024-06-30 - URL: https://bizlabo.site/dbrep/thanks/ 3営業日以内に担当より折り返しご連絡いたします。 --- ### お問い合わせ - Published: 2024-06-25 - Modified: 2024-06-30 - URL: https://bizlabo.site/dbrep/%e3%81%8a%e5%95%8f%e3%81%84%e5%90%88%e3%82%8f%e3%81%9b/ ホームページ制作承っております。 こんなお悩みありませんか？ 気軽にいろんな相談ができる制作会社を探している 既存のホームページが使いにくく、更新作業がやりにくくに感じる 下記サイトよりご相談ください。 1）サンクスページ遷移あり 1）サンクスページ遷移なし 気軽にお問い合わせください。 topへ戻る --- ### サイトマップ - Published: 2024-05-14 - Modified: 2024-08-20 - URL: https://bizlabo.site/dbrep/%e3%82%b5%e3%82%a4%e3%83%88%e3%83%9e%e3%83%83%e3%83%97/ https://ida240609. github. io/ --- ### プライバシーポリシー - Published: 2024-05-10 - Modified: 2024-12-08 - URL: https://bizlabo.site/dbrep/privacy-policy/ 私たちについて https://bizlabo. site/dbrep/（以下当サイト）では、ご利用者（あなた）のプライバシーを尊重し、当サイトの運営者（以下サイト運営者）はプライバシーポリシーに基づきご利用者のプライバシー保護につとめています。 当サイトにアクセスされた場合、サイト運営者はご利用者の情報を自動的またはご利用者の意思にもとづき取得することがございます。このプライバシーポリシーは、サイト運営者がウェブサイト経由またはメールやメッセージ経由などでお預かりした個人情報に適応します。 当... --- ---