f@ctor

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

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

スプレッド構文を利用してUI表示をうまく切り替える

# React・VueのUI表示切り替えで使える

フラグで表示の切り替えを行うことって多いかと思います。
その時に使えそうなものがあったので今回紹介します。
大したものではないので、また普段使っている方も多いと思います。
ぜひ、使っていいい感じに切り替えできるといいなと思います。

## スプレッド構文を使う

“` typescript
const list1 = [1, 2];
const list2 = [10, 20];
const result = […list1, …list2];
“`
これですね。

“` typescript
const list1 = [[], 2];
const list2 = [10, 20];
const result = […list1, …list2];
=> [2, 10, 20]
“`

空の配列はマージすると消えることを利用したUIの切り替えが使えます。

例えば

“` typescript
const list1 = [
flag ?
[
{ title: ‘AAA’ }

元記事を表示

htmlのtableであれこれ（前回の続き）

## テーブル機能追加
前回の記事で作ったヘッダ固定スクロール表に機能を追加。
+ 見出し列のグルーピングについて、スクロールして表示される範囲の中央に表示。
+ セルをクリックしてテキストボックスを表示（実際の編集処理は省略）

See the Pen
Untitled by cfd-ack (BiLiBiLi動画で中国語学習が捗るJS

中国の動画サイトBilibiliで中国語学習をしている人も少なくないと思いまして、僕もその一人なわけでありますが、
Bilibiliではニコニコ動画のコメントのような動画上を右から左へ流れる特徴的なコメントシステムを搭載していますが、
このコメントがマウスで文字選択できない、というのが長年のストレスでありました。

文字選択ができないと単語をGoogle検索や辞書検索するのにコピペもできづらいですし、Google翻訳などで翻訳にかけることもできず不便であります。

そこでJSスクリプトを書きました。

– [Bilibili selectable danmu comments](https://greasyfork.org/en/scripts/448301-bilibili-selectable-danmu-comments)
– [Bilibili選択可能弾幕コメント](https://greasyfork.org/ja/scripts/448301-bilibili-selectable-danmu-comments)

Redditに投稿したら反応が良くて少し驚きました。

!

元記事を表示

console.log を print に置き換える

# console.log を print に置き換える

console.log と入力するのが面倒なので print にしたいという話です
いつもやり方忘れるのでメモしておきたい

“` javascript
function print() {
console.log.apply(console, arguments);
}

print(“hoge”, “piyo”, 1234);

“`

## apply と call による関数呼び出し
[関数].apply(thisポインタ, [引数１, 引数２, 引数３, …]);
[関数].call(thisポインタ, 引数１, 引数２, 引数３, …);
こんなイメージです。

“` javascript
// 使用例
var o = {
fn: function() {/* なんらかの処理 */}
};

o.fn.apply(o, [1, 2, 3]);
o.fn.call(o, 1, 2, 3);

“`

以上です

元記事を表示

私の運営しているサイトを紹介

私は「ラブドールの教科書」というラブドールのお役立ち情報を発信しているサイトを運営しています。興味のある方はぜひ訪問してください！

https://lovedoll-text.com/

元記事を表示

JavaScript 文字列操作メソッド 用途別チートシート

# 判定系

### 文字列が指定された文字列で始まるかどうかを真偽値で返す

“`javascript
/**
* startsWith(searchString, )
* @param {searchString: string} – 呼び出された文字列の先頭を検索する文字列。
* @param {position: number} – 呼び出された文字列内で検索を開始する位置（指定しない場合は0）。
* @return {result: boolean} – 呼び出された文字列が指定された文字列で始まるかどうか。
*/
const str = ‘Saturday night plans’;

console.log(str.startsWith(‘Sat’)); // => true

