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

Next.jsをベースにNuxt.jsを最短でキャッチアップする方法

## はじめに
自分はNext.jsは多少知っていてもNuxt.jsのことは全く知らないまま、「必要になった時頑張れば何とかなる」と思ってずっとNuxt.jsのキャッチアップをスルーしてきました。
いざNuxt.jsが必要な場面に出くわしてみると、「やれば何とかなる」ではなくて「Next.jsとだいぶ違うやん・・・」と思い想像以上にキャッチアップに苦心しました。
（私のスキルのせいもありますが。。。）
その経験を踏まえ、備えあれば憂いなしではないですがNext.jsの使い手の方がNuxt.jsのことを主要項目だけでも知っておくための参考になればと思い記事にしました。
※Next.jsとReact、Nuxt.jsとVueの区別はしておりませんのでご容赦ください。

## 読んで欲しい人
– Next.jsの知見はある
– Nuxt.jsは全くわからない
– Next.jsの知見をベースに効率よく Nuxt.jsの基礎を理解したい

## コンポーネントシステム
Nuxt.jsにはNext.jsでは当たり前のJSXという概念はなく、 HTMLテンプレート、CSS、JSスクリプトが機能が分か

JointJS解説　〜Geometry API編〜

## Geometry APIとは

Geometry APIは、JointJSに同梱される軽量なライブラリです。主に座標に関する操作を行うための機能が搭載されています。
Geometry APIを使わなくてもJointJSを利用することはできますが、JointJSのメソッドの中にはGeometry APIのオブジェクトを引数にとるものも存在します。ですのでAPIが存在すること

