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

JavaScript プリミティブ型 オブジェクト

JavaScriptの型を忘れないようにメモを残します。

#### プリミティブ型
“`String Null
Number Symbol
Boolean Biglnt
Undefined
“`
#### オブジェクト
“`
Object
プリミティブ型以外
“`

【2023年版】pydantic2でFastAPIでスネークケースをキャメルケースに自動変換する

## はじめに
Pythonがスネークケースが主流であるのに対し、JavaScriptはキャメルケースが主流です。
JSONを返却する際にキャメルケースに変換する方法をまとめました。
FastAPIは、2023年現在ではまだまだ発展途上のフレームワークで、記述方法も都度変わっています。2023年時点での最新情報であることをご了承ください。

## 対象者
この記事は下記のような人を対象にしています。

– FastAPIでAPI開発をしている人
– pydantic1を使用していたが、

## 前提
– **FastAPIのバージョン: 0.103.2**
– **pydanticのバージョン: 2.4.2**

pydanticのバージョンが古い場合とは書き方が異なることに十分ご注意ください。

## 結論
データベースからUserデータを取得し、JSON形式で返却する場合を考えます。
`ConfigDict` を使用するのがポイントです。

“`python:user_schema.py
from pydantic import BaseModel, ConfigDict
fr

React×TypeScriptでhtmlのinputタグのonChangeみたいな動作をする入力コンポーネントの作成(備忘録)

# めっちゃ簡単
“`react
import {Component, ChangeEvent, KeyboardEvent} form “react”