console.log(str.startsWith(‘Sat’, 3)); // => false
“`

### 文字列が指定された文字列で終わるかどうかを真偽値で返す

“`javascript
/**
* endsWith(searchString,

元記事を表示

初心者による初心者のためのJavaScript基礎２【配列・条件分岐・繰り返し】

# 目次
[1. 配列](#1-配列)
 [1-1. 配列の宣言](#配列の宣言)
 [1-2. 要素の取得](#要素の取得)
 [1-3. 要素の追加と削除](#要素の追加と削除)
[2. 条件分岐](#2-条件分岐)
 [2-1. 比較演算子](#比較演算子)
 [2-2. if文](#if文)
 [2-3. switch文](#switch文)
[3. 繰り返し（ループ）](#3-繰り返しループ)
 [3-1. for文](#for文)
 [3-2. while文](#while文)
 [3-3. break文とcontinue文](#break文とcontinue文)
 [3-4. forEachメソッド](#foreachメソッド)
[4. JavaScript基礎シリーズ](#4-javascript基礎シリーズ)
[5. 参考記事](#5-参考記事)

# 1. 配列
配列とは複数の値を一つのデータのように扱うことができるデータ構造のことです。

## 配列の宣言
Java

元記事を表示

画像ポップアップギャラリーをJavaScriptで実装

# できあがり

![screen_animation.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560904/e2754b9f-7c93-8fae-51f7-266366614a07.gif)

# きっかけ

[magnific-popup](https://dimsemenov.com/plugins/magnific-popup/)を使おうと思ったのですが

* 次の画像への**遷移のときのフェードイン、フェードアウトが設定できない**

が解決できなかったので、自分で作ることにしました。

（ポップアップを開くとき、閉じるときのフェードイン、フェードアウトはmagnific-popupでも可です）

# 要点

* ポップアップを開くとき、次の画像に遷移するとき、ポップアップを閉じるときの**フェードイン**、**フェードアウトエフェクトが設定可**。
* **縦長の画像**は**縦幅が画面サイズ**になり、**横長の画像**は**横幅が画面サイズ**になる。
* ポップアップ画像の下に*

元記事を表示

【Recoil&React】ぐーろーばるstateの管理

### ゴール
Recoilを知る
ちょっと理解する

### はじめに
この記事はすべて〇〇である

### ざっと調べたstate管理方法の種類
– Recoil
– 今回の注目ポイント
– 理由：簡単そう。シンプル。使いやすそう。
– React Context
– 標準的な方法
– ページ間情報のやり取りや何層にもコンポーネントが分かれているときのstate管理に限界を感じた
– Redux
– 一番良く聞く管理方法
– しっかりした方法ではあるが、手続きが面倒で軽量なアプリには向かなそう。大人数開発とかでは強そう
– SWR
– Next.jsを見ていて発見
– ただRecoilの方が流行りそうな気がしたため今回は深い追いせず

### Recoil（リコイル？）
https://recoiljs.org/
Recoilは、Meta社(旧Facebook)が開発し、2020年5月にリリースされた状態管理ライブラリ
Context APIのデメリットとReduxの使いづらさを解消するために開発されたらしい

大きく

元記事を表示

p5.js で SVGフィルターを使う（p5.js Web Editor上の HTML・JavaScript に手を加えて利用）

今年の 4月ごろ・6月ごろにツイートしていた、p5.js で SVGフィルターを使う話について、自分用のメモも兼ねて記事にしてみます。

今回の記事の内容は、シンプルに SVGフィルターを利用する話という範囲でまとめます。

## SVGフィルターに関するページ
SVGフィルターを試すにあたり、参照したページを記載します。

● – SVG: Scalable Vector Graphics | MDN
　https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter

●SVGのフィルター効果 – SVGでやることのまとめ。
　https://lopan.jp/about-svg/filter/

## p5.js Web Editor上で SVGフィルターを試す
SVGフィルターを試す環

元記事を表示

【Opensea】NFTに無限に「いいね❤」押せるツールを作成した話

## Openseaが意外とガバガバだった話。

元記事を表示

JavaScriptのClassについて part2

# 初めに
今回はクラスの継承や拡張についてまとめていきたいと思います。

# basic syntax
part1後の書き方の練習です。
“`jsx
class Person {
constructor(name, birthYear) {
this.name = name
this.birthYear = Number(birthYear)
}

calculateAge() {
const today = new Date()
return today.getFullYear() – this.birthYear
}
}
let Taro = new Person(‘Taro’, ‘1980’)
console.log(Taro) // Person { name: ‘Taro’, birthYear: 1980 }
console.log(Taro.calculateAge())
“`
インスタンスを創るのに、`constructor()`への引数に任して`this`オブジェクトを創り内部メソッドが`this`オブジェクトをア

元記事を表示

【TypeScript】’Cannot redeclare block-scoped variable’ 独自のスコープを持つファイルかグローバルスコープを持つファイルか？

TypeScriptの勉強中にあるエラーに遭遇した。

`Cannot redeclare block-scoped variable ‘users’`

`usersの変数は既に宣言されているので再宣言できないよ」`というエラーらしい。

今回は以下のような場合で発生した。

“`ts:src/chapter3/index.ts
const users = [];
“`

“`ts:src/capter4/index.ts
const users = [{ name: ‘jhon’, age: 27 }];
“`
※ちなみにディレクトリ構成はこんな感じ
“`
.
├── README.md
├── dist
├── node_modules
├── package-lock.json
├── package.json
├── src
│ ├── chapter-3
│ │ └── index.ts
│ └── chapter-4
│ └── index.ts
└── tsconfig.json
“`

あれ、同じファイル内でこのエラーが発生する

元記事を表示

JavaScript　returnとは　処理流れがいまいち分からない人向け

return・・・戻り値、返り値と言われます。

結果：returnは仲介人

returnの処理流れ

“`
① var array = [1,2,3,4,5,6,7,8,9,10];

④ function abc(arrayOrg) {
// var _array = arrayOrg.concat();
⑤ for (var i =0; i < arrayOrg.length; i++) { arrayOrg[i] *= arrayOrg[i]; } ⑥ return arrayOrg; } ② console.log(array); ③ console.log(abc(array)); ⑦ console.log(array); 出力結果： (3) [1, 2, 3] (3) [1, 4, 9] (3) [1, 4, 9] ``

元記事を表示

Amazon Cognitoでユーザ認証機能をサクっと作ってみる

# はじめに
Amazon Cognitoはユーザ認証・認可機能を提供するサービスです。ユーザ認証はCognitoの機能で行うことも、GoogleやFacebookなどのソーシャルプロバイダーと連携して行うこともできます。
認証が完了したユーザにリソースへのアクセス権を与えるのが認可で、Cognitoを使うとユーザ認証から認証完了後にAWSリソースへのアクセス権の割り当てるところまでをワンストップ、且つ簡単に実装できます。ここではその一例としてAWS S3にファイルアップロードできるアプリ（ログイン機能付き）を作成してみたいと思います。

# 手順
1. Cognitoユーザプールを作成する
1. CognitoIDプールを作成する
1. S3を作成する
1. IAMロールを編集する
1. Webアプリを作成する
1. ログインユーザを登録する

## Cognitoユーザプールを作成する
Cognitoユーザプールとは前述のユーザ認証機能で使用するデータプールになります。ユーザプールを作成すると、認証情報（ID/パスワード）が登録できるようになります。ユーザプールはAWSコンソールか

元記事を表示

画像の枚数に応じたレイアウトを自動で生成するJavaScriptライブラリを作成した

# この記事について
先日、インターンでの課題としてライブラリを作成しました。記事に残しておくと身になるという話をよく聞くので、作成した過程を書き残したいと思います。
筆者は駆け出しでありJavaScriptは勉強したてなので、アドバイスなどがあればお願いします！

# ライブラリの概要
* htmlのul要素に.js-photo-galleryというクラス名を付けるとli要素の画像がhttps://master.dxgxkh02xtdew.amplifyapp.com のようなレイアウトに自動で整形される
* 同じ枚数でも、画像のアスペクト比に応じて異なるレイアウトになる
* レイアウトはcssのGrid Layoutを使用する

# レイアウトの作り方

## css適用
下のサイトを参考にレイアウトを作成しました。
まず、好きな割合で区切りを決めると境目に番号が割り振られます（縦の線は左、横の線は上から1）。大きさをどの境からどの境までかで指定することで好きな形にできるという使い方でした。

https://developer.mozilla.org/ja/docs/Web/CS

元記事を表示

input type numberに指定範囲内の整数だけ出来るようにする

input type numberに指定範囲内の整数だけ出来るようにする。
※但しバックスペースで空欄化を可能にしたいので、意図的に空欄化は許している。

“`HTML