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

【React】クラスコンポーネント

## クラスコンポーネントとは？？
* 以前主流だったコンポーネントの作り方
（現在の主流は2019年で追加された関数コンポーネント+Hooks）

## クラスコンポーネントの問題点
1\. Class構文が必要で複雑になりがちなため、面倒かつコードを追いにくい
2\. ステートの管理が複雑なため、保守性が低い

## 書き方
まずは関数コンポーネント
“`typescript
const Example = () => {
return

関数コンポーネントだよ！！

;
};

export default Example;
“`

次にクラスコンポーネント
“`typescript
import { Component } from “react”;

//Componentクラスを継承する
class Example extends Component{
//jsxはrenderメソッドの中のreturnに記載する
render(){
return (

クラスコンポーネントだよ！！

)
}
}
`

Expressのアプリケーション作成のメモ

# 環境
+ macOS Monterey
+ noed v18.4.0
+ npm 8.12.1
+ express 4.16.1

# 前提
Node.jsがインストールされている。

# Express Generatorのインストール
“`
npm install -g express-generator
“`

# Express Generatorでアプリケーション作成
“`
express –view=ejs アプリケーション名
“`

# npmのインストール
“`
npm install
“`

# アプリケーションの実行(Windows)
“`
node vin/www
“`

# アプリケーションの実行(macOS)
“`
node bin/www
“`

# npmで実行（コレが楽）
“`
npm start
“`

# Webブラウザで確認
http://localhost:3000/にアクセス。

熱帯夜に加山雄三の「海その愛」が流れるようにした

**寝れない夜のお供が欲しい**
———-
みなさんは**暑がり**ですか？それとも**寒がり**ですか？
私は**極度の暑がり**です。
夏は冷房がないと寝付くとこすら困難だ。

そんな暑くて寝れない夜に暑い歌を流して眠りの手助けをしてもらおう。

そこで選んだ曲が加山雄三さんの「**海その愛**」だ。

**完成品**
———————–
1分おきに気温を確認して音楽を流してくれる。

海その愛 pic.twitter.com/QDHpAvcYnS

— ちゃんみな (@Chanmina_IT) November 1, 2022

LINEの画面では

