JavaScript関連のことを調べてみた2023年03月07日

初めてのReact

# はじめに
JavaScriptの基礎がある程度身についたので、念願のReactに簡単なTodoアプリを作ることで触れてみました。
学習教材として、YouTubeで見つけた動画を選び、ハンズオンでアプリを作成しました。
所要時間：３時間弱

## スキルの自己評価
まだ駆け出せてもいない、エンジニアでもない人間です。
Udemyで「Web Developer Bootcamp 2021（日本語版）」を学び終え、JavaScriptの基礎の基礎がわかってきたかな、くらいです。
次のステップとしては、Reactの基礎を学んでいく中で自己解決能力（リサーチ力）を上げていきたいと思っています。

https://www.udemy.com/course/the-web-developer-bootcamp-2021-japan/

# この教材を通して、自分がつまずいた部分
### ターミナルからプロジェクトのVScodeを開く
“`React:ターミナル
$ code .
“`
これで開けない場

Vue3のStore（Pinia）のリアクティブ(reactive)の動きを確認してみた

## はじめに

リアクティブに関してのPinia Storeの動きが、Vue3のComposition APIの中でどうなるのか？Options APIの時はどう実装すべきか？混乱してしまい、良く分からなくなってしまったので、自身の整理メモとして備忘録を残しておこうと思う。

試したパターンは以下。

– storeのstateは**プリミティブな値**
– Piniaを Composition API で実装
– コンポーネント側もComposition API
– 番外編　コンポーネント側はOptions API
– Piniaを Options API で実装
– コンポーネント側もOptions API
– 番外編　コンポーネント側はComposition API
– storeのstateは**オブジェクト**
– Piniaを Composition API で実装
– コンポーネント側もComposition API
– 番外編　コンポーネント側はOptions API
– Piniaを Options

【decodeJWT(無料)】JWT decode API【JSON Web Tokens decoder】

# Usage( 文法 )
“`bash
toekn=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c
curl https://jwt.deno.dev/$token
“`

# Example( 実行例 )

