Generated by All in One SEO v4.9.10, this is an llms.txt file, used by LLMs to index the site.

# iwb.jp

Webサイト制作情報ブログ

## 投稿

- [パスワード入力欄で目のボタンで表示・非表示を切り替える方法](https://iwb.jp/html-forms-password-input-field-eye-button-show-or-hide/) - 最近のフォームのパスワード入力欄には目のボタン(アイコン)を設置してパスワードの表示・非表示を切り替え可能にしているWebサイトが多くなっています。パスワード入力欄は他の入力欄とは異なり、入力した内容が●●●●●●●●のようになって見ることができませんが、HTML, CSS, JavaScriptを使用すればパスワードの表示・非表示の切り替えが可能です。
- [WordPress Popular Postsプラグインの黄色の警告の対処法](https://iwb.jp/wordpress-popular-posts-plugin-with-yellow-warnings/) - WordPressにログインした状態でWordPress Popular Postsプラグインで表示させている部分を見ると、黄色の警告が表示されている場合があります。 ウィジェットが非推奨となったことが原因なので、WordPress Popular Postsを新しくブロック形式で表示させる必要があります。
- [Googleアナリティクス4のプロパティがAdSenseにリンク可能に](https://iwb.jp/google-analytics-4-properties-can-be-linked-to-adsense/) - GoogleアナリティクスのAdsenseとのリンクはユニバーサルアナリティクスでは可能でしたが、UAは2023年7月1日をもってデータの処理が停止されます。AdSenseからアナリティクスへのデータの送信が中断するのを防ぐために、GA4とAdsenseを利用している方は必ずGA4をAdsenseとリンクさせたほうが良いです。
- [JavaScriptのJSON.stringifyでBigIntが含まれるとエラーになる](https://iwb.jp/javascript-json-stringify-bigint-error/) - JavaScriptではJSONを使用する機会が多いですが、BigInt型をJSONに含めてJSON.stringifyで文字列にするとエラーになるので注意が必要です。
- [ChatGPTでBingとPluginsが使用可能だと気づいていない人が多い](https://iwb.jp/gpt4-bing-and-plugins-available-in-chatgpt/) - ChatGPTのGPT-4ではベータ版の機能としてBingによるブラウジング機能とプラグインが存在します。この機能は招待制であるため、自動的に有効になると誤解している方が多いですが、デフォルト設定では無効になっています。そのため、自分自身でSettingsから機能を有効に設定しなければ利用できない点にご注意ください。
- [JavaScriptで特定のCSSファイルにコードを追記する方法](https://iwb.jp/append-javascript-code-to-a-specific-css-file/) - 特定のCSSファイルがあるページのCSS自体に追記して適用したい場合はdocument.styleSheetsで指定したCSSファイルがあった場合は、そのCSSファイルの末尾に追記するようinsertRuleメソッドを使用すれば実装できます。
- [JavaScriptのtypeofには5種類のobject型があるので注意](https://iwb.jp/javascript-typeof-has-5-types-of-object-types/) - JavaScriptではtypeof演算子を使うとデータ型を調べることができます。しかし、オブジェクト、配列、null、正規表現、new Date()でtypeofを使って型を調べるとすべてobjectになってしまうので、細かく判別したい場合はgetTypeofのような関数を自作して判別する必要があります。
- [JavaScriptの配列の型はコンストラクタ関数で一括変更できる](https://iwb.jp/javascript-array-types-can-be-changed-with-constructor-function/) - JavaScriptでNumberなどのコンストラクタ関数を何回も使用して型を変更しているコードがたまにありますが、.map(Number)を使用して配列を返せばすべての型を変更できます。
- [PlaywrightのChromiumブラウザなどの自動操作方法](https://iwb.jp/playwright-allows-you-to-automate-testing-effortlessly/) - Playwrightとは2020年1月31日にリリースされた、テスト自動化ツールです。以前はPuppeteerというテスト自動化ツールが人気だったが、2024年現在はPlaywrightを使用する人のほうが多くなってきています。ちなみにPlaywright (プレイライト)とは「脚本家」という意味です。
- [Puppeteerより便利なテスト自動化ツールPlaywrightの使い方](https://iwb.jp/playwright-test-automation-tool-more-useful-than-puppeteer/) - Playwrightとは2020年1月31日にリリースされた、テスト自動化ツール。以前はPuppeteerというテスト自動化ツールが人気だったが、Playwrightの登場以降はこちらを使用する人が増えてきています。ちなみにPlaywrightとは「脚本家」という意味です。
- [AWS Budget Notificationで高額請求メールが届く集計バグが発生した](https://iwb.jp/aws-budget-notification-billing-alert-bug/) - 2026年7月17日午後5:30（日本時間）頃から、Amazon Web Services（AWS）のコスト管理画面および予算通知機能（AWS Budgets）において、世界規模の重大な表示障害が発生しました。この障害により、身に覚えのない超高額な見積もりコストや予算超過アラートが多くのユーザーに届きました。
- [Webサイト内の広告を広告ブロッカーやCSSで消せないようにする方法](https://iwb.jp/prevent-adblock-user-css-advertisement-removal/) - Webサイトの運営者にとって、広告収入は貴重な財源です。広告を完全に「100%消せないようにする」のは技術的に不可能ですが、JavaScriptを使用して「回避するための難易度を極限まで上げる」ことは可能です。
- [dotenvxを使用して.envを暗号化する方法](https://iwb.jp/dotenvx-encrypt-env-nextjs/) - dotenvxは.envを暗号化するツールです。.envファイルにはパスワードなど、第三者に見られては困る内容が書かれていることが多いため、暗号化して、のぞき見されてもわからないようにするほうがセキュリティが向上します。
- [CSSのzoomがアニメーション可能になったので注意が必要](https://iwb.jp/css-zoom-is-now-animatable/) - Chrome v150からzoomがアニメーション可能に Google Chrome v150のアップデートに
- [2015年5月に登録したはてなブックマークまとめ](https://iwb.jp/hatebu201505/) - アメリカアマゾン商品を気軽に簡単個人輸入・海外ネット通販サイト【Xボーダー】 A to Z CSS 1時間以内
- [Google AdSenseのリンクからのマイクロソフトのサポートを装った詐欺にご注意ください](https://iwb.jp/google-adsense-microsoft-support-scam-2026/) - 最近、ブログやWebサイトを閲覧している際、記事内のテキストリンクをクリックして表示される広告をクリックすると、「本当にこのページを離れたいですか？」「システムへのアクセスは、保護のために制限されています。」「お電話で直接お問い合わせください 0101-833-306-3519」と表示される詐欺サイトが開く事例が急増しています。これはマイクロソフトのサポートを装った詐欺です。
- [Google AdSenseでテキストの広告リンク追加される問題の対処法](https://iwb.jp/google-adsense-ad-intent-turn-off/) - テキストの広告リンク(広告インテント)とは 最近、Google AdSenseを導入しているブログやサイトで、
- [scrollIntoViewのスムーズスクロールは設定により効かないことがある](https://iwb.jp/javascript-scrollintoview-smooth-settings-disabled/) - JavaScriptのelement.scrollIntoView({ behavior: 'smooth' })は対象の要素まで滑らかにスクロールさせる便利なAPIです。こちらのスムーズスクロールはWindowsだとアニメーション効果がオフだと無効になります。
- [beforeunloadのページ離脱はブラウザによって挙動が違うので注意が必要](https://iwb.jp/javascript-beforeunload-page-unload-browser-differences/) - beforeunloadイベントとは Webサイトを開発しているとフォームの入力中にユーザーが誤ってページを閉
- [戻るボタン乗っ取りによるGoogleのポリシー違反を避ける方法](https://iwb.jp/avoid-back-button-hijacking-google-policy-violation/) - Googleが戻るボタン乗っ取りをポリシー違反に 2026年4月13日にGoogleが「戻るボタン」を押しても
- [Math.randomは安全ではないのでcrypto.getRandomValuesを使うべし](https://iwb.jp/javascript-math-random-not-secure-crypto-getrandomvalues/) - Math.random()を仮パスワードやゲームの演算などで使用しているケースがありますが、Math.random()は次の乱数を予測することが可能な安全ではない関数です。
- [macOSの写真アプリでGeminiの生成画像の透かしを消す方法](https://iwb.jp/macos-photos-app-remove-gemini-image-watermark/) - Geminiで画像生成すると右下に透かし（ウォーターマーク）が表示されます。Geminiの生成画像の透かしはmacOSに標準搭載されている写真アプリで簡単に消せます。
- [初期画面のNuxtWelcomeのファイルの場所はどこか解説](https://iwb.jp/nuxtwelcome-vuejs-file-location/) - 初期画面のNuxtWelcomeのファイルの場所はどこか解説しています。
- [ITパスポートの公式キャラクター上峰亜衣の元ネタはAV女優説](https://iwb.jp/it-passport-uemine-uehara-ai/) - ITパスポート試験公式キャラクター「上峰亜衣（うえみねあい）」のが元AV女優の上原亜衣みたいな名前だなと思って作者の将兵氏のTwitterアカウントを見たら上原亜衣の引退に付いて言及しているツイートがあったので上原亜衣の名前が元ネタになった可能性がありそうだ。
- [You Don't Need JavaScript Temporal API (Use Day.js)](https://iwb.jp/you-dont-need-javascript-temporal-api-use-day-js/) - JavaScriptに強力な日時APIであるTemporalが導入され、これまで複雑だった日時の計算やタイムゾーンの処理が標準機能で実装できるようになりました。これでDay.jsのような軽量ライブラリは完全に不要（You Don't Need Day.js）と思う方もいるかもしれませんが、結論から言うとこれからもDay.jsが必要です。
- [StackBlitz×ViteでRangeErrorが発生して起動しない問題の回避策](https://iwb.jp/stackblitz-vite-rangeerror-invalid-atomic-access-index/) - オンライン統合開発環境（IDE）であるStackBlitz上で、ViteのReactスターターテンプレート等から新規プロジェクトを立ち上げようとすると、npm run devの実行時にクラッシュが発生し、開発サーバーが起動しないという問題が多発しています。StackBlitz上のターミナルで「npm run dev」を実行すると、次のようなエラーログを出力してViteを起動できません。
- [CSSでflex、grid、column-countの罫線をGap Decorationsで描画する方法](https://iwb.jp/css-gap-decorations-border-rule-flex-grid-column-count/) - CSSのborderだとflexやgridでは問題が生じる CSSでレイアウトを作る際、要素同士のすき間を指定
- [WordPressのWebサイト内にpolyfill.ioが含まれるか調べる方法](https://iwb.jp/wordpress-search-polyfill-io-in-website/) - 2024年、広く使われていたJavaScriptのポリフィル提供サービス「polyfill.io」のドメインが中国の業者に買収され、悪意のあるスクリプト（マルウェア）を配信するよう変更されたことが大きな問題となりました。2026年6月2日にpolyfill.ioを読み込むと不審なダイアログが表示されるようになったため、再度話題になりました。
- [JavaScriptのWeb Workerのconsole.logが確認できない5つのケース](https://iwb.jp/javascript-web-worker-console-log-not-working-cases/) - JavaScriptのWeb Worker（以下、Worker）は重い処理をバックグラウンドで実行できる便利な機能ですが、「Worker内で書いた console.log() がコンソールに表示されない！」というトラブルに遭遇することがよくあります。
- [GWにChatGPTを振り返りたい人用 はてブのベスト100記事](https://iwb.jp/chat-gpt-best-100-articles-for-gw-hatebu/) - 1年以内の重要度の高い記事をGWに見返したかったので、過去1年のはてブのChatGPTベスト100記事をまとめました。Googleスプレッドシートにもまとめたので、ご自由にお使いください。
- [BeReal.をインストールしている人か面接のときに判別する方法](https://iwb.jp/how-to-identify-bereal-users-in-interview/) - 記事内のQRコードを読み込んで「インストール」ボタンが表示されている場合はインストールされておらず、逆に「アンインストール」ボタンが表示されたらBeReal.がインストールされています。
- [ReactのCSS Modulesでグローバル汚染する問題は@scopeで防げる](https://iwb.jp/react-css-modules-global-html-tag-pollution-prevented-by-scope/) - CSS Modulesはクラス名の衝突を防げる便利な仕組みですが、h1やinputなどのHTML要素を直接指定するとグローバル汚染が発生するという問題があります。一方、@scopeを使用すれば、コンポーネント単位でCSSの適用範囲を制限しつつ、従来のシンプルなCSSに近い書き方が可能で、Home.cssのような分かりやすいファイル名にできる点もメリットもあります。
- [株式会社コロワイドや大戸屋などの株主様ご優待サイトのポイントをターミナルで一括で確認する方法](https://iwb.jp/colowide-stock-benefit-points-terminal-check-colowide-ootoya/) - コロワイドグループの優待ポイントの有効期限はポイント付与日より1年間です。ターミナルを使用した簡単に一括で確認できる方法でないと、付与されたことに気づかなかったり、使われないまま有効期限切れでポイントが消失してしまう可能性が高くなります。
- [VS CodeのCSSでUnknown at rule @scopeが表示されるときの対処法](https://iwb.jp/vscode-css-file-unknown-at-rule-scope-fix/) - VS CodeのCSSファイル内で@scopeを使用すると「Unknown at rule @scope」という警告が表示されます。この警告は記事内のルール追加の手順で消せます。
- [Chrome右上の「Geminiに相談」を非表示にする方法](https://iwb.jp/chrome-hide-consult-gemini-button/) - 最新のChromeでは右上に「Geminiに相談」というボタンが表示されます。このボタンは無駄に目立つし、タブの表示数を減らすなどのデメリットがあるので非表示にすることを推奨します。非表示にしてもショートカットキーで表示・非表示にできます。
- [ReactのuseId()は連番ではなくバージョンによって形式が変わる](https://iwb.jp/react-useid-format-changes-by-version/) - ReactのuseId()とは ReactのuseId()はアクセシブルなフォーム要素の紐付けなどのためのユニ
- [日本海テレビジョンの24時間テレビの募金着服の謝罪文が削除された](https://iwb.jp/nkt-24tv-apology-web-page-deleted/) - 日本海テレビジョンの「24時間テレビ募金着服問題」とは、同局の元幹部社員がチャリティー番組「24時間テレビ」の募金などを長年にわたって着服していた事件です。今月、日本海テレビジョンのWebサイトに掲載されていた24時間テレビの募金着服の謝罪文のWebページが削除されました。
- [24時間テレビの募金着服の謝罪文をテキスト化して読んだ感想](https://iwb.jp/ntv-nkttv-24h-charity-embezzle-money/) - 2023年11月28日に日本海テレビ元幹部社員が1000万円以上を着服したというニュースが流れた。着服した金の一部は24時間テレビの募金だったため、現在ネット上では24時間テレビについての非難の声が相次いでおり、来年以降の番組の存続が危ぶまれている。
- [Googleフォームでお問い合わせページを作成するのはデメリットが多い](https://iwb.jp/google-forms-contact-page-disadvantages/) - Googleフォームを使えば無料で誰でも簡単にお問い合わせページを作れます。しかし、デザインや機能のカスタマイズ性に限界があるほか、近年では「Googleフォームを悪用した偽サイト（フィッシング詐欺）」が急増しているという背景もあります。
- [JavaScriptで郵便局のutf_ken_all.csvから郵便番号の住所変換を実装する方法](https://iwb.jp/javascript-read-split-postcode-csv-files-utf_ken_all/) - Webサイトで住所を入力する際に郵便番号を検索して住所に変換する処理が実装されていることがよくあります。日本郵便が提供するutf_ken_all.csvという全国の郵便番号データが格納されたCSVファイルを利用すれば、郵便番号から住所に変換する処理を簡単に実装できます。
- [郵便局の郵便番号データのURL変更によりCSVがダウンロードできない問題について](https://iwb.jp/postcode-csv-download-failure-due-to-japanpost-url-change/) - 郵便局の郵便番号データダウンロードページのURL変更により、今月から旧URLのutf_ken_all.csvなどの郵便番号データがダウンロード不可になりました。
- [GitleaksでGitとGitHubでの機密情報漏洩を防ぐ方法](https://iwb.jp/gitleaks-git-github-secret-leak-prevention/) - Gitleaksとは GitleaksはGitリポジトリ内のコミット履歴や作業ディレクトリをスキャンし、ハード
- [検索で非表示にするのはnoindexタグ挿入だけではない](https://iwb.jp/google-search-meta-content-noindex-none/) - 記事にはタグの詳細は書かれていないが、noindexはHTMLのmetaタグに以下のように記述して使用する。ただし、検索で非表示になるのはnoindexだけではなくnoneを指定しても同様の効果がある。
- [2015年4月に登録したはてなブックマークまとめ](https://iwb.jp/hatebu201504/) - Cookieにセキュア属性を設定する｜名古屋ではたらくWEB屋のブログ SSLで暗号化してもCookieで「s
- [Gitのpre-commitに必ず入れるべきファイル名とサイズのチェック処理](https://iwb.jp/git-pre-commit-file-name-and-size-check/) - Gitでは一度リモートリポジトリにプッシュされると、履歴を書き換えない限り完全に消去することは難しくなります。そこで有効なのが、Gitのpre-commitフックを利用した自動チェックです。
- [Cursorがgit cloneだけでPCが乗っ取られる脆弱性の詳細と対策](https://iwb.jp/cursor-git-clone-vulnerability-details-and-mitigation/) - 今回のCursorの脆弱性の深刻度は、最大10段階中の「9.9」。放置すれば、PCを丸ごと明け渡すのと同じです。今すぐバージョンを確認し、もし古ければ即座にアップデートを完了させてください。
- [CSSの:hoverの背景色変更はopacityやbrightnessではなくoklchを使うべき](https://iwb.jp/css-hover-background-opacity-brightness-to-oklch/) - Webサイトにおいて、CSSの:hoverによるマウスオーバー時のボタンの背景色変更は基本中の基本です。しかし、多くのエンジニアが無意識に使っている「opacity」や「filter: brightness()」は、実は色のアクセシビリティやデザインの質を損なう原因になっています。
- [1分でわかるCSSのsubgridの使い方](https://iwb.jp/css-subgrid-how-to-use/) - CSSのsubgridはCSS Gridの機能で、親グリッドの定義を入れ子になった子要素でそのまま継承できる仕組みです。これまで困難だった、下図のように複数のカード要素間でヘッダーやボタンなどの高さや位置を完全に揃えることができます。
- [HTMLの<video>タグよりもVideo.jsを使ったほうが良い](https://iwb.jp/use-videojs-instead-of-html-video-tag/) - Video.jsはHTML5ベースのWeb動画プレイヤーを構築する、オープンソースのJavaScriptライブラリです。HTMLのタグでは難しい、全ブラウザでのUI統一やHLS形式のストリーミング再生、見た目や機能のカスタマイズを容易に実現できる、世界的に人気の高いツールです。
- [favicon.icoが存在しないと404エラーになる問題の正しい対策](https://iwb.jp/favicon-ico-404-error-fix-with-html-code/) - ブラウザのConsoleでfavicon.icoの404エラーが表示される場合は、HTMLのheadタグ内に「」を入れることで問題を解消できます。
- [TypeScriptでは文字列にstring型だけを使ってはいけない](https://iwb.jp/typescript-do-not-use-only-string-type-for-strings/) - TypeScriptには文字列のパターンを型として定義できる「Template Literal Types」という機能があります。これを利用すると、特定のフォーマットに従わない文字列をコンパイル時点でエラーにできます。
- [Udemyの動画の画面が真っ黒になる原因と対処方法](https://iwb.jp/udemy-video-black-screen-cause-solution/) - Udemyの動画は特定のケースでは音声は聞こえるが、動画の画面は下図のように真っ黒になり見られなくなることがあります。これはDRM（著作権保護のための暗号化）の影響です。
- [ChatGPTが日本で一般の人には流行らない5つの理由](https://iwb.jp/five-reasons-why-chat-gpt-is-not-popular-in-japan/) - ChatGPTはOpenAIが2022年11月にリリースした対話に特化した言語モデルであり、Webサービスとしても提供されています。便利なWebサービスですが、利用しているのはIT業界の人間などリテラシーが高い人が多く、リテラシーの低い人にはあまり利用されていない傾向があります。この記事ではChatGPTが日本で一般の人には流行らない5つの理由をまとめてみました。
- [1分でできるNode.jsでChatGPT (OpenAI) APIを使う方法](https://iwb.jp/nodejs-npm-chatgpt-openai-api-howto/) - Node.jsでChatGPTを使用するにはAPI KEYの取得が必要ですので、あらかじめ取得しておいてください。次に「npm i -D chatgpt dotenv」を実行してNode.jsでChatGPTを使用できるようにします。
- [ChatGPTをMacのターミナル(黒い画面)で使用する方法](https://iwb.jp/how-to-use-chat-gpt-in-mac-terminal/) - ChatGPTは公式サイトのWebページから利用できますが、AIChatをターミナルでインストールしておけばターミナルからChatGPTを使用できるようになります。IT企業でコードを書く人などはターミナルを常時開いている人が多いので、ちょっとした質問などであればターミナルから質問したほうが使いやすいです。
- [VS Code拡張機能「ChatGPT Genie AI」の使い方](https://iwb.jp/vscode-extension-chatgpt-genie-ai/) - VS CodeのChatGPT Genie AIとは日本やアメリカなどで一番インストールされているChatGPT(AI)でコード生成などが可能なVS Codeの拡張機能です。
- [OpenAI(ChatGPT)のAPI keysは1度しかコピー不可](https://iwb.jp/open-ai-chatgpt-api-keys-copied-only-once/) - OpenAI(ChatGPT)のAPI keys(SECRET KEY)は「Create new secret key」を押せば生成されたAPI keysが表示されますが、このポップアップを閉じたあとにAPI keysを再度コピーすることはできません。
- [1分でできるJavaScriptのinteract.jsのドラッグ&ドロップ](https://iwb.jp/javascript-interactjs-drag-and-drop/) - interact.jsとはJavaScriptのドラッグ&ドロップの処理を簡単に実装できるJavaScriptライブラリ。npm or CDNで読み込んだあと短いコードを記述するだけでドラッグ＆ドロップが実装できる。
- [ツールチップはpopover, flip-block, border-shapeを使用するのが最適](https://iwb.jp/css-popover-flip-block-border-shape-tooltip-best-practice/) - popover, flip-block, border-shapeでツールチップを作成 ツールチップはUIの中
- [iOSとAndroidの最新版で新たに14種類の絵文字が使用可能に](https://iwb.jp/ios-android-latest-14-new-emoji/) - iOSとAndroidの最新版でUnicode 17.0の絵文字が使用可能になりました。iOS (iPadOS) はiOS 26.4以上、Androidはアップデートに加え、GoogleのNoto Emojiフォントの更新を通じて順次利用可能になっています。
- [axiosの脆弱性に対応したバージョンは1.15.0以上なので注意](https://iwb.jp/axios-vulnerability-fixed-version-1-15-0-or-later/) - 2026年4月9日にaxiosにおいて、極めて深刻な脆弱性（CVE-2026-40175）が公表されたため、現在の安全なバージョンは1.15.0です。
- [キャッシュバスティング(クエリ更新)をNode.jsで一括でする方法](https://iwb.jp/nodejs-cache-busting-query-update-bulk-files/) - キャッシュバスティング(クエリ更新)のために手動でクエリパラメーターを変更すると、時間がかかってミスも発生しやすいため、前述のコードをNode.jsで実行することで自動更新することを推奨します。
- [CSSの::highlight()で文字列をタグで囲まずにハイライトする方法](https://iwb.jp/css-javascript-custom-highlight-api/) - ::highlight()疑似要素とCSS Custom Highlight APIを組み合わせれば、特定の文字列（キーワード）だけを動的にハイライトすることができます。
- [Vite + React + PostgreSQL環境の作り方](https://iwb.jp/vite-react-postgresql-environment-setup/) - Vite + React + PostgreSQLの開発環境は、一見すると難しそうに見えますが、Dockerを活用することで比較的シンプルに構築できます。フロントエンドエンジニアでもバックエンドやDBを含めた環境を扱えるようになると、開発の幅が大きく広がるので、ぜひこの構成をベースに応用してみてください。
- [テーブルチェックでいち早く予約する3つのコツ](https://iwb.jp/tablecheck-tips-for-fast-reservation/) - 人気店だと予約競争が激しく、予約開始からわずか数分で予約不可になります。この記事ではテーブルチェックで予約するためのコツを3つ記載しています。これらのコツを知っていれば、予約しにくい人気店でも99%予約できます！
- [CSSのcontrast-color()で背景色に基づく文字色を自動選択](https://iwb.jp/css-contrast-color-background-based-color/) - contrast-color()とは背景色に基づいて最も高いコントラストを持つ文字色（白または黒）をブラウザが自動選択する機能です。これにより、Webデザインにおけるアクセシビリティ（コントラスト比）の確保や色の変更の対応が大幅に簡略化されます。
- [axiosのサプライチェーン攻撃はfetchに変更すれば完全に防げる](https://iwb.jp/axios-supply-chain-attack-can-be-completely-prevented-by-switching-to-fetch/) - axiosは便利ですが、単純にGETやPOSTなどでデータの取得や送信だけに使用しているケースでは、記事内のコードで書けば、fetchで代替可能です。
- [dodaのようにやらかさないためのJavaScriptの一致判定処理](https://iwb.jp/javascript-doda-company-string-normalize/) - dodaスカウトサービスの「直近の勤務先のブロック」機能に不具合があったとパーソルキャリアからお知らせがありました。もしJavaScriptで同様の問題が発生した場合、解決するにはいくつかの処理の追加が必要です。
- [日本語対応のWordPressプラグイン「CloudSecure WP Security」のインストール方法と注意点](https://iwb.jp/wordpress-plugin-cloudsecure-wp-security-install/) - CloudSecure WP SecurityはWordPressのセキュリティ対策プラグインです。WordPressはデフォルトの状態だとセキュリティが脆弱なため、セキュリティ対策プラグインのインストールが必要です。いままでもセキュリティ対策プラグインはあったのですが、日本語に完全対応したものがなく、英語ができない日本人には使いにくいものでしたが、CloudSecure WP Securityは日本語に完全対応しています。
- [macOSのスクリーンショットのカラープロファイルはDisplay P3なので、そのまま送ってはいけない](https://iwb.jp/macos-screenshot-color-profile-display-p3-should-not-be-send/) - macOSでスクリーンショットを撮影すると、画像のカラープロファイルはDisplay P3になります。Display P3の画像をそのまま送信・共有すると、環境によって見た目が変わります。
- [ESLintの代わりに数十倍高速のOxlintをインストールする方法](https://iwb.jp/install-oxlint-faster-than-eslint/) - Oxlintとは JavaScriptのLintツールといえばESLintが定番ですが、最近はより高速なツール
- [人気ラーメン店「ソラノイロ」店主がモスバーガーでの打ち合わせで炎上した件について](https://iwb.jp/ramen-solanoiro-mosburger-meeting-controversy/) - 人気ラーメン店「ソラノイロ」店主がモスバーガーでの打ち合わせで炎上した件について
- [Google Keepが502エラーで使用不可になった問題と対処方法](https://iwb.jp/google-keep-502-error-unavailable/) - 昨夜未明からGoogle Keepが502エラーで使用不可になりました。2026年3月21日 9時現在はWeb版に関してはURLにアクセスしても502エラーとなり使用不可になっています。
- [JavaScriptのESLintは問題を検出しにくいので注意が必要](https://iwb.jp/javascript-eslint-problems-hard-to-detect/) - ESLintだけを使ってはいけない JavaScriptのLintツールといえば、ESLintが標準のように使
- [Vite + ReactでビルドしたHTMLファイルをブラウザで表示する方法](https://iwb.jp/vite-react-build-html-open-in-browser/) - Reactのビルドで書き出されたindex.htmlファイルをブラウザにドラッグ＆ドロップしても画面は真っ白になり内容を確認できません。しかし、記事に記載した手順でビルドすればブラウザで確認可能です。
- [Googleスプレッドシートを使用したTBSひるおびの捏造円グラフの作り方](https://iwb.jp/tbs-hiruobi-google-spreadsheet-fabricated-pie-chart/) - Twitterを見ていたらTBSの「ひるおび」という番組の朝日新聞世論調査の円グラフがおかしいと話題になっていた。TBSの「ひるおび」ではその他を1%にすることで支持しないの割居合を故意に増やしていた。最初は20%を2%と間違えただけかと思ったが、1%にしないと番組で放送した円グラフの形にならないため、意図的に捏造したことになる。
- [JavaScriptでPromise.all()ではなくPromise.allSettled()を使うべき](https://iwb.jp/javascript-promise-all-instead-of-promise-allsettled/) - 複数の非同期処理を並列実行する場合、すべて成功するとは限りません。そのため、結果をすべて確認したい場合は Promise.allSettled() を使用するほうが安全です。
- [Cursorを使用するならPrivacy Modeを必ずEnabled(有効)にするべし](https://iwb.jp/cursor-editor-settings-privacy-mode-enable/) - Cursorを使用している場合はPrivacy Modeを有効化していないと、個人情報やAPIキーなどの機密情報を流出させてしまう可能性があるので、必ずEnabled (有効)にすることをオススメします。
- [ChatGPTの画像生成の文字化けはGeminiで修正できる](https://iwb.jp/chatgpt-image-generation-mojibake-fix-with-gemini/) - ChatGPTは「UTF-8のBOM付き・BOMなしの違いとBOMの追加・削除方法 という記事のアイキャッチ画像を16:9で作成して」のように記事タイトルと画像比率を書いて送信するだけで画像生成してくれるので便利なのですが、ChatGPTは画像内のテキストが文字化けしやすいという問題があります。
- [JavaScriptのinnerHTMLより安全なsetHTMLを全ブラウザで使用する方法](https://iwb.jp/javascript-sethtml-safer-than-innerhtml-all-browsers/) - JavaScriptのinnerHTMLより安全なsetHTMLを全ブラウザで使用する方法について解説しています。
- [jQueryバージョン4未満は脆弱で非推奨であるという現実](https://iwb.jp/jquery-version-under-4-is-vulnerable-and-deprecated/) - 2026年1月17日（米国時間）にjQueryがv4.0.0へとアップデートされました。jQueryの公式はすべてのユーザーに、jQuery 4.xの最新バージョンにアップグレードすることを推奨しています。
- [React.FCとReact.FunctionComponentはESLintで禁止するべき](https://iwb.jp/react-fc-function-component-eslint-rule-forbiddened/) - React.FC (React.FunctionComponent)とは関数コンポーネント用の型エイリアスです。TypeScriptでReactを書き始めた頃によく使われていました。現在は以下の3つの問題があるため使われることは少なくなりました。
- [UdemyでForbiddenで閲覧不可になった際の正しい対処法](https://iwb.jp/udemy-forbidden-access-fix-delete-cookie-and-localstorage/) - Udemyを閲覧時に画面上にForbiddenが表示されてWebサイトが閲覧不可になることがあります。この問題はデベロッパーツールのApplicationを選択して、Cookies内のudemy.comを右クリックして、Clearを選択すれば解消できます。
- [JavaScriptでsortとlocaleCompareでソートしないほうが良い理由](https://iwb.jp/javascript-sort-localecompare-why-not-use/) - JavaScriptで配列を並び替えるとき、多くの人が真っ先に思い浮かべるのがsort()や localeCompare()でしょう。しかし、これらを使うとバグの原因になりやすいことは、あまり知られていません。
- [ChatGPTでコードの編集とプレビューを使用する際の4つの注意点](https://iwb.jp/chatgpt-code-edit-preview-notes/) - ChatGPTのアップデートにより、編集とプレビューがChatGPTのWebサイト上で実行可能になりました。しかし、コードの編集やプレビューの機能には4つの注意点があるので、ChatGPTでWebサイトやWebアプリを作成する方は事前に注意点を知っておいたほうが良いです。
- [Reactで疑似TanStack Queryを作成する方法](https://iwb.jp/react-fake-tanstack-use-query/) - Reactで使用可能な疑似TanStack Queryを作成してみました。
- [Googleスプレッドシートで空白入力を拒否する方法はデマが多いので注意](https://iwb.jp/google-spreadsheet-many-myths-about-rejecting-blank-input/) - セルの空白入力を拒否する方法はデマが多い Googleスプレッドシートで空白入力を拒否する方法をGoogleで
- [Reactでは src={src} だと値が空のときバグが発生する](https://iwb.jp/react-src-attribute-empty-value-bug/) - Reactでは「src={src}」のsrcの値をpropsやAPIなどから取得した際に値が空の場合にバグが発生する可能性があることを知らない人が多いので、このような書き方をする際は注意が必要です。
- [Playwrightでドラッグ＆ドロップをテストする方法](https://iwb.jp/playwright-drag-and-drop-test/) - Playwrightには、シンプルにドラッグ＆ドロップ操作を実現できる page.dragAndDrop() メソッドがあります。より細かい操作やカスタム実装されたドラッグ＆ドロップの対応には、page.mouseを使います。
- [PostgreSQLのDISTINCT ONによる正しい重複除去方法](https://iwb.jp/postgresql-distinct-on-correct-way-to-remove-duplicates/) - PostgreSQLのDISTINCT ON は「特定のカラムごとに先頭の1行だけを取得する」 ためのPostgreSQL独自の構文です。便利な構文ですが、使い方を間違えると意図した結果になりません。
- [Childlenなどの8つのレガシーReact APIが非推奨の理由](https://iwb.jp/legacy-react-api-including-childlen-deprecated-reasons/) - Reactにはreactパッケージからエクスポートされているが、新しく書くコードでの使用は推奨されていない、以下の8つのレガシーReact APIが存在します。この記事ではなぜこれらの8つのレガシーReact APIが非推奨なのか、使うべきではないのかサンプルコード付きで解説します。
- [CSVファイルをExcelで開くと自動変換される9パターンの値](https://iwb.jp/csv-excel-auto-convert-pattern-settings/) - CSVファイルをExcelで直接開くと、一部のデータが自動的に変換されてしまい、意図しない値に置き換わることがあります。これによりデータの正確性が損なわれ、データ編集やデータ分析に支障をきたす場合があります。この記事では、ExcelでCSVを開いたときに自動的に変換してしまう代表的な9パターンの値を紹介します。
- [Googleスプレッドシートは数値を文字列に自動変換することがあるので注意](https://iwb.jp/google-sheets-number-auto-conversion-to-string/) - 数値を文字列に自動変換することがある GoogleスプレッドシートはExcelと違って、数値を文字列に自動変換
- [Chrome v144からJavaScriptのTemporalが使用可能に！](https://iwb.jp/chrome-v144-javascript-temporal-dont-use-new-date/) - TemporalとはJavaScriptのDateオブジェクトの長年の問題点を解決するために設計された、次世代の日時APIです。現在のChromeやMicrosoft Edgeの最新バージョンであるv144がTemporalに対応するようになったため、利用できるブラウザが増えました。
- [落合駅近くのラーメン屋「麺や晴心」の行き方と注意点](https://iwb.jp/ramen-menya-seishin-ochiaieki-how-to-access/) - 麺や晴心とは東京メトロ東西線・落合駅から徒歩約1分の場所に、2024年11月11日にオープンした超人気のラーメン店です。麺や晴心の主力とされるのは、濃厚な旨味と深い味わいが印象的な手揉み中華そばとなっています。
- [Microsoft Edgeで画面の角が丸くなる(角丸)機能をオフにする方法](https://iwb.jp/microsoft-edge-browser-disabled-rounded-corners/) - Microsoft Edgeで画面の角が丸くなる(角丸)機能をオフにするには試験段階の機能(設定画面)に遷移して、該当の機能をオフにします。
- [Twitterヘルプの「リンクが23文字に変換」は間違いなので注意](https://iwb.jp/twitter-help-wrong-link-converts-23-characters/) - Twitterのヘルプの「ツイートでリンクを送信する方法」には「あらゆる長さのリンクが23文字に変換されます」と書かれている。普段からTwitterを使い慣れている人にはわかるがリンクが23文字に変換されるというのは間違っている。正しくは「11.5文字に変換される」
- [Googleスプレッドシートでキャッシュ機能付きAI関数を無料で使う方法](https://iwb.jp/google-spreadsheet-cache-gemini-ai-function-free/) - Googleスプレッドシートの生成AI (Gemini)が使用可能なAI関数は一部の有料アカウントしか使用できませんが、自作すれば無料アカウントでも使用可能になります。
- [Reactではfetchではなく、axios + Tanstack Queryが推奨されている理由](https://iwb.jp/react-fetch-axios-tanstackquery-usequery/) - React開発ではfetch単体よりも、フレームワークを使用していない場合は、axios + TanStack Queryのようにオープンソースのソリューションを使用することが推奨されています。
- [「git stash -u」は危険なので、「git stash push -um」を使うべき](https://iwb.jp/git-stash-u-is-danger-use-git-stash-push/) - git stash -u（--include-untracked）は一見便利そうに見えますが、実務では事故の原因になりやすく、原則として使うべきではありません。git stash push -um を使ったほうが良いです。
- [技術選定の勉強になるBulletproof Reactの起動と使い方の解説](https://iwb.jp/bulletproof-react-guide-for-technology-stack-learning/) - 技術選定の勉強になるBulletproof Reactの起動と使い方について解説しています。起動方法やどのような技術が使用されているか知りたい方は記事の閲覧をオススメします。
- [企業側に不利益が発生する可能性がある登録フォーム4例](https://iwb.jp/bad-registration-form/) - 企業側に不利益が発生する可能性がある登録フォーム4例 その1 同意なしで入力フォームに行ける その2 規約が同意ボタンの下にある その3 別ページへのリンクがある その4 XSS対策の未対応
- [消費税の端数処理は切り捨て、四捨五入、切り上げの3パターンがあるので注意](https://iwb.jp/javascript-consumption-tax-rounding-three-patterns/) - 消費税法では端数処理の方法は1つに定められていません。これを知らないとJavaScript実装時の端数処理の違いが、金額のズレやトラブルにつながる可能性があります。
- [JavaScriptの小数リテラルの使用を禁止するESLintの作成方法](https://iwb.jp/eslint-disable-javascript-float-literal/) - JavaScriptの数値はすべてIEEE 754の浮動小数点数で表現されるため、「0.1 + 0.2」のような小数リテラルの計算結果が「0.30000000000000004」になるなどの問題が発生します。ESLintを使用して小数リテラルが代入された際はエラーを出すようにすれば、このような問題は発生しにくくなります。
- [MUIアイコンは@mui/icons-materialで読み込むと最大6倍遅くなる](https://iwb.jp/react-mui-icons-material-six-times-slower/) - MUIでnamed import (名前付きインポート)を使って読み込んでいるケースをよく見かけますが、MUIの公式ドキュメントには「名前付きインポートはパスベースのインポートよりも最大6倍遅くなる可能性があります。」と記載されており、非推奨となっています。
- [React2Shellの仕組みと素人でもできる該当バージョンの判定方法](https://iwb.jp/react2shell-mechanism-and-version-detection-for-beginners/) - Reactのバージョンが古いと「ランサムウェア」や「Webサイトの改ざん」などの被害を受ける可能性があります。React2Shellとは、Webサイト上で本来は想定していないJavaScriptの実行経路を悪用し、最終的にOSコマンド実行（Shell実行）へ到達してしまう脆弱性の総称的な呼び方です。
- [nuqsでReactのURLのクエリパラメータを状態管理として扱う方法](https://iwb.jp/nuqs-react-manage-url-query-params-as-state/) - nuqsとは、主にReactやNext.jsでURL のクエリパラメータを安全に状態管理するためのライブラリです。useStateの代わりにuseQueryStateを使うことで、keywordやcountなどを型付きでURLのクエリパラメータで状態管理が可能になります。
- [JavaScriptでURL判定を正規表現でやってはいけない](https://iwb.jp/javascript-dont-validate-url-with-regex/) - JavaScriptでフォーム入力値のURLを検証したい場面が多くありますが、URL判定を正規表現だけで行うのは非常に危険です。
- [JavaScriptの整数判定を正規表現(/^\d+$)だけでしてはいけない](https://iwb.jp/javascript-do-not-check-integer-with-regex/) - JavaScriptの整数判定のために /^\d+$/ のような関数を作成して使っているWebサイトをよく見かけます。このコードでは入力フォームなどから受け取った値だと整数を正しく判定できません。
- [1分でわかるリサイズなどの画像操作が行えるImageMagickの使い方](https://iwb.jp/imagemagick-resize-convert-append/) - ImageMagick(イメージマジック)とは画像のリサイズや統合などをコマンドラインで行うためのソフトウェア。例えば画像を50%にリサイズする場合はPhotoshopを使用する場合、ImageMagickならターミナル(コマンドプロンプト)でコマンドを実行するだけでリサイズ可能だ。
- [MUIでE2Eテストをするときにアニメーションをオフにする方法](https://iwb.jp/mui-e2e-test-animation-ripple-transitions-off/) - MUIとは MUIとはReact向けのUIコンポーネントライブラリです。 コンポーネントが圧倒的に多く、UIの
- [Webサイト内のドルの価格表記に日本円を自動で併記する方法](https://iwb.jp/javascript-yen-price-to-dollar-display-on-website-for-free/) - ドルの価格表記に円表記を併記する方法 Webサイトでドルの価格表記に円表記を併記したいことがあります。 例えば
- [ホテルニューオータニの3000円超えのパンケーキを食べた感想](https://iwb.jp/newotani-satsuki-3000yen-pancake-suga/) - 私用で永田町に行く機会があったので、ホテルニューオータニの3000円超えの特製パンケーキを食べに行ってみた。総額3388円のパンケーキはさすがに高すぎると思ったが、たまに食べる程度であれば十分に満足できる価値のあるパンケーキだった。私の人生で食べた中で一番おいしいパンケーキであることは間違いない。
- [らぁ麺 湯河原 飯田商店(ららぽーと沼津店)への行き方と注意点](https://iwb.jp/ramen-iidashouten-yugawara-lalaport-numazu/) - 飯田商店とは神奈川県湯河原に本店がある人気ラーメン店。店主の飯田将太氏はラーメンに使用する食材へのこだわりが非常に強いことで有名。麺は希少国産小麦のハルユタカ。スープは比内地鶏、名古屋コーチンなどを使用。チャーシューは霧島高原純粋黒豚、TOKYO Xなどを使用している。
- [ESLint - React - You Might Not Need An Effectの使い方](https://iwb.jp/eslint-react-you-might-not-need-an-effect-how-to-use/) - You Might Not Need An Effectとは You Might Not Need An Ef
- [ReactでuseEffectで初期化の処理をしてはいけない](https://iwb.jp/dont-initialize-in-use-effect-react/) - Reactの初心者によくある誤解のひとつに、「初期化処理はuseEffectで行う」というものがあります。確かに、useEffectに初期処理を書くと「コンポーネントのマウント時に一度だけ実行される」ため、一見正しそうに見えます。しかし、実際の開発ではuseEffectで初期化処理を書くことは避けるべきです。
- [【結論】TypeScriptの型定義はinterfaceよりtypeを使うべき理由](https://iwb.jp/why-use-type-over-interface-in-typescript/) - typeの方が柔軟で、現代のTypeScript開発では主流 TypeScript開発ではtypeの方が柔軟で
- [Yahoo!ファイナンスの時系列のCSVを無料でダウンロードする方法](https://iwb.jp/yahoo-finance-historical-csv-download-free/) - Yahoo!ファイナンスの時系列のWebページでは、通常は有料会員しか時系列のCSVファイルをダウンロードできませんた、ブラウザのデベロッパーツールを使用すれば無料会員でもCSVファイルをダウンロードできます。
- [有名サイト各社のjQuery読み込みについて調べてわかった問題点](https://iwb.jp/read-jquery-problem/) - 有名サイト各社を適当にピックアップしてjQueryの読み込みバージョン、記述位置、CDN利用の有無を調べたら意
- [Playwrightでpage.waitForTimeoutは使うと遅くなるので使ってはいけない](https://iwb.jp/playwright-page-waitfortimeout-dont-use/) - Playwrightのコードでpage.waitForTimeoutが使われているコードを見ることがありますが、page.waitForTimeoutを使用するとテストが完了したとしても、無駄に待ち時間が長いテストになってしまいます。
- [GMOクリック証券は日本で1番不正アクセスが容易な証券会社](https://iwb.jp/gmo-click-sec-easy-to-hack-login/) - 日本国内にはSBI証券、松井証券などの大手証券会社がありますが、その中でもGMOクリック証券は日本で1番不正アクセスが容易な大手証券会社になっています。
- [React 19.2の<Activity>を19.1以下のバージョンで使用する方法](https://iwb.jp/react-19-2-new-feature-activity-use-old-version/) - はReact 19.2で追加された条件付きでレンダリングするための新機能です。React 19.1以下でもコンポーネントを使用することで同じような処理を実装できます。
- [Vite搭載のReactサーバーコンポーネント「ReactJust」の使い方](https://iwb.jp/reactjust-react-server-components-without-a-framework/) - ReactJustはフレームワークに依存せずにReactサーバーコンポーネントを使えるようにするツールです。Viteと直接統合されており、サーバーコンポーネントとクライアントコンポーネントを使ったモダンなReactアプリを最小限のセットアップで構築できます。
- [GMOクリック証券利用者は認証の誤解により不正ログインされやすいので注意が必要](https://iwb.jp/gmo-click-sec-two-factor-authentication-misunderstanding-warning/) - GMOクリック証券利用者は2段階認証がログイン時に有効になっているという誤解による不正ログインが発生しやすいので注意が必要です。
- [実用的なVite + React + TypeScriptの開発環境の作り方](https://iwb.jp/practical-vite-react-typescript-development-environment/) - ReactでWebサイトなどを開発する場合はVite + React + TypeScriptで開発環境を作成することが多いですが、実用的な開発環境が作られていないケースがあります。この記事では高速かつ開発しやすいVite + React + TypeScriptの開発環境の作り方について説明します。
- [WordPressの更新情報サービスのPing送信は設定不要](https://iwb.jp/wordpress-update-service-not-need-pinging/) - 更新情報サービスとはWordPressの「設定 => 投稿設定」の一番下にあるブログを更新したことをお知らせするのに利用できるツール。ネット上には更新情報サービスを設定したほうが良いと書かれているWebサイトを見かけることがあるが、結論から言うと更新情報サービスは設定不要。
- [書評：Google上位表示 64の法則](https://iwb.jp/google64rule/) - 今までのSEO本と違いデータの統計を出して効果を測定 上位表示されているWebサイトを分析して傾向を導き出す「
- [Adobe Photoshopは月額2180円ではなく月額980円で使用できる](https://iwb.jp/adobe-photoshop-monthly-2180-980-yen/) - Photoshopには「月額2180円の単体プラン」と「月額980円のフォトプラン」がある。そのため同じPhotoshopでもプランによって月額料金が2倍違ってしまうのだ。
- [macOSやiPhone(iOS)のアラームはSiriですべて削除できる](https://iwb.jp/delete-all-alarms-on-macos-and-iphone-with-siri/) - macOS、iOS (iPhone)、iPadOSのアラームには、「すべて削除」の機能がないという致命的な問題がありますが、Siriに頼めばすべて削除してくれます。
- [VS Code 新機能のAIエージェント(AGENTS.md)の使用方法](https://iwb.jp/vscode-coding-ai-agents-md/) - VS Code (Visual Studio Code)は2025年8月版(バージョン1.104)の新機能として、AIエージェント(AGENTS.md)をリリースしました。AGENTS.mdとはAIに向けたプロジェクトのマニュアルです。
- [navigator.onLineはtrueでもオンライン状態とは限らない](https://iwb.jp/navigator-online-true-false-use-fetch/) - navigator.onLineは「ブラウザがネットワークインターフェースに接続されてるか」を示すだけで、実際に目的のサーバーに到達できるかは保証しません。実務ではnavigator.onLineをトリガーにして、fetchで実際の到達性チェックと組み合わせて使うのが正解です。
- [セルフカフェ大塚駅南口店(無人カフェ)に行った感想と注意点](https://iwb.jp/selfcafe-mujin-cafe-otsukaeki-minamiguchi/) - セルフカフェとはスタッフがいない無人のカフェ。2025年7月31日に東京1号店が大塚駅南口の大塚グリーンビル6階にオープンしました。
- [Web APIが作成されたらVitestとAjvで必ずテストを書くべき](https://iwb.jp/javascript-web-api-vitest-ajv-test/) - Web APIがバックエンド側で作成されているのでバックエンド側でテストをするべきですが、バックエンドエンジニアの能力が低い企業だとWeb APIのテストがしっかりとされていないことがあります。APIが作られたら必ずフロントエンドエンジニアもテストを書くべきです。その際、私がオススメするのが「Vitest + Ajv」の組み合わせです。
- [1分でわかるReactの状態管理ライブラリJotaiの使い方](https://iwb.jp/react-state-management-library-jotai-usage/) - JotaiはReactの状態管理ライブラリです。Reactの状態管理ライブラリはRedux, Recoil, Zustandなどが有名ですが、Jotaiの作者はOSS開発者の加藤大志（Daishi Kato）さんで日本人の方が開発しています。Jotaiはatomを定義し、useAtomで状態を取得・更新できます。
- [PlaywrightでBasic認証、パスワード、2要素認証(TOTP)を自動入力してログインする方法](https://iwb.jp/playwright-basic-auth-password-totp-2fa-auto-login/) - Playwrightで3種類の認証を自動入力 PlaywrightでWebサイトのテストをする際にBasic認
- [WindowsのPowerShellのtimeコマンドで処理時間を測定する方法](https://iwb.jp/windows-powershell-time-command-measure-execution-time/) - macOSでは「time sleep 3」のようにtimeコマンドを実行すると時間が計測されますが、WindowsのPowerShellでも同じことができます。
- [Google FontsはNoto Sans Japanese以外は文字化けする可能性があるので注意が必要](https://iwb.jp/google-fonts-noto-sans-japanese-mojibake/) - Webサイトで日本語を表示する際、Google Fontsを利用されることが多いですが、フォント選択には注意が必要です。特に日本語の漢字は、指定したフォントで表示されないことがあります。
- [JavaScriptのscrollIntoViewで下端や上端に移動する正しい方法](https://iwb.jp/javascript-scrollintoview-bottom-top-block-start-end/) - scrollIntoViewはDOM要素のメソッドで、要素がスクロール領域内に収まるようにスクロールします。便利なメソッドですが、正しい使い方でスクロールされていないことがあります。
- [『薫る花は凛と咲く』公式サイトのようにWebページにGIF画像を大量に貼ってはいけない](https://iwb.jp/kaoruhana-anime-com-special-gif-website/) - 『薫る花は凛と咲く』公式サイトのSPECIALページにアクセスしたところ、GIFアニメーション画像が大量に貼られていて、Webページの表示に25秒もかかった。
- [Excelは1900年2月29日を加算する「うるう年バグ」があるので1日減算が必要](https://iwb.jp/excel-1900-leap-year-bug-fix-subtract-one-day/) - Excelには1900年2月29日をうるう年とみなすバグがあるため、1900年2月29日が含まれる日数を算出する式がある場合、日数が1日多くなってしまいます。
- [JavaScriptのsortは配列の破壊的変更なのでtoSortedを使うべき](https://iwb.jp/javascript-sort-method-mutates-use-tosorted/) - sortは配列の破壊的変更 sortとはJavaScriptの配列の並び替えメソッドです。 sortが並び替え
- [PostgreSQLで複数テーブルを全文検索する方法](https://iwb.jp/postgresql-search-multiple-tables-to-tsvector-tsquery/) - 最近、「PostgreSQLの全文検索機能を試してみる」という記事がバズっていましたが、内容がPostgreSQL初心者には難しく、Goの話も含まれていて理解しにくい方も多いと思うので再解釈してみました。
- [小中学校のブログ画像で生徒の通学時間や住所がバレる件について](https://iwb.jp/student-address-and-datetime-exposed-by-school-blog-images/) - 通学中の生徒の写真をブログに掲載した場合は、通学路の場所と通学時間が位置情報と撮影日時の情報から第三者にバレます。もし、生徒の家庭訪問の様子を撮影した写真をブログに掲載した場合は、生徒の自宅の住所も位置情報から判明します。
- [ニコニコ動画の非表示投稿者を消すStylusのCSSコード](https://iwb.jp/stylus-css-code-to-hide-niconico-blocked-uploaders-and-ad/) - この記事に記載されているコードをStylusで追加すれば、ニコニコ動画のランキングに表示される「この動画は非表示に設定されています」を消して非表示にできます。
- [1分でわかるTypeScriptでenumを使ってはいけない理由と代替案](https://iwb.jp/why-you-should-not-use-enums-in-typescript-and-alternatives/) - TypeScriptでenumを使ってはいけない理由とオブジェクトおよび関数を使用した代替案についてコードを記述しています。
- [Googleカレンダーで午前1時から6:59までが午後になるバグと対処方法](https://iwb.jp/google-calendar-events-from-1am-to-659am-are-interpreted-as-pm/) - Googleカレンダーはカレンダーの日にちをクリックして、「[hh:mm] [予定]」を入力することで開始時間付きの予定を追加できます。この予定の追加の仕方であれば開始時間と予定の追加が一度でできるので便利ですが、1:00から6:59までの開始時間を入力すると午後になってしまうバグがあります。
- [MUIのテーブルの処理が重い場合はreact-virtuosoで軽くできる](https://iwb.jp/speed-up-heavy-mui-tables-with-react-virtuoso/) - MUIのテーブルの処理が重い場合はreact-virtuosoを使用すれば動作を軽くできます。
- [SNSで写真に騙される気持ち悪い人にならないための3つの知識](https://iwb.jp/x-sns-photo-deception-prevention-tips/) - SNSには魅力的な写真や情報があふれています。美しい風景、魅力的な人物、おいしそうな料理、安い低価格料金… しかし、そのすべての情報が「本物」だとは限りません。あなたがその写真に「いいね」を押したとき、同時に騙されている可能性もあるのです。
- [Grokの生成画像は履歴にすべて残っているので要削除](https://iwb.jp/grok-image-history-needs-delete-all/) - Grokの生成画像は履歴にすべて残っていますので注意が必要です。この記事ではGrokの生成画像の履歴の削除方法について解説しています。
- [Xの生成AI「Grok」で女子小学生の水着画像が生成できてしまう問題](https://iwb.jp/x-generative-ai-grok-can-generate-swimsuit-images-of-elementary-school-girls/) - Grokでは現在画像生成の規制が緩いため、女子小学生の水着画像が生成できてしまいます。入力するキーワードによっては、所持していると逮捕される画像も生成できてしまうので、Grokの画像生成を使用する際は注意が必要です。
- [Amazon Cognitoのユーザー属性をawsコマンドで変更する方法](https://iwb.jp/amazon-cognito-update-user-attributes-with-aws-cli/) - Amazon Cognitoのユーザー属性はawsコマンドを使用して変更することができます。awsコマンドならユーザー属性のWebページにアクセスして手動で変更するよりも素早く変更できます。
- [NHN Japanなど大手Webサイトでもやってしまうプルダウンメニューの不具合](https://iwb.jp/pulldown-menu-mistake/) - 最近のWebサイトにはプルダウンメニューを取り入れているところが多くある。プルダウンメニューとはメニューをクリ
- [WordPressでブログサイトを作成するときに入れた8つのプラグイン](https://iwb.jp/wp8prugin/) - 本サイトで最初にインストールした8つのプラグイン。 WordPressでブログサイトを構築するのであれば これ
- [JavaScriptだけでシークレットキーからTOTPの6桁認証コードを生成する方法](https://iwb.jp/generate-totp-6digit-code-from-secret-key-using-only-javascript/) - TOTP(時間ベースのワンタイムパスワード)の6桁認証コードはシークレットキーがあればJavaScriptで処理して生成できます。
- [Cognito+Amplifyのアカウント作成でメールアドレスとパスワード以外も入力可能にする方法](https://iwb.jp/cognito-amplify-signup-with-additional-fields/) - この記事ではCognitoとAmplifyでアカウント作成画面にユーザー名と年齢の入力項目を追加する方法について解説します。
- [React + Cognito + Amplifyでログイン認証機能を作成する方法](https://iwb.jp/react-cognito-amplify-login-auth/) - ReactにAWS CognitoとAmplifyを組み合わせて、メールアドレスとパスワードによるログイン認証機能を実装する方法を解説します。AmplifyのAuthenticatorコンポーネントを用いた認証フローや、各種カスタマイズ手順についても解説しています。
- [GoogleスプレッドシートのImportJSON関数で読み込む方法](https://iwb.jp/google-spreadsheets-gas-import-json-function/) - GoogleスプレッドシートにはIMPORT関連の関数が5つありますが、JSONを読み込むための関数は用意されていません。そのため、JSONを読み込むための関数は自作する必要があります。
- [テキスト入りの波のCSSアニメーションの作成方法](https://iwb.jp/svg-text-wave-css-animation/) - 波のCSSアニメーションのコードは検索するといくつか表示されるですが、テキスト入りのコードがないのと、コードが複雑なものが多いので簡単に作れるコードを作成して見ました。
- [Zoomはデフォルト設定では最新バージョンに自動アップデートされないので注意が必要](https://iwb.jp/zoom-default-settings-no-auto-update/) - Zoomで複数の脆弱性が発見された 先週、Zoomに複数の脆弱性が発見されたというお知らせがあった。 Zoom
- [HTMLHintを使用しているなら必ず知るべき27のルール](https://iwb.jp/htmlhint-27-list-of-rules/) - HTMLHintを使用している人は多いがHTMLHintのルールについて知っている人は少ない。HTMLHintのList of rulesに記載されているものは27個しかないので、HTMLHintを使用するのであればすべて覚えたほうが良いだろう。
- [HTMLHintはURLを直接指定してチェックをすることもできる](https://iwb.jp/htmlhint-can-check-url-code-directly/) - HTMLHintはURLを直接指定してチェックすることも可能になっている。例えばhtmlhintのあとに先程のURLを入れて実行すれば同様にHTMLHintで検出することができる。$ htmlhint https://iwb.jp/s/htmlhint-can-check-url-code-directly/
- [1分でできるGemini CLIによるWebアプリ開発](https://iwb.jp/gemini-cli-web-app-development/) - Gemini CLIとはGoogleが開発したGeminiの生成AIモデルをコマンドライン上（ターミナルやPowerShell）で操作できる開発者向けツールです。Gemini CLIを使用すればWebアプリを1分で開発できます。
- [PlaywrightでWebページやAPIのモックを作成する方法](https://iwb.jp/playwright-web-page-api-mock-record-har-file/) - Playwrightはブラウザ自動操作だけでなく、API通信をモック(偽装)する機能も備えています。これにより、開発中やバックエンドが未実装の段階でもフロントエンドのテストやUI開発を進めることが可能になります。
- [ところざわサクラタウンの角川食堂カレーが超絶美味@東所沢](https://iwb.jp/tokorozawa-sakuratown-kadokawa-shokudou-curry/) - 角川食堂のカレーは写真を見ての通り一般的な食堂で出されるカレーとは見た目からして違う。見た目も香りもカレー専門店でないとお目にかかれないようなかなり本格的なものになっている。
- [JavaScriptのSummarizer APIの生成AIで文章を要約可能](https://iwb.jp/javascript-summarizer-api-generate-ai-summarize-text/) - Summarizer APIはChromeのローカルAIモデル (Gemini Nano) を活用した要約用APIです。JavaScriptでSummarizer APIを使用して、以下のようなコードを書けば文章を生成AIで要約してくれます。
- [React 17でuseTransition (isPending, startTransition)を使って読込中と二重クリック防止を実装する方法](https://iwb.jp/react17-usetransition-ispending-starttransition-customhook-loading-doubleclick-prevent/) - React 17以下ではuseTransitionは使えませんが、useFakeTransitionのカスタムフックを作成すればisPendingとstartTransitionを使用した、読込中と二重クリック防止を実装できます。
- [VS CodeのPlaywright拡張機能のTESTINGが使用不可になる原因](https://iwb.jp/vscode-playwright-no-tests-have-been-found-in-this-workspace-yet/) - TESTINGのTEST EXPLORERに「No tests have been found in this workspace yet.」と表示される場合はplaywright.config.ts (playwright.config.js) が選択されていないとVS Code (Cursor) でTESTINGが使用できません。
- [短縮URLのQRコードから不正サイトへ誘導される問題と対処法](https://iwb.jp/problem-of-shortened-url-qr-codes-leading-to-unauthorized-sites/) - 先月から今月にかけて、短縮URLのQRコードから不正サイトへ誘導される事例がありました。問題となったQRコードは学習院大学、スーパーのいなげや、オートバックスセブンなどです。問題はQRコードではなく短縮URLを行うWebページにありました。
- [JavaScriptのジェネレータ関数とユーティリティで楽に配列を生成する関数](https://iwb.jp/javascript-generator-function-utility-array-create/) - JavaScriptのジェネレータ関数を使って配列を生成する方法を紹介。話題の記事を参考に、実際に動くサンプルコードに書き直し、ランダム要素を加えたゲーム風の実装も掲載。手を動かして学びたい方におすすめです。
- [1分でわかるReactの状態管理ライブラリZustandの使い方](https://iwb.jp/react-state-management-library-zustand-usage/) - ZustandはReactの状態管理ライブラリです。Reactの状態管理ライブラリはRedux, Recoil, Jotaiなどが有名ですが、Zustandはこの3つよりも簡単なコードで状態管理をすることができます。
- [PuppeteerによるヘッドレスChromeの使い方 evaluate](https://iwb.jp/puppeteer-headless-chrome-evaluate/) - PuppeteerとはChromeを操って各種チェックなどを行えるようにするもの。スクリプトを作成してnode test.jsを実行すればChromeが指定した文字列を検索して、さらにスクリーンショットを保存するなどの操作ができる。
- [2020年以前の食べログ百名店のURLが変わってリンク切れが大量発生している](https://iwb.jp/tabelog-top-100-restaurants-before-2020-url-changes-causing-broken-links/) - 2020年以前の食べログ百名店のURLが変更されて、リンク切れしているWebサイトが大量発生しているので、該当のリンクをWebページ内に貼ったことがある方は正規表現で置換して修正することをオススメします。
- [TypeScriptでオブジェクトにはReadonlyではなくDeepReadonlyを使うべき](https://iwb.jp/typescript-object-type-readonly-to-deepreadonly/) - TypeScriptのReadonlyは、オブジェクトのプロパティを読み取り専用（変更不可）にするためのユーティリティ型ですが、Readonlyは浅い(shallow)読み取り専用なのでDeepReadonlyを使用したほうが安全です。
- [Reactで数字をuseStateで追加する際によくある3つの間違い](https://iwb.jp/react-usestate-form-number-null-mistakes/) - ReactのuseStateでフォームの数字を変数に追加したいケースがよくありますが、Reactおよびフォームの仕様を理解していないと、意図しない結果になってしまうことがあります。
- [UUIDはBase58に変換することで短く、可読性の高いIDにできる](https://iwb.jp/uuid-v4-v7-base58-short-readable-id/) - UUIDは通常36文字ですが、Base58でエンコードすると約22文字になります。また、「0（ゼロ）・O（オー）・I（アイ）・l（エル）」など混同しやすい文字を除外しているため、読み間違いを防げます。
- [フロントエンドでUUIDはv4ではなくv7を使ったほうが良い](https://iwb.jp/javascript-npm-uuid-v4-v7/) - JavaScript (TypeScript)でUUID v7を使う方法はいくつかありますが、npmでuuidv7をインポートして使うのがオススメです。UUID v7を日付に変換する関数を作成しておけば、UUIDから日付を簡単に生成できるので便利です。
- [ConsoleからWebサイトがRSSに対応しているか確認する方法](https://iwb.jp/browser-console-check-rss-support/) - ブラウザのConsoleに記事に記載しているスクリプトを貼り付けて実行すれば、WebサイトがRSSに対応しているか確認できます。
- [JavaScriptで文字列の小数点の桁のチェック後はparseFloatも必要](https://iwb.jp/javascript-parsefloat-after-check-decimal-places/) - JavaScriptで小数点の判定を間違えて '0123.00' や '0123.000' などを送ってしまっているケースがありますが、余分な0はparseFloat()で取り除けます。
- [CSSのfont-sizeのpxからremの変換はpostcss-pxtoremを使うべき](https://iwb.jp/css-font-size-convert-px-to-rem-npm-install-postcss-pxtorem/) - font-size に rem を使うべきかどうかの議論と、remへの変換方法として「calc」よりも「postcss-pxtorem」を使う利点について解説します。Vite環境での導入手順も紹介。
- [Viteでnpm run dev実行後のURLを消えないようにする方法](https://iwb.jp/vite-npm-run-dev-localhost-url-keep-visible/) - Viteでnpm run devを実行時にはlocalhostのURLがターミナル上に表示されますが、vite.config.tsやtsconfig.jsonなどのファイルを更新すると、URLの表示が消えてしまいます。この仕様はViteの設定ファイル (vite.config.ts) のdefineConfigに「clearScreen: false」を追記することでターミナル出力をクリアする設定を無効化できます。
- [Reactでおみくじのようなランダム表示はuseMemoを使用する](https://iwb.jp/react-omikuji-random-display-usememo-usestate/) - Reactでランダムな表示を扱う際、何も考えずにMath.random()を直接コンポーネント内部で実行してしまうと、再レンダリングのたびに結果が変わるという問題が起きます。
- [HTMLとCSSだけで日本国旗と旭日旗を作る方法](https://iwb.jp/html-css-japan-flag-and-rising-sun-flag/) - HTMLとCSSだけで日本国旗 HTML
- [React 19のドキュメントメタデータでlinkやscriptなどを使うときの注意点](https://iwb.jp/react19-document-metadata-title-link-script/) - React 19ではドキュメントメタデータをサポートしているため、コンポーネント内に , , などを直接記述できますが、使用する際はいくつかの注意点があります。
- [ReactやNext.jsのWebサイト増加が原因でlang="en"が増えた問題について](https://iwb.jp/react-nextjs-website-lang-en-ja/) - 最近のWebサイトはReactやNext.jsで制作されたものが増えており、その影響でWebサイトが「lang="ja"」ではなく「lang="en"」になっているケースが以前より増えています。
- [React 19はuseEffect, useStateではなくSuspense, useでfetchする](https://iwb.jp/react19-fetch-with-suspense-and-use-instead-of-useeffect-usestate/) - Reactでfetchでデータを取得するコードはReact 19より前の古いバージョンでは以下のようなuseEffect, useStateを使用した古い書き方がよく使われていますが、React 19以降はSuspense, useを使用して簡潔なコードでfetchできます。
- [pnpmがnvm管理によりアップデートできないときの対処法](https://iwb.jp/pnpm-npm-nvm-nodejs-update/) - pnpmでアップデートコマンドを実行してもアップデートできないことがあります。which pnpm を実行して、nvm管理になっているのであれば、nvm管理のディレクトリに古いバージョンが残っていて、それを読み込んでいるためアップデートできない可能性があります。
- [React 17と18でメモ化を自動化する方法](https://iwb.jp/react-compiler-usage-to-automatically-memoize-in-react17-18/) - Reactのメモ化とは コンポーネントや関数の「計算結果」を記憶して、再利用する仕組みのことです。 コンポーネ
- [React 19で使えるメモ化を自動化するReact Compilerの使い方](https://iwb.jp/react-compiler-usage-to-automatically-memoize-in-react19/) - React CompilerはReactのコードを自動でメモ化(最適化)してくれる新機能です。React Compilerはバージョン17および18でも動作しますが、17と18は正常に動作しないことがあり、最も良く動作するのはReact 19からとなっているので、特に理由がなければReact 19で使用してください。
- [韓国K-POPアイドル「ENHYPEN」が世界地図から日本を削除した件](https://iwb.jp/korean-kpop-idol-enhypen-removes-japan-from-map/) - BTSの弟分の韓国K-POPアイドル「ENHYPEN」の公式グッズ内のPASSPORTの世界地図から日本が削除されていたので炎上した。(現在は修正済み)ENHYPENの公式サイトの謝罪文によるとデザイン担当者がpixabayで「World map」で検索して表示された日本が存在しない世界地図を使用したことが原因だ。
- [JavaScriptを高速化するgoogle-closure-compilerの使い方](https://iwb.jp/javascript-npm-google-closure-compiler-how-to-use/) - google-closure-compilerはJavaScript のダウンロードと実行を高速化するためのツールです。このライブラリは、JavaScript を解析して分析し、不要なコードを削除して書き換え、残りの部分を最小限に抑えます。
- [MUIのSelectコンポーネントでデータが多い場合はAutocompleteが最適](https://iwb.jp/mui-select-component-and-autocomplete/) - MUIのSelectコンポーネントは、HTMLのselect要素に相当するプルダウンメニューをReactで簡単に実装できるUI部品です。アクセシビリティやカスタマイズ性にも優れています。一方、Autocompleteコンポーネントは、ユーザーの入力に応じて候補を表示する機能を持ち、HTMLのdatalist要素に似た役割を果たします。
- [WordPressにはアップロード画像のExif削除プラグインを必ずインストールするべき](https://iwb.jp/wordpress-must-install-exif-removal-plugin-for-uploaded-images/) - WordPressでExifを自動削除するプラグイン (Remove Exif) をインストールすれば、画像アップロード時にExif情報が削除されて、画像から位置情報や撮影日時などが漏洩することがなくなります。
- [MUI (Material UI) ライブラリのReactでの使い方](https://iwb.jp/mui-material-ui-library-react-how-to-use/) - MUIとはReact用のUIコンポーネントライブラリのインストール方法や使い方について解説しています。
- [MUIライブラリは大量のCheckboxでチェックの表示が遅くなる](https://iwb.jp/mui-checkbox-performance-issue-with-large-number/) - MUIライブラリとはReact用のUIコンポーネントライブラリです。MUIを使用することでMaterial Designに基づくスタイルが簡単に作れて、Reactとの相性も良いのでよく利用されます。便利なライブラリですが、入力フォームのCheckboxコンポーネントは大量に使用するとチェックボックスを押下した際のチェックのオン・オフの表示が遅くなります。
- [PlaywrightでOSのダイアログのスクリーンショットを保存する方法](https://iwb.jp/playwright-save-os-dialog-screenshot/) - Playwrightでは例えばをクリックしたときに表示されるOSのダイアログは保存できません。node-screenshotsを使用すればOSのダイアログも保存可能です。
- [npm installでvulnerabilitiesが表示されたら、すぐに直すべき](https://iwb.jp/npm-install-vulnerabilities-low-moderate-high-audit-fix/) - プロジェクトフォルダをGitHubなどからgit cloneして、npm installを実行した際に「vulnerabilities」が表示されたら、すぐに直すべきです。
- [CSSのdisplay: gridよりdisplay: inline-gridのほうが固定幅に最適](https://iwb.jp/css-display-grid-and-display-inline-grid/) - 固定幅のグリッドレイアウトの場合、親要素にmarginがつかないのであれば「display: grid」を「display: inline-grid」に変更すれば、親要素のwidthを省略することができます。
- [TypeScriptのaxios.get<Response>はレスポンスの型を検証してないので注意が必要](https://iwb.jp/typescript-axios-get-type-response-not-working/) - TypeScript初心者だと、このコードで実行時のレスポンスの型の検証ができると思っている方を見かけますが、このコードでレスポンスの型の検証は実行されないです。
- [CSSのグラデーションはRGBだと汚く、oklchはきれいに表示される](https://iwb.jp/css-linear-gradient-rgb-oklch/) - CSSのグラデーションはRGBだと汚く、oklchではきれいに表示されます。以下の例のようにRGBとoklchのグラデーションで見比べると一目瞭然です。
- [pointer-events: noneが要素の無効化だと誤解しているケースが多い](https://iwb.jp/css-pointer-events-none-inert-disabled/) - Webサイトを見ているとCSSのpointer-events: noneが要素の無効化だと誤解して使用されているケースが多いですが、これは間違いです。
- [豊島区の新型コロナワクチン 接種予約サイト予約時の注意点](https://iwb.jp/toshimaku-covid19-vaccine-booking-site/) - 東京都豊島区では2021年8月1日(日)から「集団接種」を中心とした接種体制に変わり予約が再開した。新型コロナワクチン 接種予約サイトの出来が悪く、予約できないと勘違いしてしまう人が続出しそうな作りだったので注意点を記載した。
- [1分でわかる組織がインボイス制度に登録済みか調べる方法](https://iwb.jp/find-out-if-organization-is-registered-with-the-invoice-system/) - 組織がインボイス制度に登録済みか調べるには、まず納税している組織の「法人番号」を国税庁が提供する法人番号システムで調べます。そのあと、国税庁インボイス制度適格請求書発行事業者公表サイトの登録番号のところに法人番号を入力して検索すれば、インボイス制度適格請求書発行事業者かどうかがわかります。
- [テキストがコピー不可のWebサイトでテキストをコピーする3つの方法](https://iwb.jp/disabled-text-copy-website/) - Webサイトを閲覧しているとテキスト部分をドラッグしてもコピーできないサイトをたまに見かける。このようなテキストがコピー不可のWebサイトでテキストをコピーするには3つの手法がある。1. JavaScriptを無効にする 2. CSSのuser-selectを無効にする 3. 画像をOCRでテキスト化する Ex. Googleレンズでテキストをコピーする
- [MUIのGrid v2がGridになり、GridがGrid Legacyになりました](https://iwb.jp/material-ui-mui-gridv2-grid/) - MUI (Material UI)のGrid v2がGridに変更になりました。これにより、いままでのGridはGrid Legacyとなり、引き続きDEPRECATED (非推奨)となりました。
- [会社のブラウザだとPlaywrightがエラーになる理由と対処法](https://iwb.jp/playwright-browser-error-target-page-context-or-browser-has-been-closed/) - 会社のブラウザだとPlaywright実行時に「Error: Target page, context or browser has been closed」のエラーが表示されて実行できないケースがあります。この記事ではそのようなケースの理由と対処法を記載しています。
- [React + ExcelJSでExcel, CSV, TSVファイルを出力する方法](https://iwb.jp/react-exceljs-xlsx-and-csv-file-download/) - ExcelJSでExcelやCSVファイルを出力 Reactで作成しているWebサイトまたはWebアプリで、特
- [脱jQueryの代替コードの記事はわかりづらいものが多いので注意](https://iwb.jp/javascript-jquery-alternative-code-articles-are-difficult-to-understand/) - after(), append(), before(), children(), closest(), prepend(). remove()などのメソッドはそのまま使えるのに、わかりづらい書き方をした代替コードを記載しているWebサイトがあるので注意が必要です。
- [最低限の$のDOM操作を実行するためだけのjQueryのようなJavaScript](https://iwb.jp/minimum-dom-exec-jquery-javascript/) - 最近はjQueryを使用しなくても大半のことはNativeのJavaScriptで記述できるためjQueryの使用頻度はかなり低い。しかし、jQueryの$などを使用しないとコードが長くなってしまうのが難点だ。最低限の$のDOM操作を実行できるJavaScriptのコードを作成しておけばjQueryを読み込まなくてもonやattrなどが使用できるようになる。
- [書評：入門 ウェブ分析論~アクセス解析を成果につなげるための新・基礎知識　増補改訂版](https://iwb.jp/introduction-web-analytics/) - 入門ウェブ分析論の本は2冊ある 入門ウェブ分析論の本は2冊あるがグレーの表紙のものが2012年3月22日に発売
- [VS CodeにはPascal CaseをCamel Caseに変換できないバグがある](https://iwb.jp/vscode-has-transform-convert-pascal-case-to-camel-case-bug/) - VS Codeには拡張機能なしで英語文字列をPascal Case (パスカルケース)やCamel Case (キャメルケース)に変換する機能があります。「Transform to 〜」の変換機能は便利ですが、Pascal CaseをCamel Caseに変換できないバグがあります。
- [JSONとYAMLの変換方法と変換ツールの使い方](https://iwb.jp/json-yaml-converter-online/) - JSONやYAMLを使用していると、「JSONからYAML」または「YAMLからJSON」に変換したいことがあります。そのような場合は「JSON ⇄ YAML Converter Online」というWebツールを使用すればJSONとYAMLをコードを貼って、矢印ボタンを押すだけで変換できます。一般的な変換ツールよりも見た目がシンプルで、高速に動作します。
- [広告ブロッカー(Adblock)の除外設定より広告ブロック検出のほうが現実的な対応である](https://iwb.jp/ad-blocker-adblock-exclusion-but-its-useless/) - 「【お願い】広告ブロッカー（Adblock）の除外設定をお願いします。」という記事が話題になっていた。協力ベースだとほとんどの人は除外設定にしないので、広告収入を維持したいのであれば、広告ブロッカーを検出して、閲覧したいユーザーに対して広告ブロッカーの除外設定を強制する方が良いでしょう。
- [広告ブロックによる損失収益の回復を設定すれば収益をアップできる](https://iwb.jp/google-adsense-recover-revenue-loss-from-adblock-to-increase-earnings/) - Googleアドセンスの広告ブロックによる損失収益の回復を設定すれば広告収益をアップできます。
- [Chrome v134から::selectionでテキスト選択時に消えることがあるので注意](https://iwb.jp/chrome-v134-css-selection-change-text-hidden/) - Chrome v134から::selectionの子要素に背景色が適用されていて、::selectionと背景色の色が同じ場合は選択時にテキストが消えるので注意が必要です。
- [広告ブロッカーの検出数を計測できるAdmiralの使い方](https://iwb.jp/admiral-adblock-detections-and-analytics/) - Admiralは広告ブロッカーの検出数を計測できるツールです。HTMLコード内にタグを貼り付けるだけで、広告ブロックされた回数を計測できます。
- [スペルミスを防げるCSpell(スペルチェッカー)の使い方](https://iwb.jp/cspell-spell-check-for-code/) - CSpellとは CSpellはソースコードなどのスペルミスを検出するためのスペルチェッカーです。 英単語のス
- [TypeScriptで学ぶ「CanvasRenderingContext2D」の使い方](https://iwb.jp/typescript-learn-canvas-rendering-context-2d/) - CanvasRenderingContext2DはHTML5 の 要素で2D描画を行うためのインターフェースです。 要素の getContext('2d') を呼び出すことで取得でき、図形の描画、テキストの描画、画像の操作などが可能になります。
- [Playwrightで開いたページにユーザースタイルを適用する方法](https://iwb.jp/playwright-webpage-css-add-style-tag/) - Playwrightではpage.addStyleTagを使用することでユーザースタイル(CSS)を適用できます。
- [古いNoto Sans JPのCSSを使うと一部の文字が細くなってしまう](https://iwb.jp/google-fonts-old-noto-sans-japanese-css-deprecated/) - Webサイトを閲覧していると、たまに文字の一部が他の文字より細く表示されてしまっていることがあります。これはGoogleフォントで古いNoto Sans JapaneseのCSSが読み込まれていることが原因の可能性があります。
- [CSSでテキストの上下の余白を削除できるtext-boxの使い方と注意点](https://iwb.jp/css-text-box-trim-both-cap-alphabetic/) - text-boxはCSSでテキストボックスの余白を削除するプロパティです。テキストボックスの余白があると、上下中央揃えをした際にきれいに配置されません。しかし、text-boxで上下の余白を削除すればこの問題を解決できます。
- [Playwrightでtableのtdの値を高速で取得する3行のコード](https://iwb.jp/playwright-get-table-row-td-all-data/) - Playwrightでtableのtdの値の取得に無駄に長いコードを書いている方をよく見かけますが、tableのtdの値は3行のコードで取得可能です。
- [react-serverでNext.jsのようにReactで静的ページを生成する方法](https://iwb.jp/react-server-lazarv-generate-static-page/) - react-serverを使用すればReactでも静的ページを生成できます。
- [Playwrightのnpm run test-ctでコンポーネントテストする方法](https://iwb.jp/playwright-npm-run-test-ct-react-component/) - Playwrightは「npm init playwright@latest -- --ct」でコンポーネントテスト環境のセットアップをすれば「npm run test-ct」でコンポネートのテストを実行できます。
- [Playwrightで作成する高機能リンクチェッカーの作り方](https://iwb.jp/playwright-link-checker/) - Playwrightを利用すればリンクチェッカーを簡単に自作することができます。Webサイトを制作されている場合はプロジェクトディレクトリに追加しておくことをオススメします。
- [JavaScriptのtoLocaleString()を 'ja-JP' を省略して使用してはいけない](https://iwb.jp/javascript-tolocalestring-required-ja-jp/) - JavaScriptのtoLocaleString()を 'ja-JP' を省略して使用すると、海外で閲覧した際に表示内容が変わってしまいます。
- [超簡単にモーダル(ダイアログ)が作れるdialogタグの使い方](https://iwb.jp/dialog-tag-modal-html-css-javascript-usage/) - dialogタグはモーダル(ダイアログ)を超簡単に実装するための要素です。dialogタグを使用している場合は、showModal()で開く、close()で閉じる処理が実行できます。
- [Playwrightで撮影したwebm動画をmp4に変換する方法](https://iwb.jp/playwright-video-ffmpeg-webm-convert-mp4/) - Playwrightを使用すればpage.screenshot()メソッドでスクリーンショット画像を保存できますが、設定を追加すれば動画撮影をしてwebmファイルでの動画の保存もできます。webmはffmpegでmp4に変換すればVS Codeを含め、多くの環境で再生できるようになります。
- [ExcelJSによるエクセルの新規作成と読み込み方法](https://iwb.jp/exceljs-howto-writing-and-reading-xlsx-csv/) - ExcelJSとは ExcelJSは、Node.js環境でExcelファイルおよびCSVファイルを操作するライ
- [1分でわかるJavaScriptのIndexedDBの使い方](https://iwb.jp/javascript-indexed-db-store-get-add-count/) - IndexedDBは、ブラウザ内で利用可能なキーバリューストア型の非同期データベースです。Web Storage API (sessionStorage or localStorage) は各ブラウザ対応を考慮した場合、最大5MBしか保存できませんが、IndexedDBなら1GBは保存できるので、データ量が多い場合は必然的にIndexedDBを使用します。
- [scroll-stateによりCSSのみでトップに戻るボタンの表示・非表示が実装可能になった](https://iwb.jp/css-scroll-state-back-to-top-button-show-hide/) - scroll-stateを使用することにより、CSSのみでトップに戻るボタンの表示・非表示が実装可能になりました。
- [「関数型プログラミングに目覚めた!」を読んだが目覚めなかった!](https://iwb.jp/functional-javascript-book/) - 最近話題になっていた関数型プログラミングに目覚めた! IQ145の女子高校生の先輩から受けた特訓5日間という本を読んだ。内容は関数型プログラミング＋JavaScriptライブラリ＋哲学史＋ラノベ。
- [Googleアナリティクスの企業ドメイン抽出用カスタムレポート](https://iwb.jp/corp-domain-custom-report/) - GoogleアナリティクスでWebサイトに訪問している企業のドメイン（co.jp）のみを抽出するためのカスタム
- [ブラウザの戻るボタンで表示内容が変わらないときの解決方法](https://iwb.jp/javascript-onpageshow-event-persisted-webpage-cache/) - WebサイトでHTMLページでリンクをクリックして、ブラウザの戻るボタンを押して戻った際に表示内容が変わっていないことがあります。この問題はonpageshowを使用してevent.persistedのboolean値でキャッシュを判定すれば解決できます。
- [JavaScriptはlengthや正規表現などでは文字数をカウントできない](https://iwb.jp/javascript-intl-segmenter-ja-jp-granularity-grapheme-length-count/) - JavaScriptでlengthは文字数をカウントするものと参考書などで習いますが、正確には文字数ではなくUTF-16のコード単位の数を返します。そのため、「🇯🇵𠮷野家」のような文字列は人間の目には4文字に見えますが、lengthを使用すると8文字としてカウントされます。
- [JavaScriptを書くなら必ず覚えるべきド・モルガンの法則](https://iwb.jp/javascript-essential-demorgans-law-not-a-and-b/) - ド・モルガンの法則は論理演算における否定（!）の扱い方を示す法則です。この法則により複雑な条件を簡単に書き換えたり、コードを理解しやすくしたりできます。JavaScriptで書くとそれぞれ次のように表現できます。
- [Next.jsだと検索結果のtitleがApplication error: a client-side exception has occurredになることがある](https://iwb.jp/toridoll-nextjs-application-error-a-client-side-exception-has-occurred/) - Next.jsだと検索結果のtitleがApplication error: a client-side exception has occurredになることがある
- [CSSの「word-break: break-all」は英文が読みづらくなるので使用してはいけない](https://iwb.jp/css-word-break-break-all-is-deprecated/) - CSSの「word-break: break-all」は英文が読みづらくなるので使用してはいけない。代わりに「overflow-wrap: anywhere;」と「line-break: strict;」を適用するのが日本では主流になっています。
- [郵便番号データutf_all.csvをJavaScriptで使うなら分割が必要](https://iwb.jp/javascript-utf-all-csv-zip-code-data-split/) - utf_all.csvとは日本郵便の郵便番号データです。以前は「KEN_ALL.CSV」というファイル名でしたが、2023年6月からファイル名が「utf_all.csv」に変更となり、UTF-8形式になったのでUTF-8のへの変換処理が必要なくなりました。さらに「複数レコードへの分割の廃止」と「半角カタカナから全角カタカナへの変更」の改善も行われたので、使い勝手が向上しました。
- [「Mac Blu-ray Player」より安い「ZEUS PLAYER」がブルーレイ再生にオススメ](https://iwb.jp/zeus-player-better-than-mac-blu-ray-player/) - Macで外付けブルーレイドライブを接続してブルーレイディスクを再生したいケースがあるかと思いますが、MacでBlu-ray Discを再生するは外付けブルーレイドライブだけでなく有料ソフトウェアの購入が必要になります。
- [AIOSEOのWritingAssistantPost.phpの警告が表示されないようにする方法](https://iwb.jp/wordpress-aioseo-writing-assistant-post-php-warning-fix/) - WordPressの新規投稿画面にAIOSEOプラグインのWritingAssistantPost.phpの警告を表示されないようにする方法
- [WordPressのPHP内にcreate_functionがあるとバージョン8以上でエラーになる](https://iwb.jp/wordpress-php-create-function-version-8-error/) - create_functionはPHPで匿名関数（無名関数）を作成するための関数です。PHPのバージョン8以降ではcreate_functionがあるコードはエラーになります。
- [WordPressのPHPがv7.3.33以下だとAIOSEOが無効化されるので注意](https://iwb.jp/wordpress-php-v7-3-33-disable-aioseo-plugin-from-2025/) - AIOSEOプラグインはWordPressのPHPがv7.3.33以下だと2024年12月31日でサポート切れとなり、2025年1月1日から自動で無効化されます。
- [動くWebデザインアイデア帳(実践編)はコードが汚く間違いが多い](https://iwb.jp/socym-coco-factory-ugokuweb-code02-sample/) - 動くWebデザインアイデア帳とはjQueryとCSSアニメーションをはじめたばかりの方向きの逆引きリストが掲載された本。2021年9月現在は2冊が刊行されており、話題になっていたので実践編の方を読んだのだがサンプルファイルのコードが汚く、間違いが多かったので問題点をまとめた。
- [フロントエンドエンジニアが習得するべき3つのAdobe製品](https://iwb.jp/three-adobe-products-front-end-engineers/) - HTML, CSS, JavaScriptなどのコーディングを行うフロントエンドエンジニアであればAdobe製品をまったく使用しないということはまずないだろう。15年くらい前だとDreamweaver, Fireworks, Flashなどがよく使用されていたが、現在はこれらを仕事で使用しているフロントエンドエンジニアはほとんどいない。この記事ではフロントエンドエンジニアなら習得したほうが良いAdobe製品を3つ紹介する。
- [ChatGPTのCode InterpreterでGIFアニメーションを作成する方法](https://iwb.jp/how-to-create-gif-animation-with-chat-gpt-code-interpreter/) - GIFアニメーションを作成するためにはツールの使い方を知る必要がありますが、ChatGPTのCode Interpreterを使用すれば、画像をアップロードしてテキストで指示するだけでGIFアニメーションが作成できます。
- [Svelteのimportで読み込んだ要素のCSS適用には:globalを使用する](https://iwb.jp/use-global-to-apply-css-to-elements-loaded-with-svelte-import/) - Svelteはimportで.svelteファイルを読み込めるので、SVGやslotを含む.svelteファイルを読み込んで利用することが多い。.svelteファイルを読み込んだ要素にCSSを適用させたいことがあるが、Svelteでは普通に指定しただけではスタイルシートが適用されない。
- [SvelteKitではなくSvelteをコマンドでインストールする方法](https://iwb.jp/javascript-svelte-and-sveltekit-install-command/) - SvelteをインストールするにはReactやVue.jsと同様にターミナルでコマンドを実行してインストールします。
- [bun testがvitestより爆速らしいのでテストしたが期待外れだった](https://iwb.jp/bun-test-vs-vitest-compare-speed/) - vitestをbun testに変えても必ず爆速になるわけではないようです。
- [Gitを使用しているなら現在のブランチ名は常時表示するべし](https://iwb.jp/git-branch-name-always-displayed-terminal-powershell/) - ブランチ名は常時表示するべし Gitを使用している際に現在のブランチ名の確認のために「git branch」を
- [git pullはエイリアスで現在のブランチをプルするとミスが減る](https://iwb.jp/git-pull-origin-current-branch-alias-reduce-mistakes/) - Gitを使用していると git pull コマンドがよく使われますが、現在のブランチが feature/foo なのに間違えて feature/bar や main など現在以外のブランチを git pull コマンドで誤って読み込んでしまう人は多いです。この問題は現在のブランチをプルするエイリアスを登録することで解決できます。
- [Reactでブロッキングが発生するときはuseTransitionで防げる](https://iwb.jp/react-ui-blocking-start-use-transition/) - Reactで開発していると、処理が重いコンポーネントやイベントハンドラが原因で、UIが一時的にフリーズしてしまう「ブロッキング」が発生します。この問題はuseTransition()を使用することで解決できます。
- [愚かなCSSはブレークポイントを誤る](https://iwb.jp/css-media-min-width-breakpoint-kanaten/) - CSSのブレークポイントの指定を誤ると表示崩れや非表示にする箇所が表示されてしまうなど、Webページの表示内容に悪影響が発生します。特に気をつけるポイントなどを記事にまとめました。
- [コードとコマンド出力を画像生成できるFreezeの使い方](https://iwb.jp/freeze-generate-images-of-code-and-terminal-output/) - Freezeはコードの書かれたファイルやコマンドを指定するだけで、画像生成ができるツールです。「freeze add.js -o add.png」のように実行するだけで、簡単に画像生成ができます。
- [videoタグで動画を表示する際に必ず知っておくべき基礎知識](https://iwb.jp/video-tag-src-source-practice/) - その名の通り動画を表示させるためのHTMLタグ。画像を表示させるのはimgタグだが動画(mp4など)の場合はvideoタグを使用する。この記事ではvideoタグを使用する際の注意点をまとめました。
- [JavaScriptの配列オブジェクトでmapなどの引数は分割代入を使うべし](https://iwb.jp/javascript-array-object-map-reduce-some-destructuring/) - mapなどの引数は分割代入を使うべし JavaScriptのデータが配列オブジェクトで、例えばmapで特定のキ
- [Android端末で必ずやるべきバッテリー充電の上限: 80%設定](https://iwb.jp/android-battery-charge-limit-80-percent-settings/) - Android (Google Pixel) 端末はデフォルトの設定だとバッテリーが劣化しやすいです。この問題はAndroidの設定で、バッテリーの充電の上限を80%に変更することで解決できます。
- [JavaScriptのArray.fromの便利な5つの使い方](https://iwb.jp/javascript-array-from-set-nodelist-numbers-alphabet-hiragana-katakana/) - Array.fromは配列の生成や変換の際に使うと便利なのですが、認知度が低く、便利な使い方を理解している方が少ないので、私が利用している便利な使い方を5つご紹介します。
- [robots.txtで生成AIのクローラーを拒否するとアクセス数が減る](https://iwb.jp/robots-txt-deny-generative-ai-traffic-decrease/) - robots.txtで一部の生成AIのデータ収集クローラーを拒否すると、記事のアクセス数が減ってしまうことがGoogleアナリティクスの結果などから判明しました。
- [ReactのuseMemoはすべての引数の計算結果をキャッシュしているわけではない](https://iwb.jp/react-usememo-all-arguments-not-cache/) - Reactのメモ化にはReact.memo, useCallback, useMemoの3つが使用されますが、useMemoの使い方を誤解している人をよく見かけます。
- [PostgreSQLで連続する日付をgenerate_seriesで追加する方法](https://iwb.jp/postgresql-sequence-generate-series-date/) - PostgreSQLで連続する日付を追加 以下のような日付テーブルがあったとします。 CREATE TABLE
- [Reactでfetchを使用した際にdev環境だと2回リクエストしてしまう問題の解決方法](https://iwb.jp/react-fetch-dev-2-requests-issue/) - Reactでfetchを使用した際にdev環境だと2回リクエストしてしまう問題の解決方法
- [iTerm2をダウンロードした人は偽バージョンでないか要チェック](https://iwb.jp/iterm2-download-virus-version-check/) - 2021年9月に中国のあるユーザが『検索エンジンで「iTerm2」と検索した結果、iterm2.comを偽装したitem2.netという偽サイトに繋がった』と報告した。
- [意外と知られていないJavaScriptのparseIntの使い方](https://iwb.jp/javascript-parseint-how-to-use/) - JavaScriptのparseIntは文字列を整数に変換するためのJavaScriptの組み込み関数です。指定した文字列の先頭から数値に変換できる部分を整数として解析し、それ以外の部分は無視します。数値に変換できなかった場合はNaNが返されます。
- [macOSでDockerを起動してもコマンドを実行できないときの対処法](https://iwb.jp/macos-zsh-command-not-found-docker-error/) - 環境によってはDockerを起動していても、「zsh: command not found: docker」と表示されて実行できないことがありますが、簡単な対処法で解決可能です。
- [Googleカレンダーの日本の祝日に祝日以外があるので要修正](https://iwb.jp/google-calendar-japan-holidays-include-non-holidays-need-fix/) - 2024年8月下旬にGoogleカレンダーに「日本の祝日」に「七五三」「クリスマス」などの日本の祝日以外を追加するという改悪が行われました。この問題は「日本の祝日」の設定を変更することで解決できます。
- [ReactではESLintのno-restricted-globalsでcloseを必ず設定するべき](https://iwb.jp/javascript-react-eslint-no-restricted-globals-close-settings/) - 先日、「【JavaScript】関数名をclose()にするのは気をつけろ」という記事が話題になっていました。closeはウィンドウ(タブ)を閉じるメソッドなので、Reactなどでcloseを上書きせずに onClick={close} を書くとボタンを押したときにウィンドウを閉じてしまいます。
- [意外と知られていないGitのsubmoduleとsubtreeの使い方](https://iwb.jp/git-submodule-subtree-how-to-use/) - Git SubmoduleとGit Subtreeは、どちらもGitリポジトリ内に他のリポジトリを埋め込むための機能です。どちらも使い方や管理方法に大きな違いがあるのですが、違いをよく理解せずに、使い勝手の悪いGit Submoduleが使用されているケースがたまに見られます。
- [JavaScriptのスプレッド構文を使うべき5つの用途](https://iwb.jp/avascript-5-use-cases-for-spread-syntax/) - JavaScriptのスプレッド構文は 1.配列の追加、2. 配列のコピー、3. 関数の引数としての展開、4. オブジェクトの展開、5. 文字列の配列化 の5つの用途に利用できます。
- [shadcn/uiのドキュメントのViteの設定方法は間違いなので、エラーになる](https://iwb.jp/shadcn-ui-button-default-setting-white-not-black/) - shadcn/uiの公式サイトのドキュメントにはViteでの設定方法が書かれていますが、内容が間違っているのでnpx shadcn@latest initを実行しても、「Validating Tailwind CSS.」のエラーが発生して設定できません。
- [SCSSのclamp()関数を使ったfont-size変動関数の作成方法](https://iwb.jp/scss-clamp-function-auto-responsive-font-size/) - Min-Max-Value InterpolationやVS Code拡張機能のClamp It!を使用されている方が多いと思いますが、responsiveFontSize関数を使用したやり方のほうが、コードがシンプルでわかりやすくなるので、こちらを使用することをオススメします。
- [CSSのmask-imageとclip-pathを使用したReveal Animation](https://iwb.jp/css-mask-image-clip-path-transition-reveal-animation/) - 最近アニメの公式サイトでCSSのmask-imageとclip-pathの塗りつぶし画像アニメーションをよく見かけます。このようなアニメーションは一般的にはReveal Animation (リビールアニメーション) と言います。一見すると作るのが難しそうに見えますが、CSSのmask-imageとclip-pathを使えば簡単に作成できます。
- [UTF-8のBOM付き・BOMなしの違いとBOMの追加・削除方法](https://iwb.jp/utf8-with-and-without-bom-and-how-to-add-or-remove-bom/) - UTF-8のBOM付き・BOMなしの違いとBOMの追加・削除方法について解説します。
- [Google日本語入力は専用アプリでアンインストールしないと不具合が生じる](https://iwb.jp/macos-uninstall-google-japanese-input/) - Google日本語入力やATOKをゴミ箱に入れて削除する人をたまに見かけるが、それだと削除(アンインストール)はできません。
- [麺屋ねむ瑠 本郷三丁目の人気烏賊煮干ラーメン屋の行き方と感想](https://iwb.jp/nemuru-ramen-hongo-sanchome/) - 麺屋ねむ瑠とは本郷三丁目にある人気烏賊煮干ラーメン屋。こだわりのイカの煮干を使用したイカ風味のラーメンが名物。完成度の高さから「食べログ ラーメン 百名店 TOKYO 2018」に選出されている。お店の場所は東京メトロ丸ノ内線「本郷三丁目」駅(1番出口)または都営大江戸線「本郷三丁目」駅(3番出口)から春日通りへ徒歩2分。
- [JavaScriptオブジェクトで参照渡し防止にはObject.create()を使用する](https://iwb.jp/javascript-object-call-by-reference-create/) - 変数に代入が行われる際に値をそのまま渡すのではなく、参照先を渡すような仕様。const me = person という記述だとmeにpersonを代入する際に参照先を渡しているのでme.name = 'Yamada' にすると personのnameも 'Yamada' になる。
- [Reactでaxios.getを複数回使うときはPromise.allを使わないとレンダリング回数が増えてしまう](https://iwb.jp/react-api-use-get-axios-all-for-rendering/) - Reactでaxios.getを複数回使うときはPromise.allを使わないとレンダリング回数が増えてしまうことがあります。
- [CSS・JavaScript・GIFアニメーションやVideoタグの動画の止め方](https://iwb.jp/stop-css-javascript-animation-video-tag-movie/) - Webサイトを作成していると確認のため動きを止めたい箇所がある。CSS・JavaScript・GIFアニメーションやVideoタグの動画などだ。Chromeデベロッパーツールを使用すればこれらの動きを簡単に停止させることが可能だ。
- [VS Code, Vite, Reactの環境にeslint-plugin-reactを設定する方法と推奨ルール](https://iwb.jp/vscode-vite-react-eslint-plugin-react-settings/) - eslint-plugin-reactとは eslint-plugin-reactとはReactのコード品質を
- [Photoshopでマイナンバーカード申請の証明写真を作成してコンビニで40円で印刷する方法](https://iwb.jp/mynumber-card-application-photoshop-print/) - 個人番号カード(マイナンバーカード)交付申請書申請には横3.5cm、縦4.5cmの証明写真の貼り付けが必須になっている。証明写真は証明写真機で作ると料金が700円と高額だが、Photoshopで作成してコンビニで印刷すれば40円で済む。
- [React Developer ToolsのHighlight機能にはバグがあるので注意](https://iwb.jp/react-developer-tools-highlight-re-render-bug/) - React Developer ToolsのHighlight機能にバグがあることを知らない人は結構多いので、再レンダリングのチェックに利用する場合は注意が必要です。
- [JavaScriptでAPI(JSON)を取得する際の3つの注意点](https://iwb.jp/javascript-api-json-fetch-axios/) - JavaScriptでAPI(JSON)を取得する際にfetchを使用しているケースがありますが、fetchはresponse.okの判定を書き忘れてエラーが出ないバグを発生しやすいのでオススメしません。
- [ReactではPromiseの処理はthenではなくawaitで書こう](https://iwb.jp/react-promise-await-not-then/) - Reactのコードの場合、Promiseの処理はthenではなくawaitで書いたほうが良いです。
- [JavaScriptのnew Date()は書き方で9時間加算されるので注意](https://iwb.jp/javascript-new-date-add-utc-gmt-9-hours/) - JavaScriptのnew Date()の引数は日付の文字列、タイムスタンプの数値、ISO 8601形式などがありますが、書き方によって「ローカルタイムゾーン」か「協定世界時 (UTC)」のどちらかになるので注意が必要です。
- [JSの配列要素に添字指定ではなくatメソッドを使用するデメリット](https://iwb.jp/javascript-array-access-at-method-demerits/) - JSの配列要素に添字指定ではなくatメソッドを使用すると、3つのデメリットがあります。
- [JavaScriptのclassのインスタンス生成を1つしか許可しない方法](https://iwb.jp/javascript-class-generate-single-instance-only/) - JavaScriptのclassで「Counter.instance = this」でclass内にインスタンスを保存しておけば、すでにインスタンスが存在する場合は、new Errorでエラーを返せます。
- [macOS Sequoia環境のGoogle日本語入力で日本語入力ができない不具合が発生したらATOKをインストールしよう](https://iwb.jp/macos-sequoia-google-japanese-input-bug-install-atok/) - 2024年9月25日現在、macOS Sequoia (バージョン 15.0)にアップデートすると、Google日本語入力で日本語入力ができない不具合が発生します。
- [JavaScriptで[0, 1, 2, ... 100]の配列は直接書かずにArrayとkeysを使うべし](https://iwb.jp/javascript-array-keys-map-serial-number/) - JavaScriptで0から100までの連番の配列を作成するにはArrayとkeysを使用します。0, 5, 10のように5ステップずつの場合は「map((k) => k * 5)」を追加すれば作成できます。
- [React + MUIでDateRangePickerを使わずに入力しやすくする方法](https://iwb.jp/react-mui-easy-date-input-without-daterangepicker/) - React + MUIで開始日と終了日のような期間の入力にはDateRangePickerを使うと入力しやすいですが、有料のため誰でも使用できるわけではありません。そこで、無料でDatePickerを使用して開始日と終了日を入力しやすくする方法について説明します。
- [Webサイトはページが表示されるまではスクロール不可にするべし](https://iwb.jp/websites-disabled-scroll-until-page-is-visible/) - 最近のWebサイトだとwindow.onload実行時にスクロールを有効化されていることが多いですが、前面にローディング画面などを表示している場合は、それが非表示になってからスクロールできるようにしたほうが良いです。
- [VS CodeにPostCSS Language SupportをインストールするだけだとCSSのコードヒントが使えなくなる](https://iwb.jp/vscode-extension-postcss-language-support-install-disabled-css-codehint/) - VS CodeにPostCSS Language SupportをインストールするだけだとCSSのコードヒントが使えなくなります。
- [ReactのuseEffectの依存配列に設定しても初回は実行しない方法](https://iwb.jp/react-useeffect-dependency-array-dont-execute-the-first-rendering-time/) - ReactのuseEffectの依存配列に変数を設定すると「初回レンダリング時」と「変数の値が更新されたとき」に実行されますが、useRefを使用すれば初回レンダリング時の実行を回避できます。
- [1分でわかるPostmanのモックサーバー起動とAPI(JSON)作成](https://iwb.jp/postman-start-mock-server-and-create-api-json/) - Postmanはアプリをインストールしなくても、ログインすればブラウザだけでモックサーバーを作成してダミーのAPIを作成可能です。
- [YouTube動画の「低評価数」を表示する拡張機能で判明したこと](https://iwb.jp/chrome-extension-return-youtube-dislike/) - 現在YouTubeでは低評価数は非表示になっているがReturn YouTube Dislikeという拡張機能を追加すれば低評価数が表示できるようになる。YouTube APIから低評価数を取得して表示しているのだが、Googleが2021年12月13日以降は低評価数をAPIから取得不可にすると発表しているため、この拡張機能は将来使用不可になる。
- [Chrome拡張機能のQR Code Generatorはパラメーターが削除されるバグがある](https://iwb.jp/qr-code-generator-chrome-extension-deletes-parameters-bug/) - タイトルの通りQR Code GeneratorにはURLのパラメーターが勝手に削除されるバグがある。例えば https://iwb.jp/?foo=1&bar=2 のようなURLのQRコード画像をダウンロードしたい場合、「Edit this QR code」を押してWebサービスのほうにアクセスするのだが、この際にパラメーターの一部が自動で削除されて実際のURLとは異なるQRコードが作成されてしまう。
- [GPT-4搭載の「新しいBing」を使用する際の5つの注意点](https://iwb.jp/gpt4-new-bing-microsoft-edge-browser/) - GPT-4搭載の「新しいBing」を使用する際には4つの注意点があります。Bingをほとんど使用したことがない方もいるはずなので、以下に注意点をまとめました。
- [意外と知られていないReact Developer Toolsの使い方](https://iwb.jp/react-developer-tools-how-to-use/) - React Developer Toolsとは React Developer ToolsとはReactアプリ
- [初代より大幅進化！AirPods Pro（第2世代）を買った感想と注意点](https://iwb.jp/second-generation-airpods-pro-review/) - AirPods Pro（第2世代）は2022年9月23日(金)に発売。早速開封の儀を行ったところ、正面の見た目や大きさは初代と変わらないが下部や側面などが変更されていた。音質やノイズキャンセリングの性能も大幅進化しているので初代を持っている人にもオススメできる逸品。
- [JavaScriptでisNaNを使っても有効な日付か判断できないので注意](https://iwb.jp/javascript-valid-date-dont-use-isnan-only-code/) - GoogleやChatGPTを使用して、JavaScriptで「2024-01-23」のような文字列の日付が有効な日付か判定するコードを調べると、isNanを使用したコードをよく目にしますが、間違ったコードなので使用してはいけません。
- [macbookは「輝度を自動調整」だけでは明るさが勝手に変わるのを防げない](https://iwb.jp/macbook-auto-brightness-alone-cannot-prevent-display-dimming/) - macbookは「輝度を自動調整」だけではディスプレイの明るさが勝手に変わるのを防げません。
- [ReactでcreateContextとuseContextを同一ファイル内でexportすると警告が出る](https://iwb.jp/react-createcontext-usecontext-file-export-warning/) - ReactでcreateContextとuseContextを同一ファイル内でexportするとESLintのreact-refresh/only-export-components (Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components.)の警告が出ます。
- [ReactでuseStateの前回の値を表示する方法](https://iwb.jp/react-usestate-show-prev-value/) - useStateの過去に使用した値を保存するには、useStateで配列を作成します。過去のuseStateの値は配列に保存した値を {numHistory[0]} や {numHistory[1]} で指定することで表示できます。
- [fetch APIで取得したデータはローカルに保存して再利用したほうが良い場合がある](https://iwb.jp/javascript-react-fetch-api-data-save-local-storage/) - fetch APIを使用する際に同じリクエストのときに常に同じデータを返す場合は、一度取得したデータをローカルに保存しておいたほうがリクエストを減らして表示を高速化できます。
- [useStateのloading処理はuseTransitionに変えたほうが良い](https://iwb.jp/react-usestate-loading-replace-usetransition/) - useTransitionとはUIをブロックすることなく状態を更新できるReact Hookです。useTransitionなら「const [isLoading, startTransition] = useTransition()」を利用することで、非同期でisLoadingの変数のboolean値を変更できます。
- [ラーメンWalker東京2025の無料クーポンで「麺'sclub 酒池肉林 東京荒川」のラーメンを食べた感想](https://iwb.jp/ramen-walker-tokyo-2025-free-coupon-mens-club-shuchinikurin-tokyo-arakawa/) - ラーメンWalker東京2025に三河島駅近くにある「麺'sclub 酒池肉林 東京荒川」の無料クーポン券がついていたので食べてきました。
- [URLに@が存在するとリンク先が異なる場合があるので注意](https://iwb.jp/url-slash-atmark-link-caution/) - ブラウザの仕様上、ドメインのうしろがスラッシュで閉じられていないと、ドメインを正しく認識することができません。そして、@以降のドメインが認識されて、そちらを表示させます。
- [オリジン弁当のお問い合わせフォームで個人情報漏洩した原因](https://iwb.jp/personal-information-leakage-in-origin-bento-toshu-inquiry-form/) - 2024年7月16日(火)にオリジン弁当の運営会社で利用者の個人情報漏洩が最大31件発生した可能性があるというニュースが流れました。
- [ReactでuseStateではなくuseReducerを使う方法](https://iwb.jp/react-usestate-usereducer-counter-useful/) - useReducerはuseStateのように現在の状態(state)を保持します。useStateとの違いは、状態を更新するためにアクションを送信(ディスパッチ)するdispatch関数と、現在の状態とアクションを受け取り、新しい状態を返すreducer関数を利用することです。
- [React + TypeScript + Reduxを使用したカウンターの作成方法](https://iwb.jp/react-typescript-redux-counter/) - React + TypeScript + Reduxを使用する機会があったのですが、使い方を一部忘れていて、公式ドキュメントの説明がわかりづらかったので備忘録としてカウンターのサンプルを作成した記事を残します。
- [CSSのzoomプロパティが標準化されたが、CSSアニメーションは不可なので注意](https://iwb.jp/css-zoom-standard-cant-animation/) - zoomプロパティはtransform: scale()と違い、拡大・縮小するとレイアウトに影響を与えるので、レスポンシブWebデザインとの相性が良いです。一方でzoomプロパティはCSSアニメーションは不可なので、以下のようにtransitionプロパティなどを使ってもCSSアニメーションにならないので、使用する際は注意が必要です。
- [Reactでコンポーネントの再レンダーを強制する方法](https://iwb.jp/react-component-force-re-render-by-usereducter/) - JavaScriptのlocation.reload()のような再レンダー用のReactフックが用意されているかと思っていたのですが用意されておらず、useReducerを使用すれば実装可能だと公式サイトに書かれていました。
- [Chrome バージョン127からスクローラーのフォーカスの仕様が変わったので注意が必要](https://iwb.jp/chrome-scroller-focus-specification-change-v127/) - Chrome バージョン127からスクローラーのフォーカスの仕様が変わったので注意が必要です。
- [Feedlyでフィード一覧に出る青い枠線を消す方法](https://iwb.jp/feedly-remove-blue-line-from-feeds/) - Feedlyを見たらフィード一覧にフォーカスすると、画面上に青い枠線が表示されていた。この青い枠線はユーザースタイルシートで非表示にできます。
- [JavaScriptで「foo == null」ではなく「!(foo ?? null)」を使うべき](https://iwb.jp/javascript-null-undefined-nullish-coalescing-operator/) - JavaScriptでは「null == undefined」がtrueになるため、「if (foo == null)」と書いて判定するコードを書いている人がたまにいますが、このコードにはいくつか問題があります。
- [JavaScriptで消費税計算の場合はtrunkで切り捨てで良い](https://iwb.jp/javascript-truncate-for-tax-calculation/) - JavaScriptで単純な税込価格の計算の際は小数点以下をtrunkメソッドで切り落とす必要があります。
- [記事のアイキャッチ画像は縦画像だとXで顔が表示されないので避けるべき](https://iwb.jp/ogp-avoid-vertical-images-for-article-thumbnails/) - アイキャッチ画像は縦画像の場合はOGP画像も縦になるのですが、一般的にOGP画像は「1200px x 630px」または「アスペクト比 1.91:1」が推奨されているため、縦画像だと必ず非推奨のサイズになってしまいます。
- [結城友奈は勇者である 第1話のソースコードの違和感の正体](https://iwb.jp/yuyuyu/) - 結城友奈は勇者であるという深夜アニメの第1話で勇者部部員の東郷美森が制作した勇者部のサイトのHTMLのソースコードを調べてみたらjs-fireworksというサイトのコピーであることが判明した。
- [椎名町(落合南長崎駅)近くにあるラーメン松葉とトキワ荘に行ってきた](https://iwb.jp/ramen-matsuba-tokiwasou-shiinamachi-ochiai-minaminagasaki/) - ラーメン松葉とは椎名町(落合南長崎駅)近くにある中華料理屋で、店の近くにある漫画家多く住んでいたアパート「トキワ荘」の手塚治虫や藤子不二雄が食べて絶賛していたことで有名。
- [@iwbjpアカウントのTwitterが凍結された件について](https://iwb.jp/twitter-account-freeze/) - 本日19:15頃に@iwbjpのTwitterアカウントが凍結された。おそらく原因は「女子中学生に現金渡し“わいせつ”男逮捕」というニュースがあって、その記事に対してツイートしたことだ。
- [Excelで都道府県抽出の「=LEFT(A2,3+(MID(A2,4,1)="県"))」関数式は使ってはいけない](https://iwb.jp/excel-google-spreadsheet-prefectures-custom-function/) - ExcelやGoogleスプレッドシートで都道府県抽出の「=LEFT(A2,3+(MID(A2,4,1)="県"))」の関数式を使ってはいけない理由について説明します。
- [ニコニコ動画で漏洩したパスワードをChromeから調べる方法](https://iwb.jp/nicovideo-leaked-password-checked-by-chrome/) - 2024年6月28日(金)にKADOKAWAからニコニコ動画などで使用されている、ニコニコアカウントのパスワードが漏洩したため、「パスワードを変更することを推奨いたします」と注意喚起しました。パスワードは暗号化されているようですが、暗号が解読されて知られてしまう可能性があるため、パスワードの変更が推奨されています。
- [UA(GA3)とGA4のコードを貼る際はまとめて短く記述できる](https://iwb.jp/google-analytics-ua-ga3-ga4-code-short/) - GoogleアナリティクスのUA(GA3)とGA4のコードを以下のようにHTMLコード内にそのまま貼り付けているWebサイトをたまに見かける。UA(GA3)とGA4のコードは以下のように旧来のトラッキングコードがすでにある場合はgtag('config', 'G-CK9PC5CD67');を追記するだけでまとめて書くことができる。
- [iパス(ITパスポート試験)が2022年4月から1800円値上げで7500円に](https://iwb.jp/it-passport-examination-fee-7500/) - タイトルの通りiパス(ITパスポート試験)の受験料が2022年4月から現在の5700円から1800円値上げで7500円になる。
- [TypeScriptのユーティリティ型(Utility Types)は全部で22個ある](https://iwb.jp/typescript-utility-types-exist-total-22/) - ユーティリティ型(Utility Types)とは ユーティリティ型(Utility Types)とは一般的な
- [TypeScriptのPromise<T>を使うときはAwaited<T>も使うべし](https://iwb.jp/typescript-promise-awaited-utility-types/) - Awaitedは非同期関数のawaitやPromisesの.then()メソッドのような操作、特にPromisesを再帰的にアンラップする方法をモデル化するためのものです。
- [TypeScriptのテンプレートリテラル型とインデックスシグネチャの便利な使い方](https://iwb.jp/typescript-template-literal-types-three-useful-ways/) - TypeScriptではテンプレートリテラル型やインデックスシグネチャを使用して、文字列のパターンなどを表現できます。テンプレートリテラル型やインデックスシグネチャを使用したコード例を以降に3つ示します。
- [JavaScriptのオブジェクトのキーをconsole.logでアルファベット順にせずに確認する方法](https://iwb.jp/javascript-object-keys-in-console-log-without-alphabetical-order/) - JavaScriptで以下のような順番のオブジェクトを作成してconsole.logを確認すると、オブジェクトのキーがアルファベット順になってしまいます。この問題を解決する方法は2つあります。オブジェクトのキーが少数なら展開する前の状態でfirstから順番に確認できますが、数が多いと「...」で省略されて、展開してもキーがアルファベット順に表示されてしまうので厄介です。
- [@typescript-eslint/consistent-type-definitionsでinterfaceかtypeに統一する方法](https://iwb.jp/typescript-eslint-consistent-type-definitions-interface-settings/) - ESLintの@typescript-eslint/consistent-type-definitionsでinterfaceかtypeに統一する方法について説明します。
- [1分でわかるReactのcreateContext(useContext)の使い方](https://iwb.jp/react-createcontext-usecontext-how-to-use/) - ReactのcreateContextはコンポーネントツリー全体にわたってデータを渡すためのメカニズムを提供します。これにより、親から子、さらにその孫コンポーネントへと順次propsを渡すことなく、必要なコンポーネントが直接データにアクセスできるようになります。
- [WebサイトにXのウィジェット(タイムライン)を埋め込む方法](https://iwb.jp/website-x-twitter-widget-embedded-timeline-css/) - X(旧Twitter)のウィジェットの埋め込みは簡単そうに見えますが、カスタマイズするにはノウハウが必要なのと、Webサイトによっては間違った使い方をしているケースがあるので注意が必要です。
- [React v19からuseStateではなくuseTransitionでロード中のフラグを管理できる](https://iwb.jp/react-v19-usestate-usetransition-loading-flag-state/) - Reactのバージョン19からは「useTransition」が新たに追加されたので、これを使用すればuseStateを使わないで、useTransitionをimportしてロード中の処理を管理できます。
- [Tailwind CSSのコンフリクトで反映されないのを防ぐ方法](https://iwb.jp/how-to-prevent-tailwind-css-conflicts-not-being-applied/) - Tailwind CSSは色のclass名が2つ以上付いているとコンフリクトして反映されないことがあります。例えばclass名「text-blue-500」が付いている要素にJavaScriptで「text-red-500」を追加しても赤色が反映されません。
- [@heroicons/reactでCannot find module エラーが表示されたときの対処法](https://iwb.jp/heroicons-react-cannot-find-module-error/) - Reactで@importで@heroicons/react/24/outlineなどを読み込むと、Cannot find module '@heroicons/react/24/outline' などのエラーが表示されることがあります。
- [1行目2列、2行目3列のレイアウトはflexではなくgridで作成可能](https://iwb.jp/css-layout-display-flex-grid-1-2-and-2-3/) - Webサイトを制作する際にレイアウトの1部に1行目2列、2行目3列のような列が揃っていないレイアウトを作成したいことがあります。CSSでそのようなレイアウトを作成する際にflexを使用しているWebサイトを見かけますが、gridでも作成可能です。
- [Shimmer Loading EffectをHTMLとCSSで作成する方法](https://iwb.jp/shimmer-loading-effect-html-css-code/) - 以下のように読み込み中のコンテンツの種類に近似した形状の上に、グレー色でキラキラしたアニメーションを表示させたエフェクトをShimmer Loading Effectと言います。
- [Tailwind VariantsでTailwind CSSのコードを見やすくする方法](https://iwb.jp/react-css-tailwind-variants-how-to-use/) - Tailwind Variantsを使用するとReactなどで使用しているTailwind CSSのコードを見やすくすることができます。
- [Next.jsのChapter 1の通りにインストールするとエラーになる](https://iwb.jp/learn-dashboard-app-getting-started-chapter1-error/) - Next.jsの公式サイトにはNext.jsを学習するためのページが用意されています。このページの最初のChapter 1には以下のコマンドでpnpmをインストールして、nextjs-dashboardの開発環境を作成するように最初に書かれていますが、この方法だとpnpm dev実行時にエラーが表示されます。
- [lodashより小サイズで2〜3倍高速なes-toolkitの使い方](https://iwb.jp/es-toolkit-javascript-typescript-utility-library/) - es-toolkitとは es-toolkitはモダンなJavaScriptユーティリティライブラリで、lod
- [Reactで再レンダリングを考えずにコンポーネントを作成してはいけない](https://iwb.jp/dont-create-components-in-react-without-considering-re-rendering/) - Reactを使用しているWebサイトで、たまにReactで再レンダリングを考慮せずにコンポーネントを作成されているケースがある。例えば以下のコードの場合は、No.1, No.2, No.3で表示されず、 再レンダリングでNo.2, No.4, No.6と表示されます。(React.StrictModeの場合)
- [img.srcは空文字だと現在のURLなのでgetAttribute('src')のほうが良い](https://iwb.jp/javascript-getattribute-src-better-than-img-src/) - imgタグのsrc属性の値を空文字にして、console.log(img.src)を実行すると、実行したWebページのURLが表示されるので注意が必要です。
- [Amazonでdポイントが勝手に使われる設定をオフにする方法](https://iwb.jp/amazon-shopwithpoints-account-off/) - Amazonとdポイントを連携すると、デフォルトの設定だとdポイントを自動的に使う設定になってしまうという問題が発生します。
- [placekitten.comは使用不可なのでplacedog.netに置換しよう🙀🐶](https://iwb.jp/placekitten-com-image-replace-to-placedog-net/) - placekitten.comは2023年12月頃からサーバーがダウンして使用不可になっていますので、placedog.netに置換することをオススメします。
- [Google Oneのダークウェブレポートでパスワード漏洩を確認する方法](https://iwb.jp/google-one-dark-web-report-password-leakes-check/) - ダークウェブをモニタリングし、パスワードなどの情報が漏洩しているかを確認できるGoogleのサービスです。パスワード漏洩の場合は、別のWebサイトで使用されているものと同じものが結果に表示された場合は、悪用されて不正ログインされてしまう可能性があります。
- [丸亀製麺(トリドール)株主優待カードを使用する際の注意点](https://iwb.jp/marugame-seimen-toridoll-kabunushi-yuutai-card-cant-login/) - トリドールの株主優待が紙の金券から株主優待カードに変更されましたが、いくつかの問題があるので注意が必要です。
- [エンジニアが知るべきChatGPTの拡張子付きコードテクニック](https://iwb.jp/code-techniques-chatgpt-for-engineers/) - ChatGPTにコードを貼り付けて質問する際は、書き方によって回答の質が向上します。例えば、コードを貼り付けて質問する際には、そのまま貼り付けるか、コード部分をMarkdownの記法を使用して以下のように書く方が多いと思います。
- [Googleドライブで全員閲覧可能の設定ミスを防ぐためのシート](https://iwb.jp/google-spreadsheet-to-prevent-mistakes-in-setting-up-drive-for-everyone-to-view/) - Googleドライブ内の「リンクを知っている全員へのアクセス権の付与」になっているファイルを1つ1つ手作業で確認すると膨大な時間がかかります。しかし、「Googleドライブで全員閲覧可能になっているファイルを検出するシート」を使えば、Googleドライブ内の「リンクを知っている全員へのアクセス権の付与」になっているファイルを一括で検出できます。
- [書評：Web Designing 2013年3月号](https://iwb.jp/webdesigning201303/) - 特集1：レスポンシブWebデザインテンプレートレシピ レスポンシブWebデザインにおける事例や作成方法に関する
- [書評：Web Designing 2012年9月号](https://iwb.jp/webdesigning201209/) - 特集1：実例が教える脱blogなWordPress活用術 WordPressを使用した実例サイトを掲載。使用さ
- [書評：Web Designing 2012年4月号](https://iwb.jp/webdesigning201204/) - 特集1：スクロール芸でサイトがもっと楽しくなる。 スクロールしたときに複数の背景を異なる速度で動かす表現方法な
- [Web Designingが最大11,020円OFF](https://iwb.jp/wdsubscription/) - Web制作者向け雑誌Web Designingが3年間の定期購読で11,020円OFF。 http://boo
- [1分でわかるTypeScriptのinferの使い方](https://iwb.jp/typescript-infer-howto-use/) - TypeScriptのinferは条件型（Conditional Types）で使用される特別なキーワードです。主にジェネリック型を使った型推論の際に役立ちます。
- [あわわ社がGoogleフォームで情報漏洩した設定と対処法について解説します](https://iwb.jp/google-forms-awawa-leak-settings-explanation/) - あわわ社がGoogleフォームで情報漏洩した設定と対処法について解説します。
- [Apps ScriptでGoogleフォーム情報漏洩リスクを確認する方法](https://iwb.jp/checking-google-form-data-leakage-risk-with-apps-script/) - Googleフォームによる個人情報漏洩のリスクを減らすために、Apps ScriptでGoogleフォームの一覧を表示してリスクを確認できる、Googleスプレッドシートを作成しました。
- [PlaywrightのParameterized testsの公式のコードは動作しない](https://iwb.jp/playwright-parameterized-tests-code/) - Parameterized testsとはとは配列でパラメーターを用意して、forEachなどのループを使用したテストです。公式ドキュメントのテストコードだとわかりづらいので、詳しく解説します。
- [Playwrightのnthはnth-childと違って0が最初なので注意](https://iwb.jp/playwright-test-nth-first-0/) - Playwrightのnth(n)はn番目に一致した要素へのロケーターを返します。nth(0) は最初の要素を選択します。
- [1分でわかるBabelとPolyfillを使用したトランスコンパイル](https://iwb.jp/javascript-babel-polyfill-compile-howto/) - JavaScriptのアロー関数など、IE11などで使用できないコードを読み込める形に変換するツール。2020年も終わろうとしているが、あと数年はIE11対応が必要なWebサイトはなくならないのでES6以降のアロー関数などを使用するのであればBabelのようなトランスコンパイラで変換が必須となる。
- [:nth-child(n)ではなく(n of selector)を使ったほうが良い理由](https://iwb.jp/css-nth-child-n-of-selector/) - CSSの:nth-child() は兄弟要素のグループの中での位置に基づいて選択します。:nth-child(n of selector)を使うと、:nth-child(n) 特有の間違いを減らせます。
- [CSSでフッターを最下部固定にする好ましくない設定方法 全5選](https://iwb.jp/css-best-flexbox-sticky-footer/) - Webページを作成しているときに、コンテンツの量が少ないと最下部より上の部分に表示されることがありますが、Webサイトによっては好ましくないCSSの設定方法で固定されているケースがあります。
- [Pz-LinkCardプラグインにはinputタグが押せなくなるバグがある](https://iwb.jp/wordpress-pz-linkcard-plugin-input-pointer-events-bug/) - Pz-LinkCardはリンクをカード形式で表示するWordPressプラグインです。Pz-LinkCardプラグインにはインストールするとWordPress内のinputタグが押せなくなるバグがあります。
- [Phoenixを使用してアプリ起動やウィンドウ操作をする方法](https://iwb.jp/phoenix-control-windows-and-launch-apps-with-javascript/) - Phoenix (フェニックス)はJavaScriptでスクリプト可能な軽量macOSウィンドウ＆アプリマネージャです。Phoenixアプリを起動していればショートカットキーに夜アプリ起動やウィンドウ操作などの処理をJavaScriptのコードで作成可能です。
- [Reactのバージョンをpackage.jsonなどで確認するのは間違い](https://iwb.jp/react-version-how-to-check/) - Reactを使ったプロジェクトを開発する際に、使用しているReactのバージョンを確認したいことがあります。package.jsonを見ると「"react": "^18.2.0",」と書かれていますが、これは実際に使用しているReactのバージョンとは限らないので、注意が必要です。
- [ITパスポート試験の表計算ソフトの問題をサンプル付きで解説](https://iwb.jp/it-passport-exam-google-spreadsheet-excel-required/) - ITパスポート試験(iパス)はITに関する基礎的な知識の問題が出題されるのだが、その中には表計算ソフトの問題が含まれる。表計算ソフトとはExcelやGoogleスプレッドシートなどのことだ。基礎さえわかれば小学生でも解けるくらい簡単なのだが、逆にExcelやGoogleスプレッドシートの基礎知識がないと正解率はかなり低くなる。
- [React Hook Formを使用したバリデート付きフォーム作成術](https://iwb.jp/react-hook-form-javascript-validate/) - React Hook FormはReactアプリケーションでフォームを簡単に扱うためのライブラリです。React Hook Formを使うには、まずReactが使える開発環境を作成して、react-hook-formをインストールします。
- [ReactでfetchとSuspenseを使用してloading…を表示する方法](https://iwb.jp/react-fetch-suspense-loading-code/) - ReactにはSuspenseというコンポーネントがレンダリングされる前に、非同期操作が完了するまで待つ機能があります。これを使用すればuseStateのisLoadingを使わずに読込中に「loading…」を表示させるコードを書くことができます。
- [ニコニコ動画のプレミアム会員費(月額790円)は補償予定になっている](https://iwb.jp/dwango-niconico-premium-fee-compensation/) - 本日6月14日にドワンゴはサイバー攻撃を受けたことなどに関するFAQを公開しました。FAQ内には「アカウント/プレミアムについて」に関しても書かれており、6月と7月を対象として補償を予定していることが正式に発表されました。
- [かっぱ寿司の「熟成肉の格之進監修 ハンバーグ＆黒毛和牛カレー」を食べた感想](https://iwb.jp/kappasushi-kakunoshin-kurogewagyuu-curry/) - かっぱ寿司で2024年5月9日(木)～6月2日(日)まで門崎熟成肉の専門店「格之進」監修の『ハンバーグにぎり＆黒毛和牛カレー』全4品を販売するキャンペーンを開催しているので、ハンバーグ＆黒毛和牛カレー(税込649円)を食べてきた。
- [会社でGoogle日本語入力を使うならサジェストは無効にするべし](https://iwb.jp/disable-suggest-in-google-japanese-ime-at-work/) - Google日本語入力のサジェスト機能はタイピングの手間を減らすことができますが、例えば「パパ」の入力途中に「パパ活」、「エンコード」の入力途中に「援交」が候補として表示される可能性があるので、ビジネス利用の場合は無効にしたほうが良いです。
- [アクティビティ図をVS Code 拡張機能のDraw.ioで作成する方法](https://iwb.jp/vscode-extensions-drawio-activity-diagram/) - アクティビティ図を無料で作成したい場合はVS Codeを使用している人であればVS Code 拡張機能のDraw.io Integrationを使用すると簡単に作成できます。
- [Googleスプレッドシートのすべてのセルの全角英数字を半角に置換する方法](https://iwb.jp/google-spreadsheet-replace-all-full-width-alphanumeric-characters-to-half-width/) - Googleスプレッドシートを使用していると、シートのセル内のテキストの全角英数字をすべて半角に置換して文字表記を統一したいことがあります。そんなときはGoogle Apps Scriptを使用すれば一括で置換できます。
- [東京女子大学の問いプロジェクトの問題をAIに回答してもらった](https://iwb.jp/twcu-toi-project-tonjo-question/) - 東京女子大学の「問いプロジェクト」全7問をAI (ChatGPT-4o)だとどのように回答するか気になったので回答させてみた。
- [JavaScriptでPrisma + PostgreSQLを使う方法](https://iwb.jp/javascript-prisma-postgresql/) - Prismaは次世代ORM（Object-Relational Mapping）ツールです。Prismaを使用することで、データベースとのやり取りが非常にシンプルになります。
- [Googleスプレッドシートで特定セルの変更時にメールで通知する方法](https://iwb.jp/notify-via-email-when-specific-cell-changes-in-google-spread-sheets/) - 先日、米GoogleからGoogleスプレッドシートで特定セルの変更時にメールで通知する機能を追加するという発表がありました。しかし、機能が追加されるのは有料版のGoogleスプレッドシートのみなので、無料版の場合はApps Scriptを使用する必要があります。
- [VitestでReact + TypeScriptのテストをする方法](https://iwb.jp/vitest-testing-library-react-typescript-test-sample/) - VitestでReact + TypeScriptのコンポーネントのテストをしようとすると色々な設定があり、設定不足により問題が発生しやすいです。この記事では少ない工数でVitestでReact + TypeScriptのコンポーネントのテストをする方法を記載しています。
- [#漫画が読めるハッシュタグ はショートカットキーが読みやすい](https://iwb.jp/x-twitter-manga-hashtag-pc-shortcutkey-readable/) - 「#漫画が読めるハッシュタグ」の漫画のポストの中には10ポスト以上の長いものもあります。パソコンを持っている方であれば、パソコンで開いてショートカットキーを使用して読んだほうが断然早く読めるのでオススメです。
- [Googleドキュメントのすべての全角英数字を半角に置換する方法](https://iwb.jp/google-docs-replace-all-full-width-alphanumeric-characters-to-half-width/) - Googleドキュメントを使用していると、ドキュメント内のテキストの全角英数字をすべて半角に置換して文字表記を統一したいことがあります。そんなときはGoogle Apps Scriptを使用すれば一括で置換できます。
- [Speaker Deckでフォントが白抜き文字でない状態で確認する方法](https://iwb.jp/how-to-check-speaker-deck-fonts-without-outline/) - Speaker Deckでフォントが下図のように日本語の文字が白抜きになって読みづらくなっていることがあります。この問題は記事内に書かれている手順で解決できます。
- [ReactでinputをfocusするにはuseRefとuseEffectが必要](https://iwb.jp/react-mount-input-focus-useref-useeffect/) - useEffectを使用せずにinputRef.current.focus()だけ実行すると、input要素がDOMに追加されていないため、inputRef.currentがnullのままとなり、特定の要素にfocus()が実行されないという問題が発生します。
- [Reactでオブジェクトの場合はuseStateよりuseImmerのほうが便利](https://iwb.jp/react-useimmer-useful-than-use-state-for-nest-objects/) - useImmerはReactのフックであり、Immerライブラリを使用して、状態の不変性を簡単に管理できます。例えばネストの多いオブジェクトの場合、値を変更する際にスプレッド構文を多様することになり、コードの可読性が悪くなりますが、useImmerを使用することで、この問題を解決できます。
- [Next.jsを静的エクスポートする方法はnext exportではない](https://iwb.jp/nextjs-static-export-output-npm-run-build/) - 検索エンジンなどでNext.jsを静的エクスポートする方法を調べると、「next export」コマンドでできると表示されることがあります。しかし、最新のNext.jsでは「next export」コマンドは使用できません。バージョン13.3以降のNext.jsで静的エクスポートするには、next.config.mjs (next.config.js) の設定ファイルに「output: 'export'」を追記して、「npm run build」でビルドします。
- [会社でChatGPTを使用すると、送信内容が流出する可能性がある](https://iwb.jp/company-using-chatgpt-sending-content-leak-settings/) - 現在、多くの企業でChatGPTを使用して、質問応答、業務効率化、文章作成などを行うことは珍しくありません。しかし、ChatGPTはデフォルト設定だと送信されたテキストをモデルの学習のために使用するため、学習した内容が他の人の回答に流出する可能性があります。
- [インスタの埋め込みでテキストを削減して画像のみ表示する方法](https://iwb.jp/instagram-embeds-html-reduce-text-and-image-only/) - インスタ(Instagram)の埋め込みで本文のテキストを削減して画像のみ表示するには、埋め込み用のHTMLコードを修正することで実装できます。
- [jsFiddleはURLの最後にshowを付けると全画面で表示できる](https://iwb.jp/jsfiddle-url-show/) - あまり知られていないようだがjsFiddleはURLの最後にshowを付けると全画面で表示できる。 通常の画面
- [1分でできるreact-springのアニメーション実装方法](https://iwb.jp/react-spring-use-spring-animated/) - react-springとはReactアプリケーションでアニメーションを実装するための人気ライブラリです。物理法則に基づくアニメーションを簡単に作成でき、柔軟でパフォーマンスの高いアニメーションを実現することができます。
- [CSSのbox-shadowでボタン下に線(影)を付けると押せなくなる](https://iwb.jp/css-box-shadow-button-ng-pattern/) - HTMLとCSSでボタンを作成する際に、Webサイトによってはbox-shadowでボタンの下に線を付けていることがありますが、insetを使わないと線部分が押せなくなる問題があります。
- [VS Codeタブのラベルをカスタマイズして絵文字を付ける方法](https://iwb.jp/vscode-customize-tab-labels-add-emoji-file-name/) - VS Code (v1.88以降) ではCustomize tab labelsというタブのラベル（名前）をカスタマイズできる機能が追加されています。この機能を使うと特定のディレクトリ名に含まれるファイルのタブのラベル（名前）を変更できます。
- [WordPressのthe_tags()にHTMLを入れる場合は変数で分割するべき](https://iwb.jp/wordpress-the-tags-with-variables-split-html/) - the_tags()はthe_category()などと異なり、デフォルトだと出力時に「タグ: foo, bar」のように「タグ:」が先頭についてしまいます。そのため、通常は引数に直接HTMLタグを指定して、指定したHTMLタグで囲み、「タグ:」が表示されないようにしているケースが多いですが、これはあまり良いやり方ではありません。
- [WordPressのbloginfo()が空引数でnameを返す問題の対策方法](https://iwb.jp/wordpress-bloginfo-name-functions-php-customize/) - bloginfo()は引数が空、または引数が間違っているとbloginfo('name')を返してしまうという残念な仕様になっています。そのため、functions.phpでカスタマイズして間違いに気づきやすくしたほうが良いです。
- [DreamweaverでCSSファイル新規作成時に最初からついているコメントをつけないようにする](https://iwb.jp/new-file-comment/) - Dreamweaverでファイル新規作成時にコメントが付かないようにする DreamweaverではCSSファ
- [Dreamweaver CS6の新機能 CSSトランジションが便利](https://iwb.jp/cs6-css-transition/) - 簡単手順でCSSでマウスオーバー時に色を徐々に変化 CSSを使用してマウスオーバー時に色を徐々に変化させるには
- [Dreamweaverで速くコーディングするなら＞入力後に閉じるようにする](https://iwb.jp/config-codehint/) - デフォルトでは「"
- [Adobe Dreamweaver CS6はFTPのアップロードが速い](https://iwb.jp/cs6-ftp-upload/) - Dreamweaver CS６はFTPのパフォーマンスが改善されたらしいので新しく入れたCS6とどのくらいアップロード時間が違うのか試してみた。
- [bit.lyより便利なGoogle URL短縮サービスの使い方](https://iwb.jp/google-url-shortener/) - Google url shortenerの基本的な使い方 http://goo.gl/ にアクセスして短縮した
- [WordPressの投稿の時刻設定のAM/PMは0〜24時設定にできる](https://iwb.jp/wordpress-post-time-settings-am-pm-to-0-24/) - WordPressはデフォルト設定だと投稿の時刻設定部分にAM/PM (午前/午後)の切り替えボタンが表示されます。時刻部分がAM/PMの切り替え設定だと、操作ミスが発生しやすく、13:00を入力すると強制的に12:00になってしまうなど、使い勝手が悪いので設定を変更したほうが良いです。
- [Node.jsのChalkを使わずにConsoleの文字列を色付けする方法](https://iwb.jp/nodejs-chalk-util-styletext-color-console-log/) - node:utilからstyleTextをimportすれば、chalkなどをインストールせずに、console.logのテキストを色付けできます。chalkのように太字(bold)や背景色(bgBlueなど)も使用できます。
- [1分でわかるJavaScriptでのIPアドレス取得方法](https://iwb.jp/javascript-ipinfo-jquery-axios/) - Webサイトによってはブラウザが変わっても同じユーザーか判別するためにIPアドレスを使用することがある。JavaScriptでIPアドレスを取得するにはfetchでipinfo.ioからJSONデータを取得する。
- [Astroページのドキュメント通りのコードだと文字化けするので注意](https://iwb.jp/astro-pages-docs-code-mojibake/) - Astroの公式サイトにはAstroの使い方について書かれたドキュメントが存在します。「src/pages/index.astro」をドキュメントに書かれているとおりに修正して、npm run devを実行して確認すると文字化けすることがあるので、注意が必要です。
- [Google Adsenseで性的描写に関するポリシーが更新された](https://iwb.jp/google-adsense-sexual-content-policy-update/) - Google Adsenseで性的描写に関するポリシーが更新されたので、Google Adsenseの収益を停止されたくなければ、過去にそのような内容を投稿をしていた場合は該当の画像および動画を削除したほうが良いです。
- [tsconfig.jsonは初期設定のstrict: trueだけでは足りない](https://iwb.jp/typescript-tsconfig-json-strict-true-npx-tsc-init/) - TypeScriptでtsconfig.jsonを用意する際は「npx tsc --init」で生成するか、Viteで環境構築時に生成することが多いです。npx tsc --initでは「strict」、Vite(vanilla-ts)のほうは「strict, noUnusedLocals, noUnusedParameters, noFallthroughCasesInSwitch」のLintingがtrueで有効化されています。
- [tsconfig.jsonコメントを正規表現で一括削除する方法](https://iwb.jp/tsconfig-json-regex-remove-comments/) - tsconfig.jsonはTypeScriptプロジェクトの設定ファイルです。「npx tsc --init」を実行すると6つの基本設定が書かれたtsconfig.jsonが生成されますが、大量のコメントが含まれます。この記事では正規表現でtsconfig.jsonの大量のコメントを除去する方法について書かれています。
- [while(true)でESLintのno-constant-conditionが出たときの対処法](https://iwb.jp/javascript-eslint-while-true-no-constant-condition/) - no-constant-conditionは条件文で定数式を禁止するESLintのルールです。例えば、if (false) や while (true) などを使用すると、no-constant-conditionのルールが有効だと警告が表示されます。
- [MacBookから離れる際はCQCキーで画面ロックするべし](https://iwb.jp/macbook-cqc-shortcutkey-screen-lock/) - MacBookから離れる際にCQCのショートカットキーを使用すれば画面ロックできます。
- [Xは140文字以下でも不可視文字が含まれるとポストできない](https://iwb.jp/x-twitter-does-not-allow-post-tweet-contain-zero-width-invisible-characters/) - X (旧Twitter)は全角140文字以下でもゼロ幅の不可視文字が含まれるとポスト(ツイート)ができない仕様になっている。ゼロ幅の不可視文字とは視覚的には表示されず、テキストのレイアウトや挙動に影響を与えることもない、文字幅が0の特殊な文字のことを指します。
- [Google短縮URLサービスgoo.glが終了 2019年3月から作成不可になる](https://iwb.jp/google-url-shortener-service-has-ended/) - 2018年3月30日からgoo.gl URL短縮サービスのサポート停止。新規ユーザーは2018年4月12日まで作成可能。既存ユーザーは2019年3月30日まで作成可能。既存リンクはサービス終了後もリダイレクト可能。
- [3分でわかるGitで間違えてコミットや削除したときに使用するコマンド](https://iwb.jp/git-branch-restore-change-delete-command/) - Gitでブランチ名を間違えた、コミットを間違えた、メッセージを間違えた、間違えて削除したなどの際に使用するコマンドを記載。
- [Safariはplace-items:centerで上下中央揃えできないバグがある](https://iwb.jp/safari-css-display-grid-place-items-center-bug/) - SafariだとCSSで「display: grid」、「place-items: center」、aspect-ratioのプロパティだけ使用すると上下中央揃えになりません。
- [Reactの状態管理ライブラリ「Recoil」の簡単な使い方](https://iwb.jp/react-recoil-state-management-library-usage/) - RecoilはFacebookによって開発されたReactアプリケーションのための状態管理ライブラリです。ReactのuseContext (createContext)やReduxと比べると、新しいライブラリなので、使用されているケースは多くはないですが、いくつかの特徴とメリットがあるため、使用されるケースが増えています。
- [TypeScriptのts-node実行エラー問題はtsxで解決するのが早い](https://iwb.jp/typescript-ts-node-error-fix-tsx-watch/) - nodeコマンドはfoo.tsのようなtsファイルを直接実行できないので、直接tsファイルを実行するにはts-nodeやtsxなどをインストールする必要があります。ts-nodeはエラーが発生しやすく、watchモードがないので、tsxを使用することをオススメします。
- [Webサイトにvideoタグで背景動画とSVGのドットの挿入方法](https://iwb.jp/howto-insert-background-video-and-svg-dots-on-website/) - Webサイトのページ内の背景に動画を挿入する場合は、videoタグでmp4などの動画ファイルを読み込むことがあります。
- [Reactでconsole.logの実行を2回ではなく1回にする方法](https://iwb.jp/react-components-console-log-executed-twice-to-once/) - ReactではApp.tsx内などでconsole.logが2回実行されることがあります。例えば以下のコマンドでReactの環境を構築したあと、App.tsxのApp()内にconsole.log(count)を記述して実行すると、2回実行されていることが確認できます。
- [2022年6月16日にIE11の死後に利用可能なJavaScript](https://iwb.jp/javascript-ie11-end-of-support-2022-06-16/) - IE11死亡後に使用できるようになるJavaScriptの主なメソッドなどをまとめた。IE11がWebサイトの対象ブラウザからはずれるとJavaScriptでコンパイルなしでそのまま利用できるものが多くなる。
- [閉鎖したTypeSearchの代わりに型定義ファイルを検索する方法](https://iwb.jp/howto-search-for-type-definition-files-instead-of-closed-typesearch/) - 以前は様々なブログや参考書などで「TypeScriptの型定義ファイルを調べる際はTypeSearchで調べると良いです」と書いてありましたが、現在はアクセスすると「This page is no longer necessary.」と表示されて利用できません。
- [Tailwind CSSのコーディングに必須の4つのVS Code拡張機能](https://iwb.jp/tailwind-css-vscode-four-extensions-for-coding/) - VS CodeのTailwind CSSの拡張機能を活用することで、さらに生産性を向上させることができるのですが、拡張機能がインストールされておらず、開発効率を低下させている制作者がたまにいます。この記事ではTailwind CSSのコーディングに必須の4つのVS Code拡張機能について説明しています。
- [JSON操作がjqより便利なフィルター機能があるjnvの使い方](https://iwb.jp/json-data-jq-jnv-filter-commands-howto/) - jnvは前述のjqにフィルター機能を付けたツールです。jnvコマンドを実行すると、「>>」が表示され、ここに「.images」のようにプロパティを入力するとフィルターをかけることができます。
- [JavaScriptの並び替えはsort()ではなくtoSorted()がオススメ](https://iwb.jp/javascript-tosorted-tospliced-toreverted/) - sort(), splice(), reverse()などを使用して元の配列の内容を変えると、それが原因でバグが発生することがあります。特に理由がなければsort()などではなく、元の配列の内容を変えないtoSorted()などの使用をオススメします。
- [Chromeにリアルタイムフィッシング対策機能が追加された](https://iwb.jp/google-chrome-realtime-phishing-protection-settings/) - 最近のフィッシング詐欺やマルウェアは巧妙化しており、Chromeの「標準保護機能」では防げないケースが増えてきています。被害の予防のために、「保護強化機能(リアルタイムフィッシング対策機能)」を有効にすることを強くオススメします。
- [スギ薬局のシステム障害で発生した「うるう日」のバグについて](https://iwb.jp/sugiyakkyoku-net-channel-system-date-bug/) - スギ薬局は、2月29日の「うるう日」に発生したシステム障害について謝罪した。2月29日の午後1時ごろに復旧し、3月1日も通常通り営業している。「初めて迎える『うるう日』だった」と言い訳しているが、プログラムの日付の処理で「うるう日」を考慮するのは基本中の基本です。
- [LINEヤフーの3.11検索募金は検索しても募金されないので注意](https://iwb.jp/line-yahoo-search311-charity-disabled/) - LINEとヤフーでは3月11日に「3.11」と検索するだけで10円寄付されます。しかし上限金額が5,000万円になっているため、合計検索ユーザー数が500万人を超えると、それ以上は募金されません。
- [Google検索結果のアイコンがDEFAULT APPになる原因と対処法](https://iwb.jp/google-search-result-icon-default-app-pwa/) - Google検索結果のiwb.jpのアイコンがDEFAULT APPという不明なアイコンになる現象が発生しました。この現象はWordPressのPWAプラグインの設定を修正すれば直ります。
- [ChatGPTに多要素認証(二段階認証)を設定する方法](https://iwb.jp/chatgpt-multifactor-authentication-settings/) - ChatGPTを使用されている方は多要素認証(二段階認証)を設定すれば、悪意を持った第三者による不正アクセスを防止できるため、必ず設定したほうが良いです。
- [JavaScriptでコードの一部をユーザー側に見せない方法](https://iwb.jp/javascript-firebase-cloud-functions-prevent-seeing-code/) - JavaScriptはブラウザで読み込んで実行する性質上、ユーザー側でコードの内容を見ることができる。(サーバ側で実行していない場合)しかし、これだと例えば「くじ引き」のプログラムなどでユーザー側にくじの確率設定を見られたくない場合に困ることがある。
- [JavaScriptでくじ引きプログラムを確率設定付きで正しく作る方法](https://iwb.jp/javascript-random-lottery-program-probability-settings/) - 1等, 2等, 3等, はずれがある「くじ引き」のプログラム作成の場合はrandomだけで作成できない。なぜなら1等, 2等, 3等, はずれを引き当てる確率はそれぞれ異なるからだ。オブジェクト変数のkeyに1等, 2等, 3等, はずれ、valueに確率が入ったものを用意して確率別に表示する処理を書けば簡単に実装できる。
- [画像をドラッグ＆ドロップするだけでCSS3のグラデーション作成](https://iwb.jp/gradient-finder/) - このような画像のボタンがある場合、スマートフォンのサイトではCSSのlinear-gradientだけで表現す
- [ChatGPTが動作しない不具合はローカルストレージとCookieの削除で解決可能](https://iwb.jp/chatgpt-error-fix-delete-localstorage-cookie/) - 2024年3月8日現在、ChatGPTでテキストを送信しても動作しない不具合が発生しています。ChatGPT(OpenAI)側から動作しない原因について正式なアナウンスはまだないですが、ローカルストレージおよびCookieを削除することで問題を解消できることがわかっています。
- [You Don't Need JavaScript Date Library](https://iwb.jp/you-dont-need-javascript-date-library/) - JavaScriptの日付ライブラリは日付のフォーマットや日にちの計算などに使用されているケースが多いですが、そのような簡単な処理だけなら日付ライブラリは不要な場合が多いです。
- [jQuery v3からv4に変えて使用するとエラーになる可能性がある](https://iwb.jp/jquery-v3-to-v4-deprecated-error/) - jQuery.now ($.now())を使用したコードの場合、jQuery v3は動作しますが、v4だとエラーになります。jQuery 4.0.0からはいくつかのメソッドが削除されているので注意が必要です。
- [CSSのフクロウセレクタ(* + *)とアンアンセレクタ(& + &)について](https://iwb.jp/css-owl-selctor-and-scss-anan-selector/) - CSSのフクロウセレクタ(* + *)とアンアンセレクタ(& + &)についてサンプルのコードを使用して解説しています。
- [Google Apps ScriptでgetSheetByNameは使わないほうが良い](https://iwb.jp/google-apps-script-getsheetbyid-better-than-getsheetbyname/) - getSheetByNameを使用すれば簡単にシートを取得して操作できるので、使用されていることが多いですが、シート名が変わると操作不可になるというデメリットがあります。
- [ChatGPTはバナー画像などのテキストもチェックできる](https://iwb.jp/chatgpt-text-code-image-banner-check/) - ChatGPTで画像のテキストをチェックしたいときは添付アイコンを押下または画像をドラッグ＆ドロップして画像を読み込ませて、「添付した画像内のテキストの内容は正しいでしょうか？」と質問します。
- [沖縄那覇安里の塩ラーメン肉マースソバ・マサミへの行き方と注意点](https://iwb.jp/niku-mars-soba-masami-sio-ramen-asato/) - 肉マースソバ・マサミとは沖縄県那覇市安里363番地にある沖縄県にあるラーメン屋の中で一番人気の塩らーめん専門店。沖縄で1番人気のラーメン屋であり、ここのチャーシュー塩ラーメンは全国的に見てもかなりレベルが高い。
- [CSSで三角形や斜め背景色はborderではなくclip-pathを使用する](https://iwb.jp/css-triangle-not-border-use-clip-path-polygon/) - CSSで三角形や斜め背景色を実装する際にborderプロパティが使用されているケースがありますが、clip-pathを使用したほうが簡単で柔軟に実装できます。
- [Swiper(JavaScriptライブラリ)の間違った使い方](https://iwb.jp/swiper-javascript-library-allowtouchmove-keyboard-enabled/) - Swiperとは Swiperはカルーセル（スライダー）を簡単に実装できるJavaScriptライブラリです。
- [JavaScriptで要素をドラッグして移動する簡単な方法は使ってはいけない](https://iwb.jp/javascript-onpointermove-event-drag-and-move-methods-avoid/) - JavaScriptで要素をドラッグして移動する簡単な方法には5つの問題点があるので、そのまま使ってはいけない。
- [知ったかぶりが多いExcelのVLOOKUP関数の使い方](https://iwb.jp/excel-google-spreadsheet-vlookup-tips/) - この記事ではGoogleスプレッドシートを使ってVLOOKUP関数とXLOOKUP関数について説明しています。最近はXLOOKUP関数を使うのが主流なので、使い勝手の悪いVLOOKUP関数は使わないほうが良いです。
- [git logでコミットメッセージを検出するには--grepを使用する](https://iwb.jp/git-log-grep-commit-messsage/) - git logで「| grep」でgrepをするといくつかの問題が発生するため、この方法でgrepをしてはいけません。
- [FigmaのタイポグラフィーのCSSはGoogle Fontsとは異なるので注意](https://iwb.jp/figma-typography-css-google-fonts/) - FigmaのタイポグラフィーのCSSとは Figmaでは、テキストの書体や太さを変更すると、開発モード時にfo
- [エンジニア向け日本酒「ソースコード」を飲んだ感想と解読方法](https://iwb.jp/engineer-sake-sourcecode-review-decoding-method/) - 日本酒「ソースコード」とはオンライン酒屋「クランド」を運営するKURANDが2024年1月23日に発売した日本酒です。この記事ではラベルのソースコードの解読方法についても説明しています。
- [CSSのz-indexの値はcalc(Infinity)のほうが良いと思った](https://iwb.jp/css-z-index-calc-infinity/) - CSSではz-indexの値にcalc(infinity)が指定されるケースがありますが、JavaScriptではinfinityは無効で、正しくはInfinityです。iwb.jpでは表記揺れの防止のためにも「calc(Infinity)」を使用することをオススメします。
- [WordPressのAIO WP Securityプラグインでログインエラーが発生中](https://iwb.jp/wordpress-all-in-one-wp-security-plugin-login-error/) - WordPressのAll In One WP Securityプラグインをインストールしている場合、ログインエラーが発生し、ログインできなくなることがあります。ログイン時に記事に記載したエラーが表示される場合、WordPressプラグインが原因のエラーです。
- [Slackで表示中のチャンネルでメンション以外も音を鳴らす方法](https://iwb.jp/slack-channel-mention-javascript-sound/) - Slackではメンションで@iwbjpのようにメッセージで@を使用するとメンバーに直接「スッコココ」という音で通知できます。JavaScriptを使用すれば、現在見ているチャンネルのみにメンションでないメッセージでも音を鳴らせます。
- [ChatGPT(OpenAI)利用者は障害メール通知設定を登録するべき](https://iwb.jp/chatgpt-openai-api-subscribe-updates-recommended/) - 仕事などでChatGPT(OpenAI API)を利用している人が多いですが、ChatGPT(OpenAI API)がいつも正常に動作しているわけではなく、時間帯によっては不具合が発生していることがあります。ChatGPT(OpenAI API)が不具合が発生していないか確認したい場合は、OpenAI StatusのWebサイトにアクセスすれば確認できます。
- [JavaScriptでCookieの追加・削除の操作は誤解が多い](https://iwb.jp/javascript-cookie-add-delete-remove-misunderstandings/) - JavaScriptでCookieの追加や削除する方法を検索すると、色々な方法が検索結果に表示されます。localStorageだと追加はsetItem、削除はremoveItemなので、すぐに理解できますが、Cookieは色々な方法がネット上にあるので、JavaScript初心者だと処理方法を誤解して間違いやすいです。この記事ではJavaScriptが得意でない人によくあるCookieの誤解についてまとめました。
- [pixelmatchライブラリを使用した画像差分確認方法](https://iwb.jp/pixelmatch-library-image-difference-check/) - pixelmatchライブラリとは画像の差分を検出するために使用されるJavaScriptライブラリです。主にWebサイトなどの画像の変更を検出するために使用されます。このライブラリは2つの画像を比較し、ピクセル単位での違いを数値化できます。
- [JavaScript初心者でもできるカルーセルの作成方法](https://iwb.jp/javascript-beginners-how-to-create-carousel/) - カルーセルはJavaScriptライブラリを使用すれば簡単に作成できますが、ライブラリだと細かい箇所の調整がしづらく、余計なコードが追加されるデメリットがあります。この記事内に書いた作成方法であれば初心者でも簡単にカルーセルを作成できます。
- [現在はCSSのtransformプロパティを使用しなくて良い](https://iwb.jp/css-transform-properties-rotate-scale-translate/) - CSSのtransformプロパティとはHTML要素に対して、回転、拡大縮小、移動などの変形を適用するために使用されます。2024年現在はtransformプロパティを使わなくても、回転、拡大縮小、移動などの変形を適用するプロパティが存在します。
- [Chromeのデベロッパーツールで左側の枠線が消える場合の対処法](https://iwb.jp/chrome-developer-tools-left-border-disappears/) - Chromeのデベロッパーツールで左側の枠線が消える場合があります。そのような状態になった場合は、記事内に書かれているショートカットキーを使用することで元に戻せます。
- [clip-pathを使用した様々なCSSアニメーションの作成方法](https://iwb.jp/css-animation-slow-loading-clip-path-inset/) - CSSのclip-pathプロパティを使用して、低速の画像読み込みのように表示、円形に表示、星型に表示など様々なCSSアニメーションを作成してみました。
- [1分でわかるavif画像を使用した超軽量画像対応](https://iwb.jp/avif-html-picture-source-images/) - AVIFは高い圧縮率の画像フォーマット。高い圧縮率の画像フォーマットはWebPがよく使用されるが、AVIFはWebPより圧縮率が高い。使用できるブラウザがChromeとOperaなど少数のため、pictureタグによる出し分けが必要。
- [JavaScriptの条件分岐はifとswitchだけでなくobjectがある](https://iwb.jp/javascript-conditional-branching-use-object-instead-of-if-or-switch/) - JavaScriptの条件分岐にはifまたはswitchがよく使用されます。しかし、オブジェクトを使用して記事の内容のように書けばコード量を大幅に減らして見やすくできます。
- [sharpライブラリのcreateはchannelsとbackgroundを省略するとエラーになる](https://iwb.jp/sharp-create-image-error-if-channels-and-background-are-omitted/) - sharpライブラリのcreateメソッドはchannelsとbackgroundはどちらか、または両方を省略すると次のようなエラーが表示されます。Error: Expected valid width, height and channels to create a new input image
- [WordPressの画像をAVIFに変換できるShortPixelプラグインの使い方](https://iwb.jp/wordpress-shortpixel-plugin-convert-images-avif/) - ShortPixelプラグインとはJPGやPNGなどの画像をWebPやAVIFなどに最適化できるWordPressプラグイン。プラグインの正式名称は「ShortPixel Image Optimizer」で制限ありなら無料で使用可能です。
- [JavaScriptのディープコピーはstructuredClone()で可能](https://iwb.jp/javascript-deep-copying-is-possible-with-structuredclone/) - JavaScriptでオブジェクトや配列などの複合データ型をコピーするとデータが互いに影響を受けます。structuredClone()でディープコピーするとデータが互いに影響を受けなくなります。
- [生成AIでWebサイトを制作できるv0 by Vercelの使い方と注意点](https://iwb.jp/how-to-use-v0-by-vercel-to-create-websites-with-generated-ai/) - v0 by Vercelは生成AIでWebサイトのUIなどを作成してくれるサービスです。例えば「HTML,CSS,JavaScriptの技術情報サイトのトップページ」と入力して送信すれば、そのようなWebページのコードを生成AIで3パターンのコードを作成してくれます。
- [喫茶室ルノアール池袋西武前店に行った感想と注意点](https://iwb.jp/impressions-and-notes-on-visiting-the-renoir-ikebukuro-seibumae-coffee-shop/) - 喫茶室ルノアール池袋西武前店は、株式会社銀座ルノアールが運営する2023年12月22日にオープンしたばかりの新店舗です。喫茶室ルノアール池袋西武前店は全64席と池袋のルノアールの中では座席数が多いです。他の池袋の店舗にはない「1人用席」も複数用意されており、1人利用の場合は混雑している昼の時間帯でも座れることが多く、他の店舗より待ち時間が短くなっています。
- [IPAの偽セキュリティ警告(サポート詐欺)画面の作り方](https://iwb.jp/html-and-javascript-fake-ipa-security-warning-support-scam-screen/) - 画面をフルスクリーンにする、キーボードを操作不可にする、右クリック不可、警告音を鳴らすなどはJavaScriptを使うと簡単にWebサイトに実装できます。この記事ではこの4つの処理の実装方法について説明します。
- [Chromeのフォントサイズは10px未満でも表示可能になっている](https://iwb.jp/chrome-font-size-can-be-displayed-with-less-than-10px/) - Chromeは10px未満のフォントサイズが指定された場合は10pxで表示される。というのは昔の話で、Chromeのバージョン118以降からは10px未満のフォントサイズでも表示可能になっています。
- [JavaScriptで「0.1+0.2≠0.3」の浮動小数点を扱うための解説と対処法](https://iwb.jp/javascript-floating-point-function-tips/) - JavaScriptでは「0.1 + 0.2」などの小数点を含む四則演算の結果は「0.3」にはなりません。この記事では小数点を含む四則演算の正しい結果を返すための関数の作成方法について解説しています。
- [Stylelintを使うなら必ず知るべき設定方法と99のルール](https://iwb.jp/css-stylelint-vscode-settings-rules/) - StylelintとはCSSのコードをチェックするツール。例えばCSSを書く際は企業によってインデントの仕方がタブだったり半角スペースだったりするが、目視確認だと見落としやすい。 Stylelintがインストールされていればターミナルでのコマンド実行時やVS Codeでのコーディング中にエラーを検出できるので、確認漏れが発生しにくくなる。
- [CSSのword-break: auto-phraseで日本語の分節で自動改行できる](https://iwb.jp/css-word-break-auto-phrase-japanese/) - word-break: auto-phraseとは日本語テキストで分節に応じた自動改行ができるCSSプロパティおよび値。日本語テキストで分節に応じた自動改行をするには「lang="ja"」が必要です。
- [Xで #PR のハッシュタグを付けても表示されないことがあるので注意が必要](https://iwb.jp/x-twitter-may-not-show-up-pr-hashtag/) - Xはテキストが長いと途中で「さらに表示」というリンクを追加して、テキストの後半部分を省略することがあります。ポストが長文でハッシュタグを最後のほうに書いていると「#PR」などのハッシュタグはXの検索結果一覧や埋め込み表示だと表示されません。
- [ChatGPTやBardのクローラーをrobots.txtで拒否する方法](https://iwb.jp/chatgpt-and-bard-crawlers-robots-txt-user-agent-disallow/) - ChatGPTやBardはGooglebotのようにネット上の情報を収集するクローラーが存在します。もしも、あなたのWebサイトの情報をChatGPTやBardのクローラーに読まれて学習されたくない場合は、robots.txtにクローラーを拒否する設定を書いて保存する必要があります。
- [GASを使用してGoogleカレンダーに最終営業日を追加する方法](https://iwb.jp/how-to-add-last-business-day-to-google-calendar-using-gas/) - Googleカレンダーには毎月の最終営業日を追加できる機能がありません。「毎月 最終金曜日」や「毎月 31日」の追加はできますが、これでは最終営業日の追加はできません。しかし、Google Apps Script (GAS) を使用すれば、毎月の最終営業日を追加できます。
- [iPad SafariのuserAgentはiPadでないことに気づいていない人が多い](https://iwb.jp/ipad-safari-javascript-useragent-is-not-ipad/) - iPad SafariのユーザーエージェントにはiPadが含まれていると考えてJavaScriptを書いている人が多いが、現在のiPad Safari (iPadOS 14以降)のuserAgentにiPadの文字列は含まれていない。
- [JavaScriptにgroupByが実装されたが、フォールバックが必要](https://iwb.jp/javascript-groupby-is-implemented-but-a-fallback-is-needed/) - Object.groupBy()メソッドは、指定されたコールバック関数が返す文字列値に基づいて、与えられた反復可能オブジェクトの要素をグループ化します。reduceメソッドを使用してもオブジェクトの要素をグループ化できますが、Object.groupBy()を利用する方がよりシンプルなコードで実装可能です。
- [Twitterアプリは画像を高画質でアップロードする設定がオフになっている](https://iwb.jp/twitter-app-setting-upload-images-in-high-quality-off/) - あまり知られていないがTwitterアプリは画像を高画質でアップロードする設定がデフォルトでオフになっているため、設定を変えないと高画質画像をアップロードできないので注意が必要。
- [Webサイトのセキュリティを高めるsecurity.txtの作成方法](https://iwb.jp/how-to-create-a-security-txt-file-to-increase-website-security/) - security.txtとはWebサイトのセキュリティに関する連絡先、ポリシー、採用などを示すために使用される特別なファイルです。security.txtが存在することで、第三者がWebサイトでバグや脆弱性を発見した際に連絡しやすくなるというメリットがあります。
- [PhotoshopのPDF保存は「別名で保存」だとできないことがある](https://iwb.jp/photoshop-may-not-be-possible-with-save-as-pdf/) - Photoshopを使用しているときにプリンターで印刷するため、PDFファイルで保存したいことがあります。PDFファイルで保存したい場合はAdobeの公式サイトには「ファイルから別名で保存を選択して、ファイル形式のリストから、Photoshop PDFを選択します。」みたいなことが書かれています。しかし、最近のPhotoshopではこの手順ではPDFで保存できないことがあります。
- [IPやネットワークなどを検索できる「IP Guide」が超便利](https://iwb.jp/ip-guide-lookup-ip-network-asn-data/) - IP GuideとはIP、ネットワーク、ASNデータを検索できるWebサービスです。WebサイトにアクセスするだけでIPなどを確認できるので誰でも簡単に使えます。ドメインが ip.guide なので既存のほかのIPなどを調べるWebサービスよりURLがわかりやすく、URLバーに入力しやすい点もポイントが高いです。
- [CSSの:focusはブラウザによって挙動が異なるので:focus-visibleを使うべき](https://iwb.jp/css-focus-visible-should-be-used/) - CSSの:focusではなく:focus-visibleを使用すると、クリックしても変わらなくなります。CSSでは:focusは使用せず、:focus-visibleを使用することをオススメします。
- [コピーしたリンクのURLのトラッキングコードを削除するブックマークレット](https://iwb.jp/javascript-bookmarklet-to-remove-tracking-code-from-copied-link-url/) - JavaScriptブックマークレットを使用すればクリップボードに保存したリンクテキストのトラッキングコードを削除できます。ブックマークレットだと削除したいパラメーターを自分でカスタマイズできるので便利です。
- [JavaScriptのAudioContextを使えばmp3なしで音が作成可能](https://iwb.jp/javascript-audio-context-create-sounds-without-mp3/) - AudioContextとはJavaScriptを使用してWebブラウザで高度なオーディオ操作を行うためのインターフェースです。このAPIを利用すると、オーディオデータの生成、加工、解析、および再生が可能になります。
- [Vue.jsの「はじめに​」が理解できなかった初心者向け解説](https://iwb.jp/javascript-vuejs-explanation-for-beginners/) - Vue.jsの公式サイトの「はじめに​」には、いきなり以下のコードが書かれており初見殺しになっている。これだと理解しづらいので最初の学習手順について記事に書きました。
- [初心者でも簡単にできるGitHub ActionsのESLintの使い方](https://iwb.jp/github-actions-easy-to-use-eslint-for-beginners/) - GitHub Actionsとは開発ワークフローのすべてのステップを自動化する仕組み。例えばローカルでESLintをインストールしている場合、npm run eslintのようなコマンドでESLintを実行するが、GitHub Actionsを設定すればGitHubにプッシュされたら自動的にESLintを実行するなどの自動化ができる。
- [JavaScript正規表現で改行入りテンプレートリテラルのマッチ方法](https://iwb.jp/javascript-regexp-line-break-template-literal/) - 問題：JavaScriptの正規表現で以下の改行入りテンプレートリテラルの文字列をtestメソッドで最新のChromeとFirefoxでマッチするには①に何を入れるのが正しいでしょうか？
- [1分でわかるESLintの使い方とインストール手順](https://iwb.jp/eslint-howto-use-install/) - ESLintとはJavaScriptのコードが正しいかチェックするツール。記事内に書かれている手順で簡単にインストールして使用可能。JavaScriptやJSONだと{}や,の付け忘れなどでエラーを発生させやすいためESLintに詳しくなければYAML推奨。
- [selectタグ内で区切り線にhrが使用可能になりました](https://iwb.jp/html-hr-tag-separator-in-select-tags/) - Chrome 119からセレクトボックスで区切り線にhrタグが使用可能になりました。Safari, Microsoft Edgeでも使用可能です。ただし、Firefoxおよびスマホとタブレットのブラウザでは現在使用不可です。
- [CSSの:user-validと:user-invalid擬似クラスの使い方](https://iwb.jp/css-user-valid-user-invalid-pseudo-class-how-to-use/) - CSSの:user-validとは検証が正しく行われた有効なフォーム要素に指定したCSSプロパティを適用するための擬似クラスです。逆に検証の結果、無効なフォーム要素に適用したい場合は「:user-invalid」を使用します。
- [CSSのborderの点線はlinear-gradientかSVGを使おう](https://iwb.jp/css-border-dashed-dotted-used-linear-gradient-or-svg/) - Webサイトで下線に点線を描画する際はCSSのborder-styleのdashedかdottedを使用している人が多いが、border-styleだと点線がきれいに描画されないのでlinear-gradientやbackgroundでSVGを背景画像に指定したほうが良い。
- [WordPressのSyntaxHighlighter EvolvedをCode Block Proプラグインに変えたら使いやすくなった](https://iwb.jp/wordpress-syntax-highlighter-evolved-change-to-code-block-pro-plugin/) - WordPress 6.4からSyntaxHighlighter Evolvedプラグインが使用不可になりました。Code Block Proというシンタックスハイライトのための使いやすいWordPressプラグインがあるため、代替のプラグインが必要な方はこちらのインストールをオススメします。
- [WordPress 6.4の管理画面が重いバグは6.4.1で解決可能](https://iwb.jp/wordpress-6-4-wp-admin-page-bug/) - 日本時間の2023年11月8日(水)にWordPress 6.4 Shirleyがリリースされました。WordPress 6.4.0には管理画面が重くなって、表示に時間がかかるバグがあります。curlに関するバグがあるため、アップデートがスムーズにできないという問題も発生しているので、これらが修正されたWordPress 6.4.1が正式リリースされるまで、アップデートするのは避けたほうが良いです。
- [Full UTF-8プラグインはWP 6.4にアップデートするとエラーになる](https://iwb.jp/full-utf-8-plugin-wp-6-4-update-error-bug/) - Full UTF-8がインストールされている状態でWordPress 6.4にアップデートするとWebサイト(管理画面を含む)にエラーが発生して閲覧不可になります。
- [Google Apps Scriptで必ず知っておくべき7つのライブラリ](https://iwb.jp/google-apps-script-gas-you-must-know-7-libraries/) - ライブラリとは作成された関数を別のプロジェクトで読み込んで使用できる機能です。例えばWebサイトでLodashを使用する場合はCDNやnpm installなどで読み込んで使用しますが、GAS (Google Apps Script) ではスクリプトエディタのライブラリからスクリプトIDを指定して読み込みます。
- [テキスト解析 Web APIでルールの追加・除外を設定する方法](https://iwb.jp/javascript-yahoo-text-analysis-web-api-add-and-exclude/) - テキスト解析 Web APIとはYahoo!デベロッパーネットワークが提供している、テキスト解析Web APIを利用して、日本語を解析するWebサービスです。この記事ではテキスト解析のルールの追加および除外の方法について解説しています。
- [Google Apps ScriptとcheeriogsでWebサイトのtitleなどを取得する方法](https://iwb.jp/google-apps-script-cheeriogs-get-website-html-title/) - Google Apps ScriptだけだとWebサイトのHTMLをgetContentTextを使用してHTMLをテキストで取得して正規表現で抽出しなければならないため、非常に取得しづらい。cheeriogsを使用すれば$('title').text()とjQueryようなコードで簡単に取得できる。
- [1分でわかるCSSの適用範囲を限定できる@scopeの使い方](https://iwb.jp/css-limit-the-scope/) - @scopeはCSSの新しい機能で、セレクタの適用範囲を明示的に設定することができます。これにより、特定の範囲内の要素に対してのみスタイルを適用可能になり、より構造化されたスタイルシートの作成ができます。
- [Gmail容量が上限15GBになったときに不要なファイルを削除する方法](https://iwb.jp/gmail-15gb-limit-delete-unnecessary-emails/) - Googleでは無料会員の場合、Gmail容量の上限は15GBとなっています。Gmail容量の上限に達すると新しいメールが受信できなくなるだけでなく、Google PhotoやGoogle Driveなどでも新しいファイルの追加ができなくなってしまいます。
- [@media (scripting: none) はChrome v118ではなくv120から使用可能](https://iwb.jp/css-media-scripting-none-chrome-v118-not-supported/) - CSSの@media (scripting: none)はメディアクエリの一種で、JavaScriptが利用できるかどうかを調べるために使用できます。Chromeの公式ブログにはscriptingはv118から使用可能だと書かれていますが、実際はv120からでないと使用できません。
- [意外と知られていないテンプレートリテラルの3つの使い方](https://iwb.jp/javascript-template-literal-var-function-multiple-tag/) - テンプレートリテラル( `` )は以下の3つの特徴があります。1. 式・変数・関数埋め込み、2. 複数行の文字列、3. タグ付きテンプレート
- [CSSのform-sizing: contentは便利だけどlhと@supportsが必要](https://iwb.jp/css-form-sizing-content-requires-lh-and-supports/) - form-sizing: contentはCSSの新しいプロパティで、textarea要素に適用することで、入力された内容に基づいてそのサイズを自動で調整します。これまではJavaScriptがないと実装できませんでしたが、Chromeのバージョン120以降はCSSだけで実装できます。
- [clampはMin-Max-Value Interpolationではなく関数を使うべき](https://iwb.jp/css-clamp-min-max-value-interpolation-scss-function/) - CSSの「clamp(1rem, 0.818rem + 0.91vw, 1.5rem)」を見ただけでは、元がどのような値なのかがわかりづらくなってしまいます。そのため、Min-Max-Value Interpolationは使わずに、SCSSで関数を作成したほうが良いです。
- [1分でわかるJavaScriptで絵文字の文字数をカウントする方法](https://iwb.jp/javascript-emoji-regex-count-number-of-characters-in-pictograms/) - 絵文字は通常の文字とは異なり、JavaScriptで文字数をカウントする際には注意が必要です。例えば、シンプルな方法である「'(#129318#)(#127995#)‍♂️'.length」を使っても、この絵文字の文字数は1ではなく7となり、正確にカウントできません。絵文字を正確にカウントするには「emoji-regexライブラリ」または「Intl.Segmenter」を使用します。
- [JavaScriptでマンハッタン距離とユークリッド距離を算出する方法](https://iwb.jp/javascript-calculate-manhattan-and-euclidean-distances/) - マンハッタン距離は2点間の距離を計算する方法の一つであり、特に格子状の構造を持つ空間において利用されます。この名前は、ニューヨークのマンハッタンの通りが格子状に配置されていることに由来しています。マンハッタン距離は、2つの点間を直線ではなく、格子状のパスに沿って移動する際の距離を計算します。
- [HTML内のCSSプロパティの値をJavaScriptで調べる方法](https://iwb.jp/find-out-the-value-of-a-css-property-in-html-with-javascript/) - CSSを使用しているとプロパティの値に何が指定されているか調べたいときがあります。例えば、特定のWebページの指定した範囲内に、font-weightプロパティで「font-weight: bold」ではなく「font-weight: 600」などの数値が使用されているかどうかなどです(normalの400を除く)。そんなときは、querySelectorAllで指定した範囲内の全要素を取得して、forEachで各要素のfont-weight (fontWeight)のプロパティを取得すれば簡単に調べることが可能です。
- [会社を退社するときはGmailの不在通知を設定したほうが良い理由](https://iwb.jp/leave-company-gmail-notice/) - 現在ほとんどのIT企業ではGmailを使用しているのに不在通知をONにして使用しているところを見たことがない。退社していることを知らない人がその人にメールを送信した場合、返信を待ってしまうので退社した場合は必ず不在通知をONにしたほうが良い。
- [JavaScriptで各桁の和の計算はreduceを使うと短く書ける](https://iwb.jp/calculating-the-sum-of-each-digit-in-javascript-reduce/) - JavaScriptにはreduceという便利なメソッドがあるので、これを使用して各桁を加算すれば関数内は2行のコードで済みます。
- [1分でわかるJavaScriptを使用した全探索](https://iwb.jp/javascript-all-search-brute-force/) - 全探索とは、問題の解を見つけるためにすべての可能性を試すアプローチのことです。この方法は、計算量が多くなる可能性がありますが、確実に正確な解を見つけることができます。全探索は、特に問題の規模が小さい場合や、他の効率的なアルゴリズムが明らかでない場合に有用です。
- [AtCoderをVS CodeとJavaScriptで挑戦する方法](https://iwb.jp/howto-challenge-atcoder-with-vscode-and-javascript/) - AtCoderとは競技プログラミングコンテストを主催するWebサイトで、参加者はコードを書いて問題を解くことでスキルを競います。AtCoderは主にアルゴリズムとデータ構造の知識をテストします。参加者は問題に対する最適な解決策を見つけるために、複雑な問題解決スキルと数学的思考を必要とします。AtCoderは多くの異なる難易度レベルの問題が提供されています。これにより、初心者から上級者まで多くの人が自分のレベルに合った問題に挑戦できます。
- [FFmpegを使用して4GB以上の動画を統合する方法](https://iwb.jp/how-to-integrate-videos-over-4gb-using-ffmpeg/) - GoProやOsmo Pocketなどのカメラで動画を長時間撮影すると、ファイルが自動的に約4GBごとに分割されます。これは動画を長時間撮影した際にエラーなどが発生しても動画全体が保存されないことを防ぐための仕組みです。FFmpegを使用すると分割された動画を統合できます。
- [Node.jsコマンドライン引数パーサーライブラリyargsの使い方](https://iwb.jp/nodejs-command-line-argument-parser-library-yargs/) - yargsとはNode.js用のコマンドライン引数パーサーライブラリです。Node.jsで引数を取得するには以下のように書きますが、引数がたくさんある場合や、「node example.js --age=35」のように指定したい場合には不向きです。そんなときはyargsをインストールして使うと引数に名前と値を指定できて便利です。
- [JavaScriptでquerySelector('h1')?.innerHTML = 'foo' はエラーになる](https://iwb.jp/javascript-queryselector-innerhtml-error-invalid-left-hand-side-in-assignment/) - JavaScriptで「document.querySelector('h1')」のように書くと、HTML文書から最初に見つかる h1タグの要素を取得します。要素が見つからなければnullを返します。しかし、document.querySelector('h1').innerHTMLのようにすると、要素がないとエラーになってしまいます。
- [1分でわかるTwitter(ツイッター)の画像の拡大・保存方法](https://iwb.jp/twitter-image-zoom/) - Twitter(ツイッター)の画像は大きいサイズの場合は縮小されて表示されるため本来の大きさ（原寸大）で表示されないことがある。本来の大きさで表示させる方法はいくつかあるが一番簡単なのはブックマークレットを使用した方法だ。
- [1分でわかるVercelの使い方](https://iwb.jp/vercel-how-to-use/) - Vercelとは VercelはWebサーバー、フレームワーク、ワークフローなどが統合されたサービスです。
- [WordPressプラグイン CloudSecure WP Securityの使い方と注意点](https://iwb.jp/wordpress-plugin-cloudsecure-wp-security-usage-and-notes/) - CloudSecure WP SecurityはWordPressのセキュリティ対策プラグインです。WordPressはデフォルトの状態だとセキュリティが脆弱なため、セキュリティ対策プラグインのインストールが必要です。いままでもセキュリティ対策プラグインはあったのですが、日本語に完全対応したものがなく、英語ができない日本人には使いにくいものでした。CloudSecure WP Securityは日本企業のクラウドセキュア株式会社が制作した国産プラグインなので日本語に完全対応しています。
- [作成したWebサイトをGitHubにプッシュする手順 (2023年版)](https://iwb.jp/vite-svelte-website-push-to-github/) - この記事ではVite + Svelteで作成したWebサイトをGitHubにプッシュする手順について説明しています。
- [2行のJavaScriptでブラウザの戻るボタンを無効化する方法](https://iwb.jp/javascript-how-to-disable-the-browser-back-button/) - JavaScriptでブラウザの戻るボタンの動作を無効化することは、ユーザーエクスペリエンスの観点から推奨されません。しかし、特定のWebページやWebアプリケーションだと、戻るボタンの動作を制御したい場合があります。そんなときは以下の2行のJavaScriptを書けば、戻るボタンを押しても同じページに留まるようにできます。
- [無料で超使いやすい、Google Fonts Iconsの使い方](https://iwb.jp/google-fonts-icons-free-material-symbols/) - Google Fonts IconsとはGoogleが提供している無料のアイコンフォントです。2023年9月にGoogle FontsのWebサイトがリニューアルされ、サイト内の「Icons」ページのUIも一新され、使いやすくなりました。
- [Amazonブラックフライデーセールでだまされないための3つのChrome拡張機能](https://iwb.jp/3-chrome-extensions-for-amazon-black-friday-sale/) - この記事で紹介している3つのChrome拡張機能をインストールすれば、Amazonブラックフライデーセールなどで販売される悪質な詐欺商品を購入してしまうリスクを減らせます。
- [youtube-dlでターミナルから4K動画をダウンロードする方法](https://iwb.jp/youtube-dl-4k-video-terminal-download/) - YouTubeにアップロードした動画はダウンロードもできるのだが、一般的なダウンロード方法では4Kではなく1280x720のように解像度が下がった状態でダウンロードされることが多い。この記事では無料のyoutube-dlでターミナルから4K動画をダウンロードする方法について説明します。
- [Name Mangler 3を使わず0円でターミナルでリネームする方法](https://iwb.jp/rename-command-free-0yen-without-name-mangler-3/) - Name Mangler 3は2,320円とリネームアプリにしては値段が高いので、単純なリネームだけならrenameコマンドを使用したほうが処理が早いし、0円とお財布にもやさしい。
- [cwebpの使い方と複数の画像をWebPに一括変換する方法](https://iwb.jp/cwebp-how-to-convert-multiple-images/) - Homebrewのwebpパッケージをインストールすればターミナルからjpgやpngなどの画像を元にWebPの画像に変換できる。使用するにはターミナルでbrew install webpのコマンドを実行してインストールする。
- [Google AdSenseのGDPRメッセージの設定は企業は実質必須](https://iwb.jp/google-adsense-gdpr-general-data-protection-regulation-message/) - GDPR（General Data Protection Regulation）は、EUのデータ保護法規制であり、EU市民の個人データの取り扱いに関するルールを定めています。企業のWebサイトの場合、日本国内のユーザーのみを対象としているWebサイトはほとんどないので、フッターに書かれているコピーライトのように実質必須です。
- [Node.jsでnew Date()で日本の日時が取得できないときの対処法](https://iwb.jp/javascript-nodejs-new-date-timezone-utc/) - Node.jsでは何も設定していなければ、日本のタイムゾーンではなく、システムのタイムゾーン(UTC)を使用します。そのため、例えば「2023年9月6日 15:00」にnew Date()を実行しても、9時間引かれた「2023-09-06T06:00:00.000Z」が返ってきます。これを日本時間で表示するにはいくつかの方法があります。
- [CSSアニメーションでopacityとdisplayを指定するとChromeとSafariで動作が変わる](https://iwb.jp/css-animation-content-visibility-opacity-display-chrome-safari/) - Chromeのバージョン116からキーフレームでdisplayとcontent-visibilityを使用できるようになったため、CSSアニメーションのサイト(100%など)にopacityとdisplayを指定するとChromeとSafariで動作が変わるようになりました。
- [Google検索結果に表示される生成AIによる結果をオフにする方法](https://iwb.jp/google-search-sge-search-generative-experience-ai-setting-off/) - 2023年9月現在、Googleは「Google検索」の新機能として、生成AIによる結果を表示する試験運用をしています。「生成AIによる検索体験(SGE)」を使用すれば、検索の面倒だったり時間がかかったりする作業を生成AIが代わりに実行してくれるので便利だとGoogleは言っています。しかし、下図のように画面の大部分に生成AIのテキストが表示されるため、検索の邪魔だと感じている人も多いでしょう。
- [Svelteのライフサイクルのtick()の使い方](https://iwb.jp/javascript-svelte-lifecycle-tick-howto/) - Svelteのtick()は非同期関数で、次のDOM更新サイクルが完了を待機したいときなどに使用されます。tick()を使用するとDOM更新が保証されます。
- [書評：Web Designing 2012年10月号](https://iwb.jp/webdesigning201210/) - 特集1：レスポンシブWebデザインをマスターする 最近Web DesigningはレポンシブWebデザインの記
- [Viteのvite-plugin-static-copyで特定のファイルをコピーする方法](https://iwb.jp/vite-plugin-static-copy-npm-run-build-config/) - vite-plugin-static-copyとは、その名の通り静的ファイルをコピーするViteプラグイン。 Viteのvite.config.jsのrollupOptionsだけだと特定の静的ファイルをコピーしにくいケースがあるので、そんなときはvite-plugin-static-copyをインストールして使うと便利です。
- [Svelteで学ぶFirebaseのAuthenticationの使い方](https://iwb.jp/svelte-firebase-authentication-google-login/) - FirebaseのAuthenticationとはGoogleが提供するユーザー認証を簡単に実装できるサービスです。例えば「ログイン」のボタンを設置してログインした場合は「[ユーザー名]でログイン中」、「ログアウト」のボタンを押した場合は「ログアウト中」と表示する処理を簡単に実装できます。
- [書評：JavaScriptテクニックバイブル ~効率的な開発に役立つ150の技](https://iwb.jp/javascript-technicbible/) - 中級者向けの実践的テクニックバイブル 本の内容は配列や関数などJavaScriptの基礎が一通り身についていな
- [本屋（ジュンク堂池袋店）でJavaScriptテクニックバイブルが発売されていた](https://iwb.jp/javascript-technic-bible/) - 池袋のジュンク堂でJavaScriptテクニックバイブルが発売されていた。 Amazonでは8月31日（金）発
- [Zoomなどのリモハラ(リモートハラスメント)を録画する方法](https://iwb.jp/recording-zoom-remote-harassment-howto/) - リモハラの場合、相手の音声や姿がパソコン上で録画可能なのでパワハラやセクハラよりも対策しやすい。Zoomなどには録画機能があるが、録画するにはホストからの許可が必要となるため容易に録画機能は使えない。そのため、簡単に録画するにはキャプチャーボードが必要となる。
- [映画『シン・ゴジラ』もいいけど劇場版64‐ロクヨン‐もおすすめ！](https://iwb.jp/movie-shin-godzilla-64-rokuyon/) - 本日2017年11月12日はシン・ゴジラ地上波初放送の日である。放送前にも関わらず、お昼の時点からTwitterのトレンドに掲載されるなど非常に注目されている。去年は面白い映画がたくさんあったが、その中でも私の中で一番印象に残っているのは『64‐ロクヨン‐前編/後編』という映画だ。
- [Amazon(アマゾン)の商品詳細ページの短いURLをコピーする方法](https://iwb.jp/amazon-url-copy/) - アマゾンのURLは日本語が含まれているのでコピー＆ペーストするとURLエンコードされて長くなる。商品詳細ページの右下にある「シェアする」から固定リンクコピーして送信してもらおう。
- [旧バージョンOfficeのExcel,Wordなどをアップデートできるのは本日2/6(水)まで](https://iwb.jp/update-office2013/) - Office 2000、XP、2003、2007の「Office アップグレード版」が次期Office 201
- [書評：Web Designing 2013年2月号](https://iwb.jp/webdesigning201302/) - 特集1：タッチデバイス対応の考え方 タッチデバイスを踏まえたサイト制作に関しての記事。タッチデバイスは縦位置と
- [書評：Web Designing 2013年1月号](https://iwb.jp/webdesigning201301/) - 特集1：マルチデバイス時代のユーザビリティ スマートフォンやタブレットPCなどWeb閲覧環境が多様になった現在
- [書評：Web Designing 2012年12月号](https://iwb.jp/webdesigning201212/) - 特集1：JavaScriptライブラリの最適な選び方・使い方 目的に応じたJ11種類のJavaScriptライ
- [書評：Web Designing 2012年11月号](https://iwb.jp/webdesigning201211/) - 特集1：「CSS＋α」マルチデバイス対応テクニック CSS3による表現を中心にしたテクニックなのでIE対応を中
- [書評：Web Designing 2012年8月号](https://iwb.jp/webdesigning201208/) - Web Designing 2012年8月号の書評。jQuery Mobileの使い方が今月号の特集記事。
- [書評：Web Designing 2012年7月号](https://iwb.jp/webdesigning201207/) - 特集1：サイトデザインのためのグッドテンプレート集 テンプレートも最近は似たようなのばかりになってきた。目新し
- [書評：レスポンシブ・ウェブデザイン標準ガイド](https://iwb.jp/responsive-webdesign-guide/) - 日本初のレスポンシブ・ウェブデザイン本 いままで和書でレスポンシブ・ウェブデザインの本はなかったためこれが日本
- [書評：jQuery Mobile ポケットリファレンス](https://iwb.jp/jquery-mobile-pocket-reference/) - 現時点でJQuery1.1が出ているが基本は同じ 2012/05/29時点ではJQuery1.1が出ているが基
- [書評：Web Designing 2012年6月号](https://iwb.jp/webdesigning201206/) - 特集1：定番jQueryプラグイン2012 定番のJQueryを44個紹介。どれもWebサイト作成時に実際に使
- [書評：Web Designing 2012年2月号](https://iwb.jp/webdesigning201202/) - 特集1：HTML5を始めよう。 毎度おなじみHTML5特集。Web DesigningでHTML5を取り上げた
- [書評：Androidフォン英語学習法―あなたの手元の最強英語ツール](https://iwb.jp/android-english-app/) - 紹介しているアプリはすべて無料だが･･･ この本の冒頭にはこのようなことが書かれている 本書で紹介しているアプ
- [FirebaseのFirestoreのセキュリティルールの設定方法](https://iwb.jp/how-to-configure-firebase-firestore-security-rules/) - Firestoreのセキュリティルールは公式ドキュメントを見てもどう設定すれば良いのかわかりづらいので、よく使用されるルールを簡単にまとめました。
- [AmazonでSNSのシェアや短縮URLを取得する方法と注意点](https://iwb.jp/amazon-sns-and-shortened-urls-share-button/) - AmazonのWebサイトを閲覧中に商品ページの内容をSNSでシェアしたいことがあります。知っている人は少ないですが、Amazonの商品画像の右上にはシェアボタンがあります。
- [書評：リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック](https://iwb.jp/readable-code/) - どの言語の利用者でも理解できる良書 本書の中では例としてJavaやJavaScriptなどが例としてあげられて
- [書評：Web Designing 2012年5月号](https://iwb.jp/webdesigning201205/) - 特集1：素敵な素敵なスマートフォン向けサイト 最近のスマートフォンサイトの紹介。まるでアプリのようなサイトや傾
- [8チャンネル自動録画HDDレコーダー[全録 ゼンロク]を試してみた](https://iwb.jp/buffalo-hdd-recorder-zenroku/) - 8チャンネル自動録画HDDレコーダー[全録 ゼンロク]を購入したので設置してみた。 HDDレコーダー前面 HD
- [書評：Web Designing 2012年3月号](https://iwb.jp/webdesigning201203/) - 特集1：WordPressカスタマイズTips35 最近バージョンが3.3.1になりますます使いやすくなったW
- [書評：Twitterで磨く！20代からの「国語力」](https://iwb.jp/twitter20/) - ありそうでなかったtwitter本 この本は、twitterのマニュアル本ではありません。この本は、twitt
- [書評：jQuery Mobile](https://iwb.jp/jquery-mobile/) - jQuery Mobileという書籍の書評
- [X (旧Twitter)のSVGロゴアイコンの作成方法と保存場所](https://iwb.jp/x-twitter-svg-logo-icon-code/) - Twitterの名称がXに変更され、ロゴのアイコンも青い鳥から黒いXに変更されました。今後はWebサイトで使用されているTwitterアイコンをXアイコンに差し替える作業が必要となります。XのヘルプセンターなどではXのロゴのアイコンなどがSVGになっているので、これを利用すればXのロゴをSVGで作成できます。
- [SvelteとFirebaseのFirestoreでTodoリストを作成する方法](https://iwb.jp/svelte-firebase-firestore-todo-list-coding/) - SvelteとFirebaseのFirestoreでTodoリストを作成する方法についてコード付きで解説しています。
- [「x svg logo」で検索するとiwb.jpの記事が検索結果1位に表示される理由](https://iwb.jp/x-twitter-svg-logo-google-search-result/) - 2023年8月21日現在、「x svg logo」で検索するとiwb.jpの記事が検索結果1位に表示されます。これには3つの理由があるので解説します。
- [CSSだけでPhotoshopのような透過用格子背景を表示する方法](https://iwb.jp/grid-background-for-transparency-like-in-photoshop-using-only-css/) - Webページで画像をページ上に貼る際、背景色が白一色の場合、白の画像は同化されて見えなくなってしまうことがあります。背景色をグレーまたは黒にすれば白の画像でも見えるようになりますが、今度はグレーまたは黒の画像が見えなくなってしまうことがあります。そんなとき、Photoshopのようなグレーと白の透過画像用の格子背景を使えば、どちらのパターンの画像でも視認できるようになります。
- [新宿御苑前駅のラーメン店｢Ramen Afro Beats｣の行き方と注意点](https://iwb.jp/ramen-afro-beats-tori-paitan-shinjuku-gyoen/) - Ramen Afro Beatsとは丸ノ内線の新宿御苑前駅3番出口より徒歩2分の場所にある2023年3月10日にオープンしたラーメン店。東横線の祐天寺駅にある「Ramen Break Beats」の2号店として存在しています。「Ramen Afro Beats」は幻の地鶏「天草大王」を使用した鶏白湯らぁ麺がメインのお店で、こちらのラーメンのクオリティも非常に高いので、食べログなどで高評価となっています。
- [SvelteKitの$app/xxxの各種モジュールの使い方](https://iwb.jp/sveltekit-app-module-how-to-use/) - SvelteKitの$app/environment, $app/forms, $app/navigationなどについて解説
- [WordPressの新エディタのカテゴリー選択を1つに制限する方法](https://iwb.jp/wordpress-new-editor-select-one-category-only/) - WordPressのカテゴリーは複数選択可能のため、間違えて2つ以上選択してしまう可能性がある。functions.phpにカテゴリーを1つしか選択できないようにするスクリプトを追記すれば、新エディタでカテゴリーを2つ以上選択する間違えは発生しなくなる。
- [Svelteを使う人がよく間違えるconsole.logの使い方](https://iwb.jp/svelte-console-log-not-working/) - Svelteでconsole.logを使用する場合はJavaScriptのコードと同様にscript内にconsole.logを書けば良いのですが、HTML内に{console.log(foo)}のように書きたい場合もあります。しかし、{console.log(foo)}だと画面上にundefinedが表示されてしまいます。
- [ChatGPTで必ず覚えるべき8つのショートカットキー](https://iwb.jp/chatgpt-8-shortcut-keys/) - ChatGPTを使用する際に各ボタンをクリックして操作している人が多いですが、ChatGPTには8つのショートカットキーが用意されています。これらを使うことで効率よく操作が行えるようになります。
- [Viteでnpm run dev実行後にdevやstgなどのURLを表示する方法](https://iwb.jp/vite-npm-run-show-dev-test-stg-url/) - 「npm run dev」を実行するとlocalhostのURLしか表示されませんが、前述のdev (開発環境)などのURLも表示されると便利です。Viteで「npm run dev」を実行するにはvite.config.jsのpluginsにconsole.logでテキストを表示する処理を追加します。
- [WordPressでX (旧Twitter)の文字を使うとエラーで保存不可](https://iwb.jp/wordpress-x-twitter-character-save-database-error/) - WordPressでは一部の特殊文字はそのままでは保存できない仕様になっているため、X (旧Twitter)の特殊文字を入力して保存するとエラーになります。
- [TwitterがXになってからアカウントがバレる機能がオンになった？](https://iwb.jp/x-twitter-reveal-privacy-accounts-has-been-turned-on/) - TwitterがXになってから「見つけやすさと連絡先をオフにする方法」というアカウントがバレる機能がオンになったという投稿が話題になっていた。人によっては特定の条件によって勝手にオンになるかもしれないので、念のため確認することをオススメします。
- [飲茶TERRACE 桃菜 巣鴨店で食べ放題Cコースを食べた感想と注意点](https://iwb.jp/yamucha-terrace-tohsai-sugamo-skylark/) - 飲茶TERRACE 桃菜はガストやバーミヤンなどを展開するすかいらーくホールディングスの新業態で、バーミヤンと違って飲茶を中心としたメニューになっています。最近巣鴨店がオープンしたので行ってきました。
- [「フィッシングに対する保護を強化しましょう」は詐欺メールではない](https://iwb.jp/gmail-increase-protection-against-phishing-is-not-a-scam-email/) - スマートフォンの場合、メッセージが表示されない場合はGoogleアカウントのセキュリティから「セーフブラウジング保護強化機能を管理」からオンにできます。セーフブラウジングの保護強化機能を有効にしないと、フィッシング詐欺やパスワード侵害などによる不正アクセスに気づきにくくなるため、必ず有効にすることをオススメします。
- [パソコン版Twitterの位置情報をタグ付けを有効にする方法](https://iwb.jp/twitter-pc-version-enable-tag-location-option/) - ツイートに位置情報のタグ付けをするとユーザーは位置情報に絞って検索を行うことができるようになるため、場所を明確に示したい場合や地域のPRのツイートなどに利用できます。しかし、パソコン版のTwitterだとデフォルトで位置情報をタグ付け機能が無効になっていることが多いので使ったことがない人も多いでしょう。
- [git logの日時を7月26日(水)のように日本語で表示する方法](https://iwb.jp/git-log-date-format-local-convert-japanese-day/) - Gitコマンドで使用頻度の多い「git log」は実行すると月と曜日が英語表記になってしまい、日本人にとっては見にくい表示になっています。「git log」で表示される月と曜日は以下のように「--date=format-local」を付けてフォーマットすると日本語で表示できます。
- [Svelteでifの条件分岐で画像表示がチラつく場合の解決方法](https://iwb.jp/svelte-if-conditional-displaying-images-flickering/) - Svelteでifの条件分岐で非表示の画像の表示をすると表示時にチラつくことがあります。これはifで非表示にした画像は読み込まないことが原因で、画像をプリロードすれば解決できます。
- [Svelteだとimgタグのaltが冗長だと警告が表示される](https://iwb.jp/svelte-alert-a11y-img-redundant-alt/) - VS Codeのコーディング時に、Svelteでimgタグのaltを入れた際に「a11y-img-redundant-alt」の警告が表示されることがあります。a11y-img-redundant-altはimgタグのaltが冗長だと表示される警告で、例えば「Photo of a kitten」のようなaltにすると警告が表示されます。
- [CSSのScroll-driven Animationsでトップへボタンを表示する方法](https://iwb.jp/css-scroll-driven-animations-goto-top-button/) - CSSだけで最後までスクロールした際にページ右下に表示されるトップへ戻るボタンの表示・非表示の処理を作成すると、処理が軽くなり保守性も向上するため、Scroll-driven AnimationsがChrome以外のブラウザでも使用可能になった際には、JavaScriptではなくCSSで書くようにすると良いでしょう。
- [Vite + SvelteでSass(SCSS)とAutoprefixerを使用する方法](https://iwb.jp/vite-svelte-sass-scss-autoprefixer-postcss-config/) - Vite + SvelteでSass(SCSS)とAutoprefixerを使用するにはAutoprefixerをインストールして、.browserslistrcとpostcss.config.cjsのファイルを用意します。
- [ChatGPTのカスタム指示機能(Custom instructions)の使い方](https://iwb.jp/chatgpt-custom-instructions-settings/) - ChatGPTのカスタム指示機能(Custom instructions)は2023年7月20日(米国時間)に追加されたChatGPTの新機能で、回答の条件を事前に設定できます。
- [GitHub Actionsでpushした際に自動的にLinterを実行する方法](https://iwb.jp/automatically-run-linter-push-github-actions/) - GitHub ActionsとはGitHubが提供するCI/CDサービス。CI/CDは「継続的インテグレーション/継続的デリバリー」とは簡単に言うと開発での色々な処理の自動化を意味する。例えばJavaScriptファイルをGitでGitHubでプッシュした際に自動的にGitHub上でLinterを実行させてコードをチェックさせることなどができる。
- [国会図書館のカードを忘れた場合の手続きと注意点](https://iwb.jp/procedures-and-precautions-for-forgotten-library-of-congress-card/) - 先日調べ物のため国会図書館に行ったのですが、登録利用者カードを忘れました。その際に手続についてググったのですが、なぜか国会図書館のWebサイトにはカードを忘れた場合の手続きについて記載されていないので、カードを忘れた場合の手続きについて書きました。
- [【CSS】borderを使って、＞を作るのはやめませんか？](https://iwb.jp/css-border-icon-svg-polyline-points/) - SVGはpolylineを使用すればいくつかの座標で繋がった一連の直線を生成できます。そのため、polylineにpoints属性で座標を記載すれば「＞」をSVGで作成できます。
- [Androidで厚生労働省を名乗る中国の迷惑電話を拒否する方法](https://iwb.jp/how-to-reject-unwanted-chinese-calls-on-android-settings/) - AndroidはiPhoneと違って公衆電話および不明な発信者からの着信をブロックする機能があります。設定するには通話の設定から「ブロック中の電話番号」を選択して設定します。また、Calls Blacklistというアプリをインストールすれば、特定の電話番号のみ着信拒否できます。
- [JavaScriptのArray.from()メソッドは配列風オブジェクトの変換に利用する](https://iwb.jp/javascript-array-from-method-convert-object-like-to-array/) - Array.from()メソッドは反復可能オブジェクトや配列風オブジェクトからシャローコピーされた、新しいArrayインスタンスを生成します。色々な使われ方をしますが、オブジェクトを配列に変換するとき以外の用途で使用するとコードが冗長になるケースが多いので注意が必要です。
- [無職 やめ太郎風の会話形式の記事をChatGPTで書く方法](https://iwb.jp/how-to-write-a-conversational-article-in-chatgpt/) - 会話形式の記事はChatGPTを使うと簡単に書くことができます。例として無職 やめ太郎風の会話形式で書きましたが、人物や補足を変えれば汎用的に使えます。
- [JavaScriptでHTMLを文字列で取得したらDOMParserで操作するべし](https://iwb.jp/html-as-text-you-should-use-javascript-domparser/) - DOMParserとはHTMLをDOMノードオブジェクトに変換するためのAPIです。例えばHTMLを取得して、ul#list 内にliタグを追加して addString の文字列をliタグ内に入れたい場合DOMParserを使用することで、HTML内にliタグを追加して文字列を生成することができます。
- [ノッチ付きのMacBookでフルスクリーンショットで上部を黒で塗りつぶさない方法](https://iwb.jp/black-line-of-full-screenshot-on-a-notched-macbook/) - 15インチMacBook AirでChromeをフルスクリーンの状態で「shift + command + 3」でフルスクリーンショットを保存すると、上部が黒く塗りつぶされてしまいます。黒く塗りつぶさずにフルスクリーンショットを保存するにはChromeのデベロッパーツールを使用します。
- [HTMLのimgタグのwidthとheightは実質必須なのに未設定の人が多い](https://iwb.jp/html-img-width-and-height-attribute-are-practically-mandatory/) - HTMLのimgタグのwidthとheightの属性は実質必須なのに「記述しない！」が最多なのは、この属性の重要性と簡単に設定する方法を知らない人が多いことが原因だと考えられる。
- [ポップオーバーAPIを使えばポップアップを簡単に作成可能](https://iwb.jp/popup-can-be-easily-by-popovertarget-and-popover-api/) - ポップオーバーAPIはポップオーバーコンテンツを表示するため仕組みです。作成方法はクリックするボタンかリンクにpopovertarget属性を付けてidを指定して、ポップオーバーコンテンツにidとpopover属性を付けるだけです。
- [Node.jsでJSONがimportで読み込めないときの対処法](https://iwb.jp/nodejs-json-import-fs-promises-readfile/) - Node.jsを使用しているとpackage.jsonなどのJSONファイルからデータを取得したいことがある。しかし、「import data from './foo.json'」のようにimportでJSONを読み込もうとしてもエラーが出て読み込めない。
- [1分でわかるWordPressのbloginfoの非推奨パラメーター](https://iwb.jp/wordpress-bloginfo-deprecated-parameters/) - WordPressのテンプレートタグのbloginfoには9つの非推奨のパラメーターが存在する。bloginfo('wpurl'); bloginfo('siteurl'); bloginfo('home'); bloginfo('url'); bloginfo('text_direction'); bloginfo('stylesheet_url'); bloginfo('stylesheet_directory'); bloginfo('template_url'); bloginfo('template_directory');
- [simple-gitを使用したNode.jsでGitの各コマンドの実行方法](https://iwb.jp/simple-git-nodejs-npm-git-command/) - Gitのコミットなどの各コマンドは通常はターミナル上で直接入力して実行しますが、Node.jsを使用してコミットなどの各コマンドを実行したいことがあります。そんなときはsimple-gitを使用すれば簡単にNode.jsでもGitの各コマンドを実行できます。
- [git initのあとはgitignoreコマンドが便利＆必要](https://iwb.jp/npm-gitignore-command-is-useful-and-necessary/) - gitignoreコマンドとは.gitignoreファイルを自動的に取得するコマンドです。フロントエンドエンジニアであれば「npm install gitignore -g 」でインストールして、「gitignore node」を実行して.gitignoreファイルを作成すれば良い人が多いです。
- [CSSでテキストの中央揃えはtext-wrap: balanceを適用したほうが良い](https://iwb.jp/css-requires-text-wrap-balance-for-centering-headings/) - text-wrap: balance はその名の通りテキストの折り返しをバランスの良い位置で行うようにできるプロパティです。例えば以下のサンプルの場合、text-wrap: balance が適用されていると最後の「website」だけが折り返し後に表示されず、バランスの良い見た目になります。
- [Androidでは設定で画面保護シートモードを有効にしないとタップ時に感度が下がる](https://iwb.jp/android-screen-protector-sheet-mode-setting/) - 画面保護シートを貼った端末だとタップ時の感度が下がるので、これを改善するための機能。これを有効にするとタップなどの画面操作時の感度が上がります。機能自体は結構前からあるもので、Pixel 4のような古い端末でも設定できます。
- [jQuery 3.7.0では新たに6つのプロパティが自動px付与になる](https://iwb.jp/jquery-version-3-7-0-unitless-css-properties/) - 2023年5月11日にjQuery 3.7.0がリリースされました。jQuery 3.7.0から新たに単位なしで補完されるプロパティが6つ追加されました。単位なしプロパティとはjQueryで.CSS()メソッドを使用する際に数値が単位なしの場合は単位を補完する機能です。
- [jQuery 3.7.0から追加された.uniqueSort()の使い方](https://iwb.jp/jquery-version-3-7-0-uniquesort/) - 2023年5月11日にjQuery 3.7.0がリリースされました。jQuery 3.7.0には.uniqueSort()という新しいメソッドが追加されているのですが、公式サイトの解説だと使い方が少しわかりづらかったので、簡単に説明します。
- [ローディングスピナーを画像を使わずSVGだけで作成する方法](https://iwb.jp/svg-loading-spinner-without-images-and-css/) - ローディングスピナーとはWebサイトで何かを読み込む際にグルグル回って表示されるもの。GIFアニメーション画像だったり、CSSで作られていることが多いですが、SVGだけで作成することが可能です。例えば、記事内のローディングスピナーはSVGだけで作られています。
- [3分でできるMilkCocoaを使用した短縮URLサイト作成方法](https://iwb.jp/milkcocoa-url-shortening-site-coding/) - 短縮URLサービスは便利だがURLの語尾に+記号を付けると、アクセス数などが第三者などに知られてしまうため、ビジネスで使用するのは好ましくない。自社のサイト内に短縮URL生成ページを作成すれば第三者などに短縮URLのアクセス数などを知られてしまう心配はなくなる。短縮URL生成ページを作成すると作るのに時間がかかると思う人が多いと思うが、MilkCocoaを使用すれば3分くらいで作成できる。
- [Googleが2年放置のアカウントを削除！気をつけるべきことは…](https://iwb.jp/google-delete-accounts-neglected-for-two-years/) - 2023年5月17日にGoogleが2年放置のGoogleアカウントとそのコンテンツを削除するようポリシーを改定しました。ヤフーやマイクロソフトのサービスをメインで使用していて、Googleはたまにしか使用しない人は2年放置してアカウントを削除されてしまう可能性が高いので注意が必要です。
- [JavaScriptのsetHours()は分や秒も引数で設定できる](https://iwb.jp/javascript-sethours-can-set-minutes-and-seconds/) - 時を設定する場合はsetHours()、分を設定する場合はsetMinutes()、秒を設定する場合はsetSeconds()を使用すると説明されていることが多いですが、setHours()は第2引数に分、第3引数に秒を設定可能です。
- [GA4のevent_countパラメータはイベント数になっている](https://iwb.jp/google-analytics-ga4-event-count-parameter/) - 現在のセグメントはsession_startのevent_countパラメータの「イベント数」のように日本語化されていることがあるので注意が必要です。
- [GA4 DemoのGoogle Merchandise StoreはMerch Shopに名前が変更されているので注意](https://iwb.jp/ga4-demo-google-merchandise-store-renamed-merch-shop/) - GoogleアナリティクスのGA4 DemoのGoogle Merchandise StoreはGoogle Merch Shopに名前が変更されています。以前はGoogle Merchandise Storeだったのですが、これだと「…」でテキストが省略されてしまうので、Google Merch Shopと短い名前になりました。
- [30分以上の動画があるとGA4のセッションが切れるので注意](https://iwb.jp/google-analytics-ga4-sessions-cut-off-if-30-minutes/) - Webサイト内に30分以上の動画が埋め込まれているとGA4のセッションが切れる可能性があります。Googleアナリティクスでは30分間操作がなければセッションはタイムアウトのため終了するからです。例えば劇場版『TOKYO MER～走る緊急救命室～』のWebサイトには40分46秒の動画がWebサイト内に埋め込まれています。
- [1分でわかるGoogle Apps Scriptのユニットテストの導入方法](https://iwb.jp/google-apps-script-gas-unit-test-howto/) - GASのコードはGmail、Googleカレンダー、Googleスプレッドシートなどで利用することが多いので、コードに問題がないかユニットテストを導入したほうがコードの品質が保たれます。この記事ではGASのライブラリにGASUnitを入れてユニットテストをする方法について説明しています。
- [Jestのテスト時のタイムアウト時間を変更する3つの方法](https://iwb.jp/jest-test-change-timeout-period-setting/) - Jestではデフォルトのタイムアウト時間が5000msに設定されているため、処理時間が5000ms以上のテストは「Exceeded timeout of 5000 ms for a test」というエラーが表示されます。Jestのタイムアウト時間を変更する方法は3つあります。
- [DeepLのパソコン用アプリは画像テキストの翻訳ができる](https://iwb.jp/pc-application-version-of-deepl-can-translate-image-text/) - あまり知られていませんが、DeepLはアプリ版だと画像テキストの翻訳ができます。画像テキストの翻訳はWeb版のDeepLだとできないので、DeepLを使用するならアプリ版がオススメです。
- [Svelteのvalueは文字列と数値を判別するのでchecked属性は不可](https://iwb.jp/svelte-value-string-and-number-checked-attribute-is-not-allowed/) - Svelteでフォームを作成していたら1つ目のcheckboxにcheckedが入っていないことがあった。調べたところSvelteではvalueの文字列と数値の書き方がわけられているので、scoopsが文字列の場合は「value="1"」だが、数値の場合は「value={1}」と書かないと正しく動作しない仕様だった。
- [3分でできるVue 3でJSONを読み込む方法](https://iwb.jp/vuejs-vue3-axios-get-json-data/) - Vue 3でJSONを読み込む方法についてサンプル付きで解説しています。
- [JavaScriptのJSON.stringify(obj, null, 2)で整形して出力できる](https://iwb.jp/javascript-json-stringify-formatted-and-output/) - JavaScriptのJSON.stringifyの第2引数にnull、第3引数に半角スペースのインデント数を指定すればJSONを整形して文字列で出力できる。
- [3分でできるVue 3のTodoリストアプリの作成手順](https://iwb.jp/vuejs-vue3-todo-list-app/) - 3分で作成可能なVue 3を使用したTodoリストアプリの作成手順を解説しています。
- [ChatGPTを使えば簡単にtableの表をgridレイアウトにできる](https://iwb.jp/chatgpt-easy-convert-table-to-grid-layout/) - コーディングをしているとtableタグで作成されたコードをCSSのgridを使用したコードに修正したいことがあります。そんなときはChatGPTを使えばtableの表をgridに変換できます。
- [iwb.jpの2013年6月と2014年6月のブラウザシェアの違い](https://iwb.jp/browser-share-201406/) - iwb.jpのブラウザのシェアを調べてみたら去年と比べるとブラウザのシェアにだいぶ変化があった。Googleアナリティクスでiwb.jpの2013年6月と2013年6月のブラウザシェアを比べるとChromeのシェアが40.7%から48.9%に増えていた。
- [HTMLのinert属性を使えば要素を不活性状態にできる](https://iwb.jp/html-inert-attribute-can-be-made-element-inert/) - HTMLのinert属性とは要素に対するユーザーのクリックなどの入力イベントを無効化にする不活性状態にできる属性です。ちなみにinert (イナート)は不活性という意味です。disabled属性やpointer-eventsとは異なる処理をします。
- [Google Chrome v112 CSSのネストによる表示崩れに注意](https://iwb.jp/google-chrome-v112-css-nest-caution/) - Chromeのバージョン112からCSSのネストが可能になりました。CSSのネストに未対応のブラウザだとネストされている部分のコードは無視されます。逆に言うと今まで間違えてCSSのネストを書いて無視されていたコードはv112から適用されるため、それが原因で表示崩れなどを発生させる可能性があります。
- [漢字のルビにはHTMLのrubyタグとuser-selectを使ったほうが良い](https://iwb.jp/html-ruby-tags-and-user-select-for-kanji-ruby/) - 日本のWebサイトだと漢字にルビを入れることがあるが、HTMLタグにはrubyタグというのがあり、漢字のルビにはこちらを使用するのが好ましい。しかし、Webサイトを見ているとルビにrubyタグを使用されていないケースが多く見受けられる。
- [コナミコマンド(上上下下左右左右BA)のJavaScript実装方法](https://iwb.jp/javascript-konami-command-twitter/) - 2023年4月4日(火)にTwitterを見たらトレンドにコナミコマンドが表示されていた。現在のTwitterのWebサイトでキーボードでコナミコマンド入力すると左上の犬のアイコンが回転します。コナミコマンドの入力を検知して要素を回転させる処理はJavaScriptを使えば簡単にWebページに実装させることができます。
- [ドメイン情報はJPRSとかではなくICANNで調べると良い](https://iwb.jp/search-domain-information-icann-not-jprs-or-onamaecom/) - インターネットを利用しているとドメイン情報を調べたいことがある。例えば onamae.com や amzn.asia のドメインがどこの会社で管理されているかなどです。ドメイン情報を調べたい場合、Whoisでドメインを検索して調べるのが一般的です。 しかし、日本のGoogleで「Whois」や「ドメイン検索」などで検索すると「JPRS」や「お名前.com」のWhoisが検索結果上位に表示されるので注意が必要です。
- [IPAがサイトリニューアルで大量のリンク切れが発生中](https://iwb.jp/ipa-broken-web-page-link-in-site-renewal/) - IPAのサイトリニューアルで大量のWebページのリンク切れが発生しています。一般的にはWebサイトをリニューアルしてURLが変わってもリダイレクトさせることが多いが、IPA (情報処理推進機構)はリダイレクト処理を行わなかったのでリンク切れが大量発生しているのです。
- [JavaScriptでreplaceを大量に使わずオブジェクトを利用する方法](https://iwb.jp/objects-in-javascript-without-many-replace/) - JavaScriptのreplace()メソッドは一致する文字列の一部またはすべてを置換して文字列を返します。 置換前と置換後の文字がそれぞれ違う場合はreplaceメソッド単体だけでは処理できないため、replaceを大量に使用しているケースが多いですが、オブジェクトを使用することでreplaceの使用回数を1回にできます。
- [IE11でmaxlength属性を設定すると日本語入力が正しく機能しない](https://iwb.jp/ie11-maxlength/) - Internet Explorer 11でmaxlength属性を設定すると漢字変換前のひらがな入力がmaxlength属性で指定した文字数しか入力できない問題があることがマイクロソフトの公式サイトで報告された。
- [CSS Media Queryのwidth < ○px記法の全ブラウザ対応方法](https://iwb.jp/css-media-query-range-syntax-width/) - CSS Media Queryのmin-widthやmax-widthなど書き方は指定方法が直感的にわかりづらかったので、最近のモダンブラウザでは「320px
- [Firefox Relayを会社のメールアドレス利用者は必ず使うべき](https://iwb.jp/firefox-relay-mail-chrome-howto/) - Firefox Relayとはメールアドレスを非公開にするための拡張機能です。Firefox Relayを使用せずに会社のメールアドレスをWebサイトのフォームに入力して送信すると、思わぬトラブルに見舞われる可能性があります。
- [Twitterの認証アプリの認証コードはApple IDではなくパスワードから取得する](https://iwb.jp/twitter-authentication-code-password-not-apple-id/) - Twitterの認証アプリの認証コードはApple IDからではなく、システム環境設定 > パスワードからTwitterを選択して取得します。確認コードは30秒ごとに変更されるので、確認後にすぐに入力する必要があります。
- [新型コロナウイルス接触確認アプリ(COCOA)を入れた感想と注意点](https://iwb.jp/new-coronavirus-contact-confirmation-app-cocoa/) - 厚生労働省が新型コロナウイルス感染症の拡大防止のために新型コロナウイルス感染症対策テックチームと連携して開発した「新型コロナウイルス接触確認アプリ」のこと。COCOAはCOVID-19 Contact Confirming Applicationの略。
- [【WordPressプラグイン】ひたすら楽してWebサイト運用](https://iwb.jp/wordpress-plugin-hitasurarakushite-post/) - iwb.jpはWordPressで運用しているWebサイト(個人ブログ)なのですが、仕事でもないのにWordPressでWebサイトを運用するのは色々面倒ですが、WordPressプラグインをインストールすればWebサイトの運用がかなり楽になります。
- [CSSのtranslate、scale、rotateはtransformなしで使える](https://iwb.jp/css-animation-translate-scale-rotate-without-transform/) - CSSでtranslate、scale、rotateを使用する際はtransformプロパティを使用してtransform: translate(x, y); のように書かれることが多いです。しかし、現在のブラウザはtranslate、scale、rotateに関してはプロパティとして単独で使用できるので、translate: x y; のように短く書くことが可能です。
- [iOS SafariはCSSのfilterを画像に大量に適用すると画像がバグる](https://iwb.jp/safari-css-filter-images-apply-bug/) - CSSのfilterはPhotoshopのように明度や彩度の調整などができて便利なので最近はよく使用しているWebサイトを見かけるが、iOS SafariだとCSSのfilterを画像に大量に適用すると一部の画像がバグるので注意が必要だ。
- [トルネ(ナスネ)を購入するとNHKから放送受信料の封筒が届く](https://iwb.jp/torne-nasne-broadcast-subscription-fee-buy-nhk/) - トルネ(ナスネ)を購入するとSonyからNHKへ購入したことが通知されます。トルネ購入者がNHKの放送受信料を支払わないと放送法第64条に違反するため、NHKに訴えられて裁判になる可能性があります。また、2023年4月からはNHKの「2倍割増金制度」が運用されることが決定しており、正当な理由もなく受信契約に応じない人は受信料の2倍にあたる割増金を受信料に加えて請求されます。
- [CSSの大量の!importantは変数(カスタムプロパティ)で削減可能](https://iwb.jp/css-important-reduce-variables-custom-properties/) - 読み込んだCSSファイル内に!importantが使用されていることはたまにありますが、!importantを使いまくるとコードの可読性が低下するので、代わりに変数(カスタムプロパティ)をうまく利用して!importantの記述は減らすことをオススメします。
- [Anker 735 Chargerの充電器の使い方を間違えているケースが多い件について](https://iwb.jp/anker-735-battery-charger-ganprime-65w-wrong-usage/) - Anker 735 Charger (GaNPrime 65W) は最大出力65Wかつ、3ポート搭載で3台の機器を同時に充電が可能な3ポートUSB急速充電器です。使い勝手が良いのでカフェや公共施設のコンセントに挿して使用している人を見かけますが、中には使い方を間違えている人が結構います。
- [WordPressの目次プラグインTOC+が無効になったときの対処法](https://iwb.jp/wordpress-table-of-contents-plus-extension-toc-disabled-fix/) - WordPressプラグインTOC+の上級者向け設定がアップデートによりリセットされて見出しテキスト(目次)が表示されない問題が発生しました。いままで通り正常に表示させるには、上級者向けの見出しレベルのチェックを入れて更新する必要があります。
- [CSSにSVGのコードを貼っても反映されない5つの原因](https://iwb.jp/5-reasons-why-svg-code-is-not-work-in-css/) - CSSでSVGをbackgroundで読み込んで表示させることがあるが、SVGはCSSにインラインで書いても表示できるが、CSSにインラインで書く際の書き方を間違えると表示されないので注意が必要です。反映されないよくある原因は5つあります。
- [vue/cliでaxiosを使用する際によくある3つの間違った使い方](https://iwb.jp/vuejs-cli-axios-how-to-use/) - axiosとはPromiseベースのHTTPクライアント。Vue.jsではAPIの使用にはaxiosを推奨している。vue/cliでの使用方法と注意点は記事内に掲載。
- [textlintのtextlint-plugin-htmlでHTMLの文章校正が可能になった](https://iwb.jp/textlint-plugin-html-support-added/) - textlintはテキストファイルの文章校正はできますが、textlint単体ではHTMLファイルの文章校正ができません。しかし、textlintでHTMLファイルを扱うtextlint-plugin-htmlをインストールすれば、HTMLファイルの文章校正が簡単にできるようになります。
- [input type="date"はvalueの月日の頭に0がないと反映されない](https://iwb.jp/javascript-input-type-date-value-required-0-month-and-date/) - inputタグのtype="date"は便利ですが、JavaScriptで日付をvalue値に追加する際に、1桁の月日の頭には0を付けないと日付が反映されないので注意が必要です。
- [内閣府の国民の祝日のCSVファイル名が変更されたので注意](https://iwb.jp/javascript-csv-holidays-data-2023/) - 国民の祝日のCSVファイルとは内閣府のWebサイトにある国民の祝日のデータが入ったCSVファイル。国民の祝日のデータが入ったCSVのファイル名は2022年までは「syukujitsu.csv」だったのですが、2023年から「shukujitsu.csv」に変更されましため、プログラムの修正を行わずにそのまま使い続けると問題が発生する可能性があります。
- [1分でできるJavaScriptで国民の祝日を判定する方法](https://iwb.jp/javascript-new-date-is-holiday-check/) - JavaScriptのnew Dateによる日付の処理をしている際に国民の祝日を判定したいことがあります。たとえば2018年1月1日(月)のような月〜金の曜日でも祝日の場合は(月)のように赤くするなどの処理です。JavaScriptには曜日を数値で取得するgetDayはあるが祝日を取得するgetHolidayのようなものはないため祝日判定関数を自作する必要がある。
- [JavaScriptのsleep処理はawaitとPromiseを使用して1行で書ける](https://iwb.jp/javascript-sleep-await-promise-single-line-code/) - JavaScriptのsleep処理はawaitとPromiseを使用して1行で書ける。Googleで「JavaScript sleep」で検索すると無駄に長い説明とコードの記事が検索結果に表示されるが、参考にしないほうが良い。
- [VS CodeでSassのコンパイルはEasy SassではなくLive Sass Compilerを使うべき](https://iwb.jp/vs-code-live-sass-compiler-better-then-easy-sass/) - Easy SassとLive Sass CompilerはVS Codeの拡張機能でSassをコンパイルしてCSSファイルを生成する。Easy SassはAutoprefixerが使用できないのでLive Sass Compilerを使用したほうが良い。
- [Underscore.js 1.7の使い方 Collections編](https://iwb.jp/underscorejs-collections/) - 2014年8月26日にリリースされたUnderscore.js 1.7のCollectionsの使い方をサンプル付きでわかりやすく解説。
- [TypeScriptを1.xしか使ったことがない人のための基礎知識](https://iwb.jp/basic-knowledge-for-only-used-typescript-1-x/) - TypeScriptはバージョンがアップデートされるたびに新機能が導入されて、1.xの古いバージョンとは別物となっている。この記事では1.xの静的型付けとクラスベースオブジェクト指向などの基本機能しか知らない人が必ず知っておくべきバージョン2以降の新機能をまとめた。
- [autobind decoratorで.bind(this)用デコレーターを5秒で実装する方法](https://iwb.jp/typescript-autobind-decorator-this-implementation/) - TypeScriptを使用してWebサイトを作成するときに.bind(this)用デコレーターが作成されていることがある。.bind(this)用デコレーターは0から作成するよりもnpmからインストールして利用したほうが簡単に実装できます。
- [ウマ娘の聖地・府中東京競馬場安田記念とJRA競馬博物館に行った感想](https://iwb.jp/jra-tokyo-keiba-yasudakinen-umamusume/) - 2018年夏...ではなく冬にウマ娘のゲームアプリがリリースされるのだが、競馬に関しては素人なので東京競馬場とJRA競馬博物館に行って勉強してきた。6月3日(日)に安田記念(G1)やウマ娘特設ブース設置などがあったため、このタイミングで行った。東京競馬場は東京都府中市にある中央競馬の競馬場。京王線「府中競馬正門前駅」から専用歩道橋にて正門まで徒歩2分で行ける。
- [axiosよりファイルサイズが10分の1以下のredaxiosを使うべし](https://iwb.jp/javascript-fetch-redaxios-greater-than-axios/) - redaxiosとはaxiosと互換のあるJavaScriptライブラリ。ネイティブのfetch() を使用して作られているため、800バイトの超軽量サイズになっている。axiosの場合はIE11をサポートしているので、redaxiosより10倍以上もファイルサイズが大きくなっている。
- [閉じるボタンのバツアイコンはPNGやSVGよりCSSがオススメ](https://iwb.jp/css-close-button-batu-icon-not-png-or-svg/) - Webサイトの閉じるボタンのバツアイコンはPNGやSVGで作成されることが多いですが、個人的にはCSSで作成すると簡単に作れてメリットが多いのでオススメです。この記事では以下のサンプルのような閉じるボタンのバツアイコンのCSSでの作成方法について書いてあります。
- [食べ放題を廃止した「はーべすと ルミネ池袋店」の感想と注意点](https://iwb.jp/harvest-lumine-ikebukuro-buffet-lunch/) - はーべすと ルミネ池袋店とは有機野菜の料理がたくさんある人気の食べ放題のビュッフェスタイルのレストラン…だったのだが、新型コロナウイルスの影響で食べ放題を当面の間廃止することになった。
- [JavaScriptでオブジェクトを保護するfreeze()とseal()の使い方](https://iwb.jp/javascript-object-protected-freeze-seal-howto/) - JavaScriptではオブジェクトがよく利用されます。JavaScriptではAPIでJSONなどでデータを取得することが多いですが、その中のデータの大半はオブジェクトです。そのため、JavaScriptでオブジェクトの内容を保護したいことがよくあります。
- [TypeScriptのデコレータで見かける5つのエラーパターン](https://iwb.jp/typescript-decorators-5-error-patterns/) - TypeScriptのデコレータ (Decorator) はクラス宣言とメンバーに注釈とメタプログラミング構文の両方を追加する方法を提供します。JavaScriptにはない便利な機能ですが、使い方をよく理解していないとエラーを発生させてしまうことも少なくないです。この記事では注意すべきTypeScriptのデコレータで見かける5つのエラーパターンについて記載しました。
- [CSSのテキストエリアの行数(高さ)は変数で指定するのが正しい方法](https://iwb.jp/css-textarea-number-of-line-height-use-variable/) - textareaの高さを5行などにしたい場合は計算式があり、line-height * 行数 em をheightに指定して、同時にline-heightを指定すればきれいに表示されます。この際にCSSの変数を使用すれば使いまわしがしやすくなり、記述ミスも減らせます。
- [JavaScript正規表現のひらがな、全角半角カタカナ、漢字判定](https://iwb.jp/javascript-regular-expression-hiragana-katakana-kanji-determination/) - JavaScript正規表現のひらがな、全角半角カタカナ、漢字判定のコードのサンプルを記載しました。
- [Twitter利用者はFirefox Monitorでデータ流出確認をするべき](https://iwb.jp/firefox-monitor-scan-email-twitter-200-information-leak/) - Firefox Monitorとはメールアドレスを入力するだけでハッカーにメールアドレスやパスワードなどが知られていないか調査できるWebサービス。日本ではニュースでほとんど報道されていないのであまり知られていないが、最近Twitterから2億件以上のメールアドレスなどのデータが漏洩した。
- [Androidユーザーなら必ず設定するべき緊急情報と緊急通報](https://iwb.jp/android-user-should-setup-emergency-information-and-emergency-alerts/) - 緊急情報と緊急通報とはスマホのロックをかけた状態でも緊急時情報を確認したり、電源ボタンを5回以上すばやく押すことで緊急SOS(110番通報)を使用できる機能です。設定画面の「緊急情報と緊急通報」から設定できます。
- [JSDOMより数倍処理が速いHappy DOMの使い方](https://iwb.jp/npm-happy-dom-is-several-times-faster-than-jsdom/) - Happy DOMはグラフィカルユーザーインターフェイスのないWebブラウザーのJavaScript実装です。テストやスクレイピングなどに役立つWebブラウザーのエミュレートに利用できます。JSDOMという同様のライブラリもありますが、Happy DOMのほうが数倍処理が速いため、最近はHappy DOMを使用する人が増えています。
- [BrowserslistにIEやAndroidがあるとJSのコードが無駄に増える](https://iwb.jp/browserslist-ie-android-waste-of-javascript-code/) - BrowserslistはBabelやSCSSなどで使用されますが、書き方を間違えるとJavaScriptやCSSのコード量を無駄に増やしてしまうので注意が必要です。
- [BrowserslistをBrowserlistと間違えるなどのよくある間違いについて](https://iwb.jp/browserlist-is-correctly-browserslist/) - Browserslistとはpackage.jsonや.browserslistrcファイルなどにターゲットブラウザの条件を追加して取得する仕組み。例えばpackage.jsonに次のように追加すれば1%を超えるシェアで2バージョン前までのサポートが終了していないブラウザが対象となる。
- [ViteでSass(SCSS)とAutoprefixerを使用する方法](https://iwb.jp/vite-sass-scss-autoprefixer-howto/) - Viteは「yarn create vite」をターミナルで実行してyarnコマンドでインストールを済ませればすぐに起動できるので誰でも簡単にセットアップできるが、Sass(SCSS)とAutoprefixerには各種設定などが必要なため、そのやり方について解説しています。
- [強盗に拉致監禁されても位置確認アプリを起動してはいけない](https://iwb.jp/dont-launch-location-verification-app-for-robber/) - 強盗に拉致監禁されても位置確認アプリを起動してはいけない。拉致監禁された際にやるべき行動は3ステップあり、一番最初に行うのは音量をミュートにすることである。
- [Googleスプレッドシートでは空白セルだけを一括置換できない](https://iwb.jp/google-spreadsheet-cannot-regex-replace-only-blank-cells/) - 閲覧者の中には空白セルを選択して「^$」を正規表現で「休み」で置換すれば空白セルを埋められるのでは、と考えている人がいると思うが、正規表現で空白セルを埋める方法は2021年から使用不可になっているのでGoogle Apps Scriptで実装する必要がある。
- [Nunjucksを使用して既存のHTMLに変数を追加する方法](https://iwb.jp/nunjucks-nodejs-html-add-template-variables/) - Web制作をしていると静的なHTMLファイルにテンプレートの変数を含めたいことがある。そのようなケースの場合、WebpackやViteなどをインストールしなくてもNunjucksをインストールすれば簡単に実装できる。
- [ColaboのWebサイトは不正ログインで内部のファイルを盗まれている可能性あり](https://iwb.jp/colabo-official-wordpress-login-hacking/) - WordPressのログイン用のパスワードが長ければ解析に時間がかかるが、Colaboのようにセキュリティ対策を行っていないWebサイトは8文字程度の短い英数字のパスワードを設定していることが多いので突破されやすい。
- [1分でできるTwitterツイートのバックアップ](https://iwb.jp/twitter-download-your-data-backup/) - パソコンでTwitterにログインした状態で「データのアーカイブをダウンロード」のページにアクセスする。「アーカイブをリクエスト」のボタンを押す。アーカイブのダウンロードの準備が完了したらボタンが「アーカイブをダウンロード」に変わるので、あとはボタンをクリックしてダウンロードするだけです。
- [TypeScript cannot be compiled under '--isolatedModules'の解消方法](https://iwb.jp/typescript-cannot-be-compiled-under-isolatedmodules/) - isolatedModulesをtrueにすると単一ファイルの変換プロセスでは正しく解釈できない特定のコードを記述した場合に警告するようにTypeScriptに指示できます。 デフォルトはfalseですが、ViteなどでTypeScript環境を作成した場合はtsconfig.jsonで「"isolatedModules": true」が設定されています。記述ミスを防ぐために通常はtrueにしたほうが良いですが、TypeScriptの学習目的などではfunctionなどをexportしなければ警告が出てわずらわしく感じることがあります。
- [1分できるTypeScript開発環境の作成方法](https://iwb.jp/typescript-javascript-npm-live-server/) - TypeScriptを学習したいと思っていても初心者だと開発環境の構築がよくわからず初手でつまづくことが多いです。この記事では1分でできるTypeScript学習のための開発環境の作成方法を書きました。
- [npmのlive-serverは特定の条件で自動更新されないので注意](https://iwb.jp/npm-live-server-not-automatically-reload-updated/) - live-serverとはファイル修正時のブラウザの自動更新(ライブリロード)機能を備えた開発サーバーのnpmパッケージ。VS Code拡張機能のLive Serverとは別物です。簡単に開発サーバーを起動できて便利ですが、特定の条件下だとブラウザの自動更新(ライブリロード)機能が使用不可になるので注意が必要です。
- [予定にタグを追加できるGoogle Calendar Tagsの使い方](https://iwb.jp/google-calendar-tags-chrome-extention/) - Google Calendar TagsとはGoogleカレンダーの予定にタグを表示できるようにするChrome拡張機能。Googleカレンダー自体にはタグ追加機能はありませんが、Google Calendar Tagsをインストールすればタグの追加が可能です。
- [Node.jsでreplaceAllを使用するとv14.21.2以下はエラーになる](https://iwb.jp/nodejs-javascript-replaceall-error-vesion-14-21-2-or-lower/) - replaceAll() メソッドはマッチしたすべての文字列を指定した文字列に置き換えて返します。replaceメソッドで正規表現を使う必要がなくなりますが、Node.jsの場合はバージョンv14.21.2以下で実行するとエラーになるので注意が必要です。
- [1分でわかるJavaScriptのnew URL()の使い方](https://iwb.jp/javascript-new-url-constructor-search-params/) - URL() コンストラクターはパラメーターによって定義されたURLオブジェクトを返します。URL()内にURLを入れるとオブジェクトが返却されるので、これを利用すればURLのパラメーターの取得や追加などの処理が簡単にできます。
- [約120万のWebページで使用されているCSSプロパティの使用率](https://iwb.jp/global-css-property-usage/) - MicrosoftのサイトにはGlobal CSS Property Usageというbingで収集した約120万のWebページで使用されているCSSプロパティの使用率が掲載されているページがある。
- [サイト作成後にURLを入力してチェックすべきWebサービス](https://iwb.jp/website-url-check-service/) - サイト作成後にURLを入力してチェックすべきWebサービスにはモバイルフレンドリーテスト、PageSpeed Insights、Markup Validation Service、StyleStatsなどがある。
- [VSCode, Atom, Sublime Textのマルチカーソルの連番入力方法](https://iwb.jp/vscode-atom-sublime-multi-cursor-sequential-number/) - マルチカーソルとはその名の通りカーソルがマルチ(複数)になったもの。マルチカーソルで連番を入力する拡張機能をインストールすれば連番が付けられるようになる。
- [Chrome拡張機能 Puppeteer Recorderの自動操作の使い方と注意点](https://iwb.jp/chrome-puppeteer-recorder-how-to-use/) - ブラウザ操作を自動記録してPuppeteerのコードを出力してくれるChrome拡張拡機能。例えば…1.Chromeを開く2.iwb.jpの最近の投稿の1番目を開く3.iwb.jpの最近の投稿の2番目を開く4.Chromeを閉じる…という以上の動作などを自動化することができる。
- [推奨環境ページにはMacintoshではなくMacと表記すべき](https://iwb.jp/support-macintosh/) - Macintoshが今年で生誕30周年の節目を迎えたらしい。 祝 Macintosh 30周年!! 初代Mac
- [Atom Emmetのスニペットをカスタマイズして変更する方法](https://iwb.jp/atom-emmet-howto-snippet-customize/) - 便利なEmmetだがそのまま使用するには2点問題がある。展開されるHTMLのlangがenであることと、Emmetに含まれていない記法があることだ。例えば!を展開すると以下のようなコードが展開されるのだがlangがjaではなくenになっているため日本向けのサイトだと都合が悪い。
- [WordPressの投稿画面の日付を年月日の順番にする方法](https://iwb.jp/wordpress-post-admin-order-year-month-day/) - WordPressはデフォルトの状態だと投稿画面の公開(日時入力)部分は日付が「年月日」ではなく「日月年」となっているため、そのまま使用すると日本では年月日の順で入力するのが一般的なので、例えば「12月11日」と入力したつもりが「11月12日」と間違えて入力するリスクが上がってしまう。そのため、投稿画面の日付部分はfunctions.phpを修正して順序を「年月日」にしたほうが良いです。
- [VS CodeでPostCSSでEmmetが使えない問題の解決方法](https://iwb.jp/vscode-postcss-emmet-settings-json/) - EmmetはCSSだと使えるが、PostCSSはCSSではないので使えないと勘違いされている方が一定数います。しかし、実際はsettings.json (設定) を変更するだけでEmmetが使えるようになります。
- [JavaScriptのfetchで読み込み遅延やタイムアウトを実装する方法](https://iwb.jp/javascript-fetch-delay-timeout-abort-controller/) - fetchはリクエストやレスポンスといったプロトコルを操作する要素にアクセスするためのJavaScriptインターフェイスです。fetchにはjQueryのajaxのようなtimeoutオプションはないので、タイムアウト処理を別途作成する必要があります。
- [Apps Scriptの「appsscript.json」のエラーの対処法](https://iwb.jp/apps-script-appsscript-json-error-libraries/) - Apps Scriptのスクリプトエディタで『「appsscript.json」のエラー: 複数回使用されているサービス ID が見つかりました』というエラーが表示されて、ライブラリが追加できないことがある。そんなときはappsscript.jsonを記事内の手順で修正すれば解決できる。
- [1分でわかるPNG8,PNG24,PNG32を判別する方法](https://iwb.jp/png8-png24-png32-analyze/) - PNG8,PNG24,PNG32の判別はImageMagickというソフトウェアをインストールしてバッチファイルにPNGファイルをドラッグ＆ドロップするだけで簡単に判別できる。
- [Google Apps ScriptでURLから画像容量や幅・高さを取得する方法](https://iwb.jp/google-apps-script-image-url-file-size-width-height-function/) - 画像URLを取り扱う場合、画像容量(ファイルサイズ)、幅、高さなどもURLから参照したいこともありますが、残念ながらGoogleスプレッドには画像の容量、幅、高さを取得する関数はありません。しかし、GAS (Google Apps Script) を使用すれば画像の容量、幅、高さを自作することができるので、この記事では関数の作成方法について説明します。
- [ViteでHTMLコードを開発と本番で分けて.envで置換する方法](https://iwb.jp/vite-html-dev-build-replace-load-env/) - Viteを使用していると開発(dev)と本番(build)で分けてHTML内のコードを置換して生成したいことがあります。そんなときはViteのプラグインAPIのtransformIndexHtmlを使用すれば簡単にできます。
- [COCOAアプリを削除しても接触通知システムは止まらない](https://iwb.jp/cocoa-app-uninstall-android-ios/) - COCOAはデジタル庁などがインストールを推進していましたが、新型コロナウイルス感染症の全数届出見直しに伴い、2022年末を目処に機能を停止する予定となりました。そのため、インストールしつづけても来年以降はスマートフォンのバッテリーを無駄に消費することになるため、使用しない場合はアンインストールしたほうが良いです。
- [JavaScriptを使わないコンポーネント！CSSUIの使い方](https://iwb.jp/cssui-interactive-components-without-javascript/) - CSSUIを使用すればHTML + CSSだけでJavaScriptを使わずに、よく使用されるインタラクティブなコンポーネントを作成することができる。例えばアコーディオンの場合は記事に掲載されているHTMLを書いてCSSUIのCSSファイルを読み込むだけで作成可能になる。
- [JavaScriptだけで画像ファイル容量を減らす方法](https://iwb.jp/javascript-browser-image-compression-how-to-use/) - Browser Image Compressionとは画像圧縮のためにブラウザで実行可能なJavaScriptモジュールです。npmかCDNで読み込んで簡単なコードを書くだけで簡単にブラウザによる画像圧縮を実装できます。
- [1分でできるiframe組み込みのYouTube Player API](https://iwb.jp/javascript-iframe-youtube-player-api-howto/) - YouTube Player APIとはWebサイト内にYouTubeの動画をJavaScriptで追加できるAPI。HTML内にiframeを貼り付ける埋め込みとは異なり、JavaScriptで特定の条件をif文で出し分けて表示させることもできます。(日時によって表示させる動画を出し分けるなど)
- [aタグの下線の間隔(スペース)はtext-underline-offsetで調整する](https://iwb.jp/css-text-underline-offset-adjust-atag-underline-space/) - aタグに下線が付くとでリンクだとわかりやすくなる一方で、下線が文字にくっつくため漢字の多い日本語だと見た目が悪くなるデメリットがある。この問題はCSSプロパティのtext-underline-offsetで下線位置を調整すれば解決できる。
- [今さら聞けないmetaタグのOGPの設定方法](https://iwb.jp/ogp-html-tag-meta-settings/) - OGPとは「Open Graph Protocol」の略でTwitterやFacebookなどのSNSでWebページをシェアした際にタイトル、説明文、URL、画像などを伝えるためのHTML要素。例えばtitleタグが「Hello world!」となっていてもog:titleが「Foo bar!」となっていた場合はSNSでシェアされた際のタイトルは「Foo bar!」と表示される。
- [CSSアニメーションを学べるHello, animation!の解説と解答](https://iwb.jp/css-hello-animation-answers-and-explanations/) - Hello, animation!とはゲーム感覚でCSSアニメーションを学べるWebサイト。無料で学べる問題が全32問あり、すべて習得すればCSSアニメーションの基礎が身につきます。Webサイトを制作するにはCSSアニメーションの知識が必須なので、Hello, animation!で基礎を学んでおくと良いでしょう。
- [新型コロナワクチン接種証明書アプリでQRコード登録は不可](https://iwb.jp/vaccine-certificate-app-cant-qr-register/) - 新型コロナワクチンを接種するとQRコードが付いたシールを接種証明書に貼られますが、これをアプリで読み込むことはできません。4回目などのワクチン接種するには再発行を押して発行手続きを行います。
- [aタグで画像リンクにdownload属性を使用しないほうが良い理由](https://iwb.jp/a-tag-download-attribute-not-use-for-image-links/) - download属性とはブラウザがリンクされたURLをダウンロードとして扱うようにする属性。便利そうな属性ですが、デメリットが多いので使用するのはオススメしないです。
- [Font Awesome 6で無料アイコンフォントを使う方法](https://iwb.jp/font-awesome-6-free-icon-fonts-how-to-use/) - Font AwesomeとはWebサイトでアイコンフォントを使用できるサービスです。アイコンフォントを使用できるサービスは色々ありますが、その中でもFont Awesomeは使いやすく、2022年10月現在は無料で2,016種類が使用可能。
- [1分でわかるExcel VBAの配列push処理方法](https://iwb.jp/excel-vba-array-push-redim-preserve-ubound/) - 多くのプログラムでは配列は[]を使用して[1, 2, 3]のように書くがExcel VBAは[]は使用せず、pushに該当する処理のクセがある。この記事では配列とpushに該当する処理について簡単に説明する。
- [Twitterでは匿名アカウントでも電話番号で特定できる](https://iwb.jp/twitter-anonymous-accounts-identified-by-phone-number-or-email-address/) - 2022年10月にネット上で「Twitterで、電話番号やメールアドレスからアカウントを検索できる機能が、勝手にオンになっている。」とユーザーの間で話題になっている。Twitterでは「見つけやすさと連絡先」のチェックがオンになっていると他人が電話番号やメールアドレスからアカウントを検索することが可能です。
- [Feedlyの記事タイトル表示ずれのバグを直す方法](https://iwb.jp/how-to-fix-feedly-article-title-display-misalignment-bug/) - 2022年10月15日(土)現在、Feedlyで記事タイトルの表示がずれるバグが発生している。Feedlyでは「Jキー」を押すと次の記事が表示されるのだが、記事タイトルが表示領域外に表示されてしまう。
- [非エンジニアがGASを書いたが請求書フローが間違っているので改善してみた](https://iwb.jp/gas-google-apps-script-attachment-file-to-drive/) - メールに添付されている請求書をGoogleドライブに保存するという記事があったのだが、コードが間違っていて使い物にならなかったので改善してみた。ちなみにGASとはGoogle Apps Scriptの略でscript.newにアクセスすれば作成可能。
- [lsではなくexaを使ってアイコン付きのファイル一覧を表示](https://iwb.jp/exa-instead-of-ls-command-list-files-with-icons/) - exaはlsの最新の代替コマンドです。lsと違って一覧のアイコン付きで色分けして表示できるため、exaを使用したほうがlsよりもファイルの一覧の種類が確認しやすくなります。
- [JavaScriptのuse strict(厳格モード)で防げる9個のbadパターン](https://iwb.jp/javascript-use-strict-mode-prevented-9-bad-patterns/) - JavaScriptのuse strict(厳格モード)を使うと好ましくない記法を制限できます。JavaScriptは自由度が高いので、例えば「num = 1」のようにletやconstなどを付けなくても問題なく実行されますが、'use strict' を付けるとConsoleで「Uncaught ReferenceError: num is not defined」というエラーが表示されるため、変数の宣言漏れなどに気づきやすくなります。
- [CSSアニメーションの基礎知識のあとに学ぶ応用知識](https://iwb.jp/css-animation-applied-knowledge/) - この記事ではCSSアニメーションの基礎知識を学んだあとに覚えるべき応用知識について記載する。ここに書かれている「基礎知識」とはMDNのCSSアニメーションに書かれているanimationプロパティについて一通りの知識を意味している。
- [CSSスプライトで検索エンジン(機械)に画像認識させない方法](https://iwb.jp/css-sprite-search-engine-image-recognition/) - 検索エンジン(機械)は画面上にCSSスプライトで位置調整して表示された画像ではなく読み込んだ画像を収集するためCSSスプライトを使用すると何の画像か解析されることができなくなります。
- [Viteで非SPAなら入れたほうが良いvite-plugin-handlebarsの使い方](https://iwb.jp/vite-plugin-handlebars-how-to-use/) - vite-plugin-handlebarsとはVite用のHandlebars。Handlebarsとはシンプルなテンプレート言語。Handlebarsを使用すれば{{name}}と書いたものがYamadaのようになる。ほかにもHTMLファイルの読み込みにも対応しているのでSPAでなければ入れておくと便利です。
- [VS CodeでAuto Save(自動保存)を使ってはいけない3つの理由](https://iwb.jp/vscode-setting-auto-save-deprecated/) - VS CodeのAuto Saveとは、その名の通りファイルの自動保存のための設定。Settings (設定) でFiles: Auto Saveをオフ以外にすることで自動保存機能を使用できる。ドットインストールなどの一部のWebサイトではVS CodeのAuto Saveを有効にすることを推奨しているが、3つの問題があるので有効にしないほうが良いです。
- [fetchではなくaxiosを使用するのはIE対応のためだけではない](https://iwb.jp/javascript-fetch-axios-not-for-ie-only/) - IEのサポートが終了したため、これからはfetchを使ったほうがaxiosを使わないので軽くなって良いだろうと考える人がたまにいるが、axiosを使うのはIE対応のためだけではないです。
- [JavaScriptのlocation.hrefでリダイレクトさせる際の注意点](https://iwb.jp/javascript-location-href-redirecting-notes/) - SEO的にはサーバーにステータスコードを送信できる.htaccessでリダイレクトさせるのが好ましいが、何かしらの理由によりJavaScriptのlocation.hrefでリダイレクトさせているケースも多い。しかし、JavaScriptのlocation.hrefのリダイレクトは使い方を間違えるとリダイレクトで遷移させるのに時間がかかってしまうため注意が必要です。
- [Pixel 7はVPN付きなのでアダルトサイトを閲覧できる](https://iwb.jp/google-pixel-7-vpn-can-free-wifi-adult-site-browsing/) - Google Pixel 7シリーズが予約販売を開始しており、2022年10月13日に発売します。Google Pixel 7シリーズには「Google One VPN」が組み込まれています。VPNを使うと通信のセキュリティを強化できます。
- [1分でできるjson-serverによるダミーAPI作成方法](https://iwb.jp/javascript-npm-json-server-dummy-api/) - json-serverとはダミーAPIを作成できるnode.jsのライブラリ。フロントエンドの作業が先行している場合はAPIでjsonが取得できないとJavaScriptのコーディング作業が進まず困ることがある。そんなときはjson-serverを使用すればダミーAPIを簡単に作成できます。
- [人間とコンピュータ(ロボット)を区別するTurnstileの使い方](https://iwb.jp/cloudflare-turnstile-distinguish-humans-and-computers-robots/) - TurnstileとはbotによるWebサイトへの攻撃を防ぐため人間とコンピュータ(ロボット)を区別するCloudflareのWebサービス。同様のWebサービスではGoogleのreCAPTCHAが有名だがTurnstileは無料で簡単に実装できるので、今後Turnstileを利用するWebサイトが多くなることが予想される。
- [天下一品の日に不正取得したQRコード無料券を使うと捕まります](https://iwb.jp/tenkaippin-no-hi-app-coupon/) - 10月1日は天下一品でラーメン無料券を配布しているのですが、今年は紙の無料券ではなくアプリで店員さんの持っているQRコードを読み込んでアプリで無料クーポン券を取得する方式に変更された。セキュリティ上の理由により詳しくは説明しませんが、不正取得した無料券を使うと捕まる可能性があります。
- [URLにBitlyを使用時+でアクセス数が表示されなくなった](https://iwb.jp/dont-use-bitly-in-qr-code-url/) - BitlyとはURL短縮サービス。以前はURLの語尾に+を付ければ誰でもアクセス数が閲覧可能になっていましたが、現在は改良されて短縮URLを作成したアカウント以外は見れなくなっていました。
- [Browserslistでlast 2 versionsなどの好ましくない設定が多い](https://iwb.jp/browserslist-undesirable-settings-last-2-versions/) - BrowserslistがないとAutoprefixer, Babel, ESLint, PostCSSなどでターゲットブラウザを設定できないのでBrowserslistの設定は重要です。重要な設定ですがBrowserslistの書き方をよく理解しておらず、好ましくない設定になっているケースが多いので、設定する際は注意が必要です。
- [ビルドツールのコマンド実行後のcd〜は複数行をコピペ可能](https://iwb.jp/build-tool-commands-cd-can-copy-and-paste-multiple-lines/) - ビルドツールのコマンド実行後のcd〜は複数行をコピペ可能なのに1行ずつペタペタとコピペする人が結構いる。例えばターミナルで「npm init vite@latest」を実行すると以下のコマンドを実行してインストールしてくださいという表示が出るが、これは複数行をコピーしてペーストすれば3行すべてが実行される。
- [jQueryで$(要素).text()だと意図しない値を取得する可能性あり](https://iwb.jp/javascript-jquery-element-getting-unintended-text-values/) - jQueryはdocument.getElementById()やdocument.querySelector()のような長い記述ではなく$(要素)でよいので楽だが$(要素).text()を使用すると予期せぬバグが発生することがある。
- [GASで選択中のセルの背景色をすべて別の色に置換する方法](https://iwb.jp/google-apps-script-replace-all-cell-color-setbackground/) - 特定の背景色をすべて別の色に変更したい場合はExcelであれば背景色を検索して置換できるが、Googleスプレッドシートは背景色の検索機能がないのでできない。そのため、同様のことを行う場合はGAS (Google Apps Script)で機能を追加する必要がある。
- [JavaScriptのアロー関数でreturnを省略できる便利な書き方](https://iwb.jp/javascript-arrow-function-omits-return-tips/) - JavaScriptのアロー関数はreturnを省略できる便利な書き方があるのだが、意外と知らない人が多いようだ。この記事ではreturn省略を使用した便利な3つのTIPSについて説明している。
- [条件付き書式設定ルールで複数テキストはREGEXMATCHが便利](https://iwb.jp/google-spreadsheet-multiple-text-rules-by-regexmatch/) - Googleスプレッドシートでは条件付き書式設定ルールで条件を追加すれば、条件に一致した場合にセルの背景色の変更などができる。やり方はメニューの表示形式 => 条件付き書式で「条件を追加」を押して条件を入れるだけなので、普段からGoogleスプレッドシートを仕事などで使用している人であれば知らない人は少ないだろう。だが、条件付き書式設定ルールは1個ずつしか条件を追加することができない。
- [3分でわかるReactのContextによるグローバルStateの管理方法](https://iwb.jp/javascript-manage-global-state-by-context-in-react/) - Reactで親コンポーネント => 子コンポーネント => 孫コンポーネント の順でpropsを使用すると管理しづらくなるため、ContextによるグローバルStateを使うことがある。この記事ではContextによるグローバルStateの管理方法について簡単に解説しています。
- [Node.jsでimport { foo } はCommonJSモジュールでは使用不可](https://iwb.jp/nodejs-import-commonjs-syntax-error-cant-use/) - Node.jsを使用する際にrequireではなくimportが使用されることが多いが、import { foo }のようにimportするとCommonJSモジュールだと以下のようにSyntaxError: Named exportのエラーになる。(以下はiconv-liteの場合)
- [React 18ではReactDOM.renderではなくcreateRootを使う](https://iwb.jp/react-18-uses-createroot-instead-of-reactdom-render/) - 2022年3月29日にReact 18がリリースされたのだが、バージョン18になってもReactDOM.renderを使用しているコードを見かけることがある。React 18からはReactDOM.renderはサポートされておらずcreateRootを使うことが推奨されているため、現在はReactDOM.renderでもレンダリングされますが、ConsoleでWarningが表示されるので使用は避けたほうが良いです。
- [GASでJSON形式データをJavaScriptで読み込む方法](https://iwb.jp/javascript-json-format-data-by-google-apps-script/) - GASを使用すればGoogleスプレッドシートのシートのデータをJSON形式にできる。さらにJavaScriptを使用すればJSONを読み込んで表示できます。
- [cd, ls, find, grepコマンドではなくz, exa, fd, rgを使うべし](https://iwb.jp/cd-ls-find-grep-command-zoxide-exa-fd-rg/) - z, exa, fd, rgとはcd, ls, find, grepをより使いやすくしたオープンソースのコマンドラインツール。cd, ls, find, grepの上位互換のようなものなので、インストールすれば仕事の業務効率が向上する。
- [MacBookのWi-Fiで「安全性の低いセキュリティ・WPA」と表示されて接続できないときの対処法](https://iwb.jp/macbook-wifi-security-wpa-kaikatsu/) - MacBookのWi-Fiで「安全性の低いセキュリティ・WPA」と表示されて接続できないときの対処法
- [metaのrobotsにはnoindex, nofollowではなくnoneを書いたほうが良い](https://iwb.jp/meta-robots-noindex-nofollow-none/) - なぜmetaのrobotsにはnoindex, nofollowではなくnoneを書いたほうが良いかというと表記の統一と誤記防止の為である。noindex nofollowのように間違えてカンマを付けず半角スペースのみで区切ってしまった場合、noindex, nofollowが効かなくなる。
- [CodepipのFlexbox FroggyとGrid Garden以外の有料ゲームのすゝめ](https://iwb.jp/codepip-flexbox-froggy-grid-garden-pay-game/) - Flexbox FroggyとGrid GardenとはCSSのflexboxおよびグリッドレイアウトを学べるゲームサイト。クオリティが高く、無料でゲーム感覚でCSSのflexboxとgridを学べるので人気がある。どちらもCodepipというWeb開発ゲームのためのプラットフォームで、この2つ以外にも月額6ドル支払って有料会員になれば、さらに11のHTML, CSS, JavaScript関連のゲームをプレイできる。
- [CSSのtransform: rotateの1回転超えはdegではなくturnを使用したほうが良い](https://iwb.jp/css-transform-rotate-deg-turn-anination/) - transform: rotateとは要素を回転表示するためのCSSプロパティだが、rotateをdeg単位で指定すると数回転するCSSアニメーションを作成する際に数値が合っているのかわかりにくくなるのでturn単位を使用することをオススメします。
- [JavaScriptのflat()メソッドではフラットにならないことがある](https://iwb.jp/javascript-flat-method-not-array-flatten/) - flat()メソッドとはネストされた配列構造をフラット化するためのメソッド。ただし、引数なしでフラット化できるのは1つ深さだけなので2つ以上の場合は数値かInfinityを引数として指定する必要がある。
- [3秒でできるNintendo Switch Onlineの自動継続購入を停止(無料体験自動更新停止)](https://iwb.jp/nintendo-switch-online-my-membership-free-trial-stop/) - Nintendo Switch Onlineの自動継続購入を停止は公式サイトにも書かれているが、やり方が少しわかりづらいため、この記事では3秒で停止する方法を記載しています。
- [Google FontsのNoto Color Emojiで絵文字を同じ見た目にする方法](https://iwb.jp/google-fonts-noto-color-emoji-html-css/) - emojiとは絵文字のことでemojiはOSによって見た目が変わります。しかし、emojiはOSや使用デバイスが異なっていたとしても、きれいに同じ見た目で表示させたいことが多いです。そんなときはGoogle FontsのNoto Color Emojiを使用すれば簡単に同じ見た目で実装できます。
- [Google FontsのNoto Emojiで絵文字を単色で色付けする方法](https://iwb.jp/google-fonts-noto-emoji-coloring-html-css/) - 絵文字は文字ではないためCSSのcolorで色を変更することができません。しかし、絵文字を使ってcolorの色を変更したいことがあります。そんなときはGoogle FontsのNoto Emojiを使用すれば実装できます。
- [新鮮組まぐろ屋 池袋店で先着3名2000円の本気丼を食べた感想と注意点](https://iwb.jp/shinsengumi-maguroya-ikebukuro-honkidon-2000yen/) - 新鮮組まぐろ屋とは長崎県対馬産の最高級クロマグロを低価格で食べられるマグロ専門店。関西で大人気のマグロ専門店で東京でも2022年6月3日に1号店が新橋にオープンした。2022年8月26日には2号店が池袋にオープンした。
- [CSSの:is()は詳細度が変わるので:where()を使った方が良い](https://iwb.jp/css-specificity-calculate-is-where/) - CSSの:is()とはセレクターのリストを引数に取ってリスト中のセレクターのいずれか一つに当てはまる要素をすべて選択するCSSの擬似クラス関数です。文章だけだとわかりにくいのでコードで説明すると、例えば以下のようなHTMLがあって、.fooと.bar.bazを赤色にしたい場合以下のように書かれることが多いですが…
- [Googleで「timer 3 m」で検索すれば3分のタイマーを起動できる](https://iwb.jp/google-timer-second-minute-hour-day/) - Googleでは「timer 3 m」で検索すれば3分のタイマーを起動できます。ほかにも s (秒)、h (時間)、day (日) をタイマーとして設定できます。
- [YouTube PlayerでiframeやAPIで自動再生できない理由と解決法](https://iwb.jp/javascript-iframe-youtube-player-autoplay-howto/) - YouTube IFrame Player APIのリファレンスには「URL の autoplay パラメータが 1 に設定されているため、プレーヤーが読み込まれると、動画は自動的に再生されます。」とautoplay=1を指定することで自動再生されると書かれていますが、「これは嘘です」
- [意外と知られていないCSSの色々な回転アニメーションの作成方法](https://iwb.jp/css-animartion-rotation-pattern/) - CSSアニメーションで右回転させる方法、CSSアニメーションで左回転させる方法、CSSアニメーションで右・左回転を繰り返す方法、秒針のように1秒で6度回転する方法、秒針のように中央下を基点に回転する方法、X軸を軸とする角度で回転する方法、Y軸を軸とする角度で回転する方法、X軸を軸とする角度で左上基点で回転、Y軸を軸とする角度で左上基点で回転、Y軸を軸として裏も見えるよう回転、Y軸を軸として裏も見えるよう横移動しながら回転
- [QuaggaJSを使用したブラウザでの二次元バーコードスキャン](https://iwb.jp/javascript-quaggajs-browser-2d-barcode-scan/) - QuaggaJSとはJavaScriptで書かれたバーコードスキャナ。QuaggaJSを使用すればブラウザでカメラを起動して二次元バーコードを読み込む処理が簡単にできる。
- [CSS Grid Gardenのゲームのすべての問題の解説と解答](https://iwb.jp/explanations-and-answers-in-the-css-grid-garden-game/) - Grid GardenとはCSSのグリッドレイアウトをゲーム感覚で学習できる無料サイト。ゲームの問題を解くにはCSSのグリッドレイアウトの基礎知識が必要不可欠なので基礎を学んでからプレイした方が良いです。
- [VS Codeで「！」でハイライト表示になるのをやめる方法](https://iwb.jp/how-to-disabled-vscode-unicode-highlight-characters/) - VS Codeを使用していると「！」などの特定の文字がオレンジ色でハイライト表示されることがある。これは2021年11月にVS Codeのバージョン1.63で追加されたUnicode highlightという機能です。settings.jsonを修正することでハイライト表示を無効化できます。
- [CSS初心者がよくやってしまう7つの間違った書き方](https://iwb.jp/css-beginners-often-do-7-wrong-writing-styles/) - CSS初心者がよくやってしまう7つの間違った書き方「半角スペースを全角スペースにしてしまう」「セミコロン( ; )を付け忘れてしまう」「:first-childは最初の子要素だけ適用」「:first-of-typeは子要素がすべて同じタグだと…」「:emptyはテキストが空のときに適用ではない」「:nth-childの疑似クラスは組み合わせ可能」「コメントにや // を使用している」
- [コメントなどが書けるJSON5の読み込みなどの使用方法](https://iwb.jp/javascript-json5-read-fetch-write-comments/) - JSON5とはJSONのスーパーセットでECMAScript 5.1のプロダクションを含むように構文を拡張し、JSONの制限を緩和することを目的としています。JSON5ではJSONでは使用できなかったコメント、末尾カンマ、シングルクォーテーションなどが使用可能です。
- [1分でできるニコニコ動画の2段階認証のセキュリティ強化](https://iwb.jp/nicovideo-security-two-step-verification/) - 最近ニコニコ動画への不正ログインが多くなっている。2段階認証を設定しておけばリスト型攻撃による不正ログインは発生しないのだが、設定していないユーザーが多いようだ。
- [890円になったコロナminiサポほけんに値上がり前に加入するべし](https://iwb.jp/daiichilife-covid19-mini-sapo-hoken-890/) - コロナminiサポほけんは9月以降に新型コロナウイルスの感染者数の大幅な増加により3か月2,270円に値上がりしていたのだが、現在は日本国内の新型コロナウイルスの感染者数が激減しているため3か月890円に値下がりしている。今後は日本国内でオミクロン株が流行する可能性があるので今月中に保険料が上がるかもしれない。
- [1か月約330円で一時金10万円給付のコロナminiサポほけん](https://iwb.jp/daiichilife-covid19-mini-sapo-hoken/) - 10万円再給付はないが、新型コロナウイルスに感染した際に一時金10万円が給付される保険はある。保険料は1か月約330円（3か月980円）でインターネットから必要事項を入力してクレジットカードで支払うだけで簡単に申し込みできる。
- [ES2016以降のJavaScriptを勉強してないと理解できない記法一覧](https://iwb.jp/javascript-es2016-to-es2022-list/) - 最近のJavaScriptはES2016以降の仕様について勉強していないと理解できない記法がいくつかある。ES2015のletやconstやアロー関数程度であればよく見かけるので理解している人は多いが、ES2016以降のものだと認知度が極端に落ちる。この記事では意外と知らない人が多い、ES2016以降の記法についてまとめました。
- [1分でわかるViteを使用したVue.jsの開発環境構築と注意点](https://iwb.jp/vite-vuejs-development-environment/) - Viteとはwebpack使用せずVue.jsの開発環境を構築できるビルドツール。npm init vite-app my-viteのコマンドを実行すると数秒でインストールが完了する。ViteでインストールされるのはVue 2ではなくVue 3なので注意。
- [macOS Mojaveで古いChrome(Chromium)だとcheckboxが表示されない](https://iwb.jp/macos-mojave-chrome-chromium-checkbox-not-display/) - OSをmacOS Mojaveにアップグレードすると古いChrome(Chromium)でcheckboxが表示されないというバグがある。Chromeは自動アップデートのため、このバグに遭遇することはほどんどないだろう。しかしChromiumはnpm installでnode_modules内に古いChromiumがインストールされることがあるので、このバグに遭遇しやすい。(例: Puppeteer)
- [GASを使用するなら必ず覚えるべき7つのUtilitiesのメソッド](https://iwb.jp/gas-google-apps-script-7-utilities-method/) - UtilitiesとはGoogle Apps Scriptで使用可能な日付の書式設定やJSON操作などが行えるクラス。例えばUtilities.formatDate()を使用すれば日付のフォーマットを簡単に行える。
- [CSSだけでmarqueeのような無限スクロールを実装する方法](https://iwb.jp/css-howto-infinite-scrolling-animation-like-marquee/) - 現在はmarqueeタグを使用したような右から左に表示される無限スクロールのアニメーションをJavaScriptで実装しているWebサイトが多いが、HTMLとCSSだけでも記事に記載されているやり方で実装できる。
- [Googleカレンダーの予定をすべてGASで削除する方法](https://iwb.jp/google-calendar-delete-all-events-in-apps-script/) - 仕事でGoogleカレンダーを使っていると特定の期間の予定をすべて削除したいということがある。Googleカレンダーの予定を1つずつ選択して削除していては時間がかかってしまう。(GoogleカレンダーはGmailのように「すべて選択」がない) しかし、GASを使えばワンクリックで特定の期間の予定をすべて削除できるようになる。
- [JavaScriptのscrollIntoViewでスムーススクロールを簡単実装](https://iwb.jp/javascript-scrollintoview-behavior-smooth-howto/) - JavaScriptのscrollIntoViewとは呼び出された要素がユーザーに見えるところまでスクロールするメソッド。オプションで「behavior: 'smooth'」を指定すればスムーススクロールになる。
- [私もinput[type="number"]をやめてJavaScriptで処理した話](https://iwb.jp/stopped-using-input-type-number-and-used-javascript/) - input[type="number"]を使用すると全角数字が使えなくなるので私もJavaScriptで処理するようにした。
- [VS Codeのように使えてCodePenより便利なStackBlitzの使い方](https://iwb.jp/stackblitz-create-project-react-typescript-howto/) - StackBlitzとはクリックするだけでコーディングを開始できるオンライン統合開発環境。CodePenの場合、例えばReact + TypeScriptでコーディングしたい場合は色々と設定する必要があるが、StackBlitzだとCREATE A NEW PROJECTで「React」を選択するだけで自動的に開発環境が作成可能。
- [GoogleフォームをHTMLに埋め込むのは避けたほうが良い](https://iwb.jp/google-forms-should-not-be-embedded-in-html/) - GoogleフォームはiframeタグのコードをコピーしてHTML内に埋め込むこともできるが、Webサイトのサーバーに問題が発生すると表示されなくなるので、GoogleフォームのURLに直接アクセスさせたほうが良いです。
- [GoogleスプレッドシートやExcelのIFS関数は改行できる](https://iwb.jp/google-spreadsheet-excel-ifs-function-can-break-lines/) - タイトルにも書いた通りIFS関数は改行できるので以下のように改行して書いたほうが条件がわかりやすくなる。複数の条件を1行で書いている人は複数行で書くことをオススメします。
- [ES2022からAsync Functionで囲まなくてもawaitのsleepが可能に](https://iwb.jp/javascript-await-sleep-available-without-enclosing-in-async-function/) - JavaScriptでawaitを使用してsleepを実装する際はawaitがAsync Functionを囲まないと実行できなかったが、ES2022からはawaitがAsync Functionを囲まなくても実行可能になった。
- [JavaScriptのURLのパラメーターをsearchParamsで取得する方法](https://iwb.jp/javascript-url-parameters-get-with-searchparams/) - JavaScriptでURLのパラメータを取得するのにやたら長い関数を作成して取得する方法を掲載しているWebサイトが多いが、IE11のサポートが終了した現在ではsearchParamsを使えば3行程度書くだけで取得できるようになりました。
- [JavaScript初心者に多いURLオブジェクト変換忘れについて](https://iwb.jp/javascript-beginners-forgetting-to-convert-url-object/) - 突然ですが問題です。次のJavaScriptのコードはどのような結果になるでしょうか。const url = 'https://iwb.jp/#sample'; console.log(url.hash);
- [JavaScriptの正規表現のdフラグでマッチしたインデックスを取得](https://iwb.jp/javascript-regexp-match-indices-d-flag/) - JavaScriptの正規表現にdフラグを付けることでindicesが追加され、マッチした文字列のインデックス位置を取得できるようになる。取得したindicesを利用すれば文字列のマッチした特定の位置だけタグを囲むなどの処理が簡単にできるようになるので便利です。
- [zxでGitのコミット時に問題があればコミットしない方法](https://iwb.jp/zx-not-pre-commit-if-commit-time-error/) - zxとはJavaScriptでシェルスクリプトの処理が書けるようにしたもの。zxを使用してpre-commitファイル内に記述すれば特定の条件のときにコミットしないことができる。例えば「特定のファイル名が含まれる場合コミットしない」や「ファイルサイズが大きい場合はコミットしない」ということができる。
- [git initでUsing 'master'〜と表示される原因と対策について](https://iwb.jp/git-init-using-master-to-main-config-default-branch/) - 現在はターミナルでgit initを実行すると以下のような黄色のhintが表示されることがある。これはgit configでデフォルトのブランチ名が設定されていないと表示されます。2020年からGitHubではmasterは人種差別に反対する「Black Lives Matter」運動によりmainを使用することになりました。
- [ソースコードを画像化するVS Code拡張機能「Polacode」の使い方](https://iwb.jp/vscode-extension-polacode-convert-source-code-to-image/) - Polacodeとはソースコードの選択部分を画像化するVS Code拡張機能。この拡張機能をインストールすれば下図のようなソースコードの画像をVS Codeだけで作成できます。
- [1分でわかるJavaScriptのbig.jsによる小数点の誤差処理](https://iwb.jp/javascript-bigjs-decimal-point-error-handling/) - JavaScriptで例えば「0.1 + 0.2」のような小数の計算をすると0.3ではなく「0.30000000000000004」という想定外の結果を返す。このような結果にならないようにするにはbig.jsのような誤差処理を行うJavaScriptライブラリを使用すると簡単に対処できる。
- [意外と知られていないJavaScriptのObjectのin演算子の使い方](https://iwb.jp/javascript-operator-of-object-in-howto/) - Objectのin演算子とはJavaScriptのオブジェクトのプロパティの有無を確認できる演算子。オブジェクトのプロパティの有無は古い書き方だとObject.prototype.hasOwnProperty.callを使う方法があるが、in演算子なら以下のように短い記述でプロパティの有無を確認できる。
- [JavaScriptでの最大公約数の計算方法と約分計算機ツール](https://iwb.jp/javascript-reduction-of-fraction-tool/) - JavaScriptで最大公約数と分数の約分の計算が必要な処理があったのだが最大公約数の計算方法をど忘れしていたため、備忘録のため記事に記載した。ついでに約分計算機ツールも作成。
- [GitHubの使い方を無料で学べるGitHub Skillsの利用方法](https://iwb.jp/github-skills-free-how-to-use/) - GitHub Skillsとは対話的にGitHubの使い方を学べるWebサービス。初心者から上級者まで幅広い層が学習できるようになっている。
- [GitHubのリポジトリ名の先頭は気をつけないとハイフンになる](https://iwb.jp/github-repository-name-space-convert-to-hyphenated/) - GitHubでリポジトリを作成する際はリポジトリ名の先頭に半角スペースがあると自動的にハイフン( - )に変換されてしまうので注意が必要です。ちなみにターミナルから以下のようにGitで半角スペースを2つ入力して実行しても先頭にハイフンが付くことはありません。
- [JavaScriptのPalindrome(回文)問題の解き方と注意点](https://iwb.jp/javascript-palindrome-leetcode-howto/) - Palindromeとは「回文」という意味。上から読んでも下から読んでも同じになる文を回文と言います。例えば「しんぶんし」や「level」はどちらから読んでも同じなので回文です。回文の問題はFizz Buzzくらいよく見かける問題なので、もしエンジニア採用などでPalindromeを知らないと評価が下がるので注意が必要です。
- [1分でわかるwebpackでよく使われるglobuleの使い方](https://iwb.jp/npm-globule-webpack-howto/) - globuleとはワイルドカードglobを簡単に使えるnpmのライブラリ。globule.find('src/**/*.js')のように指定すればファイルパスの一覧が配列で取得できる。
- [JavaScriptの日付ライブラリdate-fnsの使い方と使う理由](https://iwb.jp/javascript-utility-library-date-fns/) - date-fnsとはブラウザとNode.jsでJavaScriptの日付を操作するためJavaScriptライブラリ。date-fnsを使用すれば「format(new Date(), 'yyyy年M月d日') => 2022年6月3日」のように短く書くことができる。
- [1分でわかるAngularJS開発ツールBatarangの使い方](https://iwb.jp/chrome-angularjs-batarang/) - BatarangとはChromeの拡張機能でデベロッパーツールにAngularJSタブを追加してスコープの中身、パフォーマンス、DIなどを確認することができる。
- [CSSのfont-sizeをレスポンシブ対応にするMin-Max Calculatorの使い方](https://iwb.jp/css-responsive-font-size-tool-min-max-calculator/) - Min-Max CalculatorとはCSSのfont-sizeをレスポンシブ対応にするツール。指定されたviewport範囲内の2つの値の間を補間するCSSのclamp()の式を計算してくれる。
- [LeetCodeのJavaScriptの問題のやり方と1問目の解答例](https://iwb.jp/leetcode-howto-javascript-questions-and-answer-first/) - LeetCodeとはコーディング問題を解く練習と技術面接の準備をするためのWebサイト。問題はJavaScriptで回答することもできる。どのように使うのかわかりにくいのでLeetCodeの1問目の解説と解答例を交えて説明しています。
- [Googleスプレッドシートにカレンダーの予定をGASで条件付きで取得する方法](https://iwb.jp/google-apps-script-calendar-schedule-exclude-getvalues/) - GoogleスプレッドシートにGoogleカレンダーの予定を表示させるにはGoogle Apps Script (以下GAS) を使用する。Googleスプレッドシートに自分のアカウントのGoogleカレンダーの予定を表示させたい場合は、以下のGASを保存すれば簡単に実装できる。
- [WordPress 6.0のブロックのロック制御とテキスト編集を禁止にする方法](https://iwb.jp/wordpress-version-6-block-lock-and-disallow-text-editing/) - WordPress 6.0にブロックの移動、ブロックの削除、またはその両方を防止できる「ブロックのロック制御」の機能が追加された。ロックしていれば間違えて移動してしまったり、削除してしまうことがなくなるので、なるべくWordPress 6.0を使用するようにしたほうが良いだろう。
- [Twitterには140文字を超えてなくてもエラーになるバグがある](https://iwb.jp/twitter-bug-errors-if-you-dont-exceed-140-characters/) - Twitterの投稿文は全角140文字(半角280文字)までの文字数の上限があることはよく知られている。しかし、全角140文字を超えていなくてもツイート時に「ツイートが文字制限を超えています。」というエラーが出て投稿できないことがある。
- [JavaScriptのconsole.logは括弧(引数)なしで省略して使用可能](https://iwb.jp/javascript-console-log-can-omitted-parentheses-arguments/) - JavaScriptを使用している人ならconsole.logを使わない人はいないだろう。console.logはconsole.log(foo)のように括弧(引数)付きで使用しているケースが多いが、.then(console.log)のように省略して使用することもできる。
- [SPDYをインストールするとGoogleアナリティクスの表示が速くなる](https://iwb.jp/google-analytics-spdy/) - FirefoxまたはChromeにSPDYをインストール SPDYとはGoogleが策定を進めている通信プロト
- [数分で利用規約などの法律文書を自動生成できるKIYACの使い方](https://iwb.jp/kiyac-automatically-generate-legal-documents-in-minutes/) - KIYACとは弁護士が監修する法律文書ジェネレータ。いくつかの質問に答えるだけでプライバシーポリシーや利用規約など、ウェブサイト運営に必要な以下の28種類の法律文書を生成することができる。
- [JavaScriptのべき乗(**の累乗)はマイナス数値を直接使うとエラーになる](https://iwb.jp/javascript-pow-negative-number-is-error/) - JavaScriptで数値のべき乗(累乗)を使用する場合、最近は2 ** 3のように書かれる場合が多いが、-2 ** 3のようにマイナスの数値の場合エラーになるので注意が必要です。
- [JavaScriptの掛け算は数値とnull,false,空文字を掛けると0になる](https://iwb.jp/javascript-number-multiply-null-false-empty-is-zero/) - 見出しの通りJavaScriptの掛け算は数値とnull,false,空文字を掛けると0になります。実際に実行した結果は以下の通り。
- [JavaScriptのスムーススクロールはHTMLに2行追加だけで実装可能](https://iwb.jp/javascript-smooth-scrolling-can-adding-two-lines-html/) - 「JavaScript スムーススクロール」で検索すると長々とスムーススクロールについて説明しているWebサイトが多いが、スムーススクロール実装は2行追加するだけで可能です。
- [Consoleの値を常時監視できるLive Expression機能が超便利](https://iwb.jp/chrome-realtime-console-live-expression/) - Live Expression機能とはChromeのConsoleで値をリアルタイムで監視できる機能。例えばConsoleでnew Date()を実行した場合は実行したときの日時が取得されるだけだが、Live Expressionだとリアルタイムで監視して値が変わる。
- [HyperFormならバックエンド開発なしで1分でフォームを作成可能](https://iwb.jp/hyperform-create-html-forms-1min-without-backend-development/) - HyperFormとはカスタムURLをセットするだけでフォームが作れる「ヘッドレスフォーム」サービス。簡単な手順でセットアップができるため、バックエンド開発なしで最短1分でフォームを作成可能。HyperFormは1つのカスタムURLだけであれば無料で使用可能です。自動返信メールやSlackおよびGoogleスプレッドシートの外部連携機能なども無料で使えます。さらに不正問い合わせ防止システムreCAPTCHAを標準搭載しているので悪質なbotによる自動投稿(スパム)を防いでくれます。
- [Webサイトのheadタグ内に入れてはいけないHTMLタグと確認方法](https://iwb.jp/website-forbidden-html-head-tag-howto-check/) - Google Search CentralのUse valid page metadataというページにhead内で有効なHTMLタグについて記述されている。有効なメタデータにはtitle, meta, link, script, style, base, noscript, template の8つのHTMLタグが該当します。
- [npm runコマンドはVS Codeならワンクリックで実行できる](https://iwb.jp/npm-run-command-scripts-one-click-vscode/) - npm runコマンドを実行する際にターミナルから実行している人をよく見かける。「npm runコマンドをターミナルから実行するのは当たり前だろ？」と思う方もいるかもしれないが、VS CodeならEXPLORER内にある「NPM SCRIPTS」から実行したいコマンドを▶をクリックして実行できる。
- [GoogleアナリティクスのGA4はセッション数が減るので注意](https://iwb.jp/google-analytics-ga4-ua-session-settings/) - GoogleアナリティクスのGA4はUA(ユニバーサルアナリティクス)よりがセッション数が少なくなる。これは計測ミスではなく計測方法の違いによる結果だ。これはGA4とUAでは新しいセッションが開始される条件が異なることが原因だ。
- [小ネタ: ブラウザのConsoleはidを直接入力して要素を取得できる](https://iwb.jp/chrome-console-id-element-search/) - ブラウザのConsoleはidを直接入力して要素を取得できるようになっている。例えばYahoo! Japanのトップページを開いている状態でConsoleに「TopLink」と入力して実行すればid="TopLink"の要素が取得できる。つまり、$('#TopLink') を実行するのと同じ結果になる。
- [池袋のサウナでちょっと高い部屋に泊まったら、大成功。(かるまる)](https://iwb.jp/karumaru-ikebukuro-sauna-hotel-luxury/) - 池袋西口にある関東最大級のサウナ施設。4種のサウナと水風呂、5種のお風呂、さらに宿泊施設がある複合型男性専用施設。宿泊施設はカプセルホテルと通常の部屋タイプのホテルが選択できる。宿泊施設は最大5時間のデイユースも可能。今回はホテルタイプのラグジュアリーシングルに宿泊した。
- [1分でできるjsQRによるブラウザのQRコード読み込みアクセス](https://iwb.jp/javascript-jsqr-code-browser-url-access/) - jsQRとはブラウザからカメラを起動してQRコードを読み込めるようにするJavaScriptライブラリ。 スマートフォンの場合、最新のOSであればカメラにQRコード読み取り機能があるが、古いOSだとアプリを別途インストールする必要がある。しかし、QRコード読み取りアプリをインストールさせずにブラウザからカメラを起動してQRコードを読み取らせて画面遷移させたい場合もあるので、この記事ではその方法について書きました。
- [textlintやsharp使用時はonchangeでファイル監視すると便利](https://iwb.jp/nodejs-npm-onchange-textlint-sharp/) - onchangeはglobパターンを使ってファイルを監視し、追加、変更、削除されたときにコマンドを実行します。textlintやsharpはwatchオプションがないため、ファイルを監視して変更されるたびに実行することはできないが、onchangeを使えばファイル監視が簡単にできるようになる。
- [VSCode+Vue.jsを使用するならインストールするべき拡張機能と設定](https://iwb.jp/vscode-vuejs-extensions-install-settings/) - VS Code正式名称はVisual Studio Code。Vue.jsとの相性が良いためVue.jsの開発者のEvan Youなどが使用している。Vue.jsを使用する上で必要な拡張機能は最初からインストールされている訳ではないため、インストールしたほうが良い拡張機能と設定(settings.json)をまとめた。
- [sharpでNode.jsによる画像変換処理を使用する方法](https://iwb.jp/sharp-nodejs-image-conversion-processing/) - sharpとは Node.jsで使用する画像変換処理ができるライブラリ。 ImageMagickのようなものと
- [投稿を編集の画面でURLが日本語なら公開ボタンを無効にする方法(WordPress)](https://iwb.jp/wordpress-url-slug-check-edit-post-button-disabled/) - WordPressで日本語のWebサイトであってもURLスラッグは英語にしたい場合が多いので、この部分は英語のURLに書き換えることが多いが、うっかり英語のURLに書き換えるのを忘れてそのまま投稿してしまっているケースも多い。 この問題はWordPressの投稿を編集の画面のURLスラッグで日本語が含まれる場合にはJavaScriptで公開ボタンを無効に(disabled)にすれば防止することができます。
- [オプトアウトの拡張機能が有効だと他でエラーが出るので注意](https://iwb.jp/chrome-extension-google-analytics-optout-addon-tag-assistant-legacy-error/) - Google Analytics オプトアウト アドオン (by Google)というChrome拡張機能を使用すればアクセスした際の測定を確実に回避できるため、Googleアナリティクスで自分のアクセスを測定したくない人にとっては便利な拡張機能だが、別のGoogleアナリティクスの拡張機能の動作を妨害することもあるので注意が必要です。
- [SNSに旅行中と書かなくても、この4点を見られるとバレる](https://iwb.jp/sns-social-media-twitter-traveling-they-will-know/) - 毎年言われている気がするが、SNSで「旅行中」と書くと留守なのがバレてしまうため、空き巣被害にあう可能性が高くなる。そのためSNSで「旅行中」と書かないほうが良いのだが、これ以外にもSNSに書くと留守なのが簡単にバレてしまうこと行動がいくつかあるので注意が必要です。
- [body-scroll-lock.jsで特定の要素以外のスクロールをロックする方法](https://iwb.jp/javascript-body-scroll-lock-js-overflow-hidden/) - body-scroll-lock.jsを使うと特定の要素以外のスクロールをロックできる。例えばモーダルを表示する際はモーダル内のスクロールする部分の要素以外はスクロールしないようにロックする必要がある。body-scroll-lock.jsを使用すればスクロールをロックするための処理を簡単に実装できる。
- [Node.jsでPuppeteerを使いChromeを実行して画面キャプチャを複数撮る方法](https://iwb.jp/nodejs-puppeteer-chrome-auto-screenshot-capture-multiple/) - ChromeでWebサイトの画面キャプチャを保存するにはデベロッパーツールからCapture screenshotを選択すれば簡単に保存できる。しかし、この方法だと複数ページの画面キャプチャを保存したい場合やPCとSPの両方のWebページの表示を保存したいときは時間がかかってしまう。Node.jsでPuppeteerを使いChromeを実行して複数の画面キャプチャを保存するようにすれば簡単に処理できる。
- [node, npm, yarnのバージョン管理ツールVoltaの使い方 ⚡️](https://iwb.jp/volta-node-npm-yarn-version-control-tool-howto/) - Voltaとはnode, npm, yarnなどのバージョン管理ツール。Node.jsバージョン管理ツールはVoltaも入れて8種類くらい存在するが、Voltaはこの中で処理速度が速く、パッケージマネージャ、Nodeランタイム、OSに関係なく、volta installコマンドでインストールできて信頼性も高いので最近はよく利用されている。
- [Tailwind CSSはParcelの組み合わせると作業しやすい](https://iwb.jp/tailwind-css-parcel-recommend/) - Tailwind CSSのインストール手順 Tailwind CSSをTailwind CLIで導入するには以
- [TypeScriptのno initializer and is not definitelyエラーの対処法](https://iwb.jp/typescript-properties-no-initializer-and-is-not-definitely-error/) - TypeScriptを使用し始めるとProperty 'id' has no initializer and is not definitely assigned in the constructor.のようなプロパティ初期化エラーに直面することがよくある。この記事ではプロパティ初期化エラーの解決方法について解説しています。
- [CSSの::selectionは絶対に使用しないほうが良い理由](https://iwb.jp/css-selections-never-use-3-reasons/) - CSSの擬似要素の::selectionは選択時の色をWebサイトのイメージに変えられてオシャレな感じがしますが、ユーザビリティを低下させるため、現在は使用しないほうが良い手法の1つとして挙げられています。この記事では使用しないほうが良い理由について書いてあります。
- [WebサイトのGoogleアナリティクスのUAとGA4の確認方法](https://iwb.jp/website-google-analytics-ga4-ua-howto-check/) - 2023年7月1日にGoogleアナリティクスのUAがサポート終了するため多くの企業でUAからGA4への移行作業を行っている。この記事ではWebサイトがUAおよびGA4で計測されているか確認する方法について解説します。
- [input type="file"のボタンデザインとJavaScriptの処理方法](https://iwb.jp/javascript-input-type-file-button-design-name/) - HTMLではinput type="file"を記述すれば1つまたは複数のファイルを端末のストレージから選択することができるようになります。しかし、このまま使用するのは見た目が悪いため、ほとんどのWebサイトではCSSで装飾してJavaScriptでファイル名を処理している。この記事ではinput type="file"のCSSの装飾およびJavaScriptの処理について解説している。
- [リセットCSSにはCDNもあるDestyle.cssがオススメ](https://iwb.jp/destyle-css-cdn-reset-css/) - Destyle.cssとはHTMLのスタイルをリセットするためのリセット用スタイルシート。似たようなCSSはたくさんあるが、すべての要素のスタイルをリセットしていなかったり、いまでは当たり前になっているbox-sizing: border-box;が全要素に適用されていないことがある。Destyle.cssはすべての要素のスタイルをきちんとリセットしており、しかもファイルサイズが1KBと軽いため最近はDestyle.cssの人気が高い。
- [scroll-behavior: smooth;は検索もスムーススクロールになる](https://iwb.jp/css-scroll-behavior-smooth-in-search/) - scroll-behavior: smooth;とはCSSのプロパティでスクロールが発生した際のスクロールの振る舞いを設定します。これだけだとアンカーリンクで使うと#topなどがURLに付くので避ける人もいますが、JavaScriptと併用すればアンカーリンクがURLに反映されることはなくなります。
- [Parcelのv1は現在は古いのでv2を使用したほうが良い](https://iwb.jp/parcel-js-v1-v2-howto/) - ParcelとはWebアプリケーションバンドラでマルチコア処理を利用した高速パフォーマンスで開発環境を作成することができる。現在はv2がリリースされているがv1との互換性はないため、いまから使用する場合は最新のv2を使用したほうが良いだろう。
- [Webサイトを作成したらタブキーで移動できるかチェックしよう](https://iwb.jp/website-check-html-navigate-tab-key/) - Webサイトはマウスだけしか操作ができないとユーザビリティが低下するのでキーボードだけでも操作できるようにしたほうが理想的だ。しかし残念ながら日本のWebサイトでキーボードのタブキー(Tab)でフォーカスが正しく移動できないWebサイトが多いので原因と対処法について解説しています。
- [「時短できるGoogleスプレッドシートの知識」5選](https://iwb.jp/five-time-saving-google-spreadsheet-knowledge/) - 1. sheet.newで新規作成、2. アドオンを追加する、3. マクロを記録する、4. Apps Script、5. AppSheet
- [GoogleドキュメントでMarkdown記法を使用する方法と注意点](https://iwb.jp/markdown-notation-in-google-docs/) - Googleドキュメントのアップデートにより、Markdown記法を使用できる機能が追加された。デフォルトではオフになっているため、使用するには以下の手順で機能を有効にする必要がある。この記事ではGoogleドキュメントで使用可能なMarkdown記法について解説しています。
- [意外と知られていないNode.jsのpathモジュールの使い方](https://iwb.jp/nodejs-path-module-howto/) - Node.jsのpathモジュールとはファイル名、ディレクトリ名、拡張子などのパス操作ができるモジュール。例えばtest.mjsというファイル内に「const testPath ='./foo/bar/baz.txt';」というパスがあって、これのファイル名だけ取得したい場合はJavaScriptだけだと「testPath.split('/').pop()」となるがpathモジュールを使用すればpath.basename(testPath)で取得できる。
- [Googleドキュメントの自動置換機能はオフにしたほうが良い](https://iwb.jp/google-docs-auto-replace-feature-turned-off/) - Googleドキュメントのテキストの自動置換機能がデフォルトで有効になっている。人によっては便利な機能だが、文章作成時のテキストのルールは企業や個人により異なっているため、勝手に置換されると不都合に感じる人のほうが多いだろう。
- [淡路駅前の人気ラーメン｢世界が麺で満ちる時｣の行き方と注意点](https://iwb.jp/ramen-awajieki-sekaigamendemichirutoki/) - 世界が麺で満ちる時とは大阪の阪急淡路駅西口より徒歩2分の場所にある人気ラーメン屋。オレンジと淡口醤油を融合させたあっさり醤油ラーメンが人気で大阪以外だと奈良県奈良市と群馬県太田市にある。(東京には出店していない)
- [CSSで最後の要素のmarginに0を指定する際の悪い例・良い例](https://iwb.jp/css-not-last-child-element-margin-0/) - CSSで最後の要素だけmarginを0にして打ち消しているコードがよくあるが、最後の要素以外にmarginを付けたい場合は:not(:last-child)で指定すれば短く書ける。
- [やる夫がデザイナーの作ったPSDにお怒りのようですのまとめ](https://iwb.jp/yaruo-angry-psd-matome/) - 元記事削除後もキャッシュのほうはしばらく見ることができていたがキャッシュの方も削除されてしまったようだ。PhotoshopでWebデザイン作成の際の注意点をわかりやすくまとめられていて非常に有用な内容だったので忘れないうちに復習も兼ねて要点まとめた。(一部改変・割愛・追記あり)
- [VS Codeのバージョン 1.66からLocal historyが標準搭載](https://iwb.jp/vscode-version-1-66-local-history-standard-feature/) - 2022年3月31日にリリースされたVS Codeのバージョン 1.66から作業履歴を保存するLocal historyが標準搭載された。VS CodeにはLocal Historyという同名の拡張機能が以前からあるが、差分ファイルを保存するための「.history」フォルダが自動で作成されてしまうデメリットがあるが、標準搭載のほうは余計なフォルダが作成されない。
- [Twitterツイートボタン吹き出しカウンターリンク作成方法](https://iwb.jp/twitter-tweet-button-balloon-counter-link/) - Twitterツイートボタン吹き出しカウンター部分は記事に対するTwitter上のコメント閲覧用のリンク目的で表示している場合もあるため完全になくなるとユーザーが不便になるため吹き出し部分を記事のリンク付きで表示するコードを作成してみた。
- [GoogleアナリティクスGA4移行でよくありそうな3つの失敗](https://iwb.jp/google-analytics-ga4-migration-mistakes/) - 2023年7月1日をもってデータ処理が停止するため、将来的にはGA4 (Googleアナリティクス4)を使用しなければウェブ解析ができなくなる。移行作業中に間違った設定などをして移行に失敗する企業が多く発生することが予想されるので、GA4移行の際に「よくありそうな3つの失敗」について書きました。
- [CSSのcalcでよくある間違った5つの使い方](https://iwb.jp/common-misuses-of-css-calc/) - CSSで幅(width)などを計算できるcalcは便利だが使用方法にクセがあって間違った使い方をしているケースも多い。この記事ではcalcでよくある間違った5つの使い方について解説しています。
- [CSSの親要素内の子要素をcalcで横幅100%に広げる方法](https://iwb.jp/css-calc-child-element-over-100-percent-width/) - 突然ですが問題です。もし以下のようなHTMLで「見出し2」と書かれている.section部分を下図のように親要素の.contentをはみ出して横幅100%で表示するにはどうすれば良いでしょうか。(問題と解答はサンプルを参照)
- [Web Animations APIでCSSなしでアニメーションを実装する方法](https://iwb.jp/javascript-web-animations-api-without-css/) - 特定の要素に単純なアニメーションを追加する場合、CSSが使用されることが多いが、Web Animations APIを使用すればJavaScriptだけで特定の要素にアニメーションを追加することができる。
- [旧GoogleアナリティクスからGA4移行後に最初にやること](https://iwb.jp/google-universal-analytics-ga4-first-setting/) - 2023年7月1日にGoogleアナリティクスのユニバーサル アナリティクスのサポート終了が話題になっていた。旧Googleアナリティクス(GA3)からGA4への移行する際に最初にGA4のユーザーデータとイベントデータの保持期間を「2か月」から「14か月」に変更しないと取り返しのつかないことになるため注意が必要です。
- [絶対にインストールするべきFigmaプラグイン13選](https://iwb.jp/figma-plugins-definitely-install/) - Figmaの機能はプラグインで拡張可能なのだが、まだ新しいソフトウェアのためか、PhotoshopやAdobe XDのようにそのまま使用しているケースが多い。この記事では絶対にインストールするべきFigmaプラグインを9個紹介している。
- [2022年 Figmaプラグイン インストール数 ベスト20](https://iwb.jp/figma-plugin-2022-install-best-20/) - Figmaはプラグインをインストールすると業務を効率化できるが、かなりたくさんのプラグインがあるので何をインストールするか迷ってしまうだろう。この記事では2022年3月現在、Figmaのインストール数 ベスト20のプラグインについて説明しています。
- [1分でわかるBootstrapとBootstrapVueをVue.jsで使用する方法](https://iwb.jp/javascript-bootstrapvue-vuejs-howto/) - Vue.jsでBootstrapとBootstrapVueを使用するにはvue create my-bootstrapで環境構築後、npm i bootstrap-vueでBootstrapVueをインストールする。あとはmain.jsにCSSを読み込むための記述を2行追加するだけでBootstrapが使用できるようになる。
- [Firefox Relay(無料捨てメアド) Chrome拡張機能の使い方](https://iwb.jp/firefox-relay-discarded-email-chrome-extension/) - Firefox RelayとはMozillaの「捨てメールアドレス」を無料で生成できるサービス。捨てメアドサービスはメールアドレスの転送機能がないものが多いが、Firefox Relayは転送までしてくれるので、いつも使用している自分のGmailから確認できて便利です。
- [さくらインターネットでアクセス集中時はリソースブーストが有効](https://iwb.jp/sakura-internet-resource-boost/) - リソースブーストとは突発的なアクセスの集中などに対し、これまでの数倍のアクセス処理能力を実現する機能。さくらインターネットコントロールパネルから設定できる機能なのだが去年提供されたばかりの機能なので認知度が低い。
- [JavaScriptのHTMLエスケープは最短1行(IE11は11行)で可能](https://iwb.jp/javascript-html-escape-one-line-code/) - JavaScriptのHTMLエスケープは最短1行(IE11は11行)で可能。記載したコードはtypeofで型がstringか確認しているがネット上には型チェックをしていない文字型以外が入るとエラーになるコードがたくさんあるので注意が必要。
- [GASの予定の色変更は色番号ではなくカラー名を使用したほうが良い](https://iwb.jp/google-apps-script-calendar-color-names-rather-than-color-numbers/) - Google Apps Scriptで予定の色を変更する際はsetColorを使用するのだが色番号で指定しているコードが多い。色番号で指定すると何の色が指定されているかわかりにくいため、なるべくカラー名(Enum Color)で指定したほうが良い。
- [JavaScriptライブラリ「Tween24.js」がバージョン1.0になってさらに使いやすくなった](https://iwb.jp/javascript-animation-library-tween24js-version-1/) - JavaScriptでアニメーションを簡単に作成できるライブラリ。メソッドチェーンで記述するのが特徴で、簡単なアニメーションなら1行で実装可能。2022年3月にバージョン1.0がリリースされてから便利な新機能が追加されたのでさらに使いやすくなった。
- [GASのGoogleカレンダーに終日や日時入りの予定の追加方法](https://iwb.jp/google-apps-script-add-all-day-or-date-calendar/) - Google Apps Script (GAS)を使用すれば、Googleカレンダーに終日や日時入りの予定を追加することができる。この記事では終日や日時入りの予定の追加方法や自動で予定を入れる方法について説明します。
- [ブラウザでPDFを開いたときにファイル名が表示される問題の対処方法](https://iwb.jp/open-pdf-in-browser-display-file-name/) - ブラウザでPDFを開くとファイル名が表示される経験をした人は多いだろう。例えば下記のURLようなguideline.pdfというファイル名のPDFをブラウザで開くとブラウザのタブにはguideline.pdfが表示される(Chromeの場合)。タブに表示されるタイトルは任意のテキストに変更することができる。
- [数秒で十数行のCSSだけで作るローディングアイコン](https://iwb.jp/css-only-simple-loading-icon/) - ローディングアイコンを画像で作成しているWebサイトが多いが、画像だと色や大きさを自由に変更できないというデメリットがあるので、できるだけ画像ではなくCSSで作成したほうが良いだろう。
- [Google Apps ScriptでGmailをLINEに通知する方法](https://iwb.jp/google-apps-script-gmail-line-notify-script/) - Gmailを使用していると特定のメールのみLINEに通知したいことがある。例えば会社のメールだけ条件を付けてLINEに通知するなどだ。この記事ではGoogle Apps Scriptで簡単にGmailをLINEに通知する方法について説明します。コードがわからない方でもほとんどコピペだけでできるようにしてあります。
- [VPNなら無料WiFiでもギャンブルやアダルトサイトが表示可能](https://iwb.jp/nord-vpn-can-show-sites-on-free-wifi/) - 公共の場所や飲食店などで利用可能な無料WiFiだとJRAなどのギャンブルサイトやFANZAなどのアダルトサイトにアクセスできないことがあるが、NordVPNを使用すれば無料WiFiでもこれらのWebサイトを表示させることができる。
- [getElementsByTagNameでhtml,head,bodyを取得しないほうが良い](https://iwb.jp/javascript-get-elements-by-tag-name-html-head-body/) - JavaScriptのgetElementsByTagNameは指定されたタグ名を持つ要素のHTMLCollectionを返すメソッドだが、これを使用しなくてもdocument.documentElement、document.head、document.bodyを使用すればそれぞれの要素を取得できる。
- [カラーコードのgreenは#00ff00ではなく#008000の緑色](https://iwb.jp/color-code-name-green-008000-lime-00ff00/) - カラーコードのカラー名で特に多いのがgreenを#00ff00の指定してしまう間違い。redは#ff0000、blueは#0000ffなのでgreenは#00ff00だと勘違いしている人が多いようだ。#00ff00はタイトルにも書かれている通りlimeが正しい。
- [GIFを最速でアニメーションさせるには20msを指定する](https://iwb.jp/gif-image-fastest-animation-specify-20ms/) - GIGAZINEの記事によると遅延が10ms以下のGIF画像は遅延が100msに上書きされるため20msより遅くなると書かれていたので実際にImageMagickを使用して試してみた。
- [1分でできるPushbullet CLIでターミナルから送信する方法](https://iwb.jp/pushbullet-cli-terminal-pb-push/) - Pushbulletはあらゆるデバイスからテキストやファイルなどを簡単に送信できるポップアップ通知サービス。使い方はスマートフォンならアプリをインストール、パソコンなら以下のURLにアクセスするか、ブラウザの拡張機能を使用する。
- [JavaScriptのGoogle Calendar APIで祝日を判定する方法](https://iwb.jp/javascript-google-calendar-api-credentials-holiday/) - JavaScriptでGoogle Calendar APIから祝日の一覧を取得すれば特定の日付が祝日かどうかを判定することができる。
- [inputタグをtype="number"にしないで数字キーボードにする方法](https://iwb.jp/input-type-number-keyboard-inputmode-numeric/) - inputタグのtypeを変えれば前述の通り入力キーボードを変えることができるが、typeを変えるとCSSやJavaScriptでその要素に何かしらの指定がされている場合は用意に変更できないケースがある。そんなときはinputmode属性を使用すれば入力キーボードを変更できる。
- [1分でわかるSquoosh CLIによるWebPとAVIF画像生成](https://iwb.jp/squoosh-cli-webp-avif-image-files-export/) - Squoosh CLIはSquooshをコマンドライン上(黒い画面)で実行するツール。これを使用すればコマンドを実行するだけでJPGやPNGなどをWebPやAVIFなどのファイル形式に簡単に変換できる。
- [IE11からMicrosoft Edgeを使用するよう促してはいけない](https://iwb.jp/ie11-to-edge-javascript-if-microsoft-vista-xp/) - 2022年6月16日(日本時間)にIE11のサポートが終了するため、IE11でアクセスするとEdgeに自動リダイレクトされたり、「IE11はサポート終了するため、Microsoft Edgeをインストールしてください」というメッセージが表示されるWebサイトが多くなってきているが、「Microsoft Edgeをインストールしてください」というメッセージを単純に出すのはEdgeをインストールできないケースがあるのでやめたほうが良い。
- [Photoshop v23.2でWebP形式に対応したので書き出しも試してみたが…](https://iwb.jp/photoshop-version-23-2-supports-webp-format-exporting/) - 2022年2月15日のPhotoshop v23.2からWebP形式対応となり、WebPファイルをPhotoshopで開けるようになった。
- [macOS Monterey Chromeから「フルスクリーンにする」がfn + Fに変更](https://iwb.jp/chrome97-update-fullscreen-shortcut-key-fn-f/) - 2022年1月5日のアップデートでChrome 97からフルスクリーン表示が fn + F に変更になりました。ちなみにほかの主要なキーボートショートカットだと拡大・拡小が command + - および command + = に変更されているので注意が必要。
- [GOOGLE PLAY JAPANから身に覚えのない請求が来たらやること](https://iwb.jp/google-play-japan-credit-card-charge/) - クレジットカードの利用明細を見るとGOOGLE PLAY JAPANから10,620円の身に覚えがない金額のせい請求が来ていた。調べた結果Google お支払いセンターのご利用内容にクレジットカードに記載されていた金額の内容が記載されていることがわかった。
- [scroll-behavior: smooth;のスムーススクロールは便利だが使わないほうが良い](https://iwb.jp/css-easy-smooth-scroll-behavior/) - 最近scroll-behavior: smooth;に関する記事を見かけることがありますが、デメリットもあるため安易に使用しないよう注意が必要です。
- [スピードテストにfast.comを使っても正しい回線速度はわからない](https://iwb.jp/speedtest-fast-com-correct-line-speed/) - fast.comとはインターネット回線速度テストサイト。ウェブページを開くと、すぐにテストが開始されて文字色がグレーから黒に変わるとテスト完了となるのだが正しい回線速度がわからないのであまり意味がない。Netflixは映像ストリーミング配信事業会社であり、測定時の回線速度が遅いと加入者数に悪影響が出るため速く測定されるようになっていると思われる。
- [fast.comは100MB以上のデータ通信量がかかるので注意](https://iwb.jp/speedtest-fast-com-lagest-packet-transfer-charge/) - fast.comの回線速度を測定は大きなデータをダウンロード・アップロードする仕組みため、送受信して測定すると100MB以上のデータ通信量がかかることが多い。
- [今さら聞けないNoto Sans JPなどのGoogle Fontsの使い方](https://iwb.jp/noto-sans-serif-jp-google-fonts-css/) - Google Fontsは各種フォントのページ右上の「Download family」のボタンを押してzipファイルをダウンロードしてフォントファイルをインストールする。WebサイトでWebフォントを使用する際は「＋ Select this style」を押してWebサイトで使用するフォントを選択して表示されるコードをコピーして利用する。
- [Simple.cssを追加するだけでシンプルなHTMLをモダンにできる](https://iwb.jp/simple-css-modern-html-site/) - Simple.cssとは読み込むだけでHTMLをモダンなデザインにできる4KBのCSSフレームワーク。CDNを利用して1行読み込むだけなので簡単に導入できる。
- [スクロール領域にはoverscroll-behavior-yとscrollbar-gutterが必要](https://iwb.jp/css-overscroll-behavior-y-contain-scrollbar-gutter-stable/) - スクロール領域にoverscroll-behavior-y: contain;を指定するとスクロール領域を最後までスクロールしてさらに下にスクロールしてページ下に予期せずスクロールしてしまうのを防ぐことができる。scrollbar-gutter: stable;を指定するとWindowsでテキスト量の増減によるテキスト幅の変化(Layout Shift)を防ぐことができる。
- [JavaScriptのlocalStorageで簡易メモ用ブックマークレットを作成](https://iwb.jp/javascript-localstorage-bookmarklet-simple-notes/) - localStorageはブラウザ内にデータを長期間保存できるためJavaScriptブックマークレットを利用すれば簡易メモも作成できる。
- [CodeCaptcha.ioでコーディング問題の正解者だけサイトに遷移](https://iwb.jp/codecaptcha-io-redirects-only-answer-coding-questions/) - CodeCaptcha.ioはプログラマだけにリンクを共有したい場合にランダムなコーディング問題を表示して正解した人だけ登録したリンク先に遷移させることができるサービス。CodeCaptcha.ioのCreate New Linkに遷移させたいリンクのURLを登録すればコーディング問題のページのリンクを生成できる。
- [VSCodeでShift_JISが自動判定でISO 8859-2になる場合の対処法](https://iwb.jp/vscode-shift-jis-auto-guess-encoding-iso-8859-2/) - VS Codeは設定(Settings)でAuto Guess Encodingにチェックを入れて有効にするとファイルの文字コードを自動判定できるようになる。便利な機能だがShift_JISファイルだと自動判定でISO 8859-2だと誤判定されてしまうことがある。
- [WordPressのAIOSEOでRest APIエラーが表示された際の対処法](https://iwb.jp/wordpress-aioseo-rest-api-error-wp-json/) - WordPressで記事を書こうと思って投稿画面(post.php)に遷移したらページ下部のAIOSEO設定に「AIOSEO Pro relies on the WordPress Rest API and your site might have it disabled. Click here to learn more.」というエラーが赤く表示されていた。
- [JavaScriptでクッキーを使用するならjs-cookieライブラリが便利](https://iwb.jp/javascript-js-cookie-library/) - JavaScriptでcookieを扱いたい場合はdocument.cookieを使用すると使い方にクセがあるため扱うのに手間がかかるが、js-cookieライブラリを使用すれば簡単にcookieを扱うことができる。
- [jQueryで要素の有無を調べる際は$('.foo').lengthでなければダメ](https://iwb.jp/javascript-jquery-element-exist-length/) - JavaScriptを書いているときにWebページ内に特定の要素があるか調べたいことがある。jQueryを使用しない場合はdocument.querySelector(要素)で調べることができるが、jQueryを使用して$(要素)で要素の有無を調べることはできない。
- [Confluence（コンフルエンス）で正規表現を使用した置換方法](https://iwb.jp/confluence-wiki-replace-regex/) - Confluence（コンフルエンス）を使用していると特定のテキストをすべて置換したいことがあるが、ブラウザのConsoleを利用すれば正規表現での置換も可能になる。
- [VSCodeにPlantUML拡張機能をインストールして図を作成する方法](https://iwb.jp/vscode-plantuml-extension-install/) - PlantUMLとはオープンソースのUMLダイアグラム作成用言語。要するに以下のようなコードから図をPNGやSVG形式で作成することができる。(続きは記事を参照)
- [1分でできるMacのターミナルからYouTubeダウンロード](https://iwb.jp/mac-terminal-youtube-dl-download/) - YouTubeだとプレミアム会員だとスマートフォンのアプリで動画をダウンロードできるが、パソコンだとダウンロードができない。しかし、youtube-dlを使用すればターミナルから簡単にYouTubeをダウンロードできる。
- [Google Apps Scriptでフィルター表示中のデータだけ取得する方法](https://iwb.jp/google-apps-script-show-only-filter-data/) - Google Apps Scriptで範囲を指定してgetValues()で値を取得できるがフィルターで非表示になっている値も取得してしまう。sheet.isRowHiddenByFilter()を使用すれば非表示のセルの値は取得しないようにできる。
- [1分でできるJavaScriptライブラリなしの超軽量モーダル](https://iwb.jp/ultra-light-modal-javascript-only/) - 初心者の方だとJavaScriptでモーダルの処理を書くのは難しいと思われがちだが、必要最小限のコードで書けば簡単な処理を18行程度記述するだけで実装できる。
- [日時表示、toLocaleStringで見るか? Intl.DateTimeFormatで見るか?](https://iwb.jp/javascript-tolocalestring-or-new-intl-datetimeformat/) - JavaScriptの日時表示の際にほとんどの人はnew Date()で取得してget〇〇を使用して年月日を取得すると習うが、実際の仕事では初心者でなければtoLocaleStringまたはIntl.DateTimeFormatが使用されることが多い。
- [Googleスプレッドシートの日時開始終了の正誤確認用条件付き書式](https://iwb.jp/google-spreadsheets-formatting-check-date-and-time/) - Googleスプレッドシートでセル内に開始・終了の日付や時間を入力することがある。開始・終了なので必ず「開始 < 終了」となるはずだが、間違えて開始12/26、終了12/25のように「開始 > 終了」で入力してしまうことがあるが、条件付き書式を追加すればこのようなミスは少なくなる。
- [Google Apps Scriptでnew Date()だけでは日本の日時は取得不可](https://iwb.jp/google-apps-script-new-date-is-not-japan-time/) - Google Apps Script (GAS)でnew Date()を使用して現在の日時を取得したいことがあるが、GASでnew Date()を実行すると日本時間ではなくEastern Standard Timeで取得してしまう。この問題はappscript.jsonでタイムゾーンをAsia/Tokyoに変更すれば修正可能。
- [GoogleスプレッドシートのIMAGE関数のGoogleドライブ画像の表示方法](https://iwb.jp/google-spreadsheet-image-function-google-drive/) - Googleドライブであれば画像ファイルのアップロードが容易なのでGoogleドライブのリンクのURLを取得してIMAGE関数で表示させることができれば便利だが、IMAGE関数はGoogleドライブのリンクをそのまま入れても画像を表示させることはできない。
- [['B', 'a', 'A', 'b'].sort()はlocaleCompareを使うとabc順になる](https://iwb.jp/javascript-localecompare-not-localcompare/) - 大文字・小文字を区別せず文字列を並べ替えてabc順にしたい場合はsortを使用しても['A', 'B', 'a', 'b']になってしまう。['a', 'A', 'b', 'B']の順番で並び替えたい場合はsortにlocaleCompareを併用すればabc順に並び替えることができる。
- [GoogleドキュメントでTwitterのようにGASで自動リンク追加](https://iwb.jp/google-document-gas-auto-domain-link/) - Google Apps Script (GAS) を使用すればTwitterのようにiwb.jpのようなドメインを自動的にリンクに変換できる。ただし、GoogleドキュメントはGoogleスプレッドシートのようにonEditが使用できないのでトリガーはonOpenを使用することになる。
- [lighthouse-flows-generatorで複数ページの測定結果が取得できる](https://iwb.jp/lighthouse-flows-generator-get-multiple-pages-result/) - lighthouse-flows-generatorとは Lighthouseの各画面のパフォーマンス測定結果のレポートを生成できるCLI。 使用するにはnpm install -g lighthouse-flows-generatorでインストールする。
- [SimpleBarを使用したmacOSブラウザのスクロールバー常時表示](https://iwb.jp/javascript-simplebar-always-show-macos-scrollbars/) - macOSのChromeやSafariなどのブラウザは特定の要素にoverflow-y: scroll;が指定されていてもマウスオーバーしてスクロールしなければスクロールバーは表示されないがSimpleBarライブラリを使用すれば常時表示にできる。
- [CSS image-set()でWebPやAVIFをtype()で出し分けはできない](https://iwb.jp/css-image-set-webp-avif-like-img-picture/) - image-set()の仕様ではファイル形式の出し分けを使用するにはurlのうしろにtype()を指定することになっているが、2021年12月現在ではブラウザが対応しておらず使用不可となっている。
- [ExcelやGoogleスプレッドシートで土日の日付を色分けする方法](https://iwb.jp/excel-google-spreadsheets-text-aaa-deprecation/) - ExcelとGoogleシートにはWEEKDAYという日付の曜日を1から7で返す関数が用意されているので、条件付き書式を適用するならカスタム書式でWEEKDAYを使用したほうが良い。
- [CSSのdisplay: flexだとoverflow-wrap: break-wordが効かない](https://iwb.jp/css-display-flex-overflow-wrap-min-width-0/) - CSSのdisplay: flexで以下のようなレイアウトを作成した際に英数字のテキストが折り返さずはみ出してしまうことがある。記事に記載されているケースで2行目から開始して折り返したい場合はoverflow-wrap: break-word;を使用するのが定石なのだが、display: flex;が使用されている場合はoverflow-wrap: break-word;だけだと折り返さない。
- [VS Codeなら関数名やセレクタ名などはF2キーで一括修正可能](https://iwb.jp/vscode-change-var-function-by-f2-key/) - JavaScriptやCSSのコードを書いている際に関数名やセレクタ名などを変更することがある。VS Codeは関数名やセレクタ名などにカーソルを当ててF2キーを押せば一括で修正可能なので、修正する際はこちらのショートカットキーを使用したほうが良いだろう。
- [ExcelのIFS関数では最初に空セルの条件分岐を入れたほうが良い](https://iwb.jp/excel-ifs-function-first-empty-cell/) - IFS関数とはExcelまたはGoogleスプレッドシートで複数の条件分岐をIF関数のように入れ子にしないで出し分けることができる関数です。IFS関数で最初に空セルの条件分岐を入れないと想定外の結果になることがあります。
- [Tailwind CSSの使用方法とよくある3つの間違った使い方](https://iwb.jp/tailwind-css-purge-mode-jit-howto/) - Tailwind CSSとはBootstrapのようなCSSフレームワーク。Bootstrapと異なり細かいデザインを作成することができるので、最近はBootstrapではなくTailwind CSSを使用するケースが多い。使い方を間違えるとファイルサイズが約3MBになるので注意が必要。
- [CSSで折り返し防止にoverflow-wrapやword-wrapを指定してはいけない](https://iwb.jp/css-overflow-wrap-word-wrap-word-break/) - WebサイトのCSSコードでoverflow-wrapやword-wrapが使用されていることがある。この2つはword-breakとは異なり単語全体があふれずに行内に配置できない場合にのみ改行を生成するプロパティなのでURLの?直後に改行を入れたくない場合は使用しないほうが良い。
- [CSS aspect-ratioプロパティの代わりをSassのmixinで作成する方法](https://iwb.jp/css-properties-aspect-ratio-mixin-sass/) - aspect-ratioプロパティとは指定した要素のアスペクト比を設定できるCSSプロパティ。例えば aspect-ratio: 16 / 9; のCSSプロパティを要素に追加すれば16:9のアスペクト比を設定できる。
- [package.jsonのscriptsにnpm runを「&&」や「;」で連結はダメ](https://iwb.jp/package-json-scripts-npm-run-all/) - とあるpackage.jsonを見ていたら&&でnpm runを連結しているコードがあった。「&&」や「;」で連結すると見づらいし、パラレルで実行しても良い処理の場合は実行時間も無駄にかかるので、このようなケースの場合はnpm-run-allを使用したほうが良い。
- [Autoprefixerの.browserslistrcにはnot deadを必ず含めるべき](https://iwb.jp/autoprefixer-browserlistrc-include-not-dead/) - not deadとは直訳すると「死んでいない」なので説明しなくてもわかると思うが、これを.browserlistrcに記載すると24か月間、公式サポートまたはアップデートのないブラウザ以外が条件に追加される。
- [IE8～10は2016年1月12日にサポート終了なのにシェアが高い](https://iwb.jp/ie8-ie10-support-end-20160112/) - 2016年1月12日からIE8～10のサポートが終了するのだが現在の日本のブラウザシェアはいまだにIE8～10のシェアが表の通り比較的高い。
- [SSSAPIでGoogleスプレッドシートからJSON APIを作成する方法](https://iwb.jp/sssapi-google-spreadsheet-json-api/) - SSSAPIとはGoogleスプレッドシートのデータだけでJSON APIを作成できるWebサービス。基本利用料は無料でGASではシート内のデータをJSON APIにしてWebページで読み込むことはできないが、SSSAPIを利用すれば簡単に実装できる。
- [CSSパラパラアニメのファイルサイズが小さく、効率的な作成方法](https://iwb.jp/css-animation-parapara-efficiently-howto/) - CSSパラパラアニメにはCSSスプライトとstepsを使用してbackground-positionを指定する…というのは仕事でコーディングしている人にとっては、もはや常識だ。しかし、ファイルサイズが小さく、効率的に作成する方法についてはあまり知られていない。この記事ではそれについて説明している。
- [VS Codeのライブプレビュー拡張機能 Live Previewが超便利](https://iwb.jp/vscode-html-live-preview-extention/) - VS Code (Visual Studio Code)でWordspaceのプロジェクトをライブプレビューするための拡張機能。別の拡張機能のLive Serverに似ているが、VS Code内にプレビューを表示できるのと、上書き保存せずにプレビューが確認可能な点が異なる。
- [1分でできるLOCALを使用したWordPressサイト制作](https://iwb.jp/local-wordpress-development-tool-easy/) - LOCALとはローカル上にWordPress環境を構築して起動できるソフトウェア。LOCAL公式サイト右上のDOWNLOADボタンから無料で入手可能。
- [Chromeを拡大した状態でMacの画面キャプチャを撮ると余白ができる](https://iwb.jp/chrome-zoom-mac-capture-bug/) - Chromeを表示メニューで拡大した状態でフルスクリーンにしてWebページの読み込み中にMacの画面キャプチャを撮ると左と下に余白ができてしまう。SafariだとならないのでChromeで発生するバグのようだ。
- [WebサイトはLighthouseよりPageSpeedで計測したほうが良い](https://iwb.jp/website-lighthouse-pagespeed-insights-report/) - LighthouseはPCのCPUなどのスペックに結果が左右されてしまう。PageSpeedだとサーバー側で計測される。PCのスペックの影響は受けないため、計測する環境による影響が出ない。
- [CSSでflexではなくgridを使用してfooterを一番下に配置](https://iwb.jp/css-grid-template-rows-footer-bottom/) - 以前「CSSでフッターをウィンドウ最下部にabsoluteで固定してはダメ」という記事でfooterをflexで一番下に配置する方法を記事にしたことがある。現在ではIE11を対象外にするWebサイトではgridを使用するケースが多くなっているため、そのやり方について説明する。
- [Google Budouを使用して単語の途中折り返しを防止する方法](https://iwb.jp/google-budou-auto-line-break-tool/) - 日本語は英語のように文章内に半角スペースやハイフンがないためブラウザは単語の区切りを理解できない。そのため改行位置はランダムとなり文章の見た目が悪くなることがある。Budouを使用すれば単語をタグで区切ったHTMLコードを作成することができるので、この問題を解消することができる。
- [Node.jsでHTMLファイルのテキスト置換とエンコードの変更方法](https://iwb.jp/nodejs-html-file-encoding-text-replace-shift-jis/) - 現在ではほとんどのHTMLファイルで文字エンコーディングはUTF-8が使用されているが、たまに古い環境でShift-JISを使用したい場合がある。Node.jsを使用すればコマンドを実行しただけで一括でファイルをShift-JISに変更することができる。
- [Google(03-4567-0700)から営業時間を聞く電話がかかってくる件について](https://iwb.jp/google-business-telephone-03-4567-0700/) - 最近03-4567-0700の電話番号でお店の営業時間を聞くGoogleを名乗る電話がかかってくるということが話題になっていた。結論から先に言うと03-4567-0700はGoogleからの電話です。これはGoogleビジネスプロフィールでGoogle社員から回答があった。
- [Google Search Consoleのプロパティタイプはドメインにするべし](https://iwb.jp/google-search-console-property-type-domain/) - Google Seach Consoleはプロパティタイプを「ドメイン」と「URLプレフィックス」のどちらかを選択できる。「ドメイン」は2019年2月27日から導入された方式なので、これ以前に登録しているWebサイトは「URLプレフィックス」が使用されている。Googleは現在「ドメイン」方式のほうを推奨している。
- [AutoprefixerでBrowserslistがlast 0 versionだと全部付く](https://iwb.jp/autoprefixer-browserslist-last-0-version-prefix-all/) - Browserslistにlast 1 versionを設定すると1バージョン前までのCSSのベンダープレフィックスが付く。そのためlast 0 versionを設定すると何も付かないと思われがちだが、実際はlast 0 versionだとベンダープレフィックスが全部付いてしまう。
- [Googleアナリティクスで表示されるpanda-world.ne.jpとは](https://iwb.jp/google-analytics-panda-world/) - 調べて見たらiPhoneおよびiPadで3G回線を使用してアクセスすると取得されるようだ。http://who
- [GASでcreateFolderやcreateFileをそのまま使うと同名のファイルができてしまう](https://iwb.jp/google-apps-script-create-folder-file-avoiding-duplication/) - Google Apps ScriptでcreateFolderやcreateFileをそのまま使うと同一フォルダ内に同名のファイルができてしまう。getFoldersやgetFilesでフォルダやファイルの一覧を取得して、三項演算子でhasNextがtrueならnextでスルーして作成せず、falseならcreateFolderやcreateFileを実行すれば重複を避けて作成することができる。
- [Reactでbabel-jestのエラーが出て起動できない際の対処法](https://iwb.jp/create-react-app-yarn-start-babel-jest-error/) - npx create-react-appからプロジェクトを作成後、yarn startでReactを起動しようとした際に下記のようなbabel-jestのエラーが出て起動できないことがある。node_module内のbabel-jestのバージョンを26.6.0まで下げるか、.envファイルを作成して現在のバージョンでもエラーにならないようにすればエラーは発生しない。
- [WordPressのLocal.appのアップデートでエラーが出るときの対処法](https://iwb.jp/wordpress-local-error-could-not-load-sites/) - WordPressのLocal.appのアップデートを行うと以下のようなエラーが左サイドに表示されることがある。私の場合はLocal 5.9.6+5149のバージョンではじめて表示された。Error, could not load site. Unexpected token < in JSON at position 0 ←このエラーの修正方法を記事に記載した。
- [GASでシートかドキュメントのIDを指定して文章校正する方法](https://iwb.jp/google-apps-script-sheet-document-id-text-lint/) - Googleスプレッドシート、Googleドキュメント、Googleスライドを使用していると特定の間違った用語が含まえていないかチェックしたいことがある。（例: クスリマス => クリスマス）GASを使用すれば間違った用語が含まれている箇所を簡単に検出することができる。
- [Google Apps Script (GAS)ではconsole.logが使用可能](https://iwb.jp/google-apps-script-logger-console-log/) - 昔はGASでconsole.logを使用するとエラーになるためLogger.logというものが使用されていたのだが、現在はconsole.logも使用可能。console.logだけでなくconsole.warnやconsole.errorも使用できるので使い分けができる。
- [Webサイトのtitleに付ける際に注意すべき5つのパターン](https://iwb.jp/deprecated-keywords-title-of-google-search/) - WebサイトのtitleにはSEO上、付けるとGoogleの検索結果に表示されないなどの問題が発生するキーワードが複数存在する。この記事ではtitleに付けてはいけない代表的なキーワードと、その理由に付いて説明する
- [WordPress 5.7のREST APIはパラメーターの値が空だとエラーになる](https://iwb.jp/wordpress-5-7-rest-api-parameter-error/) - iwb.jpをWordPress 5.7にアップデートしたのだが、REST APIでデータを取得しようとしたらエラーが発生した。 調べたところWordPress 5.7からREST APIが変更されていた。
- [Node.jsでimportでES moduleのコードが動作しないときの対処法](https://iwb.jp/nodejs-esmodule-code-import-error/) - Node.jsを使用する際にimportでES moduleをロードするコードが動作しないことがある。エラーのWarningに原因が書かれているがES moduleを使用する際は拡張子は.jsではなく.mjsでなければならない。あとはNode.jsのバージョンが最新であれば問題なく動作する。
- [Storybook for HTMLをインストール後に追加するべきアドオン一覧](https://iwb.jp/storybook-for-html-css-js-style-guide-tool-addons/) - Storybookはアドオンを追加することで機能を拡張できる。例えばソースコードを表示・コピーするアドオンなどだ。アドオンを追加していないStorybookはエディタで拡張機能が追加されていないくらい使い勝手が悪いので必ず追加したほうが良い。
- [1分でわかるイーモバイル(EMOBILE)ポケットWifiのSSID変更](https://iwb.jp/emobile-ssid-change/) - 2014年6月追記 下記の変更方法はGL01Pを対象としたものなのでGL09Pの場合は こちらの記事を参照 S
- [ブラウザをメモ帳に変えるJavaScriptブックマークレット](https://iwb.jp/memo-javascriptbookmarklet/) - IDEA*IDEAにこのような記事があった。 たった一行でブラウザをシンプルなメモ帳に変える方法 http:/
- [macOS MontereyにしたらSidecarの使用方法が変更されていた](https://iwb.jp/macos-monterey-ipad-sidecar-howto/) - SidecarとはMacのデスクトップを拡張またはミラーリングするディスプレイとしてiPadを活用するシステム。これを使用するとiPadをアプリなしでサブディスプレイとして使用できるのだが、macOS MontereyからSpotlightでSidecarを検索しても表示されなくなった。
- [ハイフンに似ている横棒をすべてtextlintで検出する](https://iwb.jp/textlint-detected-resemble-hyphens/) - ハイフンに似ている横棒をすべてtextlintで検出する方法を考えてみた。
- [2019年10月31日にサービス終了 jsdo.itのファイルを保存する方法](https://iwb.jp/jsdoit-20191031-closed-backup-files-save/) - jsdo.itのサービスが2019年10月31日(木) 15:00に終了する。サービス終了後は全データ消去＆アクセス不可の状態になるので、jsdo.itに保存したいコードがある場合はなるべく早くファイルを保存しておいたほうが良いだろう。
- [1分でできる無料JSONストレージjsonboxを使用した超簡単API作成](https://iwb.jp/free-json-storage-jsonbox-api/) - jsonboxとはHTTP APIを介してJSONデータを保存、読み取り、変更ができる無料Webサービス。公式サイトでJSONデータのURLをコピーしてHTTPリクエストを送信してデータストアを操作するだけなのでログインなどの面倒な作業は一切不要！
- [imgタグのリンク切れ画像はonerror="this.remove()"で削除できる](https://iwb.jp/img-tag-broken-link-onerror-remove-delete/) - HTMLコード内にimgタグがあり、src属性のURLに画像があれば正しく表示されるが、画像がないとリンク切れ画像が表示されてしまうが、imgタグにonerror="this.remove()"があると画像がないときに該当のimgタグが削除されるため、リンク切れ画像が表示されなくなる。
- [CodePenをスマートフォンで確認するのは問題があるのでやめよう](https://iwb.jp/codepen-smartphone-ios-android-confirm-bug/) - CodePenで記述したコードのWebページをスマートフォンで確認するのは3つ問題があるのでやめたほうが良い。問題1 表示領域が狭い、問題2 表示されるのが遅い、問題3 iOSだと正しく動作しないことがある。
- [Puppeteerで複数のWebページの404ステータスコードを調べる方法](https://iwb.jp/puppeteer-multiple-webpage-404status-code-search/) - 複数のURLのステータスコードを調べるにはconst urlsに調べるURLを入れてpage.gotoから_statusでステータスコードを取得する。他にもaタグをすべて取得してリンク切れ(404)を調べたり、responseイベントで読み込んでいるすべてのファイルのステータスコードに404が含まれていないかなども自動で簡単に調べることができる。
- [利用規約はJavaScriptで最後まで読んでいるか判定して次に進むべき](https://iwb.jp/terms-javascript-end-read-check/) - 企業のほとんどのWebサイトの利用規約ページはスクロールして枠内の利用規約を読むページがほとんどだがスクロールして読まなくても同意するのチェックボックスを押すだけで次に進めてしまうWebサイトが多い。これだとスクロールせずに表示されている範囲だけを見て同意したと言われた場合、法的に企業側が不利になるケースが発生する可能性がある。そのため利用規約を最後まで読んだ(スクロールした)されたときに同意するのチェックボックスを押せるようにしたほうが良い。
- [シェルスクリプトでディレクトリ内200KB以上ファイルサイズ検出方法](https://iwb.jp/shellscript-directory-filesize-over-detection/) - Webサイト制作時にファイルサイズの大きすぎるファイルを読み込んでしまうことがある。主に圧縮していない画像の場合が多いのだが、画像の場合は大量にある場合は目視で各ファイルサイズを調べることは困難であり時間がかかってしまう。しかし、シェルスクリプトを使えば200KBを超えるファイルを簡単に検出することができる。
- [1分でできるnode-sassとautoprefixerを使用したSCSSコンパイル方法](https://iwb.jp/node-sass-autoprefixer-scss-compile/) - 昔はSASSのコンパイルにはCompassを使用することが多かったが、現在では新しいプロジェクトであればnode-sassとautoprefixerを使用するのが一般的だ。node-sassはRubyを使用したCompassよりも処理速度が速く、さらにautoprefixerを使用すればCSSのベンダープレフィックスが自動で付与されるためコーディングの手間が激減する。
- [WordPressの送信されたURLにnoindexタグが追加されていますの対処法](https://iwb.jp/search-console-wordpress-noindex-tag/) - 新しいGoogle Search Console (Beta)でWordPressのサイトを確認すると、「送信されたURLにnoindexタグが追加されています」というエラーが表示されていることがある。そしてエラーになっているファイルはWordPressのGoogle XML Sitemapsというプラグインが動的に書き出しているsitemap.htmlである。
- [iOS 10 SafariではcreateRangeとexecCommandでtextareaはコピー不可](https://iwb.jp/ios10-safari-createrange-execcommand-textarea-copy/) - iOS 10 SafariでJavaScriptによるコピーができると聞いて使用してみたのだが、textareaタグやinputタグを使用した場合はコピーできないようだ。テキストのコピーはtextareaタグやinputタグのテキストをコピーしたいケースが多いため、この仕様は使い勝手が悪すぎる。
- [Amebaが不正ログインされやすいのは脆弱なパスワード設定が原因](https://iwb.jp/ameba-incorrect-login-password/) - なぜサイバーエージェントのサービス「Ameba」は不正ログインが多発しているのか。結論から言うとそれは脆弱なパスワード設定が原因だ。
- [新サービスの名称がAmebaTVではなくAbemaTVの理由](https://iwb.jp/why-cyberagent-new-service-is-abematv/) - AmebaTVではなくAbemaTVの理由はサービス開始前にAmebaTVという子供向けストリーミングテレビサービスがカナダにあり、ameba.tvドメインも取得されていたから。ちなみにameba.tvをアドレスバーに入力するとamebatv.comにリダイレクトされる。
- [OSがAndroid端末の脆弱性対応状況を表にしたら絶望的だった](https://iwb.jp/os-android-vulnerability/) - Android 4.4以前だと使用できるCSSも4.4よりもかなり少なくなる。これはWebサイトの制作者側にとっては作業コストの増加や表現できる内容の制限につながり、利用者にとってはWebサイトが正しく表示されないデメリットにつながる。
- [スクロールを実装するiScrollの使い方とオプションとdemo](https://iwb.jp/iscroll-js-fixed-option-demo/) - iScrollとは スクロールなどを簡単に実装することができるJSライブラリ。 パララックスやカルーセル(スラ
- [TypeScriptのコンパイル時間を短縮する5つの方法](https://iwb.jp/typescript-compile-speedup/) - TypeScriptを使用すればコンパイル時に変数の型の不一致やエラー等によるバグを発見しやすくなるため多くの現場で使用されているがファイル数が多くなるほどコンパイルに時間がかかるというデメリットがある。そのためコンパイルに時間がかからないよう以下のような対応が必要になることがある。
- [SASS(SCSS)を使用してCSSだけで正方形の中にバツを付ける](https://iwb.jp/sass-css-batu-box/) - 正方形にバツがついたものはいろいろなサイトで使用されるがたいていは画像が使用されていることが多い。しかし、画像の場合は拡大や縮小するとバツの斜めの線がきれいに表示されないため使い回しに不向きだ。しかしSASS(SCSS)を使用すればあらゆる大きさの正方形であったても柔軟に対応でき、斜めの線の部分もきれいに表示される。
- [1分でわかる簡単使い方Gruntタスク自動化環境構築](https://iwb.jp/easy-grunt-install/) - コマンドプロンプトに慣れていない人でも簡単にGruntタスク自動化環境を構築できるように1分で説明。
- [Firebugのコンソールで特定のタグの中身をすべて調べる](https://iwb.jp/firebug-console/) - Firebugのコンソールで特定のタグの内容を調べることができる。 まず、コンソールを選択し、右下のコマンドエ
- [Webサイトの日本語と中国語の漢字表記の違いと確認方法](https://iwb.jp/your-code-displays-japanese-wrong-check-javascript/) - Your Code Displays Japanese Wrongという記事で日本語と中国語の漢字表記の違いと方法について書かれていた。海外で活動するWebクリエイターなどは以下の点を把握していないと間違えて日本語ではなく中国語で表示してしまう可能性があるので注意が必要。
- [input type="file"はaccept属性でファイル形式を制限可能](https://iwb.jp/html-input-type-file-accept-attribute/) - accept属性をで使用すればファイル形式を制限することができる。使い方は簡単で以下のようにタグにaccept属性を付けて値に拡張子をカンマ区切りで付けるだけだ。
- [Google翻訳を防ぐtranslate属性はcopyrightには必須！](https://iwb.jp/google-translate-no-attribute-copyright-html/) - translate属性とはWebページを翻訳するかどうかをyesかnoで指定できる。Google翻訳に翻訳させたくない場合はHTMLタグにtranslate="no"を指定すれば翻訳されない。
- [Chrome 94からデベロッパーツールの言語を日本語に変更可能となった](https://iwb.jp/chrome94-settings-change-language-japanese/) - デベロッパーツールはいままで英語でしか表示できなかったが、2021年9月23日(木)からChrome 94にアップデートすれば言語を日本語に変更可能となった。変更するにはデベロッパーツールの上部に「DevTools is now available in Japanese!」と表示させるので「Switch DevTooles to Japanese」のボタンを押す。
- [1分でできるNetlifyでのWebサイト作成方法](https://iwb.jp/app-netlify-hosting-website-howto/) - Netlifyは現在よく使用されているホスティングサービス。ホスティングサービスとは事業者の所有するサーバーを貸し出すサービス。Netlifyを使用すればWebサイトを1分で公開できる。
- [1分でできるGitHub Pagesの作成方法](https://iwb.jp/github-pages-how-to-create/) - GitHub PagesとはGitHubのリポジトリかWebサイトを公開できるサービス。例えばindex.htmlを作成してこのようなURLで公開できる。 https://iwbjp.github.io/hello-world/
- [JavaScriptのnavigator.share()でシェアボタンを作成する方法](https://iwb.jp/javascript-navigator-share-button/) - navigator.share()とはテキスト、URL、ファイルなどのデータを共有できるメソッド。利用可能な共有対象はデバイスによって異なり、スマートフォンではTwitterの共有も可能となる。
- [MacではターミナルではなくiTerm2を使ったほうが良い](https://iwb.jp/iterm2-terminal-emulator-macos-app/) - iTerm2とはMacのターミナルアプリ。Macの場合はターミナルをそのまま使用しているケースが多いが、iTerm2を使用すればターミナルにはない作業効率を向上できる多くの機能を使用できる。
- [ラーメン屋 鯛塩そば 灯花 池袋東武店の行き方と注意点](https://iwb.jp/ramen-taishiosoba-toka-ikebukuro-tobu/) - 鯛塩そば 灯花とは東京都新宿区舟町に本店がある愛媛県宇和島から直送したマダイを使用した鯛塩そばが名物のラーメン屋。本店は曙橋駅の近くだったので行く機会がなかったが、2021年8月10日に池袋駅にある東武百貨店池袋本店13階にオープンしたので行ってきた。
- [JavaScriptで超簡単にランダムで数桁の16進数を作成する方法](https://iwb.jp/javascript-easy-random-hexadecimal-number-digits/) - ランダムの16進数の作成方法は人によって異なり私が知る限り十数パターン存在する。数行のコードで作成するものも多いが、toString()とslice()を使用する方法であれば1行だけで超簡単にランダムの16進数を生成することができる。
- [imgタグのloading属性(lazy)の使い方と超簡単に実装する方法](https://iwb.jp/img-tag-loading-attribute-lazy-howto/) - imgタグやiframeタグをHTMLコード内に追記させるだけで遅延ロードを実装させることができる属性。対応しているブラウザはまだ少ないが、未対応のブラウザはloading属性を無視するだけなので読み込み時間の短縮のために積極的に使用したほうが良いだろう。
- [loading="lazy"があると特定の位置までスクロールされない](https://iwb.jp/javascript-smooth-scroll-disabled-img-loading-lazy/) - imgタグにloading="lazy"を追加するだけで実装できるので便利だが、imgタグにwidthとheightが付いていないとJavaScriptでのスムーススクロールが正しくできなくなるというデメリットがあるため使用する際は注意が必要。
- [ICSのVue.jsでサクッと動きをつける方法をv2対応にした](https://iwb.jp/javascript_add_a_little_vue_v2/) - 先週ICS MEDIAにHTMLにちょい足しでできる！ Vue.jsでサクッと動きをつける方法という記事が掲載されていた。コードは最新のVue Composition APIとESモジュールが使われているためIE11には非対応だった。私の場合IE11も含めてWebサイトを作成する機会がまだあり、最新のVue Composition APIのコードだと都合が悪いのでIE11対応のバージョン2のコードに直してみた。
- [ターミナルからファイルのリネームを実行するrenameの使い方](https://iwb.jp/plasmasturm-file-rename-howto/) - brew install renameでrenameをインストールするとファイルのリネームが簡単にできるようになる。この記事ではrenameの使い方を解説しています。
- [PostCSS plugin autoprefixer requires PostCSS 8のエラーの対処法](https://iwb.jp/postcss-plugin-autoprefixer-requires-postcss8-error/) - 最近autoprefixerとPostCSSを使用しているとPostCSS plugin autoprefixer requires PostCSS 8のエラーが出るケースがある。対処方法はWebpack, CLI, gulp, Next.js, Nuxt.js, Parcelなどの使用環境ごとに異なる。
- [bodyにdisplay: flexを付けても上下中央揃えにならない理由](https://iwb.jp/body-display-flex-align-items-disabled/) - bodyにdisplay: flexを付けても上下中央揃えにならないことがある。例えば以下のようなWebページの場合に発生する。
- [羽田市場食堂 池袋サンシャイン60通り店の特上羽田市場天丼](https://iwb.jp/haneda-sijou-shokudou-ikebukuro-sunshine60-street-tendon/) - 2021年8月8日に羽田市場食堂 池袋サンシャイン60通り店がオープンした。主なメニューは鱧天丼と海鮮丼だけなのだが、この2つがレベル違いのおいしさで990円というお手頃価格でいただけるので、近くに立ち寄った際はぜひ行ってみてほしい。
- [CSSのflexboxでflex-growやflex-shrink使用時の注意点](https://iwb.jp/css-flexbox-grow-shrink-shorthand-property/) - flex-grow: 1; はCSSのショートハンドでflex: 1; と書くこともできるので、指定するならこちらのほうが良い。flex-growだとgrowをglowと書き間違えるケースが多いからだ。
- [WordPress 画像1枚目がloading="lazy"でLCP悪化の対処方法](https://iwb.jp/wordpress-lcp-img-loading-lazy-disabled/) - loading="lazy"がファーストビューの画像に含まれるとLCPの悪化でページの読み込み速度が低下する。この問題はfunction.phpで画像の1枚目にあたるpost-thumbnailの画像のloading属性を"eager"に置換すれば解決できる。
- [ラブライブ！スーパースター!!に出た穏田神社の行き方と注意点](https://iwb.jp/lovelive-anime-yuigaoka-onden-jinja/) - 穏田神社とは東京都渋谷区神宮前にある神社。ラブライブ！スーパースター!!のキャラクター平安名すみれの実家のモデルとして登場したことから参拝に訪れるファンが多くなっている。
- [iPadで表示崩れを発生させないための3つの基礎知識](https://iwb.jp/ipad-avoid-display-collapse-knowledge/) - 私はiPad愛用者なのでWebサイトをiPadで見ることも多いのだが、日本国内のWebサイトはiPadで見ると表示崩れが発生することが多い。この記事ではiPadで表示崩れが発生する主な3つの要因を解説する。
- [Web制作者なら知るべきGASのContentServiceとHtmlService](https://iwb.jp/google-apps-script-contentservice-htmlservice/) - ContentServiceとHtmlServiceはGASでテキストやWebページを生成するために使用するためのもの。この記事ではこの2つの使用方法について解説している。
- [意外と知られていないWebP使用時に必要な基礎知識](https://iwb.jp/webp-html-css-javascript-howto/) - WebPとはGoogleが開発しているオープンな静止画像フォーマット。JPEGより軽いため最近は使用しているWebサイトが多くはなったが、まだ使用されていないWebサイトも結構ある。
- [意外と知られていないCSSの4桁(#f00f)や8桁の色指定](https://iwb.jp/css-color-digit-4-8-ff0f/) - CSSは16進数で指定する場合は3桁(#f00)や6桁(#ff0000)の指定しかできないと思っている人が多いが、実は4桁(#f00f)や8桁(#ff0000ff)の指定もできる。
- [JavaScriptの毎秒実行処理はこのようにすれば短く書ける](https://iwb.jp/javascript-setinterval-settimeout-short/) - JavaScriptで毎秒実行させる方法はいくつかあり、書き方により使用するコード量やメソッドに違いが出る。毎秒実行だと一定の遅延間隔を置いて実行することができるsetIntervalが初心者だとよく使用される。
- [GASのgetDataRange()は便利だけど使用する際には注意が必要](https://iwb.jp/google-apps-script-spreadsheet-getdatarange/) - getDataRangeはすべてのセル範囲を取得できるため便利だが、データの入力列がA列, B列だけだとしても例えばD列5行目に何か値が追加されたら入力されている最終行、最終列のすべての範囲を取得してしまうので使用する際には注意が必要。
- [WordPress reCaptcha by BestWebSoft ログインエラー解消方法](https://iwb.jp/wordpress-recaptcha-by-bestwebsoft-login-error/) - reCaptcha by BestWebSoftのプラグインをインストールするだけでセキュリティを強化できて便利だが、これをインストールするとログインボタンを押した際にエラーが発生してしまうことがある。これはGoogle reCAPTCHAを読み込む前にログインボタンを押してしまうと正しく認証ができないことが原因だ。
- [JavaScript以外で画像をキャッシュさせないほうが良い](https://iwb.jp/javascript-preload-images-cache-tips/) - :hoverやDOMでモーダルなどを表示させる際に画像が遅れて表示されるWebサイトをよく見かける。画像が遅れて表示されるのはユーザー側のアクションによってまだ読み込まれていない画像の読み込みが開始されるのが原因なので、こうならないよう画像の先読みが必要になる。
- [JavaScriptでオンライン・オフラインを検知して表示する方法](https://iwb.jp/javascript-navigator-online-offline-detection-display/) - JavaScriptではnavigator.onLineを使用するとオンラインならtrue、オフラインならfalseが返ってくるので接続状態を簡単に取得できる。例えばWebページ内でオンラインであればonlineと表示して、オフラインならofflineと表示させたい場合は記事内のコードで実装できる。
- [大塚の担担麺で有名なラーメン店 鳴龍の行き方と感想と注意点](https://iwb.jp/otsuka-nakiryu-ramen-tantanmen-michelin/) - 鳴龍とは大塚にあるミシュランガイド東京で星一つを獲得したラーメン店。ミシュランガイド東京で星一つを獲得している。現在ラーメン店でミシュランの星を獲得しているのは大塚の鳴龍と巣鴨の蔦の2店だけである。そのため連日長蛇の列になっている。
- [Google Apps ScriptのHTMLテンプレートでJSの配列を作成する方法](https://iwb.jp/google-apps-script-templated-html-javascript-array/) - Google Apps ScriptではHTMLファイルとGoogleスプレッドシートを作成して、GASでシート内のデータをHTML側で読み込ませることができる。例えば以下のようにTemplated HTMLを記述すれば簡単にデータを表示させることができる。
- [2021年7月9日(金)公開の映画「100日間生きたワニ」がヤバい](https://iwb.jp/100wani-movie-dentsu-yabai/) - 100日間生きたワニとは100日間のワニの日常と、そこから100日後の大切なものを失った仲間たちの姿を描いたアニメーション。電通案件であったことが発覚してネット上では作品に対して「ワニはステマ」などといった批判的な主張も見られ、Twitterのトレンドにおいて『電通案件』が国内1位となり、大炎上する事態となった。
- [Googleスプレッドシート記載のURLからステータスコードを取得](https://iwb.jp/google-spreadsheet-get-url-status-code/) - GoogleスプレッドシートにURLの一覧を記載することがあるが、記載したURLが問題がないかクリックしてブラウザで確認せずに知りたいことがある。そんなときはGoogle Apps ScriptでURLからステータスコードを取得する関数を作成する。
- [ワクチン接種券の封筒の画像をSNSに投稿して住所がバレる人が続出中](https://iwb.jp/covid19-vaccination-ticket-envelopes-sns-posting-address/) - ワクチン接種券の封筒の住所部分は隠したりボカシを入れたりしているが、カスタマバーコード部分は隠さず撮影した画像をSNSに投稿して住所がバレる人が続出している。
- [Vue.jsと比べて超軽量のpetite-vueの使い方](https://iwb.jp/javascript-vuejs-petite-vue/) - petite-vueとは超軽量版Vue.js。作者はVue.jsと同じくEvan Youで特徴は以下の通り。
- [必ず覚えるべきPug(Jade)でよく使う正しい9つの書き方](https://iwb.jp/pug-jade-html-9-tips/) - Pugは短い記法でHTMLを生成できるテンプレートエンジン。Sassを知っている人ならSassのHTML版のようなものと言えばわかりやすい。
- [WordPress Popular Postsプラグインの5.3.4で文字化けするバグが発生中](https://iwb.jp/wordpress-plugin-popular-posts-5-3-4-garbled-characters-bug/) - 本日の午前5時頃に人気の記事を表示する「WordPress Popular Posts」のプラグインがバージョン5.3.4にアップデートされたのだが、文字化けするバグを含んでいたため表示がおかしくなっているWordPressサイトがたくさん発生している。
- [webpack serveのliveReloadでブラウザを自動更新する方法](https://iwb.jp/webpack-server-livereload-browser-html/) - webpackでHTMLを修正したらブラウザで表示されている「http://localhost:8080/」を自動的に更新して確認できるようにしたいことがある。Googleで検索すると色々なやり方を説明しているWebサイトがあるが間違っているものも多い。
- [Twitterのツイートのhashtagsパラメーターは表示位置を調整不可](https://iwb.jp/twitter-tweet-hashtags-parameters-button-link/) - hashtagsパラメーターとはその名の通りTwitterのツイート時にハッシュタグを追加するためのパラメーター。hashtagsパラメーターを使用すると位置がURLの後になるためツイートの文章作成時に都合が悪いことがある。
- [Jestのテストコードは書いた直後に自動実行したほうが良い](https://iwb.jp/jest-test-code-automatically-check/) - Jestを実行するタイミングはJenkins, GitHub Actions, ターミナルなどが多いが、これらのタイミングで実行するとテストの確認が遅れたり、実行(確認)漏れが発生することがある。VS CodeのJestの拡張機能を入れておけば時間のかかる処理でなければテストコードを書いて保存した瞬間に問題ないか確認できる。
- [Windows 11互換性チェックプログラムでは正しくチェックできない](https://iwb.jp/windows11-pc-health-check-program-msi/) - 互換性チェックプログラムとはその名の通り現在使用しているWindowsがWindows 11と互換性があるかチェックするプログラム。記事に書かれているのマイクロソフトのリンク先からダウンロードできる。
- [JavaScriptで数値の区切り文字を使用する際の7つの注意点](https://iwb.jp/javascript-numeric-separators-7-error-problem/) - JavaScriptの数値の区切り文字とは2021年6月22日に正式仕様となったES2021に追加された新機能。例えば100万の数値の場合、アンダースコアを付けることで次の用に区切ることができる。1_000_000 + 2_000_000
- [Webサイト, Word, Googleドキュメントをtextlintでチェックする方法](https://iwb.jp/website-word-google-document-textlint/) - textlintは基本的にはテキストファイルの文章校正ツールなのでWebサイト, Word, Googleドキュメントを直接処理してチェックすることはできない。そのため一度テキストファイルに変換してダウンロードしてチェックする必要がある。
- [フロントエンジニア向け.gitignoreの書き方とサンプルファイル](https://iwb.jp/gitignore-sample-file-for-front-engineer/) - フロントエンジニアはNode.jsを使用することが多いのでNode.gitignoreというファイルを元に作成すると作りやすい。実際にフロントエンジニア向け.gitignoreファイルを作成した。
- [最近の侍エンジニア塾ブログのコードを参照してはいけない](https://iwb.jp/dont-use-samurai-engineer-blog-code-reference/) - 侍エンジニア塾ブログのJavaScriptの記事を見る機会があったのだが、コードを見たらバックスラッシュが消失している記事がいくつかあった。例えば以下の記事はバックスラッシュが消失していた。
- [CSSのdisplay: gridで左上や右上から縦に順番に表示する方法](https://iwb.jp/css-display-grid-row-column-direction-rtl/) - CSSのdisplay: gridを使用するとデフォルトでは左から右に表示されるが、CSSプロパティを追加すれば上から下や真ん中などの順番で開始することが可能になる。
- [Git初心者なら必ず覚えるべきgit restoreコマンド](https://iwb.jp/git-restore-s-head-commit-fix/) - git storeとは指定されたファイルなどを「戻す」ことができるコマンド。ファイルなどを戻すコマンドはすでにほかにもあるが、git restoreのほうがわかりやすいのでこちらを使用したほうが良いだろう。git restoreはバージョン2.23.0から追加されたので知っている人はほかのコマンドに比べて少ない。
- [PHPでファイルを修正するたびにhash_fileでキャッシュ無効化](https://iwb.jp/php-hash-file-cache-url-auto-query/) - ファイルのURLのクエリ部分が手動だと手間がかかるがPHPを使用してファイルのハッシュ値からクエリ文字列を自動生成すれば簡単にキャッシュ対策ができる。
- [意外と知られていないCSSの:is()擬似クラス関数の使い方](https://iwb.jp/css-if-fucntion-howto/) - CSSの:is()を使えばセレクターのリストを引数に入れて要素を選択することができる。例えばsection直下のh1, h2, h3のテキスト色を緑にする場合は下記のように書かれることが多いが、これを「section > :is(h1, h2, h3)」のように短く書くことができるようになる。
- [Bootstrap 5のサンプルファイルで覚える基本的な使い方](https://iwb.jp/bootstrap-5-sample-file-howto/) - Bootstrap 5とはWebサイトの作成時にデザインや機能の実装が簡単にできるフレームワーク。Bootstrap 5からjQuery依存でなくなったのでパフォーマンスが向上した。
- [CSSでフッターをウィンドウ最下部にabsoluteで固定してはダメ](https://iwb.jp/footer-css-position-absolute-bottom-flexbox/) - 「フッター 最下部 固定」などで検索すると、CSSのposition: absoluteを使用して固定するよう書かれたWebサイトが検索結果に多く表示されるが、position: absoluteを使用すると高さを変更しにくくなる問題などが発生するので真似しないほうが良い。
- [VivaldiブラウザのRSS機能を試したが使いものにならなかった](https://iwb.jp/rss-vivaldi-browser-useless/) - 先日Vivaldiブラウザ4.0がリリースされてベータ版としてフィード機能(RSS)が実装された。早速試してみたのだが、使い勝手が悪すぎて使いものにならなかった。
- [阿部寛のホームページはセキュリティ問題でGmail送信不可](https://iwb.jp/abehiroshi-la-coocan-cant-send-gmail/) - 阿部寛のホームページとは非常に表示されるのが速いことで知られる俳優の阿部寛の公式ホームページ。最強と言われている阿部寛のホームページだが、Chromeブラウザのセキュリティ強化によりPCのChromeでページを表示している場合はメール(Gmail)で送信不可になっているという欠点がある。
- [獺祭ストア銀座で開催中のエヴァンゲリオン×獺祭に行ってきた感想](https://iwb.jp/asahishuzo-ginza-dassai-store-evangelion-collabo/) - 日本酒の獺祭で有名な旭酒造の直営店・獺祭ストア銀座でエヴァンゲリオン×獺祭のコラボ企画「獺祭補完計画」を2021年6月7日から7月31日までの期間限定で開催している。(入場無料)混雑緩和のため整理券を10時30分から配布していて電話やインターネットでの予約はできないので直接10時30分頃に取りに行く必要がある。
- [CSSのfloatやflexではなくdisplay: gridでレイアウトを作成するべき](https://iwb.jp/css-layout-display-grid-instead-float-or-flex/) - Webサイトを作成するときに最大幅600pxで中の余白が20pxの3行 x 3列のレイアウトをCSSで作成するにはfloat: left, display: flex, display: grid のいずれかが使用されることが多いが、float: leftとdisplay: flexはdisplay: gridに比べてデメリットが多いので、このようなレイアウトで使用するのは好ましくない。
- [「たった1行のコードを直すのに何日かかってるんだ！」について](https://iwb.jp/how-many-days-take-to-fix-a-single-line-of-code/) - 最近エンジニアが1行のソースコードを直すのに何日もかかったとして、何でたった1行直すのに何日もかかってるんだ！とキレる人に関してのツイートが話題になっていた。これを見ると「プログラムはたった1行のコードを直すのに何日もかかるのか」とプログラムに詳しくない人だと思う人もいそうだが、1行のコードでもすぐに直せるケースもあるので一概には言えない。
- [ひろゆきのスマホ言語設定の英語変更はやめたほうが良い](https://iwb.jp/hiroyuki-changing-phone-language-setting-to-english/) - 2021年2月にひろゆきが英語を覚えるならスマホの設定という動画を投稿してから英語に変えている人が増えているらしい。だが、スマホ設定を英語にしても学習効率が悪いし、デメリットのほうが多いのでやめたほうが良い。
- [ExcelのENCODEURL, WEBSERVICE, FILTERXMLは互換性がないので注意](https://iwb.jp/excel-encodeurl-webservice-filterxml-not-compatible-with-mac/) - WindowsのExcelにはENCODEURL, WEBSERVICE, FILTERXMLという3つのWeb関数が存在するが、MacのExcelやGoogleスプレッドシートでは使用できないので注意が必要。
- [GoogleスプレッドシートにScreenUpdatingはないのでGAS作成時は注意が必要](https://iwb.jp/screenupdating-not-exist-google-spreadsheets-gas/) - Applicaiton.ScreenUpdatingはExcel VBAの画面更新のプロパティ。VBAではコード内にApplicaiton.ScreenUpdating = falseを実行するとセルの処理過程で発生する画面の更新を行われなくなるため処理速度が向上するがGoogleスプレッドシートのGASには同様のプロパティは存在しないので注意が必要。
- [VS Code拡張機能一覧の簡単な書き出し＆読み込み方法](https://iwb.jp/vscode-extension-list-terminal-export-import/) - VS Codeを使用しているとインストールしている拡張機能を他のパソコンのVS Codeに反映させるために張機能一覧を書き出して、それを他のパソコンのVS Codeで読み込みたいことがある。しかし、VS Codeのメニューからは拡張機能一覧の書き出しを行うことはできない。VS Codeの拡張機能一覧を書き出すにはターミナル(黒い画面)を使用する必要がある。
- [Mac Excel VBEのサポートされていないオートメーション問題](https://iwb.jp/excel-for-mac-vbe-support-automation-error/) - Excel for MacでVisual Basic Editor(VBE)を使用して、コードウィンドウの上部にあるドロップダウンメニューで(General) からWorkbookを選択選択すると「Visual Basic でサポートされていないオートメーションが変数で使用されています。」というエラーが発生する。
- [PDFは作成者名を含むのでそのままサーバーにアップしてはダメ](https://iwb.jp/pdf-files-include-creator-name/) - WebサイトでPDFファイルをアップロードして公開することがあるが、PDFファイルには作成者名が含まれることがあるので注意が必要だ。
- [Sublime Text 4を使用してみたがVS Codeには勝てそうにない](https://iwb.jp/sublime-text-4-compare-vscode/) - 2021年5月21日にSublime Text 4がリリースされた。2年半ぶりのメジャーアップデートなので、VS Codeとの違いを簡単に確認してみた。
- [意外と知られていないtype="number"入力欄の5つの問題点](https://iwb.jp/html-input-type-number-problem/) - 入力フォームのinputタグにtype="number" を指定すればChromeだとアルファベットなどが入力されず、スマートフォンだとキーボードが数字に切り替わって入力しやすくなるので入力ミスを減らせる。しかし、inputタグのtype="number"はブラウザによって挙動が異なるので、そのまま使用すると問題が発生する可能性がある。
- [2021年7月リリースのWordPress 5.8からIE11のサポート終了](https://iwb.jp/wordpress-dropping-support-for-internet-explorer-11/) - 2021年5月19日(現地時間)に2021年7月リリースのWordPress 5.8からIE11のサポートが終了するというニュースが公式ブログで公開された。ちょうど同日にMicrosoftがInternet Explorer 11 (IE 11)のサポートを2022年6月15日に終了すると発表したので、これに合わせたのだろう。
- [Feedlyで「J」を押すと大量にスキップするバグが発生中！](https://iwb.jp/feedly-shortcut-j-key-bug/) - Feedlyを使用して記事を見るときは次の記事を見るときはショートカットキーの「J」を押せば次が見れる。しかし、先週あたりから「J」を押すと大量にスキップするバグが発生する。すぐに直ると思って放置していたが、現在も直っていない。
- [1分でわかるJavaScriptのキーボードイベント追加方法](https://iwb.jp/javascript-addeventlistener-keydown-event/) - JavaScriptでイベントを追加する場合、圧倒的にマウスのクリックイベントが多く、キーボードイベントは追加されることは少ない。しかし、キーボードイベントも追加したほうがユーザービリティが向上するケースがあるのでキーボードイベントの追加が必要かどうかの検討は必要。
- [Webサイトで途中からではなくページの一番上から表示する方法](https://iwb.jp/first-view-window-scrollto-00-not-move/) - Webサイトで更新などをした場合でも一番上から表示したい場合はJavaScriptでwindow.scrollTo(0, 0)を書けば良い…と思う人がいるかも知れないが、これだけだとスクロールされない。この処理を実行するにはsetTimeoutも必要になる。
- [JavaScriptのSplideによるスライダー(カルーセル)作成方法](https://iwb.jp/javascript-library-splide-slider-and-carousel/) - Splideは簡単にスライダー(カルーセル)を作成できるJavaScriptライブラリ。すでにスライダーのJavaScriptライブラリはほかにもあるが、Splideは使用方法が簡単で初心者にもわかりやすいのでオススメ。npmからもインストール可能でVueやReactに対応している点も使い勝手が良い。
- [Microsoft Power Automate DesktopでWindows 10自動化対応](https://iwb.jp/microsoft-power-automate-desktop-windows10-howto/) - Microsoft Power Automate Desktopは人間が行う定型操作を自動化できるツール。MacのAutomatorのようなもので例えばフローを実行した際に時刻が18時以降であればChromeでiwb.jpを開くという作業などを自動化できる。
- [Webサイトでファーストビューを見せてから自動スクロールする方法](https://iwb.jp/javascript-auto-scroll-after-showing-first-view/) - Webサイトでファーストビューを見せてから自動スクロールすることがある。ファーストビューで動画やCSSアニメーションを見せて、その後特定の要素に自動スクロールさせる処理が多い。このような処理はjQueryを使用すると少ないコード量で簡単に実装できる。
- [板橋区役所前駅のラーメン屋はちどりへの行き方と注意点](https://iwb.jp/ramen-niboshi-hachidori-itabashikuyakushomae/) - 八咫烏のラーメン黒は香味油の香りが強く、醤油と野菜の味が濃い醤油ラーメンだった。スープがしょっぱめなので替え玉ができないのはつらい。全粒粉のストレート細麺はスープとの相性が良く、おいしかったので替え玉したかった…
- [スクロールで見えた要素にアニメーションを追加できるAOSの使い方](https://iwb.jp/javascript-animate-on-scroll-library-aos/) - Webサイトを作成しているときに下にスクロールして特定の要素が見えたときにフェードインなどで表示させたいことがある。AOSはAnimate On Scroll Libraryの略でその名の通りスクロールして特定の要素が見えたときにフェードインなどで表示させるJavaScriptライブラリです。
- [Lite YouTube Embedで埋め込み動画を約224倍高速化する方法](https://iwb.jp/javascript-lite-youtube-embed/) - YouTubeはiframeタグを貼り付けるだけでアップロードした動画を表示できて便利だが、YouTubeのiframe埋め込み動画はWebページを重くしてしまう。Lite YouTube Embedを使用すると約224倍高速化することができるので、やり方を記載しました。
- [画像の背景を自動で切り抜くならremove.bgよりclippingACがオススメ](https://iwb.jp/image-clipping-ac-remove-bg-photoshop/) - 人物などの画像の背景を切り抜くのはPhotoshopがあればできるが、Photoshopは有料ソフトのため持っている人が少なく、画像の背景を切り抜くのはPhotoshopの知識が必要になる。そのため、これらがない場合remove.bgという画像ファイルをドラッグ＆ドロップするだけで背景が自動的に切り抜かれた画像をダウンロードできるサービスが良く使用されている。
- [VS Codeで画像背景を1クリックで切り抜けるremove-bgは使わないほうが良い](https://iwb.jp/vscode-extension-image-removebg-photoshop/) - VS Code拡張機能 remove-bgを使わないほうが良い理由は4つあります。理由1 元画像からサイズを変えてしまう。理由2 切り抜きの精度がPhotoshopより低い。理由3 Photoshopより画質が劣化する。理由4 切り抜き画像の調整ができない。
- [1分でわかるPhotoshopで絵文字を挿入する方法](https://iwb.jp/photoshop-emoji-insert-font/) - Photoshopで画像内に絵文字を挿入したいことがある。「そんなのテキストレイヤーに絵文字を貼り付けるだけだろ」と思う人もいるかもしれないが、Photoshopはエディタのようにそのまま絵文字をコピーして貼り付けても表示されない。
- [JavaScriptで複数の文字列置換は連続replaceや配列ではなくjsonを使用する](https://iwb.jp/javascript-replace-multiple-words-json/) - JavaScriptでreplaceで文字列を置換する際に複数の文字列を置換したいことがある。JSONファイルに置換前と置換後の用語を入れて処理すれば置換しやすくなる。
- [JavaScriptでjQueryを使わず複数のjsonのurlを読み込む方法](https://iwb.jp/jquery-json-ajax-when-multiple-read/) - jQueryを使わずJavaScriptでjsonを読み込む場合は最近はfetchがよく使用される。しかし、fetchで指定できるurlは1つだけなので複数のjsonのURLを読み込む関数を作成する必要がある。1番簡単なのは引数で配列を受け取って、それをmapでfetch入りでまとめてawait Promise.allで実行する方法だ。
- [JavaScriptアニメーションライブラリ Tween24.jsの使い方](https://iwb.jp/javascript-animation-library-tween24js/) - JavaScriptでアニメーションを簡単に作成できるライブラリ。メソッドチェーンで記述するのが特徴で、1行でもアニメーションを実装可能。
- [CSSのclip-pathのpathを作成して画像を切り抜く方法](https://iwb.jp/css-clip-path-code-generate-photoshop/) - clip-pathはCSSのプロパティで、指定した範囲を切り抜いて表示することができて便利だが、pathの作成方法について説明しているサイトを見かけないので作成方法を記載しました。
- [1分でできるPDFの代わりにHTMLでA4ページを作成する方法](https://iwb.jp/pdf-html-javascript-a4-size/) - WebサイトによってはWebページ内のリンクの一部がPDFファイルへの直リンクになっていることがあります。PDFファイルへの直リンクはいくつかの問題あるので現在ではあまり好ましくなく、HTMLで作成したほうが良い場合が多いです。
- [ニコニコ動画のランキングをPCで見るなら有料アイコン表示のSP版が良い](https://iwb.jp/nicovideo-smartphone-version-for-paid-icon-show/) - スマートフォンやタブレットでニコニコ動画のランキング一覧を見るとチャンネル入会をしていないと見られない有料動画の場合は「有料」のアイコンが表示される。しかし、パソコン版のランキング一覧だと何か事情があるのか、それとも運営がアホだからなのか知らないが「有料」のアイコンが表示されない。
- [Excel VBAのvbNewLineはReplaceでは置換できないので注意](https://iwb.jp/excel-vba-vbnewline-replace-cant-use/) - vbNewLineはWindowsとMacの両方で使用できる改行のための定数ですが、Replaceでそのまま使用するとWindowsだと改行を置換することができないため注意が必要です。
- [池袋サンシャインシティを歩いていたら実物大はやぶさ模型が展示されていた。](https://iwb.jp/hayabusa2012/) - 池袋サンシャインシティを歩いていたら実物大はやぶさ模型が展示されていた。 近くで見ると結構大きい。 映画『はや
- [サイトのディレクトリ名には一部の記号が使用できる](https://iwb.jp/directory-name-rule/) - 使用できる記号 ! + * ^ | ( ) " $ & ' = ~ @ [ ] { } < &g
- [JavaScriptのStrictモード"use strict"を使用したvar有無の簡単チェック](https://iwb.jp/strict-mode-var-check/) - JavaScriptの1行目に"use strict";を入力すると変数のvarが抜けている場合、Firefoxなどのコンソールにエラーが表示されvarが入っていない箇所を知ることができる。
- [WordPressにバージョン1系以外のjQueryを入れるとバグが発生しやすい](https://iwb.jp/wordpress-jquery-version1-bug/) - WordPressでデフォルトで読み込んでいるjQueryのバージョン1.xは古いと思って独自にfunction.phpを修正して2.xや3.xなどを読み込んでいるサイトがあるがサイト内のバグの元になりやすいため、やめたほうが良い。
- [Excelシートのテキストの改行に関数でHTMLのbrタグを付ける方法](https://iwb.jp/excel-sheet-add-html-break-tag/) - ExcelはSUBSTITUTE関数で置換できるので改行のCHAR(10)を"" & CHAR(10)に置換すれば改行にbrタグを追加することができる。しかし、同じシート内に置換後の内容を表示させるのは都合が悪いケースもある。そんなときはシートを新たに追加してINDIRECT関数を使用する。
- [WordPress ConsoleのWPP: OK. Execution time: x secondsを非表示にする](https://iwb.jp/wordpress-console-wpp-off/) - WordPressプラグインのWordPress Popular Postsのtracking.jsのconsoleによるものなのだが不要なので直接コメントアウト。こういうのは設定から表示・非表示を変更できるようにしてほしい。
- [WordPress twentyseventeenテーマのアイキャッチ画像の位置の変更方法](https://iwb.jp/wordpress-twentyseventeen-post-thumbnail-eyecatch/) - WordPress twentyseventeenテーマだとタイトルの上に画像が表示されてしまう。一般的なブログはタイトルのテキスト→アイキャッチ画像→記事内容の順に表示させるため、これだと都合が悪いことが多い。 
- [React Componentのライフサイクルの使い方と視覚化したサンプル](https://iwb.jp/react-component-lifecycle-howto-sample/) - Reactを使用する上で欠かせないライフサイクル。このライフサイクルを視覚化したサンプルを作成してわかりやすくしてみた。サンプルを見ると一目瞭然だが、最初に実行されるライフサイクルは以下の5つである。
- [台風一過の2019年10月13日12時現在の池袋のお店はほとんど閉店中](https://iwb.jp/typhoon-20191013-ikebukuro-store-close/) - 台風19号が関東からだいぶ離れた2019年10月13日12時現在の池袋はひさしぶりの快晴となっている。天気が良いのでランチを食べに来たのだが、現在も鉄道の運休が多く、池袋のお店はほとんど閉店中となっている。
- [firebase initで作成したprojectが一覧に表示されないときの対処法](https://iwb.jp/firebase-init-hosting-project-list-nothing/) - firebase initで｢Which Firebase CLI features do you want to setup for this folder?｣と表示された際にHostingを選択するとプロジェクトの一覧が表示されるがプロジェクトが表示されないときはfirebase use --addで手動で設定する。
- [GitHubのUNIXTIMEはY/M/Dの日時形式にスクリプトで置換すると便利](https://iwb.jp/github-unixtime-convert-to-date-javascript/) - GitHub上にはCSVやTSVファイル内に10桁のUNIXTIMEが記載されていることがあるが、人間には1577804400のような数字の日時はひと目見ただけではわからない。しかし、2020/01/01 00:00:00のような日時形式であればすぐにわかるため、ChromeのConsole上で実行することで日時形式に変換できるスクリプトを使用すると確認しやすくなり便利である。

## 固定ページ

- [お探しのページは見つかりませんでした。](https://iwb.jp/404-not-found/) - 404 Not Found The page you are looking for could not be

## カテゴリー

- [wordpress](https://iwb.jp/category/wordpress/)
- [android](https://iwb.jp/category/android/)
- [excel](https://iwb.jp/category/excel/)
- [javascript](https://iwb.jp/category/javascript/)
- [book](https://iwb.jp/category/book/)
- [google](https://iwb.jp/category/google/)
- [regexp](https://iwb.jp/category/regexp/)
- [css](https://iwb.jp/category/css/)
- [firefox](https://iwb.jp/category/firefox/)
- [html](https://iwb.jp/category/html/)
- [facebook](https://iwb.jp/category/facebook/)
- [text](https://iwb.jp/category/text/)
- [photoshop](https://iwb.jp/category/photoshop/)
- [news](https://iwb.jp/category/news/)
- [software](https://iwb.jp/category/software/)
- [electronics](https://iwb.jp/category/electronics/)
- [iPhone](https://iwb.jp/category/iphone/)
- [iPad](https://iwb.jp/category/ipad/)
- [trip](https://iwb.jp/category/trip/)
- [dreamweaver](https://iwb.jp/category/dreamweaver/)
- [image](https://iwb.jp/category/image/)
- [eclipse](https://iwb.jp/category/eclipse/)
- [ie](https://iwb.jp/category/ie/)
- [windows](https://iwb.jp/category/windows/)
- [Web制作](https://iwb.jp/category/web制作/)
- [twitter](https://iwb.jp/category/twitter-2/)
- [java](https://iwb.jp/category/java/)
- [Google Analytics](https://iwb.jp/category/google-analytics/)
- [office](https://iwb.jp/category/office/)
- [lifehack](https://iwb.jp/category/lifehack/)
- [adobe](https://iwb.jp/category/adobe/)
- [advertise](https://iwb.jp/category/advertise/)
- [アプリ](https://iwb.jp/category/アプリ/)
- [wifi](https://iwb.jp/category/wifi/)
- [git](https://iwb.jp/category/git/)
- [rss](https://iwb.jp/category/rss/)
- [flash](https://iwb.jp/category/flash/)
- [法律](https://iwb.jp/category/法律/)
- [event](https://iwb.jp/category/event/)
- [mail](https://iwb.jp/category/mail/)
- [wiki](https://iwb.jp/category/wiki/)
- [browser](https://iwb.jp/category/browser/)
- [amazon](https://iwb.jp/category/amazon/)
- [YouTube](https://iwb.jp/category/youtube/)
- [grunt](https://iwb.jp/category/grunt/)
- [chrome](https://iwb.jp/category/chrome/)
- [seo](https://iwb.jp/category/seo/)
- [AngularJS](https://iwb.jp/category/angularjs/)
- [iOS](https://iwb.jp/category/ios/)
- [anime](https://iwb.jp/category/anime/)
- [sublime](https://iwb.jp/category/sublime/)
- [editor](https://iwb.jp/category/editor/)
- [accessibility](https://iwb.jp/category/accessibility/)
- [debug](https://iwb.jp/category/debug/)
- [english](https://iwb.jp/category/english/)
- [hatebu](https://iwb.jp/category/hatebu/)
- [typescript](https://iwb.jp/category/typescript/)
- [security](https://iwb.jp/category/security/)
- [smartphone](https://iwb.jp/category/smartphone/)
- [font](https://iwb.jp/category/font/)
- [php](https://iwb.jp/category/php/)
- [game](https://iwb.jp/category/game/)
- [Safari](https://iwb.jp/category/safari/)
- [france](https://iwb.jp/category/france/)
- [atom](https://iwb.jp/category/atom/)
- [kindle](https://iwb.jp/category/kindle/)
- [illustrator](https://iwb.jp/category/illustrator/)
- [Edge](https://iwb.jp/category/edge/)
- [vba](https://iwb.jp/category/vba/)
- [food](https://iwb.jp/category/food/)
- [open2ch](https://iwb.jp/category/open2ch/)
- [server](https://iwb.jp/category/server/)
- [Google Apps Script](https://iwb.jp/category/google-apps-script/)
- [Googleスプレッドシート](https://iwb.jp/category/googleスプレッドシート/)
- [Vagrant](https://iwb.jp/category/vagrant/)
- [nodejs](https://iwb.jp/category/nodejs/)
- [gulp](https://iwb.jp/category/gulp/)
- [React](https://iwb.jp/category/react/)
- [movie](https://iwb.jp/category/movie/)
- [shellscript](https://iwb.jp/category/shellscript/)
- [Perl](https://iwb.jp/category/perl/)
- [economy](https://iwb.jp/category/economy/)
- [webpack](https://iwb.jp/category/webpack/)
- [textlint](https://iwb.jp/category/textlint/)
- [Vue](https://iwb.jp/category/vue/)
- [Puppeteer](https://iwb.jp/category/puppeteer/)
- [Adobe XD](https://iwb.jp/category/adobe-xd/)
- [VSCode](https://iwb.jp/category/vscode/)
- [Firebase](https://iwb.jp/category/firebase/)
- [mac](https://iwb.jp/category/mac/)
- [AdSense](https://iwb.jp/category/adsense/)
- [sql](https://iwb.jp/category/sql/)
- [manga](https://iwb.jp/category/manga/)
- [terminal](https://iwb.jp/category/terminal/)
- [svg](https://iwb.jp/category/svg/)
- [figma](https://iwb.jp/category/figma/)
- [Googleドキュメント](https://iwb.jp/category/googleドキュメント/)
- [vite](https://iwb.jp/category/vite/)
- [Googleフォーム](https://iwb.jp/category/googleフォーム/)
- [github](https://iwb.jp/category/github/)
- [apple](https://iwb.jp/category/apple/)
- [web service](https://iwb.jp/category/web-service/)
- [Googleカレンダー](https://iwb.jp/category/googleカレンダー/)
- [AI](https://iwb.jp/category/ai/)
- [svelte](https://iwb.jp/category/svelte/)
- [test](https://iwb.jp/category/test/)
- [ChatGPT](https://iwb.jp/category/chatgpt/)
- [vercel](https://iwb.jp/category/vercel/)
- [gmail](https://iwb.jp/category/gmail/)
- [Playwright](https://iwb.jp/category/playwright/)
- [network](https://iwb.jp/category/network/)
- [slack](https://iwb.jp/category/slack/)
- [astro](https://iwb.jp/category/astro/)
- [NextJS](https://iwb.jp/category/nextjs/)
- [X](https://iwb.jp/category/x/)
- [tailwindcss](https://iwb.jp/category/tailwindcss/)
- [docker](https://iwb.jp/category/docker/)
- [cursor](https://iwb.jp/category/cursor/)
- [zoom](https://iwb.jp/category/zoom/)
- [aws](https://iwb.jp/category/aws/)
- [stock](https://iwb.jp/category/stock/)
- [PostgreSQL](https://iwb.jp/category/postgresql/)
- [emoji](https://iwb.jp/category/emoji/)
- [Nuxt](https://iwb.jp/category/nuxt/)

## タグ

- [test](https://iwb.jp/tag/test/)