なおGeometry APIのドキュメントは[こちらのページ](https://resources.jointjs.com/docs/jointjs/v3.7/geometry.html)で読むことができます。

## 主要なクラス

Geometry APIのクラスをいくつか紹介します。

### `Point`

`Point`は`x`, `y`からなる座標点を表します。
`Point`は`g.Point(x, y)`でオブジェクトを生成できます。

“`js
const point = g.Point(10, 30);
“`

JointJSではLinkの経由点を設定するメソッド[`vertices

Web開発スキルを爆上げできるYouTubeチャンネル10選（2023/12月時点）

## はじめに
こんにちは、普段はITコンサルをやっているまるやきです。
今回は、個人的にReactやTypeScriptなどのWeb開発技術を学ぶのにおすすめだと感じているYouTubeチャンネルをまとめていければと思います。
並び順は結果としておすすめ順になっていると思います。

## 本記事の想定読者
* これからWeb開発に挑戦してみたい方
* Web開発のTipsなどを学び、技術力をアップしたい方
* お正月が暇だから最新技術のキャッチアップをしたい方

## Web Dev Simplified
このチャンネルは、TypeScriptやReactなどのベストプラクティスや細かなテクニック(Tips)を学べるチャンネルです。
Web開発に関連していることを取り上げているチャンネルなので、上記の項目以外にもアクセシビリティやUI/UXなど色々扱われています。
個人的にはショート動画が結構好きです。

[Web Dev Simplified](https://www.youtube.com/@WebDevSimplified)

## Codevolution
このチャンネルは、

いい感じのリンクを楽々に作れる商品紹介します

## これ何
* リンクを便利にコピーしてくれる chrome拡張: cocopy を紹介するだけの記事です
* SlackなどのチャットツールでMarkDownのリンク記法ややめんどいな〜と思っている方におすすめです

## ことの始まり
チャットツールでしばしば長めの文を見かけることがあると思います。その時に

とリンクが長いテキストの中にそのまま表記されているよりは、


↑のように表記されている方が、ただでさえ読む気が起きない長い文を読むきっかけの一つになると、個人的には思っています。

### とはいえ
普通にリンク貼り付けるだ

Vuexを少しだけ拡張して使ってみた

## はじめに:clapper:
「公式ドキュメントを読むのはいいけど、本質を理解して自分なりに実装するよう意識しないと伸びないよ。」

先輩エンジニアに言われて、グザっと刺さるフレーズをご紹介します。

今回は「Vuexの基本は学習しました！」というエンジニア向けに、こんな使い方もできますよというサンプルを提示できたらいいなと思って記事を書きます！
※Vue3になってpiniaを利用する方も多いかと思いますが、通ずる話かと思います

稚拙なところも多々ありますが、一読いただけると幸いです！

## State
stateはVuexの中核を担うものですが、文字列や数値、空の配列のみ定義しなければならないわけではありません。
必要なデータはひとまとまりにすると参照する際もデータを更新する際も楽なことがあります(Vuexに限らずですがね)。

“`javascript
state = () => ({
// 基本的な書き方
base: ”,
count: 0,
// まとまった方が使用しやすい場合は、オブジェクトなどで定義してあげると後ほど楽になる
blogPost

JUCEとCHOCを組み合わせてオーディオプラグインのGUIをWeb技術で作ろう

本記事は[JUCE Advent Calendar 2023](https://qiita.com/advent-calendar/2023/juce) の12月16日向けに投稿した記事です。

# 要約

https://github.com/COx2/audio-plugin-web-ui

JUCEとCHOCを組み合わせることで、オーディオプラグインのGUIをWeb技術で制作することができます。このアプローチは、複数の技術要素を組み合わせながらも、柔軟で効果的なGUIプロトタイピングを可能にします。

本記事では、筆者が作成した WebGain と DenoGain での実践を通じて、C++によるネイティブ向けのオーディオプラグイン、オーディオアプリケーションの開発にWeb技術を導入する手順について解説します。

なお、用いている技術スタックが多層であることと、開発フローがまだ標準化できていないため、本記事では、「WebViewを用いてGUIを構築する基礎技術」に焦点を当てており、Web技術スタックそのものについては触れません。また、ソースコードの解説は要点のみに留めさせていただ

フォームを POST するときの注意事項まとめ

わかっていてもよく抜けてしまう場合のある事項をチェックリストとしてまとめてみました。

# method=”POST”

フォームの属性に method=”POST” がないと、フォームの動作のデフォルトでは “GET” メソッドでフォームが送信される。

<form method=”POST”> …

# enctype=”multipart/form-data”

ファイルアップロードを行う際には enctype=”multipart/form-data” の指定が必要である。

<form method=”POST” enctype=”multipart/form-data”> … </form>

## (参考)

enctype=”multipart/form-data” の指定があるとリクエストヘッダの Content-Type が “multipart/form-data; boundary=—-…..” などとなり、通常のフォームの場合と異なる。フォームデータはコントロールごとに boundary 文字列により分けられる。

【JavaScript】Svelteを触ってみた

この記事は[レコチョク Advent Calendar 2023](https://qiita.com/advent-calendar/2023/recochoku)の17日目の記事となります。

# はじめに
こんにちは。株式会社レコチョクでmurketというサービスのフロントエンドエンジニアをしている坂本と申します。
最近は作業のおともにエイハブさんの「アクター」や「クィホーティ」を聴いています。

さて、本題に入ろうかと思うのですが、みなさんはJavaScriptのフレームワークといえば何を思い浮かべるでしょうか。Vue.js？それともReact？
JavaScriptのフレームワークといえばこの二強という印象がありますが、今回は最近勢いのある第三勢力**Svelte**を触ってみたので記事にします。

# Svelteとは
ここでSvelteの概要について軽く触れておきたいのですが、要約が~~面倒くさい~~難しかったのでChatGPT先生に「JavaScriptのフレームワークであるSvelteについて、300文字程度でJavaScript中級者に対して説明してください。」と聞

LeafletのGISを使おう!

# LeafletのGISを使う
Google Maps APIはGCPに登録していないと使えませんし、それにはクレカが必要です。yahoo! のマップのAPIも地味に発行がめんどくさいです。
手軽に使えるlefletのマップを使ってみるといいかもしれません。
# Leafletとは
web地図用のJSライブラリです。読み込むだけで使えます。ほとんどのプラットフォームに対応しています。
# 使ってみる
JSで読み込む
~~~JavaScript:road.js
map = L.map(‘div id’).setView([緯度,経度], ズーム);
L.tileLayer(‘https://cyberjapandata.gsi.go.jp/xyz/std/{z}/

Next.jsで実現するオニオンアーキテクチャ (3) – Application Service

:::note warn
記事におけるNext.jsは、v13以降のApp Router （Server Components）を用いる前提での説明となります。
Pages Routerを用いている場合は、適宜Pages Routerでの書き方として読み替えてください。
:::

## この記事は何
最近Next.jsでウェブアプリケーションを作ることが多いのですが、
その時にオニオンアーキテクチャを採用してアプリケーションを作ることが多く、型も固まってきたので数回の記事にわたり紹介をしていきたいと思っています。

前回は

https://qiita.com/getty104/items/9b67900d30f9a02c7c7c

でDomain Model/Domain Serviceについて紹介しました。

今回は`applications`ディレクトリに実装していくApplication Serviceについて説明をしていきます。

## Application Serviceとは
Application Serviceとは、ドメイン層に定義した処理を組み合わせることで、 Ap

【CyberDefenders】Obfuscated【Walkthrough】

:::note info
これは [ZOZO Advent Calendar 2023](https://qiita.com/advent-calendar/2023/zozo) カレンダーVol.6の17日目の記事です。昨日の投稿は@kitsune_ykさんでした。
:::

# はじめに
本記事は ___CyberDefenders___（以下リンク参考）の「__Obfuscated__」にチャレンジした際のWalkthroughになります

https://cyberdefenders.org/blueteam-ctf-challenges/76

※本チャレンジについてはRed側のペネトレというよりはBlue側の分析力を問われるものになります。
※今回のチャレンジはマルウェア解析メインでしたね。

# チャレンジ開始前
## 問題について
以下の画像の「__Download challenge__」に問題ファイルのリンクがあります。
アーカイブファイルで圧縮されているので仮想環境で解凍してください。
※ホストで解凍しないでください。本物のマルウェアが入ってたりします。

この解

Reactでシンプルなタイマーアプリを作りながら学ぶChrome拡張機能開発入門

## はじめに
現在、プログラミングスクールRUNTEQで未経験からWebエンジニア転職を目指して学習中のyushiと申します。
絶賛Webアプリを個人開発中で、その一貫としてChrome拡張機能を開発しました。
その中で学んだ知見を共有したいと思い、比較的簡単に実装出来るタイマーアプリをChrome拡張機能として実装する流れをハンズオン形式で紹介します。

Chrome拡張機能は割と身近な存在だと思っているのですが、同時になんとなくとっつきづらいという印象を抱いている方も多いのではないでしょうか？
確かにややこしい部分もあり、私も最初はかなり苦労しました。

ですが、Chrome拡張機能はデプロイの必要がなく、小規模な構成から作ることが出来るため、Reactをキャッチアップした後のアウトプットの手段の1つとしてありだなと感じました。
是非一緒に手を動かしながら読んでいただけると嬉しいです！

## Chrome拡張機能の構成
Chrome拡張機能は大きく分けて4つの領域から成り立っています。

**1. マニフェストファイル**
Chrome拡張機能において唯一の必須ファイルです。

kintoneプラグインにAPIトークンを秘匿して、JSカスタマイズから利用する

## はじめに

kintoneには「外部APIの実行に必要な情報をプラグインへ保存する」という機能があります。これを使うとAPIトークンなどセンシティブな情報を秘匿できるので、`kintone.plugin.app.proxy()`で比較的安全[^1]に外部APIを叩くことができます。

https://cybozu.dev/ja/kintone/docs/js-api/plugins/set-config-for-proxy/

[^1]: あくまで「比較的」です。`kintone.plugin.app.proxy()`を実行するコードはデバッグコンソールから確認できるので、そのコードをそのまんま叩けば、APIトークンを使ったリクエストを好きなタイミングで投げることはできちゃうので。APIトークンそのものは見えませんが過信は禁物です。

しかしこれ、何故プラグイン限定なのでしょう。JSカスタマイズ内で`kintone.proxy()`を使うときだって、APIトークンは秘匿したいじゃないですか。でも出来ないんですよ！[^2]

[^2]: プラグインには「アプリ管理者しか閲覧できない

new Dateに入れる引数による挙動の違い

Date型に入れる引数でちょっとつまづいたので、メモ。引数の形を変えると、出力される値も変わります。

“`js
console.log(new Date(`2020/7/7 00:00:00`));
// Tue Jul 07 2020 00:00:00 GMT+0900 (日本標準時)
console.log(new Date(2020, 7, 7, 0, 0, 0, 0));
// Fri Aug 07 2020 00:00:00 GMT+0900 (日本標準時)
console.log(new Date(`2012-10-12`));
// Fri Oct 12 2012 09:00:00 GMT+0900 (日本標準時)
“`
2つ目の指定の仕方は月が0から始まります。なので、7月を指定したければ、
3つ目は下記サイトで紹介されているように時間の指定が、9時になっています。
間違えないようにセットするには、1つ目の指定にするのが良さそうです。

#### 参考
https://qiita.com/t-yama-3/items/29bd686f2a8b3cb9e784

JqueryでRedmineの「チケットページ」をもっと便利に(年ごと、月ごと、四半期ごとの集計機能の開発)

## JqueryでRedmineの「チケットページ」をもっと便利に(年ごと、月ごと、四半期ごとの集計機能の開発)

[Redmine Advent Calendar 2023](https://adventar.org/calendars/8974)の16日目の記事として作成しました。

* * *
### 既存のRedmineで不便なこと、改善したい点

Redmineのチケットページでは、強力なフィルタリングとグルーピング機能が提供されていて、その機能を活用することで、必要な情報を必要な出力結果として取得することができます。
グルーピング機能は同じグループごとに、そのグループに属しているチケットの件数と、そのグループのタイトル部分で開閉ができるので、不要なグループは閉じることによって、必要なチケットだけを表示でき、可読性の向上に寄与しています。
下図の例のように、「トラッカー」でグルーピングをして、グルーピングのタイトルであるトラッカー名ごとに表示、非表示をタイトルをクリックすることで可能になります。

各種言語のBase64文字列の取り扱い

# はじめに
各種システムとのデータ連携にあたってBase64文字列を用いるシーンが偶にあり、各言語でどういった実装をするのかを毎回悩むため整理してみました。（※サンプルコードはdockerにて動作確認済み）

# 各言語の実装

## 1.PHP

“`php:main.php

“`

“`shell
$ docker run –rm -v “$PW

[JavaScript] ImageBitmap について

JavaScript の Canvas で画像を扱うとき、`ImageBitmap` にすることで描画の遅延を減らすことができます。

ただし、`ImageBitmap` はメモリ消費が大きい場合があるため、注意が必要です (※具体的な扱い方は後述) 。

`ImageData` は CORS によって取得できないことがありますが、`ImageBitmap` は取得できます。

参考「[ImageBitmap – Web API | MDN](https://developer.mozilla.org/ja/docs/Web/API/ImageBitmap)」
参考「[OffscreenCanvas: transferToImageBitmap() method – Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas/transferToImageBitmap)」

# 1. 生成

## 1.1. `createImageBitmap()` 関数

一般的な画像ソースから `

JavaScriptで配列の最後の要素を取得するにはatメソッドがいい

JavaScriptで配列の最後の要素を取得する方法はいろいろありますが、一番いい方法はどれでしょうか？
書きやすさや可読性の観点から比較したいと思います。

今回やりたいことは配列の最後の要素を取得したいだけで、配列に変更は加えません。そのため [popメソッド](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/pop) は使用できません。

## 1. atメソッド（推奨）
先に結論を言うと `atメソッド` がいいです。

“`js
const colors = [“red”, “green”, “blue”];

const last = colors.at(-1);

console.log(last);
// “blue”
“`

Pythonなどでは負の数で後ろからアクセスできますが、JavaScriptではPythonのようにブランケット記法で負の数は扱えません。

“`js
const colors = [“red”, “green”, “b

ラズベリーパイでPlaywrightを使い検索のスクリーンショットを取りまくった話

ラズベリーパイだとPlayWrite対応してなさそうだったけど色々やったら動いた

https://github.com/microsoft/playwright/issues/4984

## やり方

### chromiumのインストール

https://raspida.com/install-chromium

“`
$ sudo apt install chromium
$ which chromium
/usr/bin/chromium
“`

後でNode.jsのコードにいれます。

## Node.js側コード

“`json
{
“name”: “piapp”,
“version”: “1.0.0”,
“description”: “ラズベリーパイに利用するアプリケーション”,
“main”: “index.js”,
“scripts”: {
“start”: “NODE_ENV=production forever start -vc ts-node src/index.ts”,
“stop”: “NODE_E

セクションと見出しを可視化するブックマークレット

## このブックマークレットについて

このブックマークレットは、ウェブページの見出し（`h1`から`h6`）、`hgroup`タグ、およびセクショニングコンテンツ（`article`、`section`、`aside`、`nav`）を可視化します。各要素は異なる色でボーダーとラベルが表示され、ページの構造を容易に理解するのに役立ちます。

## ソースコード

“`javascript
javascript: (() => {
const headings = [“h1”, “h2”, “h3”, “h4”, “h5”, “h6”];
const sectioningContents = [“article”, “section”, “aside”, “nav”];
const hgroups = [“hgroup”];
const applyStyles = (el, tag, color) => {
el.style.border = `2px solid ${color}`;
el.style.position = “relative”;