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

2023.11.06
OTHER

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

目次

1. JSライブラリSwiperを使用した要素を横スクロールを実装する方法
- - 1.0.1. JavaScript実装とエラー対象法、Chromeでの確認方法
2. JavaScript実装とエラー対象法、Chromeでの確認方法

【しくじり】date-fnsのバージョンを安易に1から2系に上げたらシステムが壊れた

……ので、1から2に上げる際の既存機能への破壊的変更をまとめました。

## ISO 8601形式の日付文字列の扱いの変更

### バージョン1での挙動

**バージョン1のコード例**:
“`javascript
// バージョン1では、ISO 8601形式の文字列を直接関数に渡すことができました。
const date = ‘2019-03-30T10:00:00Z’;
console.log(addDays(date, 1)); // ISO 8601形式の文字列を直接加算
“`

### バージョン2での挙動

**バージョン2のコード例**:
“`javascript
// バージョン2では、ISO 8601形式の文字列を扱うには`parseISO`関数を使用する必要があります。
import { parseISO, addDays } from ‘date-fns’;

const date = ‘2019-03-30T10:00:00Z’;
const parsedDate = parseISO(date);
console.log(addDays(par

元記事を表示

GoogleMapsAPIを使用した開発3（周辺情報取得機能）

# 1.はじめに
投稿された情報（緯度経度）からGooleMapsAPIを使用して地図を表示、地点間のルート検索機能、周辺情報の取得を実装したので知識の定着、復習のために記事を書きます。
今回はその３回目で周辺情報取得機能を実装していきます。

# 2.環境
Ruby (2.6.4)
Rails (6.1.7)
Maps JavaScript API

# 3.前提条件
APIキー取得済み
投稿機能を実装している
下記を実装している
[GoogleMapsAPIを使用した開発1（地図の表示）]()
[GoogleMapsAPIを使用した開発2(現在地取得)]()

# 4.実装

## 1.PlacesAPIを有効にする
– 下記公式サイトを参考に導入してください。
[Places API公式](https://developers.google.com/maps/documentation/javascript/places?hl=ja)

## 2.initMap関数とgetCurrentLocationAndAddMarker関数にsearchPlaces関数を呼び出す記述を追

元記事を表示

JavaScriptで関数に独自プロパティを追加する方法とその活用例

![](https://res.cloudinary.com/zenn/image/fetch/s–4qbYzZQf–/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/2acc5447fcd6efc6e19960da.jpeg%3Fsha%3Db2459d1a084af39473eb05d216d34aa93deb3219)

## 概要

JavaScript の値はすべて、論理型・数値型・文字列型など何らかの型を持ちます[^1]。
もちろん関数も型を持ち、JavaScript の関数はオブジェクト型とされています。

関数がオブジェクト型であるということは、関数がプロパティをもつことができるということです。今回の記事は JavaScript の関数に独自プロパティを定義する方法について解説させていただきます。

**この記事を読んでわかること**

– JavaScript の関数に独自プロパテ

元記事を表示

JavaScriptで関数に独自プロパティを追加する方法とその活用例

## 概要

![](/images/js-function-property-20231105.jpeg)

JavaScript の値はすべて、論理型・数値型・文字列型など何らかの型を持ちます[^1]。
もちろん関数も型を持ち、JavaScript の関数はオブジェクト型とされています。

関数がオブジェクト型であるということは、関数がプロパティをもつことができるということです。今回の記事は JavaScript の関数に独自プロパティを定義する方法について解説させていただきます。

**この記事を読んでわかること**

– JavaScript の関数に独自プロパティを定義する方法
– 関数に独自プロパティを定義することでできること

**対象読者**

– JavaScript 初心者
– JavaScript にある程度馴染みのある開発者

**前提知識・環境**

– JavaScript の文法の基本的な知識

—

## JavaScript の関数に独自プロパティを定義する方法

### JavaScript のオブジェクトのプロパティ

本題に入る前に、Jav

元記事を表示

Vue.js学習の個人メモ

# 「一日で基本が身に付く！Vue.js」石亀　広大　[著]

この本を終えると、JavaScriptにおけるVue.jsのメリットがわかる！
ついでに以下のアプリを作成できる
・TODOアプリ
・画像ビューワー

## Vue.jsはJavaScriptフレームワーク

プログレッシブ(斬新的)フレームワーク
　→規模によって段階的に利用できる
コンポーネント志向
　→部品の組み合わせで構築できる

フロントエンドのフレームワークは他にも
　RaectやAnglar

　例えばDjangoは?
　　Pythonで実装されたWebアプリケーションフレームワーク

Vue.jsは学習コストが低い
→HTMLとJavaScriptに馴染みがあればすぐ理解できる

Vue.jsと比較されることが多い他のフレームワークでは、Babelやwebpackの利用が前提だが、Vue.jsは必要なし。
(Vue.jsでも必要に応じてwebpackなどツールを導入できる)

デバックにはDevToolsが欠かせない。
GoogleGhromeでは「Chrome DevTools」というWEB開発ツール

元記事を表示

[typescript]Promise関数の種類、並列処理、並列処理とその使い分け

この記事を読むにあたって以下の前提知識を踏まえていると、より理解しやすいと思います。

– javascriptでアロー関数の書き方を理解している。
– `async`, `await`を使用した非同期処理を理解している。
– node.jsの実行環境でjavascriptをコードを動かしたことがある。
– typescriptであればplaygroundを使用したことがある。
– typescriptの基本的な文法と理解している。

**今回書いたコードは[typescript playground](https://www.typescriptlang.org/play?ts=5.1.6#code/MYewdgzgLgBBA2BTRAHGBeGBDCBPMwMAFALYSLABcMYAriQEaIBOAlNQArMgkCW5AHgBuIXgBMAfBilhEAdxhce-RESLNEEEPCGJW0mAG8AUDDiIoAFV4lEIWlDX70Uk2bOhI2xADp4IAHMiACIoAAt+GBRuYE0IGEQADwoHRDFg1lN3DS0dVUyzAF

元記事を表示

GoogleMapsAPIを使用した開発2(現在地取得)

# 1.はじめに
投稿された情報（緯度経度）からGooleMapsAPIを使用して地図を表示、地点間のルート検索機能、周辺情報の取得を実装したので知識の定着、復習のために記事を書きます。
一度に書くと長くなるので、4回にわけて投稿していきます。
今回はその2回目で現在地取得まで実装します。

# 2.環境
Ruby (2.6.4)
Rails (6.1.7)
Maps JavaScript API

# 3.前提条件
APIキー取得済み
投稿機能を実装している
[GoogleMapsAPIを使用した開発1（地図の表示）](https://qiita.com/uuuDi_97722/items/6a064cf7e40d91a517c0)まで実装している

# 4.実装

## 1.viewの修正
“`diff_ruby

