JavaScript関連のことを調べてみた

[JavaScript] 表示/非表示にif文を使わない方法

# [JavaScript] 表示/非表示にif文を使わない方法

この記事は表示/非表示(あるいは可視/不可視)を実現するJavaScript(JS)についてのメモです。DEMOページは特にありません、あしからず。
HTML x JS x CSS

__前提__
– アコーディオンやドロワーではない、単純にパッと表示＝可視したり、非表示=不可視になったりするタイプの表示/非表示
– CSSでいう`display:none;`、`display:block;`をJSから操作するタイプ
– 以降、この記事で略してfuncと書かれているのはfunctionのこと

## JSコード
JSにおいて複数回出てくる頻出値であることを見越して変数化。ついでに配列化。後に出るfuncで共通。
### 共通func
“`javascript: 共通：可視/不可視func
// id取得短く書く用
const $ =(id)=>{ return document.getElementById(id) };

// 可視/不可視の変数化と配列化
const blAk = “bloc

分割代入でつまづきました

## はじめに
Reactを学んでみようと思い、Udemyの教材で学んでいたところ分割代入でつまづきました

## 問題
const {name, age} = myProfile;　の箇所で「Cannot redeclare block-scoped variable ‘name’」というエラーが発生しました
調べたところ、ブロックスコープで再宣言はできないよ！と怒られているようです
“`JavaScript:
const myProfile = {
name: “ナマケモノ”,
age: 3,
};

const {name, age} = myProfile;

