JavaScript関連のことを調べてみた2023年09月23日

【Vite】jQueryやVanilla JSでWebサイト制作をしたい人のためにボイラープレートを公開しました。

HMR（≒ホットリロード）やビルドが高速と巷で話題の Vite。
Webpackやgulpからの移行を考えている人も多いのではないでしょうか。

しかし、jQueryやVanilla JS（生のJS）を使って受託制作を行おうとすると、設定すべき項目が多く、ちゃんと使える状態までに時間がかかります。

そこで、受託のWebサイト制作者向けに「Viteボイラープレート」を公開しました。

ぜひ使ってみてください。

https://github.com/masa5714/vite-boilerplate

# 特徴

– 今すぐに制作を開始できる。
– HTMLパーツを共通化できる。（Handlebarsを使用）
– HMR（ファイル保存時に自動でブラウザをリロードするようなイメージ。）
– ベンダープレフィックスの自動付与。
– JSONファイルでmeta情報を管理できる。
– 【ビルド時】画像の最適化（圧縮）ができる。
– 【ビルド時】HTMLを自動整形してくれる。
– 【デプロイ時】HTMLを圧縮（minify）してくれる。
– 【デプロイ時】SSHによるデプロイの雛形が用意されてい

React Native入門 プロジェクト作成まで

## はじめに
React Nativeの環境構築の手順や、基礎知識について、メモ代わりに書いていきます。

## React Nativeとは
以下の記事から抜粋しました。

React Nativeとは？～特徴やメリットデメリット、事例を紹介～

React Nativeとは、Facebook社が開発したアプリケーションフレームワークでクロスプラットフォームのひとつです。React Nativeを用いることでiOS、Android、Windows、macOSなど、異なるプラットフォームのアプリを同時開発することができます。なお、React Nativeの開発言語にはJavaScriptが用いられています。

Reactは、UIを構築するためのJavaScriptライブラリで、2012年にFacebookのソフトウェア・エンジニアが開発したものになります。社内で開発された後には、Facebook.comやInstagram.com等にも導入されています。

つまり、React NativeはスマホアプリをReactの記法で開発できる、クロスプ

FlowerJS: 花の形を作って、アニメーションできるJavaScript フレームワーク

