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

JavaScriptの記法についての備忘録

お疲れ様です、りつです。

React学習を行うにあたり、JavaScriptの記法について把握しておくことは重要です。
今回は特にモダンJavaScriptの記法について、復習と備忘録も兼ねてまとめてみました。

:::note info
Reactの基礎を学ぶ上で、じゃけぇさんのUdemy動画には大変お世話になりました。
JavaScriptの記法についても丁寧に説明されておりますので、もっと詳しく知りたい方はぜひ視聴してみてください。
:::

https://www.udemy.com/course/modern_javascipt_react_beginner/?couponCode=BASIC20241001

※ なお、以下で載せている実行例や実行結果ですが、直前で実行したものと同一内容の場合は省略しております。

# 1. アロー関数

シンプルな関数をもとに、通常の書き方と、それをアロー関数ではどのように記述できるかをまとめます。

## 通常の関数の書き方

以下は、引数で受け取った名前をもとに、あいさつを返す関数です。
通常の記述方法は以下のようになります。

#

JavaScriptのthisについて調べてみた

# ■はじめに

こんにちは。白水（しらみず）と申します。
普段は不動産スタートアップでフロントエンドエンジニアとしてお仕事しています。
今回は「JavaScriptのthis」について記事にしました。
良ければご覧ください。

[Shiramizu\_Junya lit\.link\(リットリンク\)](https://lit.link/js226)

# ■オブジェクトのメソッド呼び出しでのthisの動作

メソッドは、オブジェクトのプロパティとして関数が定義されている場合、それをメソッドと呼びます。
メソッド内のthisは、呼び出し元のオブジェクトを指します。
thisは “ドット以前 “のオブジェクトであり、メソッドを呼び出すのに使われるオブジェクトを表します。

## ◆メソッドの定義方法について

“`jsx
const bird = {
name: ‘Crow’,
color: ‘black’
}

// 関数式を使って関数を作成し、オブジェクトのプロパティ に割り当てています。
// オブジェクトのプロパティとなっている関数を、*メソッド* と呼ばれます。
bir

狗形机器人。一款将网络摄像头捕捉到的人（两条腿行走）的运动映射并绘制到狗（四条腿行走）上的游戏。



将代码粘贴到文本编辑器（例如记事本）中，并将文件名保存为“index.html”。当您在浏览器中打开保存的文件时，代码将运行。

### 使用网络摄像头捕捉到的人体动作被映射到狗的形状并绘制出来。 狗的头、腿和尾巴根部都经过适当的绘制，以再现狗的身体形状。

您可以使用网络摄像头运动来模拟狗的骨骼。

现在，狗似乎站在地面上，并且根据网络摄像头镜头的骨骼估计来模拟狗形机器人的运动。

“`html

A dog-shaped robot. A game in which the motion of a human (walking on two legs) captured by a web camera is mapped onto a dog (walking on four legs) and drawn.



The human motion captured by the webcam is mapped onto a dog and drawn. The dog’s head, legs, and tail are properly drawn to recreate the shape of the dog’s body.
The webcam movement can be used to simulate the dog’s skeleton.

The dog will appear t

【Rails】furimaアプリ　商品出品機能実装　#2

# 実装概要
– JavaScriptを使用して商品出品ページの販売価格を入力すると販売手数料（10%)と販売利益が自動で表示される機能の実装。
– データが保存され、エラーがある際はエラー文が表示される機能の実装。

### jsファイルの作成
app/javascriptディレクトリ配下にitems_new.jsファイルを作成。

### items_newファイルの読み込みができるように設定

items_new.jsファイルをアプリに「ピン留め（固定）」し、ページや機能の中で使えるようにするため下記コードを追記。
“`ruby:importmap.rb
# 中略
pin “items_new”, to: “items_new.js”
“`
### items_new.jsの機能を実際に使うために読み込むコードを追記
“`ruby:app/javascript/application.js
# 中略
import “items_new”
“`

