JavaScript関連のことを調べてみた2023年11月05日

コーダーがVue.js3を学んでSPAポートフォリオサイトを作ってみた。

こちらが作成したサイトのトップページになります。
ラクダさんがいい感じ。ちなみにこのサイトで使用している画像はAdobeFireflyとDALL-E3を使って作りました。AIさん優秀すぎる。。。

https://shunsaitow.github.io/vue3portfolio/

## 目的
コーディングからさらに一歩先のスキルを習得するため、JavaScriptのフレームワーク、その中でも利用率も高く学習コストもそれほど高くないということで、Vue.jsを学ぶことにしました。
今回は入門ということで簡単なSPAポートフォリオサイトを作ることをゴールとして取り組みました。
こちらの記事も参考にさせていただきました。
[完全未経験の学生がvue.jsでポートフォリオ作成した](https://

Gulp4でJSファイルをMinifyする方法と、Minifyファイルの増殖を防ぐ方法

# 目的

Gulp4を使って`test.js`をMinifyして`test.min.js`を作成します。

# 環境
– Npm 10.2.3
– Gulp 4.0.2

# 1. JSファイルをMinifyするタスクを作成する

### フォルダ構成

以下のフォルダ構成で行います。
`src/test.js`をMinifyし、`dst/test.min.js`を生成します。

“`:Minifyタスク実行前
├ gulpfile.js
├ src/test.js
└ dst/
“`

“`:Minifyタスク実行後
├ gulpfile.js
├ src/test.js
└ dst/test.min.js 　← ここにMinifyしたファイルが生成される
“`

### 必要なものをインストール

`gulp-uglify`は、jsファイルのMinifyを行うため使用します。
`gulp-rename`は、Minifyしたファイル名を`*.js`から`*.min.js`に変更するために使用します。

“`bash
npm install gulp gulp-ugl

【JavaScript・学習ログ6】ボタンの表示/非表示、非同期処理

# 目次
[ボタンの表示と非表示](#ボタンの表示と非表示)
[非同期処理](#非同期処理)

教材:侍テラコヤ『JavaScriptの基礎を学ぼう』https://terakoya.sejuku.net/programs/60/chapters

## ボタンの表示と非表示
スクロール量に合わせてイベント処理をするコードを記述する。

(1)html: スクロール用のdiv要素を作成
“`html

1ページ目

2ページ目

3ページ目

`display: none` な要素を全て取得するワンライナー

# ワンライナー

“`js
const undisplayedElements = [… document.querySelectorAll(‘*’)].filter(eF => window.getComputedStyle(eF).display === ‘none’ && ! [‘head’, ‘base’, ‘link’, ‘meta’, ‘script’, ‘style’, ‘title’].includes(eF.tagName.toLowerCase()));
“`

# 分解と解説

“`js
const undisplayedElements =
[… // HTMLCollection や NodeList を真の配列に変換、Array.from() でも可
document.querySelectorAll(‘*’) // .getElementsByTagName(‘*’) でも可、.all はやめとけ
]
.filter(eF => // 真の配列に変換しておかないと .filter() できない
windo

YouTubeで広告表示中は自動でミュートして、広告が終わったらミュート解除する(Chrome拡張)

# はじめに
YouTube視聴中、急に音量デカすぎ広告が始まることがあるので自分の耳を保護するために作成しました。
広告開始を検知して即座にミュートしてくれるし、終わったらアンミュートもしてくれるので大変快適に。

初めての拡張機能作成でしたが、↓の記事を参考に無事作成できました。
[YouTubeの動画広告をスキップする拡張機能を作ってみた](https://qiita.com/mt877/items/110ae331917bc8fd8018)

# 作業の流れ
基本的には参考元と同じです。
1. 処理をJavaScriptで書く
1. manifest.jsonを用意
1. フォルダ/ファイルを用意
1. 拡張機能を有効にする

私の場合は自分用に作成していますので、自分が使っているChromeで有効にするだけですね。

# 1. 処理をJavaScriptで書く
コードはこちら。

“`content.js
const hostName = location.hostname;
const subDomain = hostName.split(‘.’)[0];

const

【Express / TypeScript / JWT】シンプルなログインAPIを実装


## 目標

– メールアドレス・パスワードを用いて、ユーザー認証ができる API（`/login`）の作成
– ログイン成功時に認証トークンを生成し、Cookie に保存。保存したトークンを用いてログイン状態を保持
– Cookieに保存されたトークンの整合性をチェックするミドルウェアの作成
– 認証チェックのミドルウェアを通過後は、Express のリクエストオブジェクトを介してログインしているユーザーの ID を参照できる

## 前提

– パスワードのハッシュ化・照合に使用するライブラリ「[bcrypt](https://www.npmjs.com/package/bcrypt)」、トークンの生成・照合に使用するライブラリ「[jsonwebtoken](https://www.n

【注意】ポップアップ JS ライブラリ「Lightbox 2」での XSS 対策について

今回は、画像のポップアップ表示で有名な [JavaScript ライブラリ「Lightbox 2」](https://lokeshdhakar.com/projects/lightbox2/)を使用する際に自分がハマった点を紹介します。といっても、たいしたことは書けませんが、笑

## 概要
キャプションとして “ data-title “で設定した内容がデフォルトでサニタライズされない。HTML 出力時にはエスケープされていたとしても。
“` html:xss-sample.html


Open Image

“`

## 対策
### 方法１． オプションを設定する（おすすめ）
“`sanitizeTitle“`オプショ

Bootstrap臭の消し方10選

# Bootstrap臭の消し方10選

BootstrapはWebデザインにおいて非常に便利なツールであり、多くのWeb開発者にとって重要な要素となっています。しかし、Bootstrapを使いすぎると、サイトやアプリケーションに特有の「Bootstrap臭」が漂うことがあります。Bootstrap臭とは、Bootstrapのデフォルトのデザインやコンポーネントが強く反映され、独自性が失われてしまう現象です。このブログでは、Bootstrap臭を消すための10の方法をご紹介します。

## 1. カスタムCSSを利用する

Bootstrapのデフォルトのスタイリングをオーバーライドし、独自のデザインを適用するために、カスタムCSSを使用しましょう。自分のプロジェクトに合ったスタイルを適用することで、Bootstrapのデフォルトの見た目から脱却できます。

“`css
/* カスタムCSSの例 */
.btn-primary {
background-color: #FF5733;
border-color: #FF5733;
color: #ffffff;
}
“`

Google Apps ScriptとChatGPT APIで技術トレンドをキャッチ

技術界隈は日進月歩で、新しいトレンドが次々と生まれています。しかし、その全てをキャッチアップするのはなかなか大変ですよね。

そこで、Google Apps ScriptとOpenAIのGPT-3.5を使って、はてなブックマークのホットエントリーから技術関連の人気記事をピックアップし、その要約をスプレッドシートに自動生成するコードを書いてみました。要約に目を通し、気になった記事だけを読みにいけば、情報収集の時間を短縮することができるはず！


ちなみに、この記事は次のように要約してくれました：

> 記事は、Google Apps ScriptとOpenAIのGPT-3.5を使用して、はてなブックマークのホットエントリーから技術関連の人気記事をピックアップし、要約を自動生成する方法について説明しています。これにより、最新

【JavaScript】URLの変更を検知するイベントを作る

# はじめに

私はこの記事のコードの実行環境として、

* Chrome バージョン: 119.0.6045.105

を使っています。

上の実行環境以外でこの記事に書いたコードが動くかどうかはわかりません。
個人用として考えたものなので…

それでもよければどうぞ。

# カスタムイベントについて

JavaScriptには`CustomEvent`というものがあります。
そして、これを使うと自分でイベントを作ることができます。

基本的な構文は、

* `Element.dispatchEvent(new CustomEvent(‘イベント名’));`でイベントを発火
* `Element.addEventListener(処理)`でイベントを受け取る(?)

です。

今回は`urlChange`というイベントを作ります。

# DOMの変更を検知する

[JavascriptでURLの変更を検知したいなら、DOMの変化を検知しろ。](https://qiita.com/aki-743/items/f2ede921ae7fdeeed7c0)
という記事があるのですが、

【APIの仕組み】同一オリジンポリシーとCORS

# 【APIの仕組み】同一オリジンポリシーとCORS

この記事では、ウェブのキーワードである「オリジン」の構成要素について説明し、さらに「同一オリジンポリシー」と「CORS」の重要性についても議論します。

## ウェブの主要な用語

1. **スキーム（プロトコル）**：ウェブアクセスのための通信プロトコルを示します。一般的なものには、`http://`や`https://`などがあります。`http://`は通信が暗号化されていない一般的なプロトコルであり、`https://`はセキュアな通信を提供します。

2. **ホスト**：ウェブサーバーのアドレスを指します。一般的なものには、`www`や`localhost`があります。これはウェブサイトがホストされている場所を示します。

3. **ドメイン**：ウェブサイトの識別名です。例えば、`twitter.com`や`youtube.com`などがドメインです。これにより、ウェブサイトを一意に識別できます。

4. **ポート**：ウェブサーバーにアクセスするための通信ポートを示します。通常、`localhost:3000`の

【非同期処理】Promise,async/awaitについて

## まず、反対の同期処理とは
プログラムの記述順序通りに実行され結果が返る。
add関数が実行され計算結果がリターンされてから、hogeに代入している。
⇓
JavaScriptは「UIスレッド」と呼ばれるメインスレッド上で処理を１つ１つ順番に実行していくことしかできない。
⇓
時間のかかる処理を行うとJavascriptはその処理にUIスレッドを占有してしまう。処理完了まで一切何もできなくなる。クリックもローダーやプログレスバーの表示もできない。つまり、パソコンがフリーズしているように見えやすい
“`javascript:test1.js
//例１
cosnt add = (a, b) => {
return a + b
}

let hoge = 0;
hoge = add(10, 100)
console.log(hoge) //表示は「110」
“`
“`javascript:test2.js
//例２
//10秒間UIスレッドを独占する。その間は操作できない
function sleep(msec) {
var start = new Date();
whil

Google Apps ScriptでWebコンテンツを抽出する（ExtractContentをJavaScriptに移植してみた）

# ExtractContentモジュールをJavaScriptに移植

Webページのコンテンツを抽出するための`ExtractContent`モジュールをJavaScriptに移植し、Google Apps Scriptから利用できるようにしました。この記事では、その使用方法を紹介します。

## ExtractContentモジュールとは

`ExtractContent`モジュールは、HTMLから本文とタイトルを抽出します。2007年にRuby版がBSDライセンスで公開され（[extractcontent.rb](https://labs.cybozu.co.jp/blog/nakatani/2007/09/web_1.html
)）、それを移植したPython3版が存在します（[python3-extractcontent3](https://github.com/kanjirz50/python-extractcontent3)）。

## Google Apps Scriptで動かす

`ExtractContent`モジュールを、Apps Scriptでも動作するようJ

【JS必須知識】プリコンパイル&モジュールバンドラ

# 【JS必須知識】プリコンパイル&モジュールバンドラ

ウェブ開発において、高級言語から低級言語に変換するプロセスを「コンパイル」と呼びます。通常、コンパイラが高級言語から低級言語に翻訳する作業を行います。この記事では、事前翻訳となるプリコンパイルの方法に焦点を当て、アセットパイプライン（sprockets）とモジュールバンドラ（webpacker）について詳しく説明します。

## プリコンパイルとは？

プリコンパイルは、コンパイラが処理できないファイルや言語を事前に翻訳するプロセスを指します。これにより、ウェブ開発において非常に重要なファイルの最適化や結合が可能になり、ウェブアプリケーションのパフォーマンス向上に貢献します。

### **1. アセットパイプライン (sprockets)**

アセットパイプラインは、ウェブアプリケーションのリソース（CSS、JavaScript、画像など）を効率的に管理するためのツールです。以下はアセットパイプラインの主要なステップです。

– **プリコンパイル**: アプリケーション内の各リソース（例: SassファイルやCoffeeS

TypeScriptのシグネチャまとめ

## 背景
最近TypeScriptを扱っているがなんとなく使っていることが多く、もっと理解した上で仕事に活かしたかったため、改めて自分なりに学習しまとめてみました。

## シグネチャ
メソッド名、パラメータの型、戻り値の型などで構成された組み合わせのこと。

## インデックスシグネチャ
“`typescript
[key: T]: U
“`
上記の構文のことをインデックスシグネチャという。この構文はオブジェクトがより多くのキーを含む可能性があることをTypeScriptに伝えており、読み方は「このオブジェクトについては、型Tの全てのキーは、型Uの値を持たなければならない」。

– 型Tの部分はnumberかstringしか使用できない。
– keyの部分は任意の言葉が使用できる。

使用例
“`typescript
const onigiri: {
[okazu: string]: number
} = {
‘okaka’: 2,
‘tsuna’: 5
}
“`

## 呼び出しシグネチャ
– 関数そのものの型のこと。
– アロー関数と似ている。
– 関数を引

【JavaScript ・学習ログ5】イベント処理

# 目次
[イベント処理とは](#イベント処理とは)
[作成方法](#作成方法)
[1.フォームに入力された文字数をカウントする](#1-フォームに入力された文字数をカウントする)
[2.ラジオボタンの値を取得する](#2-ラジオボタンの値を取得する)
[3.チェックボックスの値を取得する](#3-チェックボックスの値を取得する)

教材:侍テラコヤ『JavaScriptの基礎を学ぼう』https://terakoya.sejuku.net/programs/60/chapters

## イベント処理とは
イベント（ブラウザ利用時のユーザーの行動）に併せDOM操作を行うこと。イベントはブラウザ利用時の『ユーザーの行動』を示す。

### 代表的なイベント
|種類| |
|-|-|
|clicK|クリックしたとき|
|mousedown|マウスボタンを押したとき|
|mouseup|マウスボタンを離したとき|
|mousemove|マウスカーソルを移動したとき|
|keydown|キーボードのキーを押したとき|
|keyup|キーボードの

おはようございます。ソフトウェア エンジニアとして自分のサービスを紹介する Web サイトを開発しています。

EcoiEnv Webアプリケーション開発、人工知能AIアプリに焦点を当てています。 JavaScriptを使用して。 我々は提供しています 教育、金融、電子商取引、ソーシャルメディア、ヘルスケアなど、さまざまな分野のソフトウェア開発におけるエンドツーエンドの支援。 当社は、Web アプリケーション レベルの脆弱性攻撃、Web サーバーの悪用を含む AI アプリケーション、OWASP 攻撃、XSS、SQL インジェクションに対して取り組んでいます。


指を離しても長押しされたままになる不具合

長押しをしている間加算し続けるボタンで、指を離しても加算し続ける不具合が発生した。

結論から言うと、[iOS15で追加された「App間のドラッグ&ドロップ機能」](https://support.apple.com/ja-jp/HT212788#:~:text=%E3%82%A6%E3%82%A3%E3%82%B8%E3%82%A7%E3%83%83%E3%83%88%E3%82%92%E8%BF%BD%E5%8A%A0-,App%E9%96%93%E3%81%AE%E3%83%89%E3%83%A9%E3%83%83%E3%82%B0%26%E3%83%89%E3%83%AD%E3%83%83%E3%83%97%E6%A9%9F%E8%83%BD,-%E3%81%AB%E3%82%88%E3%82%8A%E3%80%811%E3%81%A4 “iOS 15 のアップデートについて”)を行うとtouchendイベントが発生しなくなることが原因だった。

### 発生条件

iOS15で「App間のドラッグ&ドロップ機能」が追加された。
この機能は、選択したテキストを浮かび上がるまで押

【初学者向け】クッキーとセッションの仕組みとリスク

# 【初学者向け】クッキーとセッションの仕組みとリスク

ウェブサイトでログインすると、しばしば「ログイン状態が保持される」ことを経験するでしょう。これは、クッキーとセッションという仕組みが密接に関連しています。この記事では、なぜログイン状態が保持されるのか、その仕組みを説明し、セキュリティのリスクについても議論します。

## クッキーとセッションの役割

**クッキー**は、小さなデータの断片であり、ウェブサーバーからユーザーのブラウザに送信され、ブラウジングセッション中に情報を保持します。クッキーにはユニークな識別子や設定、状態情報などが含まれ、ウェブサイトとユーザー間のコミュニケーションを可能にします。

**セッション**は、ユーザーのブラウジングセッションを管理する仕組みで、クッキーを使用して特定のセッションを識別します。セッションは、ユーザーがウェブサイトにアクセスし、ウェブサーバーとやり取りする間の一連のアクティビティと関連情報を管理します。セッションはログイン状態の保持に非常に重要です。

## ログイン状態の保持

ログイン状態を保持する仕組みは、以下の手順で機能し

touchイベントのデモンストレーション

### touchstartイベント

タッチ平面上に 1 つ以上のタッチ点が配置されたときに発生

See the Pen
touchstart by ひよこちゃん。 (@iyzymcec-