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

SVG要素を、SVGファイルとして保存、PNGファイルとして保存

# はじめに
htmlのsvg要素でお絵描きした後、それをファイルとして保存したくなりました。
ダウンロードできれば、パワポとかほかの情報に転載できるので。

# 書き方と説明
答えは下記です。
svg要素の`getElementById`のところと、ファイル名のとこだけ修正すれば、どこでも使えると思います。

See the Pen
Untitle

某銀行のネット振込で確認番号の入力を自動化するスクリプト

塞がれたら嫌なので、具体的にどの銀行で使えるのかは言いませんし、どの銀行で使えるかも聞かないでください。(ヒントはSなんとか信託)
使い方と利用用途がわかる方だけ、ご活用ください。

スクリプトはChromeの拡張機能の [ScriptAutoRunner](https://chromewebstore.google.com/detail/scriptautorunner/gpgjofmpmjjopcogjgdldidobhmjmdbm?hl=ja) に登録することで使用可能です。

“`javascript
const alphabet = [“A”, “B”, “C”, “D”, “E”];
const kakuninNumbers = [
[“01”, “02”, “03”, “04”, “05”], // A1,B1,C1,D1,E1 の数字を入力
[“11”, “12”, “13”, “14”, “15”], // A2,B2,C2,D2,E2 の数字を入力
[“21”, “22”, “23”, “24”, “25”], // A3,B3,C3,D3,E3 の数

【JavaScript】構造化データとは

# 構造化データ（Structured Data）とは
構造化データは、ソフトウェアと人間の両方が同じように効率的にアクセスできるように標準化された形式を持つデータです。
わかりやすくいうと売上データとか顧客データのような、あからじめデータの構造が決まっていて、行と列のある表形式で管理するのが簡単そうなデータのこと。

【JavaScript】JSONとは

# JSONとは
JSON（JavaScript Object Notation）は、データの構造を表現するための軽量なデータ交換フォーマットのことで、JSONは人間にも機械にも読みやすく、理解しやすいテキストベースの形式で表現されます。
主に、データのやり取りや保存に使用されます。

CSVダウンロード自分用メモ

“`ruby

const hogeList = [
{
name: “malp”,
addres: “top”,
number: “333”,
},
{
name: “yasuo”,
addres: “mid”,
number: “222”,
},
{
name: “taro”,
addres: “adc”,
number: “111”,
},
]

const hogeSort = “num”

hogeList.sort((a, b) => a[hogeSort] – b[hogeSort])

console.log(hogeList)

/** Object の配列を受け取り CSV形式の文字列に変換する Func */
const convertToCSV = (objArray) => {
const array = typeof objArray !== “object”

ESLintとPrettierでJavaScriptコードの品質を保つ

### **user**:

ChatGPT先生、Pythonでよくblackとかisortとかを使ってるんですけど、JavaScriptでそれにあたるものってありませんか？

—

### **assistant**:

うーん、別に教えてあげたくないわけじゃないけど…。JavaScriptにも、もちろんコードフォーマッタやインポートソーターは存在しますよ。

Pythonの”black”にあたるツールとして、「Prettier」があります。コードの見た目を自動的に修正してくれるツールで、多くのJavaScriptプロジェクトで採用されています。

インポート順序を整理する”isort”に相当するツールとしては、「ESLint」にインポート順序を整理するプラグインが用意されています。設定することでインポートの順序を整えることができます。

でもね、ただツールを使うだけじゃダメなのよ。自分で書いたコードに対する理解が大切なんだから。…あ、あえて厳しいこと言ってるわけじゃないからね！あなたのためを思ってるだけだから！

—

### **user**:

ありがとうございます

JavaScriptの自作ライブラリをGitHubのクイックスタートに沿って作成する①

# はじめに

こんにちは、エンジニアのkeitaMaxです。

今回はGitHubのクイックスタートに沿って自作ライブラリを作成してみようと思います。

https://docs.github.com/ja/packages/quickstart

GitHubの公式のクイックスタートに従って行っていこうと思います。

# NPMに登録

まずは以下に登録します。

https://www.npmjs.com/

# 公式のクイックスタート

>GitHub に新しいリポジトリを作成し、ノードに .gitignore を追加します。 詳しくは、「新しいリポジトリの作成」を参照してください。

>ローカル コンピューターにリポジトリを複製します。

まずリポジトリを作成します。

`sample_package`という名前で作成し、ローカルにクローンをし、VSCodeでフォルダを開きました。

![スクリーンショット 2024-03-30 14.07.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com

【JavaScript】Type Castingとは

# Type Castingとは
型変換 (または型キャスト) とは、あるデータ型から別のデータ型へのデータの転送を意味します。

“`js
let a;
let b;
let c;
let d;

a = Number(“3.14”); //数値に変換
b = String(3.14); //文字列に変換
c = Boolean(“”); //真偽値に変換
d = Boolean(“pizza”);

console.log(a, typeof a); //3.14 ‘number’
console.log(b, typeof b); //3.14 string
console.log(c, typeof c); //false ‘boolean’
console.log(d, typeof d); //true ‘boolean’
“`

[月記]４月から本気を出す。

## もう４月。このままでは、あかん。
１月からオレは本気を出すと思いながら、気がつけば４ヶ月。
時間を湯水の如く浪費しながら、今まで一体何をしていたのかと愕然として、これを書いています。
このままでは、あかん。

ロックダウン中に書き始めたプログラミングも、もうすぐ３年目。
とにかく、１０分でも、１行でも良いから毎日続けるということを自分に課しながら、それなりに長い年月が流れました。
他の記事にも書いてますが、昼間はプログラミングとは全く関係ない仕事をしている為、せっかく書いたコードを誰かに見せることも、フィードバックをもらうこともなく、作った成果物をまともに評価してくれる人も周りにいないので、なんというか、**漫然と**コードを書いて、**漫然と**独学デベロッパー生活を送っており、こんな締まりのない感じではあかんのではないかと思い、何かもう少し自分のプログラミング生活をより意味のあるものに出来ないかなあと色々と考えた訳ですが、その月に自分のやったことや、学んだこと、作りたいものや興味のある技術などを、月一回くらいログしていけば、**自分なりのデベロッパーヒストリー**みたいなもの

Perplexity.ai で印刷用のページにする。

# 目的
perplexity.aiの検索はかなり使えるのだけど、例えばpdfとしてメールしたい場合、検索窓やフッターが各ページについてしまう。なんとかしたい。

# code
“`javascript:tampermonkey.script
// ==UserScript==
// @name Custom Menu and PDF Link
// @namespace http://tampermonkey.net/
// @version 0.1
// @description Adds a PDF link to the menu and empties elements when clicked
// @match https://www.perplexity.ai/search/*
// @grant none
// @require https://code.jquery.com/jquery-3.6.0.min.js
// ==/UserScript==

(function() {
‘u

ソートしたい項目を選択したい

ソートしたい項目を選択出来るような処理を作りたくて軽く調べて実施しました。

これでソートがいい感じにできるらしい

“`ruby
const hogeList = [
{
name: “saburo”,
number: “3”,
},
{
name: “ziro”,
number: “2”,
},
{
name: “taro”,
number: “1”,
},
]

hogeList.sort((a, b) => a.num – b.num)
“`

なるほど、、、完全に理解した

変数を適当に作っていい感じに渡せれば行けるやろ

“`ruby
const hogeSort = “num”

hogeList.sort((a, b) => a.hogeSort – b.hogeSort)
“`

あれ、出来てない、、、、
そもそも作った変数を渡せてないナニコレ

この変数のなかの文字列を後ろにくっ付けてあげるようにしたら行けるんじ

Node.jsで待望（?）のコンソールの色を変えられるようになった

Node.js 21.7.0のアップデートでText Stylingという項目がありました。

コンソールに表示させる **文字の色や装飾や背景色を変えられる**ようになります。

> 
> https://github.com/nodejs/node/releases/tag/v21.7.0

“`js
const { styleText } = require(‘node:util’);
const errorMessage = styleText(‘red’, ‘Error! Error!’);
console.log(errorMessage);
“`

こんな感じでコンソールの文字色が外部モジュール無しで変えられま

ブラウザの Web Bluetooth API を使って toio の BLE プロトコルバージョンを取得するための下調べ

## はじめに
「ブラウザの Web Bluetooth API を使って、toio の BLE プロトコルバージョンを取得する」ということをやろうとしたのですが、そのための下準備として調べた情報を、メモとして記事に書きます。

ちなみに記事執筆時点の最新のバージョンは、以下の公式のポストなどに書かれている「システムソフトウェア v02.0006」に対応した BLE プロトコルバージョンです。

／
🚀 toioの新システムソフトウェアv02.0006が登場！ 🌟
＼

・新コンテンツ「トイオ・プレイグラウンド」に対応

・「高精度オイラー角」で姿勢角検出が進化

・動作の安定性と応答性が向上#toio の新しい世界をぜひお楽しみください✨

— toio(トイオ)公式 (@toio_jp) March 18, 2024

●システムソフトウェアの最新バージョン02.0006が公開！新コンテンツ「トイオ・プレイグラウンド」に対応！ | toio blog | toio（トイオ）
https://toio.io/blog/detail/202403_toio_systemsoftware_v2.6_release.html

### 自分の手持ちの toio の話
なお自分が持っている toio を、アップデート用アプリを使って全て最新バージョンにした状況です。

![image.png](https:/

URLを入力してからページがレンダリングされるまでのプロセス（1）

# 序文

初めにフロントエンドの知識を学び始めたとき、一つ一つの知識を積み重ね、一つ一つの知識点を克服していました。そうして、長い時間が経過してもかなりの知識が蓄積されましたが、それを連携して理解することは常にできませんでした。毎回の整理は非常に分散しており、思考の連続性を保つことができませんでした。最近になって、DNSドメイン名解析、TCP接続の確立、HTTPリクエストの構築、ブラウザのレンダリングプロセスを一連の流れとして整理した後、まるで任督二脈を通したような感覚があり、全体的な構造ができました。以前の知識点がすべてつながり、少なくともそのほとんどの骨組みを知ることができました。知識体系を整理することで、これから新しい知識を学んでも、この体系に沿って学び、相互に関連し合い、理解しやすく、忘れにくくなります。これが本文の目的です。

> 外国人なので、ChatGPTを翻訳ツールとして使ってます

## 1. 主要流程の整理

1. ブラウザはURLを受信し、新しいプロセスを開始します（この部分ではブラウザのプロセスとスレッドの関係を展開できます）
2. ブラウザは入力されたURL

JavaScriptでQRコードからSVGファイルを作成する

“`html

QRコードからSVGファイルを作成します

QRコード生成

【JavaScript】FirefoxとSafariでJsonファイルを読み込まなかった話

# はじめに

こんにちは、プログラミングを始めて約3年のエンジニアのkeitaMaxです。

今回はJavaScriptを実装しているうえで困ったことを書きます。

JavascriptでJsonファイルを読み込むという実装を行っていたのですが、FirefoxとSafariでエラーになってしまって困ったときの話です。

# どんな実装をしたか

以下のようにHtmlファイルととJsonファイルを実装しました。

“`html:index.html