+

元記事を表示

JSライブラリSwiperを使用した要素を横スクロールを実装する方法

JSライブラリSwiperを使用した要素を横スクロールを実装する方法

【v8】Swiperの使い方・実用的なデモ15個の解説ー基礎から応用までー

Getting Started With Swiper

元記事を表示

JavaScript実装とエラー対象法、Chromeでの確認方法

JavaScript実装とエラー対象法、Chromeでの確認方法

イベントハンドラを登録するコードの記述位置に関する注意と対処方法

【超簡単】ChromeでJavaScriptの動作確認を行う方法【プログラミング】

元記事を表示

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

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

![スクリーンショット 2023-11-04 17.17.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3605561/71930c9a-cfa1-d254-8ac8-231cdcb73066.png)
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を実装

![5794fd54cdd1c630a06c25c76826d0cc.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2356280/e9e71330-0d66-2154-fdbd-95a9f39f08e6.gif)

## 目標

– メールアドレス・パスワードを用いて、ユーザー認証ができる 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を使って、はてなブックマークのホットエントリーから技術関連の人気記事をピックアップし、その要約をスプレッドシートに自動生成するコードを書いてみました。要約に目を通し、気になった記事だけを読みにいけば、情報収集の時間を短縮することができるはず！

![ホットエントリーの記事をスプレッドシートに一覧化](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6760/51ce4db4-473b-2b07-298f-1455de3b063d.png)

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

> 記事は、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`の

元記事を表示

関連する記事

Go関連のことを調べてみた2020年06月28日 2020.06.28

目次 1. Goで簡単なオーダーシステムを作る2. go修行11日目　タイプアサーションとか3. 激重フルアーマーRPAは要らん。とりまシュっと操作再[…]
Android関連のことを調べてみた2022年06月18日 2022.06.18

目次 1. Jetpack Compose 勉強記録その3 (Jetpack Compose チュートリアルレッスン:4)2. コルーチンとチャネル[…]
PHP関連のことを調べてみた2022年11月22日 2022.11.22

目次 1. PHPUnit が exit code 255 で死ぬ2. login実装時の注意点3. PHP5系からのバージョンアップ4. PHPフレ[…]

OTHERカテゴリの最新記事