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

【Java】パスワード変更を遷移なしでやろうとした話【Ajax】

備忘録としての投稿です
記事にしておきながらなんですが、人に見せることは目的をしておりません。
ですが、見かけた方が内容についていろいろとツッコミを入れてくださると嬉しいです。

【自分について】
となるITベンチャー企業に入社し、日々勉強中です。
主にJavaを勉強しています。

## 事の発端
現在、Javaの動的WEBプロジェクトで簡単な従業員管理サイトのようなシステムを作っている。
管理者のパスワード変更機能を付けたいと思ったのですが、変更のためだけに別でページを作るのもなーなんて思い、モーダルウィンドウでパスワード変更画面を出し、ページ遷移することなく変更処理ができたら良いよねと思う。

## 画面遷移なく Servlet の処理を実行することは可能か？
パスワード変更機能の追加で一番実現させたかったのは、画面遷移なくパスワード変更の処理を実行すること

このシステムでは、基本的には JSP で画面表示、Servlet で内部処理を行っている。
（基本そうかもしれませんが、、）
JSP → Servlet → JSP のやり取りは Servlet の URLマッピング で s

propsで受け取った画像情報が表示できない

## 初めに
今回ReactをUdemyで学習していて、propsのオブジェクト受け取って、画像を表示することを実装しました。
ですが凡ミスによって画像表示ができなかったので、今後気をつけるためにも記事に残します！

##失敗コード
“`react

mail

{user.email}

TEL

{user.phone}

会社名

{user.company.name}

WEBサイト

{user.website}

“`
このコードではmail、TEL、会社名、WEBサイトはpropsからデータを受け取って表示できますが、画像情報が表示されません。

