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

[初心者向け] Typescriptの小技集

# はじめに
TypeScriptを使用することで、型を通じて早期にエラーを発見し、大規模アプリケーションのための強力な機能を活用することができます。
# Typescriptプロジェクトを始める
### 1. TypeScriptプロジェクトの初期化
プロジェクトにpackage.jsonファイルがまだない場合は、新しいNode.jsプロジェクトを初期化して始めます：
“`
npm init -y
“`
次に、TypeScriptとts-nodeをインストールします。ts-nodeを通じてTypeScriptファイルを直接実行できます。
“`
npm install typescript ts-node @types/node –save-dev
“`
“`package.json
{
“name”: “example”,

ドシロウトもGemini APIで遊んでみたかったのでロリポですぐ動くコードを作った

## 0.はじめに

【注意】この記事は技術者向けではありません。シロウト向けなのでご注意ください。　

私は、だだのド素人でフロントエンドのJavaScriptが少し読めて、少しカスタマイズできる程度です。

そんな私が生成AIを試したくてGemini APIを試したときに動いたコードを共有します。

カスタマイズした画面はこんな感じです。（デザインいじってませんが…）


## 1.制約条件

ドシロウトなので以下の制約がありました。

* フロントエンドのみ(node.jsやPythonなどバックエンドはNG）
* ロリポップのようなレンタル共有WEBサーバーで動く
* ソースコードが公開されており、一般人でも利用できる

## 2.ともかくAPIキーの取得

APIキーの取得は、ネットで検索すれば、いろん

JavaScriptでシングルトンパターン🐷Singleton

“`javascript
function singleton(fn) {
let result
return () => result = result ?? fn()
}

execute_singleton = singleton(() => Math.random())
console.log(execute_singleton())
console.log(execute_singleton())
console.log(execute_singleton())
“`


拡張子がmjsとjsのファイルの違いについて

Nodeのバージョン18以上のLambdaでは、デフォルトファイルの拡張子が`mjs`に変更されています。LambdaのNodeのバージョンを更新するにあたり、`mjs`ファイルと`js`ファイルとの違いについて調査しました。結論として、拡張子の違いはJavaScriptのモジュールシステムの違いに由来しています。以下、詳細を解説します。

## 拡張子が.mjsと.jsのファイルの違い
### 前提
JavaScriptには2つの主要なモジュールシステムが存在します。
– CommonJs
– ECMAScript(ES Module, ES2015)

### モジュールシステムと拡張子
– CommonJs: cjs（あまり一般的ではありません）
– ES Module: mjs

拡張子が`js`の場合は、`package.json`内の`type`フィールドで指定されたモジュールシステムに従います。`type`は`”commonjs”`または`”module”`のいずれかを指定できます。指定がない場合、デフォルトはCommonJSとなります。

## 実験
### 拡張子が.

TWICE ONCE JavaScript 1回だけ実行する関数【MISAMO】

“`javascript
function once(fn, max = 1) {
let i = 0
return () => i++ < max && fn() } function twice(fn, max = 2) { let i = 0 return () => i++ < max && fn() } execute_once = once(() => console.log(‘hi once’))
execute_once()
execute_once()

execute_twice = twice(() => console.log(‘hi twice’))
execute_twice()
execute_twice()
execute_twice()
“`


“`javascript

【JavaScript】関数に仮引数を指定して処理を共通化しよう

異なる値に対して処理が重複している場合は関数に仮引数を指定して処理を共通化（一本化）する事ができる。

## 例題
例えば以下の様な感じで**別々の入力フォームから取得した値を格納する変数**があったとします。
※value値を取得するタイミングはクリックイベントとします
“`diff_javascript
const inputVal1 = document.getElementById(‘hoge1’).value; //値 (1)
const inputVal2 = document.getElementById(‘hoge2’).value; //値 (2)
“`
入力した値を金額として出力したいが、その前に取得した値が三桁以上ならコンマ区切りにしておきたい。
単純に書くとこんな感じです。
“`diff_javascript
const price1 = Number(inputVal1).toLocaleString();
const price2 = Number(inputVal2).toLocaleString();
“`

:::note
“`

JavaScriptを使ってマウスポインターにプレビューを表示する

# はじめに
Webページの特定のオブジェクト(テーブルのセルなど)にマウスポインターを置いた場合、そのオブジェクトと紐づいている情報を用いて、マウスポインターの横に何かのプレビューを表示する方法を紹介します。
表示されるプレビューは、マウスポインターの位置を追いかけていきます。

## プレビュー表示の例
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1184971/6cf23a1f-8fdd-f107

ExpressにreCAPTCHAを埋め込む

BOT対策として、Expressで作成したフォームにGoogleのreCAPTCHA(v3)を埋め込みます。

## 1. GoogleのreCAPTCHAに登録する

Googleが提供するサービスなので、規約に同意して登録します。

https://www.google.com/recaptcha/about/

## 2. ドメインの設定

WebサイトのURLで使用しているドメインを追加します。
ローカルの開発環境でも動作させたいので、「localhost」も追加しておきます。

## 3. Viewの.ejsにHTMLタグを追記する

header部に.jsファイルのロードと送信関数を追記します。
次に、フォームの送信ボタンを置き換えます。
サイトキーはreCAPTCHAを登録するとGoogleから貰えます。

onSubmit関数でformタグのidを指定しているので、書き換えるのを忘れずに。

“` html

