f@ctor

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

JavaScript関連のことを調べてみた2022年11月18日
目次

リンク先のドメインが詐称されているアンカーリンクを警告するChrome Extensionを書いてみた

# この記事の内容
## 記事中で書いてあることの概要
* Chrome Extensionをはじめて書いてみたけど、なぜ書いてみたか
* 書いたChrome Extensionの仕様
* Crome Extensionのソースコード
* Chrome Extensionを書くにあたって参考にしたもの
* 感想

## 記事中で書いてないこと
* JavaScriptでの正しい在るべき書き方
* ソースコード解説

# なぜChrome Extensionを書いてみたか
会社のメールアドレスに対してセキュリティーン関する訓練メールが届いたから。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38018/19c08d6e-244d-728b-e665-674788314f0f.png)

よく見ると、差出人が**yumemi_admin@cube-navi.com**という普段利用しないアドレスだったり、`https://seculio.com/cube-navi.html` 部分にフ

元記事を表示

JSのツール管理ライブラリVoltaとは

# Voltaとは
[公式](https://volta.sh/)は手間のかからないJavaScriptのツール管理システムと謳っています(The Hassle-Free JavaScript Tool Manager)。
主なユースケースとしてはNode、npmのバージョン管理です。

Voltaには三つの宣伝文句があります。

⚡高速
あらゆるJSツールを素早くシームレスにインストールし、実行することができます。VoltaはRustでビルドされ、軽快な静的バイナリとして出荷されます。

⚡信頼できる
プロジェクトに参加する全員が同じツールを使えるようにし、ワークフローに支障をきたさないようにします。

⚡ユニバーサル
パッケージマネージャ、Nodeランタイム、OSに関係なく、volta installという1つのコマンドで済みます。

他より早くて、コマンド一つでプロジェクト内で共有できて、OSに依存ないようなツールということです。

# Voltaのセットアップ
Voltaのセットアップは簡単にできます。[Getting Started](https://docs.volta.s

元記事を表示

【JavaScript】setTimeoutから返るIDは絶対0じゃないし、clearTimeoutに0を渡しても何もしない

超小ネタです。JavaScriptのタイマー系関数に`setTimeout`と`setInterval`があります。これらは返り値として数値型のタイマーIDを返し、このタイマーIDを`clearTimeout`及び`clearInterval`に渡すことでタイマーをキャンセルできます。

この**タイマーIDは0よりも大きいことが保証されています**。また`clearTimeout`または`clearInterval`に無効なタイマーIDを渡しても何もしないことも保証されています。（以下参照）

https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#timers

なのでタイマーを使っていないときはタイマーIDに0を代入しておけば、`clearTimeout`を使うときに毎回タイマーを起動しているかをチェックするようなコードは不要です。

“`javascript:このようなコードは基本的に不要
if(timerId != null) {
clearTimeout(timerId);
}
“`

元記事を表示

input type=”file”の「ファイル名」を表示させたくない時はbutton要素で装飾しよう！

# はじめに
HTMLでファイルアップロードを行う際に使用する`input type=”file”`の話です。
通常だとボタンの右側に「ファイル名」もしくは「選択されていません」のメッセージが表示されますよね。

「**オレは選択したファイルのプレビューを表示させるからファイル名の表示はいらねェ！（ドン）**」

そんな時ありますよね。
そういった時にこのファイル名を消し去るTipsの紹介です。

# 方法
`input要素`のファイル名のみを表示する方法は、公式では用意されていないようです（多分）。

そこで「**`input要素`を`label要素`もしくは`button要素`でラップする方法**」で対応します。

[MDNのドキュメント](
https://developer.mozilla.org/en-US/docs/

元記事を表示

【React】UseEffectで取得した値をUseContextに渡す

### UseEffectで取得したデータをUseContextで共有する
useContextの記事を色々漁ってもハードコーディングした値をProviderやcreateContextに渡すような非現実的な例ばかりだったので備忘録。
アプリ起動時にuseEffectでデータを取得し、そのデータをコンテクストとしてアプリ内で共有したい場合を想定。
他にも方法はあるのかもしれないが、とりあえず動いた方法をメモ。

“`react: App.jsx
import { useState, useEffect, createContext } from “react”;
import axios from “axios”;

export const DataContext = createContext(); //コンテクストオブジェクト準備

export default function App() {
const [data, setData] = useState({}); //useContextに渡すデータ用のStateを用意

useEffect(()

元記事を表示

Mapbox GL Jsを使って町丁目ポリゴンを表示してみる

## 概要説明
Mapbox GL Jsを使ってMapboxに町丁目ポリゴンを表示してみました。この記事は[OpenLayersを使ってOpenStreetMapに町丁目ポリゴンを表示してみる(OpenLayers v6)](https://qiita.com/4gou/items/d914c277ae96158b2165)のMapbox版です。
## 準備するもの
### Mapboxのアカウント
Mapbox GL Jsを利用するにはMapboxのアカウントが必要になります。以下からアカウントを作成することができます。

https://account.mapbox.com/

### アクセストークン
Mapbox GL Jsを使用するためにはアクセストークンが必要になります。以下からアクセストークンを取得することができます。

https://account.mapbox.com/access-tokens/create

### 町丁目ポリゴン
町丁目とは行政界の一つで「富士見町3丁目」「広尾1丁目」など「●丁目」で表わされる行政区画のことです。行政界は他には都道府県や市区町

元記事を表示

JSの書き方について

# Javascriptの書き方は人それぞれ
こんにちは！Zackeyです。
仕事をしているとよく人の書いたコードを読む機会があると思います。
JavaやC#などコンパイル型の言語は割としっかりと書いてありますよね。
誰のを読んでもそこまで困らない。

いつも思うのはJS（jQuery）なんです！
とにかく読みづらいものから、めちゃくちゃ読みやすい書き方まであるので、
ここでは私的読みやすいコーディングを書いていこうともいます。

## 関数型言語なんだよ・・・
JSは関数型の言語です！
つまり実行時には基本的に関数（function）が動作するということ。
それに基づいて書いていく！ってのが我流です。

## 悪い例
ここでは今まで見た中でもかなり悪い例を書いていきます。
“`javascript
$(function () {
$(‘.node’).on(‘click’, function () {
console.log(‘click’);
});
});
$(function () {
$(‘.node’).on(‘change’, function ()

元記事を表示

PageSpeed Insights の パフォーマンス 改善の参考リンク集

# ざっくり
計測されるパフォーマンス値は主に以下の5つの項目と重要度で評価される。

項目|重要度（Weighting）
–|–
TBT (Total Blocking Time)|30
LCP (Largest Contentful Paint)|25
CLS (Cumulative Layout Shift) |15
FCP (First Contentful Paint)|10
SI (Speed Index)|10

# 計測系
https://pagespeed.web.dev/

https://yellowlab.tools/

https://googlechrome.github.io/lighthouse/scorecalc/

# 解説系

https://web.dev/i18n/ja/lcp/

https://web.dev/i18n/ja/lighthouse-total-blocking-time/

https://web.dev/i18n/ja/tbt/

https://web.dev/i18n/ja/tti/

https://web.

元記事を表示

執筆文字数の推移を自動でグラフにする拡張機能「Writer Stock」を作りました。

# はじめに
サポーターズさんが行っているハッカソン[技育CAMP](https://talent.supporterz.jp/geekcamp/)に参加して、本成果物を作りました。
当時のプレゼン資料。

# 解決したいこと
小説や技術本の執筆文字数をグラフにしたいと思ったことはありませんか？
ですが、Excelで一々文字数と日付を記録するのも面倒ですよね。
そこで本拡張機能は、gitのコミットから自動的に文字数の推移のグラフを作成します！

# Writer Stockの紹介
このようなgitコミットから…
![img6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206651/236b94ff-3de9-defe-cd9f-395cbfad8870.png)
文字数の推移のグラフを自動生成します。
![img3.png](https://qiita-

元記事を表示

React,Vue.jsの前にJavaScriptを習得すべし！(分割代入{}とデフォルト値=)　

# 資料

https://www.udemy.com/course/modern_javascipt_react_beginner/

# はじめに
実際に動かしたコードです。自分で色々出力を変えて動かしてみてください。
体で覚えるといいと先輩に言われました。

# この記事の対象
JSを触ったばかりの初心者でこれからReactやVue.jsを触りたい人。

# 分割代入{}

“`index.js
const pirates = {
name: “ルフィ”,
age: 19
};

const man = `俺は${pirates.name}です。年齢は${pirates.age}歳だ`;
console.log(man);

//俺はルフィです。年齢は19歳だ
“`

“`index.js
const pirates = [“ゾロ”, 21];

const man = `俺は${pirates[0]}だ!年齢は${pirates[1]}だ`;
console.log(man);

//俺はゾロだ!年齢は21だ
“`

“`js
const pirates

元記事を表示

【TypeScript】命名規則 メモ

***1\. キャメルケース***
英語の複合語や文を1語につなげて表記するときに使う
先頭の単語の1文字目だけ小文字、他の単語の1文字目は大文字
用途：***変数、引数、関数、プロパティなど***
ex)`getName` `thisIsAnExample(this is an example)`

***2\. パスカルケース***
キャメルケースと同じく、英語の複合語や文を1語につなげて表記するときに使う
すべての単語の1文字目を大文字にする
用途：***クラス、インターフェース***
ex)`ClassName` `CatchTheTrain`

***3\. コンスタントケース***
すべて大文字または単語を繋げるときはアンダースコア
用途：***定数、グローバル変数***
ex)`ENDURL` `HELLO_WORLD`

***4\. boolean型の時の変数名***
「is + 形容詞」→ `isClose`
「can + 動詞」→ `canStart`
「has + 過去分詞」→ `hasChanged`
などの形式で命名する
詳しくは[こちらの方の記事から](h

元記事を表示

disabledを使ってボタンの活性制御をする（Vue.js）

はじめまして。
今回は、Vue.js で入力欄への値の入力に応じてボタンの活性・非活性を切り替える方法について解説していきたいと思います。
駆け出しエンジニア（歴1か月程度）の初投稿ですので、お手柔らかにお願いします。。笑

目次

[前提](#前提)
[この記事のゴール](#ゴール)
[実装手順](#実装手順)
[おわりに](#おわりに)
[参考（スタイル付きコード）](#参考（スタイル付きコード）)

## 前提
##### 想定読者
・HTML・CSSは大まかに理解している人
・Vue.jsを勉強し始めたばかりの初心者

##### 私の技術レベル
・Vue.js をチームで使ってはいるが、触れる機会が多くはなく知識は少ない
・勉強し始めて１か月未満

## ゴール
入力欄が空欄の時は**非活性**、値が入力されると**活性化**されるボタンを作る！！

![Qiita_1_非活性.png](https://qiita-image-store.s3.ap-northea

元記事を表示

Swiper.jsの自動再生のバグ対策

備忘録です。スライダーを逆方向に自動で流れるように動作させた時、別のタブに移動したり、ウィンドウサイズを変更したりすると、スライドが表示されなくなるバグがあります。解決策を見つけるまでに時間がかかりましたので、忘れないように書きます。

解決策
~~~js
autoplay: {
delay: 0,
disableOnInteraction: false,
reverseDirection: true,
pauseOnMouseEnter: false,
},
~~~

`reverseDirection`で逆再生する場合はセットで`pauseOnMouseEnter`を無効にしましょう。

### 参考記事
https://github.com/nolimits4web/swiper/issues/5029

元記事を表示

A-FrameとGoogle BlocklyでAR表示するサイトを作ってみた

# 「ARを作ろう」
A-FrameとGoogle Blocklyを利用してAR表示する「ARを作ろう」はこちら。
https://kaihatuiinkai.jp/nesopuro2/ar/

中学校　技術科「ネットワークを利用した双方!
向性のあるコンテンツのプログラミング」を学習するための教材として開発しました。
![ar_earth.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509199/2e197c1e-5fbf-3a84-b68f-214b801ca3d0.jpeg)

# ARを簡単に表示できるA-Frame
カメラで撮影している現実の画像にデジタルコンテンツを重ねるAR（拡張現実、以下AR）の作成が難しいと思っていました。そう、A-Frameに出会う前までは。A-Frameを使うとブラウザ上でARが簡単に表示できます。

“`JavaScript:ar_test1.html



元記事を表示

【OpenLayers】ベクトルタイルを表示する

## はじめに
この記事は#30DayMapChallenge2022 16日目の記事です。
テーマはMinimalです。
OpenLayersを使って国土地理院のベクトルタイルを表示してみます。

![image](https://raw.githubusercontent.com/tjukanovt/30DayMapChallenge/main/images/flyers/30dmc-2022.png)

https://30daymapchallenge.com/

## OpenLayersとは
簡単にダイナミックなマップを設置することができるJavaScriptライブラリ
地図タイル、ベクトルデータ、マーカーを表示することができる
フリーかつオープンソースで、2条項のBSDライセンス（FreeBSDとしても知られています）の下でリリースされている
執筆時の最新バージョンはv7.1.0でした

## ベクトルタイルを表示する
国土地理院のベクトルタイルを表示してみます。

“`index.html


元記事を表示

Google Cloud でロギング(JavaScript編)

システムの実運用を始めると避けて通れないのがロギングです。
しっかり設計しておかないとトラブルシューティングができません。
Google の AppEngine, Cloud Functions のようなサーバーレスサービスを利用する場合 Cloud Logging をほぼ使うことになると思われますが、何をどうすればどうログが出力されるのかまとまった資料がなかったのでまとめてみました。

## Severity

Google の Cloud Logging には以下の９レベルの severity があります。
* Default
* Debug
* Info
* Notice
* Warning
* Error
* Critical
* Alert
* Emergency

![スクリーンショット 2022-11-16 21.29.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73493/2eb89ac8-208d-0097-77e6-ef560ff2e23e.png)

プログラムが標準出力

元記事を表示

forEachとmapの違い

結論、**戻り値を持つかどうか**です。

“`
const arr = [本田, 香川, 岡崎, 内田, 長友];

// forEachの場合
arr.forEach(value => {
console.log(value);
});
// 本田
// 香川
// 岡崎
// 内田
// 長友

// mapの場合
arr.map(value => {
console.log(value)
});
// 本田
// 香川
// 岡崎
// 内田
// 長友
“`

forEachもmapも得られる結果は同じ。

大きく異なる点は、**戻り値を持つかどうか**。

“`
const arr = [本田, 香川, 岡崎, 内田, 長友];

// forEachの場合
const forEachResult = arr.forEach(value => {
return value;
});
console.log(forEachResult);
// undefined

// mapの場合
const mapResult = arr.map(value =

元記事を表示

pdfコピペで邪魔な半角スペースを消したり改行を削除したりするChrome拡張

# TL;DR

https://github.com/kentoak/replace-text

ペーストした瞬間に全角に挟まれた半角スペースを削除し、ピリオドカンマと句読点を正しくしてくれるChrome拡張。テキストボックスにペーストすると、pdfをコピーするときに邪魔な全角に囲まれた半角スペースが自動で削除される。ボタンをクリックすれば、改行を削除したり、文字数カウントしたりする。
`Alt+M`で呼び出す。Macだと`Option+M`。

# 機能

### 全角に挟まれた半角スペースを削除

日本語pdfをコピーすると、このように半角スペースが挟まってしまうことがある。テキストボックスに文字列を入力したら、即座に全角に挟まれた半角スペースを削除する。

e.g.)
日本語pdfについて
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316390/ddc600c0-d21d-e575-1bab-f8d8107f6aa4.png)
こういう

元記事を表示

Next.jsに入門した

このチュートリアルをやっていきます
https://nextjs.org/learn/foundations/about-nextjs

htmlとJavaScriptがだいたい分かっている人向け記事です

# 1. 実行/開発環境について

Reactと同様、以下の3つの実行環境が使えます

A: ビルドしてサーバーに置いて実行する
B: 開発用サーバーを立てて実行する
C: オンブラウザで実行する

Aは本番用で、ビルドすればミニファイ済みのコードが手に入りますので本番環境ではこれを使うべきなんですが、わりと面倒なので本番以外では使わないと思います。BはReactの開発用サーバーを立てて使うやり方で、ライブラリをnpm installしておいてimportして使うという書き方が出来るので通常はこれで開発するんじゃないでしょうか。Cはhtmlのscriptタグでインポートして使うやり方で、既存サイトにちょい足ししたい時や今回のようなチュートリアル的用途に適していると思われます

# 2. React基本編

Next.jsはReactベースのフレームワークなので、基本的な書

元記事を表示

JavaScriptでuserAgentを取得してみた

# はじめに

ユーザーがモッピーの推奨環境にアクセスできているかどうか
確認ができるページがほしいという要望があった。
開発時に学びがあったこと、つまづいたいたことがあったので、備忘録としてまとめることにした。

## そもそも
さっそく要望にそって開発しようと思ったが、ここで疑問が２つあった。

1. **推奨環境の細かく決まってない部分をどうしようか？**
1. **閲覧環境情報を取得するにはどうしたらいいのだろう？**

### 1について
当時プロダクトの推奨ブラウザのみは決まっていたが、
その中にはサポート対象外となったIE11も含まれていた。
策定時期も古かったため全体的に見直し、推奨環境の策定をするところからはじめた。

今回推奨環境と決まったのが以下（決めた経緯については割愛）

### 2について

調

元記事を表示

OTHERカテゴリの最新記事