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

みんな大好きリーダブルコードまとめ①

# 対象者
当方と同じく、駆け出しエンジニアの皆様。また、初級エンジニアの方もこんな内容だったなと思いながらお読みいただければ幸いです。
※当方、駆け出しエンジニアですので間違いやご指摘あれば、コメントいただければ幸いです。

# リーダブルコードとは？
駆け出しエンジニアや、初級エンジニアの方々のバイブル的書物。
以前、エンジニアの方とお話しさせていただく機会がありやはりこちらの本は読んでおいて損はないとのことで、購入して少しずつ読み進めていこうと考えています。

# 第1章　理解しやすいコード
#### メインテーマ
本章のメインメッセージは、『良いコードとは、ただ簡潔に書けば良いということではなく、共通認識しやすいコード(著書の中では、「安心」と言われる)が良いコードなんだよ〜。』と4ページほどで説明してくれています。

#### ディテール
具体的な例で話すと、本章には動作が同じコードを2種類記載されています。
一方は2行ほどで記述されているがエンジニアの直感で書かれたコードで読めなくはないが、どのような動作が行われるのかを理解するには少し時間がかかります。
他方、7行のある一

流行りのSolid.js触ってみた

## 概要
Solid.jsがReactに変わるライブラリとして注目されてるらしいので流行りに乗っていきます。