Node-REDのフローで書き出したものが
![image.png](https://

良いコードは良い名前から生まれる – Good Concepts in Programming –

# 概要
プログラミングの良い概念を理解するとプログラマーレベルが上がると考えています。
良い概念は特定のプログラミング言語に縛られないので、様々なプログラミング言語で役に立ちます。
前回は[やらない理由を書いてやらない（早期リターン）](https://qiita.com/masaki_nakada_ari/items/b702b38c4ac2dee7561d)を紹介しました。
今回紹介する良い概念は「良いコードは良い名前から生まれる」です。

# 良い名前から良いコードが生まれるとは
プログラミングでは変数名、関数名、クラス名などに名前を付けなければいけません。
人間がコードを理解するときにコードの可読性はとても重要です。
意味のある名前を付けるとコードの可読性は抜群に上がります。

# サンプルコード
名前の付け方でコードの見え方に違いがあるのでしょうか？
意味のない名前を付けたコードと意味のある名前を付けたコードを比較してみましょう。

## 1.変数名に良い名前を付ける
商品の税込金額を計算するサンプルコードです。

“` bad_variable_name.js
// a

JavaScriptのthisを8種類試してみた

## はじめに
JavaScriptの`this`の使い方で苦戦をしたので、整理と備忘録のために8種類の`this`の動きを試してみました。
主にこちらの2つの記事を参考に勉強した内容の記事となります。
– [ui’s blog JavaScript JavaScriptの”this”を完全解説！！【開眼JavaScriptまとめ】](https://ui.appleple.blog/JS/javascript-this.html)
– [JavaScriptのthisについて](https://qiita.com/hu-yu/items/74529effd585de1d70ca#default-this-context–object-literalsthis)

## 1. トップレベル（関数外）のthis
**結論**
`this`の参照先 = グローバルオブジェクト= windowオブジェクトとなる。

“`JavaScript: トップレベル（関数外）のthis
“use strict”;

console.log(this) // window

this.a

Voltaって結局何がすごいん！？

# きっかけ
Nodeのバージョン管理を選定するにあたり、Voltaについて調べたので、そのことをまとめておきます。

# Voltaのここがすごい！
Voltaは以下の3点において優れています。
①速い
②堅実
③ユニバーサル

詳しくみていきましょう。

### ①速い
Volta は Rust 製であるため、他のバージョン管理ツールより動作が高速です。

### ②堅実
Voltaはバージョンを固定することができます。

package.jsonに記録されていて、共同開発者がgitからインストールするとその固定されたバージョンがインストールされ、プロジェクト単位での切り替えを自動で行なってくれます。

ただし、共同開発者がVoltaをインストールしている場合に限ります。

### ③ユニバーサル
Windows・Mac・Linux。どの OS でも作動します。

# バージョンの固定って何？？
①、③については説明は特に必要ないかと思うので、以下では②について詳しく掘り下げていきます。

volta pinコマンドを使用することで、各プロジェクトディレクトリ内でNodeとn

勉強しようと YouTube を見ると面白い動画を再生してしまう件を解決する

# はじめに
　私は、よく勉強しようと YouTube を見ても、おすすめに流れてくる誘惑をクリックしてしまいます。他のウェブサイトは Norton Family さん（カテゴリーによるウェブサイトの閲覧制限）と Microsoft Family Safety さん（パソコン全体の起動動時間制限）のお力を借りて見れなくしているのですが、YouTube はチャンネルごとに設定することができませんでした…。
　もちろん、自制心をもてという話ですが、少しでも「あ、みたらだめだ?」と気づけるように警告を表示する Chrome 拡張機能を作りました。学生の皆様は、ぜひご利用ください！
? Chrome で勉強用のユーザーを作成してもいいですが、Windows のユーザーアカウントごと分けておくことをおすすめします。

# 作品：Chrome 拡張機能「YouTube Study Focus」
作る過程をご紹介する前に、まずは出来上がったものを紹介します！
![YouTube-Study-Focus_qiita_screenshot.jpeg](https://qiita-image-stor

eventオブジェクトと他の値を複数取得する(渡す)方法

## はじめに
– Reactを触っていたときにイベントハンドラ関数の引数に、propsで渡ってきた引数に加えてeventオブジェクトも渡したい時にどうするか迷ったため、共有します。
– 想定読者はJSやReactなどのフロント技術を触っている方とします。

## 実現したいこと
– イベントハンドラの関数の引数として、eventオブジェクトともう一つ任意の引数の値を渡したい。

## 前提(準備)
– 今回はReactでサンプルを動かします。

## 参考

### 修正前
– 修正前では、propsから受け取ったtodosの値が取得できず、
“`Javascript
const Form = ({ todos, addedTodo }) => {
//…(略)

// ここでtodosを取得したい
const addTodo = (e) => {
e.preventDefault();

const newTodo = {
id: todos.length + 1, // todosが引数で渡っていないため、idが取得できない

paizaラーニング レベルアップ問題集 線形探索メニュー応用編 JavaScript 部分数列

部分数列 (paizaランク C 相当)

https://paiza.jp/works/mondai/sequence_search_problems_advanced/sequence_search_problems_advanced__before_after_step4

# 解答例(for,if)
forとifで解きます。答えはansとします。iが一つも存在しなかったら-1なので、初期値-1とします。
aの部分数列がbになっているか、aの先頭から順に調べます。
一番小さいiが見つかったら、そこで線形探索を終わります。
“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);

const [n, m] = lines[0].split(” “).map(Number);
const a = lines[1].split(” “).map(Number);
const b

paizaラーニング レベルアップ問題集 線形探索メニュー応用編 JavaScript 連続する k 要素 2

連続する k 要素 2 (paizaランク C 相当)

https://paiza.jp/works/mondai/sequence_search_problems_advanced/sequence_search_problems_advanced__before_after_step3

#　解答例
最も大きいiを答えるので、最大値が等しくても、ansを更新する。
“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);

const [n, k] = lines[0].split(” “).map(Number);
const a = lines[1].split(” “).map(Number);

let ans = 0;
let max = -Infinity;
for (let i = 0; i <= n - k; i++) { let sum = 0;

paizaラーニング レベルアップ問題集 線形探索メニュー応用編 JavaScript 連続する k 要素 1

連続する k 要素 1 (paizaランク C 相当)

https://paiza.jp/works/mondai/sequence_search_problems_advanced/sequence_search_problems_advanced__before_after_step2

# 解答例
k個の和なので、和の先頭は、aのn-kまで調べます。和については、iからi+k-1までを求めます。
“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);

const [n, k] = lines[0].split(” “).map(Number);
const a = lines[1].split(” “).map(Number);

let ans = 0;
let max = -Infinity;
for (let i = 0; i <= n - k; i++) {

paizaラーニング レベルアップ問題集 線形探索メニュー応用編 JavaScript 連続する 3 要素

連続する 3 要素 (paizaランク C 相当)

https://paiza.jp/works/mondai/sequence_search_problems_advanced/sequence_search_problems_advanced__before_after_step1

# 解答例(for,if)
forとifを使って解きます。
“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);

const n = Number(lines[0]);
const a = lines[1].split(” “).map(Number);

let ans = 0;//最も小さいi
let max = -Infinity;//最大値
for (let i = 0; i <= n - 3; i++) { const sum = a[i] + a[i + 1] + a[i

paizaラーニング レベルアップ問題集 線形探索メニュー応用編 JavaScript 前後関係の基本

前後関係の基本 (paizaランク C 相当)

https://paiza.jp/works/mondai/sequence_search_problems_advanced/sequence_search_problems_advanced__before_after_step0

# 解答例(for,if)
forとifを使って普通に解きます。`a[n-2]=a[n-1]`まで調べます。
“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);

const n = Number(lines[0]);
const a = lines[1].split(” “).map(Number);

let ans = 0;
for (let i = 0; i < n - 1; i++) { if (a[i] === a[i + 1]) { ans += 1; } }

【React】同じpropsから複数のローカル変数を取り出す時は、分割代入が便利な件

# はじめに

タイトル通りなのですが、同じpropsから複数のローカル変数を取り出す時は、
[分割代入](https://typescript-jp.gitbook.io/deep-dive/future-javascript/destructuring)が非常に便利です。

# 分割代入

このようなコードがあるとします。

“`typescript
export const CompanyPanel = memo((props: Props) => {
const id = props.company.id;
const name = props.company.name;
const deleted = props.company.deleted;
“`

分割代入を使うと…

“`typescript
export const CompanyPanel = memo((props: Props) => {
const { id, name, deleted } = props.company;
“`

このように省略してスッキリと書くことができるので便

wysiwygエディタのライブラリを調査・選定してみた

# 背景
今後開発していくプロダクト内ではエディタを組み込む必要があり、その中では文字色変更やルビを振るなどリッチなテキストエディタとしての要件があります。
リッチなテキストエディタを実現する方法の一つとしてmarkdownが挙げられます。
これはエンジニアには馴染みがありますが、一般ユーザーが記法を覚えるにはハードルが高く利用を諦めてしまう恐れがありました。
そこで、より直感的に操作することができるwysiwygを取り入れることとなりました。

# wysiwyg（ウィジウィグ）とは
コンピュータのUIに関する用語で、ディスプレイの表示と処理内容が一致するように表現する技術のことを指し、
What You See Is What You Get（見たままが得られる）の頭文字を取ったもの。

# 前提となる使用技術
– Typescript
– React（またはVue）

基本的にはReactでの実装を前提に調査を進めました。

# 結論
### Quillに決定
https://github.com/quilljs/quill

https://quilljs.com/

# 選

JS/TS GraphQL環境でFactoryBot Fakerのような環境を作った

テスト書くとき、mock定義面倒ですよね!!!
storybookでも同じコード書いて…mockだけで100行超えてしまうと本来書くコードが何か分からなくなったりしますよね

RailsのFactoryBotのような環境を作りましたので紹介します

## 紹介するもの完成形(使用方法)

“`index.stories.tsx
import { createList } from ‘../factory_helper’
import { newUser, newUserEmail } from ‘../factories’

~~~

Default.args = {
fragment: {
users: createList(newUser, 3), // [{__typename: ‘User’, id: ‘u:1’, nickname: ‘Jerrell49’, phone: ‘(574) 708-9283’, userEmails: Array(1)}, …]
email: newUserEmail() // {__typename: ‘UserE

nodejsで何も読み込んでないのにMODULE_NOT_FOUNDするときの対処法

先日から事情があってWSLが使えなくなったのでウィンドウズ側でNode.jsを触っていました。
とりあえずコンソールでハローワールドしようと思ったら、以下のエラーが

“` at Module._resolveFilename (node:internal/modules/cjs/loader:995:15)
at Module._load (node:internal/modules/cjs/loader:841:27)
at Function.executeUserEntryPoint [as runMain] at node:internal/main/run_main_module:23:47 {
code: ‘MODULE_NOT_FOUND’,
requireStack: []
}
“`

調べてみたところ、C:\Users\\{ユーザ名}\OneDrive以下のjsファイルにNode.jsを実行するとエラーが出るらしい。OneDrive下のマイドキュメントにスクリプトを置いていたので、C:\Users\\{ユーザ名}\Docume

ruby.wasm で遊ぶ ～Web Workerを使ってバックグラウンドで動かすまで

Ruby 3.2 から WASI ベースの WebAssembly がサポートされるということで、すでに Preview 版も公開されています。

この記事は、正直 WebAssembly とか WASI とかよく分かっていない[^1]人間がブラウザ上で Ruby を色々動かしてみる記事です。とりあえず動けばいいという感じなので、おそらく無駄な記述も多いかと思います。ご了承ください。

[^1]: そもそも JavaScript だってよく分かっていないし、Ruby だって分かっていると言えるか怪しい。

# 作るもの

テキストボックス等に記述された任意の Ruby スクリプトをブラウザ上で動かして、その実行結果を得られるようなもの。

要するに [RubyOnBrowser](https://rubyonbrowser.ongaeshi.me/) とか [TryRuby](https://try.ruby-lang.org/playground/) とかの二番煎じを作りたいのです。

# とりあえず Ruby スクリプトを動かす

[ruby.wasm の github](http

【JavaScript】数千行のコードを数行にしてしまう Proxy の魔力

こんにちは。[ぬこすけ](https://twitter.com/nuko_suke_dev)です。

最近（2022/10/20）に、ゆめみさんがクイズを出しました。

https://qiita.com/Yametaro/items/845b7968720d04241393

ゆめみさんの記事を読むと、 `Proxy` というオブジェクトが出てきました。
記事のタイトル通り「代入したのに、代入されない」、摩訶不思議なオブジェクトです。
`Proxy` って一体何者なんでしょうか？

ゆめみさんのクイズの例では **やめ太郎さんがたかしに改名するのを断固拒否する** 例ですが、
実は `Proxy` には **数千行のコードを数行にしてしまう魔力** も持っているのです。

今回は JavaScript の `Proxy` について魔力についてご紹介したいと思います。

本来、 `Proxy` は難しい内容ですが、 `setTimeout` の時と同じく、 **できるだけ初心者の方にもわかりやすく説明していきたい**と思います。

https://qiita.com/nuko-suk

obnizのスピーカーを使って家を学校みたいにしたかったが・・・

### obnizのスピーカーを使って家を学校みたいにしたかったが・・・
#### 1.在宅勤務で集中しすぎる問題
2020年春にコロナ禍が始まり、3年が経過する。
コロナ禍をきっかけに在宅勤務がスタートし、週3日在宅・週2日出勤の生活に慣れてきた。
ただ、1点なかなか解決しない問題がある。
在宅勤務だとたまに**集中しすぎてしまう**ことがあるのだ。

集中することはいいことだ。しかし、集中しすぎることは逆に体に良くない。
まばたきの回数が減ってドライアイになるし、同じ姿勢が続くと肩や腰が痛くなる。
学生時代は時間割が決まっており、強制的に休憩時間が取れたが、
社会人である以上、自分自身で管理しなければいけない。
最近、LINE botなどを覚えたので、 **家が学校っぽくなるチャイム**を作成してみることにした。

#### 2.作成したかったもの
作成したかったものは以下のとおり。
　　①obnizのスイッチを押す
　　②タイマー開始のLEDが光る
　　③タイマー開始のチャイムが鳴る
　　④25分計測
　　⑤終了メッセージが鳴る
　　⑥タイマー

元記事を表示