## ウラル?( URL )
[https://jwt.deno.dev/eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c](https://jwt.deno.dev/eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIi

PlayCanvasでBasis圧縮を利用した場合のファイルサイズについてまとめてみました。

Web上で3Dモデルを扱う場合、ファイルの転送量やVRAMの消費量を調整する必要があります。png/WebP形式でBasis圧縮を使用した場合、それぞれの比較してみました。

### 検証用のシーン / プロジェクトについて

検証に利用したシーンはこちらとなっております。

URL: （※ 編集にはPlayCanvasアカウントが必要です）
実行URL:

上記のURLには、このようなシーンが表示されます。

モデルやテクスチャについては、かなﾘぁさんちの「ハオラン」を利用させていただいています。

#### 準備: Play

ガントチャート（JSライブラリ： jquery.ganttView）をカスタマイズしてみた（いろんな形状（星・矢印・丸）でスケジュール管理）

# はじめに

今となっては古のJSライブラリ

https://github.com/thegrubbsian/jquery.ganttView

上記ライブラリのスケジュール管理オブジェクトを、いろんな形状で置いてみたので、勘所をメモ書きしておきます。

ニッチな内容だけど、誰かの参考になれば幸いです。

全然、こんなニッチな物、誰も読まないだろうと思ってメモ書きしたら、意外に閲覧数があったので、第２弾です。（根強い人気があるんですかね？）

https://qiita.com/Syoji_Yonemoto/items/f3dc7587aa50b3c523d7

ソースコードは、前回のカスタマイズ（上記）の反映した上での改修となっています。

# 色んな形状って？


上記のような、丸、星、シャフトのついた矢印など、様々な図形で

2次元図形の回転~JavaScript~

# 図形の回転に必要な知識
オブジェクトを回転させるには**回転行列**という線形代数の知識が必要です。線形代数を習っていな人でも分かりやすく説明するので、是非読んでください。
回転行列は以下の式で表せます。
“`math
R(θ)=
\begin{pmatrix}
\cosθ & -\sinθ \\
\sinθ & \cosθ
\end{pmatrix}
“`
>原点中心のθ回転 反時計回りを正とする
>
大学1年生だった当時、回転行列を初めてみたとき何がどうやらと分かりませんでした。線形空間を講義で習っており、「線形従属・線形独立何それ美味しいの？?」っていう状態でしたけど今はちゃんと理解してるので今苦しんでいる人もなんとかなります！
[ヨビノリの動画](https://www.youtube.com/watch?v=F0mkAiRiLik)やマセマの線形代数の参考書読めばある程度わかります！
![線形代数.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2153036/293d57f9-308

【jQuery / JavaScript】今日の日付（0埋め）

# 本日の日付を取得します
“`js
$(function(){
let date = new Date();
let year = date.getFullYear();
let monthRow = date.getMonth() + 1;
let month = (‘0’+monthRow).slice(-2)
let day = (‘0’+date.getDate()).slice(-2);
let today = year+’-‘+month+’-‘+day;
$(‘セレクタ’).val(today);
});
“`

今開いてるページから迂闊に移動したくないときに使えるブックマークレットを作った

# はじめに
皆さん「このページ本当によく開くから、全く遷移せず常にこのページを表示し続けたいのに
気がついたら他のページ遷移させちゃってた・・。」
みたいなことありませんか？

特に、ただブックマーク開き直せばなんとかなるようなページではなく
開いた後さらに条件を選んだりなんだりポチポチする必要があるサイトだと最悪です。
面倒の極みです。

これを繰り返して幾度。
うんざりしたので、そもそも気軽に別画面に遷移しないようにしました。

# 使うとこうなるよーというお話
## 使う前
何の変哲もないYahoo! Japanのページです。
　

気になるニュースがあったので、ついポチッと押せばそのまま遷移しちゃいます。
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazon

TypeScript fetch 関数で通信リクエストする

# 概要

fetch は通信リクエストする関数。結果は Promise で扱える。
モダンブラウザはすべて対応している。
Node.js 18 では Experimental（CLIでの無効化フラグが存在する、利用時にメッセージはない）となっている。

## 公式ドキュメント

https://developer.mozilla.org/en-US/docs/Web/API/fetch
https://nodejs.org/dist/latest-v18.x/docs/api/globals.html#fetch

# コード例

“`js
interface FetchRequest {
url: string
options: object
}

async function fetchAsync (request: FetchRequest): Promise {
return await fetch(request.url, request.options)
.then(async (response) => {
if (!r

【Rails】Chart.jsで１週間の投稿数をグラフ表示する

# 完成形
過去１週間で投稿された本をグラフにしてみます！

# chart.jsをインストール
### 環境
* Ruby 3.1.2
* Rails 6.1.7
* yarn 1.22.19

### 手順
“`
$ yarn add chart.js
“`
Yarnでchart.jsをインストールします。

“`app/javascript/packs/application.js
import Chart from “chart.js/auto”;
global.Chart = Chart;
“`
application.jsに記述を追加し、インポートします。

## グラフを表示
ここからは実際にグラフを表示していきます！

### １週間に投稿された本の数を取得
今回はユーザーの詳細画面でグラフを表示するので、showアクシ

クリックされた点に重なっている要素をすべて取得する

## やりたいこと

任意の点をクリックしたとき、重なっている要素すべてを取得したい。
( 例えば **x** をクリックした場合は A, B, D を取得)

それぞれの要素は `position: absolute` などで位置が指定されており、親子関係にない。
そのためイベントのバブリングでは実現できない、というケース。

## document.elementsFromPoint

こういう場合は `document.elementsFromPoint` を使うと楽に取得できる。

https://developer.mozilla.org/ja/docs/Web/API/Document/elementsFromPoint

MDNによると「実験的な機能」らしいので、不安ならポリフィルを導入してもよいと思う。

https://gi

LangChain JSでChatGPT APIを試す

今大流行中で先日APIも発表されたChatGPTをLangChainを使って試そうと思います。
「LangChain」は、「LLM」 (Large language models) と連携するアプリの開発を支援するライブラリです。
詳しくはnpakaさんという人の記事がとてもわかりやすかったので調べてみてください。

https://note.com/npaka/n/n61ad59380a43

LangChainは現在、PythonとJS/TSライブラリが存在するのですが、今回はJS/TSの方を使ってみようと思います。

## 準備
### OpenAIのAPIKEYの取得
今回はChatGPTのAPIを使うのでOpenAIのAPI KEYを発行します
OpenAIにログインして右上メニューから **View APIKeys** → **Create new secret key** から発行してください

#### 環境変数ファイルにAPI KEYを記述
“`:.env
OPEN_AI_API_KEY=*****
“`

### インストール
#### typescript関連

【JavaScript】チャートの指標を動的に切り替える【chart.js】

## はじめに
`chart.js` 便利ですよね。
JSのライブラリ全体でもトップクラスにGitHubのスター数が多く、2023/03/05現在でも最終更新が2日前にされているなどだいぶ活発なライブラリなので、JSを触っていて使ったことがある方も少なくないかと思います。

たとえば、月別の売上データみたいなものをチャートで表現するというタスクがあったとします。
なおかつ、それを（デザイン等の都合で）1つのチャートで何かしらのアクションによって動的に切り替えたいという要件が有り得るかと思います。 ~~（私はあった）~~

そんな実装を過去に行ったことがあったので、今回はそちらを紹介 ~~もとい過去の遺産を公開~~ したいと思います。
とりあえず、chart.jsについて…みたいなのは省略。

## いったんコードを貼ってみる

台風通過前後の風雨の様子を地図とグラフで整理する

## はじめに

過去の台風上陸前後に、どのくらい雨や風が強かったのか気になりました。そこで、特定の都市において、台風通過・上陸前後の風雨の様子を一覧できるようなウェブサイトを作成してみました。

:::note alert
注意：データ等は精査しておりませんので、間違いが含まれるかもしれません。**ご利用の際は自己責任で**お願いいたします（当方は責任は負いません）。
:::

とりあえず、以下の３つの台風を作成しています。

* [令和元年台風第19号](https://mghs15.github.io/typhoonSummary/?data=2019T19&style=mono2)@東京
* [令和２年台風第10号](https://mghs15.github.io/typhoonSummary/?data=2020T10&style=mono2)@鹿児島
* [令和４年台風第14号](https://mghs15.github.io/typhoonSummary/?data=2022T14&style=mono2)@鹿児島

※令和元年台風第19号@東京の例
![Screen

sliceメソッドのイメージ

めちゃくちゃ小ネタです。

sliceメソッドの引数が一瞬わからなくなることがまれによく（？）あったのですが、自分の中で覚えやすかった方法のメモ。

sliceメソッドとは

文字列や配列に対して使用し、所定の位置でそれらを切り抜くメソッド。

例えば以下のように使う。

“`javascript: test.js
const str = “小ネタ記事です”
const result1 = str.slice(3);
const result2 = str.slice(3,5);

// 結果
// result1 : 記事です
// result2 : 記事
“`

個人的な混乱ポイント

個人的には２つの引数を取るときが若干わかりづらいときがある。

例えばresult1の方は割とわかりやすくて、この文字列を先頭からインデックス番号０を順に振っていくとして、「記」がインデックス番号３になるので、それ以降を切り取るイメージで良い。

しかし、２つの引数を取るときは、第二

Summernoteをビルドする

### ビルドする
– 以下の手順でビルドする。
“`bash
wget https://github.com/summernote/summernote-webpack-example/archive/refs/heads/master.zip
unzip master.zip
mv summernote-webpack-example-master/ summernote/
cd summernote
yarn install
npx webpack –config webpack.config.dev.js –mode development
“`

– もし、このようなエラーが出力される場合は、
“`bash
$ npx webpack –config webpack.config.dev.js –mode development
You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on ht

写真からテキストを取得し、スプレッドシート等にまとめる方法

# はじめに
写真からテキストを抽出し、スプレッドシートへまとめる方法について、実例に沿って解説します。
今回の事例のほかにも、医療系事務で紙資料をエクセルにまとめていくといったことにも使えるかもしれません。
既出やん・・・kintoneでもええやん・・・と思われるかもしれませんが、１つのやり方として参考にしていただければと思います。

# 目次
[1. 問題の背景](#1-問題の背景)
[2. 写真からSpreadSheetまでの流れ](#2-写真からspreadsheetまでの流れ)
[3. SpreadSheet上での処理](#3-spreadsheet上での処理)
[4. Google Apps Scriptの機能を使う場合](#4-google-apps-scriptの機能を使う場合)
[5. SpreadSheetの関数だけを使う場合](#5-spreadsheetの関数だけを使う場合)
[6. 完成](#6-完成)
[7. 最後に](#7-最後に)
# 1. 問題の背景
とある企業の採用へのエントリーした時、困ったことが起きました。
それは「履修履歴データベース」を使っ

SvelteでRxJSのSubjectをSvelte Storetとして使えるパッケージをリリース

はいさい！オースティンやいびーん！

この前、SvelteでRxJSを使う方法を紹介しました。

https://qiita.com/tronicboy/items/5324e8a108177c9728fb

そこで説明したように、RxJSのSubjectに`.set`もメソッドを追加する必要があります。

その`.set`を追加した`Subject`, `BehaviorSubject`, そして`ReplaySubject`を`SvelteSubject*`と名付けてnpmパッケージとしてリリースしておきました。

https://www.npmjs.com/package/@tronicboy/svelte-rxjs-subjects

RxJSとSvelte、一緒に使ってみてください！

これらのSvelteSubjectでユーザー入力をバインドできるので、とても楽しいです！

Clipboard APIについて(JavaScript)

この記事では、JavaScriptのClipborad APIを使って、クリップボードにテキストをコピーする方法と、その周辺についてまとめています。
主なターゲットとして
– ボタンを押したらテキストをコピーできる機能を作りたい人
– `document.execCommand()`（後述）を使っている人

を想定しています。

# 「ボタンを押す→テキストをコピー」
[Atcoder](https://atcoder.jp)などの競プロサイトや、Qiitaなどの技術記事投稿サイトでよく見られる機能です。
**Copy** ボタンを押すことで、入力例やコードをクリップボードにコピーしています。

これを実現する方法はいくつか存在しています。

## Atcoder
AtcoderではCommandline APIに用意されている`copy()`関数を利用しています。
“`javascript
if (document.queryCommandSupported(‘copy’) && (typeof PRINT === ‘undefined’)) {
…
}
$(‘.btn-c

Slack 特定のメッセージにユーザーが自動リアクションする機能をGASで実装する

# はじめに
こんにちは！
相変わらずGASに魂を売っている @Keichan_15 です！笑
(おそらくボチボチ沈静化していく気がしています…:frowning2:)

最近とある思い付きで、Slackのあるチャンネル内で特定のメッセージが投稿された際に、GASを使用して自動でリアクションしてみたいな～と思うことがありました。
リアクションされると皆な嬉しい気持ちになりますよね！そうですよね？？:relaxed:

実際に実装した時に中々GASで自動リアクションを行う記事や資料が見当たらなかったので、備忘録含めてまとめていきたいと思います！当方GAS初心者で手探りの状態 & 多くの方々の助けをお借りして作成することができました！ありがとうございます:bow:

# 完成写真

このように「test」と入力した瞬間に、自動