## 解決策
“`react

/packer/でBase62エンコードしたJavaScriptコードをデコードするツール

[/packer/](http://dean.edwards.name/packer/)でBase62エンコードしたJavaScriptコードをデコード(復号)するツールです。

※ これは2016-04-19に個人ブログで公開した記事を移植したものです。

## デコードツール

`eval(function(p,a,c,k,e,r){e=function(c){return(` で始まるコードをコピペしてDecodeボタンを押してください。すべてブラウザで処理され、サーバーには送信されませんのでご安心ください。

2重、3重にエンコードされている場合もあります。その場合は数回Decodeボタンを押してください。

https://codesandbox.io/embed/frosty-mendel-x0uv0j?&theme=light&view=preview

デコードされたコードをわかりやすく見たい場合は[Online JavaScript beautifier](http://jsbeautifier.org/)のようなツールをご使用下さい。

## デコードコード

次

1行で発狂するコード

## 人は1行の記述で死ぬこともある

公開からコンスタントに閲覧をいただいている以下の記事。需要がありそうなので、もう1つ記事を書いてみようと思う。

https://qiita.com/jaque/items/a82929709407d5c3beb2

題材は前回同様のJavaScriptのクソコードではあるが、前回は冗長を極めたクソコードであるのに対し、今回はたった1行である。

1行なのに、なんと示唆深い(決してほめていない)コードだろうか。

## 不可思議なコード

では、実際に見てみよう。

“`javascript
return a = a >= 10 ? 10 : a >= 5 ? 5 : a >= 3 ? 3 : a >= 2 ? 2 : 1, z * a;
“`

これを見て、何が `return` で返されるかわかります？

### 代入演算子

最初見たとき、代入文 `a = ×××` の評価値って何になるのかな？ `a` が `return` されるのかなと思いました。

https://developer.mozilla.org/ja/docs/Web

【JavaScript】Rythm.jsで音に合わせて画像を躍らせてみた

# はじめに

こんにちは、エンジニアのkeitaMaxです。

今回は、Rythm.jsというJavaScriptのライブラリを使ってみようと思います。

公式サイトは以下のURLです。

https://okazari.github.io/Rythm.js/

# 音に合わせて画像を躍らせてみる

CDNがあるので、それをheadタグ内に入れます。

“`html






“`

躍らせたい画像をどこからか持ってきて、htmlのbodyを以下のようにします。
“`html

ReactのuseContextを使いこなす

## はじめに
Reactのコンポーネント間で値を受け渡すには、`props`を使って親から子へ渡すしかないと思っていましたが、実はそれ以外にもあるということを知りました。

その１つが今回紹介する`useContext`です。

`props`との違いはなにか、どのようなことができるのかを、基礎から確認していきます。

## useContextとは
`useContext`はコンポーネント間で`props`を介さずに値を受け渡すことができるReactフックです。
`props`の代わりにコンテクストと呼ばれるものを使用して値の受け渡しを行います。

### propsの問題点
`useContext`の詳細について確認する前に、`props`を使うと問題がある場合について確認します。

以下のようなアプリについて考えてみます。

JavaScript

初心者

React

react-hooks

元記事を表示

14.仮想通貨自動売買プログラムを作る(1) | TypeScript入門講座

https://youtu.be/geYY9OJ7lH0?si=mNcJs21_bELxO6rW

TypeScript入門講座

https://youtube.com/playlist?list=PLkQpCfbvj0lylBox7BYe3qqOVDJgEM005&si=xA_sRZLs-MoXPchl

【JavaScript】Knipを使用して不要なコードや依存関係を見つける

## Knipとは

Knipを使用すると未使用のファイルや依存関係、`export`などを検出できます。

https://knip.dev/

## 使い方

### インストール

以下の手順でインストールできます。

“`shell
yarn add -D knip typescript @types/node
“`
:::note info
`typescript`, `@types/node`はすでにインストールされていれば不要です。
:::

:::note warn
Yarnを使用してインストールした際に問題が発生した場合は[Yarnでインストールした際のエラーの対処法](#yarnでインストールした際のエラーの対処法)もご確認ください。
:::

`package.json`の`scripts`に`knip`を追加します。

“`json:package.json
{

“scripts”: {
“knip”: “knip”
},

}
“`

以下のように実行できます。

“`terminal
yarn knip
“`

実行すると使

try-catch のfinallyっていつ使うねん、ていう話

# はじめに

例外処理を実装するにあたって欠かせないのが`try-catch`文です。これを使うことで、ランタイムエラーが発生しても処理を継続できたりするわけです。

ところで`try-catch`文では`finally`というものを使うこともできます。これは`try`ブロックの中が正常に完了しても、`catch`に進んだとしても、最後に実行される処理を書く場所です。

“`tsx
try {
// 何らかの処理
console.log(‘tryで実行’);
} catch {
// エラー次の処理
console.log(‘catchで実行’);
} finally {
// 最後に必ず行う処理
console.log(‘最後に必ず実行’);
}
“`

ところで、わざわざ`finally`って使う必要ありますか？

`try`完了後（あるいは`catch`完了後）に何かの処理を実行させたいなら、以下のように書けばいいはずです。

“`tsx
try {
// 何らかの処理
console.log(‘tryで実行’);
} catch {
// エラー次の処

viteのdefineConfigにプラグイン（GoogleTagManagerを差し込むやつ）を追加してみる

## GoogleTagManager を入れるためだけに、サードライブラリをインストールするのめんどい
てなわけで、Viteを使ってサイトを構築してるときにアクセス数とかの管理のために、GoogleTagManagerをhtmlに記述するってよくあるよね（多分

ベースのindex.htmlに直接書いてもいいんだけど、出来れば本番環境にのみタグを入れたいとかもあるはず。
そんなときにタグを入れるだけのライブラリとかも合ったりしてソレを入れればいいじゃんって感じですが、どうせなら勉強がてらに作ってみればいいじゃんということで作ってみた。

## やりたいこと
– 本番環境にGoogleTagManagerをいれる
– 開発・検証環境はrobotsのnoindexをいれる

“`html:index.html

JavaScript でIF文付きのリスト内包表記を書く

Python で書いていたIF文付きのリスト内包表記を JavaScript で実現するにはどうすればいいのかというのを毎年のようにググっているのでメモを残しておきます。

ちなみに JavaScript での書き方については Qiita の以下の記事が大変参考になります。(毎回ググって読んでいます)
https://qiita.com/yukiB/items/87ab3f313a75b547c278

“`python: Python
[x * 100 for x in range(10) if x % 2 == 0]
“`
“`javascript: JavaScript で書いた同等の処理
[…Array(10).keys()].filter(x => x % 2 == 0).map(x => x * 100)
“`

JavaScript の場合は Python に比べてリスト内包表記がそもそも冗長なのに加えて、IF文の代わりに filter を挟まなければならないので長いですが、それでも普通に同様の処理を書くよりは簡潔に書けるので使い道はあるかなと思います。

[GAS]Gmailの検索、本文の取得

# 検索、本文を取得する方法

1. `GmailApp.search()`：Gmailの検索。スレッドの配列が返される。
1. `.map()`：配列を展開してスレッドを取得する。
1. `.getMessages()`：メッセージを取得する。スレッド内のメッセージの配列が返される。
1. `.map()`：配列を展開して（スレッド内の個々の）メッセージを取得する。
1. `.getPlainBody()`：本文を取得する。文字列が返される。

“`js
//Gmail内を検索。Gmailスレッドの配列が返される。
let all_threads = GmailApp.search(‘from:(***@****) subject:(*********)’);

//スレッドの配列から個々のメッセージのオブジェクトを取り出す。
let messages = all_threads.map((thread) => {
let messages = thread.getMessages();

let each_message = messages.ma

JavaScript の非同期処理は難しい

年末に社内向けには共有していた話ではあるのですが、公開記事として記録を残しておきます。

とあるシステムにて、map の中のループの中でやっている3種類のボタンクリック処理を順番に実行してほしかっただけなのですが、なかなか思い通りに動かなかったのでメモを残しておきます。

– Promise チェーンはチェーンの内部でしか実行順番が保証されない。チェーンの上部で非同期のループを回してしまうと、複数の Promise チェーンが並列実行されることになる。
– Promise.all は全部の処理が終わっていることは確認してくれるが、内部の処理が順番に実行されるとは限らない。
– 普通の for の中で await を書くのが簡単。

このあたりの詳細については以下の記事が分かりやすいのでお勧めです。
https://zenn.dev/sora_kumo/articles/612ca66c68ff52

今すぐに理解できなくとも、非同期処理の問題だと知っていれば、問題解決までの時間が短縮されるので、まずは知っていることが重要かと思います。

langchainでChatGPT APIの使用トークン(llmOutput)が返ってこない

# つまった問題
langchain.jsでChatGPTAPIを利用したチャットボットを作る際に、トークンをかぞえたかったので以下のようにコールバックを設定していた。

“`js
import { OpenAI } from “@langchain/openai”;

let totalCompletionTokens = 0;
let totalPromptTokens = 0;
let totalTokens = 0;

const model = new OpenAI({
openAIApiKey: process.env.OPEN_AI_API_KEY,
modelName: “gpt-3.5-turbo”,
callbacks: [
{
handleLLMEnd(output) {
console.log(JSON.stringify(output, null, 2));
totalCompletionToken

[日本語訳] GitHub Codespacesを使ってブラウザでStripeサンプルをテストする

:::note
この記事は、[dev.to](https://dev.to/stripe)に公開されている英語記事の日本語訳です。

元記事: [Testing Stripe samples in your browser with GitHub Codespaces](https://dev.to/stripe/testing-stripe-samples-in-your-browser-with-github-codespaces-1bh8)
:::

現代では、ブラウザー上でアプリケーションを開発し、テストすることができるようになりました。クラウドベースの開発環境を瞬時に立ち上げて、ローカル環境の設定なしにブラウザで動作させることが可能です。動作が開始されれば、数回のクリックで他の人とアプリケーションを共有することもできます。コンテナ技術を利用することで、アプリケーションのセットアップが迅速かつ容易になります。つまり、開発環境のセットアップを行う必要がなく、URLを共有するだけで簡単にアプリケーションを他人と共有できるということです。

コミュニティの熱心な努力のおかげで、St

カードを自然な感じで重ねる判定条件を考える

# 背景
HTML5のCanvasとJavascriptを使って、スパイダーソリティア（ゲーム）を開発をしています。

# 問題点
掴んだカードを他のカードの上に移動させる場合、移動先のカードを判定する必要があります。

マウスポインタの座標を基準に判定すると、マウスポインタが移動先のカードの上にのっている必要がある為、カードの画像は重なっていても、移動先として判定されないケースがあります。

# 解決策
カードを掴んでいる状態では、ユーザーはマウスポインタではなく、表示されているカードの位置を基準にしていると考えられます。

そこで、判定基準をマウスポインタ座標からカードの重心（中心）に変更することで、ユーザーの認知に近い自然な判定条件を目指します。

# カードの重心を計算する
カードの重心を計算する実装はシンプルです。

マウスポインタ座標(x, y)からカードを掴んだときの左上からのズレ量(offset_x, offset_y)を引くことで、今表示しているカードの左上座標が求まります。

この左上座標にカード幅の半分、カード高さの半分を足すと、カードの重心になります。

“`

JavaScriptのJSONでDateを扱う

# 困ったこと
さて、困りました。
`JavaScript`でデータを保存しようとしたらDate型がデータに入っていると
そのままパースできませんでした。
つまり、
“`javascript
let saveData = {
loginDate: new Date(),
name: “taro”,
};

let json = JSON.stringify(saveData);

// データを取り出したい
let parsedData = JSON.parse(json);
// loginDateが何日か知りたい
console.log(parsedData.loginDate.getDate());
“`
これで最後のconsole.logでloginDateが何日かを知ることができる！と思ったら実際には
“`shell
Error: parsedData.loginDate.getDate is not a function
“`
というエラーが…
今回はこれを解決したいです。

# 解決方法
JSON.parseの第2引数(reviver)を利用してパース

続・麻雀大会の点数管理とマッチングを自動化するDiscordBotを作成した

こんにちは。
以前、身内向けに麻雀大会支援ツールとしてDiscordBotを作成したのですが、新たにいくつか試したいアイデアが生まれたので改修をしてみました。

↓以前の記事↓

https://qiita.com/rm1124/items/b06743dede316cafcf28

※本記事にコードの大部分は記載しております。経緯等が気になる方は以前の記事をご覧ください。

## 環境
* Discord.js v13.17.1
* GoogleAppsScript

## 改修内容
今回は新たな機能として、**集計の自動化** を行いたいと考えました。
前回は実装のイメージが付かなかったため実現しませんでしたが、今回イメージ感が掴めたことにより実装に至りました。

前提として参加者自身に点数入力をしてもらう方法を取るため、「わかりやすさ」を重視する必要がありました。具体的な方法は以下になります。

:::note
1. botからのメッセージに結果報告用のボタンを追加
2. ボタンが押下されたらウィンドウを生成し、フォームに入力してもらう
3. 送信ボタンで送信
:::

テキス

JavaScriptの理解を深める

# JavaScriptとは

* クロスプラットフォームで動作するオブジェクト指向のスクリプト言語
* プロトタイプベースのオブジェクトモデル
* インタープリター型、あるいは実行時コンパイルされる、第一級関数のプログラミング

https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Introduction

## クロスプラットフォームで動作するオブジェクト指向のスクリプト言語

### クロスプラットフォーム
iOS,Andriod,Windows,macOSなど異なるプラットフォーム上で同じ仕様のアプリケーションを動かせるプログラムのこと

### オブジェクト指向
処理を部品化して、部品を組み合わせることで１つのプログラムを作る考え方

https://unison-career.com/engineer-media/6250/

### スクリプト言語
プログラミング言語のうち、比較的容易に記述や実行ができるもの（厳密な定義は存在しない）

https://www.akkodis.co.jp/candid