# LLMs.txt - Sitemap for AI content discovery # webfrontend.ninja > Webエンジニア向け HTML, CSS, JavaScript 情報を発信 --- ## 固定ページ - [お問い合わせ](https://webfrontend.ninja/contact/): - [プロフィール](https://webfrontend.ninja/profile/): 会社員ネットワークエンジニアから独立しウ... - [プライバシーポリシー](https://webfrontend.ninja/privacy-policy/): 個人情報の利用目的 当ブログでは、お問い... ## 投稿 - [【JavaScript】日本語の文章から単語を分割する Intl.Segmenter](https://webfrontend.ninja/js-intl-segmenter-word-japanese/): 前回の記事で日本語の文字を正しく分割する... - [【JavaScript】文字数のカウントになぜ String.length を使ってはいけないのか](https://webfrontend.ninja/js-string-length-intl-segmenter/): JavaScript で文字列の文字数を... - [【JavaScript】スペースの URL エンコードの結果は %20 と + のどちらが正解なのか](https://webfrontend.ninja/js-url-encoding-space/): クエリパラメータのエンコードとデコードに... - [【JavaScript】ブラウザーで OpenAI API のチャット (Chat Completions) のストリームを扱う方法](https://webfrontend.ninja/js-openai-chat-completions-stream/): 過去 2 回の記事では OpenAI A... - [【JavaScript】ブラウザーで OpenAI API の音声認識 (Speech to Text) でマイク音声を録音してアップロードする方法](https://webfrontend.ninja/js-openai-stt-microphone/): 前回は「ブラウザーで OpenAI の音... - [【JavaScript】ブラウザーで OpenAI の音声合成 (Text to speech) のダウンロード再生とストリーム再生する方法](https://webfrontend.ninja/js-openai-tts-stream/): いま話題の OpenAI API ですが... - [【JavaScript】Web Speech API - SpeechSynthesis (音声合成、Text-to-Speech) の使い方](https://webfrontend.ninja/js-web-speech-api-speechsynthesis/): AI の進化により音声合成の性能も向上し... - [【JavaScript】入力フォームで IME 確定時の Enter 誤判定を何とかする](https://webfrontend.ninja/js-input-ime-enter/): 近年のウェブアプリケーションでは、テキス... - [【JavaScript】データを GZIP/ZLIB/DEFLATE で圧縮そして展開する](https://webfrontend.ninja/js-gzip-zlib-deflate-compress/): ウェブブラウザの JavaScript ... - [【JavaScript】画面遷移時にビーコンをサーバーに送信する Beacon API](https://webfrontend.ninja/beacon-api/): ウェブページやウェブアプリケーションから... - [【JavaScript】User-Agent Client Hints API で端末情報を取得する](https://webfrontend.ninja/user-agent-client-hints-api/): ブラウザーがサーバーにリクエストのたびに... - [【JavaScript】文字エンコーディングの橋渡しを行う Encoding API](https://webfrontend.ninja/js-encoding-api/): 近年ウェブの世界で文字エンコーディングと... - [【JavaScript】GZIP/ZLIB/DEFLATE データをダウンロードして Compression Streams API で解凍する](https://webfrontend.ninja/js-compression-streams-api-gzip/): データの圧縮や解凍といえば ZIP や ... - [【JavaScript】Streams API を使って fetch の逐次ダウンロード & ファイル保存](https://webfrontend.ninja/js-streams-api-fetch-download-and-save/): JavaScript を使って巨大なファ... - [【HTML】折り畳みウィジェットやアコーディオンを作る details 要素と summary 要素のマークアップからスタイリング](https://webfrontend.ninja/html-details-summary-element/): Bootstrap などの CSS フレ... - [【JavaScript】印刷のイベント - beforeprint / afterprint](https://webfrontend.ninja/js-print-events/): 誰しもウェブページを印刷することはあるの... - [【JavaScript】送信ボタンでフォームを送信したことにする requestSubmit()](https://webfrontend.ninja/js-requestsubmit/): JavaScript からフォームを送信... - [【JavaScript】フォームのカレンダーやファイルピッカーを JavaScript から呼び出す showPicker()](https://webfrontend.ninja/js-showpicker/): フォームの date 型の input ... - [【JavaScript】初心者向けオブジェクトのコピー詳説：シャローコピー、ディープコピー、JSON、スプレッド構文、そして structuredClone()](https://webfrontend.ninja/js-object-copy-details/): みなさんはどのように JavaScrip... - [【JavaScript】Web storage 詳説 - ストレージなのに 7 日で消える?](https://webfrontend.ninja/js-web-storage/): HTML5 という用語が流行りだしたころ... - [【JavaScript】ブラウザーでリソースをロックする Web Locks API](https://webfrontend.ninja/js-web-locks-api/): バックエンドではファイルなどのリソースの... - [【JavaScript】すべてのウィンドウにメッセージを同報する BroadcastChannel](https://webfrontend.ninja/js-broadcast-channel/): 前回の記事で「クロスオリジンのウィンドウ... - [【JavaScript】クロスオリジンのウィンドウ間でメッセージを送受信する Cross-document messaging](https://webfrontend.ninja/js-cross-document-messaging/): ウェブサイトやウェブアプリを開発している... - [【JavaScript】File System Access API – ドラッグ&ドロップ 編](https://webfrontend.ninja/js-file-system-access-api-drop-and-drop/): File System Access A... - [【JavaScript】File System Access API – ディレクトリを開く方法 showDirectoryPicker() 編](https://webfrontend.ninja/js-show-directory-picker/): File System Access A... - [【JavaScript】File System Access API – ファイルピッカーを表示してファイルを保存する方法 showSaveFilePicker() 編](https://webfrontend.ninja/js-show-save-file-picker/): ファイル保存ダイアログを表示し、ユーザー... - [【JavaScript】File System Access API - 仮想的なファイルシステム Origin Private File System 編](https://webfrontend.ninja/js-file-system-access-origin-private-file-system/): JavaScript で扱えるストレージ... - [【HTML】inert 属性でコンテンツをまとめて不活性にする](https://webfrontend.ninja/html-inert-attribute/): 特定のコンテンツに注目させたいときや、何... - [【HTML】徹底解説 dialog 要素 - マークアップからスタイリング、JavaScript による操作まで](https://webfrontend.ninja/html-dialog-element/): dialog 要素はかなり以前より HT... - [【JavaScript】File System Access API – ファイルピッカーを表示して選択ファイルを読み取る方法 showOpenFilePicker() 編](https://webfrontend.ninja/js-show-open-file-picker/): ファイルピッカーを表示し、ユーザーに P... - [【JavaScript】DOM の変化を監視する MutationObserver](https://webfrontend.ninja/js-mutationobserver/): ウェブサイトやウェブアプリを開発する際に... - [【JavaScript】HTML 要素の寸法の取得方法まとめ](https://webfrontend.ninja/js-how-to-get-dimension-of-html-element/): JavaScript から HTML 要... - [【JavaScript】HTML 要素のリサイズを検知する Resize Observer](https://webfrontend.ninja/js-resize-observer/): ウェブブラウザーのウィンドウをリサイズす... - [【JavaScript】配列のすべての値をまとめて評価、Array.every() と Array.some()](https://webfrontend.ninja/js-array-every-some/): 配列の値すべてが条件を満たしているか、配... - [【JavaScript】オブジェクトのプロパティの存在をチェックする 4 つの方法と特性の違い](https://webfrontend.ninja/js-check-property-in-object/): 　オブジェクトの中に特定のプロパティが存... - [【JavaScript】とても便利なてんてんてん「...」スプレッド構文](https://webfrontend.ninja/js-spread-syntax/): 最近は JavaScript コードのサ... - [【CSS】独自プロパティを作る CSS Properties and Values API (Houdini)](https://webfrontend.ninja/css-properties-and-values-api/): CSS といえばブラウザーが用意したプロ... - [【CSS】CSS 変数 (CSS カスタムプロパティ) でサイト制作と運用が楽になる](https://webfrontend.ninja/css-custom-properties/): CSS を書いていると、同じ値を何度も書... - [【CSS】CSS 界隈で大きな話題になっている Houdini って何？](https://webfrontend.ninja/css-houdini/): ウェブのフロントエンドを仕事にしている方... - [【HTML】mark 要素がハイライトは間違い？](https://webfrontend.ninja/html-mark-element/): HTML5 から新たに導入された mar... - [【JavaScript】マウス、タッチ、ペンを包括的に扱う PointerEvent](https://webfrontend.ninja/js-pointer-events/): 近年の入力デバイスにはマウスやタッチのほ... - [【HTML】inputmode 属性と enterkeyhint 属性で適切な入力モードとアクションラベルに変更してイラっとさせない仮想キーボードを](https://webfrontend.ninja/html-inputmode-enterkeyhint-attributes/): スマートフォンでテキストボックスに数字を... - [【HTML】下線じゃない、u 要素の本当の意味は？](https://webfrontend.ninja/html-u-element/): u 要素の u は下線を意味する und... - [【HTML】b 要素、知名度は高いですが本当に正しく使っていますか？](https://webfrontend.ninja/html-b-element/): b 要素は HTML 要素の中で知名度が... - [【HTML】time 要素で表現できる日付と時刻](https://webfrontend.ninja/html-time-element/): time 要素で日時を表現できますが、そ... - [【HTML】data 要素や data-* 属性を使ってスクリプト用のデータを埋め込む](https://webfrontend.ninja/html-data-element-custom-data-attribute/): よく HTML の中にデータを埋め込んで... - [【JavaScript】Web Share API でリンクやファイルを共有](https://webfrontend.ninja/js-web-share-api/): スマートフォンのネイティブアプリでは当た... - [【JavaScript】const では無理、freeze() や seal() を使ってオブジェクトを変更不可に](https://webfrontend.ninja/js-freeze-seal/): 近年の JavaScript (ECMA... - [【JavaScript】数値のゼロ埋めや文字列の桁数合わせを一発で実現する padStart() と padEnd() メソッド](https://webfrontend.ninja/js-pad-start-end/): 月や日のように 1 桁の場合は先頭を 0... - [【JavaScript】生成データをファイルとして保存（ダウンロード）させる方法](https://webfrontend.ninja/js-download-blob/): JavaScript で何かしらのデータ... - [【HTML】ping 属性でリンクがどれだけ踏まれたかを計測する](https://webfrontend.ninja/html-ping-attribute/): ページにはさまざまなリンクが張られていま... - [【HTML】i 要素はイタリックではなくアイコン？](https://webfrontend.ninja/html-i-element/): 以前は i 要素は斜体を表現するために使... - [【JavaScript】クリップボードに文字列や画像データをコピーする方法](https://webfrontend.ninja/js-clipboard-write/): さまざまなウェブサイトでクリップボードに... - [【JavaScript】クリップボードの内容を読み取る方法](https://webfrontend.ninja/js-clipboard-read/): クリップボードにコピーする方法はネットに... - [Chromium と WebKit でシェア 9 割以上に、ブラウザーシェアの激動の 10 年史をダラダラと語る](https://webfrontend.ninja/browser-10-years-history-chromium-webkit/): ウェブ開発者であれば、だれもが気にせざる... - [【JavaScript】at() で配列の最後の要素の読み取る](https://webfrontend.ninja/js-array-at-method/): 配列の最後の要素はどうやって読み取ります... - [【JavaScript】click と touchend の両方のイベントリスナーのうち touchend だけを実行する](https://webfrontend.ninja/js-click-and-touchend-events/): デスクトップ向けのブラウザーとスマートフ... - [【JavaScript】Safari だけじゃないオーディオ再生の制約と再生開始遅延の解決方法](https://webfrontend.ninja/js-audio-autoplay-policy-and-delay/): オーディオの自動再生に大きな制約があると... - [【HTML】main 要素 - 最新の仕様に準拠してますか？](https://webfrontend.ninja/html-main-element/): main 要素はページの主要なコンテンツ... - [【HTML】address 要素の正しい使いかた](https://webfrontend.ninja/html-address-element/): address 要素は住所に使う、という... - [【JavaScript】配列のソートを極める - sort() から localeCompare() まで](https://webfrontend.ninja/js-sort-localecompare/): 配列のソートが必要になることは多いのです... - [【HTML】古くて新しい menu 要素をもう一度見つめなおす](https://webfrontend.ninja/html-menu-element/): HTML の menu 要素って使ったこ... - [【HTML】知っておきたいリンクタイプ nofollow - SEO にとって本当に重要？](https://webfrontend.ninja/html-link-type-nofollow/): 数あるリンクタイプの中でも、とりわけ n... - [【JavaScript】配列から要素を検索する 6 つの方法](https://webfrontend.ninja/js-find/): JavaScript で配列から特定の条... - [【HTML】meta 要素の theme-color を使ってテーマカラーでブランディング](https://webfrontend.ninja/html-meta-theme-color/): スマートフォンのブラウザーのアドレスバー... - [【CSS】list-style-type プロパティで Safari 15 に加わった新たなリストマーカー、漢数字も](https://webfrontend.ninja/css-list-style-type/): Safari 15 に、list-sty... - [【CSS】aspect-ratio プロパティで縦横比を固定する](https://webfrontend.ninja/css-aspect-ratio/): ＨTML 要素の縦横比を CSS だけで... - [【HTML】hr 要素は罫線じゃない？](https://webfrontend.ninja/html-hr-element/): hr 要素を罫線と思っているあなた！知識... - [【HTML】footer 要素は最初と最後に2つ配置しても良い？](https://webfrontend.ninja/html-footer-element/): 一般的に footer 要素はページの最... - [【HTML】自動的に目次が作れるアウトライン](https://webfrontend.ninja/html-outline/): HTML 仕様では、HTML マークアッ... - [【HTML】SEO で重要視される見出し要素 h1 ～ h6](https://webfrontend.ninja/html-h1-h6-element/): 恐らくウェブ業界でない人の間ですら知られ... - [【HTML】nav 要素は無くても構わないコンテンツ？](https://webfrontend.ninja/html-nav-element/): セクションを表す要素には article... - [【HTML】section 要素を見つめなおす](https://webfrontend.ninja/html-section-element/): HTML5 で新たに導入された sect... - [【HTML】aside 要素の使いどころ](https://webfrontend.ninja/html-aside-element/): 分かったようで分からない、そんなもやもや... - [【JavaScript】express ライクな URL ルーティング URLPattern](https://webfrontend.ninja/js-urlpattern/): URL ルーティングといえば主にサーバー... - [【JavaScript】画面の色を抜き出す Eye Dropper API](https://webfrontend.ninja/js-eye-dropper-api/): 先日 Chrome 95 がリリースされ... - [【HTML】article と section はどう使い分ければ良い？](https://webfrontend.ninja/html-article-element/): HTML を学び始めた初心者から、HTM... - [【JavaScript】画像の本来のサイズを取得する naturalWidth と naturalHeight プロパティ](https://webfrontend.ninja/js-naturalwidth-naturalheight/): img 要素の画像がどれくらいのサイズで... - [【HTML】使い道が分かりづらい cite 要素](https://webfrontend.ninja/html-cite-element/): HTML の要素には cite と qu... - [【JavaScript】console.log() だけじゃない、便利機能満載の Console オブジェクト](https://webfrontend.ninja/js-console-object/): JavaScript のデバッグに大活躍... - [【HTML】ここは自動翻訳しないで translate 属性](https://webfrontend.ninja/html-translate-attribute/): 海外のウェブサイトを読みたいとき、Goo... - [【JavaScript】sleep/wait する方法](https://webfrontend.ninja/js-node-sleep/): 記事タイトルの通り、JavaScript... - [新画像フォーマット AVIF はもう使えるのか？](https://webfrontend.ninja/html-image-avif/): 2021 年 10 月にリリースされた ... - [【JavaScript】現在日時をエレガントに出力する方法](https://webfrontend.ninja/js-date-time/): JavaScript でウェブアプリ開発... - [【HTML】2023年の今、hgroup は廃止？それとも使えるの？](https://webfrontend.ninja/html-hgroup-element/): ウェブ業界にいる人であれば知っている人は... - [【CSS】相対的長さの単位：em や rem たち](https://webfrontend.ninja/css-em-rem/): CSS で、フォントやマージンなど、さま... - [【JavaScript】ランダムな文字列を生成する](https://webfrontend.ninja/js-random-string/): これまで何度書いたか思えていないほど頻繁... - [【HTML】th 要素の scope 属性の使い方](https://webfrontend.ninja/html-th-scope-attribute/): HTML で表を作るとき、th 要素の ... - [【CSS】チェックボックスとラジオボタンの色を変える方法 - accent-color プロパティ](https://webfrontend.ninja/css-accent-color/): フォーム要素を CSS でデコレーション... - [【JavaScript】一発で数値に桁区切りのカンマを入れる方法 - toLocaleString() と Intl.NumberFormat](https://webfrontend.ninja/js-tolocalestring-numberformat/): 数値に桁区切りのカンマを入れるシーンは多... - [はじめまして](https://webfrontend.ninja/greeting/): このブログ管理人でウェブエンジニアのni... --- # # Detailed Content ## 固定ページ ### お問い合わせ - Published: 2021-10-03 - Modified: 2021-10-25 - URL: https://webfrontend.ninja/contact/ --- ### プロフィール - Published: 2021-10-03 - Modified: 2022-12-30 - URL: https://webfrontend.ninja/profile/ 会社員ネットワークエンジニアから独立しウェブ業界に入ったフリーランス（法人化しているのでフリーランスとは言わないかも）のウェブエンジニアです。 経歴 大学を卒業後、新卒で某大手通信事業者に入社し、ネットワークエンジニアとして働いていました。その後、ネット系の会社に移り、サーバーエンジニアを経て企画部門にてネット系サービスの企画開発を行っていました。 その後、会社を辞め独立し、現在はウェブ系のシステム開発受託や技術支援を中心に活動しています。 スキル 会社員時代はデータセンターでサーバーの構築や保... --- ### プライバシーポリシー - Published: 2021-10-03 - Modified: 2021-10-16 - URL: https://webfrontend.ninja/privacy-policy/ 個人情報の利用目的 当ブログでは、お問い合わせや記事へのコメントの際、名前やメールアドレス等の個人情報を入力いただく場合がございます。取得した個人情報は、お問い合わせに対する回答や必要な情報を電子メールなどをでご連絡する場合に利用させていただくものであり、これらの目的以外では利用いたしません。 広告について 当ブログでは、第三者配信の広告サービス（Googleアドセンス、A8. net）を利用しており、ユーザーの興味に応じた商品やサービスの広告を表示するため、クッキー（Cookie）を使用してお... --- ## 投稿 ### 【JavaScript】日本語の文章から単語を分割する Intl.Segmenter - Published: 2024-10-07 - Modified: 2024-10-07 - URL: https://webfrontend.ninja/js-intl-segmenter-word-japanese/ - カテゴリー: JavaScript 前回の記事で日本語の文字を正しく分割する方法に Intl. Segmenter を使いましたが、Intl. Segmenter は文章を単語で分割することもできます。以前は形態素解析のオンラインサービスに問い合わせないと実現できなかった日本語の単語の分割ですが、現在はローカルで実現できるようになりました。しかし、私たちが期待する形態素解析をベースにした単語分割とは少し事情が違うようです。今回のそのあたりの事情を深堀してみたいと思います。 日本語の単語分割の実行例 では JavaScript で日... --- ### 【JavaScript】文字数のカウントになぜ String.length を使ってはいけないのか - Published: 2024-09-28 - Modified: 2024-09-28 - URL: https://webfrontend.ninja/js-string-length-intl-segmenter/ - カテゴリー: JavaScript JavaScript で文字列の文字数をカウントするには String. length を使うことが多いのではないでしょうか。しかし、扱う文字によっては適切な文字数を得られない場合があります。今回は、そもそも String. length は何をしているのかを紐解き、そして適切な文字数を得るための方法について探っていきます。 文字数のカウントには Intl. Segmenter を使いましょう 先に結論を書いておきます。文字数のカウントには Intl. Segmenter を使いましょう。con... --- ### 【JavaScript】スペースの URL エンコードの結果は %20 と + のどちらが正解なのか - Published: 2024-09-27 - Modified: 2024-09-28 - URL: https://webfrontend.ninja/js-url-encoding-space/ - カテゴリー: JavaScript クエリパラメータのエンコードとデコードには encodeURIComponent 関数と decodeURIComponent 関数を使うことが多いのではないしょうか。一方で URL インタフェースや URLSearchParams インタフェースでも URL エンコードおよびデコードが可能です。筆者自身、これらのエンコード結果の違いにモヤモヤしていました。今回、その詳細を調べましたので、これらの具体的な違い、歴史的経緯、そして、どちらを使うべきか、についてまとめてみたいと思います。 パラメータ... --- ### 【JavaScript】ブラウザーで OpenAI API のチャット (Chat Completions) のストリームを扱う方法 - Published: 2023-12-25 - Modified: 2023-12-25 - URL: https://webfrontend.ninja/js-openai-chat-completions-stream/ - カテゴリー: JavaScript 過去 2 回の記事では OpenAI API の音声認識 (Speech to Text) と音声合成 (Text to Speech) を扱いましたが、今回は ChatGPT でもおなじみのチャット (Chat Completions) を扱います。単にメッセージを送って応答を得るだけなら簡単です。ここではストリームを使って ChatGPT のようにリアルタイムに文字ごとに応答を得る方法にチャレンジします。 OpenAI API のチャット (Chat Completions) の概要 Ope... --- ### 【JavaScript】ブラウザーで OpenAI API の音声認識 (Speech to Text) でマイク音声を録音してアップロードする方法 - Published: 2023-12-21 - Modified: 2023-12-22 - URL: https://webfrontend.ninja/js-openai-stt-microphone/ - カテゴリー: JavaScript 前回は「ブラウザーで OpenAI の音声合成 (Text to speech) のダウンロード再生とストリーム再生する方法」を解説しましたが、今回はその逆で、音声ファイルをアップロード、または、マイクから録音した音声をそのままアップロードして、OpenAI API の音声認識 (Speech to Text) を使ってテキスト化する方法を解説します。 OpenAI API の音声認識 (Speech to Text) の概要 OpenAI の 音声認識の REST API の詳細は、API r... --- ### 【JavaScript】ブラウザーで OpenAI の音声合成 (Text to speech) のダウンロード再生とストリーム再生する方法 - Published: 2023-12-13 - Modified: 2023-12-14 - URL: https://webfrontend.ninja/js-openai-tts-stream/ - カテゴリー: JavaScript いま話題の OpenAI API ですが、数多くラインナップされた API の中に音声合成 (Text to speech) の API が用意されています。今回は、ブラウザーだけを使って JavaScript で OpenAI の音声合成を実現する方法を解説します。音声合成の結果となる音声ファイルをダウンロードしてから再生する方法だけでなく、ストリームでダウンロードしながらすぐに再生を開始する方法も解説します。長いテキストの場合、ストリームでの再生は効果絶大です。 なお、本記事は、OpenAI... --- ### 【JavaScript】Web Speech API - SpeechSynthesis (音声合成、Text-to-Speech) の使い方 - Published: 2023-12-11 - Modified: 2023-12-12 - URL: https://webfrontend.ninja/js-web-speech-api-speechsynthesis/ - カテゴリー: JavaScript AI の進化により音声合成の性能も向上し、さまざまなシーンで使われるようになってきました。多くは有料ですが、音声合成のクラウドサービスも多岐にわたります。しかし、近年のすべてのメジャーブラウザーで JavaScript で音声合成できることをご存じでしょうか。しかも無料です。今回は音声合成を担う Web Speech API について、ハマリどころも含めて詳しく解説します。 Web Speech API とは Web Speech API は音声認識 (Speech Recognition) と... --- ### 【JavaScript】入力フォームで IME 確定時の Enter 誤判定を何とかする - Published: 2023-12-09 - Modified: 2023-12-09 - URL: https://webfrontend.ninja/js-input-ime-enter/ - カテゴリー: JavaScript 近年のウェブアプリケーションでは、テキストボックスに文字を入力して Enter キーを押すことでアクションを起こすようなシーンが増えてきました。フォーム送信ではないため、JavaScript で制御する必要がありますが、いざ自分で実装しようとすると Mac で期待通りに動作しないという問題に直面します。今回は、この原因と対策について解説していきます。 結論だけ見たい方は「解決方法」のセクションからご覧ください。 問題となる現象とは まずは問題となる現象を確認してみましょう。テキストボックスで E... --- ### 【JavaScript】データを GZIP/ZLIB/DEFLATE で圧縮そして展開する - Published: 2023-12-03 - Modified: 2023-12-09 - URL: https://webfrontend.ninja/js-gzip-zlib-deflate-compress/ - カテゴリー: JavaScript ウェブブラウザの JavaScript でデータの圧縮と展開を行う場合、JavaScript ライブラリの「pako」が選択肢に上がることが多いでしょう。しかし、現在はどのブラウザでも Compression Streams API がサポートされており、JavaScript ライブラリの力を借りなくても、データの圧縮と展開を行うことができます。今回は、Compression Streams API を使ったデータの圧縮と展開の方法について解説します。 Compression Streams A... --- ### 【JavaScript】画面遷移時にビーコンをサーバーに送信する Beacon API - Published: 2023-08-25 - Modified: 2023-12-02 - URL: https://webfrontend.ninja/beacon-api/ - カテゴリー: JavaScript ウェブページやウェブアプリケーションからサーバーに対して何かしらのイベント情報を送信したいと考えたことはないでしょうか。それ自体は簡単時に実現可能なのですが、ページがアンロードされるタイミングでサーバーに情報を送りたい場合は、実は簡単ではありません。確実にイベントを送信できるか、利用者に対してパフォーマンスを悪化させないか、など課題があります。 ページアンロード時に確実に、かつ、ユーザー体験を損なわずにサーバーにイベントを送信するのが Beacon API です。今回は、この Beacon AP... --- ### 【JavaScript】User-Agent Client Hints API で端末情報を取得する - Published: 2023-08-24 - Modified: 2023-12-02 - URL: https://webfrontend.ninja/user-agent-client-hints-api/ - カテゴリー: JavaScript ブラウザーがサーバーにリクエストのたびに送信している User-Agent 文字列は、ユーザーの PC やスマートフォンの環境を知る上では必要不可欠な情報でした。ところが、昨今のプライバシー保護の強化や、ユーザートラッキングを禁止する潮流から、User-Agent 文字列から詳細な情報が削除されるようになりました。今回は、それを解決する User-Agent Client Hints API について詳しく解説します。 User-Agent 削減の背景 この User-Agent 文字列から情報... --- ### 【JavaScript】文字エンコーディングの橋渡しを行う Encoding API - Published: 2023-07-03 - Modified: 2023-12-02 - URL: https://webfrontend.ninja/js-encoding-api/ - カテゴリー: JavaScript 近年ウェブの世界で文字エンコーディングといえば UTF-8 一択となりました。そのためウェブ開発、とりわけフロンドエンドにおいて文字コードを意識することはかなり減ったのではないでしょうか。しかし、たとえば HTTP などの通信によって外部からテキストデータを入出力したり、ストレージにテキストファイルを読み書きしたりするなど、デスクトップアプリに近いことができるようになった昨今、文字エンコーディングを意識せざるを得ないシーンが増えてきました。今回は、その文字エンコーディングを扱う Encoding... --- ### 【JavaScript】GZIP/ZLIB/DEFLATE データをダウンロードして Compression Streams API で解凍する - Published: 2023-06-30 - Modified: 2023-12-02 - URL: https://webfrontend.ninja/js-compression-streams-api-gzip/ - カテゴリー: JavaScript データの圧縮や解凍といえば ZIP や 7Z などのファイルフォーマットを思い浮かべるのではないでしょうか。ファイルではありませんが、通信データの圧縮と解凍は HTTP 通信でも行われており、ウェブブラウザーはデータの圧縮解凍の機能を内部的に備えています。この内部機能を JavaScript からでも利用できるようにしたのが Compression Streams API です。 Compression Streams API はデータの圧縮と解凍の両方の機能を備えていますが、この記事では GZ... --- ### 【JavaScript】Streams API を使って fetch の逐次ダウンロード & ファイル保存 - Published: 2023-06-28 - Modified: 2023-12-02 - URL: https://webfrontend.ninja/js-streams-api-fetch-download-and-save/ - カテゴリー: JavaScript JavaScript を使って巨大なファイルをダウンロードして、それをストレージに保存したいと考えたことはないでしょうか。これまで通り、fetch を使って一気に巨大ファイルをダウンロードできなくはないのですが、ローカルマシンのリソースを無駄に消費してしまいそうです。まだダウンロード処理と保存処理の時間軸が分かれてしまい、トータルで時間がかかってしまいそうです。できればダウンロードしたデータを少しずつ逐次保存する方がローカルマシンに優しいだけでなくパフォーマンスも良いのではないでしょうか。今回は... --- ### 【HTML】折り畳みウィジェットやアコーディオンを作る details 要素と summary 要素のマークアップからスタイリング - Published: 2023-01-11 - Modified: 2023-12-12 - URL: https://webfrontend.ninja/html-details-summary-element/ - カテゴリー: CSS, HTML, JavaScript Bootstrap などの CSS フレームワークではおなじみの Collapse (コラプス) ですが、いまでは HTML のマークアップだけでも実現できるのはご存じでしょうか。Collapse とは、タイトル部分をクリックすることで、そのコンテンツの表示・非表示を切り替える仕組みで、折り畳みウィジェットとも呼ばれます。 さらに、CSS フレームワークではおなじみの Accordion (アコーディオン) も HTML のマークアップだけで実現できるようになりました。 今回は折り畳みウィジェッ... --- ### 【JavaScript】印刷のイベント - beforeprint / afterprint - Published: 2023-01-01 - Modified: 2023-01-01 - URL: https://webfrontend.ninja/js-print-events/ - カテゴリー: JavaScript 誰しもウェブページを印刷することはあるのではないでしょうか。ウェブサイト制作において印刷を意識するとしたら、メディアクエリを使って印刷用のスタイルを用意することでしょうか。しかし、JavaScript においても印刷に関連するイベントが用意されています。今回は、beforeprint イベントと afterprint イベントについて紹介します。 イベントの説明 beforeprint イベントと afterprint イベントは window オブジェクトで発生します。これらのイベントを初めて... --- ### 【JavaScript】送信ボタンでフォームを送信したことにする requestSubmit() - Published: 2022-12-31 - Modified: 2022-12-31 - URL: https://webfrontend.ninja/js-requestsubmit/ - カテゴリー: JavaScript JavaScript からフォームを送信する方法として form 要素の DOM オブジェクトの submit メソッドが良く使われてきましたが、新たに requestSubmit メソッドが加わりました。requestSubmit メソッドを使うことで、HTML マークアップの恩恵を受けながらも柔軟なフォームを作ることができます。今回は submit メソッドと requestSubmit メソッドの違い、そして具体的な requestSubmit メソッドの使い方を解説します。 reques... --- ### 【JavaScript】フォームのカレンダーやファイルピッカーを JavaScript から呼び出す showPicker() - Published: 2022-12-31 - Modified: 2022-12-31 - URL: https://webfrontend.ninja/js-showpicker/ - カテゴリー: JavaScript フォームの date 型の input 要素をクリックするとカレンダーが表示されます。file 型の input 要素をクリックするとファイルピッカーが表示されます。しかし、ユーザーに別の場所をクリックさせて、これらピッカーを JavaScript で動的に表示させたいこともあるでしょう。今回は、それを実現する showPicker を紹介します。 なぜ必要なのか？ そもそも、なぜ JavaScript からピッカーを動的に表示させたいのかと疑問に思う人もいるでしょう。ファイルピッカーを例に簡単... --- ### 【JavaScript】初心者向けオブジェクトのコピー詳説：シャローコピー、ディープコピー、JSON、スプレッド構文、そして structuredClone() - Published: 2022-12-30 - Modified: 2022-12-30 - URL: https://webfrontend.ninja/js-object-copy-details/ - カテゴリー: JavaScript みなさんはどのように JavaScript でオブジェクトをコピーしていますでしょうか。オブジェクトのコピーと言っても、シャローコピーとディープコピーがあります。この違いを認識せずにコピーすると、バグの原因にもなりかねません。今回は JavaScript 初心者向けに、値のコピーとは何か、シャローコピーとディープコピーの意味、そして、それらコピーの方法まで深く紹介していこうと思います。 プリミティブ値とオブジェクトの代入の違い シャローコピーとディープコピーの違いを理解するには、ECMAScri... --- ### 【JavaScript】Web storage 詳説 - ストレージなのに 7 日で消える? - Published: 2022-08-25 - Modified: 2022-08-25 - URL: https://webfrontend.ninja/js-web-storage/ - カテゴリー: JavaScript HTML5 という用語が流行りだしたころからブラウザーで利用可能な Web storage ですが、フロントエンドのエンジニアであれば何度も使ったことがあるでしょう。しかしこの Web storage も深堀すると意外な機能や制約があったりします。今回はあまり話題にならない細かい機能も含めてできる限り詳しく解説します。 Web storage のストレージの種類と使いどころ Web storageには、ローカルストレージとセッションストレージという 2 つのタイプのストレージが用意されています。... --- ### 【JavaScript】ブラウザーでリソースをロックする Web Locks API - Published: 2022-07-18 - Modified: 2022-07-18 - URL: https://webfrontend.ninja/js-web-locks-api/ - カテゴリー: JavaScript バックエンドではファイルなどのリソースのロック処理は当たり前のように行われていますが、これまでフロントエンドの世界ではほとんど気にすることもなかったのではないでしょうか。しかし、ウェブアプリケーションが複雑・高度化するに伴い、フロントエンドでもリソースのロックの必要性が高まっています。今回はブラウザーでリソースをロックする仕組みを提供する Web Locks API を解説します。 バックエンドでのリソースのロックとは ここで言うリソースとは、ファイルやデータベースのレコードなど、複数のプロセス... --- ### 【JavaScript】すべてのウィンドウにメッセージを同報する BroadcastChannel - Published: 2022-07-16 - Modified: 2022-07-17 - URL: https://webfrontend.ninja/js-broadcast-channel/ - カテゴリー: JavaScript 前回の記事で「クロスオリジンのウィンドウ間でメッセージを送受信する Cross-document messaging」を紹介しましたが、これは親ウィンドウと子ウィンドウの 1 対 1 の通信チャネルでした。もし子ウィンドウが複数存在する場合、同じメッセージをまとめて送りたい場合もあるでしょう。今回はすべてのタブやウィンドウに同じメッセージを一斉に送信する BroadcastChannel について紹介します。 BroadcastChannel の概要 BroadcastChannel は、同じオ... --- ### 【JavaScript】クロスオリジンのウィンドウ間でメッセージを送受信する Cross-document messaging - Published: 2022-07-14 - Modified: 2022-07-14 - URL: https://webfrontend.ninja/js-cross-document-messaging/ - カテゴリー: JavaScript ウェブサイトやウェブアプリを開発していると、新たにブラウザーウィンドウやタブを開いて、元のタブと連携したいと考えたことはないでしょうか。または、HTML の iframe 要素を使って組み込んだコンテンツと連携したいと考えたこともあるでしょう。今回は、このようなコンテンツの連携をクロスオリジンで実現するために必要な Cross-document messaging について解説します。 クロスオリジンのウィンドウの制約 近年のブラウザーは、セキュリティーの観点から、異なるサイト（正確に言うとクロ... --- ### 【JavaScript】File System Access API – ドラッグ&ドロップ 編 - Published: 2022-06-12 - Modified: 2022-06-12 - URL: https://webfrontend.ninja/js-file-system-access-api-drop-and-drop/ - カテゴリー: JavaScript File System Access API は、ファイル選択ダイアログやディレクトリ選択ダイアログだけでなく、ドラッグ&ドロップでもファイルやディレクトリを受け入れることができます。以前からドラッグ&ドロップでファイルを読み取ることができましたが、File System Access API のドラッグ&ドロップであればファイル編集やディレクトリ操作まで扱うことができます。 今回は、File System Access API のドラッグ&ドロップによるファイルやディレクトリの操作に加え、旧来... --- ### 【JavaScript】File System Access API – ディレクトリを開く方法 showDirectoryPicker() 編 - Published: 2022-06-12 - Modified: 2022-06-12 - URL: https://webfrontend.ninja/js-show-directory-picker/ - カテゴリー: JavaScript File System Access API にはファイルを開く showOpenFilePicker メソッド、ファイル保存ダイアログを表示する showSaveFilePicker メソッドが用意されています。一つのファイルの読み書きであればこれらで十分です。しかしディレクトリを開いて、その下部のファイルやディレクトリに自由にアクセスしたい場合もあるでしょう。その場合、1 つのファイルにアクセスするたびにファイルピッカーが開くのは煩わしいと感じるはずです。それを解決するのが showDire... --- ### 【JavaScript】File System Access API – ファイルピッカーを表示してファイルを保存する方法 showSaveFilePicker() 編 - Published: 2022-06-11 - Modified: 2022-06-11 - URL: https://webfrontend.ninja/js-show-save-file-picker/ - カテゴリー: JavaScript ファイル保存ダイアログを表示し、ユーザーに PC やスマートフォン内にファイルを保存するには 2 つの方法あがります。今回は旧来より使われてきた を使う方法と、モダンな showSaveFilePicker を使った方法をそれぞれ解説し、それらの違いについて解説していきます。 を使う方法 a 要素の download 属性を使う方法は、これまで最もポピュラーなファイル保存方法でした。詳細は記事「生成データをファイルとして保存（ダウンロード）させる方法」をご覧頂きたいのですが、ここでは簡単にその方... --- ### 【JavaScript】File System Access API - 仮想的なファイルシステム Origin Private File System 編 - Published: 2022-06-09 - Modified: 2022-06-11 - URL: https://webfrontend.ninja/js-file-system-access-origin-private-file-system/ - カテゴリー: JavaScript JavaScript で扱えるストレージといえば Web Storage や Indexed Database API がありますが、ファイルやディレクトリという概念を使ってデータを保存したい場合もあるでしょう。以前に W3C にて File API: Directories and System という API が策定され、仮想的なファイルシステムを扱えるようになりました。Chrome に実装されましたが、仕様は廃止となり、その利用は非推奨になっています。 そして現在、W3C にて File ... --- ### 【HTML】inert 属性でコンテンツをまとめて不活性にする - Published: 2022-06-01 - Modified: 2024-05-19 - URL: https://webfrontend.ninja/html-inert-attribute/ - カテゴリー: HTML 特定のコンテンツに注目させたいときや、何かしらの処理を実行中の場合など、それ以外のコンテンツをユーザーが操作できないようにしたいと考えたことはないでしょうか。 たとえばフォームの送信ボタンを押したら、フォームコントロールを無効にして操作できないようにする、というシーンを思い浮かべると思いますが、さらにもう一歩進んで、クリックも無効にし、テキストも選択できないようにするにはどうすれば良いでしょうか。そのような状態を「不活性」と呼びますが、それを実現するのが inert 属性です。 不活性（iner... --- ### 【HTML】徹底解説 dialog 要素 - マークアップからスタイリング、JavaScript による操作まで - Published: 2022-06-01 - Modified: 2022-07-28 - URL: https://webfrontend.ninja/html-dialog-element/ - カテゴリー: CSS, HTML, JavaScript dialog 要素はかなり以前より HTML5 仕様に存在していましたが、Safari がサポートしていなかったことでなかなか現場で使われませんでした。しかし、2022 年 3 月の Safari 15. 4 に dialog 要素が実装されたことで、ようやく現場でも使える要素になりました。 今回は dialog 要素のマークアップにとどまらず、CSS によるスタイリング、そして、JavaScript によるダイアログの操作まで徹底解説します。 dialog 要素とは dialog 要素はダイア... --- ### 【JavaScript】File System Access API – ファイルピッカーを表示して選択ファイルを読み取る方法 showOpenFilePicker() 編 - Published: 2022-05-29 - Modified: 2022-06-11 - URL: https://webfrontend.ninja/js-show-open-file-picker/ - カテゴリー: JavaScript ファイルピッカーを表示し、ユーザーに PC やスマートフォン内のファイルを選択させ、選択されたファイルの中身を読み取るには 2 つの方法があります。今回は、旧来から使われてきた を使う方法と、モダンな showOpenFilePicker を使った方法をそれぞれ解説し、それらの違いについて解説していきます。 を使う方法 PC やスマートフォン内のファイルを読み取るために以前より使われてきた を使う方法について、おさらいしましょう。まずは HTML のマークアップをご覧ください。 ファイルをユーザ... --- ### 【JavaScript】DOM の変化を監視する MutationObserver - Published: 2022-05-28 - Modified: 2022-05-28 - URL: https://webfrontend.ninja/js-mutationobserver/ - カテゴリー: JavaScript ウェブサイトやウェブアプリを開発する際に、自身が書いた JavaScript で HTML ドキュメントの DOM ツリーの操作を行うこともあれば、読み込んだ JavaScript ライブラリーが DOM ツリーの操作を行うこともあります。そのような状況の中、DOM ツリーの操作を監視する仕組みが欲しいと感じたこともあるのではないでしょうか。今回は DOM ツリーの変化を監視する MutationObserver の詳しい使い方について解説します。 MutationObserver の使い方 ま... --- ### 【JavaScript】HTML 要素の寸法の取得方法まとめ - Published: 2022-05-27 - Modified: 2022-05-27 - URL: https://webfrontend.ninja/js-how-to-get-dimension-of-html-element/ - カテゴリー: JavaScript JavaScript から HTML 要素の横幅と高さを取得する方法はいくつか存在します。しかし、それぞれの方法で取得する寸法が微妙に違います。今回は HTML 要素の寸法を取得する方法を一気にまとめて紹介します。 CSS ボックスモデル HTML 要素の寸法を扱ううえで CSS ボックスモデルの理解は欠かせません。まずは CSS ボックスモデルの概要を説明します。 たとえば div 要素があったとしましょう。この div 要素が表現する矩形の寸法とはどこを指すでしょうか。div 要素のような ... --- ### 【JavaScript】HTML 要素のリサイズを検知する Resize Observer - Published: 2022-05-23 - Modified: 2022-05-27 - URL: https://webfrontend.ninja/js-resize-observer/ - カテゴリー: JavaScript ウェブブラウザーのウィンドウをリサイズするなどして、コンテンツのサイズが変わることがあります。そのリサイズに合わせて何かを実行したいというニーズは多いのではないでしょうか。今回は、そのニーズに応える Resize Observer について解説します。 Resize Observer とは まずは、Resize Observer の簡単なサンプルコードをご覧ください。ブラウザーのウィンドウの幅を動かすと div 要素の横幅も変わります。それに合わせて、div 要素の背景色が変化しますが、その色は... --- ### 【JavaScript】配列のすべての値をまとめて評価、Array.every() と Array.some() - Published: 2022-05-21 - Modified: 2022-05-21 - URL: https://webfrontend.ninja/js-array-every-some/ - カテゴリー: JavaScript 配列の値すべてが条件を満たしているか、配列の値のいずれか 1 つでも条件を満たしているか、といった処理はときどき遭遇します。しかし、頻繁に遭遇しないせいか、すぐに忘れてしまうのが Array. every と Array. some です。今回は私の忘備録として、これら 2 つの使き方をまとめてみました。 すべての値が条件に一致するかを評価する Array. every every メソッドは、配列の中の値すべてが指定した条件を満たしているなら true を、そうでなければ false を返しま... --- ### 【JavaScript】オブジェクトのプロパティの存在をチェックする 4 つの方法と特性の違い - Published: 2022-05-20 - Modified: 2022-05-20 - URL: https://webfrontend.ninja/js-check-property-in-object/ - カテゴリー: JavaScript 　オブジェクトの中に特定のプロパティが存在するかをチェックする方法はいくつかあります。しかし、どの方法を使うか迷うことはないでしょうか。今回はそれらの方法を一通り整理し、それぞれの特性についてまとめてみます。 値を直接評価する方法 このようなコードを書いたことがあるのではないでしょうか。 const obj = { prop1: 1, prop2: 2 }; if(obj. prop1) { console. log(obj. prop1); } 非常にシンプルかつ短いコードになるため、私も頻繁... --- ### 【JavaScript】とても便利なてんてんてん「...」スプレッド構文 - Published: 2022-05-19 - Modified: 2022-05-20 - URL: https://webfrontend.ninja/js-spread-syntax/ - カテゴリー: JavaScript 最近は JavaScript コードのサンプルで「... 」が配列の中で使われているのをよく見ます。中には関数の引数の指定で見ることもあります。私が初めて見たときには何かの省略記号かな？なんて思いましたが、実はとても便利な JavaScript 構文なんです。今回は、この「てんてんてん」正しくは「スプレッド構文」について紹介します。 スプレッド構文の概要 スプレッド構文は配列の定義や、関数の引数の指定の際に使われることが多い構文ですが、主な役割は配列などをリストに spread (スプレッド) ... --- ### 【CSS】独自プロパティを作る CSS Properties and Values API (Houdini) - Published: 2022-02-15 - Modified: 2022-02-15 - URL: https://webfrontend.ninja/css-properties-and-values-api/ - カテゴリー: CSS CSS といえばブラウザーが用意したプロパティを使って書くものですが、W3C で策定している「CSS Properties and Values API」を使うことで、独自の CSS プロパティを作ることができます。今回はこの CSS Properties and Values API について詳しく解説します。 CSS Properties and Values API とは CSS Properties and Values API は、新たな CSS プロパティを登録する API のことで... --- ### 【CSS】CSS 変数 (CSS カスタムプロパティ) でサイト制作と運用が楽になる - Published: 2022-02-13 - Modified: 2022-02-13 - URL: https://webfrontend.ninja/css-custom-properties/ - カテゴリー: CSS CSS を書いていると、同じ値を何度も書いていることに気づきます。とりわけ色の値では顕著ではないでしょうか。プログラマーであれば同じ値を何度も使うなら定数として変数に値を格納して利用するのが当たり前です。 そのようなニーズに応え、W3C では「CSS Custom Properties for Cascading Variables Module Level 1」という仕様の中で CSS 変数 (CSS カスタムプロパティ) を新たに作り上げました。現在では Internet Explorer ... --- ### 【CSS】CSS 界隈で大きな話題になっている Houdini って何？ - Published: 2022-01-29 - Modified: 2022-01-30 - URL: https://webfrontend.ninja/css-houdini/ - カテゴリー: CSS, JavaScript ウェブのフロントエンドを仕事にしている方で業界のトレンドに敏感な方であれば Houdini を耳にしたことがあるのではないでしょうか。英語の記事を見ると Next Big Thing なんて言われるほどです。今回は、そんな世界中で話題の Houdini について概要を解説します。 Houdini の始まり 国際標準化団体 W3C では、Houdini は私が知っているだけでも 2015 年にはすでに大きな話題になっていました。ということは、さらに前から Houdini は誕生していたことになりま... --- ### 【HTML】mark 要素がハイライトは間違い？ - Published: 2022-01-29 - Modified: 2022-01-29 - URL: https://webfrontend.ninja/html-mark-element/ - カテゴリー: HTML HTML5 から新たに導入された mark 要素ですが、ネットでは「ハイライト」「目立たせる」「マーカー」と説明している記事を良く見かけます。見た目の表現としては間違っていませんが、要素の説明としては適切とは言えません。今回は今なお誤解が多い mark 要素を解説します。 mark 要素の定義と誤解の理由 mark 要素とは、参照を目的としてマーク付けやハイライトされたテキストを表します。ここで注意してほしいのは、マーク付けやハイライトすることが mark 要素の目的ではなく、参照を表すことが ... --- ### 【JavaScript】マウス、タッチ、ペンを包括的に扱う PointerEvent - Published: 2022-01-26 - Modified: 2022-01-26 - URL: https://webfrontend.ninja/js-pointer-events/ - カテゴリー: JavaScript 近年の入力デバイスにはマウスやタッチのほかペンも存在します。JavaScript で入力を扱うために、マウスであれば MouseEvent、タッチであれば TouchEvent を使ってきました。しかしペンに特化したイベントがありません。 今やペンは当たり前の入力デバイスとなり、MouseEvent や TouchEvent だけでは対処しきれなくなりました。今回はそのような状況の中で誕生した新たな API である PointerEvent を紹介します。 MouseEvent と TouchE... --- ### 【HTML】inputmode 属性と enterkeyhint 属性で適切な入力モードとアクションラベルに変更してイラっとさせない仮想キーボードを - Published: 2022-01-19 - Modified: 2022-01-19 - URL: https://webfrontend.ninja/html-inputmode-enterkeyhint-attributes/ - カテゴリー: HTML スマートフォンでテキストボックスに数字を入力しなければいけないのに、仮想キーボードに数字が無くてイラっとしたことはないでしょうか。このように入力文字に適切でない仮想キーボードが表示されてしまうウェブサイトは数多く存在します。 今回は入力モードを便利にする inputmode 属性と、エンターキーのアクションラベルを指定する enterkeyhint 属性を解説します。 仮想キーボード inputmode 属性と enterkeyhint 属性を解説する前に、仮想キーボードの入力モードとエンターキ... --- ### 【HTML】下線じゃない、u 要素の本当の意味は？ - Published: 2022-01-15 - Modified: 2022-01-29 - URL: https://webfrontend.ninja/html-u-element/ - カテゴリー: HTML u 要素の u は下線を意味する underline 由来の名前のため、どうしても下線を引くという意味で認知している人が多いのではないでしょうか。もちろん、HTML5 以降、すべての HTML 要素からスタイリングという目的が排除されたことは知っていることでしょう。 では、改めて u 要素の意味は？と問われると、意外に答えられないのではないでしょうか。今回は u 要素の歴史と、現在の u 要素の意味と使い方について解説していきます。 u 要素の誕生と廃止と復活 u 要素は HTML が誕生したこ... --- ### 【HTML】b 要素、知名度は高いですが本当に正しく使っていますか？ - Published: 2022-01-10 - Modified: 2022-01-29 - URL: https://webfrontend.ninja/html-b-element/ - カテゴリー: HTML b 要素は HTML 要素の中で知名度が高い要素の一つですが、正しく使ってますか？HTML4 以前の時代のように、太字にしたいなら何でも b 要素を使えば良いという考え方ではいけません。今回は b 要素の正しい用法・用量を解説していきます。 b 要素の定義 b 要素をネットで検索すると、いろいろな説明が見つかり混乱するのではないでしょうか。 HTML4 時代は太字にするというスタイリング目的の要素でしたが、HTML5 以降はスタイリング目的の用途は排除され、セマンディクス（意味）が与えられました... --- ### 【HTML】time 要素で表現できる日付と時刻 - Published: 2022-01-08 - Modified: 2022-01-08 - URL: https://webfrontend.ninja/html-time-element/ - カテゴリー: HTML time 要素で日時を表現できますが、そのルールは少し複雑です。今回は time 要素の日付フォーマットの詳細と、JavaScript の Date オブジェクトの関係を解説します。 time 要素の基本 time 要素は日時を表す要素です。また、マシンリーダブルな値を埋め込む点が大きな特徴です。 2021年1月8日 17時05分 マシンリーダブルな値は datetime 属性にセットします。しかし、time 要素の中身が、datetime 属性に指定するにふさわしいフォーマットの文字列であれば... --- ### 【HTML】data 要素や data-* 属性を使ってスクリプト用のデータを埋め込む - Published: 2022-01-08 - Modified: 2022-01-09 - URL: https://webfrontend.ninja/html-data-element-custom-data-attribute/ - カテゴリー: HTML よく HTML の中にデータを埋め込んでおきたいことはあります。しかし、そのデータをどのように HTML に埋め込むのが良いのでしょうか。多くのシーンでは、data 要素や >壱万円 value 属性は必須です。この例では「壱万円」が 10000 を表すことを data 要素で表現しています。ただし、これはページ制作者が一方的に「表現」してみたに過ぎず、第三者が理解できるものではありません。仮にロボットがこのページを読んだとしても無視されるだけです。 もっとも役に立つ使い方は、data 要素のコ... --- ### 【JavaScript】Web Share API でリンクやファイルを共有 - Published: 2022-01-07 - Modified: 2022-01-10 - URL: https://webfrontend.ninja/js-web-share-api/ - カテゴリー: JavaScript スマートフォンのネイティブアプリでは当たり前に用意されているリンクやファイルの共有機能ですが、Web Share API を使えばウェブアプリでも実現可能です。リンクやテキスト情報だけでなく、ファイルを他のアプリに共有することが可能です。今回は Web Share API の使い方について紹介します。 サンプル 言葉で説明するより見たほうがわかりやすいと思いますので、サンプルを用意しました。このサンプルをご覧になってから以下の説明を読んでいただいたほうが良いでしょう。 Web Share API... --- ### 【JavaScript】const では無理、freeze() や seal() を使ってオブジェクトを変更不可に - Published: 2022-01-05 - Modified: 2022-01-05 - URL: https://webfrontend.ninja/js-freeze-seal/ - カテゴリー: JavaScript 近年の JavaScript (ECMAScript) では const を使って定数を定義できます。しかし、オブジェクトの中身までは保護されません。オブジェクトの中身を保護するには保護のレベルに応じて凍結または封印を行う必要があります。今回は、const の限界と凍結および封印について詳しく見ていきましょう。 const を使ってオブジェクトを定義すると... 近年は変数の定義に let や const を使うことが多くなったのではないでしょうか。少なくとも筆者はもう var を使うことは皆無... --- ### 【JavaScript】数値のゼロ埋めや文字列の桁数合わせを一発で実現する padStart() と padEnd() メソッド - Published: 2021-12-08 - Modified: 2021-12-08 - URL: https://webfrontend.ninja/js-pad-start-end/ - カテゴリー: JavaScript 月や日のように 1 桁の場合は先頭を 0 で埋めて "01" に変換したり、文字列の前か後ろにスペースを入れて表示桁数を合わせたいことは良くあります。今回は、こういったパディング操作を一発で叶えてくれる padStart と padEnd メソッドを解説します。 数値のゼロ埋め 数値を特定の桁数に合わせるよう先頭を 0 で埋めるために良く使われてきたのが slice メソッドを使う方法でした。これは長い間 JavaScript の世界ではイデオムとして使われてきたのではないでしょうか。 cons... --- ### 【JavaScript】生成データをファイルとして保存（ダウンロード）させる方法 - Published: 2021-11-30 - Modified: 2021-11-30 - URL: https://webfrontend.ninja/js-download-blob/ - カテゴリー: JavaScript JavaScript で何かしらのデータを生成した後、それをユーザーの PC やスマートフォンにファイルとして保存させたいときがあります。特に、CSV ファイルや JSON ファイルを保存したいケースが多いのではないでしょうか。 今回は、Chrome や Safari はもちろんのこと、スマートフォンでも生成データをファイルとしてローカルに保存する方法について解説します。 リンクをクリックしてファイルを保存する方法 a 要素のリンクをクリックすることでファイル保存させるのは比較的簡単にできます。... --- ### 【HTML】ping 属性でリンクがどれだけ踏まれたかを計測する - Published: 2021-11-30 - Modified: 2022-07-03 - URL: https://webfrontend.ninja/html-ping-attribute/ - カテゴリー: HTML ページにはさまざまなリンクが張られていますが、そのリンクがどれだけ踏まれたかを計測するには、リダイレクトが良く使われてきました。しかし、いまは a 要素と area 要素で ping 属性を使うことができます。 今回は、これまでのリンククリック計測の方法と、そのメリットとデメリット、そして、a 要素と area 要素で使える ping 属性の使い方について詳しく見ていきましょう。 リダイレクトによる計測方法 ping といえばネットワーク機器の死活をチェックするコマンド名を思い浮かべる人が多いで... --- ### 【HTML】i 要素はイタリックではなくアイコン？ - Published: 2021-11-28 - Modified: 2021-11-30 - URL: https://webfrontend.ninja/html-i-element/ - カテゴリー: HTML 以前は i 要素は斜体を表現するために使われてきましたが、HTML5 以降、スタイリング目的に HTML 要素を使うことは非推奨になりました。では、HTML5 以降の現在、i 要素は何を表すのでしょうか。 ときどき、i 要素はアイコンに使うと説明しているウェブサイトを見かけます。古くから HTML をたしなんでいるおじさん世代はビックリです。とはいえ、実態ではあながち間違ってはいないかもしれません。 WHATWG HTML 仕様の解釈から、現在の使われ方まで、詳しく見ていきましょう。 日本語では... --- ### 【JavaScript】クリップボードに文字列や画像データをコピーする方法 - Published: 2021-11-21 - Modified: 2021-11-22 - URL: https://webfrontend.ninja/js-clipboard-write/ - カテゴリー: JavaScript さまざまなウェブサイトでクリップボードにテキストをコピーする機能が使われています。しかし、クリップボードにはプレーンテキストだけでなくスタイル付きのテキストや画像データも書き込むことができます。また、クリップボードにはプレーンテキストとスタイル付きテキストといった具合に複数の種類のデータを同時にコピーすることも可能です。 今回は、JavaScript を使ってプレーンテキスト、スタイル付きテキスト、画像データをクリップボードにコピーする方法を詳しく解説します。 プレーンテキストをクリップボードに... --- ### 【JavaScript】クリップボードの内容を読み取る方法 - Published: 2021-11-20 - Modified: 2021-11-20 - URL: https://webfrontend.ninja/js-clipboard-read/ - カテゴリー: JavaScript クリップボードにコピーする方法はネットに数多く見つかりますが、クリップボードの内容を読み取る方法は意外に少ないと思ったことはないでしょうか。実は、過去からいくつかのブラウザーにクリップボードの読み取り機能が実装されたことがありました。ネットを検索するといくつかの方法が見つかりますが、動かないコードもちらほら。 実はクリップボードを扱う JavaScript API の仕様が過去に何度か作られては廃止となったこともあり、ブラウザーの実装もそれに巻き込まれてきたのが実情です。そしてネットの情報も、古... --- ### Chromium と WebKit でシェア 9 割以上に、ブラウザーシェアの激動の 10 年史をダラダラと語る - Published: 2021-11-17 - Modified: 2021-11-17 - URL: https://webfrontend.ninja/browser-10-years-history-chromium-webkit/ - カテゴリー: コラム ウェブ開発者であれば、だれもが気にせざるを得ないのがブラウザーのシェアです。いまや Chrome と Safari でほとんどを占めてしまいますが、過去 10 年を振り返ると今とは全く様相が異なります。 今回は、シェア調査でおなじみの StatCounter の調査結果を使って過去を振り返り、そして今を見つめなおし、最後に筆者の偏見をもとに未来をダラダラと語っていきたいと思います。 過去 10 年のブラウザーのシェアの推移 まずは、今からちょうど 10 年前から現在に至るまでの日本国内におけるブ... --- ### 【JavaScript】at() で配列の最後の要素の読み取る - Published: 2021-11-14 - Modified: 2021-11-14 - URL: https://webfrontend.ninja/js-array-at-method/ - カテゴリー: JavaScript 配列の最後の要素はどうやって読み取りますか？今回は、そんな些細な話を取り上げます。 pop メソッド 配列の最後の要素を抜き出すと言ったら、最初に思いつくのは pop メソッドでしょうか。 const list = ; const last_item = list. pop; // "e" ところが、pop メソッドは元の配列の最後の要素を削除してしまいます。これが困ることもありますよね。 Array のインデックス番号指定 では、次のコードはいかがでしょう。 const list = ; co... --- ### 【JavaScript】click と touchend の両方のイベントリスナーのうち touchend だけを実行する - Published: 2021-11-14 - Modified: 2021-11-14 - URL: https://webfrontend.ninja/js-click-and-touchend-events/ - カテゴリー: JavaScript デスクトップ向けのブラウザーとスマートフォン向けのブラウザーどちらにも対応する場合、クリックとタップの両方のイベントリスナーをセットすることが良くあります。もちろん、デスクトップであればクリックのイベントリスナーのみを起動し、スマートフォンであれば タップのイベントリスナーのみを起動したいはずです。 しかし、スマートフォンではクリックとタップの両方のイベントリスナーが呼び出されてしまい困る場合があります。今回は、スマートフォンでタップのイベントリスナーだけを起動する方法について解説します。 イベ... --- ### 【JavaScript】Safari だけじゃないオーディオ再生の制約と再生開始遅延の解決方法 - Published: 2021-11-13 - Modified: 2021-11-14 - URL: https://webfrontend.ninja/js-audio-autoplay-policy-and-delay/ - カテゴリー: JavaScript オーディオの自動再生に大きな制約があるといえば、以前は iOS Safari に限った話でした。しかし、現在は PC も含め、あらゆるブラウザーでオーディオの自動再生に大きな制約があります。もし再生できたとしても、次に立ちはだかるのが再生開始遅延です。とりわけスマートフォンでタップ音や通知音を再生したい場合は違和感を感じてしまいます。 今回は、HTML マークアップおよび JavaScript によるオーディオ自動再生にどのような制約があるのか、その制約をどう解決するのか、そして、再生開始遅延を... --- ### 【HTML】main 要素 - 最新の仕様に準拠してますか？ - Published: 2021-11-08 - Modified: 2021-11-14 - URL: https://webfrontend.ninja/html-main-element/ - カテゴリー: HTML main 要素はページの主要なコンテンツを表しますが、ネットで調べると、細かい点では記事によって言っていることが異なっていることにお気づきでしょうか。それは、W3C HTML5 仕様がバージョンアップされる過程、そして、W3C HTML5 仕様が終了し、WAHTWG HTML 仕様が最新となった現在に至るまでに、main 要素の仕様が変貌したからです。今回は、過去の仕様のおさらいしつつ、最終的な現在の正しい仕様について解説します。 main 要素の使い方 main 要素の意味については、HTML... --- ### 【HTML】address 要素の正しい使いかた - Published: 2021-11-07 - Modified: 2021-11-14 - URL: https://webfrontend.ninja/html-address-element/ - カテゴリー: HTML address 要素は住所に使う、という誤解はかなり昔からありました。実は、address 要素が誕生したときから住所という用途は規定されたことはありません。現在の address 要素は、当初と比べて、より実用的になりました。今回は、address 要素の正しい使い方を見ていきましょう。 address 要素の使いどころ address 要素は、コンテンツに関する連絡先情報です。具体的にはメールアドレス、著者に関連するウェブページへのリンク、電話番号などです。address 要素は foote... --- ### 【JavaScript】配列のソートを極める - sort() から localeCompare() まで - Published: 2021-11-06 - Modified: 2021-11-14 - URL: https://webfrontend.ninja/js-sort-localecompare/ - カテゴリー: JavaScript 配列のソートが必要になることは多いのですが、コードの書き方を意外に忘れてしまいます。また、実は非常に不効率なソートを行っている可能性もあります。今回は、sort メソッドの基本的な使い方から、localeCompare メソッドを使った高度な並べ替えまで、配列の様々なソートのケースを網羅的に見ていきます。 sort メソッドの基本 まずは、もっともオーソドックスな sort メソッドの基本的な使い方から見ていきましょう。次のサンプルコードは誰もが期待する通りの結果になります。 const lis... --- ### 【HTML】古くて新しい menu 要素をもう一度見つめなおす - Published: 2021-11-05 - Modified: 2021-11-14 - URL: https://webfrontend.ninja/html-menu-element/ - カテゴリー: HTML HTML の menu 要素って使ったことありますか？恐らくほとんどの人は使ったことないのではないでしょうか。実は、menu 要素は誕生してから波乱万丈な人生を歩んでおり、menu 要素を使ってよいのかすら良くわからない存在になっています。今回は、その menu 要素の歴史と今を解説します。これであなたは menu 要素を使いたくなるでしょう。 menu 要素の誕生 menu 要素は HTML が誕生したときにはすでに存在しており、ul 属性と同じリストを表す要素でした。 項目1 項目2 項目3... --- ### 【HTML】知っておきたいリンクタイプ nofollow - SEO にとって本当に重要？ - Published: 2021-11-03 - Modified: 2021-11-06 - URL: https://webfrontend.ninja/html-link-type-nofollow/ - カテゴリー: HTML 数あるリンクタイプの中でも、とりわけ nofollow は SEO と絡めて語られることが多いのではないでしょうか。そのせいもあってか、nofollow にまつわる都市伝説も多いように感じます。また、nofollow の知識が曖昧のまま使っているサイト運営者も多いのではないでしょうか。 今回は、nofollow の誤解、生い立ちから現在に至るまでの歴史、そして、今はどうなのか、について詳しく解説します。 nofollow の誤解 nofollow をつけたリンクの場合、リンク先に Google ... --- ### 【JavaScript】配列から要素を検索する 6 つの方法 - Published: 2021-10-31 - Modified: 2021-11-06 - URL: https://webfrontend.ninja/js-find/ - カテゴリー: JavaScript JavaScript で配列から特定の条件を満たす要素が存在するかをチェックしたり、該当の要素を抜き出すといった操作は頻繁に行われます。JavaScript には、配列から要素を発見するためのメソッドがいくつか用意されています。ここでは 8 つのメソッドをピックアップし、それぞれの特徴を解説したうえで、どういったシーンでどのメソッドを使うのが適切なのかを考察していきましょう。 配列から要素を発見するメソッド まずは、JavaScript で配列から要素を発見する Array オブジェクトの 6 ... --- ### 【HTML】meta 要素の theme-color を使ってテーマカラーでブランディング - Published: 2021-10-31 - Modified: 2021-11-06 - URL: https://webfrontend.ninja/html-meta-theme-color/ - カテゴリー: HTML スマートフォンのブラウザーのアドレスバーなどの領域に色がついているウェブサイトを見たことはないでしょうか。とりわけ、Android を使っている方に多かったのではないでしょうか。 HTML にたった一行加えるだけで、テーマカラーを設定してブランディングすることができます。Safari 15 からテーマカラーをサポートされており、iOS でもテーマカラーが利用可能です。 テーマカラーの設定方法 まずはテーマカラーが設定されていないページを iOS の Safari で表示したときの状態を見てみまし... --- ### 【CSS】list-style-type プロパティで Safari 15 に加わった新たなリストマーカー、漢数字も - Published: 2021-10-30 - Modified: 2021-11-14 - URL: https://webfrontend.ninja/css-list-style-type/ - カテゴリー: CSS Safari 15 に、list-style-type プロパティに指定可能なリストマーカーが新たにいくつか追加されました。日本語に関係するマーカーもあり重宝しそうです。今回は追加されたマーカーのいくつかを紹介します。 list-style-type プロパティのおさらい まずは、CSS の list-style-type プロパティを簡単に解説します。 list-style-type プロパティは ul 要素や ol 要素でマークアップしたリストコンテンツの各項目の先頭に表示するマーカーを指定... --- ### 【CSS】aspect-ratio プロパティで縦横比を固定する - Published: 2021-10-29 - Modified: 2021-11-14 - URL: https://webfrontend.ninja/css-aspect-ratio/ - カテゴリー: CSS ＨTML 要素の縦横比を CSS だけで固定したいときってありませんか？レスポンシブウェブデザインが主流になった現在ならなおさらです。aspect-ratio プロパティを使えば簡単に実現できます。SEO 界隈でも話題になっている CLS（Cumulative Layout Shift）対策にも役に立ちます。今回は aspect-ratio プロパティの使い方について解説します。 使い方 具体的な使い方を見た方が手っ取り早く理解できますので、まずは次の HTML サンプルをご覧ください。 あいう... --- ### 【HTML】hr 要素は罫線じゃない？ - Published: 2021-10-27 - Modified: 2021-11-14 - URL: https://webfrontend.ninja/html-hr-element/ - カテゴリー: HTML hr 要素を罫線と思っているあなた！知識をアップデートしないといけません。でも、hr 要素って便利ですよね。簡単に罫線を描けますからね。しかし、もしあなたがウェブ業界で仕事しているなら、そんなこと言ってはいけません。筆者も今なお罫線に hr 要素を使いたくなる誘惑に襲われるときがあります。古参の人ほどそうかもしれませんね。今回は hr 要素の昔と今を比較してみましょう。 退化した hr 要素の歴史 若い人は興味ないかもしれませんが、ちょっと昔話から始めさせてください。hr 要素はかなり以前から存... --- ### 【HTML】footer 要素は最初と最後に2つ配置しても良い？ - Published: 2021-10-26 - Modified: 2023-08-23 - URL: https://webfrontend.ninja/html-footer-element/ - カテゴリー: HTML 一般的に footer 要素はページの最後に 1 つだけ配置することが多いのではないでしょうか。しかし、必ずしもそうでなければいけないわけではありません。意外にも常識とは違うマークアップも許されており、逆にそのほうが適切な場合もあるのです。今回は、これまで疑問もなく使いこなせているようだった footer 要素の意外な性質に迫りたいと思います。 footer 要素の定義 まずは footer 要素の仕様上の定義から見ていきましょう。footer 要素は、誰もがフッターと聞いて想像するコンテンツの... --- ### 【HTML】自動的に目次が作れるアウトライン - Published: 2021-10-24 - Modified: 2023-08-28 - URL: https://webfrontend.ninja/html-outline/ - カテゴリー: HTML HTML 仕様では、HTML マークアップから目次（アウトライン）を作るルールが決められています。それをアウトラインアルゴリズムと呼びます。以前は section 要素などのセクショニング要素、h1 ～ h6 要素や hgroup 要素といった見出し要素を駆使してアウトラインが形成されましたが、実は、そのアルゴリズムは 2022 年 7 月に大幅に変更されました。ここでは、すでにネット上でも語りつくされている旧来のアルゴリズムと比較しながら最新のルールを詳しく解説していきます。 見出しレベル ア... --- ### 【HTML】SEO で重要視される見出し要素 h1 ～ h6 - Published: 2021-10-24 - Modified: 2023-08-22 - URL: https://webfrontend.ninja/html-h1-h6-element/ - カテゴリー: HTML 恐らくウェブ業界でない人の間ですら知られているもっとも有名な HTML 要素といえば、見出し要素、つまり h1 ～ h6 要素でしょう。とりわけ h1 要素は SEO に密接に関わっており、サイト運営者にとっては気になって仕方がない要素の一つでしょう。 SEO の話はネットで星の数ほど語られていますが、ここでは HTML 仕様の視点から見出し要素の詳細を紹介し、そして、特に SEO で注目される h1 要素にまつわる疑問を考察していきましょう。 見出し要素とは もう説明する必要もありませんが、h... --- ### 【HTML】nav 要素は無くても構わないコンテンツ？ - Published: 2021-10-23 - Modified: 2021-11-14 - URL: https://webfrontend.ninja/html-nav-element/ - カテゴリー: HTML セクションを表す要素には article 要素、section 要素、aside 要素、nav 要素の 4 つの要素がありますが、この中で最も用途が分かりやすいのは nav 要素ではないでしょうか。しかし nav 要素は生い立ちを知ればもう少し奥が深い要素です。今回は nav 要素の詳細に迫ってみたいと思います。 nav 要素の定義 nav 要素は、ご存知の通り、ナビゲーションリンクのセクションのことですね。そのリンク先は他のサイト、他のページ、そして同じページの特定の箇所だったりします。 一番... --- ### 【HTML】section 要素を見つめなおす - Published: 2021-10-23 - Modified: 2023-08-22 - URL: https://webfrontend.ninja/html-section-element/ - カテゴリー: HTML HTML5 で新たに導入された section 要素、みなさんは適切に使いこなせているでしょうか。いまでは、section 要素は当たり前のように使われ、さまざまなネット記事に section 要素の説明を見つけることができますので、誤解はかなり減ったのではないでしょうか。今回は、改めて section 要素について見つめなおしてみようと思います。 section 要素とは section 要素とは何かと聞かれれば、誰もが「一般的なセクション」と答えるでしょう。ではセクションとは何かと聞かれたら... --- ### 【HTML】aside 要素の使いどころ - Published: 2021-10-22 - Modified: 2021-11-14 - URL: https://webfrontend.ninja/html-aside-element/ - カテゴリー: HTML 分かったようで分からない、そんなもやもやする HTML 要素の一つに aside 要素があるのではないでしょうか。その元凶の一つに「サイドバー」という言葉が挙げられます。ここでは aside 要素の定義とその使いどころについて深掘りしてみましょう。 aside 要素の定義 WHATWG HTML 仕様の aside 要素の定義を見てみましょう。（日本語訳は筆者） The aside element represents a section of a page that consists of c... --- ### 【JavaScript】express ライクな URL ルーティング URLPattern - Published: 2021-10-22 - Modified: 2022-10-26 - URL: https://webfrontend.ninja/js-urlpattern/ - カテゴリー: JavaScript URL ルーティングといえば主にサーバーサイドの話ですが、node の express といったフレームワークではおなじみでしょう。この express のような URL ルーティングをブラウザーで動作する JavaScript の API として提供するのが URLPattern です。 node の express といったサーバーサイドに詳しくない方には分かりにくいですよね。URLPattern を使うと、とても分かりやすいコードで、URL が期待通りのパターンかどうかを評価したり、URL... --- ### 【JavaScript】画面の色を抜き出す Eye Dropper API - Published: 2021-10-21 - Modified: 2021-11-14 - URL: https://webfrontend.ninja/js-eye-dropper-api/ - カテゴリー: JavaScript 先日 Chrome 95 がリリースされました。いつもながら、様々な機能が追加されたわけですが、その中に Eye Dropper API という気になる JavaScript API がありましたので、紹介したいと思います。 Eye Dropper とは 一般的に Eye Dropper という用語はあまりなじみはないですよね。カラーピッカーと言えば分かりやすいでしょうか。ただ、パレットから色を選択する UI ではなく、虫眼鏡のような領域が出て、それを自由に動かせて、画面上の色を拾う UI にな... --- ### 【HTML】article と section はどう使い分ければ良い？ - Published: 2021-10-20 - Modified: 2021-11-14 - URL: https://webfrontend.ninja/html-article-element/ - カテゴリー: HTML HTML を学び始めた初心者から、HTML4 時代から知識をアップデートしようとした古参まで、最新の HTML を学ぶと出くわすのが、article 要素と section 要素はどのように使い分けるのか？という疑問でしょう。 このネタは、ネットで数えきれないほどのウェブ技術系ブログの記事で取り上げられています。しかし、それらを読んでスッキリした人は少ないのではないでしょうか。そこで多分に漏れず当ブログでもチャレンジしてみたいと思います。 多くのブログで語られていること 筆者も article ... --- ### 【JavaScript】画像の本来のサイズを取得する naturalWidth と naturalHeight プロパティ - Published: 2021-10-18 - Modified: 2021-11-14 - URL: https://webfrontend.ninja/js-naturalwidth-naturalheight/ - カテゴリー: JavaScript img 要素の画像がどれくらいのサイズでレンダリングされているのかを JavaScript から取得することは多いと思いますが、ときには画像ファイルの本来の幅と高さを知りたい場合もあるでしょう。ここでは img 要素の DOM オブジェクトの naturalWidth と naturalHeight プロパティを試してみましょう。 naturalWidth と naturalHeight の仕様 naturalWidth と naturalHeight プロパティは、img 要素の DOM オブ... --- ### 【HTML】使い道が分かりづらい cite 要素 - Published: 2021-10-17 - Modified: 2021-11-14 - URL: https://webfrontend.ninja/html-cite-element/ - カテゴリー: HTML HTML の要素には cite と quote がありますよね。日本語にするとどちらも「引用」なので混乱します。とりわけ cite 要素は使い道が分かりづらく、使ったことがない人も多いのではないでしょうか。ここでは cite 要素の仕様が決まるまでの経緯やセマンティクスについて深掘りしていきましょう。これで cite 要素を使いこなすことができるようになります。 辞書的な意味が混乱のもと？ まずは cite と quote の英語の辞書的な意味の違いを見てみましょう。英和辞典（英辞郎 on th... --- ### 【JavaScript】console.log() だけじゃない、便利機能満載の Console オブジェクト - Published: 2021-10-17 - Modified: 2021-11-14 - URL: https://webfrontend.ninja/js-console-object/ - カテゴリー: JavaScript JavaScript のデバッグに大活躍の Console オブジェクトですが、普段は console. log を最も使うのではないでしょうか。Console オブジェクトには console. log 以外にも様々な便利メソッドが用意されています。ここでは、そのいくつかをピックアップして紹介します。 console. log の引数は一つだけじゃない console. log にはメッセージだけを引数に渡す使い方が最も一般的だと思いますが、console. log メソッドに複数の引数を与え... --- ### 【HTML】ここは自動翻訳しないで translate 属性 - Published: 2021-10-16 - Modified: 2021-11-14 - URL: https://webfrontend.ninja/html-translate-attribute/ - カテゴリー: HTML 海外のウェブサイトを読みたいとき、Google 翻訳を活用した人は多いのではないでしょうか。筆者は、英語なら何とか読めたとしても、それ以外の言語だとチンプンカンプンです。 逆に、あなたのウェブサイトも海外の人たちから Google 翻訳を経由して読まれているかもしれませんね。ところが自動翻訳は一つ大きな問題があります。それは自動翻訳してほしくないところまで無理やり翻訳してしまう点です。今回は、その問題を解決する translate 属性に注目したいと思います。 自動翻訳でどこが問題になる？ 日本... --- ### 【JavaScript】sleep/wait する方法 - Published: 2021-10-15 - Modified: 2021-11-14 - URL: https://webfrontend.ninja/js-node-sleep/ - カテゴリー: JavaScript 記事タイトルの通り、JavaScript という非同期な世界で sleep する方法を考えてみます。もちろん、寝たいわけではなくて、待たせたいわけですよ。なので、wait させたい、とも言えますね。 旧来より JavaScript の世界で指定秒数だけ待たせたい場合は setTimeout を使ってきました。しかし非同期の処理をシーケンシャルに実行しなければならないシーンが増えた近年では、setTimeout のコールバック関数方式ではコードの見通しが悪く、できる限り使いたくないというのが本音で... --- ### 新画像フォーマット AVIF はもう使えるのか？ - Published: 2021-10-15 - Modified: 2022-10-26 - URL: https://webfrontend.ninja/html-image-avif/ - カテゴリー: HTML 2021 年 10 月にリリースされた Firefox 93 に気になる機能追加がありました。それは画像フォーマット AVIF のサポートです。そして 2022 年 9 月にリリースされた Safari 16 にも AVIF がサポートされました。AVIF の普及はいよいよでしょうか？ AVIF って何？ AVIF とは何か？についてはネット上で語りつくされていますが、ここでは簡単にまとめておきましょう。 まず AVIF とは画像フォーマットのことです。JPEG や GIF といった類です。近年... --- ### 【JavaScript】現在日時をエレガントに出力する方法 - Published: 2021-10-11 - Modified: 2021-12-09 - URL: https://webfrontend.ninja/js-date-time/ - カテゴリー: JavaScript JavaScript でウェブアプリ開発をしていて避けられないのが日時の扱いでしょう。とりわけ日時を画面に表示する処理で、まいどまいど同じようなコードを書くのが面倒でしかたないと感じるのは私だけではないでしょう。今回は、今後、私がコピペで楽するために、現在の日時の文字列（ここでは "YYYY-MM-DD hh:mm:ss"）を生成するコードを書いておこうと思います。 一番オーソドックスな方法（Internet Explorer 11 対応） 面倒だけれども、Internet Explorer 1... --- ### 【HTML】2023年の今、hgroup は廃止？それとも使えるの？ - Published: 2021-10-10 - Modified: 2023-08-22 - URL: https://webfrontend.ninja/html-hgroup-element/ - カテゴリー: HTML ウェブ業界にいる人であれば知っている人は多いでしょうが、かつて HTML(5) の仕様は W3C 版と WHATWG 版とで分裂していた時期がありました。仕様が分裂していた時期、hgroup 要素の存続が非常に微妙になっていました。なぜなら、hgroup 要素は W3C では廃止になった一方で、WHATWG では存続していたからです。hgroup 要素を使って良いのか悪いのか、使うべきか使わざるべきか、W3C を信じるべきか WHATWG を信じるべきか、悩ましい時期でした。 そんな不安定な時代... --- ### 【CSS】相対的長さの単位：em や rem たち - Published: 2021-10-07 - Modified: 2021-11-06 - URL: https://webfrontend.ninja/css-em-rem/ - カテゴリー: CSS CSS で、フォントやマージンなど、さまざまな大きさや長さを指定しますが、CSS では様々な単位が定義されています。今回は、それら単位のうち、em や rem などの相対的長さの単位について見ていきましょう。 相対的長さの定義 CSS の長さの単位は W3C CSS Values and Units Module Level 3 という仕様書の 5. 1. Relative Lengths という章で規定されています。仕様では相対的長さの単位として em, ex, ch, rem, vw, vh... --- ### 【JavaScript】ランダムな文字列を生成する - Published: 2021-10-06 - Modified: 2021-11-06 - URL: https://webfrontend.ninja/js-random-string/ - カテゴリー: JavaScript これまで何度書いたか思えていないほど頻繁に必要であったにもかかわらず、毎度、ゼロから考えてコードを書いていた処理、それがランダムな文字列の生成。 主にバックエンドを node. js で開発するときに良く必要となるわけですが、ゼロから考えてコードを書くと、そこそこ時間が取れられるので、コピペですぐに使えるよう、また、カスタマイズしやすい形で記事化しておきます。皆様にも少しでもお役に立てれば幸いです。 Math. random を使う方法 かなり古いブラウザーでも動作する最もオーソドックスな書き方... --- ### 【HTML】th 要素の scope 属性の使い方 - Published: 2021-10-06 - Modified: 2021-11-06 - URL: https://webfrontend.ninja/html-th-scope-attribute/ - カテゴリー: HTML HTML で表を作るとき、th 要素の scope 属性を使ったことはあるでしょうか？筆者は長年ウェブ業界にいるにもかかわらず、お恥ずかしながら一度も使ったことがありません。先日、偶然に scope 属性を目にする機会があったので、自分の勉強を兼ねて調べたことをまとめてみました。 scope 属性の値の定義 scope 属性は、簡単に言えば、その th 要素が表すヘッダーはどこからどこまでの範囲を指しているのかを指定するものです。scope 属性に指定可能な値は row、col、rowgroup... --- ### 【CSS】チェックボックスとラジオボタンの色を変える方法 - accent-color プロパティ - Published: 2021-10-04 - Modified: 2021-11-16 - URL: https://webfrontend.ninja/css-accent-color/ - カテゴリー: CSS フォーム要素を CSS でデコレーションするのは非常に難しいことは誰もが経験済みでしょう。せめてチェックボックスやラジオボタンなどの色を自由に変更できたらと思うことはよくあるのではないでしょうか。そういったケースではCSSの accent-color プロパティが便利です。 accent-color プロパティを指定できる場所は次の 4 つ： チェックボックス ラジオボタン スライダー プログレスバー 使い方と効用 チェックボックス チェックボックスの色指定 Normal Red Yellow ... --- ### 【JavaScript】一発で数値に桁区切りのカンマを入れる方法 - toLocaleString() と Intl.NumberFormat - Published: 2021-10-03 - Modified: 2021-11-06 - URL: https://webfrontend.ninja/js-tolocalestring-numberformat/ - カテゴリー: JavaScript 数値に桁区切りのカンマを入れるシーンは多いのではないでしょうか。以前は文字列操作でカンマを入れるコードを書いていましたが、今は一発でカンマを挿入できるようになりました。toLocaleString または Intl. NumberFormat を使います。 toLocaleString toLocaleString の第一引数にはロケールを指定しますが、日本語の場合は ja-JP を指定します。 const num = 1234567; console. log(num. toLocaleStr... --- ### はじめまして - Published: 2021-10-03 - Modified: 2021-11-02 - URL: https://webfrontend.ninja/greeting/ - カテゴリー: お知らせ このブログ管理人でウェブエンジニアのninjaです。 これまで何度も同じようなコードを書き続けてきたにもかかわらず、「あれってどうやって書くんだっけ」と疑問に思い何度も調べる羽目になるHTML/CSS/JavaScriptのコードスニペットを備忘録のように書き足していこうと思います。また、近年、バックエンドの開発で増えてきたnode. jsのネタも扱います。 JavaScript/node. jsネタが多くを占めると思いますが、ワンライナーやトリッキーなイディオムはできる限り避け、誰もが読みやす... ---