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

テンプレートリテラルをもう少し理解したい(MDNを添えて)

## 俺たちは雰囲気でテンプレートリテラルをやっている
MDNより
> テンプレートリテラルはバッククォート (`) で区切られたリテラルで、substitutionと呼ばれる埋め込み式が利用できます。
タグなしテンプレートリテラルは文字列となるため、文字列の補間に便利です（エスケープされていない改行が許されるため、複数行の文字列も可能です）。

変数を埋め込んで見やすい形式で文字列を生成できて便利だー、という漠然とした理解の下に雰囲気で使っていた & 何も困らなかったためこれまで調べてこなかった。

が!調べて見るといくつか発見があったため、まとめてみる。

## タグなしテンプレートリテラル
おなじみ。改行できたり、式を埋め込めて見やすい形式で文字列を生成できて便利。

“`ts
// 文字列リテラル
const name = “foo”;
console.log(“Hello\n” + “World\n” + name + “-san”);
// Hello
// World
// foo-san

// テンプレートリテラル
const name = “foo”;
conso

ESLintとtypescript-eslintを手動で設定してみる

:::note
本来は`npm init @eslint/config@latest`で設定したかったです。
typescript-eslint@7.9.0はeslint@8.57.0に依存しているので、eslint@8.57.0と指定して手動でインストールします。
:::

# eslintの初期設定

“`terminal
$ npm init @eslint/config@latest
✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · none
✔ Does your project use TypeScript? · typescript
✔ Where does your code run? · browser
The config that you’ve selected requires the following dependencies

配列を並べ替える

JavaScriptで配列を並び替える方法のメモ。
数値、アルファベットの場合は`sort`を使用します。
“`js
const array = [‘Delta’, ‘Bravo’, ‘Alfa’, ‘Charlie’, ‘Echo’]
console.log(array.sort()) // [‘Alfa’, ‘Bravo’, ‘Charlie’, ‘Delta’, ‘Echo’]
“`
降順の場合、
“`js
const array = [‘Delta’, ‘Bravo’, ‘Alfa’, ‘Charlie’, ‘Echo’]
array.sort((a, b) => {
if (a > b)
return -1
if (b > a)
return 1
}) // [‘Echo’, ‘Delta’, ‘Charlie’, ‘Bravo’, ‘Alfa’]
“`
数値の配列でも同じようにソートできます。
日本語の場合は`localeCompare`を使用します。
“`js
const array = [“うし”, “わに”, “あひる”, “みかん”

[Javascript]配列のあれこれ

Javascriptも他の言語もそうだろうが、
とにかく何を引数としているのか、または中身なにこれ。が非常に多い。

特に苦戦した（今もしているけど）のが配列と値の取得＝指定。

初学者ゆえに捉え方が間違っていたりするところも多々あるだろうが、
現時点での理解度として記述していきます！

##
“`
const Animal = [
{id : 1, name : “cat”, color : “black”},
{id : 2, name : “dog”, color : “brown”},
{id : 3, name : “bird”, color : “blue”}
]
“`
上記の配列Animalに含まれているオブジェクトは3つ。Animal.lengthでいうと = 3。

「id」「name」「color」のキーと、
それぞれの値プロパティが、「：」の後ろで設定されている。

単純にAnimalの中のnameキーを叩けば、値を見ることができるのか。
“`
console.log(Animal.name)
=>undefined
“`

結果

超huffman符号

適応型huffman符号**もどき**を利用した高圧縮programを紹介します。純粋な統計型手法であり、速度は全く褒められたものではありません。圧縮性能はgzipに匹敵しまくるとかしないとか…。

## 手口
1文字符号化/復号化するごとに最初からhuffman符号を作り直すという非常に効率の悪い事をしています。統計の取り方の都合上、そうせざるを得なくなりました。
その都合とは、過去の文脈を洗いざらい調べ尽くして文字の頻度を混合するというもの(PPMとは似て非なるもの)。この二段攻撃により想像を絶する程の低速ぶりを発揮しちゃっています。ついでに記憶空間も大量消費しやがります。
まあ実際には文脈の長さは指定した値に固定され、調べるにも限度があります。

## 実装
それではJavaScript様による実装を晒しておきます。低速なので非同期関数にしました。`compress()`と`decompress()`が本体です。
“`js
//加重倍率調整配列
const coef=new Uint32Array([34304,33348,240,0,29273,128512,24,1,641

JSで一時停止機能付きのsetTimeoutを自作してみた

# 初めに
JavaScriptには、「何ミリ秒後に実行する」という処理を行うことができる**setTimeout**というメソッドが標準で搭載されてあります。

また、**clearTimeout**というものも存在し、これは既に開始されたsetTimeoutを中断することができます。

しかし、その次にまた同じものを開始させた場合、カウントは途中からではなくまた始めからになってしまいます。
もちろんそのような場合の方が便利なときもありますが、途中から再開できるものも欲しいときがあったので、
少し改良して一時停止機能を搭載した自作のsetTimeoutを作りました。

# コード
実際に作ってみたものがこちらになります。
“`mySetTimeout.js
// 時間を管理するオブジェクトの宣言
let TimeLines = {
ID: [],
StopTimeList: [],
isPauseList: []
};
let isPause = false;

// 自作のsetTimeout
function mySetTimeout(Function,

React完全入門ガイドを終えて

UdemyでReact学習を進めていく中で得た基礎知識や気になったことを調査し、キーワードをまとめました。

# 講座について
[オススメUdemy講座](https://www.udemy.com/course/react-complete-guide/?couponCode=LEADERSALE24B)
神講座と名高いReact完全入門ガイド。
コーディングに留まらず内部構造や周辺知識を分かりやすく図で説明してくれるので、納得感を持って学習を進めていけます。
これからReactを学びたいと思っている方には全員にオススメできます。まさに神講座。

# DOMと仮想DOM
DOM(Document Object Model)とは、JavaScript(※以下JS)によってHTMLを操作する仕組みのこと。
仮想DOMとは、実際のDOMと同じデータ構造をJSオブジェクトとして表現したもの。
Reactでは仮想DOMを操作し、差分のみを実際のDOMに反映させることでパフォーマンスの向上を実現している。

# JSX
JSX(Javascript Syntax Extension)とは、R

Ajax通信とSOPについて

今回は、Ajaxとそれに伴って学んだ同一オリジンポリシー（SOP)についてアウトプットしていきます。

## Ajaxとは

JavaScriptからHTTP通信ができるオブジェクト **XMLHttpRequest** を利用し、サーバ通信を行う技術のこと。

非同期でサーバとデータの通信を行うのでユーザビリティが向上するらしいです。
また、ページの遷移や再読み込みをしないで、DOMを書き換えて表示を変化させるため、処理スピードも早くなります。

## Ajax通信の準備

– **htmlファイル**

実装させたい機能に応じて作っておきます。

– **JSONファイル**

データフォーマットの一つ。Ajaxを用いたデータの送受信に使われており、今回もこちらを使用していきます。
昔はXMLHttpRequestオブジェクトの名前にもあるXMLが主流だったらしいけれど、最近はJSONに代わってきたとのこと。

この中に、オブジェクトなどの引っ張ってきたいデータを入れておきましょう。

– **JavaScriptファイル**

基本的な記述の流れはこんな感じ。

“`jsx
/

チェックボックスを数えて内容が違う場合にはツールチップを出す

“`