- 1. JavaScriptの基礎入門
- 2. StorybookとLost Pixel を用いたビジュアルリグレッションテスト
- 3. Sunoのプロンプトが200文字までなので、DeepL API & 文字数カウンターを作ってみた
- 4. ウェブサイトを作成するのに最適なプログラミング言語は何ですか?
- 5. HTMLで簡単に数値のプラスボタンとマイナスボタンを作る
- 6. ラジオボタン切り替えでタブのように表示を切り替えるjs
- 7. 【初心者向け】toLocaleStringで数値や日付のフォーマット
- 8. ブラック・ショールズモデルを用いたオプション価格のシミュレーションプログラムというゲーム。
- 9. チェスのゲームプレイをながめるゲーム。
- 10. ブラウザのキャッシュAPIを試してみた
- 11. JavaScript入門メモ
- 12. Vivliostyleでコードに改行マーカーを付ける
- 13. #paiza #プログラミング #Javascript # 本番環境自動判別方法等
- 14. Dayjs で割と簡単に「たった今」「23秒前」のような相対表記を実現するワークアラウンド
- 15. Next.js (App Router) で tRPC
- 16. [TS/JS]ESMとCJS
- 17. IllustratorのSVGパスからイメージマップの座標に変換する方法
- 18. プリザンターの一覧画面で数値項目をスター記号で表示する
- 19. Leafletを使って地図に多角形を描き、人口データの属性を持つ町丁目ポリゴンを取得し、表示する
- 20. JavaScriptのArrayBufferとは？
JavaScriptの基礎入門
# 1. 変数の宣言
JavaScriptでは、以下の3つの方法で変数を宣言します。var：古い方法で、現在はあまり推奨されません（再代入・再宣言が可能）。
let：再代入可能だが再宣言は不可。
const：再代入・再宣言が不可。
javascript
コードをコピーする
let name = “JavaScript”; // letを使った変数宣言
const version = “ES6”; // 定数の宣言
name = “JS”; // letの再代入は可能# 2. データ型
JavaScriptには以下の主なデータ型があります：プリミティブ型：string、number、boolean、undefined、null
オブジェクト型：オブジェクト、配列、関数など
“`javascript
let text = “Hello, JavaScript”; // string
let num = 42; // number
let isActive = true; //
StorybookとLost Pixel を用いたビジュアルリグレッションテスト
:::note info
viviONグループでは、DLsiteやcomipoなど、二次元コンテンツを世の中に届けるためのサービスを運営しています。
ともに働く仲間を募集していますので、興味のある方は[こちら](#一緒に二次元業界を盛り上げていきませんか)まで。
:::## はじめに
Storybookを用いたビジュアルリグレッションテスト（VRT）はChromaticやStorycap + reg-suitなどを用いることが多いかと思います。
しかし、ChromaticはGitHub Enterprise Serverを利用している場合は、Enterpriseプランの契約が必要となり、reg-suitは外部のクラウドストレージが必要です。上記の制約がある中、ゆるくVRTを検証してみたかったので、リポジトリにベースイメージを保存してVRTを実行できるLost Pixelを使用してみました。
## Lost Pixelとは
Lost PixelはOSSのビジュアルリグレッションテストツールで、Storybook、Ladle、Historie、ページスクリーンショット、Pla
Sunoのプロンプトが200文字までなので、DeepL API & 文字数カウンターを作ってみた
## はじめに
**DeepL API & 文字数カウンター**
https://gist.github.com/sarap422/b2c0fdff98b14197cc7fd41541b5cf34Sunoのプロンプトは200文字までという制限があります。長文を分割するのは手間がかかるので、文字数をカウントしながら翻訳できるツールを作ってみました。DeepL API Freeを使用することで、月50万文字まで無料で高精度な翻訳が利用できます。
## DeepL API Freeの特徴
– 月間50万文字まで無料
– 高精度な機械翻訳
– シンプルなAPI
– 多言語対応（28言語以上）
– セキュアな通信（HTTPS必須）## 実装手順
### 1. DeepL API Freeのアカウント作成
1. [DeepL API Free](https://www.deepl.com/pro#developer)にアクセス
2. アカウントを作成
3. APIキーを取得（形式: `xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx:fx`）### 2
ウェブサイトを作成するのに最適なプログラミング言語は何ですか?
### ウェブサイト作成に最適なプログラミング言語は何か？
ウェブサイトの開発に最適なプログラミング言語を選ぶことは、パフォーマンス、スケーラビリティ、ユーザー体験に影響を与える重要な決断です。この選択は、プロジェクトのタイプ、必要なカスタマイズのレベル、開発者の好みによって異なります。ここでは、ウェブサイトの作成に人気のあるプログラミング言語とその主な利点を紹介します。
私のウェブサイト https://noticiasdeprimera.com/
#### 1. **JavaScript**
JavaScriptはウェブ開発で最も利用されている言語の1つです。この言語を使えば、開発者はウェブページにインタラクティブ性と動的要素を追加できます。さらに、Node.jsの登場により、JavaScriptはクライアント側（フロントエンド）とサーバー側（バックエンド）の両方で利用できる完全な開発言語となりました。
**利点:**
– フロントエンドとバックエンドで使用可能
– 広範なコミュニティとサポート
– React、Angular、Vueなどの強力なライブラリとフレームワーク
HTMLで簡単に数値のプラスボタンとマイナスボタンを作る
意外と知らない方が多いと思いますが、JavaScirptで自作しなくても簡単にできます。
便利ですね！“` javascript
document.getElementById(“minus”).addEventListener(“click”, (event) => {
document.getElementById(“number”).stepDown();
});
document.getElementById(“plus”).addEventListener(“click”, (event) => {
document.getElementById(“number”).stepUp();
});
“`ste
ラジオボタン切り替えでタブのように表示を切り替えるjs
“`html
花火アニメーション
以下のコードでjs-toggle-displayを取得し（複数あっても対応できるように）、
js-toggle-display-radioのラジオボタンのcheckedがある要素のdata-displayのクラスを持つもののdisplay_noneクラスを削除し、
checkedがない場合はdisplay_noneクラスはついたままにしてクリックするたびに表示がかわるようにjque
【初心者向け】toLocaleStringで数値や日付のフォーマット
# はじめに
こんにちは。
JavaScriptには「toLocaleString」という、数値や日付を地域や言語ごとに適した形式でフォーマットできるメソッドがあります。このメソッドは、金額や日付の表示など、さまざまな場面で役立ちます。
この記事ではtoLocaleStringメソッドの基本的な使い方や注意点を紹介します。# 基本的な使い方
まずは、toLocaleStringメソッドの使い方を簡単に説明します。
toLocaleStringメソッドには、第一引数と第二引数があります。
“`
toLocaleString(ロケール, オプション);
“`
◆**第一引数**には、ロケールを指定します。指定する際には、BCP47言語タグを使いますが、これは言語や地域の識別子になります。ちなみに日本の場合は、「ja-JP」になります。
引数が無い場合は、実行環境によって自動的に設定されます。:::note info
**ロケールとは**
地域や言語の設定のこと。他に時間帯や日付・時刻の表記、通貨単位などの設定も含まれる。
:::
[BCP47言語タグに関する参考サイト](htt
ブラック・ショールズモデルを用いたオプション価格のシミュレーションプログラムというゲーム。
#### ショートストーリー: 綾小路清彦の挑戦
東京の繁華街に位置する小さなオフィスで、綾小路清彦という名のプログラマは日々プログラミングに励んでいた。彼は金融業界に強い興味を持ち、特にオプション取引の世界に魅了されていた。しかし、理論を学ぶだけでは物足りない。実際に自分でシミュレーションを行い、現実のデータを元に計算してみたいと考えるようになった。ある日、清彦はブラック・ショールズモデルを用いたオプション価格のシミュレーションプログラムを作成することを決意した。彼はまず、ビットコインの価格や権利行使価格、ボラティリティ、残存日数、無リスク金利といった必要なパラメータを集めた。彼の目標は、オプション取引がどのように機能するのか、そしてその価格がどのように変動するのかを理解することだった。
「まずはビットコインの価格が100
チェスのゲームプレイをながめるゲーム。
#### タイトル: チェスの先にある未来
東京の繁忙な街並みを背に、主人公のタケシはオフィスで一日を始めた。彼は若きプログラマであり、人工知能の開発に情熱を燃やしていた。最近、彼はチェスAIのプロジェクトに取り組んでおり、プログラムに自分の学びを注ぎ込むことに夢中だった。
タケシの目標は、AIがチェスを学び、自己改善しながらプレイできるようにすることだった。彼はデータを集めるために、ランダムな手を指すAIを作成し、その結果を元に次の動きを予測
ブラウザのキャッシュAPIを試してみた
# 背景・目的
ブラウザのキャッシュAPIについて調べる機会があったので、簡単に整理し試してみます。# まとめ
下記に特徴をまとめます
|特徴|説明|
|:–|:–|
|Cacheインターフェイス|・Request/Responseオブジェクトのペアを保存するストレージの仕組みを提供する
・Cache オブジェクトがどのくらい持続するかはブラウザーに依存する
・サービスワーカーだけでなく、ブラウザのウィンドウスコープ（通常のウェブページ）」でも使える|
|キャッシュの管理|・ひとつのオリジンが、複数の名前付き Cache オブジェクトを保有することができる
・複数の名前付きキャッシュを持てる
・キャッシュ更新の管理は開発者の責任
・CacheStorage.open() で特定の名前のキャッシュを開く|# 概要
下記を基に整理しますhttps://developer.mozilla.org/ja/docs/Web/API/Cache
## Cache
> Cache インターフェイスは、 Request / Response オブジェ
JavaScript入門メモ
以下の入門講座本にて個人的に勉強になったJavaScriptのメソッドや記法を纏めてみました。
適宜進行に応じて増やしていきます。
## 1.要素の取得
“`js
document.querySelector(‘セレクター’);// 例
document.querySelector(‘#test’); // id指定
document.querySelector(‘.test’); // class指定
document.querySelector(‘h1’); //タグ指定
“`
documentオブジェクト内の特定セレクター(括弧内)を持つ要素を取得する。
複数存在するセレクターの場合、最初の要素を取得する。
指定したセレクターを全て指定する場合は、`querySelectorAll(”)`を用いる。## 2.要素内のテキストの取得・書き換え
“`js
document.querySelector(‘セレクター’).textContent;//例
// h1タグのテキストを’t
Vivliostyleでコードに改行マーカーを付ける
書籍にソースコードを掲載する際、実際には入力しない組版都合の改行が発生することがあります。特に初心者向けの書籍では気を遣う要素で、改行しても支障がない箇所で前もって改行したり、[行番号を付け](https://qiita.com/u1f992/items/b30dfbee13ab47dcfdea)たり何らかの改行マーカーを付けたりして明確にします。今回はVivliostyleで改行マーカーを実現します。
VFMでソースコードを改行させるには次のようなCSSを用意します。
~~~markdown
—
lang: ja
—“`javascript
const extrem
#paiza #プログラミング #Javascript # 本番環境自動判別方法等
**本内容を利用した場合の一切の責任を私は負いません。**
# 概要
この前書いた下記のatcoder版のpaiza版。
(Windows 10+node.js+Visual Studio Codeの場合。)
https://qiita.com/qiita21409102/items/c6fdfafdf76a8f71483a# 本番環境自動判別方法
Visual Studio Code上でデバッグすると専用の環境変数が設定されるので、それで判別する。“`Javascript
var isSubmit = true;if (process.env[“VSCODE_PID”] != undefined) {
isSubmit = false;
}
“`
Dayjs で割と簡単に「たった今」「23秒前」のような相対表記を実現するワークアラウンド
# バージョン
`dayjs@1.11.11` で動作確認しています。
# 相対表記の実装の基本
“`typescript
import dayjs from “dayjs”;
import “dayjs/locale/ja”;
import relativeTime from “dayjs/plugin/relativeTime”;dayjs.locale(“ja”);
dayjs.extend(relativeTime);
“`まず標準の相対表記を実装するのはこれ↑だけです。
“`typescript
const now = new Date().getTime();
const secondsAgo = now – 1 * 1000;
const minutesAgo = now – 2 * 60 * 1000;
const hoursAgo = now – 2 * 60 * 60 * 1000;console.log(dayjs(secondsAgo).fromNow());
console.log(dayjs(minutesAgo).fromNow(
Next.js (App Router) で tRPC
[tRPC]:https://trpc.io/
[Route Handler]:https://nextjs.org/docs/app/building-your-application/routing/route-handlers
[Next.js (App Router)]:https://nextjs.org/docs/app
[Set up with React Server Components – tRPC公式]:https://trpc.io/docs/client/react/server-components
[tRPCの簡易設定 (AppRouter) – hayato94087さん]:https://zenn.dev/hayato94087/articles/08d63958b57fbe# 記事の目的
本記事は以下の tRPC 公式のドキュメントに従って、[Next.js (App Router)] に [tRPC] を導入します。
https://trpc.io/docs/client/react/server-components
しかし 2024
[TS/JS]ESMとCJS
ESMだのCJSだので詰まることが多すぎるので、いい加減情報をまとめる。
## 概要
ざっくりいうと、「`modules`をどのように扱うか？」に係る2種の系統。
* `import`, `export`するほうがESM
* `require`, `modules.export`するほうがCJS### ESM; ES Modules
`import`の方。ECMA Script2015（ES6）で策定されたモジュール仕様。
V8などは当然こちらに準拠している。[ECMAScript – Wikipedia](https://ja.wikipedia.org/wiki/ECMAScript)
### CJS; CommonJS
`require`のほう立ち上げは2009なので、ESMより古参。
ServerSideJavascriptというコンセプトを出発点とするため、Node.jsではデフォルトである一方、ブラウザでは非対応となっている。[CommonJS – Wikipedia](https://ja.wikipedia.org/wiki/CommonJS)
IllustratorのSVGパスからイメージマップの座標に変換する方法
## はじめに
Illustratorで作成したクリッカブルマップをWebで実装する際、SVGパスをイメージマップの座標に変換する必要があります。この記事では、その変換処理をJavaScriptで実装する方法を解説します。## 背景
クリッカブルマップの実装方法には主に2つあります：
1. SVGを直接使用する
2. HTMLのimage mapを使用するSVGは優れた選択肢ですが、特にホバーエフェクトを実装する際にはimage mapの方が都合が良い場合があります。そこで、Illustratorで作成したSVGパスをimage mapの座標に変換する必要が出てきます。
## 実装方法
SVGからImageMap（イメージマップ）に変換ツール
https://gist.github.com/sarap422/5660d5d69fded713db37275af28d7076image-map-resizer.jsを利用した、hoverの効くクリッカブルマップのサンプル
https://codepen.io/sarap422/embed/RwjawVZ?theme-id=2
プリザンターの一覧画面で数値項目をスター記号で表示する
## 概要
プリザンターの一覧画面で数値項目をスター記号（星マーク）で表示するスクリプトです。アンケート結果やレビュー評価の数値を「★」で表現したいときにどうぞ。
## 適用手順
### 1. スクリプトの設定テーブルの管理画面から以下の手順でスクリプトを設定します。
1. 対象テーブルの管理画面を開きます。
2. スクリプトタブより新規作成ボタンをクリックします。
3. タイトル欄に任意の名称を入力します。
4. スクリプト欄に以下の内容を貼り付けます。
5. 出力先の「全て」のチェックをオフにし、「一覧」のチェックのみをオンにします。
6. 画面下部の更新ボタンをクリックし、変更が反映されたことを確認します。https://pleasanter.org/manual/table-management-scr
Leafletを使って地図に多角形を描き、人口データの属性を持つ町丁目ポリゴンを取得し、表示する
## 概要説明
Leafletの描画ツールを使ってフリーハンドで多角形を描きサーバーと連携、多角形内の町丁目ポリゴンを取得・表示し、町丁目ポリゴンが持つ人口データを出力するようにします。## 使用したもの
### Leaflet
比較的軽量なオープンソースのJavaScript地図ライブラリです。https://leafletjs.com/
### 町丁目ポリゴン、令和2年国勢調査結果/人口総数
今回使用する町丁目ポリゴンおよび令和2年国勢調査結果/人口総数数データは、TerraMap API からレスポンスされたGeoJSON形式のデータです。https://www.mapmarketing.co.jp/terramap-api?grid=qiita&utm_source=qiita.com&utm_medium=referral&utm_campaign=qiita_leaflet_freehand_polygon_f7e3f9df20e004d12f71_01
### その他
JavaScript
PHP## 完成イメージ
全体の完成イメージは、以下の動画
JavaScriptのArrayBufferとは？
JavaScriptにおける`ArrayBuffer`は、バイナリデータの格納と操作に特化したデータ構造で、主にWeb APIや低レベルなデータ処理のために使用されます。その特徴は以下のとおりです：
### 1. **固定長のメモリ領域**
– `ArrayBuffer`は一定のサイズのメモリ領域を確保します。サイズはバイト単位で指定され、一度生成するとサイズは変更できません。
### 2. **バイナリデータの格納**
– JavaScriptの通常の配列は、任意の型のデータを格納できますが、`ArrayBuffer`は純粋なバイナリデータ（ビットの列）を格納します。
– メモリ効率が高く、大量データを扱う際に便利です。### 3. **複数のビュー（TypedArray）でデータにアクセス可能**
– `ArrayBuffer`自体にはデータアクセス機能はありません。そのため、`TypedArray`や`DataView`などを使用してバッファ内のデータにアクセスします。
– `Uint8Array`, `Int16Array`, `Float32Array`などの`
