-
- 登録ID
- 1800711
-
- タイトル
零弐壱蜂
-
- カテゴリ
- WordPress (142位/185人中)
- PHP (21位/22人中)
- JavaScript (24位/31人中)
- プログラマー (55位/81人中)
- 映画(アニメ) (81位/91人中)
-
- 紹介文
- IT技術からアニメまで様々な情報をストックするサイバーメモ帳(備忘録)です。
-
3
記事一覧
再読込
-
- [HTML] 廃止された`font`タグの今
- 概要 タグは、HTMLでテキストのフォントや色、サイズなどを指定するために使われていた。今ではすっかり見かけなくなったが、かつてはウェブページの装飾に欠かせない存在だった。歴史 タグはHTML 3.2で登場した。Netscapeなどのブラウ
零弐壱蜂 -
- [CSS] scroll-padding-top と scroll-margin-top の違いと使い分け
- はじめにCSSの scroll-padding-top と scroll-margin-top プロパティについて解説する。まず、これらのプロパティを理解する上で重要となる「スクロールコンテナ」と「スナップターゲット」について、簡単に説明する。スクロールコンテナ （Scroll
零弐壱蜂 -
- [GitHub Actions] `actions/ai-inference`を利用したPR自動要約の実装
- 背景GitHub 公式が公開した actions/ai-inference アクションにより、ワークフロー内での AI モデルの利用が簡単にできるようになった。これを利用して、PR の変更内容を要約するワークフローを実装してみる。方法ワークフロー定義actions/ai-infe
零弐壱蜂 -
- JavaScriptを利用したブラウザのプライベートモード判定についての考察
- 概要ブラウザのプライベートモード（またはシークレットモード、InPrivateブラウジングなど）を識別したい。しかしながら、JavaScriptによる確実な識別は困難である。結論として、執筆時点ではJavaScriptを利用して全ブラウザ・バージョンにわたりプライベートモードを1
零弐壱蜂 -
- [Google Fonts] 日本語フォントの読み込みを高速化する実装方法
- 概要サイトのパフォーマンス最適化において、ウェブフォントの読み込みは無視できない。特に日本語フォントは文字数が多いため、Google Fontsから提供されるNoto Sans JPのような日本語フォントであっても、依然として読み込みが重くなりがちである。{"type":"lin
零弐壱蜂 -
- [GitHub Copilot] 「ずんだもん」の人格を与える技術
- 背景Copilot Chatでの生成文章が無機質だったので、人格を与えるために「ずんだもん」の口調を追加する。プロンプトファイルを利用する{"type":"alert","data":{"type":"note","text":"執筆現在、プロンプトファイルはパブリックプレビュー
零弐壱蜂 -
- [TypeScript] オプショナルの`?`と`| undefined`の違い
- 背景オプショナルなプロパティを持つオブジェクトの型定義において、TypeScriptの型システムでは?演算子と| undefined型の組み合わせがよく使われる。これらには微妙な違いがある。例えば、以下のツイートで紹介されているものが分かりやすかったので、改めて違いを整理してみる
零弐壱蜂 -
- [命名規則] コンポーネント名は動詞から始めない
- 動詞で始めない理由ReactコンポーネントはUIを構築する基本的な部品である。そのため、名前はコンポーネントが「何を表現するか」を直感的に伝える必要がある。動詞で始まる名前は、そのコンポーネントが何らかの処理を実行するかのような誤解を招きやすいため、原則として名詞または名詞句を用
零弐壱蜂 -
- [JavaScript] 分割代入された引数の名称変更とデフォルト値を同時に指定する方法
- 背景基本的にコンポーネントの引数は分割代入で受け取ることが多く、デフォルト値も合わせて設定しているケースも多い。そうした際、さらに対象の変数名も関数内部の処理に合わせて変更しておきたい場合もある。例えば、コンポーネントとしてはasというプロパティを受け取りたいが、コンポーネント内
零弐壱蜂 -
- [JavaScript] テンプレートリテラルと文字列連結のパフォーマンス比較
- 背景文字列の連結には、テンプレートリテラルか文字列連結を使うかいずれかの方法がある。可読性的にはテンプレートリテラルの方が良いが、パフォーマンス的には単なる文字列連結の方が良い。実際にどれぐらい差があるのか比較してみる。方法以下の3つの方法で文字列を連結するコードをベンチマークす
零弐壱蜂 -
- [CSS in JS] 最新のCSSプロパティにVS Codeのシンタックスハイライトを対応させる方法
- 背景最新のCSSプロパティ（container-typeやtext-wrap）を利用した場合に以下のような警告が発生する。Unknown property: 'container-type' ts-styled-plugin(9999) これはvscode-styled-comp
零弐壱蜂 -
- Shift_JISファイルをgrepする方法
- 背景古い日本語のWebサイトや、レガシーなWindowsアプリケーションのソースコードなどでは、Shift_JISエンコーディングが使用されていることが多い。VS Codeなどのエディタで検索しても、UTF-8で検索してしまうため、Shift_JISのファイルをgrepできない。
零弐壱蜂 -
- [JavaScript] Array.fromとSpread構文はどちらを使うべきか
- 背景Array.fromとSpread構文は、配列やオブジェクトを新しい配列へ変換する際によく使用される機能である。JavaScript built-in: Array: from | MDNJavaScript operator: Spread syntax (...) | M
零弐壱蜂 -
- buttonはdivで代用できる
- TL;DRbuttonをdivで代用はできるが、やるなら覚悟が必要button[type="button"]と同等のものをdivで代用は可能だが、実装には覚悟が必要。アクセシビリティの問題やフォーカススタイルの追加、キーボードイベントの実装など、ネイティブのbutton要素と同等
零弐壱蜂 -
- [HTML] meta format-detectionに指定するのはtelephoneだけで良い
- TL;DR 内に定義するmeta name="format-detection"にはaddressやemailなど指定ができるが、以下のようにtelephoneだけで良い。<meta name="format-detection" content="
零弐壱蜂 -
- git statusで変更があるファイルに対してEslintなどを実行する
- コードgit status -s | awk '/^ M/{print $2}' | xargs -r npx eslint --fix git status -sで変更があるファイルの一覧を取得し、awk '/^ M/{print $2}'で変更があるファイルのパスだけを取り出
零弐壱蜂 -
- [ソフトウェア開発] 関数は1つのことを行うべき（単一責任）
- 概要ソフトウェア開発において、関数を設計する際の重要な基本原則として「関数は1つのことだけを行うべき」という考え方がある。この考え方は、ソフトウェア設計における重要な原則である「単一責任の原則（Single Responsibility Principle, SRP）」に基づいて
零弐壱蜂 -
- [GitHub Actions] package.jsonの中のdevDependenciesから特定のパッケージだけインストールする方法
- 背景大量の依存パッケージを持つアプリケーションにおいてCI/CD環境での実行時間を短縮するために、特定の依存パッケージのみをインストールしたい場合がある。今回はDependency cruiserを利用しているケースを元にpackage.jsonの中のdevDependencie
零弐壱蜂 -
- [JavaScript] 要素をダブルクリックする方法
- 背景JavaScriptで要素をクリックするにはElement.click()を利用するが、ダブルクリックを実現するには少し工夫が必要となる。Element.click()では単一クリックのみしか発火せず、ダブルクリックを実行するdblClick()のようなメソッドは存在しない。
零弐壱蜂 -
- [Next.js] API Routesでの実装方法の覚書
- 背景基本的な使い方は公式ドキュメントに書いてあるが、実際に使ってみて気付いたことをまとめておく。環境Next.js v14.2.15Pages Routernext.config.js: pageExtensions実装ファイル構成src/pages/api 以下にAPI Rou
零弐壱蜂 -
- US配列のメカニカルキーボードを導入してやったこと
- 背景Magic Keyboard、JIS配列のメカニカルキーボードを使用していたが、打鍵感の良さからEpomakerのGalaxy 80を購入したので、その際の設定をまとめておく。環境OS: macOS Venturaキーボード: Epomaker Galaxy 80 やったこと
零弐壱蜂 -
- [JavaScript] 文字列がパスではなくURLかどうか判定する方法
- 背景JavaScriptで文字列をURLか判定する方法がいくつかあるが、どれが一番適しているのかを考えてみる過程で書いてみた。正規表現を利用する特定のブラウザに依存しない方法として、正規表現がよく利用される。const URL_REGEX = /^(https?:\/\/)?([
零弐壱蜂 -
- [CSS] テーブルのスクロール可能領域を表す影をanimation-timelineで付ける方法
- 概要テーブルのスクロール可能領域を視覚的に示すために、水平スクロール時に影を付ける手法が存在する。これまでの方法だと、スクロール可能領域の端に影を付けるためにJavaScriptを使用してスクロール位置に応じて影の位置を調整したり、そのためにラッパー要素を用意するなどして実装が複
零弐壱蜂 -
- [モーダル] スクロールバー表示時のガタつきをなくす実装方法
- 概要モーダルウィンドウを表示または非表示にした際、スクロールバーが表示されることでコンテンツがズレるケースに対処する。解決方法1.スクロールバーの幅を取得まずはスクロールバーのサイズを確保しておく。CSSから値を取得できるようにCSS Custom Propertiesにスクロー
零弐壱蜂 -
- [CSS] `:hover`などのネスト時の親要素参照（`&`）有無による挙動の違い
- 概要SCSS（SASS）やCSS in JSのようなメタ言語を用いてネスティングを行う場合、&を使うことで親要素を参照できる。そういう状況の中で、&がない場合のコードを見かけたのでどういった動作をするのか、&を付けるべきなのかを確認した。動作検証以下
零弐壱蜂 -
- [CSS in JS] propsへのアクセス（interpolation）の書き方を考える
- 概要CSS in JSにおけるテンプレートリテラル記法にて、propsへのアクセスする記述は「interpolation」と呼ばれるらしい。You can pass a function ("interpolations") to a styled component's tem
零弐壱蜂 -
- [Stylelint] 特定の値を制限する方法（mixinやfunction利用を促す）
- 背景font-weightにboldを指定するとiOSのHiragino Sansで太さが意図よりも太くなることがある。そのため、font-weight: boldの指定を避けるために、Stylelintで特定の値を制限する方法について考えてみた。{"type":"alert",
零弐壱蜂 -
- [bash] package.jsonから特定パッケージのバージョンを取得する方法
- 背景CI上でpackage.jsonの特定のパッケージのバージョンを取得する必要があった。そのため、bashを利用する。方法例えば、Reactのバージョンを取得する場合は以下のようになる。VERSION=$(cat package.json | jq -r '.devDepend
零弐壱蜂 -
- JSXで変数の値をdata属性のkeyに指定する方法
- 背景data属性を定数として持っておきたい。これを紐づけようのdata属性として適当なコンポーネントに付与をしたい。方法コンポーネントのdata属性に当てるための変数を以下のように定義する。const DATA_ATTR_KEY = 'data-attr'; コンポーネントに対し
零弐壱蜂 -
- モーダル表示時のスクロールバー調整やオーバレイ表示を極力JavaScriptなしで実装する方法
- 前提モーダルは 要素を使用するが、 で実装したものでも問題ない。構図は以下を想定する。 </div
零弐壱蜂