HTML/CSS/JavaScriptTypeScript+モノレポで型がなぜかanyになった 以下のようなディレクトリ構成で、 └📁backend └📝tsconfig.json └📝teamA.ts └📁frontend └📝tsconfig.json └📝team.type.ts └📝member.type.ts ...2023.04.282023.04.29HTML/CSS/JavaScript
HTML/CSS/JavaScriptgrid-template-columnsの違い【auto-fit、auto-fill】 デモページ(ソース) 上から順に、以下のとおりです。 grid-template-columns: repeat(3, minmax(250px, 1fr)); 絶対に3カラムになる。 grid-template-...2023.04.212023.04.23HTML/CSS/JavaScript
HTML/CSS/JavaScriptモノレポでVScodeのimport補完をうまく機能させる たとえば、以下のような構成のモノレポがあるとします。 └📁backend(たとえばNestJS) └🔵user.type.ts └📝tsconfig.json └📁frontend(たとえばNext.js) └🟣hoge.ts └📝...2023.04.112023.04.15HTML/CSS/JavaScript
HTML/CSS/JavaScript[改]Google翻訳でページを翻訳すると語順がめちゃくちゃになるのを回避するブックマークレット 以下のページ様の改良なのですが Google翻訳でページを翻訳すると語順がめちゃくちゃになるのを回避するブックマークレット | 迫真の氷結晶 こちらのページ様のブックマークレットだと、以下のようなHTMLもspanに変換されてしまい、コー...2023.04.052023.04.06HTML/CSS/JavaScript
HTML/CSS/JavaScriptTypeScriptで自作の型定義ファイルを追加する 「あんまり分かってないけどこう書いたらなぜか動いた」くらいの理解度なので ベストプラクティスではない可能性があるので注意してください。 tunnel-sshというnpmパッケージを使おうと思いました。 でも型定義ファイルが提供されていませ...2023.03.10HTML/CSS/JavaScript
HTML/CSS/JavaScriptリアルタイム通信を実現するWEB技術の違い【ポーリング、ロングポーリング、SSE、WebSocket】 リアルタイム通信を実現する方法として ポーリング ロングポーリング SSE WebSocket の4つがあるらしい。 その違いをメモ。 違い ポーリング: クライアント側が定期的に「更新されてない?」と尋ねて、それに対し...2021.10.092023.02.27HTML/CSS/JavaScript
HTML/CSS/JavaScript【違い】dns-prefetch、preconnect、prefetch、preload、prerender ブラウザがリソースを取得するまでの流れ。 -> -> -> -> 意味 dns-prefetch 「DNSの名前解決だけ先にやっとけ」な指示 preconnect 「HTTPの接続の確立までやっとけ」な指示 ...2021.08.22HTML/CSS/JavaScript
HTML/CSS/JavaScriptクリティカルCSSとは?わかりやすく 一言でいうと ページを読み込んだ際に「最初に見える部分」のCSSだけをHTMLファイルにインラインCSSとして書き込んでおいて、「最初に見える部分以外」のCSSは外部ファイルとして非同期で読み込んで高速化しようぜ!なテクニック のこ...2021.08.222021.08.23HTML/CSS/JavaScript
HTML/CSS/JavaScriptDefinitelyTypeとは?Flowtypeとの違い 違い DefinitelyType: 「いろいろなライブラリ用のTypeScriptの型定義ファイルを公開しようぜー!」なプロジェクトのこと。 またはそのプロジェクトによって作られた型定義ファイルのこと。 flow(...2021.08.182021.08.19HTML/CSS/JavaScript
HTML/CSS/JavaScriptタグ付きテンプレート文字列とは?【JavaScript】 テンプレート文字列とは? テンプレート文字列は、文字列の中に変数を埋め込むことができる機能です。 以下のように書きます。 const name = "山田"; console.log(`こんにちは。私は${name}です。`); //こ...2021.08.142021.08.16HTML/CSS/JavaScript
HTML/CSS/JavaScriptキャッシュ系のHTTPヘッダー5種類の違い とりあえずザックリ調べたことをメモ。(書いておかないと100%忘れそうなので・・・) キャッシュ関係のHTTPヘッダーには、以下の5つがあります。 レスポンスヘッダー リクエストヘッダー 問答無用でキャッシュを使う系 Ex...2021.07.252021.07.30HTML/CSS/JavaScript
HTML/CSS/JavaScriptGoogle検索で画像を非表示にする方法【虫が怖い】 家のゴキブリを駆逐したい。 なので「まずはゴキブリの生態について調べたほうが良いのでは?」と思った。 ただ、ゴキブリのことを調べるとゴキブリの画像を載せているサイトに出くわすのが怖い。とても怖い😱 というかもう、ゴキブリに限らず虫...2021.07.162021.07.26HTML/CSS/JavaScript
HTML/CSS/JavaScript1つのclassだけを持つ要素に適用する方法【CSS】 以下のようなHTMLがあったとして、 <p class="A B">山田太郎です。</p><p class="A">山田太郎です。</p> 以下のCSSを適用すると、 .A {color: red;} .B {background-c...2021.07.112021.07.19HTML/CSS/JavaScript
HTML/CSS/JavaScripttranslate属性=”no”を自動付加してpreタグ内のソースコードを翻訳対象外にする プログラミングのドキュメントは、ほとんどが英語です。 なので、大多数のプログラマは 分からない英語が出てきたら・・・ ⇒ページ上で右クリック → 日本語に翻訳するを選択して、日本語に変換する という風にして、ドキュメントを読み...2021.07.072021.07.11HTML/CSS/JavaScript
HTML/CSS/JavaScriptposition:stickyでスクロールした時にメニューを一定範囲に固定する 当記事のh2タグにも適用しています!!😀 position:stickyとは? 「スクロールした際に、親要素のボックス内の指定した位置に固定させることができるpositionプロパティ」です。 例えば以下のように書くと、 //HTML <s...2021.07.042022.05.26HTML/CSS/JavaScript
HTML/CSS/JavaScriptセッションとCookieの違いを超わかりやすく 最初に結論 ザックリ以下のように違います。 Cookie: →サーバーから「お前これ持っとけ」と渡されるデータのこと。 Cookieを持たされた人は、そのサイトにアクセスするときに毎回Cookieを持参しないといけない”呪い”にかけ...2021.07.032021.09.08HTML/CSS/JavaScript
HTML/CSS/JavaScriptCSSピクセル、デバイスピクセル、デバイスピクセル比を調べる確認ツール 今お使いのデバイスの情報です。 上の青枠部分は、JavaScriptで情報を取得しています。 パソコンの場合は、画面幅を変更したり、拡大率を変更したりすると、リアルタイムで数値が変更されます。 デバイスピクセルは、実端...2021.07.022021.07.04HTML/CSS/JavaScript
HTML/CSS/JavaScriptpictureタグとsrcset属性の違い。超わかりやすく 結論からいうと、以下のように違います。 srcset属性・・・”異なるサイズの同じ画像”を表示したい場合に使う pictureタグ・・・”異なる画像”を表示したい場合に使う 図解すると以下のような感じです🤗 srcset属性...2021.07.012023.02.04HTML/CSS/JavaScript
HTML/CSS/JavaScriptSyntaxError: ‘return’ outside of functionというエラー create-react-appで作ったプロジェクトで、npm startしたところ、以下のようなエラーが発生しました。 ./node_modules/watchpack/lib/chokidar.js SyntaxError: C:\Us...2021.06.09HTML/CSS/JavaScript
HTML/CSS/JavaScriptトランスコンパイルとpolyfillの違い Babelのことを調べていると「トランスコンパイル」「Polyfill」という言葉がよく出てきます。 これらの違いについて調べたメモ。 トランスコンパイル:別の言語に変換すること。 polyfill:古いコードを使って新しいコ...2021.06.032021.06.16HTML/CSS/JavaScript
HTML/CSS/JavaScript疑似要素(::before,::after)のプロパティを取得する【JavaScript】 結論から言うと、getComputedStyle関数を使えば取得できます。 index.html <h1>エヴァンゲリオン</h1> style.css h1::before{ content:"シン"; color:red; ...2021.06.02HTML/CSS/JavaScript
HTML/CSS/JavaScriptブックマークレットを作るときの注意点など ブックマークレットを作るときに気をつけるべき点とかメモ。 スコープ スコープを汚さないために、(function(){})()で囲います。 例えば、alert("hoge")を実行したいなら、javascript:(functi...2021.06.012021.06.02HTML/CSS/JavaScript
HTML/CSS/JavaScriptUdemyのチェックを一括で外すor付ける【ブックマークレット】 追記: この記事で書いてるスクリプトは使えなくなりました。 Udemyのアカウントを妻と共有して、割り勘でいろいろ教材を買ってるんですが 私が見た後に妻が見る 妻が見た後に私が見る みたいなことがあるため、後から見るほうは既にチェ...2021.06.012023.01.13HTML/CSS/JavaScript
HTML/CSS/JavaScript@charset “utf-8″は必要なのか? CSSファイルの先頭に @charset "utf-8"; みたいに書くことがあるけど、これを書いていないファイルもあったりして、「これって別に書かなくていいの?」と疑問に思って調べた結果メモ。 先に結論を書いておくと「書いたほうが良いけ...2021.05.282023.01.28HTML/CSS/JavaScript
HTML/CSS/JavaScriptSassとSASSとSCSSの違い Sass: 「CSSって使いにくいよねー」と思った人たちが作った言語。 Syntactically Awesome Stylesheets(構造的に イケてる スタイルシート)の略。 Sassで書かれたものをCSSにコ...2021.05.24HTML/CSS/JavaScript
HTML/CSS/JavaScriptpuppeteer + jsdomでTableを取得して加工する puppeteer + jsdomでTableを取得して加工する方法についてのメモです。 例 例として、以下の気象庁のページを使います。 上のぺージを開くと、以下のような画面が開くのですが ここではtableを取得して、...2021.05.232021.05.24HTML/CSS/JavaScript
HTML/CSS/JavaScriptインラインのscriptとdefer属性 インラインスクリプトには、defer属性は使えません。 例えば以下のようには書けません。 <script src="a.js" defer></script><script src="b.js" defer></script><scr...2021.05.23HTML/CSS/JavaScript
HTML/CSS/JavaScriptJavaScriptでタイマー経過後に音を鳴らす【ブックマークレット】 「任意の時間が経過したあとに音が鳴るようにするブックマークレットがほしいなぁ」と思って作りました。 以下のリンクをブックマークレットに追加するだけです。 以下、ソースです。 全体: スコープを汚さないために、(f...2021.05.192021.05.20HTML/CSS/JavaScript
HTML/CSS/JavaScriptpuppeteerで任意のJavaScriptコードを実行する evaluateメソッドを使うと、任意のJSコードを実行できます。 以下は、Googleのトップページを開いた後にalertを表示する例。 const puppeteer = require("puppeteer"); const mai...2021.05.19HTML/CSS/JavaScript
HTML/CSS/JavaScriptJavaScriptのオブジェクトとJSONの違い 基本的には同じだけど、以下の3点が違う。 JSON 違い JavaScriptのオブジェクト 書けない 末尾にカンマ( , )を書ける? 書ける 使えない キーにダブルクォーテーション以外使える? 使える ある キーを宣言...2021.05.14HTML/CSS/JavaScript