JavaScript関連のことを調べてみた2022年12月11日

jquery にてQRコード読み取りのシステム開発メモ

## [簡単な受付システム]入力画面➡QRコード化➡読み取り➡保存

## 受付管理システムの作成
– 以前セキュリティをあまり気にせずにWEBブラウザで受付の管理システムを作成した時のメモ。
– 構成
– 入力画面の作成
– 上記QRコード化を行い登録者へ発行
– 受付時QRコードを読み込んで、データを吸い上げて確認
– ブラウザLocalStrageに保存を行い完了

## 何故このような形で構成したか？目的は？
– 目的は、通信のない環境でもシステムが動くこと。管理PCのみで動く事が条件になっていたので、上記の構成
– サーバ側の言語を可能な限り使用しない前提

## ファイルは以下、gitより確認できます。

[受付システムリポジトリ](https://github.com/onocchi0073/qrcode.git)

## 実行方法

– qrcodeディレクトリにて、以下コマンドでローカル実行します。

“`
python3 -m http.server 8888
“`

その際に、「imput.html」ファイルの876行

JSで全角を半角へ

自分用メモ

# 全角→半角

(英数字)
~~~JavaScript:hankk2zenkk.js
function hankk2zenkk(str) {
return str.replace(/[Ａ-Ｚａ-ｚ０-９]/g, function(s) {
return String.fromCharCode(s.charCodeAt(0) – 0xFEE0);
});
}
~~~

(カナ文字)
~~~JavaScript:zenkana2hankana.js
function zenkana2hankana(str) {
var kanaMap = {
“ガ”: “ｶﾞ”, “ギ”: “ｷﾞ”, “グ”: “ｸﾞ”, “ゲ”: “ｹﾞ”, “ゴ”: “ｺﾞ”,
“ザ”: “ｻﾞ”, “ジ”: “ｼﾞ”, “ズ”: “ｽﾞ”, “ゼ”: “ｾﾞ”, “ゾ”: “ｿﾞ”,
“ダ”: “ﾀﾞ”, “ヂ”: “ﾁﾞ”, “ヅ”: “ﾂﾞ”, “デ”: “ﾃﾞ”, “ド”: “ﾄﾞ”,

特に必要性はないけどAstroとSpringBootをつなげてみた

# はじめに

業務で学んだSpringBootと興味で学んでいるAstroを組み合わせただけのラフな記事です。

以下記事のオマージュになるので、ご了承ください

# 今回メインの参考記事
https://qiita.com/curry__30/items/c91d489551de68adb759#%E5%89%8D%E6%8F%90

https://qiita.com/Haru_3/items/d1644226682dfbc3a9a3

# SpringBootとAstro

### SpringBoot
・Javaを便利に使えるやつ
・カプセル化だったり、色々な周辺技術を少ない力で実装できる非常に便利なフレームワーク

https://spring.pleiades.io/spring-boot/docs/current/reference/html/getting-started.html

### Astro
・SSR重視のMPA設計や、コンポーネントレベルでインタラクティブ性を付与する、アイランドコンポーネントを利用した、高速静的サイトを生成するフレームワーク
・Reac

SolidJS + Viteで環境作ってみた

# はじめに
最近`svelte`にドはまりしていましたが、
`SolidJS`も触ってみたいな～と思い、話題の`Vite`で環境を作った時のメモです。。

## 実行環境

* docker
* 20.10.14
* docker-compose
* 1.29.2

## docker-compose.yml

imageには`node`、commandには`vite`の実行コマンドにしておきました。

“`yaml
version: ‘3’

services:
app:
image: node:18-alpine3.15
working_dir: /app
ports:
– “8080:8080”
volumes:
– “./src:/app”
tty: true
command: npm run dev
“`

## いざ環境構築

### コンテナ内へ～

“`bash
$ docker-compose build
$ docker-compose run app sh
“`

textlint のルールを作って仕組みを理解した?

この記事は [弁護士ドットコム Advent Calendar 2022](https://qiita.com/advent-calendar/2022/bengo4com) の 11 日目の記事です。

https://qiita.com/advent-calendar/2022/bengo4com

## はじめに
皆さんは [textlint](https://textlint.github.io/) を使っていますか？

ESLint を始めとした Linter は、ソースコードを静的解析してバグになりそうな記法やコーディングルールに則っていない部分を指摘・修正してくれます。
textlint は名前の通り text、つまりプレーンテキストや Markdown などの Linter です。

![VSCode上で、textlintルールに違反するテキストがあった場合は赤波線で強調され、マウスオーバーすると詳細が見られます](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/198493/dd66e4db-60

[Day11] オブジェクトプロパティの設定

本記事は一人アドベントカレンダー企画の一つです。
[30代未経験エンジニアが25日後にJavaScriptをマスターするカレンダー](https://qiita.com/advent-calendar/2022)

[JAVASCRIPT.INFO](https://ja.javascript.info/)を元にJavaScriptを勉強していき、そこで学んだ知識をアウトプットしていきます。
２５日でJAVASCRIPT.INFOをやりきり、未経験エンジニアがJavaScriptをマスターする過程を投稿していきます。

## 7.1 プロパティフラグとディスクリプタ
### 知らない単語
– ディスクリプタとは
– プロセスがOSを通じて入出力操作を行う際に参照される、ファイルの構造や内容の要約、ファイル属性などが記された整数の事

### 学んだこと
オブジェクトはプロパティを格納できる
今まで勉強した限りでは、プロパティは単純な key-value ペアだったが、実際にはオブジェクトプロパティは柔軟性のあるものである

– プロパティフラグ

以下はオブジェクトプロパテ

日報作業でちょっと楽するCUIツールの作り方

# はじめに
アドカレに乗っかって初Qiitaを書きます。
私の所属先ではSlackに勤怠チャンネルがあり、業務終了時にその日の業務内容について投稿するようにしています。（ミニ日報みたいな感じです。）
投稿する内容はこんな感じです。
“`
【勤務時間】10:00 ~ 19:00
【稼働時間の合計】8時間00分（休憩：1時間00分）
【本日の作業】○○○_初回リリース, △△△_コンテンツ追加
【明日の作業】△△△_コンテンツ追加, □□□_リファクタリング
【共有・相談事項】
“`
特に大変というわけではないのですが、毎日「よし！業務終了だ！」と思ってから、このミニ日報を書くのは少し面倒でした。
そこで、その少し面倒くさい作業で楽するためにCUI上で簡単に日報を書いて投稿できるツールを作成したので、今回はそのツールの作成に使った技術について共有します。（以降作成したツールを退勤ツールと呼びます。）

面倒くさい作業で楽するために退勤ツールで実装したいと思ったことは以下の4つです。
1\. 時間を記入するときに対話型で入力する
2\. 作業内容はチケット管理ツールからデータを取得して

【HERE】Maps API for JavaScriptを試してみた！

## はじめに
:::note info
この記事は [【HERE WeGo!】ジオファン集まれ！地理空間情報、地図に関する記事を募集しています by HERE Advent Calendar 2022](https://qiita.com/advent-calendar/2022/here) 11日目の記事です。
:::

HEREのMaps API for JavaScriptのうち、HERE Vector Tile、Geocoding、Reverse Geocoding、Routingを試してみました。

### 動作環境
OS: Window 10
HERE Maps API for JavaScript: バージョン 3.1

### HEREとは
地図データ・位置情報テクノロジーのパイオニア企業です。
位置情報プラットフォームとして、地図表示、ルート検索、ジオコーディングなどの位置情報サービスや、HERE SDKやHERE Studioなどの開発者向けのツールなどを提供しています。

https://www.here.com/jp/company/about-us

htt

ツイッターとかで見かけるゲーム自己紹介カードを作成するアプリをつくってみる

自分は最近スプラトゥーン3にハマっています。
もともとはリアルの友達と一緒にやっていたのですが、なかなか時間の都合が合わず、一人で遊ぶことも多くなりました。
そこでTwitterなどで一緒に遊ぶ人を探したりしていたのですが、その時見かけたのが自己紹介カードでした。

自分のプレーヤーネームやランクなどの情報を記載したカードを作り、ハッシュタグをつけて共有して、ゲームを一緒に遊んでくれる人とつながるわけです。
自己紹介カードは記入欄が空のテンプレート画像を有志で公開してくださっている方がいたりします。

その中で気になったのが[Web上でフォームから入力するだけで自己紹介カードを作成することができるアプリ](https://gamewith.jp/splatoon3/article/show/364005)です。
非常に便利そうでかつ、実装が気になったので自分で作ってみたいと思います。

## 利用するライブラリ等

– [React.js](https://ja.reactjs.org/)
– v18.2.0
– UI作成のために利用します
– Reac

なんで文字列でメソッドやプロパティが使えるんだ？？？

**メソッドやプロパティは本来、オブジェクトの機能のはずなのになぜ？？？**
と思ったことはないですか？ （別にないですか）

この記事では JavaScript の組み込みメソッドやプロパティがどのように成り立っているかを解説していきます。

※ **（読み飛ばしてもOK）** この記事では区別のため String オブジェクト（後述）を String オブジェクト、通常使っているような String 型のデータ / String オブジェクトから生成されたものを「文字列」と呼びます

## メソッドとプロパティ

前提としてメソッドとプロパティはどちらもオブジェクトに属するものです。

“`js
const kinako = {
name: “kinako”,
spieces: “cat”,
getName: function () {
return this.name;
},
}
console.log(kinako.name); // -> ‘kinako’
console.log(kinako.spieces); // ->

思いつきで、HTMLコードからマテリアルアイコンを抽出して10進数に変換してみた

## はじめに

マテリアルアイコンは、手軽にアイコンを導入できるので便利ですね。

https://fonts.google.com/icons?icon.set=Material+Icons

サンプルコードとキャプチャを示します。

“`html:サンプルコード








sentim

【HERE】自分以外にもいま病んでる人がいるのを知ってちょっと安心できる地図つくをってみた

毎年、クリスマスの雰囲気にちょっとした抵抗感を感じ、ふんわりと病みがちになります。
[メンヘラテクノロジー](https://www.menhera-technology.com/)のらんらんと申します。

そんなクリスマスシーズン病みを少しでも癒すべく、漫画『ハルロック』に出てくる「ぼっち・ザ・LED」[^1]のオマージュアプリをつくってみました。

[^1]:「ぼっち」という言葉を含むツイートをしている人の場所を地図上に表示し、ぼっちは自分だけではないというのを可視化するツール

# 自分以外にもいま病んでる人がいるのを知ってちょっと安心できる地図

実際にできたWebアプリを簡単に紹介します。
まず、自分のいまの気分に合致するアイコンを選択します。
「共有する」を押下すると、自分の現在地の位置

サムネイル画像生成システムのこだわりを語らせろ。

## 本題の前に

この記事は、[ジーズアカデミーのカレンダー | Advent Calendar 2022 – Qiita](https://qiita.com/advent-calendar/2022/gsacademy) 10日目です。
昨日の記事は taisuke-m さんによる [学校教育とICT（40代普通の教員の思うこと）](https://qiita.com/taisuke-m/items/9ef67da6fc72222b8d1c)でした。
教育現場でのIT導入の課題と、そんな課題意識を持ったからこそG’s ACADEMY に入学した経緯など、アツい内容でしたね！

## 今回語りたいこと

### 自己紹介します！

どーも皆様、こんにちは！どんぶラッコこと、TOKYO LAB6期 卒業の 坂尻愛明です。

私たちは今、「作品の想いと世界を結ぶ」をコンセプトにしたサービス、AnyPaletteを運営しています。

https://any-palette.com/

AnyPaletteとは、クリエイターが描いた作品をインテリア商品として販売できるマーケットプレイスで

JavaScript　配列=配列(Array=Array)　

“`javascript:Array
var a = [];
var b = a;
“`
という状況になると，bはaの引用となる，C言語のpointer(*)と同じ原理．
つまり，以下の状況になる
“`javascript:Array
b[0] = 1;
a[0] // ==> 1　となる．
a === b //==> true
“`
もしbを新たな配列にしたい場合，for循環で要素を一個づつ渡すべき．

深くネストされたObjectをDeep Copyする方法

# 概要
## 何がしたい?

### 1.以下のようにUserのObjectがある(ネストが深い)
“`ts
const user = {
name: {
firstName: ‘太郎’,
lastName: {
maidenName: ‘佐藤’, // 旧姓
marriedName: ‘田中’, // 結婚後の名前
}
}
}
“`

### 2. 何らかの方法でuserObjectをコピーしてotherUserObjectを作成し、otherObjectの一部を変えても、元のuserObjectに影響を及ばさないようにしたい。
“`ts
const otherUser = ?; // ここでuserObjectを何らかの方法でCopyする
otherUser.name.lastName.maidenName = ‘川端’;

// 佐藤が表示される
console.log(user.name.lastName.maidenName);
“`

## 前提知識
#

まずはお試し

githubもQiitaも初めてだけれど、まずはお試しで
githubにコードを公開してみた。

英語が読めないので、先人たちの記事をもとに
何とか出来た。

https://github.com/kenji0811/JavaScript/commit/e3dbd2af8a54d4cedcc77afd721f9414c748ee60

公開したのは、どこかのミニゲーム？で見かけた、
「ボタンを押すと、押したところと、その周りの
ON・OFFが切り替わる３×３マス」というもの。

確か、時間制限付きの脱出時に強制的にやらされる
ようなミニゲームだったと思う。

授業で学んだ知識をもとにサクッと作った。

講師の方曰く、最近はHTMLに記述することがあまり
無いそうなので、bodyにonloadのみ記述して、

JavaScriptにほぼ記述して、CSSで体裁を整えた。

Node.js(Express)でミドルウェアを簡単に実装してみる(ローカルサーバー立ち上げまで)

## 前提
この記事ではExpressで必要となるミドルウェアの実装を行う。そのため簡単に記事を読むことでミドルウェアの概要に触れることで、流れなどをインプットしたい人に向けて発信します。:fire:

## 大まかな流れ
Node.jsの紹介
↓
ミドルウェアについて
↓
実装:Node.jsのプロジェクトの作り方とローカルサーバー立ち上げ(この記事はここまで)
↓
調べてみた(モジュールの形式よって読み込み方の違いについて)

## ゴール
Node.jsにおけるミドルウェアの理解を深め、ミドルウェアとはどのようなことを示すのかまで落とし込み、ここをゴールとする。(この記事はローカルサーバーの立ち上げまでとする。)

## Node.jsとは
>Node.js はスケーラブルなネットワークアプリケーションを構築するために設計された非同期型のイベント駆動の JavaScript 環境です。 以下の「Hello World」の例では、たくさんの接続を同時に処理することができます。 各接続ごとにコールバックは発火され、何もすることがない場合、Node.js はスリープします。

こち

プログラミングを始めてみたい方へ

こんにちは、Ftpsです。
最近身近な人とかにプログラミングを教える機会があったりしたので、なんとなく書き綴ってみます。
一応いくつかのプログラミングの大会で優勝させてもらっています(実名でるので何かは言えない)

…高校生のくせにみたいな文章があるかもしれませんが、ご了承ください
()中は心の声です(え？)

:::note warn
警告
途中で雑になっているので、また書き直すかもです…
:::

# 大事なこと

まず最初に自分がプログラミングで何をしたいかできるだけ具体的に考えてみてください！
* Discordの入退出管理botを作ってみたい→(Python, Javascript…)
* タイマーを作ってみたい→(C#-WPF)
* ArduinoとかSpresenseとかを使ってミュージックプレイヤーを作ってみたい→Arduino言語(C/C++)

何か思いつきましたか？
それによって学ぶ言語が変わってきます

# 具体的に何するか

どの言語を学ぼうか決めて、やることは大きく分けて3つだと思います

* 言語の構文を学ぶ
* 標準ライブラリをある程度マスタ

[メモ]CSSでグリッドにに吸い込まれるカードを実装してみた。

[サンプルコード](https://codepen.io/yuriacats/pen/YzGVeNZ)

皆さんは、方眼紙の中に自由にカードを配置したい…そう思ったことはありませんか？
今回はCSSのグリッドの枠内に収まるカードというコンセプトで実装を行なってみました。
その時に気がついたtipsをメモで書いていきます。

## 対象となるClassに一括でJSを当てる

onMouseUpやonMouseDownなど複数の関数を当てなければいけない時は、設定当てる用の関数を用意してそれを配列に入れてそれぞれにイベントが起きた時という条件式を与えることでも動作させることが可能です。
“`js
var track = document.getElementsByClassName(‘memo-content’);
“`
この時trackは配列型になるので、それぞれの要素の監視したいイベントに、トリガーとなって動く関数を渡してやればうまく動きます。

Reactなどを用いる際はコンポーネントとしてまとめることで作ることができるので不要です。

## event.terget

Expressフレームワーク、MongoDBを使ったAPIの作成

まず、Expressフレームワークをインストールします。

“`shell-session
$ npm install express
“`
次に、mongodb用のドライバであるmongodbをインストールします。
“`shell_session
$ npm install mongodb
“`
次に、Expressアプリケーションを作成します。
“`
$ express myapp
$ cd myapp
$ npm install
“`
そして、app.jsファイルを開き、次のように記述します。

“`js
var express = require(‘express’);
var app = express();

// mongodb用のライブラリを読み込む
var MongoClient = require(‘mongodb’).MongoClient;

// mongodbに接続
MongoClient.connect(‘mongodb://localhost:27017/myapp’, function(err, db) {
// データベースに接続で