# JavaScript フレームワーク　FlowerJSの紹介
これは[CreateJS](https://createjs.com/ “CreateJS Home”)というインタラクティブなアニメーションを作るフレームワークを拡張して、簡単に花の形状を作ってアニメーションできるHTML5 + Canvas向けのプログラムです。CreateJSに定義されているメソッドをそのまま引き継いで、新たに花向けのメソッドを追加しました。比較的簡単にアニメーションが作れるのがメリットです。

## 設定方法
まず、HTMLにキャンパスを設定して、[FlowerJS](https://github.com/jirotubuyaki/FlowerJS “FlowerJS Github Home”)から、ソースコードをダウンロードしてください。その後、

BCDiceのAPIをDiscordのBotに組み込む

## 1\.はじめに
「Discordはテキストチャットもボイスチャットもできるのにダイスロールができない!!」
「DiscordだけでもTRPGができるようにしたい!!」
そうおもったこと、一度はありますよね?

今回はその問題をDiscord.jsというAPIとココフォリアなどに使われるBCDiceというAPIを使用して、DiscordのBotでダイスを振れるように初心者の解説をつけながら話したいと思います。

※前提知識として「Discord.js でBotを作れる」ということが含まれます。(いつか記事にします)
さらにココフォリアなどのオンセツールで[ダイスの振り方](https://docs.bcdice.org/)を知っていると良いですね。

– ### 今回作りたい機能(目標)
1\.チャットに1D4などを打つだけでダイスを振れるようにする
2\.システムに対応したダイスも振れるようにする
– ### 環境
| 名前 | ver |
| —- | —- |
| MacOS | 14.0 Beta |
| Node.js | 18.16.0 |
| Discor

「HTML5のtableタグをCSV出力（ダウンロード）してみる」 をリファクタリングしてみた

## 元記事

[HTML5のtableタグをCSV出力（ダウンロード）してみる – Qiita](https://qiita.com/skmk/items/e29bd8046820f1c9cfb0)

HTMLに表示されているtable要素をまるっと簡単にダウンロードできないかなーとググって最初にあたった記事です。
2018年の記事でIE対応とかイマドキ感にかけるので、イマドキ風にTypeScriptでChatGPTにリファクタリングしてもらいました。

## GPT3.5によるリファクタリング

[Poe – TML5のtableタグをCSV出力（ダウンロード）してみるリファクタリング](https://poe.com/s/voLP4LNsjBUlBh9osEyi)

以下は、より効率的なリファクタリング例です。

“`tsx
function handleDownload(): void {
const bom: Uint8Array = new Uint8Array([0xEF, 0xBB, 0xBF]); // 文字コードをBOM付きUTF-8に指定
const

コンストラクタについて正しく理解する

# 目次
1. コンストラクタとは
2. 暗黙的にインスタンスを返す
3. 異なるオブジェクトを返す

# 1. constructorとは
constructorメソッドは、 classで作成されたインスタンスの生成と初期化のための特殊なメソッドです。
[constructor](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Classes/constructor)

# 2. 暗黙的にインスタンスを返す
> 関数がオブジェクトを返さない場合は this を返します。

[参考](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/new#:~:text=%E3%81%8C%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%82%92%E8%BF%94-,%E3%81%95,-%E3%81%AA%E3%81%84%E5%A0%B4%E5%90%88%

JavaScript勉強備忘録

## JavaScript勉強備忘録
友達の開発の内容を理解するためjsの勉強を始めた。

### JavaScriptはどんなプログラミング言語か
・主にWebブラウザの中で動くプログラミング言語。
・WebブラウザだけでなくNode.jsというサーバー側のアプリを作る仕組みでも利用されている。
### プログラミング言語の中での位置付け
・スクリプト言語
・インタプリタ方式

### JavaScriptの歴史
1995年 JavaScriptはNetscape Communicationsのブレンダン・アイク(Brendan Eich)によってLiveScriptという名前で開発される。
1995年12月にJavaScriptとして、Netscape Navigator 2.0で実装された。
1996年にInternet Explorer 3.0登場 Netscape Communicationsはライセンスを付与せずにInternet Explorer 3.0には別のJScriptという言語が搭載
1997年 Internet ExplorerとNetscape Navigat

TypeScriptの基本文法についてのメモ

# はじめに
TypeScriptの基本文法についてのメモ

# 参考
https://booth.pm/ja/items/1312652

# TypeScriptの特徴
* JavaScriptに静的型付けシステムとクラスベースのオブジェクト指向を加えた上位互換の言語
* 静的型付け、型推論、Null安全性
* ECMAScriptに導入されそうな便利な最新仕様を先取りして実装
* 開発元はMicrosoft

# TypeScriptの使い方
## 型アノテーション
* 型アノテーションは、変数や関数の引数、戻り値の型を明示的に宣言するための構文
* 型の不整合があると、コンパイル時にチェックされる

## 型推論
プログラムの文脈を元に、変数や式の型を自動的に決定するプロセスのことを指します。型推論をサポートするプログラミング言語を使用する場合、開発者は常に変数や関数の型を明示的に指定する必要がなくなります。代わりに、コンパイラやインタープリタが適切な型を「推論」してくれます。

## インタフェース
* 特定の構造や契約を`オブジェクト`に強制するためのものです。例えば、Pe

Node.jsでdotenvがいらなくなったっぽいので使ってみる

2023年9月頭にリリースされたNode.js v20.6.0に`built-in .env file support`という記載がありました。

まだフラグが必要ですが、`.env`ファイルをデフォで使えるようになる感じですね。

> https://nodejs.org/en/blog/release/v20.6.0

> 参考: [Using Environment Variables In Node.js 20.6.0](https://browsee.io/blog/using-environment-variables-in-node-js-20-6-0/)

## 従来はdotenvを利用していた

通常環境変数を.envファイルを扱うためにdotenvというライブラリを使うやり方が主流でした。

https://www.npmjs.com/package/dotenv

“`bash
$ npm i dotenv
“`

“`js
require(‘dotenv’).config()
console.log(process.env.HOGEHOGE); //.e

ローカルでのDeno KV動作時のデータ構造

– Denoには組み込みのKey Value Storeがあり、外部ストレージを用意せずとも簡単にデータの出し入れが可能です。
– 今回はローカルで使用してみて、動作やデータファイル群の場所などの確認を行います。

## 環境
– deno 1.36.4

## 内容

### 基本的な使用
– まず、Deno KVで「**接続・書き込み・読み取り**」を行う基本的なコードを示します。
– **※各オプションについては今回は割愛します。**

“`typescript
// 接続
const kv = await Deno.openKv();

// 書き込みデータ
const book1 = {
title: “hoge”,
desc: “very hoge.”
}

// 書き込み
await kv.set([“books”, book1.title], book1);

// 読み取り
const result = await kv.get([“books”, book1.title]);

// 結果出力
console.log(result.value)
`

YouTubeで再生地点指定するのってどうしてんの？？

# はじめに
YouTube大好き！！
週に17時間26分見るくらい好き！！
この時間を法律の勉強に充てれば大体4年で司法試験に合格できる。

最近気になってるのが
履歴から動画再生したら前停止したとこから再生できるんだけど？！？！？！？！
めっちゃ便利なんで？！これなんで？！

# 目的
YTSwiftyPlayerの基本的な使用法を学ぶ。
evaluateJavaScriptメソッドの使用法を理解する。
YouTube動画のシーク操作を理解する。

# YoutubeKit
### 結論から言うとよくわからんかった
でも[YoutubeKit](https://github.com/rinov/YoutubeKit)というライブラリを見つけた。
この中にシークバーに関するメソッドも存在したのでそこから想像してみたいと思

JavaScriptの変数宣言とイベント発火でよく見るエラー集

# JavaScriptの変数宣言とイベント発火でよく見るエラー集

・JavaScriptで変数を宣言する時にvarではなくletが良いと聞いたけど、それって何が理由でそう言われてるんだっけ……？
・関数の宣言をしたいのになぜかしょっちゅう見たことがあるエラーが表示される……これ何だっけ…

よく見かけるけれど、つい忘れがちな部分を備忘録としてまとめました。

## 変数の型について
|変数の型|const|let|var|
|:–:|:–:|:–:|:–:|
|変数の代入|×|○|○|
|変数の再宣言|×|×|○|
|ブロックスコープ|○|○|×|
|関数スコープ|○|○|○|

constは定数（固定された値）を宣言する際に使用する。
変数の宣言は基本的にletを使用する。
varの使用は非推奨。

### 変数の再宣言とは
letで変数を再宣言した場合
“`JavaScript
let a = 1;
let a = 10;
console.log(a) // Uncaught SyntaxError: Identifier ‘a’ has already been

絵文字等のサロゲートペアを含んだ文字列からランダムに文字を取得する方法

# 結論

“`js:

// 16 文字
const str = “?A?B?C?D?E?F?G?H”;

const surrogate = […str];
const length = surrogate.length; // 16
const max = length – 1; // 15
const index = Math.floor(Math.random() * max); // [0-15]

const char = surrogate[index];

console.log(char);
“`

了

Express+SQLite3備忘録2

ExpressとSQLite3を利用して、動的に検索できるWebアプリの例です。ここではPOSTメソッドで検索文字を送受信しています。
[備忘録1](https://qiita.com/watmot/items/d12ccf0a5aa968a12d10)や、EJSの例については[こちら](https://qiita.com/watmot/items/90e304eba121a1bed352)も参考にしてください。

当初うまく結果が反映されませんでしたが、データベースの処理結果を得る前にWebサーバーが応答していることがわかり、Promiseを利用することで解決しました。Promiseについては[こちら](https://qiita.com/cheez921/items/41b744e4e002b966391a)を参考にさせてもらいました。わかりやすい説明で助かりました。

EJSファイル内にJavascriptを記述し、その中で受け取ったオブジェクト配列を展開しているのですが、このあたりがいまいち非効率だなと感じております。おそらくもっとスムーズに行うやり方があると思うのですが、、、

Express+SQLite3備忘録1

WebアプリにてJavascriptオンリーで、データベースへの接続が手できれば便利だなと思い、試してみました。手軽さを求め、WebサーバーはNode.js+Expressで、データベースはSQLite3を利用しています。

node.jsとsqlite3がインストールされている前提とします。
Expressの使い方については、[こちら](https://qiita.com/watmot/items/90e304eba121a1bed352)でも使い方の例を載せています。

# 準備
プロジェクト用のフォルダを作成し、そのフォルダに移動して初期化処理を行います。
“`terminal
npm init -y
“`
Expressとejsとsqlite3をインストールします。
“`terminal
npm install express
npm install ejs
npm install sqlite3
“`

# SQLite3にてデータベースの作成
プロジェクト内のフォルダにてSQLite3のデータベースファイル「sample_data.db」を用意し、テーブル名「bbt

JavaScriptの基本文法についてメモ

# はじめに
JavaScriptの基本文法についてメモ

# 参考
https://booth.pm/ja/items/1312652

# モダンなJavaScript
* **ECMAScript**とはJavaScriptの標準仕様の名前
* ほぼ毎年、6月に最新版がでている
* 基本的に後方互換性を破壊する変更は入らない
* 年号付きの使用署名で呼ぶことが推奨
* ES2015(ES6)
* ES2015以降がモダンといわれることが多い
* モダンな仕様が一気に盛り込まれたため

# JavaScriptの仕様
## 変数
constが第一選択

## データ型
* プリミティブ型とオブジェクト型に分けられる

### プリミティブ型
* インスタンスメソッドを持たないデータ
* よく使うプリミティブ型
* Boolean型
* Number型
* String型
* Symbol型
* Null型
* Undefined型
* 宣言のみが行われた変数や、オブジェクト内の存在しないプロパティへのア

糞コードは直すな！ぶっ壊せ！ ブックマークレット対応版

Javascriptのブックマークレットにしてみました。ご活用ください。

偉大なる本家様：

https://qiita.com/mogamoga1337/items/0add694958159b310e27

~~~ :JS Bookmark:
javascript:var%20%24jscomp%3D%24jscomp%7C%7C%7B%7D%3B%24jscomp.scope%3D%7B%7D%3B%24jscomp.createTemplateTagFirstArg%3Dfunction(b)%7Breturn%20b.raw%3Db%7D%3B%24jscomp.createTemplateTagFirstArgWithRaw%3Dfunction(b%2Cc)%7Bb.raw%3Dc%3Breturn%20b%7D%3B%24jscomp.arrayIteratorImpl%3Dfunction(b)%7Bvar%20c%3D0%3Breturn%20function()%7Breturn%20c%3Cb.length%3F%7Bdone%3A!1%2Cvalue%3Ab

NeosVR コンパイラ その6

# 概要
NeosVRのオブジェクトを外部で生成するコンパイラを開発した。
閃いた、コンパイラにapiサーバを使う。
構想編。

# 方針
– LogiXオブジェクトは、いっぱいある。それを、apiサーバに蓄積してメンテナンスして
コンパイル時に、提供する。
コンパイルにapiサーバを使う。邪道だ。

– APIサーバは、Phoenixで、実装する。

以上。

不要なexportや依存関係を削除できるKnipの使い方

## はじめに

JavaScriptやTypeScriptでコードを書いているとき、こんな経験はありませんか？

– exportしているのに、他のどこからもimportされていないクラスや関数があった
– 以前は使っていたが、今は使っていない依存関係がpackage.jsonに残っていた

ファイル内でどこからも参照されていないクラスや関数は、ESLintで検出できます。しかし、exportされている場合、どこからもimportされていなかったとしてもESLintでは検出できません。

このような問題を解決できるのが「[Knip](https://github.com/webpro/knip)」です。

## Knipとは

Knipを使うと、未使用のファイル、依存関係、exportを検出できます。

JavaScriptとTypeScriptの両方に対応しており、webpackやESLint、JSDocなども考慮しながら動作します。

https://github.com/webpro/knip

## Knipの使い方

まずは、Knipをインストールします。

“`con

デザインパターン[MVCの章]

## 1. はじめに

### MVCとは？
MVC（Model-View-Controller）は、アプリケーションの構造や役割を分離するためのデザインパターンです。特にウェブアプリケーションやGUIアプリケーションでよく利用されます。

### なぜMVCが必要なのか？
MVCは、アプリケーションの各部分が独立して動作することで、メンテナンスや拡張が容易になるという利点があります。

### 注意点
注意というか前提として学んだもののまとめとして書いたので認識が間違っていること,もっと深ぼった方がいい部分も多々あろうと思います!!
その際はぜひコメントで教えてください!!
この記事はお前らと作っていくぞ!!!
## 2. Model（モデル）の役割

### データ管理とビジネスロジック
モデルはデータの取得や保存、ビジネスロジックの適用などを行います。

### データベースとの連携
多くの場合、モデルはデータベースと連携して動作します。

### モデルの例と実装
“`python
from sqlalchemy import Column, Integer, String