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

月相・休日付きカレンダー

「[Date に休日情報を追加した派生クラスを作ってカレンダーを表示する](https://qiita.com/ikiuo/items/4ab99731ecac076f3608)」に「[月の満ち欠けの簡易表示](https://qiita.com/ikiuo/items/88037ba8e0238c6a0ff2)」と月相を求める処理を追加して、背景に目安となる月相を表示してみる。

月相の計算 (JavaScript)

“`javascript:
/*
* 月相の計算
*
* 計算方法は下記のものを使用しています
* 書籍：天体の位置計算(増補版) [長沢 工 著]
* 【7-2表】月の位置の略算式（海上保安庁水路部による）
* 【7-3表】太陽の位置の略算式（海上保安庁水路部による）
*/
class MoonPhaseRC {
static Tbase = Date.UTC(1975, 1-1, 0);

/*
* コンストラクタ
* 引数は日時(Date コン

JavaScript: let, const, classに関して用途以外の豆知識

まず有効な記述法について。scopeが異なるので以下の例では2重定義とはなりません。
“`js
//global scope
let a=-~-~0-~-~0;
const b=1e+999;
//block scope
{
let a=new class{};
const b=class{};
class c{}
}
“`
などといった芸風はよく見掛けますね。しかし以下のような記述をすると不思議な事が起こります。
“`js
eval(“let a=0;const b=1;class c{}”);
console.log(typeof a, typeof b, typeof c)
“`
evalの中には`{}`が無いので`a`、`b`、`c`はglobal領域に存在しているかのような印象を受けますが、実際には**eval実行部分でしか参照できません**。よってconsole.logではundefinedが出力されます。
以下の記述は`{}`を省略できる状況で`var`と`let`による変数宣言や`class`定義を試みています。しかしなんと`var`以外は文法違反です(当

【HTML】要素を追加・移動する 4メソッド【JS】

# はじめに

HTMLに要素を追加・移動をするには
– `prepend()`
– `append()`
– `before()`
– `after()`

の4つのメソッドを使用します。

# 4メソッドの違い

– `prepend()`：子要素として先頭に挿入
– `append()`：子要素として末尾に挿入

– `before()`：同じ階層の要素として上に挿入
– `after()`：同じ階層の要素として下に挿入

正確な説明ではないですが、イメージを掴むには十分かと思います。
## 要素の追加

CodePenの使い方

| |
|:–:|
||
|【使い方】Resultをクリック|
|![スクリーンショット 2024-05-0

レビュー分析AI (ReviewAI) に新機能：観点の詳細を確認する機能を実装しました。

# はじめに
みなさま、GWは楽しんでますか？
旅行や観光、ついでに温泉に入った人も多いのではないでしょうか？
このGWで弊社リテジーリンクでは、レビュー分析AIサービス・ReviewAI (レビューアイ) に
観点の詳細を確認する機能を実装しましたので、ご紹介します。

今回はGWということで、草津温泉のつつじ亭についての
食べログのレビューを分析させていただきます。

## つつじ亭

つつじ亭は、草津温泉の料亭旅館です。
[食べログ](https://tabelog.com/gunma/A1004/A100402/10007823/)

## ReviewAI (レビューアイ)

弊社 RetegyLink が開発中のレビュー分析 AI です。
https://reviewai.next-seed.work/
試作版を公開中で、現在は
– [食べログ](https://tabelog.com/)
– [じゃらん](https://www.jalan.net/)
のレビューを分析できます。

# レビュー分析

こちらが分析結果です。
全てのレビューを分析し、観点ごとに強みと改善点

face-api.js の「Face Expression Recognition（表情認識）」の公式デモ・利用可能なモデルの情報などを見てみた：ml5.js の FaceApi では使えない仕組みの部分

前回、以下の記事を書いた際に扱った「face-api.js」の話です。

●ml5.js の FaceApi（face-api.js の一部の機能を使える API）で扱える仕組み・モデルに関するメモ – Qiita
　https://qiita.com/youtoy/items/932c1868b032e3a4dfa8

その中でも、ml5.js の FaceApi では扱えない仕組みとなっていた「Face Expression Recognition（表情認識）」の情報を見ていこうと思います。

## サクッと試す
もし、face-api.js の「表情認識」の動作確認をしたいというだけなら、公式のデモにアクセスするのが一番簡単です。

### 公式デモにアクセスする
デモを試す場合、まずは[公式のリポジトリ](https://github.com/justadudewhohacks/face-api.js/tree/master)の中にある項目「[Click me for Live Demos!](https://justadudewhohacks.github.io/face-a

JSで”name”という変数を宣言すると「’name’ is deprecated.」と出る件を調査！

# はじめに
Udemyの”【最新ver対応済】モダンJavaScriptの基礎から始める挫折しないためのReact入門”の講座内にて、nameという変数を宣言したところ下記のWarningが出たので調べてみました！

# 内容

記入したコード
“`
const name = “art”;
function log_name(name){
console.log(name);
}

log_name(name);
“`

発生したWarning
“`
‘name’ is deprecated.
“`

# 原因
変数nameがグローバルコンテキストの”window”オブジェクトにてすでに存在しているため、衝突を避けるためにWarningを出している（by ChatGPT）
解決策としては「変数名をnameから変更する」のが一番効果的。
どうしてもnameを使用したい場合は、グローバルスコープではなく関数やブロックスコープなどの閉ざされた環境だけであれば問題ない、とのこと！
さすがGPT先生！

# 実験
実際にwindow.nameの値を出力してみて値が更新されているのか

TypeScriptのジェネリクスってなんだ？

## はじめに
4月からTypeScriptを初めて使いだしてから一ヶ月ほど経ちますが、いまだに以下のようなコードに馴染めないでいます。

“`typescript
function reverseArray(arr: T[]): T[] {
return arr.reverse();
}

const numbers = [1, 2, 3];
const reversedNumbers = reverseArray(numbers);
console.log(reversedNumbers);
“`
これは「ジェネリクス」と呼ばれる書き方を使っています。

本記事はジェネリクスについての基礎から丁寧に確認する記事となります。

## ジェネリクスとは
### ジェネリクスの概要
ジェネリクスは再利用できるコンポーネントを作るための機能です。
特定の型ではなく、様々な型で動作するコンポーネントを作成します。
TypeScript独自の機能ではなく、C#やJavaなど他の言語にもジェネリクスは存在します。
ジェネリクスは関数のほか、クラス、インターフェース、

PythonとJavascriptのdatetime型について薄〜く調べてみた〜その１

# 書こうと思ったきっかけ
前にも書きましたが、自転車のレース運営をお手伝いしてるんですよ。
でね、タイムトライアルって種目があって、一人ずつ走ってタイムを競うんです。そう、走行時間を計測しなきゃいけないんですね。
で、最近、Google Apps Scriptで計算するようにしたんですが、まぁ時間関係に手間取りました。
そんな時にPythonでも時間を扱う事例が発生したのでまとめて書いとけや！と思ったわけです。
つまり、「**共通点があるならまとめてやった方が効率的じゃん**」です。

あ、そうそう、前提がひとつ。ここではjavascriptでもpythonでもexcelでも日付、時間を扱う型を**datetime型**と呼んでます。
正式には違うのかもしれないけれど、面倒なんでご容赦を。

# ISO8601　（日付と時刻の表記に関するISO）
ま、今日まで知らなかったですよ。本当に。
基礎の「き」は真面目にやっていた方がいい。

https://ja.wikipedia.org/wiki/ISO_8601

### 基本形式と拡張形式

ml5.js の FaceApi（face-api.js の一部の機能を使える API）で扱える仕組み・モデルに関するメモ

## はじめに
JavaScript で手軽に機械学習を扱える「ml5.js」の「FaceApi」に関するメモです。

●FaceApi
　https://learn.ml5js.org/#/reference/face-api


### 記事を書いた経緯
ml5.js の公式リファレンスを眺めていて、ふと FaceApi の内容が目にとまり、この FaceApi の内容はあまり詳しく見たことがなかったので、あらためて見てみたというのがこの記事を書いた流れです。

## 注意が必要な部分
ml5.js の FaceApi は、その元になっている「face-api.js」の全機能を使えるわけではなく、一部の機能のみを使えるもののようです。

具体的な内容は、トップページの以下の部分に書いてあります。

![image.png](https://qi

Prismaジェネレーターは簡単に作れる

# はじめに

[Prisma](https://www.prisma.io/)ではスキーマから[ジェネレーター](https://www.prisma.io/docs/orm/prisma-schema/overview/generators)という機能を使ってコードやドキュメントを自動生成することができます。例えば、公式が提供する`prisma-client-js`をはじめとする各言語のクライアントはジェネレーターを使って生成されています。また、TypeGraphQLのリゾルバを生成する[`typegraphql-prisma`](https://www.npmjs.com/package/typegraphql-prisma)や、ER図を生成する[`prisma-erd-generator`](https://www.npmjs.com/package/prisma-erd-generator)などもあります。個人的なおすすめはダミーデータを作ってくれる[`@quramy/prisma-fabbrica`](https://github.com/Quramy/prisma-fa

第16回 JavaScript transform-originとrotate、scaleを試す

# はじめに
今回は、`transform-origin`を設定して、`rotate`や`scale`の動作を確認したいと思います。

# 今回実施する内容
今回は、とJavaScript＋CSSで、`transform-origin`を設定しつつ、`rotate`や`scale`の動作を見ていきたいと思います。

– rotate

– scale

# ソースコード(Git Hub)
https://github.com/Build-Mount/JS_16_

実践編 GitHubの既存のRepositoryの編集 [5日間でReactの基礎を習得したい 4/5日目]

# はじめに

5日間でReactの基礎を習得する試みの4日目です。4日目は、GitHubの既存のRepositoryを編集することで、実践的に学びます。

https://qiita.com/MichaelHashimoto/items/f3ad9f56081a40b9b788

私はC#やPythonを仕事で使っているため、オブジェクト指向の言語的な考え方や、Pythonでの例えを使って理解を進めます。同じような境遇の方の理解の助けになれば幸いです。

# Repositoryの選定

Manu Aroraさんが作られたこちらのReactのポートフォリオを編集します。

https://github.com/manuarora700/simple-developer-portfolio-website/tree/main


選定理由は以

LWCで文字コードを「Shift-JIS」を指定してダウンロードする方法

## 概要
LWCでファイルを出力すると、文字コードがUTF-8となるため、Shift-JISで出力するためにはVisualforceにて「Content-Type」のcharsetにShift-JISを指定して出力するのが一般的かと思われる。
今回は、LWCでShift-JISを指定して出力するやり方について備忘を兼ねて記載する

## やること
– 外部ライブラリである`encoding.js`を静的リソースとして登録する
– LWCで静的リソースを読み込む

## 実装
1. 外部ライブラリである`encoding.js`を静的リソースとして登録する
– [UNPKG](https://unpkg.com/browse/encoding-japanese@2.1.0/encoding.min.js)からソースコードを取得する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3531653/36f83bb2-cb79-ea8b-b6ae-5a8cd3516b9a.png

javascriptで作るゲーム【ジャンケンマンフィーバー】表示処理編

前回まではこちらを参照してください。
https://qiita.com/tri-comma/items/e9790b420d9786f91149

表示は何で実装しようか考えた結果、canvasにしました。
まだメダル枚数表示とか音とか、実装すべきものは残ってますが、いったん出来たところまでで記事にします。
最後に動くソース一式を掲載しますが、まずはhtmlからどうぞ。

# HTML部分

シンプル。

“`html