export class TextInput extends Component<{ type?: "text"|"email"|"password", value?: string, className?: string, onChange?: (e:ChangeEvent) => void,
onCommit?:(e:KeyboardEvent) => void
}> {
state: {
isComposition: boolean
} = {
isComposition: false
}
render() {
return <>

JavaScript まわりの用語あれこれ

# 概要
～script だの ～js だのが多すぎたのでまとめ。

# ECMAScript
– JavaScript の仕様、構文などをまとめた標準規格
– 要するに JavaScript のバージョンを示す（ 例：ES6 )

—

# Browser JS

– ブラウザ上で動作する JavaScript 環境
– 正確にはこんな単語はない（単に「ブラウザ上で動くJS」の意）
– 正確な表現があれば教えてください

# Node.js

– サーバー側で動作する JavaScript 環境
– **npm ( Node Package Manager )** と呼ばれるパッケージの管理システムを同梱している

—

## CommonJS

– JavaScript において、**モジュール**を使用するためのシステム
– Node.jsではデフォルトで全てのモジュールをこれで扱っている
– `require()`、`module.exports`などを使用

## ESModules

– ECMAScript 標準のモジュール管理システム
– 最新版の No

[Vue.js] Vue.jsを学ぶ①

## はじめに
今回はゼロからVue.jsについて学んだため備忘録として書きました。
環境設定からディレクティブまでです。

## 環境設定
### 読み込み方法
1. CDN　　**一番簡単**
HTMLのbodyの終了タグの直前に以下を入力する
“`vuejs:CDN

“`
1. 直接読み込み(ファイルをダウンロードして配置)
1. NPM(パッケージ管理ソフトの利用)
1. Vue CLIを使ってプロジェクトの基礎を作る

:::note
Vue.jsを読み込んでからJavaScriptを読み込む
:::

### VSコードでオススメの拡張機能
[**Vetur**](https://marketplace.visualstudio.com/items?itemName=octref.vetur)
Vueに特化した拡張機能で以下のことが可能

– シンタックスハイライト
– スニペット
– Emmet
– リンティング/エラーチェック
– フォーマット
– インテリセン

JavaScriptのURL操作

JavaScriptはよくWebブラウザやWebサーバーで使われるので、URLを操作することもあります。
URLの値を取得したり、操作したりする方法をメモします。
使用しているのURLは私の過去の投稿記事です。

“`js
const url = new URL(‘https://qiita.com/yuta-10112022/items/81e7ac587aaa6afeb3e4’);
console.log(url.href); // https://qiita.com/yuta-10112022/items/090d4f302f1edcefcf86
console.log(url.origin); // https://qiita.com
console.log(url.protocol); // https:
console.log(url.hostname); // qiita.com
“`
urlのプロパティは読み書きすることができ、部分的に変更することができます。
“`js
const url = new URL(‘https://example.com’);
url

日付を操作するDateオブジェクト

良く使う、Dateオブジェクトについて、まとめてみました。

(個人的にはどんどん追記していきたい)

# 目次

1. Dateオブジェクトとは

2. 呼び出し方

3. 日時を読み取るメソッド

4. 日時を変更するメソッド

5. 使い方

6. Reactライブラリ

# 1. Dateオブジェクトとは

カレンダー作成や日付取得に用いるオブジェクトです。

# 2. 呼び出し方

Date型としてDateオブジェクトを呼び出します。

“`
const now :Date = new Date();
“`

# 3. 日時を読み取るメソッド

| メソッド名 | 説明 |
|:-:|:-:|
| getFullYear()| 年を4桁で返す(例: 2022) |
|getMonth() | 月(0-11)を返す|
|getDate() | 日(1-31を返す) |
|getDay() | 曜日(0-6)を返す　※0は日曜日 |
|getHours() |時間(0-23)を返す |
|get

CSVファイルをFileAPIで読み込む

言わずと知れたCSVファイルを、EXCEL等で出力されるシフトJIS形式の状態で読み込めるJavaScriptコードを書いてみます。
# 実行条件
– 入力対象となるCSVはソフトJIS形式である。例えば郵便局の[郵便番号データ](https://www.post.japanpost.jp/zipcode/download.html)を加工無しで読めるようにする。
– フレームワークは用いずVanillaJSで書く。
– なるべくシンプルなコードとし装飾も最低限にする。
# 対象コード
シフトJIS形式によるテキストファイルを読み込む場合、問題になるのは **実際のHTML上で使用されているキャラクターコードとの相違をどうするか？** ということです。下記コードにおいては、[encoding.js](https://github.com/polygonplanet/encoding.js/blob/master/README_ja.md)により解決しています。
“`



TypeScriptの環境構築とコンパイル

こんにちは。
株式会社クラスアクト インフラストラクチャ事業部の大塚です。

少しずつ、JavaScriptの勉強をして理解を深めようとしている私ですが、その目的としてDjangoとReact Native(Expo)でWeb/スマホアプリの開発方法を理解しサービスを開発したいというものがあります。
「React Nativeを学べよ！」という声が聞こえたり聞こえなかったりしますが、個人的な感覚で話をすすめると、React Nativeを理解するにはJavaScript/TypeScript/Reactでどういう書き方をするのか、相互の関係性を理解することは避けて通れない気がするのです。

そこで今回はTypeScriptの環境セットアップを行い、ChatGPTの力を借りつつ以前作成したJavaScriptをTypeScriptにあえて変換し、どういう書き方の違いがあるのか等を確認してみたいと思います。

# 参考サイト
TypeScriptを使用するためにはNode.js環境が必要になるみたいです。
私の環境は以下のQiitaで記載している通りNVSを使ってNode.js環境を作って

kintone テーブルの変更イベントで行位置を求める

kintone テーブルの変更イベントには、テーブル行位置の情報が無いので、テーブル行位置を求めてみます。

# 概要

テーブルの変更イベント時の情報には、テーブル行のオブジェクトがあるので、テーブルの各行とオブジェクト比較を行うと、テーブル行位置を求めることができます。

例：
table[i] === event.changes.row

cybozu developer network [レコード編集画面でフィールドの値を変更したときのイベント](https://cybozu.dev/ja/kintone/docs/js-api/events/edit/edit-change-event/)
>changes.row オブジェクト 値を変更したテーブルの行データ
行を追加した場合：追加した行のデータ
行を削除した場合：「null」
テーブル外のフィールドを変更した場合：「null」

# 確認用アプリ

テーブル内項目を変更したら、テーブル行位置に行位置をセット

![2023-12-29_13h08_55.png](https://qiita-image-store.s3.a

TypeScript – カレンダー日付の妥当性確認(2)

FullCalendarライブラリで日付の移動をするときに、2/31や4/31などカレンダー上存在しない日付であるかチェックをする関数をどうやって実装するか調べました。

前回記事：

https://qiita.com/taitaitai55/items/5c0d8e1446474b77b208

■改善点
Dateオブジェクトを生成するときに「new Date(‘1/01/41’)」とすると、2041/1/1(Tue Jan 01 2041 00:00:00 GMT+0900 (日本標準時))で生成されます。
1年1月41日と解釈すると、カレンダーの日付として存在しないため、厳密なチェックをする必要があります。
厳密なチェックとして、文字数のチェックや正規化を使ったカレンダーの日付の範囲であるかのチェックを関数に加えてみました。

■関数
“`Typescript:sample1.ts
// 引数は、年・月・日の３つ
// 戻り値は、true:カレンダー日付として存在、false:カレンダー日付として存在しない
const isValidCalendarDate = (year:

jQueryで実行順序を保証する記述方法

※この記事は僕がぶち当たった問題をとりあえずChatGPTくんに丸投げしてライティングしてもらったものです。

jQueryを使用してWeb開発を行う際、時には特定のコードが正確な順序で実行されることが重要です。
これには、異なる要素や処理が依存関係を持っている場合や、特定の初期化手順が必要な場合があります。
この記事では、そのようなケースで実行順序を確実に保証するためのjQueryの記述方法に焦点を当てます。

# コードの依存関係を理解する
まず初めに、コード内の異なる部分がどのように依存しているかを理解することが重要です。
例えば、特定のDOM要素が存在するかどうかを確認してから特定の処理を実行する場合などが挙げられます。
“`js
$(document).ready(function() {
// 依存関係を確認
if ($(‘#myElement’).length) {
// 依存関係が満たされたら処理を実行
myFunction();
}
});

function myFunction() {
// ここで

気になるあの人のタイプは〇〇！

## 1. 見た目のタイプ判定をする冷徹なLINEBot

今回は合コンや婚活を想定したLINEBotを作ったのでご紹介します。

皆さんは気になる異性に見た目がタイプであることを伝えた経験はありますか。

伝え損ねたせいで
**友達どまりになってしまった。**
ということがあるんじゃないでしょうか。

まあ伝えていたら進展が見られたかはわかりませんけどね。

しかし、あの頃
上手に伝えられていたら
後悔は少ないと思っている方は多いのではないでしょうか。

なかなか相手に直接、そういった気恥ずかしいことを伝えるのは
抵抗がありますよね。

そこで
***Taechable Machine***
の力を借りて
その悩みを解決させる
***LINE Bot***
を作りたいと思います。

## 2. 完成したLINEBot

このLINEBotを使えば
顔写真を送ってもらうことで
その相手に
見た目がタイプ

Vueでリアクティブ性が失われない分割代入

まだ追記予定ですが、いつになるかわからないのでとりあえず公開

## 概要

Vue3.x Composition APIにて使用される`ref()`や`reactive()`といったリアクティブな変数を定義する機能があります。よく言われるのは**オブジェクト型リアクティブに分割代入をするとリアクティブ性が失われる**といった話がありますが、実はそうでない場合が簡単に起こりうることが分かったので書いてみようと思います

## 読者対象

・TS・JSでのある程度の変数型を使ったことがある人（特に配列やMap）
・Vue3.xのComposition APIを触ったことがある人
・Vueのリアクティブを深く理解したい人

## 基礎知識：`ref()`と`reactive()`の原理

まずはVueでのリアクティブのおさらいです
Composition APIではリアクティブな変数を利用するために
– `ref()

【JavaScript】正規表現を使ってみたりパスワードを画面上に表示させたりする

こんにちは。
株式会社クラスアクト インフラストラクチャ事業部の大塚です。

前回、JavaScriptの勉強の一環でユーザ/パスワードを入力するフォームでデータが入っていない場合の警告ダイアログを表示する方法を学びました。

https://qiita.com/ohtsuka-shota/items/a5a3fcedc7734879e2bd

これだけでも勉強になったのですが、ダイアログを出さないまでも入力を求めるようにするくらいであればHTMLのrequiredでも出来たりします。
そこでもう少しJavaScriptの利便性を確認するために、入力された文字列が英語かどうかを確認するためのコードの書き方や●●という風に隠されているパスワードをどうやって表示させるのかを勉強してみました。

# 実装した画面
パスワードの目の部分が雑ですが、こんな感じです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/f229834c-ab57-5795-081a-ce0b53be35a

式の余興に「AWS＋GASシステム」で超盛り上がった件　〜画面編〜

「式の余興に「[AWS＋GASシステム」で超盛り上がった件　〜はじまり〜](https://qiita.com/shun-gondo/items/44924e25f2b19fd5f522)」の続きになります。
※**前回記事を読んでいない人はぜひ読んでください。お願いします!!**
今回の記事は主に、**システムの構成と画面周り**の実装に焦点を当てています。

# 🙋‍♂️プランナーさんに確認
そもそも自作したとして、**会場側から許可が降りるのか**。**会場スクリーンにどのように出力できるのか**を確認しなければ、作る意味もないし、何も決められません。

とりあえずプランナーさんに確認してしたところ、二つ返事で**許可が降りました**。
会場スクリーンの出力はHDMIに対応しているようでした。
意外にも、パソコンを利用した余興は一般的らしいです。
※どんな余興をしてるんだろう。。すごい気になる….

さっそく、システム構成を考えてみました。

# 📏システム構成
Webアプリケーションでの実装としました。

!

ユーザー満足度を高めるウェブアプリ開発：5つの必須設計思想とその実践法

最近のウェブアプリは、以前に比べて機能が充実し、複雑になっています。そのため、信頼できるアプリを開発するためには、適切な設計の考え方が必要です。

ここでは、モダンなウェブアプリを開発するための5つの設計の考え方を紹介します。

# 1 モジュール化
モジュール化とは、アプリを小さな部品（モジュール）に分割することです。モジュール化を行うことで、以下のメリットがあります。

コードが読みやすくなり、理解しやすくなる
問題が発生したときに原因を特定しやすくなる
機能の追加や変更がしやすくなる
モジュール化を行う際は、以下のようなポイントを押さえましょう。

– モジュールの単位は、小さく単純なものにする
– モジュールの役割や責任を明確にする
– モジュール間の依存関係を少なくする

## 1-2 モジュール化のサンプル
モジュール化の概念を具体的なコードの例で説明します。
ここでは、簡単なユーザー管理システムを想定し、ユーザーの情報を扱うUserクラスとユーザー情報の検証を行うValidatorクラスをモジュールとして分割します。
以下に、その二つのモジュール（User.js と V

【JavScript】Objectの扱い方

# はじめに
プロパティへのアクセス方法が色々あって、あれ？ってなったので整理してみます。

# オブジェクトとは
Javascriptにおけるオブジェクトとは、プロパティの集まりである。
プロパティは名前（キー）と値との関連付けで成り立っている。
中括弧`{}`で定義することができる。

var myCar = {
make: “mini”,
model: “clubman”
year: “1995”,
}

オブジェクトに割り当てられていないプロパティは`undefined`になる。nullではないので注意。（条件分岐でnullだけを指定していたらバグの温床になりそうですね。知らなかった。`undefined`と`null`の違いもよくわからんので後ほど調べますか。）

# プロパティへのアクセス方法
ドット演算子とブラケット記述法でアクセスできる。

myCar.make // mini
myCar[“make”] // mini

#### ドット演算子での注意点
プロパティ名

睡眠時間を計りたくて（計算）。

# 睡眠時間を計りたくて（計算）。
無性に睡眠時間を計りたくて作ってみた。スマホのストップウォッチを使用すれば計れるのですが、なんか目覚めとともに作りたくなったので作りました。
—
—
“`html:index.html








就床時間–

NeosVR コンパイラ その12

# 概要
NeosVRのオブジェクトを外部で生成するコンパイラを開発した。
俺コードのコンパイラ仕様を見直しする。

# 俺コードのコンパイラ仕様変更
– elixir製オブジェクトサーバーを取りやめる。
– obj.jsを採用。

# サンプルコード

“`

var out = document.getElementById(“out”);
var src = document.getElementById(“src”);
var a = {};

function run() {
var str = src.value;
var lines = str.split(“\n”);
for (var i = 0; i < lines.length; i++) { if (lines[i].substring(0, 1) == "{") { lines[i] = lines[i].replace("{", ""); var code = lines[i].split("} ="); var va = code[0].split(",