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

[JavaScript]paiza問題集-クラス・構造体メニュー「静的メンバ」/コンストラクタ　解答

# はじめに
Qiita初投稿となります。
paizaにて問題集、スキルチェックなどで勉強を始めました。
javascriptを使って取り組んでいる中で、問題集の回答にjavascriptのコードが無い
問題も多く、自分用の備忘録としても置いておこうと思います。

# 問題URL
https://paiza.jp/works/mondai/class_primer/class_primer__constructor

無料で利用している方はチケット３枚が必要になります。

# 解答コード
　classを定義後にループ処理内で「インスタンスの作成・配列への追加」、「配列から名前の呼び出し」
「配列から番号の呼び出し」を行っています。

“`javascript
process.stdin.resume();
process.stdin.setEncoding(‘utf8’);
// 自分の得意な言語で
// Let’s チャレンジ！！
var lines = [];
var reader = require(‘readline’).createInterface({
input:

Next.jsレンダリングパターン早見表

## はじめに
Next.jsでは、ページの内容生成のために異なるレンダリングパターンが提供されています。
これらのパターンは、アプリケーションがデータフェッチング、SEO最適化、パフォーマンスをどのように扱うかに影響します。
毎回公式ドキュメントに行って翻訳ソフト使うのが面倒なので、早見表的にレンダリングパターンの概要とコードの使用例をまとめてみました。

# SSG(Static Site Generation)

SSGとは

静的サイト生成 。
SSGはビルド時にページをプレレンダリングします。
つまり、アプリケーションをビルドするときにHTMLが生成され、CDNにキャッシュされて高速に配信されます。
コンテンツが頻繁に変わらないページに適しています。

`cache`を`”force-cache”`とすることで実現できる
“`tsx
// app/page.tsx
const response = await fetch(“[URL]”, {
cache: “force-cache”,
});
`

AjaxやFetchAPIで「エラー: SyntaxError: Unexpected token ‘<', "

## 前書き
JavaScriptでFetchAPIを使用し、非同期通信を行おうとしていた際に下記のエラーが発生しました。

“` :コンソール
エラー:
SyntaxError: Unexpected token ‘<', "
“`

“`JavaScript:jQuerySample.js
headers: {
// ↓ これが抜けてた
‘X-CSRF-Token’: $(‘meta[name=”csrf-token”]’).attr(‘content’);

// ↓ ここは任意です
‘Cont

axiosとfetchの違いについて

axiosとfetchは、どちらもJavaScriptでHTTPリクエストを行うための方法です。
## axiosとfetchの違い
### インターフェース
– fetch
ブラウザの標準APIであり、グローバル関数として提供されます。ネイティブのPromiseベースのAPIであり、`fetch()`メソッドを使用してHTTPリクエストを行います。
– axios
サードパーティのライブラリであり、独自のAPIを持っています。axiosインスタンスを作成し、そのインスタンスのメソッドを使用してHTTPリクエストを行います。
### ブラウザの互換性
– fetch
モダンブラウザで広くサポートされていますが、一部の古いブラウザではポリフィルが必要な場合があります。
– axios
Promiseベースのライブラリであり、すべてのモダンブラウザで動作します。さらに、Node.js環境でも使用できます。
### デフォルトの動作
– fetch
クッキーなどの一般的なHTTPリクエストの動作をカスタマイズするために、fetch()メソッドを使用する場合は、設定オプションを手動で指定する

jq 1.7の新機能ーキー連鎖時の . と [] の用法

[JSON](https://datatracker.ietf.org/doc/html/rfc8259)処理のコマンドラインツールである[`jq`](https://stedolan.github.io/jq/)が、5年ぶりにアップデートしました。現在の最新は1.7.1（2023年12月リリース）です。1.6からいろいろと改定や新機能の追加があって、ますます楽しくなっています。

全容は[Github上のリリースノート](https://github.com/jqlang/jq/releases)を見ていただくとして、今日はネストされた構造型データ（オブジェクトおよび配列）のツリーを下って値を抽出するときの`.`と`[]`についてです。

次のように、2重にネストされたJSONオブジェクトを考えます（環境変数`DON`に収容されているとします）。

“`bash
$ DON='{“どんぶり”: {“かつ”: 600, “親子”: 550}}’
$ echo $DON | jq ‘.’
{
“どんぶり”: {
“かつ”: 600,
“親子”: 550
}
}

Dijkstra 法（priority queue 付き Map 利用, Javascript）

こんにちは。
priority queue 付きの “`Map“` を作り、Dijkstra 法処理に使うと便利だろうと思い試しました。
本当に便利なのならば（他の用途は思いつきませんが）、計算量低減化も必要と思いました。

“`console
$ node dijkstra.js
vertices of the graph: [Map Iterator] { 0, 1, 2, 3 }
source: 0
result: Map(4) { 0 => 0, 2 => 0.5, 1 => 1, 3 => 1.5 }
“`

“`dijkstra.js
const source = 0, destination = 3;

// array of edges represented by adjacent vertex and distance
const directedGraph = new Map([
[0, [{target: 0, distance: 0}, {target: 1, distance: 1}, {target: 2, distance: 1}, {

【WYSIWYGエディタ】Summernoteの使い方（日本語化）

## はじめに
リッチエディタ（WYSIWIG）でよく出てくるのは、やはり「CKEditor」「Quill」「TinyMCE」あたりがよく聞くのですが、今後のためにも商用無料のMITライセンスかつオープンソースで利用出来そうなものを探していて、最終的に「Summernote」が色々な面で良さそうということで深堀りしているのと、単体設置方法の記事があまり無いなぁってことで、最近ド忘れも多いのでうっかりを無くすためにも基礎からメモ。
ちなみにデモは[公式サイト（Summernote）](https://summernote.org/)へ
## Summernote選定の理由
・商用無料のMITライセンスかつオープンソース
・様々なシーンで親和性が高そう（管理画面等でも使いやすそう）
・ツールバーが色々カスタマイズできそう
・オリジナル機能のボタンが簡単に作れそう　←　実際にはここで詰まった
・画像が特にアップロードせずに使うことができるっぽい
・動画もアップできる
・ソースコードの表示機能がある
・画像をある程度簡単にサイズ調整等できる

## Summernoteのインストール（日本語化

要注意！フリーランスエンジニアが知っておくべきリスクとその対策Top6

### 要注意！フリーランスエンジニアが知っておくべきリスクとその対策Top6

1位：収入が不安定
2位：キャリアの停滞
3位：人脈を深めにくい
4位：もらえる年金が少ない
5位：退職金がない
6位：雇用保険がない

https://magicgifted.com/free-risk/

contenteditableについてのメモ書き17選

# contenteditableについてのメモ書き17選

この記事は[アドカレ](https://qiita.com/advent-calendar/2023/hachinohe_kosen)に参加しています。

:::note warn
この記事の話はすべてedgeでの話です。他のブラウザの挙動も大体同じだとは思いますが、思うだけです。すみませぬ。
:::

## contenteditable
[contenteditable](https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/contenteditable)というものを知っていますか？
[textarea](https://developer.mozilla.org/ja/docs/Web/HTML/Element/textarea)ではプレーンテキストを扱うことができますが、contenteditableな要素では様々な種類のNodeを扱うことができます。

色付のテキストから、図形、画像、動画まで、いろいろ扱える高機能なもの、それがconte

回避不可能！落ち度がなくても、フリーランスエンジニアがクビになる理由Top5

### 落ち度がなくても、フリーランスエンジニアがクビになる理由

1位：予算の縮小
2位：タスクの不足
3位：リーダーの人手不足
4位：新規開発フェーズの終了
5位：会社の成長

https://magicgifted.com/career-1/

誕生日から、ある日付までの年齢計算 JavaScript

### ■ユーザーインターフェイス


### ■ソースコード
“`js main.js

var birthYear = parseInt(document.getElementById(‘dead_birth_year’).value);
var birthMonth = parseInt(document.getElementById(‘dead_birth_month’).value);
var birthDay = parseInt(document.getElementById(‘dead_birth_day’).value);

var birthYearType = parseInt(document.getElementById(‘dead_birth_koyom

【初心者向け】Javascriptのfilterとmapメソッドをいい加減マスターする

# 実行環境

簡易的な実行確認は[paiza.io](https://paiza.io/projects/U9vmvgYKoYnML5nch9v9bw)で行う

# おさらい

filter：条件にあう数値の配列になる（値を返すわけではない）

map: 操作した後の配列を返す

# まずはfilter

## 問題：配列に対して、1でない要素のみを返す関数を作る

filterは値を返さない
=> returnする必要がある

“`js
const array = [1,2,3,4,5];
const filtered = (array) => return array.filter((n)=> n !==1);

console.log(filtered(array));//[2,3,4,5]
“`

ちなみに以下は誤り

“`js
const array = [1,2,3,4,5]

const filtered = array.filter((n)=> n !==1)

console.log(filtered(array))
“`

# 次にmap

## 問題：数

Hubot Slack アダプターや RTM API から移行先について

こんにちは、Slack の[公式 SDK 開発](https://github.com/slackapi)と日本の Developer Relations を担当している瀬良 (@seratch) と申します :wave:

今週、Slack プラットフォームチームより以下のアナウンスメントが出ました。

https://api.slack.com/changelog/2024-04-discontinuing-new-creation-of-classic-slack-apps-and-custom-bots

要点をまとめると以下の三点となります。

* 2024 年 6 月 4 日以降、”classic app” と呼ばれる [RTM API](https://api.slack.com/legacy/rtm) や旧式の bot scope を持つアプリは新規で作成できなくなります
* これまでに作成されたアプリは引き続き動作しますが、RTM から [イベント API](https://api.slack.com/apis/connections/events-api) への早め

Laravel9ログの出力

# Laravel9ログの出力

Laravelでログを保存する方法と出力方法を解説

### 環境
– Laravel 9

ログの出力方法は2種類あります。
– ログの保存(/storage/logs/laravel.log)して表示
– ログを保存せずにターミナルで表示

### ログの保存(/storage/logs/laravel.log)して表示の場合

/config/logging.phpに追記

“` js:/config/logging.php
‘channels’ => [
‘stack’ => [
‘driver’ => ‘stack’,
‘channels’ => [‘single’],
‘ignore_exceptions’ => false,
],

‘single’ => [
‘driver’ => ‘single’,
‘path’ => storage_path(‘logs/lara

キー操作の混乱にさよなら！Tampermonkeyで送信キーをカスタマイズ 🚀

## はじめに

この記事では、ブラウザのアドオンであるTampermonkeyを利用して、異なるチャットのプラットフォームで送信キーを統一する方法を解説します。
システムごとに送信キーが異なることで、ユーザーが誤操作を引き起こすことがあり、誤送信の問題に発展することもあります。

## 利用条件 📝
– Tampermonkey がブラウザのアドオンとしてインストールされていること

– ブラウザがTampermonkeyをサポートしている（最新版のChrome, Firefox, Safariなど）こと

## 動作原理 🔧
ユーザーが設定したJavaScriptを実行する(割り込む)ことで、ブラウザ上のキー操作をカスタマイズします。

## MS Teamsの例
以下のスクリプトは、MS Teams Web版で CTRL + ENTER でメッセージを送信するためのカスタマイズ例です。
アプリ版は、この仕組みが使えないため、残念ながら対応できません。

このスクリプトは、Tampermonkeyで使用するためのユーザースクリプトの一例です。
Microsoft Teamsでのチャ

音に合わせて動くサイトを作ってみる

まず 出来上がったもの

https://dondokodon.vercel.app/

# この記事は

webに関わってサイトを作っていくと、何か音と連携したサイト作りたいなぁとか思ったりすると思います。
ので作りましょうという話。
**いつかはやってみたいと思うやれを個人消化してく** 記事です〜

# 要件と結果

### 要件

– 音に合わせて何かを動かす
– 音は決めうちではなくてダイナミックに対応したい
– ちょっとパリピっぽくしたい

### 結果

– 音の解析は以下を使う
– https://www.npmjs.com/package/music-tempo
– 音に合わせて gif を使う
– https://giphy.com を使わせていただく
– デザインは自分の中でパリピを目指す
– 自助努力、なんか虹色を使えばパリピっぽいやろ〜
– ローカルの素材をあげることを可能にしておく
– お作法として
– Gif のシェアも考えたが、権利的に責任持てなさそうなので一旦辞めとく
– VJ ツールっぽさを少し出す
–

全国の年収データを地図で見てみる（MapLibreで色塗りと円グラフ表示もしてみる）

# 全国の年収データを地図で見てみます
日本全国の年収のデータを地図で見てみようと思います。
MapLibreを使用して、行政界ポリゴンのベクトルタイルを平均年収で色分けして表示しました。また、市区町村ごとの年収データを円グラフ化して地図上に表示したコードサンプルもあります。

## 年収データについて
この記事で取り扱う年収は世帯年収を指します。
収入に関する公的なデータとしては
– 国民生活基礎調査
– 住宅・土地統計調査
– 賃金構造基本統計調査
– 就業構造基本調査
などがあります。

書籍「[ビジュアルでわかる日本](https://www.sbcr.jp/product/4815615208/)」でも国民生活基礎調査や住宅・土地統計調査が紹介されています。
また、[こちらのページ](https://www.itmedia.co.jp/business/articles/2401/02/news002.html)にもありますように、国民生活基礎調査では全体の平均年収、住宅・土地統計調査は市区町村ごとの年収階層の分布が公表されています。
ただ、全市区町村のデータはないため地図で

WebGPUでトーラスを描画してみた

# はじめに

WebGPUの勉強のため、トーラスを描画してみました。

# 作成したサンプル

今回作成したサンプルはこちらになります。

https://s-matsumi.github.io/wgld-webgpu/

# WebGPUとは

WebGPUはWebGLやWebGL2の後継のグラフィックスAPIで、ブラウザ上で3DCGの描画などGPUを用いた計算を行うことができます。
WebGL系と比較して、Vulkan、Metal、Direct3DなどモダンなAPIの概念を取り入れており、性能や機能性が向上しているそうです。

今回、WebGPUの使い方は主に以下のサイトを参考にさせていただきました。

https://zenn.dev/emadurandal/books/cb6818fd3a1b2e

https:

フロントエンドでjavascriptを用いる際のテンプレート部品

# webページの部品のまとめ

# フォームが空欄の時にエラーを出す
“`html

メールアドレス: