JavaScript関連のことを調べてみた2021年09月02日

ページ内リンクに smooth scroll を実装する

#概要
ページ内リンクに smooth scroll を実装する際の覚え書き。
jQUeryを使用する場合と、JavasScriptのみで実装する場合をそれぞれまとめています。

#jQueryで実装

##サンプル

“`index.html

ページ内リンク

“`

“`index.js
$(function() {
let elms = document.querySelectorAll(‘.js-scroll’);
elms.on(‘click’,(e) => {
e.preventDefault();
let $target = $($(this).attr(‘href’)); //ターゲットの要素取得
if ($target.length > 0) {
$(‘html, body’).animate({
scrollTop: $target.offset().top
}, 500, ‘swing’);
}
})
})
“`

#

【JavaScript】Chart.jsを使って折れ線グラフを表示する 方法

#対象者

* アプリにグラフを実装したい方

#目的

* グラフ表示をして、数値をわかりやすくする
* 完成イメージは下記の通り(グラフが更新できていないのでイメージ湧きにくいかもしれません、、、)


※画像の真ん中の検索機能に関しては下記記事で書いています。

https://qiita.com/nao0725/items/3ce5512500b38ea75431

#実際の手順と実例
###1.前提

*　本の投稿数をユーザーのマイページ（詳細画面）で集計しており、その数値を折れ線グラフ化します。集計の仕方は下記の記事から

https://qiita.com/nao0725/items/409ece34ecbec5167125

* 公式ホームページ

http://www.c

not found in ‘date-fns’が出た

# 前提
* yarnを導入している
* rails6

# 概要
“`
$ yarn add date-fns
“`
をした後に、

“`javascript
// sample.js

import format from ‘date-fns’
“`
こうすると、以下のエラーが出る

“`
“export ‘default’ (imported as ‘format’) was not found in ‘date-fns’
“`

# 結論
“`javascript
// sample.js

import { format } from ‘date-fns’
“`

`{}`が必要らしい

date-fns側で`名前付きエクスポート`をしているため、このように書く必要があるっぽい。

# 参考

[export – JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/export)

これからFirebaseでプロジェクトを始めようとする全ての人が知っておくべきこと v8→v9リリース