### items_new.jsファイルの編集
“`ruby:app/jabascript/items_new.js
docu

入力フォームで数値を入力する際はparseIntを使用する（JavaScript, React）

## 状況
* JavaScriptで入力フォームから数値を入力する
* 入力フォームから受け取った数値を合計する

※コメントでご指摘を頂き、parseIntだと文字列によって誤った値を返す恐れがあるので、Number()や単項プラスを使う方が良いとのことです。

parseIntだと整数専用なので、Number()や単項プラスを使用して文字列全体を数値として扱ったほうが誤った変換を防ぐことが出来ます。

## parseIntを使わない場合の問題点
* 入力フォームで数値を入力して送信した場合、JavaScriptが動的にstring（文字列）型に変換してしまう
* 入力した数値がstring型だと何が良くないのか？
* string型のまま数値を合計しようとすると文字列の連結を起こしてしまう
“`javascript
例:string型での足し算
const str1 = “1”;
const str2 = “2”;

console.log(str1 + str2);

12
“`

## parseIntの使い方
“`javascript
parseIn

reduceメソッドで配列の合計値を取得する（JavaScript）

## 状況
* JavaScriptで配列の合計値を取得したい
* for文のようなループ処理は使用せずワンラインで記述したい

## 配列の合計値を取得する記述
“`javascript
const array = [1, 2, 3];

const result = array.reduce((sum, current) => sum + current, 0);
console.log(result);

6
“`
## 解説
* 処理の流れ
※引数のsum, currentは自身で好きな名前を使用できる
1. 初期値を0に設定しているので、累積値であるsumに代入される
1. currentに配列の要素が一つずつ代入され、sumと足し算される
1. 配列の全ての要素がsumと足し算されるとresultに代入される
sumは累積値なので、
0 + 1 = 1
1 + 2 = 3
3 + 3 = 6
といった増え方をする

オブジェクトのキーと変数名が同じ場合の省略記法（JavaScript）

## 概要
* JavaScriptでオブジェクトのキーと変数名が同じ場合、変数名を省略して記述出来る（オブジェクトリテラルの省略記法）
* オブジェクトを省略して記述できるのは便利だが、スプレッド構文と組み合わせた場合など勘違いしやすい
## コード

* 省略記法を使用しない場合
“`javascript
const title = ‘JavaScriptの学習’;
const time = 2;

{
title: title,
time: time
}
“`
* 省略記法を用いた場合（キー名と変数名が同じなので値を省略できる）
“`javascript
const title = ‘JavaScriptの学習’;
const time = 2;

{
title,
time
}
“`
* 間違えやすい状況
スプレッド構文と合わせてオブジェクトリテラルの省略記法が使われている場合、{}がオブジェクトを表しているのかJavaScriptを埋め込んでいるのか分かりづらい
“`javascript
const newRecords = […

FlaskとElectronで麻雀リアルタイムシミュレーターを作っていく記録①

学校の授業の課題で個人製作をすることになり、私は「麻雀リアルタイムシミュレーター」を作成することにしました。

FlaskとElectronでデスクトップアプリとして作り、皆さんご存じの方も多いことでしょう麻雀ゲーム「雀魂」。こちらのウィンドウ画面をリアルタイムでキャプチャして、画面の対戦情報から現在切る牌をシミュレーションしてくれる機能を備えようと思います。
この記事はそんなデスクトップアプリを作る過程を記述していこうと思います。

作成したソースコードは一応[こちら](https://github.com/mshok0511/mahjong-realtime-simulator-app)に公開していますが、現時点(2024/10/25時点)での完成度は形だけギリギリ整っているだけのポンコツなので、大目に見てくれると嬉しいです。これからちゃんと完成していくので、お許しください…。

※このように自分で作ってみたプログラムを公開し、記事にして投稿するのは初めてなので、何かアドバイスやソースコードの書き方、質問などがあればたくさんほしいので、ぜひコメントをお願いします。
# 環境構築

JS実行環境「Bun」を使ってみる(Mac OS)

# 概要
– JavaScriptやTypeScriptのアプリケーション開発向けのサポートツールが詰め込まれた統合型のツールキット

# インストール
“`terminal
curl -fsSL https://bun.sh/install | bash
bun -v // バージョンが表示されれば成功
“`

# 実行
“`test.ts
const server = Bun.serve({
port: 3000,
fetch(req) {
return new Response(“Bun!”);
},
});

