- 1. Javascript Registry (JSR) とは
- 2. (str) => と書く理由（JavaScript）
- 3. node js でdiscord のbot作成#2応答機能と作る
- 4. 【JavaScript】Array.prototype.reduce()、何がreduce(減らす)なのか。
- 5. JavaScriptでできること
- 6. 車検証のQRコードを生成してみる
- 7. 【JavaScript】配列メソッド一覧
- 8. モバイル端末の適応：remレイアウトの戦略
- 9. 初心者JavaScriptのメモ帳～JavaScriptよく使われるメソッド～
- 10. WebGL入門 その①（基礎知識、機材の準備、開発環境構築、三角形描画まで）
- 11. 【JavaScript】写真の一覧表示を画面に合わせて最適な大きさにして全部表示したい
- 12. leaflet.jsで日本地図を塗りつぶす
- 13. 【JavaScript】オブジェクトをJSON文字列に変換する方法
- 14. 「JavaScriptで要素をドラッグして移動する簡単な方法」という記事を見たが、何となく外枠が欲しくなった
- 15. 【小ネタ】Node.js用の OpenAI パッケージ（OpenAI版・Azure版）を軽く見比べてみる
- 16. [Javascript]深いネストの中にあるオブジェクトを検索し順番も記録するアルゴリズム
- 17. Deno DeployでBlueskyにツイートするAPI【ポスト】
- 18. Leafletで好きな色のピンを表示させたい！
- 19. pageStackメソッドで、引数を設定する
- 20. jsモジュールが使えるタイプのローカルWebアプリ
Javascript Registry (JSR) とは
### 概要
JSRとはjavascriptのパッケージのためのレジストリです。npmやNodeとも互換性がありますが、npmを進化させたようなレジストリです。
### レジストリとは
パッケージ等を管理するストレージのようなものです。例えば `npm install lodash` をすると、通常はnpmに設定されているデフォルトのレジストリである `https://registry. npmjs.org/ ` からパッケージをインストールしようとします。ここで注意すべきはパッケージ管理ツールとレジストリは別の概念であることです。`npm`コマンドはあくまでもパッケージ管理ツールであり、`npm`コマンドを使っていても実際にパッケージをインストールしてくるストレージは自由に設定可能です。この記事で紹介しているJSRは**レジストリ**であり、したがってnpmコマンドを使ってJSRからパッケージを取得することが可能です。
例えば企業などでは独自のレジストリを管理しており、npmコマンドなどでもデフォルトのレジストリが会社の管理するものになっているケースも多いと思います。
(str) => と書く理由（JavaScript）
Youtubeで英語で出題された外国人が運営しているチャンネルでJavaScriptの問題を解いていますが、
解答例を見ても、なぜ、こう書くことが正解なのかが分かりません。
問題は以下の通りです。Q.アルファベット順にアルファベットを入力し、
最初の文字を削除したうえで、最後に書いたアルファベットの次のアルファベットが
表示されるコードを書いてください。const alphabet = (str) =>
str.split(”).map(char=>String.fromCharCode(char.charCodeAt(0) + 1)).join(”);console.log(alphabet(‘hijk’));
→ ijkl分からないのは、「const alphabet = (str) =>」 の部分です。
変数のalphabetは分かりますが、
＝の後の、「(str) =>」 が分かりません。なぜ
(str) =>
と書くのでしょうか？JavaScriptの基本的な構文の書き方は勉強しましたが、
それでも分かりません（身についていないと言えばそう
node js でdiscord のbot作成#2応答機能と作る
# 前回のコードの詳しい説明
“`javascript:index.js
const {Client,GatewayIntentBits, GuildTemplate} = require(“discord.js”)
const client = new Client({intents:[]})
client.on(“ready”,async (c) =>{
console.log(`${c.user.tag}でログインしました`)
})
client.login(“先ほどのトークン”)
“`“`js
const {Client,GatewayIntentBits, GuildTemplate} = require(“discord.js”)
“`
まずはここです
`require`は読み込み先を指定するためみたいな感じです
`const`は一度定義したら二度と再定義できない変数です
“`js
const client = new Client({intents:[]})
“`
操作するためのクライアントを制作するためのものですintentsはオプションみたいな
【JavaScript】Array.prototype.reduce()、何がreduce(減らす)なのか。
# はじめに
ナイトウ([@engineer_naito](https://twitter.com/engineer_naito))と申します。
JavaScriptの勉強をしているのですが、本当に難しいことばかりです。
今回は最近ハマった `Array.prototype.reduce()` について記事にしようと思います。ぼく「`Array.prototype.reduce()` って何？」
ぼく「何をreduceしてるの？」# TL;DR
`Array.prototype.reduce()` は、配列の各要素に対して縮小関数を実行し、その結果を単一の値にまとめるためのJavaScriptのメソッドです。
reduceは「減らす」ではなく、関数型プログラミングにおける **「畳み込み」** を意味しています。# `Array.prototype.reduce()`
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce
> reduce(
JavaScriptでできること
## JavaScriptでできること
JavaScriptは、Webサイトに動きをつけるために最も広く使用されているプログラミング言語の一つです。以下、JavaScriptでできることをいくつか紹介します。
**1. Webサイトに動きをつける**
* ボタンやメニューのクリックイベント
* アニメーションやエフェクト
* スクロール時の動き
* 画像の切り替え
* ゲームやインタラクティブコンテンツ**2. ユーザー操作で内部処理を発動する**
* フォーム入力のチェック
* 送信ボタンのクリックによるデータ送信
* リアルタイムなデータ更新
* ユーザー認証
* エラーメッセージの表示**3. 非同期通信**
* サーバーとのデータ通信
* Ajaxによる非同期通信
* Web APIとの連携
* データのリアルタイム更新
* チャット機能**4. サーバサイドも開発可能**
* Node.jsを用いたサーバーサイド開発
* Webアプリケーション開発
* データベースとの連携
* リアルタイムな通信
* スケーラブルなシステム**5. IOS/And
車検証の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としても公開してます。
 => console.log(element));
“`### `reduce`
配列の各要素に対して（左から右へ）関数を適用し、単一の出力値を生成します。アキュムレータ（累積値）と現在の値に対して関数が適用され、最終的な値を返します。
“`javascript
const sum = [1, 2, 3].reduce((acc, cur) => acc + cur, 0);
console.log(sum); // 6
“`## 配列生成
### `
モバイル端末の適応：remレイアウトの戦略
## 背景
携帯の画面では、画面サイズが異なるため、通常のpxをレイアウト単位として使用すると、異なる画面で予期しない表示効果が生じる可能性があります。##### 例
* ブラウザのモバイルモニターで、iPhoneSEを使って、画面の文字列 “www…” は、、行全体をきちんと埋めることができます。
* そして、iPhone14 Proに切り替えると、文字列の後には明らかな空白が生じることがわかります。
ソースコードは下記になります
“`react
functio
初心者JavaScriptのメモ帳～JavaScriptよく使われるメソッド～
# Web制作でよく使われるJavaScriptメソッド
## querySelector() / querySelectorAll()
DOM内の要素をCSSセレクタを使って検索します。### querySelector()
“`diff_javascript
// 単一の要素を取得
const element = document.querySelector(‘.classname’);
“`### querySelectorAll()
“`diff_javascript
// 複数の要素を取得
const elements = document.querySelectorAll(‘div’);
“`
## addEventListener()
特定のイベントが発生したときに指定した関数を実行します。これは、クリック、マウスオーバー、キーボード入力などのイベントを処理するのに役立ちます。“`diff_javascript
document.getElementById(‘myButton’).addEventListener(‘click’, functio
WebGL入門 その①（基礎知識、機材の準備、開発環境構築、三角形描画まで）
# はじめに
WebGLについて、初学者の方向けに概要や背景などを説明する資料が欲しかったので書いています。
章に分けて読み物として書いている箇所もあるので、文章が長いと感じる方は興味がある箇所のみ読んでいただいても構いません。
WebGLはプログラミングに触れたことがある方でも、少し独特な記法に感じる方もいるかもしれません。記法だけ分かれば書けるのではなく、コンピュータグラフィックスや数学などの知識も必要なので、プログラミングがかける人の中でも適正がある方とない方を選ぶ技術分野であると感じています。とはいえ、しっかり勉強すれば作れるものなので、画像や3Dモデルを使ってリッチな表現を作りたい方は、楽しみながら諦めずに続けていただければと思います。# 1. WebGLとは
## 1-1. WebGLの概要
WebGLは、Khronos Groups（クロノスグループ）という米国の非営利団体が策定している技術で、ウェブブラウザ上で動くグラフィックを描画するための仕組みやメモリの効率化を行っています。
WebGLはHTML5と同時期に登場した技術で、HTML5で策定された`
【JavaScript】写真の一覧表示を画面に合わせて最適な大きさにして全部表示したい
# はじめに
モニターの画面いっぱいに写真の一覧を表示したい！という思いがあり、記事にしてみました！
モニターの大きさって色々あるので固定値ではなく、画面の大きさによって写真の大きさが一番大きく出るようにしたいです。
20枚でも40枚でも画面いっぱいにスクロールなしで、写真を見れるようにします。
# 結論
“`js:
function optimalWidth(photoNum, aspectRatio, allWidth, allHeight) {
var resultWidth = 0;
for (let i = 1; i <= photoNum; i++) { var w = allWidth / i; var heightNum = Math.ceil(photoNum / i); var h = allHeight / heightNum; var aspectH = w * aspectRatio * heightNum; var widthFromeight = h / aspe
leaflet.jsで日本地図を塗りつぶす
## html,jsでleafletjsを使って防災地図の塗りつぶしがしたい
– 引越し先を選ぶときに、地震・洪水・土砂崩れ・津波などなど日本を襲う数多の災害をなるべく避けられるような土地を選びたい！
– だが、防災マップは自治体が発表していたり、洪水は国交省が管理していたり、データがバラバラすぎる
– 特に東京都さんの[地震防災マップ](https://www.toshiseibi.metro.tokyo.lg.jp/bosai/chousa_6/home.htm)！地図で表示されていないので、見にくすぎる！
– 洪水は国交省さんの[重ねるハザードマップ](https://disaportal.gsi.go.jp/hazardmap/maps/index.html?ll=35.733624,139.654427&z=13&base=pale&vs=c1j0l0u0t0h0z0)が普通に見やすいです。
– ということでleafletjsを使って地震危険度と洪水と土砂崩れが簡単に見られるようにしてみましょう。## 東京都の町番地レベルでのgeojsonデータの取得
こちらの素晴らしい
【JavaScript】オブジェクトをJSON文字列に変換する方法
`JSON.stringify()`を使用することでオブジェクトや値をJSON文字列に変換します。
“`js
const jsonObject = {
name: “Sample”,
age: 20
}
const jsonString = JSON.stringify(jsonObject)console.log(jsonString) // {“name”: “Sample”,”age”: 20}
“`https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify
「JavaScriptで要素をドラッグして移動する簡単な方法」という記事を見たが、何となく外枠が欲しくなった
https://qiita.com/economist/items/d4254209330c11caff04
https://qiita.com/www-tacos/items/5614b61d3742d6db34b7
See the Pen
ball-area by s4i (
【小ネタ】Node.js用の OpenAI パッケージ（OpenAI版・Azure版）を軽く見比べてみる
JavaScript で OpenAI の API を扱おうとした時に、公式から提供されているパッケージを利用できます。
OpenAI提供の API を利用する際は以下の 1つ目の「openai」が利用できたり、Azure版の API（Azure OpenAI Service の API）を使う場合は以下 2つ目の「@azure/openai」を利用できたりします。
※ 後述しますが、「openai」のほうを Azure OpenAI Service用に使うこともできます●openai – npm
https://www.npmjs.com/package/openai●@azure/openai – npm
https://www.npmjs.com/package/@azure/openaiこれらの違いについて、少し見てみた結果をメモしておこうと思い、この記事を書きました。
とりあえず、軽く情報を見ていく感じで比較しようと思います。
## それぞれの npm のページ
### それぞれのバージョン
まずは npm のページの上部を見てみます。#### op
[Javascript]深いネストの中にあるオブジェクトを検索し順番も記録するアルゴリズム
# やりたいこと
以下のようなオブジェクトがあるとする
“`javascript
const sampleObject = [
{
“id”: 1,
“children”: [
{
“id”: 3
},
{
“id”: 4,
“children”: [
{
“id”: 6
}
]
},
{
“id”: 5,
“children”: [
{
“id”: 7
}
]
}
]
},
{
“id”: 2,
“children”: []
}
]“`
## やりたいことはこんな感じ
– idが6のオブジェクトまでの道筋(どのobjectを通って検索したか)を取得したい
– できるだけ無駄な繰り返しなく結果を取得したい# 解決
Deno DeployでBlueskyにツイートするAPI【ポスト】
“`bash
curl https://b-sky.deno.dev?identifier=laravel11.bsky.social&password=PASSWORD&text=やあ
“``laravel11.bsky.social`と`PASSWORD`は適宜書き換えてね！
https://bsky.app/profile/laravel11.bsky.socialSee the Pen 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
