HTML/CSS/JavaScript

スポンサーリンク
HTML/CSS/JavaScript

Next.jsアプリをTWA化してGoogle Playに公開するまでの手順

忘れそうなので手順をメモしておきます。 自分は以前、JavaでAndroidアプリを作ってGoogle Playで公開したことがあります。 なのでGoogle Playには以前から登録済みでした。 それによって、この記事では抜けている手順も...
HTML/CSS/JavaScript

デプロイしたアプリでSentryが動かない

SSGで個人開発アプリを作っていて、そのアプリを以下のような環境にデプロイしています。 本番:Cloudflare Pages 開発:Vercel このアプリに、エラー追跡のためにSentryを入れました。 そしてきちんとエラーが追跡できる...
HTML/CSS/JavaScript

Zustand+persistでcustom classを保存する

たとえば、以下のようなclassがあるとします。 class Human { name: string; constructor(name:string){ this.name = name; } Hello(){ console.log(...
HTML/CSS/JavaScript

classからメソッドを除いた型を作る【TypeScript】

以下のようなコードがあったとき、 class Human { constructor(public name: string){} SayHello(){ console.log(`こんにちは。私の名前は${this.name}です。`) ...
HTML/CSS/JavaScript

TypeScript+モノレポで型がなぜかanyになった

以下のようなディレクトリ構成で、 └📁backend  └📝tsconfig.json  └📝teamA.ts └📁frontend  └📝tsconfig.json  └📝team.type.ts  └📝member.type.ts ファ...
HTML/CSS/JavaScript

grid-template-columnsの違い【auto-fit、auto-fill】

デモページ(ソース) 上から順に、以下のとおりです。 grid-template-columns: repeat(3, minmax(250px, 1fr)); 絶対に3カラムになる。  grid-template-columns: rep...
HTML/CSS/JavaScript

モノレポでVScodeのimport補完をうまく機能させる

たとえば、以下のような構成のモノレポがあるとします。 └📁backend(たとえばNestJS)  └🔵user.type.ts  └📝tsconfig.json └📁frontend(たとえばNext.js)  └🟣hoge.ts  └📝...
HTML/CSS/JavaScript

[改]Google翻訳でページを翻訳すると語順がめちゃくちゃになるのを回避するブックマークレット

以下のページ様の改良なのですが Google翻訳でページを翻訳すると語順がめちゃくちゃになるのを回避するブックマークレット | 迫真の氷結晶 こちらのページ様のブックマークレットだと、以下のようなHTMLもspanに変換されてしまい、コード...
HTML/CSS/JavaScript

TypeScriptで自作の型定義ファイルを追加する

「あんまり分かってないけどこう書いたらなぜか動いた」くらいの理解度なので ベストプラクティスではない可能性があるので注意してください。 tunnel-sshというnpmパッケージを使おうと思いました。 でも型定義ファイルが提供されていません...
HTML/CSS/JavaScript

リアルタイム通信を実現するWEB技術の違い【ポーリング、ロングポーリング、SSE、WebSocket】

リアルタイム通信を実現する方法として ポーリング ロングポーリング SSE WebSocket の4つがあるらしい。 その違いをメモ。 違い ポーリング: クライアント側が定期的に「更新されてない?」と尋ねて、それに対してサーバー側は更新さ...
HTML/CSS/JavaScript

【違い】dns-prefetch、preconnect、prefetch、preload、prerender

ブラウザがリソースを取得するまでの流れ。 -> -> -> -> 意味 dns-prefetch 「DNSの名前解決だけ先にやっとけ」な指示 preconnect 「HTTPの接続の確立までやっとけ」な指示 prefetch 「リソースを取...
HTML/CSS/JavaScript

クリティカルCSSとは?わかりやすく

一言でいうと ページを読み込んだ際に「最初に見える部分」のCSSだけをHTMLファイルにインラインCSSとして書き込んでおいて、「最初に見える部分以外」のCSSは外部ファイルとして非同期で読み込んで高速化しようぜ!なテクニック のことらしい...
HTML/CSS/JavaScript

DefinitelyTypeとは?Flowtypeとの違い

違い DefinitelyType: 「いろいろなライブラリ用のTypeScriptの型定義ファイルを公開しようぜー!」なプロジェクトのこと。 またはそのプロジェクトによって作られた型定義ファイルのこと。 flow(日本ではflowtype...
HTML/CSS/JavaScript

タグ付きテンプレート文字列とは?【JavaScript】

テンプレート文字列とは? テンプレート文字列は、文字列の中に変数を埋め込むことができる機能です。 以下のように書きます。 const name = "山田"; console.log(`こんにちは。私は${name}です。`); //こんに...
HTML/CSS/JavaScript

キャッシュ系のHTTPヘッダー5種類の違い

とりあえずザックリ調べたことをメモ。(書いておかないと100%忘れそうなので・・・) キャッシュ関係のHTTPヘッダーには、以下の5つがあります。 レスポンスヘッダー リクエストヘッダー 問答無用でキャッシュを使う系 Expires × ×...
HTML/CSS/JavaScript

Google検索で画像を非表示にする方法【虫が怖い】

家のゴキブリを駆逐したい。 なので「まずはゴキブリの生態について調べたほうが良いのでは?」と思った。 ただ、ゴキブリのことを調べるとゴキブリの画像を載せているサイトに出くわすのが怖い。とても怖い😱 というかもう、ゴキブリに限らず虫全般が怖い...
HTML/CSS/JavaScript

1つのclassだけを持つ要素に適用する方法【CSS】

以下のようなHTMLがあったとして、 <p class="A B">山田太郎です。</p> <p class="A">山田太郎です。</p> 以下のCSSを適用すると、 .A {color: red;} .B {background-col...
HTML/CSS/JavaScript

translate属性=”no”を自動付加してpreタグ内のソースコードを翻訳対象外にする

プログラミングのドキュメントは、ほとんどが英語です。 なので、大多数のプログラマは 分からない英語が出てきたら・・・ ⇒ページ上で右クリック → 日本語に翻訳するを選択して、日本語に変換する という風にして、ドキュメントを読み解いていきます...
HTML/CSS/JavaScript

position:stickyでスクロールした時にメニューを一定範囲に固定する

当記事のh2タグにも適用しています!!😀 position:stickyとは? 「スクロールした際に、親要素のボックス内の指定した位置に固定させることができるpositionプロパティ」です。 例えば以下のように書くと、 //HTML <s...
HTML/CSS/JavaScript

セッションとCookieの違いを超わかりやすく

最初に結論 ザックリ以下のように違います。 Cookie: →サーバーから「お前これ持っとけ」と渡されるデータのこと。 Cookieを持たされた人は、そのサイトにアクセスするときに毎回Cookieを持参しないといけない”呪い”にかけられる。...
HTML/CSS/JavaScript

CSSピクセル、デバイスピクセル、デバイスピクセル比を調べる確認ツール

今お使いのデバイスの情報です。 上の青枠部分は、JavaScriptで情報を取得しています。 パソコンの場合は、画面幅を変更したり、拡大率を変更したりすると、リアルタイムで数値が変更されます。 デバイスピクセルは、実端末の解像度のことです。...
HTML/CSS/JavaScript

pictureタグとsrcset属性の違い。超わかりやすく

結論からいうと、以下のように違います。 srcset属性・・・”異なるサイズの同じ画像”を表示したい場合に使う pictureタグ・・・”異なる画像”を表示したい場合に使う 図解すると以下のような感じです🤗 srcset属性 例えば、スマホ...
HTML/CSS/JavaScript

SyntaxError: ‘return’ outside of functionというエラー

create-react-appで作ったプロジェクトで、npm startしたところ、以下のようなエラーが発生しました。 ./node_modules/watchpack/lib/chokidar.js SyntaxError: C:\Us...
HTML/CSS/JavaScript

トランスコンパイルとpolyfillの違い

Babelのことを調べていると「トランスコンパイル」「Polyfill」という言葉がよく出てきます。 これらの違いについて調べたメモ。 トランスコンパイル:別の言語に変換すること。 polyfill:古いコードを使って新しいコードを代用する...
HTML/CSS/JavaScript

疑似要素(::before,::after)のプロパティを取得する【JavaScript】

結論から言うと、getComputedStyle関数を使えば取得できます。 index.html <h1>エヴァンゲリオン</h1> style.css h1::before{ content:"シン"; color:red; } inde...
HTML/CSS/JavaScript

ブックマークレットを作るときの注意点など

ブックマークレットを作るときに気をつけるべき点とかメモ。 スコープ スコープを汚さないために、(function(){})()で囲います。 例えば、alert("hoge")を実行したいなら、javascript:(function(){a...
HTML/CSS/JavaScript

Udemyのチェックを一括で外すor付ける【ブックマークレット】

追記: この記事で書いてるスクリプトは使えなくなりました。 Udemyのアカウントを妻と共有して、割り勘でいろいろ教材を買ってるんですが 私が見た後に妻が見る 妻が見た後に私が見る みたいなことがあるため、後から見るほうは既にチェックボック...
HTML/CSS/JavaScript

@charset “utf-8″は必要なのか?

CSSファイルの先頭に @charset "utf-8"; みたいに書くことがあるけど、これを書いていないファイルもあったりして、「これって別に書かなくていいの?」と疑問に思って調べた結果メモ。 先に結論を書いておくと「書いたほうが良いけど...
HTML/CSS/JavaScript

SassとSASSとSCSSの違い

Sass: 「CSSって使いにくいよねー」と思った人たちが作った言語。 Syntactically Awesome Stylesheets(構造的に イケてる スタイルシート)の略。 Sassで書かれたものをCSSにコンパイルすることで使え...
HTML/CSS/JavaScript

puppeteer + jsdomでTableを取得して加工する

puppeteer + jsdomでTableを取得して加工する方法についてのメモです。 例 例として、以下の気象庁のページを使います。 上のぺージを開くと、以下のような画面が開くのですが ここではtableを取得して、赤枠部分だけが表示さ...
スポンサーリンク