console.log(`Listening on http://localhost:${server.port} …`);
“`
“`terminal
bun run test.ts
“`
– localhost:3000を開くと画面上に「Bun!」が表示される

![スクリーンショット 2024-10-26 10.43.00.png](https://qiita-image-store.s3.ap-northeast-1.amazo

Go言語とJavaScriptで数値を人にやさしく表示する方法

# はじめに

Go言語とJavaScriptで開発するプログラムから数値を表示する時、人にやさしく表示するためのパッケージをの紹介です。バイト数をMBやGBにしたり、大きな数値をカンマ区切りで表示するためのものです。
82854982Bytesより82MBのほうが直感的にわかりやすいです。
6582491という数値よりも、6,582,491のほうがわかりやすいというものです。

# Go言語のパッケージ

Go言語は、go-humanize

https://github.com/dustin/go-humanize

です。

サンプルプログラムは

“`go
package main

import (
“fmt”
“time”

“github.com/dustin/go-humanize”
“github.com/dustin/go-humanize/english”
)

func main() {
// バイト数
fmt.Printf(“That file is %s.\n”, humanize.Bytes(82854982)) // That file i

犬型ロボット。webカメラでキャプチャした人間（２足歩行）のモーションを犬型（４足歩行）にマッピングし描画するゲーム。




コードをメモ帳などのテキストエディタに貼り付け、ファイル名を「index.html」として保存します。その後、保存し

日本語テキストを暗号化し、復号化されたテキストを読み上げるゲームです。（下記の暗号を復号すると秘密のお話が聴けます。）



コードをメモ帳などのテキストエディタに貼り付け、ファイル名を「index.html」として保存します。その後、保存したファイルをブラウザで開けば、コードが実行されます。

### 日本語テキストを暗号化し、復号化されたテキストを読み上げるゲームです。（下記の暗号を復号するとお話が聴けます。）

44K344Oz44OX44Or44Gq44K344Of44Ol44Os44O844K344On44Oz44KS6ICD44GI44G+44GX44KH

シンプルな、テキストからの画像生成をおこなう　ミニチュアAIモデルのゲームです。

#### ショートストーリー: 東京のプログラマの冒険
東京の喧騒の中、一人のプログラマ、田中健太は、自宅の狭いデスクで新しいプロジェクトに取り組んでいた。彼の目の前には、ウェブカメラが設置され、コンピュータの画面にはコードがびっしりと並んでいる。彼は、画像生成アルゴリズムを使って、独自のアートを創り出そうとしていた。


彼の目標は、ウェブカメラからキャプチャした画像をもとに、プログラムが自動的にアートを作り出すことだった。田中は、TensorFlow.js を使って、複雑なニューラルネットワークを構築し、テキストエンベディングを使って、彼のアートに新たな命を吹き込むことを計画していた。

ある晩、彼は「Hello」というシンプルなテキストを使って、Universal Sentence Encoderからのエンベディングベクトルを生成し

圧倒的なスピード感。加速がブーストする宇宙体感ゲーム。スペースキーを押すとさらに加速。



コードをメモ帳などのテキストエディタに貼り付け、ファイル名を「index.html」として保存します。その後、保存したファイルをブラウザで開けば、コードが実行されます。

### 宇宙空間での加速体験ゲームです。

圧倒的なスピード感。加速がブーストする宇宙体感ゲームです。（スペースキーを押すとさらに３秒間加速します。）

“`html

【備忘録】Udemy講座まとめ JavaScript vol.4 if文 条件分岐

# if文

“`JavaScript:JavaScript
if (true){
console.log(“OK”);
}

“`
コンソールにはOKが出る
()の中が条件となり、trueだった場合、{}の中が実行される
falseには実行されない

# else文

“`JavaScript:JavaScript
let ok =false;

if (ok){
console.log(“OK”);
}else{
console.log(“NO”);
}
“`

elseはif文の()がfalseだった場合、実行される
この場合は、OKが出る

# else if

“`JavaScript:JavaScript
let ok =false;
let maybeOk =true;

if (ok){
console.log(“OK”);
}
else if(maybeOk){
console.log(“maybe Ok”);
}
else{
console.log(“NO”);
}
“`
この場合、maybe Okがコンソールに出る
まずif文が、「

JavaScriptでkintone上の長文から単語を抜き出し、各フィールドに振り分ける

# 概要

kintoneでは、クラフテクス社の[データシンカー](https://datasyncer.craftex.jp/csv_zero)やクロス・ヘッド社の[メル箱](https://www.crosshead.co.jp/solution/crosslink_melbako/)など、メールから直接kintoneのレコードに流入させる機能はありますが、メール本文を一つの値にあるとそのままでは使いにくいことも。

:::note info
データシンカーはjson設定にて分割できるが、メールの種類が複数でシステムの安定稼働を考えると、分岐せずそのまま流入させた方がいいケースもある。
:::

そこで今回は、kintoneのフィールドに入力されたテキストから情報を抽出し、他のフィールドに自動的に振り分けるJavaScriptの実装方法を紹介します。

# 事前準備

## フィールド設定

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211946/53869ece-e786-cf

【Jquery】【Javascript】hide showをまとめたい

# 従来のコード
“`javascript
$(“h2.result”).show();
$(“p.result”).show();
$(“p.osusume-result”).show();
$(“.result-link”).show();
$(“p.one-more”).show();
“`

# まとめたやつ
“`javascript
const elements = [“h2.result”,”p.result”,”p.osusume-result”,”.result-link”,”p.one-more”];
$(elements.join(“, “)).show();
“`

# これでもいける
“`javascript
const elements = [“h2.result”,”p.result”,”p.osusume-result”,”.result-link”,”p.one-more”];
$(`${elements}`).show();
“`

deno 2.0 「ローマ数字変換プログラム」をTDDで始めるのが便利だった

### はじめに
みなさんも一度は **「ローマ数字を相互に変換する（4 ↔ Ⅳ）プログラム書きたいなー！」** と思ったことがありますよね。

実際は以下のような結果を得られる仕様です。
“`ts
import { romanize, deromanize } from ‘./main.ts’

romanize(1)
// ‘I’
romanize(2)
// ‘II’
romanize(3)
// ‘III’
romanize(4)
// ‘Ⅳ’
romanize(2024)
// ‘MMXXIV’

deromanize(‘I’)
// 1
deromanize(‘II’)
// 2
deromanize(‘III’)
// 3
deromanize(‘IV’)
// 4
deromanize(‘MMXXIV’)
// 2024
“`
さっそく作っていきましょうー

### denoでサクッと準備

まずはdenoのinstall。
“`terminal
brew install deno
“`

プロジェクトの作成
“`terminal
deno init roma

ブラウザで上にスクロールした時のリロードを制限する方法

## はじめに
ブラウザの上スクロールでリロードされることを防ぎたいと思ったことはありませんか？特にフォーム入力中やデータ編集中に、意図せずリロードが発生してしまうと、ユーザーの作業が消えてしまいます。この記事では、そのような問題を可能な限り抑える実装方法を紹介します。

:::note warn
必ずスクロールによるリロードを制限できるものではありません。

Androidでリロード可能な場合があることを確認しています。
リロードで消えたら困るものに関しては、リロード時に確認を挟むような処理を追加しましょう。
:::

## 実装のポイント
1. **上方向のスクロールのみを制御**
この実装の特徴は、全てのスクロール動作を制限するのではなく、上方向のスクロールのみを制御する点です。これにより、通常のスクロール操作に影響を与えることなく、意図しないリロードを防ぐことができます。

2. **CSSによる制御**
overscroll-behavior: none; というCSSプロパティを使用することで、ブラウザのデフォルトのオーバースクロール動作を制御します