環境
・MacOS BigSur（11.5.2）
・VScode（1.59.1）
・Node.js (16.1.1）
・Firebase （9.0.0）←New!
・yarn (1.22.11)
・TypeScript(4.4.2)

## 対象

**・これからFirebaseでプロジェクトを始めようとする人**
:writing_hand:8月25日以前に出された教材やチュートリアル、記事、そして現時点での日本語の公式ドキュメントを参考にしようとしている人は特に！

**・教材や記事、ハンズオン通りにFirebaseでプロジェクトを始めたのに原因不明のエラーぶつかった人**

**・8月25日以前にFirebaseプロジェクト作っている人**

※この記事は2021年9月1日時点の情報です
※情報ソースはFirebaseの公式ドキュメント及び公式に発表されているリリースノートとブログを参考にしています
## はじめに

早速本題に入りますが、つい先日（2021年8月25日）にこれまでベータ版として扱われていた、**Firebase JavaScript SDK (v9.0.

React, Next.jsにおける無限スクロール

# はじめに
画面に描画するデータ件数が膨大で、読み込みに時間がかかるときには無限スクロールを使用するのがおすすめです。
無限スクロールとは、初回描画時はデータ全体のうちの一部だけ画面に描画しておいて、スクロールされたら描画するデータを少しずつ増やしていくというものです。

# 無限スクロール
– 今回は描画するデータが全部で50万件あることを想定して作ってみました。初回は50万件のうち100件だけ描画し、スクロール位置が8割まで行ったらまた100件追加して描画する。それを繰り返すっていう感じです

“`tsx:infinite-scroll.tsx
import { useEffect, useState, useRef } from ‘react’
import styles from ‘pages/infinite-scroll.module.scss’

interface Item {
id: number
content: string
}

export default function InfiniteScroll() {
const [allItems,

【JavaScript】重複しない整数乱数を生成する関数

##参考
[JavaScriptで重複しない乱数を生成する](https://tdyu.hatenablog.jp/entry/2019/05/04/025601)…関数化されていない重複しない整数乱数の生成方法

##やりたいこと
重複しない整数乱数を配列で生成したい + 関数として利用したい

##やったこと
重複しない整数乱数を生成する関数を参考URLのコードをちょっと改変して作成

##コード
Google Apps Script環境で実装しているためJavaScriptだと修正が必要かも。

###改変前の関数化していないコード

“`javascript:randomizing.js
function randomizing(){
var arr = [];
numArr = [];
for(var i=0; i < 5; i++){ arr[i]=i+1; } for(var j = 0,len = arr.length; j < 5; j++, len--) { rndNum = Math.floor(Math.random(

JavaScriptのオブジェクト配列を特定キーの値でuniq処理する

オブジェクト配列を特定キーの値でユニーク抽出する必要があったので調べてみたのですが、シンプルな記述が見あたらなかったので書いてみました。

1. `Array.map`で値とオブジェクトのArrayイテレータを作り、
2. `new Map(イテレータ)`で値でuniq化し、
3. `Map.values()` で オブジェクトのイテレータを作り、
4. `[…イテレータ]` でArrayにする

オブジェクトの`c`キーの値でuniq処理する例：

“`js
const array = [
{ a: 0, b: 1, c: 2 },
{ a: 3, b: 4, c: 2 },
{ a: 5, b: 6, c: 7 },
{ a: 8, b: 9, c: 7 },
];

let uniq_by_c = […new Map(array.map(obj => [obj.c, obj])).values()];
console.log(uniq_by_c);
“`

“`js:関数化
const uniq = (array, key) => […n

【JavaScript】配列とオブジェクトの違い

#はじめに
こんにちは。
JavaScriptの配列とオブジェクトの違いについてアウトプットしていきます！

##配列とオブジェクトの違い
>配列が「添字を使って格納されたデータを参照する」のに対して、オブジェクトは「名前（プロパティ）を使って格納されたデータを参照する」という点です。
参考：https://atmarkit.itmedia.co.jp/ait/articles/1011/29/news109_2.html

###配列

“`javascript:JavaScript
let vegetables = [‘トマト’, ‘ナス’,’キュウリ’];
console.log(vegetables[0]); // トマト
“`
変数vegetablesの添字に0を指定して出力すると、参照した値「トマト」が出力される。

###オブジェクト

“`javascript:JavaScript
let user = {
name: ‘佐藤’,
age: 20
}
console.log(user.age); // 20

[備忘録]フロント側の対応だけでNginxでキャッシュされた古い画像が表示されないようにする

Nginxで画像ファイルをキャッシュするようにしていたのですが、同じ名前で画像を更新した場合に古い画像がしばらく表示されてしまいます。
かといって、まれにしか更新されない画像のためにキャッシュを無効にするのもイケてないので、解決策を調べてみました。

# 結論

imgタグのsrcに`/path/image.jpg?xxxxx`のようにパスの後にランダムな値を指定する

※右クリックで「名前を付けて画像を保存」しても?以降は認識されません。

# 具体例

参考にした投稿だとランダム値を指定してましたが、それだと常にキャッシュがスルーされてしまうのでレコードの更新日時を指定することにしました。

サーバーから以下のようなテーブルのデータを取得して、imageUrlの後ろに更新日時を指定することで、同名のファイルで更新して画像ファイルのURLが同じだったとしても更新日時が異なるためキャッシュから読み込まれず、最新の画像を表示することができます。

論理名|物理名|型
–|–|–
id|ID|
画像URL|imageUrl|string
更新日時|updatedAt|string

すべての開発者へ。人気GitHubリポジトリ9選

本記事は、Simon Holdorf氏による「[9 Popular GitHub Repos For Every Web Developer](https://thesmartcoder.dev/9-popular-github-repos-for-every-web-developer/)」（2021年4月4日公開）の和訳を、著者の許可を得て掲載しているものです。

#すべての開発者へ。人気GitHubリポジトリ9選
>便利なツール、参考になる例など…

![](https://thesmartcoder.dev/_next/image?url=https%3A%2F%2Fimages.unsplash.com%2Fphoto-1541178735493-479c1a27ed24%3Fcrop%3Dentropy%26cs%3Dtinysrgb%26fit%3Dmax%26fm%3Djpg%26ixid%3DMnwxMTc3M3wwfDF8c2VhcmNofDE1Mnx8cHJvZ3JhbW1lcnxlbnwwfHx8fDE2MTc1NTE2ODI%26ixlib%3Drb-1.

Temporalで8月32日をサポートする

**Temporal**とは、JavaScriptに組み込まれた新しい日付計算機能です（正確にはまだStage 3ですが、仕様自体はほとんど完成している状態です）。従来あった`Date`のさまざまなつらい部分が解消されたAPIとなっており、実用化が待たれます。

**8月32日**とは、9月1日の到来を拒む一部の人たちが主張する仮想上の日付です。日本では9月1日は夏休みが終わり学校に登校しなければならない日ですが、8月32日ではまだ夏休みが続いているとされています。

残念ながら、日付を扱う多くのアプリケーションでは8月32日がサポートされていません。しかし実は、Temporalでは**Calendar**という仕組みを用いることで8月32日をサポートすることができまです。この記事では、8月32日をサポートするCalendar、すなわち**永遠の夏休みカレンダー**として筆者が実装した[eternal-summer-vacation](https://www.npmjs.com/package/eternal-summer-vacation)の実装や使用例を紹介します。独自のCalen

私も JavaScript で 両端キューを書いてみた

# これは何？

https://qiita.com/watarimaycry2/items/5464265216dfb2d9f79c

を拝見して。

そういえば、 C++ の deque のようなものって書いたことないなと思って書いてみた。

# 実装方針

deque のソースコードを見たわけじゃないけど、こんな感じじゃないかなと思っている。

* オブジェクトはスロットを何面か持っている。スロットは確保した時点でサイズ固定の配列。
* 一連のスロットは、概ね単なる配列として持つが、先頭より前とか末尾よりあとに使われないスロットを死蔵することができるようにする。
* バッファの先頭は、先頭のスロットに、バッファの末尾は末尾のスロットにある。
* 末尾への追記を続けてスロットが満タンになったらスロットを末尾に追加（死蔵スロットがあればそれを利用）。
* 先頭への追記を続けてスロットが満タンになったらスロットを先頭に追加（死蔵スロットがあればそれを利用）。
* 末尾からの撤去を続けて末尾のスロットがからっぽになったら、末尾のスロットを撤去。撤去されたスロットは開放されず、死蔵される。

[filter( ),find( ),findIndex( )]メソッド JavaScript

##filter( )
`filter( )`は配列内にある要素が指定された支持にあっていたらそのあっているものだけを配列から取り出して新しい配列の中にいれてくれます。

“`javascript
const characters = [‘ab’, ‘cde’, ‘fghi’, ‘jklmn’];
const result = characters.filter(character => character.length > 3);
console.log(result); => [“fghi”, “jklmn”]
“`
上記例だと3文字以上の文字を残し、新しい配列を作ってくれます。

“`javascript
const foods = [
{ name: “pork”, type: “meet” },
{ name: “salmon”, type: “fish” },
{ name: “beef”, type: “meet” },
{ name: “tuna”, type: “fish” },
];
const cookingType = materials

Browserify を試す(node.jsのrequireメソッドをブラウザで使う)

# 経緯

– node-webrtc のサンプルコード解析して、サーバーサイドのnode.jsのJavaScriptなのか、ブラウザ用のJavaScriptなのか、混乱した
– node-webrtcについては別途めとめる予定
– node-webrtcのサンプルでは、Browsersを用いて「node.js用のJavaScript」を「ブラウザ用のJavaScript」に変換していることがわかった
– node-webrtcコードを解析できるように、Browsers の最低限の知識を身に着けるためにまとめる

https://github.com/node-webrtc/node-webrtc

# 環境

– Windows 10
– node v16.8.0
– npm 7.21.1

## npm

– node-webrtcで使っているnode-fetchのバージョンに合わせている
– 詳細は下部にあるソースコードを参照ください

“`
+– browserify-middleware@8.1.1
+– browserify@17.0.0
+– exp

【javascript】テンプレートリテラルとアロー関数を用いた、シンプルな引数有りメッセージ呼出ファンクションの実装検討

# 背景

Nuxt.js(node.js)にて開発する時、まずメッセージの体系化を行いたい。引数にも対応可能なのが望ましい。

* 引数含むメッセージファンクション
* 呼び出し側

上記２要素で完結しつつ、１メッセージに付き１行～２行ぐらいでシンプルにならないかと考えた。

# 成果
一応できた。

## メッセージ側

“`js
// アロー関数を用いて記述、実行。
var messages = {
example1: (…args:string[]) => escape(`const${args[0]}${args[1]}${args[2]}`) ,
example2: (…args:string[]) => escape(`テ${args[0]}ス${args[1]}ト`)
}

// XSS対策のエスケープ
function escape(str:string){
str = str.replace(/&/g, ‘&’);
str = str.replace(/

RGBの補色を返す関数を書いた

書き捨てのコードなので、適当に参考にしてください。
実装はTypeScriptですが、同じノリで他の言語もできると思ってます。

“`
wikipedia
補色同士の色の組み合わせは、互いの色を引き立て合う相乗効果があり、これは「補色調和」といわれる。
しかし、純色など、明度が同じ補色同士を組合せた場合は、ハレーションを引き起こして、目がチカチカしてしまう
“`

“`javascript
// FFFFFF, 00FF1E などの文字列を受け取り、その補色を設定して返却する
getComplementaryColor(rgbStr: string): string {
const R = rgbStr.substr(0, 2).toLowerCase()
const G = rgbStr.substr(2, 2).toLowerCase()
const B = rgbStr.substr(4, 2).toLowerCase()

const r = (’00’ + (255 – parseInt(R, 16)).toString(16)).sl

TypeScriptの関数で最低限押さえておきたいポイント

## この記事について
TypeScriptの関数で最低限知っておきたいポイントを駆け足でまとめてみました。各種深掘りはしないので予めご了承ください。

## レストパラメーター

型安全な可変長引数を引数として受け取る場合に使用します。

> Rest parameters are treated as a boundless number of optional parameters. When passing arguments for a rest parameter, you can use as many as you want; you can even pass none. The compiler will build an array of the arguments passed in with the name given after the ellipsis (…), allowing you to use it in your function.

参考文献：「[Rest Parameters](https://www.typescriptlang.

[jQuery]ランキングしたものをslickで表現する

# はじめに
本記事では、slickを用いた記述をいたします。
`slick`はjQueryベースのスライダーを作成するための`プラグイン`です。

# コード
いろんなサイトやYouTubeの動画を参考にしましたが、
`CDN`を使用するのが一番良いなという結論に至っています。
（ファイル保存とか色々グダってトラウマ）

“`erb

省略

<%= yield %>