非同期通信のあるJavaScriptは結局のところシングルスレッドなのか？

JavaScriptはシングルスレッドで動作します。

# シングルスレッドとは？
シングルスレッドとは、1つの処理の流れでプログラムを実行する処理方式です。JavaScriptは、ブラウザのメインスレッド上で動作するため、他の処理の影響を受けやすく、処理が重くなると画面全体の動作が遅くなる可能性があります。

# 非同期処理でシングルスレッドを擬似的に並行処理
JavaScriptはシングルスレッドですが、非同期処理によって擬似的に並行処理を実現できます。非同期処理とは、処理を完了するまで他の処理を待たずに実行する処理方式です。

具体的には、以下のような方法で非同期処理を実現できます。

– コールバック関数: 処理が完了した後に実行される関数を指定する
– Promise: 処理の完了状態と結果を管理する
– async/await: 非同期処理をより簡単に記述する

# スレッドとイベントループ
JavaScriptは、イベントループと呼ばれる仕組みによって非同期処理を処理します。イベントループは、常に以下の処理を繰り返します。

1. キューからイベントを取り出す
2. イ

JSDoc @templateの使い方

VSCodeでJavascriptを使うときの型推論の話です。
ほとんど箇条書きですが、簡単なサンプルを併記しているので それほど難しくはないかと思います。

# 関数で使える
関数を実行するときに**実際に渡した引数の型**をベースにして型を推測してくれるようになります。
templateの記述が無いときは、any型になります。
“`javascript
/**
* @template T
* @param {T} value
*/
function foo (value) {
return value;
}

let a = foo(1); // number
let b = foo(”); // string
“`

# クラスでも使える
関数だけではなく、クラスでも使えます。
“`javascript
/**
* @template T
*/
class Bar {
/**
* @param {T} value
*/
constructor (value) {
this.value = value;
}

baz (

【個人開発】自転車好きのための投稿サービスを開発しました

## サービス概要
### サービス名 ： 「ChariLog(チャリログ)」

自慢のカスタムや友人とのツーリングなどの思い出を写真・カスタムパーツ(アイテム)と共に発信できる、 **自転車というツールに特化した投稿サービス**です。

【サービスURL】https://charilog.jp
【Githubリポジトリ】https://github.com/kiyosan0517/charilog

## なぜそのサービスを作ろうと思ったのか
– **自転車の楽しさを共有できる友人づくりに多少苦労した経験があったため**
=> アメリカやヨーロッパ圏などではBMXやロードレース等を中心とした自転車競技がメジャースポーツとして発展しているものの、日本においては健康志向の中年層がメインに

JavaScriptのES6とは？

# ES6は…
– JavaScriptの6番目のメジャーバージョン
– 正式名称はECMAScript 2015
– 2015年6月にリリース

# ES6では
– 従来のJavaScriptに多くの新機能や構文が追加
– JavaScriptのコードがより簡潔で読みやすく、効率的に書けるように

# 主な新機能
## クラス構文: オブジェクト指向プログラミング
“`javascript
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}

sayHello() {
console.log(`Hello, my name is ${this.name}.`);
}
}

const person = new Person(‘John Doe’, 30);
person.sayHello(); // Hello, my name is John Doe.
“`

## モジュール: コードを分割して管理しやすく
“`javascript
/

window.matchMediaを使用したレスポンシブ対応

## matchMediaを使用する理由
Javascriptでレスポンシブ対応を行う場合、ウィンドウサイズを取得とresizeの監視により処理を行うという方法があります。しかし、それではウィンドウサイズを変更するたびに実行されるためパフォーマンスとして良くありません。

matchMediaを使用することでブレイクポイントの切り替わりに応じて処理を実行することができるため、resizeのように無駄な処理の実行を防ぐことができます。

## 使用方法
### ブレイクポイントを決める
“`javascript
const mediaQuery = window.matchMedia(‘(min-width: 768px)’);
“`
まずはブレイクポイントを決めます。window.matchMediaを使用することで「MediaQueryListオブジェクト」が作られ、それを変数に格納します。こちらを基準として処理の切り替えを行います。

### 関数を定義
“`javascript
function checkWindow(windowSize) {
if (windo

Vue datepickerで【和暦】＋【年度/月】の表示

# Vue datepickerの年選択と選択年月日で和暦表示を追加する

### 参考サイト
[Vue datepicker公式(#year-overlay)](https://vue3datepicker.com/slots/overlay/#year-overlay])

## 最終結果

## 準備
year-overlayを利用して年選択画面を”select”仕様に書き換える。

(公式より↓)
“`js:vue