f@ctor

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

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

【React】レンダリング1

## レンダリングとは？？
コンポーネントからDOMノードを作成するための情報の読み込みを行うこと。
レンダリングはDOMに反映させて、***画面を描写すること***ではない。

画面に反映させることをレンダリングと思っていたんですが、認識が違ったんですね…

## レンダリングされるタイミング
Reactでは`state`の値が更新されたときにレンダリングが発生する。
（更新関数が呼ばれ、元々持っていた変数と全く別のものだった場合）

## Reactでのstate比較方法
Reactでは`Object.is`による比較アルゴリズムによって
▷true(stateが同じ)なら***レンダリングを行わない***
▷false(stateが異なる)なら***レンダリングを行う***

## コードで確認
ボタンをクリックした際にレンダリングが発生するのか確認を行う

1\. ***数値、文字列***の比較
***☆レンダリングされない場合***
“`typescript
const RenderCheck = () => {
console.log(“レンダリング？”);

元記事を表示

JavaScriptによる階乗

## コード

? [live demo](https://codepen.io/kensoz/pen/dyeEqMv)

+ パラメータ`n` : n の階乗
+ BigInt : `Number`で表すことができない大きな数を表現したり操作したりするために使用します

#### Common Number
“`js
const factorial_recursion = (n) => {
if (n <= 1) return 1; return n * factorial_recursion(n - 1); }; console.log(factorial_recursion(5)); //120 ``` #### BigInt ```js const factorial_recursion_bigInt = (n) => {
if (n <= 1) return 1; return BigInt(n) * BigInt(factorial_recursion_bigInt(n - 1)); }; console.log(factorial_recursion_

元記事を表示

ブラウザバックで戻った先の画面でブラウザバックを検知して処理したい

# ブラウザバックを検知したい

![スクリーンショット 2022-10-19 1.49.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536974/45d7bbb7-e412-87ca-4def-0cea5befba53.png)

送信ボタンを一度押されると、2重送信防止のためボタンを非活性にして操作できないようにすることがあります。
その場合、仮にブラウザバックを行うと非活性のままキャッシュされてしまっているので、リロードしない限りボタンが活性状態へ戻りません

そこで、ブラウザバックを検知してボタンを活性化させる対応を試みました

# 解決した

“`sample.js
window.addEventListener(‘pageshow’, イベント);
“`

ページを読み込んだタイミングでイベントを拾えるようにしました。

また、[loadイベント](https://developer.mozilla.org/ja/docs/Web/API/Window/load_event)と

元記事を表示

API設計まとめ

## はじめに

自分は2021年に新卒でWeb系の開発会社にフロントエンジニアとして入社し2022年で2年目になります。

実務ではReact×TypeScriptを利用したフロント周りとNode.js(Nest)やRailsを用いたバックエンド(API)の開発をしています。

その中で使っていたAPI設計について改めて学び直したのでまとめて行きます。

## この記事の対象者

– エンジニア初心者から中級者
– APIについて学びを深めたい人

## この記事の目標

– APIについて学ぶ
– 我流ではなく正しいAPI設計について学ぶ

## この記事でやらないこと

– 具体的にコードを用いたAPI設計の書き方の説明

こちらに関してはOpenAPI×Swaggerについて別記事でまとめる予定です。

## APIについて

### APIとは

APIは”Application Programming Interface”の略で、直訳すると「**アプリケーションを使プログラミングを使ってつなぐ**」という意味になります。

### Web APIとは

Web APIとは、

元記事を表示

みんなで一緒に React@18.3 の use() に慣れておこう

# 初めに

React 18.3 で `use()` なる新しい Hook が登場しそうなので、あたふたしないように今のうちに慣れておきましょう。

# 本題

いきなりですがソースです。

賢い人達にはすでにお馴染みの(?) **Render-as-You-Fetch** を駆使した React@18.2 までの旧来のソースです。

“` sample1.html







この墓の凄いところは、太宰と妻の墓の向かいに、森鴎外の墓もあることだ。禅林寺に訪れると、時空を超えて（とはいえ100年やそこらなのだが）彼らと空間を共にしている

元記事を表示

【MapLibre GL JS】ポイントデータを表示する

## はじめに
この記事は#30DayMapChallenge2022 1日目の記事です。
テーマはPointです。
MapLibre GL JSを使ってPointデータを地図上に表示してみます。

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

https://30daymapchallenge.com/

## Pointとは
ベクタデータの3要素（ポイント・ライン・ポリゴン）のうちの1つ。
地図上の1点を指します。

## 地図表示
上野駅周辺を表示してみます。

```index.html




サンプル

元記事を表示

TurboLinksでWindowのLoadイベントが発火できるようにする

## 環境
Rails5.2

## はじめに
Railsには、画面表示を高速に行うために、Turbolinksという仕組みが備わっています。Turbolinksを使うと、画面遷移を行うときに、HTML全体を置き換えるのではなく、Bodyタグだけを置き換えるため、高速に画面遷移ができるようになります。TurbolinksはRailsのオプションではなく、標準で備わっている機能になります。よって、Railsを使うときは、Turbolinksも一緒に使うことになります。しかし、Turbolinksが有効になっていると、何かと不便な状況が出てきてしまうため、TurbolinksはRailsから外すといった選択をしているエンジニアも多いようです。Turbolinksは、絶対に使わないといけないというものではなく、Railsから意図的に外すことができます。こういう話を聞くと、駆け出しのエンジニアであれば、このように考えるかも分かりません。「Turbolinksを使うとトラブルの元になるのなら、最初から使わない方が無難なのではないか」いきなり、このように考えるのではなく、まずは、Turbolink

元記事を表示

Google Apps Script（GAS）でメールを送信メモ

## メール送信

メール送信はびっくりするくらい簡単でした。

今までGASで試すを全然やってなかったけど早く知っておくべきだった...

```js
function sendMail(to = 'hogehoge@hoge.com') {
const subject = '~~件名~~'; // メールの件名
const options = {
name: 'のび'
};

let body = `メール本文`;
GmailApp.sendEmail(to, subject, body, options);
}
```

optionsにfromを指定できるけど自身のアドレスかエイリアスじゃないとエラーになります。

```js
const options = {
name: 'のび',
from: 'hogehoge@yahoo.co.jp' // これだとエラーになる。
};
```

偽装できちゃいますからね。

## スプレッドシートから情報取得して送信

mailbodyシートのA1セルに本文を書いておく想定で

元記事を表示

Netlify のBuild hooksはキャッシュを持っている

## 状況

CMSのサーバーを変更した際に、何度Netlifyのキャッシュをクリアしても古いCMSの情報が読み込まれて困った

## 結論
NetlifyのBuild hooksはキャッシュを持っているようで、新しくhookを作成しなおせば解決！

元記事を表示

全人類寝顔晒そう計画【スクショ撮影編】

### お昼過ぎの時間は眠気との戦い。
お昼下がりの時間はお昼ご飯の影響で血糖値が急激に上昇したり、消化にエネルギーが使われ、脳にエネルギーが回らず眠たくなることが多いそうです。かくいう私もその一人で、お昼の時間は眠たい自分と戦うために昼寝の時間を入れてみたり、ガムを噛んでみたり試行錯誤の日々です。

### 一つの野望が生まれた。
そんな眠気と戦う日々の中で1つの野望が湧きました。
**みんながうとうと顔を晒したらもっと世の中は寛容になるんじゃないか。**
「昼過ぎはみんな眠たい」ということが認知されたら、きっと社会はもっと寝ることや居眠りに寛容になるんじゃないかなと思います。日本の多くの企業がシエスタ(お昼の長めの休憩)を導入するかもしれません。
今回はその野望の第一歩として、リモートワークをしている際にうとうとしている様子をスクリーンショットで撮影してくれるものを制作しようと思います。
名付けて **「うとうとウォッチャー」** です。

### 実際の結果がこちら
TeachableMachimeを用いて自分がうとうとして、うつむいている様子をスクショに撮ってくれるようにしまし

元記事を表示

JavaScriptで楕円曲線暗号の署名と検証をする（Web Crypto API）

# ソースコードだけ見たい人のために

## 鍵ペア作成

```bat
$ openssl ecparam -genkey -name prime256v1 -out p256.keypair
$ openssl ec -in p256.keypair -outform PEM -pubout -out p256.publickey.pem
read EC key
writing EC key
$ openssl ec -in p256.keypair -outform PEM -out p256.privatekey.pem
read EC key
writing EC key
$ openssl pkcs8 -topk8 -inform PEM -outform PEM -nocrypt -in p256.privatekey.pem -out p256.pkcs8.pem
```

生成されたモノ：
- p256.keypair: 鍵ペア（秘密鍵）
- p256.publickey.pem: 公開鍵 --- 署名検証に使う
- p256.privatekey.pem: 秘密鍵

元記事を表示

heic/heifの判定をしてみたのでJSでの実装を公開する

## はじめに
先日、私の所属するチームでheic/heif画像をjpegに変換する処理を実装したのですが、その際に、処理に渡されたファイルが本当にheic/heif形式であるかを判定する必要がありました。
この記事では、heic/heif判定を実装する場合に必要な情報と、参考実装を記載します。

## ファイルタイプの判定に必要な情報
画像に限らずですが、たいていのバイナリファイルはファイルの先頭部分にファイルタイプを含むさまざまな情報を入れています。
この情報を参照することで、そのバイナリファイルはどんな形式のファイルなのか？ を判別できます。
身近なところですと、[fileコマンド](https://github.com/file/file)はこの情報を使ってファイルタイプやメタデータの表示をしているようです。

今回のように自前で判定を実装する場合には、

- ファイルのどこに必要な情報が入っているのか？
- ファイル形式を示す情報はどんな形で入っているのか？

の2点を事前に知っておく必要があります。

[nokiatech/heif](https://githu

元記事を表示

涼宮ハルヒに俺はなる！～自分だけのSOS団をつくる～

## 涼宮ハルヒに俺はなる

**やりたいこととしては以下です！**

お分かりいただけたでしょうか？

**私は涼宮ハルヒになります！**

そして、こちらが私をハルヒにしてくれるサービスです！:bowtie:

https://codepen.io/UmeTanTan/full/yLEYLGN

はい！
ちゃんと説明します。

## やりたいこと

### なぜつくりたいのか？
皆さん「涼宮ハルヒの憂鬱」というライトノベルはご存じでしょうか？

ざっくり

元記事を表示

【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分おきに気温を確認して音楽を流してくれる。

LINEの画面では
![thumbnail_IMG_3064.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2885188/cc01dced-58fe-cb8d-ffef-0102f4827f46.png)

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

元記事を表示

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

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

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

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

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

``` bad_variable_name.js
// a

元記事を表示

OTHERカテゴリの最新記事