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

JavaScript/Node.jsでのバイナリデータ処理

## 概要

JavaScriptでバイナリデータを扱おうとすると`Buffer`と`ArraryBuffer`という似た名前のオブジェクトが登場して混乱したり、`Uint8Array`という耳慣れないオブジェクトが登場して途方に暮れたりすることがあると思います。本記事ではこれらのオブジェクトの概念を整理することでJavaScriptでのバイナリデータの扱いの見通しを良くしていきます。

## 概念の整理

まずバイナリデータを処理しようとしている環境がNode.jsなのかブラウザ環境なのかが重要です。Node.js環境の場合は`Buffer`クラスを利用することになります。`Buffer`クラスはNode.jsの標準ライブラリとして実装されています。

https://nodejs.org/api/buffer.html

ブラウザ環境ではJavaScript自体に実装されている`ArraryBuffer`オブジェクトを利用することになります。`Buffer`は実装されていません。

https://developer.mozilla.org/en-US/docs/Web/JavaS

Python,Ruby,PHP,Java,JavaScript,Perlのプログラミング言語の比較

Qiita > プログラミング言語の比較

Python,Ruby,PHP,Java,JavaScript,Perlのプログラミング言語の比較です。

# 2022年版

## 基本文法

https://qiita.com/yuki_kimoto/items/a11a1095fc24be590fce

## 入門

https://qiita.com/yuki_kimoto/items/00aaab90f31194a5de74

## インストール

https://qiita.com/yuki_kimoto/items/7c2f1be70d68065338a4

## 変数

https://qiita.com/yuki_kimoto/items/631537a6e7eb58f251cf

## 文字列処理

https://qiita.com/yuki_kimoto/items/3b8062c42c0c12cb3db7

## 条件分岐

Python,Ruby,PHP,Java,JavaScript,Perlの多次元データ構造の比較

Qiita > プログラミング言語の比較

Python,Ruby,PHP,Java,JavaScript,Perlの多次元データ構造の比較

# Python

https://qiita.com/ko0821/items/4c8a557ec88f2a10bd55

# Ruby

https://qiita.com/vzvu3k6k/items/1705c7f4b29c08787ea0

# PHP

https://qiita.com/shuntaro_tamura/items/784cfd61f355516dfff0

# Java

https://qiita.com/panda-chibi/items/e57799c047be69fe5b79

# JavaScript

https://qiita.com/Stack_up_Rising/items/cb71842d7c3510daf9f0

# Perl

https://per

VanillaJSでイージング付きのSmoothScrollを実装する

# TL;DR
scroll-behavior便利ですね。

https://developer.mozilla.org/ja/docs/Web/CSS/scroll-behavior

・・・とかいいつつ、うまくスムーススクロールが動かなかった（おそらく自分の実装が悪い気もする）ので、
バニラでスムーススクロールを実装しました。

よくあるサンプル、動きが直線的で気持ち悪いですよね。
なんでイージングつけました。

# ソースコード
https://github.com/rockinruuula1227/js-smooth-scroll/blob/main/smoothScroll.js

適当にコピペしてimportしたら使えるかと思います。

# ソース説明

メインのソースはよくあるSmoothScrollと一緒です。

