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

Leafletで好きな色のピンを表示させたい！

# はじめに
こんにちは、私はIT学習を始めて一年未満の新人エンジニアです！
本日は、Leaflet.jsを使っている際に困った事とそれの解決策を紹介したいと思います。
Leaflet.jsには多くの機能があるのですが、今回はピンの表示方法について紹介します。

# Leafletとは
まず初めに「Leafletってなに？」という方に向けてご紹介させて貰います。
こちらはJavascriptで書かれたオープンソースの地図描写ライブラリです。
地図をWebページに統合するために使われており、無料でAPIを提供しています。
更に地図上にピン、ポップアップなどを描写する機能も提供しております。
[Leaflet.jsのホームページはこちら](https://leafletjs.com/)

# 地図を準備
leafletを使用する前に地図を表示させる必要があります。
今回はOpenStreetMapを使用して地図を表示しました。

### OpenStreetMapとは
オープンソースの地図データベースです。
このデータベースは、世界中の道路、建物、施設情報等の地理的な情報を保有しています。

pageStackメソッドで、引数を設定する

# したいこと
pageStackメソッドを用いて、画面遷移をしたい。
その場合、遷移先のパラメーターの指定が
vue-routerと使い勝手が違ったので自分用にメモ。

【イメージ】


↓ 「鴇色」を押下し、下記画面に遷移


# 前提
* Vue 3.0
* OnsenUI

# 結論

以下のように記述
“`js
this.pageStack.push({
extends: コンポーネント名,

jsモジュールが使えるタイプのローカルWebアプリ

アプリのフロントを WebView で作る際、ローカルのHTMLを読み込ませると、import が使えなかったりいろんな制限で困る。VirtualHostNameToFolderMapping にて http://file/ から参照できるように WebView2 を設定して回避するサンプル。

ただ、ローカル制限ありの普通のパターンに比べて、起動が少し遅くなる気はする。

“`cs
using Microsoft.Web.WebView2.Core;
using Microsoft.Web.WebView2.WinForms;
using System.Diagnostics;
using System.Security.Cryptography;
using System.Text;

namespace Browser {

public partial class Browser:Form {
public WebView2 view = new ();
public Browser() {
InitializeComponent();
ShowIcon

Stripe Checkoutでタイムセールのような時間制限のある決済フローを実装する方法

Stripe Checkoutを使用することで、簡単にオンラインでの決済・サブスクリプション申し込みページのURLを作成できます。


作成したCheckout Sessionは決済が完了するか、発行から24時間を経過すると利用できなくなります。もし、このCheckout Sessionを任意のタイミングで無効化したい場合は、有効期限を指定してやる必要があります。今回は、Stripe Checkoutを使ってタイムセールのような時間制限のある決済フローを実装する方法を説明します。

https://stripe.com/jp/payments/checkout

### Step 1: `expires_at`を利用した有効期限付きのCheckout Sessionの作成

StripeのChec

Gin Web Frameworkでのnpmライブラリを使った静的ファイルの取り扱いに関するメモ

[Golang フレームワークでStaticファイルをemmbeddingして](https://gin-gonic.com/docs/examples/serving-static-files/)をnpmライブラリを使いたい。例えば[http-status-code](https://www.npmjs.com/package/http-status-codes)など。

ハマったのでメモします。

## 解決策

具体的には、サーバーサイドで

“`go:main.go
r.StaticFS(“/node_modules”, http.Dir(“static/node_modules”))
“`

クライアントサイドで

“`typescript:main.ts
import { StatusCodes } from “../node_modules/http-status-codes/build/es/status-codes.js”
“`

ライブラリはあらかじめ`npm`使ってインストールしておく必要がある。

“`sh
$ npm install -D http-

How to Be A Great Musician?

How to Be A Great Musician?!

Music, the universal language of emotions, has the power to move us, inspire us, and bring people together. Being a great musician is not just about playing an instrument or singing well; it’s about understanding the soul of music and communicating your emotions through it.


車検証のQRコードを生成するツール公開

## QRコードについては以下
前回は、QRコードを読み取るため、QRコードの仕組みを解説してみました。

https://qiita.com/f_uto/items/319c76fa1807e3f70d63

## 今回は、そのQRコードを生成してみます
車検証の普通車の車検証の場合は、分割（連結）QRコードと言う仕様となっており、軽自動車および軽自動車ICカードの車検証は、通常のQRコードという仕様です。

QRコードはデンソーウェーブの登録商標です

QRコードの仕様は公開されているものの、分割QRコードがあまり利用されていないようで、QRコード生成ライブラリも分割でないQRコード生成はたくさんありますが分割できるものが有りませんでした。

そこで、zxingライブラリのjsバージョンを元に分割QRコードを生成できるようにカスタマイズしました。

https://github.com/zxing-js/library

車検証QRコード生成ツールは、githubにてソースコードおよびwebとしても公開してます。
![image.png](https://qiita-imag

4つ目のPRでようやく Next.js にコントリビュートできた話

## 短くまとめると
Next.js で Server Action の redirect のバグがあったから直したよ。

## 教訓
・テストやリントを通さないとPR は通りにくい
・PR を送る時はバッチなだけではなくて、バグの原因も書くといいかもしれない
・ある程度腕に自信があるなら、good first issue ではなくて、普通にissue からバグの調査をしよう

## 経緯
#### 普段してたこと
去年の12月からNext.js のコードを読むようになり、年初と2月の初めにパッチとしてPR を合計3つ出していました。
good first issue は他の人が取り組んでいるものばっかりだったので、issue を一から調査する形でパッチを作っていました。
ただテストやリントを通すことを、

この記事を見るまでしてなかったので、あまり芳しくない結果でした。
ただ issue の調査を通して、Nextjsへの解像度を上げてはいたと思います。

#### Serve

Javascript(React) 引数のアンダーバー( _ )の意味

[参考記事：アンダーバーのみの変数の意味
](https://ja.stackoverflow.com/questions/65430/%E3%82%A2%E3%83%B3%E3%83%80%E3%83%BC%E3%83%90%E3%83%BC%E3%81%AE%E3%81%BF%E3%81%AE%E5%A4%89%E6%95%B0%E3%81%AE%E6%84%8F%E5%91%B3)

“`javascript
const rotate = a => a[0].map((_, c) => a.map(r => r[c])).reverse();
“`

**参考記事より**
>まさにmap関数のindexだけを使いたい場合や、関数から返ってくるエラー情報を使わない時に無理やり変数を使わないと実行できません。
それを回避する方法として、変数名を_とすることで「この戻り値は使いません」と明示すればコンパイル可能になります。

アンダーバーを使う事でmapの引数を使用する際にあえてkeyをつける必要もない時でも、エラーは出てしまう為（keyを設定しなさいと怒られる）、この方法で回避出

【2024年版】JavaScript(React)におけるリーダブルコードのチートシート7~9章

:::note
2024/2/29
7章 制御フローを読みやすくする(83p~)
7.1条件式の引数の並び順
:::

こちらの記事の続編になります。

https://qiita.com/kntmaan/items/79ab45fa8206876cef47

## 7章 制御フローを読みやすくする(83p~)

### 鍵となる考え
* 条件やループの制御フローはできるだけ「自然」にする
* コードの読み手が立ち止まったり読み返したりしないように書く

### 7.1条件式の引数の並び順
“`diff_javascript
– if(10 <= length) + if(length >= 10)
“`
| 左側 | 右側 |
|:-:|:-:|
| 調査対象の式(変化する) | 「比較対象」の式。あまり変化しない。 |

日本国内のノートPCでのブラウザシェア率を見る

# 1. 背景

https://ics.media/entry/231120/

こちらの本を読んだ際に [Statcounter Global tats](https://gs.statcounter.com/) を知った為です。

日本におけるノートPCでブラウザのシェア率を知りたくこの記事で調査しました。

:::note
後続で調査結果を載せますがデスクトップPCのシェア率も含まれています。
:::

# 2. Statcounter Global Stats とは
世界で使われている検索エンジン、ブラウザ、モバイルを含むオペレーティング・システムなどの統計を見ることができるサイトです。

https://x.com/statcountergs?s=21

# 3. 日本国内のノートPCでのブラウザシェア率を見る
## 3.1 「Edit Chart Data」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405182/12603e48-4373-c900-15

web素材を超圧縮

html、js、css、svg等を圧縮して自己展開するprogramを紹介します。minifyではなく汎用的な可逆圧縮となります(minify後に使うと更に効果的)。展開には外部js不要。
圧縮された文字列は基本的にhtmlかjs fileで扱う事になります。css fileやsvg fileに埋め込んで使う事はできません。しかし展開した文字列をcssやsvg等としてDOMに追加する処理をすれば疑似的にcssやsvgとして使えます。
[先日投稿した記事](https://qiita.com/mashuel/items/9b76e0c9585dd46a834e)が原作となっています。最新版は[github](https://github.com/da0ka/ppminy)にて公開中。試し切りは以下のcodepenよりどうぞ。

JavaScriptのasync/awaitとPromiseって何が違うの

非同期処理を調べると必ず、タイトルのこの二つが登場してくると思いますし、実際の現場でも割と混在しているのではないでしょうか。
そして意外と使い分けに悩む・・・

なので今回は改めてasync/awaitとPromiseについて調べてみました。

# **とりあえず結論**

**async/await**は**Promise**を使いやすくするために生まれた文法ですので、
基本的にはasync/awaitを使ったらいいと思います。

# **async/awaitとPromiseって何者？**

一応簡単に触れておくと、jsでの非同期処理を制御してくれるやつですね。
そもそもjsでは色々あって非同期的に動くことが多いです。

この色々の箇所を解説すると長いので細かい話は割愛しますが、jsはWebAPIなどで外部の処理を駆使して、細かい処理を実現したりしています。
(jsの管轄外の外部で処理が動くので、いつ終わるかわからず待ってられないようなイメージ。待ってられないからjsは非同期的にどんどん処理を外部に投げながら自分は進んでいくイメージ)

まぁ細かい話は、別で調べていただけると助かり

# 株価チャート chartjs-chart-financial を試行錯誤で使ってみた　 2

## csv ファイルを読み込んでチャート表示

カンマ区切りの csv ファイルを利用してチャートを表示してみました。

SBI 証券の HyperSbi2 では 20 年程度の時系列データをエクスポートできますのでこれを利用します。
そもそも HyperSbi2 でそのままチャートを表示すればいいだけですが、ここではデータの整形手順を説明するためにこのデータを利用します。

### csv の構造


HyperSbi2 の csv データの特徴として、3 桁までの数値はそのままですが 4 桁以上の数値はダブルクォーテーションで囲まれたカンマを含む 3 桁区切りで格納されているのが特徴で、単純に`.split(‘,’)`や`.split(‘”,”‘)`等では正確な価格を取得することができません。

そこで、各行の模試列を先頭から区切り文

Denoってなに？試しに使ってみよう

2か月前に投稿してそのまま放置してました。
~~まあUbuntuやらなんやらで遊んでただけですが~~
さて本題に戻って、今回はDenoってなに？って人向けに簡単に説明を書きます。

# Denoとは
Node.jsの作者のライアン・ダールがJSConf EU 2018での公演「Node.jsに関する10の反省点」で発表されたJavascirpt・Typescirptのランタイムです。

# インストール方法
Windowsは
“`powershell:PowerShell
irm https://deno.land/install.ps1 | iex
“`
Mac・Linuxは
“`sh:Bash
curl -fsSL https://deno.land/install.sh | sh
“`
のコマンドを実行するとインストールされます。

# 実際に使ってみよう
:::note warn
自分が使っているDenoのバージョンはv1.41.0です。
なのでバージョンが上がるにつれ動かなくなる可能性があります。
:::
まずDenoを実行してみましょう。
“`
deno run

How to Cook Italian Food?

How to Cook Italian Food?!

Italian cuisine has a timeless allure, with its rich flavors, diverse regional dishes, and a culinary heritage that dates back centuries. From the rustic pasta dishes of southern Italy to the delicate risottos of the north, Italian food offers a captivating journey for your taste buds.

![Italian Food.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352567/0cec0f5c-d916-5e45-fbb9-cce657

[執筆中] 台パンができるリバーシをつくった

# 台パンリバーシ3D
Three.jsのみで台パンができる3Dのリバーシを作成しています。
完成次第技術詳細を書きます。
[作成途中の台パンリバーシ](https://reversi.syntck.com)

2024年がうるう年か判定する方法【閏年】

備忘録

“`javascript
const isうるう都市 = year => (year % 4 == 0 && year % 100 > 0) || [200, 600].includes(year % 900)
console.log(isうるう都市(2024))
“`

https://ja.wikipedia.org/wiki/%E9%96%8F%E5%B9%B4#:~:text=修正ユリウス暦

Modalって作るの難しい・・・諳んじれますか？

ふと気になって調べること数十回。自分の中で区切りをつけたいので記事にまとめます！

あと、諳んじる必要は全く無いと思っています！

## 環境

BrowserがあればOKです。

一応、[リポジトリ]()にNode プロジェクトとしても作ってあります。`npm run start`で動きます。

## 実装

### Modal構成要素

– ダイアログ中央表示
– Overlay
– 表示・非表示切り替え

では、順番に実装していきましょう。

### ダイアログ中央表示

絶対位置で、ダイアログを中央に配置します。

“`html:index.html

Dialog

“`

“`css:style.css
#dialog {
position: fixed; /* 絶対位置で表示 *

Ruby on Railsで動的なフォーム要素を扱う方法

この記事では、Ruby on Railsで動的にフォームの表示を切り替える一例として、サービス選択に応じて特定のフォームフィールドを表示・非表示する方法を紹介します。主に`id`属性の動的な生成とJavaScriptを使用したDOMの操作に焦点を当てて解説します。

## まず結論

問題の解決策は、`id`属性をERBテンプレート内で動的に生成し、JavaScriptを用いてその`id`を持つ要素の表示を切り替えることでした。具体的には、以下のように記述しました。
※<%= service.id %>の部分が重要でした。
※コメントアウト部分はコンソールでログを出しつつ試行錯誤した履歴です。

“`app/views/staffs/registrations/edit.html.erb