const message2 = `名前は${name}です。年齢は${age}歳です。`;
console.log(message2);
“`

## 解決？
エラーが出ているconst {name, age} = myProfileの行をまるまる消すと動くようになりました
しかし、これで本当に分割代入としてできているのでしょうか！？（宣言も何もなしにプロパティの値をつっこんでいるだけでは？？？）
他の所で

【個人開発】釣り具の登録、管理、検索ができるアプリを開発しました🎣

# はじめに
こんにちは！[レイ](https://twitter.com/ida09r)と申します！

未経験からエンジニア目指して日々学習をしております。

今回、釣り道具に特化した「[Tackle Master(タックルマスター)](https://tacklemaster.net/)」というサービスを開発しました。

釣りに興味のある方や好きな方には、ぜひ使っていただけると嬉しいです。

### 自己紹介

地元の工業高校で情報系コースを専攻し、PC操作やプログラミング（Python、SQL、HTML/CSS）を簡単に学びました。
卒業後は総合化学品メーカーで製造オペレーターとして約3年間勤務。その際、社内ITシステムに助けられた経験から、システム開発に興味を持ちました。

2024年2月からプログラミングスクール「RUNTEQ」に入学し、エンジニアを目指しています。

# 1.サービス紹介

「Tackle Master」は釣り道具に特化したサービスで、釣り道具の管理・登録・検索ができます。

![tackle_service.jpg](https://qiita-image

[JavaScript] クラス、コンストラクタ、プロパティ、メソッドについて

# まとめ

#### クラスとは
> クラスはオブジェクトを作成するためのテンプレートです。処理するためのコードでデータをカプセル化します。
※[mdn web docs](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Classes)

#### コンストラクタとは
> クラスで作成したオブジェクトを作成して初期化するための特別なメソッドです。 “constructor” という名前の特別なメソッドは、クラスに 1 つしか定義できません。クラスに複数の constructor メソッドが存在した場合、SyntaxError が発生します。
※[mdn web docs](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Classes)

#### メソッドとは
> メソッドはクラスごとにプロトタイプに定義され、すべてのインスタンスで共有されます。メソッドには、プレーン関数、非同期関数、ジェネレーター関数、非同期ジェネレーター

縦書き画像ジェネレータを作った話

# やったこと

深夜の思いつきでこんなものを作ってしまいました。

https://tategaki-generator.pages.dev/

このように縦書きの文章と画像を合成できます。


ソースコードはこちらです。

https://github.com/Nitoryu008/tategaki-generator

# 技術スタック

Vue3+Bulmaで作っています。今回、Cloudflare Pagesを使ってみたんですが、開発体験がとてもよかったです。プッシュしたら即時デプロイしてくれるのがありがたい。突然の思いつきを形にするにはもってこいですね。

# 仕組み

仕組みは割と単純で、 HTML+CSSで描画した後にDOM to Imageというライブラリを使って画像に変換しています。
HTML5だとCanvasに描画してからごにょ

日付や時間をうす〜く扱う~JavaScript編

# この記事のを書くきっかけ
「日付や時間の取り扱いについてうす〜く調べてみた〜その１」の続きです。
あれ、タイトル変わっちゃった。
計画立ててやらないといかんすね。汗

https://qiita.com/ikedachin/items/8d23fca666f3137fcfb1

そう、時間を扱うことがあって、少し苦労したので最小限必要なことを抜き取ってみました。

# なぜ薄く・・・なのか
これ、前回、書き忘れました。
理由は簡単。「**忘れるもん**」
細かく書いても読まないし、細かく理解しても忘れる。
繰り返せば覚えるんだけど、いや、日付や時間だけをずっと扱うことも少ない。
なので、「ああ、そんな感じだよね〜」っと理解できる程度にうす〜く扱っていきたいと思います。

# 公式というか、MDN
これは抑えておかねばならん。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date

# 復習
MDNを読むとわかりますが、1970年1月1日の0時0分0秒を基準にしてm秒単位

TypeScriptといふものを知る（ざっくり知る話）

# 前置き
ご覧いただきありがとうございます。
Web制作会社で主にHTML・CSS・JavaScriptを書いているマークアップコーダーです。
いわゆるレガシーな環境で、未経験で入社しもう3年ほど従事していますが、
そろそろモダンなフロントエンド技術を身に着けたいと思い、
手探りに色々と勉強中です。
（JavaScript（Vanilla）も基礎が全然なのでまずはそこからですが、、）

今までいくつか書籍などで勉強しましたが、
読んで終わり、コードを写経して（ちょっとだけ変えたりして）終わりで、
「これだけでは良くないな〜」と思い、まずはざっくりですが学んだことや気になったことを記事にしようと思いました。

## ※注
基礎もまだまだの状況ですが、とりあえず「こんな感じなんだ〜」的なことを本当にざっくり書くだけです。
誰かのためになるわけでもわかりやすいわけでもない記事です。

# TypeScriptってなんだ？
今回は「**TypeScript**」です。

## 知る前のイメージ
名前はめちゃくちゃ聞いたことがあり、
「JavaScriptの上位互換」「JavaScriptに型

JavaScript: 圧縮とかLPAQ5

圧縮業界で高い圧縮率を誇る**PAQ系列**の軽量版LPAQ5の紹介。文脈混合法により圧縮しまくっていきます。

## やぶからぼうに実装
本家の方はmacro乱舞でやばいです。性能的にはLPAQ1より少し良いかもしれません。
“`js
{const TOLIMIT1=159,TOLIMIT2=175,SQUARD=2,calcprevfail=new Uint16Array(256),SQ=new Uint16Array(4096),
sqInit=d=>{
if(d>2046)return 4095;
if(d<-2046)return 0; return 0|4096/(1+Math.exp(-d/256)) }, //Stretch S1=new Int16Array(4096),S2=new Int32Array(4096),D=new Int16Array(1024).map((a,b)=>16384/(b+b+3)),calcfails=new Uint8Array(8192),ST=new Uint8Array([1,3,4,7,8,9,11,15,16,17,

Side Effect（副作用）とはなんぞ？

## ある日のコードレビューコメントにて
> 新しくインスタンスを作って返さないとSide Effectが発生するので修正しました。
今回のコードだと発生しても問題ないですが基本的にSide Effectは発生させない方がバグになりにくくて良いです。
もし発生させる場合はコメントで明記した方が良いです。

**エンジニア6年目わい：Side Effectって知らん…何それ…怖…**
ってなったので自分の理解のために簡単に調べたことをまとめました。~~プレパラートハートなので6年もエンジニアやっててそんなことも知らないのかって言わずに生温かい目で見守ってください。~~

## Side Effectとは
日本語だと「副作用」と呼ぶようです。

https://thejs.dev/jmitchell/what-are-side-effects-and-what-you-can-do-about-them-jws

こちらの説明をGoogle先生に翻訳してもらうと以下のようなものを副作用と呼ぶそうです。
> 副作用とは、関数または式の呼び出しによる状態の変更です。関数または式に副

「reduce関数を使ってオブジェクト配列の中身をマージする」のもっと簡単な方法

# 前の記事
https://qiita.com/KyongminS/items/93ab7a2fb6786104e544

# 結論
“`ts:reduceメソッド/groupByメソッドを使ってもっと簡単になる
type Order = {
name: string; // 商品名
price: number; // 値段
quantity: number; // 個数
}

const orders: Order[] = [
{ name: ‘トマト’, price: 100, quantity: 1 },
{ name: ‘トマト’, price: 100, quantity: 2 },
{ name: ‘マンゴー’, price: 200, quantity: 1 },
{ name: ‘イチゴ’, price: 250, quantity: 3 }
];

const reduceSameProductsKai = (orders: Order[]) => {
return Object.values(
Object.

JavaScript: 圧縮とかPAQ8もどき

かつて圧縮業界で最強を誇った**PAQ8**を軽量化した`fp8`の紹介。例によって文脈混合法により圧縮しまくっていきます。

## 実装
本家よりとんでもなく手抜きしまくっています。jpegとかexeとか色々対応が欠落。全部実装すると莫大な量になります。ちなみに**超低速**です。
“`js
function hash(a,b,c){
c=((a>>>16)*52643+(c=a&65535)*3051<<16)+c*52643; c+=((b>>>16)*55539+(c=b&65535)*457<<16)+c*55539+4064955751; return c^c>>>9^a>>>2^b>>>3^201326591
}
function hash3(a,b,c,d){
d=((a>>>16)*52643+(d=a&65535)*3051<<16)+d*52643; d+=((b>>>16)*55539+(d=b&65535)*457<<16)+d*55539; d+=((c>>>16)*271+(d=c&65535)*763<<16)+d*271+41149599

JavaScriptの文法アウトプット➂ ===と==の使い分け

# 厳格な等価性と抽象的な等価性
JavaScript特有の文法である`===`と`==`の使い分けをまとめます。

## 厳格な等価性(`===`)
2つのオペランドを比較して論理値で結果を返す。
2つのオペランドの型が異なる場合には常に偽と判断する。

“`
console.log(‘Hello’ === ‘Hello’);
> true

console.log(‘Hello’ === ‘hogehoge’);
> false

console.log(‘1’ === 1);
> false

console.log(0 === false);
> false
“`

## 抽象的な等価性(`==`)
2つのオペランドの型変換を行い、比較してから論理値で結果を返す。

“`
console.log(‘Hello’ == ‘Hello’);
> true

console.log(’10’ == 10);
> true

console.log(‘false’ == 0);
> true

console.log(0 == undefined);
> true

“`

#

サーバーが機能しているかを確認するもの(?)をjsとhtmlで書く

# 初めに
今回はサーバーが稼働しているかを確認するもの(※)をhtmlとjsで書きます
※…サーバからの応答があれば全部200で返します
# ファイル構成
今回はhtmlファイル一つで大丈夫です
# コードをコピペ
“`html:main.html

テスト

チェック

※このコ

まだ苦手意識のあるasync/awaitを倒す

## はじめに
[こちらの記事](https://qiita.com/course_k/items/6dc46afa9665ce1703ba)でPromiseについてまとめましたが、まだ非同期処理についての理解が足りていないなと感じています。

今回は非同期処理を書くうえで避けては通れないasync/awaitについて深堀りします。

## async/awaitとは何か
async/awaitは、JavaScriptで非同期処理を扱うための構文です。
Promiseベースの非同期処理をより簡潔に、同期的な見た目で書くことができます。
それぞれ以下の役割があります。
* `async`：非同期関数を定義するために使用する
* `await`：Promiseの結果が返されるまで処理を一時停止する

## async/awaitの特徴

async/awaitには、以下のような特徴があります。

1. 読みやすさの向上
Promiseの`.then()`チェーンよりも、直感的に読めるコードになります

2. エラーハンドリングの簡素化
try-catch文を使って、同期処理と同

JavaScript: 圧縮とかgrzip2(続編)

[GRZipII編](https://qiita.com/mashuel/items/d660f5daa8a49cf97431)第2話。

## 原理
BlockSort -> WFC -> RLE -> Range符号 という流れで圧縮。MTFより強力なWFC搭載で圧縮率向上となりやすい。

## 実装
“`js
function compare(R,a,b,i,n,r){
for(n-=a