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

日付や時間をうす〜く扱う~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

AWS Step Functionsでランダムアルファベットに基づくLambda関数の実行

AWS Step Functionsは、分散システムの調整や状態管理を簡単にするための強力なツールです。今回は、Step Functionsを使って、ランダムなアルファベットを生成し、その結果に基づいて異なるLambda関数を実行する方法をご紹介します。このプロセスを通じて、StepFunction の基礎の基礎を学びます。

具体的には、まずランダムなアルファベット「A」、「B」、「C」を生成するLambda関数を呼び出し、その結果に基づいて「A_Process」、「B_Process」、「C_Process」のいずれかのプロセスを実行します。それぞれのプロセスは別々のLambda関数で処理され、最終的に結果を出力するLambda関数が呼び出されます。この一連の流れをStep Functionsでどのように実装するかを詳しく解説します。

### Step Function の構成
完成時の Step Function の構成は以下の通りです。
![stepfunctions_graph (2).png](https://qiita-image-store.s3.ap-northea

JavaScript: 圧縮とかgrzip2

BWT系圧縮でかつて猛威を振るわなかったGRZipIIというprogramの紹介。と言うか模倣しようかなという企画第1弾。
## 原理
BlockSort -> MTF -> RLE -> Range符号 という流れで圧縮。MTFにより小さい値だらけになったら、まず記号を3以下か4以上かで分けます。3以下ならそのまま符号化。4以上なら4を符号化した後、その記号を0～62に変換してGamma符号化。記号の後は連長をGamma符号化。本家はまだLZP等で加工していますが省略。

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

next.js で “Hello World” する

# この記事とは
いままでC言語C++を使ってきた筆者がjs教に入信することでQOLを向上させたいので、習得した知識をまとめるために作った。
# やること
その1 : node.jsのダウンロード
その2 : npxのインストール
その3 : next.jsのプロジェクトの作成
その4 : 開発サーバーの起動

と言って感じで、C++であればコーディング→コンパイル→実行といった具合で単純だったが、お作法が多め。また、横文字しかないので頭が混乱する。

# node.jsのダウンロード
javascriptはChrome、edge、firefoxなどの検索エンジンに搭載されているjavascriptエンジンによって動作するのが基本だが、これをパソコン上で動かせるようにするのがnode.jsだ。これをダウンロードする。node.jsの公式ページにあるインストーラーを実行して、PowerShellかcmdで以下の構文を打とう。

“`powershell:node.jsのバージョン確認
node -v　# インストールしたバージョンが表示される
“`

“`powershell:np

【忙しい人必見⚡】Difyを利用した次世代型ToDoリスト Part1

## まじで最近忙しくないですか？？

皆さん最近忙しくないですか？
私はとても忙しいです。

当たり前と言われるかもしませんが、**仕事をして、勉強もして、家事もして**、とてもゆっくり過ごせるような日々ではありません。

加えて、私は今月から新生活を送るために、新居に引っ越しをします。

今月といってもあと10日余り。。。
本当に新生活ができるのでしょうか。不安でたまりません。
そんな状況にパートナーも**イライラ**しています。

元記事を表示

【JavaScript】HTMLCollectionって何！？

## ▼最初に
DOM操作において必ず触れる”HTMLCollection”。これを理解しないと先へは進めない。そんな壁にぶち当たり、調べて分かったことをかみ砕いた内容で記事にしたいと思います。

## ▼”HTMLCollection”って何？
初見の方は **HTMLCollectionって何？** ってなりますよね。
調べてみると….。

:::note info
”HTMLCollection”は、HTML文の要素を配列風のオブジェクトにまとめたもの
:::

例としてHTML文の要素とは以下のことです。
“`HTML:HTML

Example

Example

Example

“`
HTML文を配列風オブジェクトにしたものと言ってもイメージ沸かないので実際に見てみましょう。

![スクリーンショット 2024-07-14 151

元記事を表示

JavaScript: 圧縮とかROLZ

圧縮解説もどきの記事なのは言うまでもありません。今回はReduced offset Lempel-Ziv、略してROLZを紹介します。LZ77系で出力される位置情報を小さい値にする事で、高い圧縮率を叩き出す事が可能。

## 実装編
Unicode文字列を圧縮して`[_0-9A-Za-z:]`からなる文字列を返しやがる仕様となります。言うまでもなくJavaScriptのprogramを圧縮して`eval(SROLZ64d(…))`などという使い方が可能
“`js
/* SROLZ64e(A): compressor
@A: string
@return: string
*/
function SROLZ64e(A){
A=A.replace(/\r\n|\r/g,”\n”).split(“”);
for(var a=63,b=1,B,f,g=32,h=””,i=0,l,m,n,o=1,p=0,q=0,z=A.length,st,bm=0xffffff,ms,O=[],L=[“_”],H=[],D=[];a;)L[a–]=String.fromCharCode(a+(a<11

元記事を表示

axios を使う

Vue勉強中にaxios というライブラリが出てきたので、調べた。

> HTTP通信（データの更新・取得）を簡単に行うことができる、JavaScriptのライブラリ。

とのこと。
Vueを使うのに必須という訳ではなく、Vueとは無関係に、このライブラリ単体で使えるものらしい。

https://qiita.com/s_taro/items/30114cfa370aac6c085f

axios には、`get` 以外にも `delete`, `post`, `put` と言った関数があるようだ。

https://qiita.com/ksh-fthr/items/2daaaf3a15c4c11956e9

https://rakuraku-engineer.com/posts/axios/

(Vue.js 3.1.5を使用)

“`javascript:javascript
const app = Vue.createApp({
data: () => ({
users: []
}),
mounted: function() {

元記事を表示

Difyを使って選手名から選手の球場飯を表示させたかったけど全員カレー表示になって困っている

私は野球が好きなので球場によく行きます。球場飯って今すんごくおいしいんですよ！
ちょっと高めですけどね。推し選手の球場飯とか食べたがりです！

## 【結論】失敗したのでご報告

Difyを使ってみたけど、多分プロンプトの書き方が悪かったのか、見事に**カレーライス**になった笑
もはやカレーライスbotだ。

【Typescript 5.4】NoInferについて 【新機能】

## はじめに
2024年3月にTypeScript5.4がリリースされました。
その中で、NoInferという新しい機能が追加され、
これが便利だったので紹介します。

## NoInferとは?
>When calling generic functions, TypeScript is able to infer type arguments from whatever you pass in.
ref:https://devblogs.microsoft.com/typescript/announcing-typescript-5-4/

ジェネリック関数で引数の型を元に、他の引数の型を推論できるものです。
既存の型のパラメータによって制限できるというものです。

|5.3以前|5.4|
|—|—|
|![f04395a8-3870-7405-6faa-f989690bebc1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636995/f37fc148-324c-5ce6-6935-

元記事を表示

Javascriptでバリデーションを実装

# はじめに
前回に引き続きbootstrapのモーダル機能で新規登録・ログインフォームを作成方法をアウトプットします✍️

https://qiita.com/3rarara/items/6450603f2ea29f5d7793

初心者ですので、もっといい方法があるよ！
等ございましたらご教示いただけますと幸いです！

# 開発環境
– ruby: 3.1.2
– Rails: 6.1.7.7
– Cloud9
– bootstrap: 4.6.2

# 前提条件
– bootstrap4.6.2 導入済み
– devise 導入済み

# Javascriptでバリデーションを実装
新規登録やログインにエラーが発生した時、
deviseの使用上元の(モーダルでない)新規登録ページやログインページに飛んでしまいます
ログインを非同期で行うことも試みましたが挫折しました…
なので、今回はJavascriptで簡単なバリデーションをつけていきたいと思います
コード全体だけ見たいよ〜という方はこちらをクリックしてください↓

Javascriptコード

元記事を表示