“`js

// clickイベント取得して、aタグのハッシュを取得する用。
export const smoothScroll = (event) => {
event.preventDefault()
smoothScrollWithHash(e

Vuetify風な気持ちのいいリップルエフェクトをVanilla JS(ただのJS)で実装する

# リップルエフェクト
リップルエフェクトとは、Material Designなどでよく見る波紋のエフェクトです。
詳しくは[こちら](https://material-components.github.io/material-components-web-catalog/#/component/ripple)のデモを見てください。
(デモを探していて見つけた[このコンポーネント](https://github.com/material-components/material-components-web)を使って、もっといい感じでVuetifyっぽいリップルエフェクトかけそうですね…あれ？自分で作る必要はない？)

# アニメーションを調べる
まず作る前にどんなアニメーションで構成されているのかを知る必要があります。
検索して出てくる記事では、少なすぎるアニメーションで作られていたりしました。

## リップルエフェクトのアニメーション
Vuetifyのリップルエフェクトを参考にアニメーションを分けてみると、

1.マウスのボタンを押し始めた時まず背景色が変化する（リッ

React入門 importを整理してみる

# この記事について
この記事は、Reactを書き始めた人なら感じるimportの多さを解決することを手助けするために書きました。
関数コンポーネントやApp.jsがこんな風に前半がごちゃついていませんか？
“`
import { useState, useEffect } from ‘react’;
import Navbar from ‘./components/Navbar’;
import Feed from ‘./components/Feed’;
import VideoDetail from ‘./components/VideoDetail’;
import SearchFeed from ‘./components/SearchFeed’;
import ItemsList from ‘./components/ItemsList’;
….

const App = () => {
return(
<>App
)
};
“`

これをシンプルにしていきましょう！
あまり長々書いても仕方ないので、早速始めます！

# 完成図

JavaScriptのSymbolについて

# 初めに
今回は`Symbol`の基本、そして一部のメソッドの使い方をまとめてみました。

参考文章はこちらです。

https://ja.javascript.info/symbol#ref-2208

中国語が分かる方はこちらもおすすめです。

https://es6.ruanyifeng.com/#docs/symbol

# Memo

Symbolの使用について

– `Symbol`はプリミティブであり、一意の値を表します。
– `Symbol`で創られたすべての値はユニック（unique）で、見た目は同じでも違う存在として判定されます。
– `Symbol`はオブジェクトのプロパティ名に用いるとき、`[]`でアクセスしなければなりません。

Symbolへの反復処理について

– `for…in`、`for…of`を使って`Symbol`プロパティを列挙したり反復処理したりできません。
– `Sym

mac対応画像ビューア comic masterをv1.0.9にアップデートしました

## comic masterという自作のMac対応画像ビューアがあります