## Solid.jsとは
Reactに大きく影響を受けたかなり新しいライブラリです。
フロントエンドフレームワークのランキングでは新興ながら満足度はかなりの人気ぶり
[The State of JS 2021](https://2021.stateofjs.com/ja-JP/libraries/front-end-frameworks/#front_end_frameworks_experience_ranking)

### パフォーマンス

[公式サイト](https://www.solidjs.com/)によると他のライブラリと比べてかなり早い。
公式曰く
>頑張らなくても速くなるということです。

らしい。
![スクリーン

Node.jsでString.ReplaceAllが使えないんだが！！

## 使えなかった

– とある案件を引き継ぎ、Express.jsで書かれたサーバーサイドを書いていた。
– CSV的にカンマで区切られた数値列をスペース区切りに変更したかったので、

“`javascript
const nums = ‘0.0,10.0,20.0,30.0,40.0,50.0,60.0’
// こんな感じの文字列を

// 0.0 10.0 20.0 30.0 40.0 50.0 60.0
// ↑こんな感じのスペース区切りにしたい

// ということで
const nums_space = nums.replaceAll(‘,’, ‘ ‘)
// こんな感じで処理したい
“`

– こんな感じのことをした

– すると `nums.replaceAll(…) is not function` みたいな感じで怒られた

## Node.jsのバージョンが古かった

– 調べてみると単純な話、Node.jsのバージョンが古くて `String` 型に`replaceAll`が実装されていないということだった
– `replaceAll`は比較的新しいES

【React / Next】POST と PUT をカスタムフックで1つにまとめて、使用側はどちらかを意識しないようにする

個人的な備忘録です。

# 環境
– react: 17.0.2
– react-hook-form: 7.28.0
– next: 11.1.3

# サンプルコード
“`tsx:postHandler
export const useProfileNew = () => {
const { httpClient } = useHttpClient();

const profileNewHandler = async (data: FormData) => {
const requset: Request = {
title: data.title,
body: data.body,
};

const response = await httpClient.post(API_PATH);

return response?.data;
};

return {
profileNewHandler,
};
};
“`

“`tsx:putHandler
export con

TypeScriptでclass名の文字列から動的にclassのインスタンスを生成する

クローラーの開発をしていて、Site1Crawler,Site2Crawlerといった形で数字の違うクローラーを作成、class名から動的に別々のクローラーのインスタンスを生成したかったのでその方法です。

ディレクトリは適当でいいのですが、今回4つのファイルを作成します。

– Crawler.ts
– 量産されたclassをまとめて書いておくファイル
– BaseCrawler.ts
– 継承される元となるclass。インターフェースとして書いてもいいが今回はclassで作成する
– Site1Crawler.ts(Site2Crawler.tsなどこのファイルを量産していく)
– BaseCrawlerを継承した動的に呼び出されるclass
– CrawlerFactory.ts
– 動的に呼び出す部分を記載するFactory class

まず最初に継承元となるBaseCrawlerのclassを作成します。

“`Javascript:BaseCrawler.ts
export default class BaseCrawler
{
pu

jQuery要素追加、削除　簡易まとめ

# 初めに

今回の記事ではAjaxを用いたアプリケーション作成を行った際に多用したjQUeryでの要素追加、削除の方法を復習も兼ねて
簡単にまとめていこうと思います。

## 1　要素追加
アプリケーション作成の際に`要素追加`で用いたのは下記の4つです
“`js
$(a).append(`HTML要素`);
$(a).prepend(`HTML要素`);
$(a).after(`HTML要素`);
$(a).before(`HTML要素`);
“`
基本的な使い方を説明するとコードの`a`の箇所にはclass名、id名、タグ（div、pなど）を入れて要素をどこに追加するのかを指定します。
具体的な使い方としては下記の通りです。
“`html

• 佐藤さん
• 田中さん
• 加藤さん

“`
上記のようなコードを書くことに

チェックボックスが押されたらどこが何番目のチェックボックスなのかを特定し、マークダウンを更新する

Qiita Teamでは、タスク管理なども行いやすいように、記事中のチェックボックスを押すとマークダウンも変更されるようになっています。

今回、元々この処理の一部がjQueryで書かれていたのをReactで書き直したので、整理も兼ねて記事に起こしています。

構成としてはすごく簡易的に書くと下記の図のような感じになっています（コンフリクトなどによるエラー処理などは説明の簡潔化のため省略）。

“`mermaid
sequenceDiagram
autonumber
actor user as ユーザー
participant browser as ブラウザ
participant server as サーバー
user->>browser:　チェックボックスを押す
browser->>browser: 押されたチェックボックスが何番目なのかと押された後の状態を確認する
browser->>browser: 2の情報をもとにマークダウンを変換する
browser->>server: 3で生成したマークダウンをサーバ

input type=”date” iOSの日付入力のクリアボタンが機能しない

初めに

webアプリをReactで作成していまして、` input type =”date” `を使用して日付の値を取得していたのですが、PCだと削除ボタンが機能し、iosだと機能しないという現象がおこりました。
解決するのに時間がかかりましたので忘記録です。

解決したコード

“`react:app.jsx

import React,{useState} from ‘react’;

export default function App(props) {
// 日付の値を格納する
const [inputDate, setInputDate] = useState({ date: “” });

// 日付の値を取得する処理
const handleOnChange = (e)=>{
const target = e.target;
const { name } = target;
const { value } = target;
//日付のセット
setI

【JavaScript】ヘッダー position:fixed 要素が下に入り込んでしまう件

headerをfixedで固定すると、header以下の要素が下に入り込んでしまいます。
今回はスタイルシートにmargin-topをベタ書きするのではなく、JSで書いてみました。

“`js
const header = document.querySelector(‘header’);
const headerHeight = header.offsetHeight;
const main = document.querySelector(“main”);
main.style.marginTop = `${headerHeight}px`;
“`

JavaScriptの.__proto__とprototypeとinstance

# 初めに
inheritanceについて書くとき、自分がプロトタイプチェーンへの認識が足りないと認識したから、もう一度調べてまとめてみました。読みやすくなるため相関図も作ってみました。
主な参考資料はこちらです↓
[How does JavaScript .prototype work? – stackoverflow](https://stackoverflow.com/questions/572897/how-does-javascript-prototype-work)
[__ proto __ VS. prototype in JavaScript](https://stackoverflow.com/questions/9959727/proto-vs-prototype-in-javascript)

自分の考えと考察も入れてこの文章を書きましたので、自分勝手の解釈も含みます。

まずは名詞の解釈について：
– `.__proto__`：プロトタイプチェーンの参照（reference）、プロトタイプチェーンの本体です。（隠しプロパティ[[prototype]]を暴くアクセ

[javascript] アロー関数の書き方

書き方
“`
const OpenApp = () => {処理};
“`

今まで`function(){処理};`の書き方ばかり見ていて、なにこれ?となりそうなので、メモに残すことにした。
ES6から導入された新しい書き方。ES6は2015年にリリースされたJavasriptの仕様のこと。

レキシカルスコープ　初心者脱退宣言

これが分からないと初心者

“`
let n = 7
func1 = () => n

func2 = () => {
n = 9
return func1()
}

console.log(func2())
“`

初めての案件

こんにちは。
私はA型事業所でプログラミングをしています。
よろしくお願いいたします。

来週から、実際の案件に取り掛かる予定です。
今週から出勤が週三日になり、ちょっと負荷が高くなりました。
今週から、月曜日、金曜日に加えて木曜日も出勤になりました。

## 実際の案件について
実際の案件ではHTML/CSS/Javascriptという感じのスタートになりそうです。
**コーディングの案件からのスタート**です。
A型事業所のほうに既に案件がはいってきており、そちらをこなす感じになりそうです。
初めての案件で、緊張もありますが、うまく進めていきたいなと思います。

案件をこなすにあたり、自分で実際にサイトを作ってから挑もうかなとも考えていました。
その時間はなさそうなので、実際に案件をこなしながら、わからないことは時間をかけて調べてやってみようかなと思います。
最初の案件は少し時間を多めに取り、調べたり、必要に応じて戻って学習しながらやっていこうと思っています。
案件をくださっている方とも連携しながら進めていくことになりますので、コミュニケーション能力も試されそうな気がします。ちょっ

【JavaScript】ブラウザの言語に合わせたページ遷移の実装

ブラウザの言語に合わせて表示するhtmlを切り替えるページを実装したため、備忘録として残します。

## ポイント

– 「navigator.language」でブラウザの言語情報を取得
– 「switch」で言語ごとに処理を分岐させ、「location.href」で目的のページに移動

## 実装例

訪問用ページである①index.htmlと、日本語、英語用のページ②ja.html、③en.htmlをそれぞれ用意します。

– index.html（①訪問用ページ）
– /ja/ja.html（②日本語用遷移ページ）
– /en/en.html（③英語用遷移ページ）

①index.htmlをブラウザで読み込むと、読み込み時のブラウザの言語設定に合わせて②③にページを移動させる、という仕様で、以下のようなコードを実装しました。
ポイントは前述の通りなので割愛します。ブラウザの言語を切り替えて検証が可能です。
※’22/7時点では、chrome、safari、edge、firefoxでの動作確認済み。
メモ）言語表記に関しては、どのブラウザも統一されているのかも…？

[index

Denoのwindow.close()の動作

Denoにはブラウザ互換の`window.close()`が実装されています。
この関数は、呼ばれると直ちに処理を終了するものと思っていたのですが、そういうわけではないようです。
本記事ではDenoにおける`window.close()`の挙動を確認します。

なお、

– `window.close()`
– `globalThis.close()`
– `close()`

は全て同等の記述ですが、本記事では`window.close()`に書き方を統一します。

## Denoにおける`window.close()`の動作

`window.close()`を呼んでも直ちに処理は終了せず、**タスクキューとマイクロタスクキューを消化してから処理を終了します。**

タスクキューとマイクロタスクキューはPromiseやsetTimeoutなどによって発行されるタスクを管理するものです。詳しくは[こちらの記事](https://zenn.dev/estra/books/js-async-promise-chain-event-loop/viewer/d-epasync-task-mi

部品ベースのフロントエンド開発におけるSOLID主義 – なぜ重要か？

はいさい、ちゅらデータぬオースティンやいびーん！

今回の記事では、オブジェクト指向の反省から生まれた、SOLID主義について解説すると共に、それをフロントエンド開発でどう活かすべきかについての意見を書いていきたいと思います。

指摘があれば、ぜひコメントしていただければと思います！

# フロントエンドの実装は、ぐちゃぐちゃコードになりがち
フロントエンド開発に関わっている人なら誰しもわかること。

それは、フロントエンドのコードが難解になりがち、というところです。

なぜかにはいくつかの理由があります。筆者が思い当たるところは以下の通りです。

1. HTML、CSS、JavaScriptという、三つの言語が関わってくる
1. ビジネス・ロジックがフロントエンドに迷い込みがち
1. フロントエンド開発が軽視されがち
1. ジュニア・エンジニアにフロントエンドが任されることが多い

これらの理由について少しばかり解説します。

## HTML、CSS、JavaScriptという、三つの言語が関わってくる
無論、読者はご存知のはずですが、フロントエンド

【three.js】GeometryクラスからBufferGeometryを使うよう書き換える

# はじめに

[以前書いた記事](https://qiita.com/baikichiz/items/4d8cf1a4f0f58d986152)で、Geometryクラスを使って三角柱を描画しましたが、three.js r125でGeometryクラスはコアから削除されました（[Release Notes](https://github.com/mrdoob/three.js/releases/tag/r125)）。
そこで、代替となる[BufferGeometry](https://threejs.org/docs/#api/en/core/BufferGeometry)クラスを使って同様の三角柱を描画してみます。

# Geometry -> BufferGeometry書き換え方法の概略

Geometryクラスでは、以下のようにモデルの頂点と面を定義していました。
* verticesプロパティ（配列）に頂点を表すVector3を格納する
* ポリゴンを構成する面情報をFace3クラスとして生成し、facesプロパティ（配列）に格納する

BufferGeometryクラ

JavaScript学習記事一覧

# 概要
javascriptを学習し、理解した内容を記事にすることで知識の定着を図る。
マークダウン記法についての理解も深める。

# 記事一覧
+ [【JavaScript】JavaScriptとは](https://qiita.com/kw35670/items/923206a716755a4d3aa2)

まだまだ少ないですが逐次更新していきます。

javascript: array.sort((a, b) => a – b) にどこまで迫れるか

（思いついたら追加していこうかと）

# 経緯
キャンペーンとのことで参加してみようと
https://qiita.com/official-campaigns/engineer-festa/2022

お題を探してたところ、こちらのソートアルゴリズムの記事を拝見し、
https://qiita.com/fuwasegu/items/0f27a7eee2ec72035855
いっちょあたくしも考えてみっか、と思い立ちまして。

javascript で並べ替えと言えばこれです。
“`sort.js
source.sort((a, b) => a – b);
“`
ということで、javascript エンジンはどれも、これが最速になるよう実装してそうです。（たぶん）
よって勝つのは難しそうですが、どこまで迫れるか、考えてみます。

# 条件
・javascript で実装
・Windows 10 Home 21H2 19044.1766 （64 ビット）
・Chrome 103.0.5060.66（Official Build） （64 ビット）
　DevTools の Consol

いつも忘れる .filter で undefined を除去する方法 【TypeScript】

## ユーザー定義のType Guard の話

`[‘test1’, undefined].filter(Boolean)` だと `(string | undefined)[]` という型のままでしんどいときの話。

“`typescript
const test1 = [‘test1’, undefined].filter(Boolean)
// const test1: (string | undefined)[]
console.log(test1);
// [LOG]: [“test1”]

const test2 = [‘test2’, undefined].filter((v): v is string => v != null)
// const test2: string[]
console.log(test2);
// [LOG]: [“test2”]
“`

以下でTypeScriptをWeb上で試せます。
https://www.typescriptlang.org/play?#code/Q

## 参考

– [ユーザー定義のType Gua