[comic master](https://github.com/araera111/comic_master/releases/tag/v1.0.9 “comic master”)

## 以前からバージョンアップしたところ

* フルスクリーンモードを追加(f)
* サムネイル表示モードを追加(t)
* 妻が来たモードを追加(e)
* ファイル名の表示、非表示機能を追加(n)
* 現在のページ数表示、非表示機能を追加(r)

## フルスクリーンモード

electronのフルスクリーンモードはElement.requestFullscreen()メソッドで簡単に実装できます。
以下ソース。

“`TypeScript
export const toggleFullScreen = () => {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
} else if (doc

APIに対してPOSTした際の備忘録

ES6（というかReact）とjQueryがデバイスで使い分けされている（PCとSPで使っているjsが違う、みたいな感じ）、変則的な環境で同一の挙動（APIに必要なデータをPOSTする）をさせる必要が出たことがあり、当然ながらそれぞれ記述がちょっと異なる形になったので、その備忘録です。
（似たような件で別の記述することがあったら随時増やそうと思います）

また、大体POSTする際はデータをjson化することが多いと思うのですが、今回の件は逆にjson化してはならず、けれどもES6ではjQueryのように連想配列状態でbodyにセットしても400エラーが出てしまったので、ならどうするかと頭を抱えた末のことだったのも、記録として残す発端だったりします（調べても、大体のところがデータをjson化させてる記述ばかりだったので…）。
あんまりなさそうなケースですが、似たようなことで頭を抱える人の助けになることがあったらこれ幸い。
後はちょっとjQuery⇔ES6で変換して記述してみたい人の参考になったりとか…するんですかね、これ。

もっと良い書き方、やり方があったら教えていただけると大変助かり

RailsでJestを試験的に導入してみた

今回Rails+Docker環境にてJestを試験的に導入してみたので、その過程をまとめていきたいと思います。ちなみにJestというのはJavascriptのテストフレームワークで、以下のリンクにある通りトレンドの上位に位置しています。
[JavaScriptテストフレームワークのトレンド比較](https://qiita.com/yudwig/items/b85c27ac98bd9308e8da)
Jestを導入してみようと思った背景として、バックエンド側では自動テストを導入しており、修正等が入った際には自動テストを回せばエラーを検知できるのですが、フロント側には自動テストはなく手動テストに頼ってしまっているので、修正等が入った際にはいちいち手動テストをやらなくてはいけず手間がかかり、エラーも検知しにくいという状態になっていると感じたからです。

### Jestをインストールしてみる
前提として私のDockerに関する知識が不足している+今回は試験的に自分のDocker環境だけで動くようにするという点を踏まえて見て頂ければと思います。既存のDocker環境にはnode.js・npm

Reactを基礎から学ぶ①

Reactとは
—
### 1. Composable コンポーネント指向
Reactはコードを細分化することができます。
従来のHTMLだとヘッダーからフッターまでコードを同じページに書くので、見通しが悪いです。
しかし、Reactでは下記のようにコンポーネントに分けて、それらを組み合わて使います。
コンポーネントに分けることによって、管理しやすくなり、様々な場所で再利用することができます。

“`jsx

Javascriptで最大公約数を求める式をモダンな記法で書きたい

## 最大公約数の求め方

> ユークリッド互除法 大きい方の整数Aを小さい方の整数Bで割った余りをR とするとき，A, Bの組の替わりにB, Rの組に順次置き換えて，R=0となったときのBを最大公約数とする

## レガシーな書き方

“`javascript
function gcd (x, y){
if(x % y){
return gcd(y, x % y)
}else{
return y
}
}
console.log(gcd(480,1024)) // 32
“`

## モダンなコード

“`javascript
const gcd = (x, y) => x % y ? gcd(y, x % y) : y
console.log(gcd(480,1024)) // 32
“`

or

“`javascript
const gcd = (a, b) => !b ? a : gcd(b, a % b)
console.log(gcd(480,1024)) // 32
“`

もっと面白い（変態的な）書き方あるよってあったら教えて

【Node.js / ブラウザ】JavaScriptでUTF-8のエンコード・デコード

UTF-8のバイト列とJavaScriptの文字列型との間の変換方法。ブラウザでもNode.jsでも共通のコードで動く。

ググっても古いやり方が出てくることが多いので書く。

# エンコード

“`js
function encodeUTF8(str) {
const encoder = new TextEncoder();
return encoder.encode(str);
}

// 使い方例
const bytes = encodeUTF8(‘アイウ’);
// Uint8Array(9) [227, 130, 162, 227, 130, 164, 227, 130, 166]
“`

戻り値は[`Uint8Array`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array)。

# デコード
“`js
function decodeUTF8(buffer) {
const decoder = new TextDecoder();

TypeScript(JavaScript)におけるnullとundefinedそしてfalsy値

# はじめに
JavascriptやTypescriptには従来言語のnullに値する表現が二つあります。
「null」と「undefined」です。今回はTypescriptにおけるこの二つの扱いについてまとめていきます。
既に詳しく説明されている方はたくさんいらっしゃるので、要点だけまとめました。

## 追記
* 例で出したプログラムが間違えていたので修正いたしました。(@t9hr4 さんありがとうございます！)

# 結論
* 「null」は使わない。
* 比較するときは厳密等価演算子「===」を使うようにしよう
* 「falsy値」を比較せずに判定に使うのはやめよう

# 「null」を使わない理由

## null
* 「代入すべき値が存在しない為、値がない」という意味
* 自然発生しない
* 一部の ~~DOM系~~ APIがnullを返すことがある
* リテラルなので、「null」という名前の変数を作成することはできない
“`ts
const null = {}; // error
typeof null; // ‘object’
“`

## un

netflex-clone

Steps
1.Demo App
2.Get TMDB API Key
3.Create a react app
4.setup firebase

firebase login
firebase init
firebase deploy

“`
npm install -g firebase-tools
“`

React: エフェクト(useEffect)を使わなくてよい場合とは

本稿執筆時現在、「React Docs」(BETA)の公開が進んでいます。その中の記事のひとつ「[You Might Not Need an Effect](https://beta.reactjs.org/learn/you-might-not-need-an-effect)」は、副作用のフック[`useEffect`](https://ja.reactjs.org/docs/hooks-effect.html)をいつ使うのか、あるいは使わない方がよいかについてのていねいな解説です。初心者にとってはもちろん、中級者以上にとっても役立つでしょう。本稿は基本的に記事の情報は網羅しているものの、邦訳ではありません。足りない部分は補ったり、説明の仕方を改めたり、不要と思われる記述は削除しました。

エフェクトは、Reactの仕組みからの非常口です。Reactの「外に出て」コンポーネントを外部システムと同期できます。たとえば、React以外のウィジェットやネットワーク、あるいはブラウザDOMなどです。外部システムが関わらないなら、エフェクトは要りません。コンポーネントの状態を、プロパティや状態

Python,Ruby,PHP,Java,JavaScript,Perlの連想配列の比較

Qiita > プログラミング言語の比較

Python,Ruby,PHP,Java,JavaScript,Perlの連想配列の比較

# Python

https://qiita.com/hz1_d/items/407dd13f90a8a4533d23

# Ruby

https://qiita.com/ryouya3948/items/5ea2049abfd92eb1ded7

# PHP

https://qiita.com/shizen-shin/items/8383e27c7cf16c0ccb4a

# Java

https://qiita.com/taropon_wwwww/items/95477174ac16287c9744

# JavaScript

https://qiita.com/yrn03m/items/87e223acc6e733b50429

# Perl

https://perlzemi.com/blog/

好きな単語でクロスなワードパズルを作って共有できるWebサービスを作った

クロスなワードパズル[^1]を作って共有できるWebサービスを作りました。
こんなサービスです。
[](https://kurehajime.github.io/hash4word/?code=44Kk44Oz44Kv44Oq44Oz44KwLOODreODg-OCr-ODnuODsyzjgqzjg47jg7Pjg4njg63jg5Us44Oq44Oz44KvLOODsyzjg6os44KvLOODrQ)

ここで遊べます。

https://kurehajime.github.io/hash4word/

## できること

### 問題を解く

バラバラに散りばめられた単語を入れ替えて、あらかじめ指定された4単語を、→方向と↓方向に作ればゲームクリアです。

[![image.png](https://qiita-image-store.

javascriptのクロージャ（Closures）とは

# クロージャ（Closures）とは
スコープを利用して外部からのアクセスを制限すること。

まずは、次の例文を見て説明します。

~~~javascript:javascript
class AnnualSalary {
salary: number
private bonus: number = 1000000
constructor(salary: number) {
this.salary = salary
}

public get annualSalary() {
return this.salary + this.bonus
}
}
~~~
このコードは関連する役割をするメソッドや変数を一つのクラスにまとめてカプセル化したクラスです。このコードを見ると、privateで設定されたbonusは外部からはアクセスすることができない状態で、getメソッドのannualSalaryのみが参照しています。
では、いつこのようなクロージャを使うでしょうか。

# クロージャの利用場面
### カプセル化した時
上記のコ

はじめての Chrome 拡張 最小構成ハンズオン

# はじめに
これは初めて Chrome 拡張を作る人が超基本を理解するのを手助けするための資料です。
[ユニークビジョン](https://qiita.com/organizations/uniquevision)社内のハンズオン勉強会の資料として作りました。

:::note info
この記事は Manifest V3 に準拠しています。
:::

# Chrome 拡張の全体像
Chrome 拡張のざっくりとした全体像を図にまとめてみました。

機能ごとに説明します。

## ポップアップウィンドウの表示
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474068/0df2ffb4-943f-2224-bcb1-4323f44cc9a6.p