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

最新技術！Freestyleを使ってみた

## Freestyleの紹介
Freestyle.sh San Francisco, CA, USA
https://www.freestyle.sh/
2024年創業のスタートアップ
創業者　Benjamin Swerdlow, Jacob Zwang

Y CombinatorのWebサイトでの紹介文（翻訳）
> 私たちは、JavaScript エンジニア向けの抽象クラウドを構築しています。データベース、メッセージ キュー、ストリーミング インフラストラクチャ、認証などを、開発者が世界クラスのソフトウェアに組み込むことができるオープンソースの JavaScript パッケージに置き換えます。この機能を JavaScript でモジュール化するために、クラウドでホストされる新しい分散ランタイムを開発しました。

Webサイトでの紹介


とい

mekeを使って指定した日付のNASA宇宙写真を送ってくれるLINEbot開発したかったけどしくじった話

野球好きのりまきです。
後半戦はなかなか調子がよさそうと思ったらそうでもないなぁと思ってるちなヤクです⚾

## NASAのAPIが公開されている

makeで何かおもしろいものないかなぁとモジュール見てた。
聞いたことないサービス多いなぁという中、動物アイコンとかかわいいアイコンを調べてたらみつけちゃった！

調べてみたらNASAのAPIが公開されているらしい。

https://api.nasa.gov/

早速登録したらすぐにメール届いた！！
NASAからメールとかテンションあがる！
#タイトルにNASAとか書いてないけど

## 指定した日付の写真を送ってくれるbotを作るぞ！

自分の誕生日の宇宙って気にならないですか？
ちょっと考えたらワクワクしちゃう。
自分の誕生日の宇宙写真見たいがためにbot作ってみようと

JavaScriptでWebサイト作業自動化

## JavaScriptでWebサイトの作業を自動化
Webサイトで行う作業を自動化したかったので、JavaScript（以下、js）で簡単に作ってみました。
備忘録がてら、基本的なことを記録してます。js経験者やプログラミングできる人は比較的楽で簡単に使えるかと思います。
本作業はNode.jsを使用します。
また、当方はwindows11環境になります。

## Node.jsのインストール
以下より、Node.jsのインストーラをダウンロードし、インストールをしてください。
https://nodejs.org/en/download/prebuilt-installer

## プロジェクトフォルダを作成
ソースを格納するフォルダを任意の場所に用意します。例では「AutoJS」というフォルダ名にします。
コマンドで行う場合は、mkdirで作成できます。

## nodeからpuppeteerをインストールする
コマンドプロンプトで先程作成したプロジェクトフォルダ（以下、pjフォルダ）にカレントディレクトリを移動して、以下を入力します。

**npm install puppe

date-fnsをCDN経由で使う方法(とちょっとだけkintoneの日付型について)

# date-fns
date-fnsは日付変換を行うJavaScriptライブラリです。
ぼくはkintoneのカスタマイズでよく使っています。

https://www.npmjs.com/package/date-fns

https://date-fns.org/

いつもの方法は、NPM経由でインストールして、モジュールでimportするのですが、お仕事でどうしてもトランスパイル禁止されてしまって、CDNから使うことになりました。

# やりかた
公式のドキュメントによるとJSDelivrにて提供されているようです。

“`html


“`
3.6.0の部分はバージョンを入れればよろしい。

dateFnsがグローバルプロパテ

Laravel Viteでvueにimport.meta.url経由でクエリパラメータを渡す

## `import.meta.url`
モジュールの場合、`import.meta`オブジェクトを使用して自身のメタ情報にアクセスできる。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/import.meta

そのため、
“`html

“`
このとき、app.js内では`import.meta.url`で自身のURLをクエリパラメータやハッシュ付きで取得することができる。
つまり、
“`js
new URL(import.meta.url).searchParams.get(‘someURLInfo’) // ‘5’;
“`
のようにしてクエリパラメータ経由で値を渡すことができる。

## Laravel Viteでの利用

さて、Laravel Viteでこれを利用しようと思うと、jsの読み込みは
“`php
@vite(‘resources/js/a

wheel イベント を見やすくしてみる – css custom variable を利用した 動的な色の変更アイディア

# 作成サンプル
css custom variable で数値を渡すことができます。

css には calc() という 数値を計算する関数があります。

css には min() max() clamp() という値の範囲を制限する為の関数があります。

つまり、こういうことができます。

See the Pen paizaプログラミング問題をやってみた：Bランク

## はじめに

少し前から自己研鑽のためにLeetCodeという競技プログラミングの問題を解いています。
paiza×Qiita記事投稿キャンペーンを機にpaizaの問題を解いていこうと思い、コードを公開します。

前回はCランクの問題だったので、今回はBランクの問題です。
言語はJavaScript（TypeScriptがなかった…）を選択しています。

Dランクはこちら

https://qiita.com/tkmsk/items/146653302d1b75156238

Cランクはこちら

https://qiita.com/tkmsk/items/d8a1cbf58968db96e7fb

## 3Dプリンタ

“`javascript
process.stdin.resume();
process.stdin.setEncoding(‘utf8’);

var lines = [];
var reader = require(‘readline’).createInterface({
input: process.stdin,
output: process

[mapbox]ExpressionでObjectArrayを参照する

mapboxの[Expressions](https://docs.mapbox.com/style-spec/reference/expressions/)で、
“`
‘paint’: {
‘fill-color’: ‘#ff0’,
‘fill-outline-color’: ‘#ffF’,
‘fill-opacity’: 0.5,
}
“`
の“`’fill-color’“`の部分を、直接“`’#ffF’“`を指定するのではなく、

“`
const fillObjs3 = [{“code”:”1″,”fillCol”:”#f00″},{“code”:”2″,”fillCol”:”#0f0″},{“code”:”3″,”fillCol”:”#00f”}];
“`

の“`fillObjs3[1].fillCol“`に置き換えたいとします。

“`
‘fill-color’: [“to-color”,[“get”,”fillCol”,[“object”,[“at”,1,[“literal”,fillObjs3]]]]],
“`

（Code Pen実装）ぐにゃぐにゃ動く背景

お疲れ様です。

早速CodePen実装のため、Qiita様の該当記事を見に行き、やってみました。
昨日投稿した内容をCodePenを使って、どういう結果になったかを表示してみます。

See the Pen
Untitled by mtzkmy ([paiza]暇を持て余した神々の遊び(じゃんけんの手の出し方 (paizaランク A 相当))

# ドンドン人間離れしていく。。。
`あなたはこれから友人と N 回じゃんけんをします。しかし、あなたは全てを見通す千里眼の持ち主なので、友人がこれから出す N 回のじゃんけんの手が全て分かってしまいました。`

何年もたつのだから もう気が付かなきゃいけない
もう 心に刻まなきゃいけない……！
勝つことがすべてだと……
勝たなきゃゴミ…… 勝たなければ…… 勝たなければ……
勝たなければ………！

https://paiza.jp/works/mondai/a_rank_skillcheck_sample/janken

# 面倒くさいので画面パタメータをListでもらった後のFunctionだけ
ちなみに引数のListを作ってる箇所は[こっちの記事](https://qiita.com/AsilHatake/items/842548e48ae4a0eae119)に書いてあるYO!!

“`javascript:janken.js
// [問題文（原文）]
// あなたはこれから友人と N 回じゃんけんをします。しかし、あなたは全てを見通す千里眼の持ち主なので、友人がこれから出す

【駆け出しVSシニア】あなたは綺麗にかけるか？厳選10問

# はじめに

**これから出題する問題に答えるとあなたが駆け出しorシニアエンジニアかわかります**

こんにちは、Watanabe Jin(@Sicut_study)です。
今回はJavaScriptを用いた駆け出しエンジニアとシニアエンジニアで書き方がはっきり分かれる問題を厳選して10問用意しました。

問題を解くことでおおよそあなたがどのレベルなのかを予想することが可能となっています。
今回は以下の3つのレベルごとに模範解答を用意しています。

– 駆け出しエンジニアレベル
– ジュニアエンジニアレベル
– ミドル〜シニアレベル

この問題を解くことで綺麗にコーディングするためのノウハウを学べることはもちろんのこと、普段利用していない便利な文法を知るきっかけになるかもしれません

まずは答えを見ずに自分で解いてみることをおすすめします！

# 動画での解説

こちらの記事は動画でも解説していますので、丁寧に学びたい方はぜひ活用ください

# 問題の解き方

全部で問題は10問用意

配列を任意の個数で分割した新しい二次元配列を作る（JavaScript）

# 結論

“`javascript

const arr = [1,2,3,4,5,6,7,8,9];
const divideNum = 3;

const result = arr.flatMap((_, i, a) => {
if (i % divideNum === 0) return [a.slice(i, i+divideNum)];
return [];
});

// result = [[1,2,3],[4,5,6],[7,8,9]];
“`

# 仕組み

1. 配列のindexで処理を分岐（配列を分割した二重配列or空配列）
2. flat()により階層を1つ上げる

# おわりに

– flatMap() はmap() + flat()の機能
– flatMapの方が若干パフォーマンスが良い
– 引数はmapと同じ（要素・インデックス・呼び出した配列）

# 別解

※コメントより（@oswe99489 さん）

“`javascript
const arrayDivide = (arr, divideNum) => {
const resu

【jQuery】【JavaScript】evalを活用して文字列を変数にする※globalthis でもできる

# eval
“`javascript

var aaa = 111;
var bbb = 222;
var ccc = 333;
var ddd = 444;

const results = [‘aaa’, ‘bbb’, ‘ccc’];

$.each(results, function(k, v) {
console.log(eval(v));
});

console.log(eval(‘d’+’d’+’d’));
“`

# globalThis
“`javascript

var aaa = 111;
var bbb = 222;
var ccc = 333;
var ddd = 444;

const results = [‘aaa’, ‘bbb’, ‘ccc’];

$.each(results, function(k, v) {
console.log(globalThis[v]);
});

console.log(globalThis[‘d’+’d’+’d’]);
“`

# 結果
“`javascript
111
222
333

[paiza]と～う！！

# 塔とか大砲とかってなんかいいよね
バベルの塔　とか
塔の上のゲフンゲフン（著作権怖い）　とか　
結晶塔の帝王 ENTEI（個人的にはSUIKUN派）　とか
ネオアームストロングサイクロンジェットアームストロング砲（完成度たけーなオイ）　とか

https://paiza.jp/works/mondai/real_event/hanoi

# 面倒くさいので画面パタメータをListでもらった後のFunctionだけ
ちなみに引数のListを作ってる箇所は[こっちの記事](https://qiita.com/AsilHatake/items/842548e48ae4a0eae119)に書いてあるYO!!

“`javascript:hanoi.js
// [問題文（原文）]
// ハノイの塔というパズルがあります。
//
// 3つの杭があり、左から順にA,B,Cの杭とします。
// 杭Aに円盤が下から大きい順に n 個重なって置かれています。
// この円盤は必ず1つ上の円盤は下の円盤より小さくなくてはいけないルールがあります。
//
// このルールを守りながらAの杭からCの

LINEbotとGASで開発！スプレッドシートの内容をFlex MessageでLINEに送信する！

LINEでおすすめの観光地をランダムで3つを送信するアプリケーションをLINE messageing APIとGASを使用して作成した。

そのやり方を共有していく。

完成イメージは以下のようになる。

![IMG_0116[1].PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2971002/b78e0cbb-75ce-1f7c-aeef-7a1f4e508bbf.png)

私は、リッチメニューで「スポット」を押すと、このフレックスメッセージを送信するようにしている。

詳しいフレックスメッセージはLINE公式のドキュメントを見てほしいが私と作成したものと同様のものであればコピペで作成できる。


まず、上のようにスプレッドシート内にデータのリストを作成す

JavaScriptの分かりづらい配列メソッド（slice, splice, copyWithin）を理解する

JavaScriptの配列について学習していたとき、初見では理解できなかったものがあったのでまとめる。

ドキュメント：[MDN Array](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array)
– slice(start?: number, end?: number)
– splice(start: number, deleteCount?: number, Object[]?: insertObject)
– copyWithin(target: number, start: number, end?: number)

## slice
比較的わかりやすいメソッド。部分配列を返すために使用する。
“`js
// slice(start?: number, end?: number)
let array = Array.from(“abcde”);
console.log(array.slice(1, 4)); // b, c, d
console.log(arr

[paiza]山あり谷ありラジバンダリ

# ありおりはべりいまそかり
`最近、ひたすら紙を折り続けるということがマイブームとなっているあなたは、今日もひたすら紙を折り続けています。それも、折り紙のような凝った折り方ではなく、紙の右辺が上から左辺に重なるような二つ折りを、ただひたすら繰り返すだけです。
`

おいおいおい、プログラムのし過ぎで頭おかしくなったんか？
刺し身にたんぽぽ載せる仕事とかに転職したほうがいいんじゃない？
かと不安になる問題文の冒頭。。。

https://paiza.jp/works/mondai/real_event/origami

# 面倒くさいので画面パタメータをListでもらった後のFunctionだけ
ちなみに引数のListを作ってる箇所は[こっちの記事](https://qiita.com/AsilHatake/items/842548e48ae4a0eae119)に書いてあるYO!!

“`javascript:origami.js
// [問題文（原文）]
// 最近、ひたすら紙を折り続けるということがマイブームとなっているあなたは、今日もひたすら紙を折り続けています。それも、折り紙

コーヒーの味を維持したまま量を変える変換器を作成しました

私はコーヒーが大好きで、ほぼ毎日のようにハンドドリップをし、コーヒーを飲んでいます。
その中で、「美味しいレシピはあるんだけど、200mlじゃなくて300ml作りたいんだよな…」ということがしばしばあり、手軽に出来上がり量を調整できるツールがあれば便利だと思ったので、これを行う変換器を作成しました。

最終的なツールはWebアプリとして公開し、[Github上](https://github.com/Hiru-ge/Co-fitting)にもソースコードを公開しています。

https://hiruge-tools.com/

## 基本原理と使用技術

この変換器が行っている変換処理の根幹は、「変換前と変換後の最終量から倍率を求め、各注湯プロセスに倍率をかける」という単純な比率変換です。
そのため複雑な処理を必要とせず、HTML･CSSとJavaScript(jQuery)のみで実現されています。

これらを選定した理由は、コスト面にあります。
HTML･CSSとJavaScriptのみを用いることにすれば、サーバに置くファイルは静的ファイルだけでよくなります。これによってバック

[paiza]本の整理 (paizaランク A 相当)

# なんだかんだでAランクまで来ちゃったよ。。。
最初にSランクの簡単そうなやつを1問解いてから、Dランクで無双がしたいという浅はかな理由で始めて、C・Bと特に面白いことも言えずにダラダラ解いて来たけど、とうとうAランク問題に突入しました。

https://paiza.jp/works/mondai/real_event/book_sort

# 面倒くさいので画面パタメータをListでもらった後のFunctionだけ
ちなみに引数のListを作ってる箇所は[こっちの記事](https://qiita.com/AsilHatake/items/842548e48ae4a0eae119)に書いてあるYO!!

“`javascript:bookSort.js
// [問題文（原文）]
// あなたはパイザ図書館で働く図書館員です。
//
// パイザ図書館には N 冊の蔵書があります。この蔵書はすべて 1 段からなる本棚で管理されています。そして、それぞれの本には 1 から N までの相異なる整数の ID がついています。本棚の本は ID 順に並んでいます。
//
// しかし、

Stripeを使って、クレジットカードとPaidy両方に対応した決済フォームを簡単に実装する方法

複数の決済手段をサポートする場合、決済フォームやフローの組み込みは数に比例して難しくなります。決済手段を選択するUIの構築やロゴ・ボタンの見た目やサイズの調整、選択された決済手段ごとに支払い処理を実行するコードを実装するなど、考慮事項や開発タスクの数は決して少なくありません。そのため「売り上げを増やすために、決済手段を増やす」判断をする場合には、開発スケジュールや保守性といった社内のリソースの捻出が課題になりがちです。

この記事では、決済手段を選択するUIの組み込みを効率化し、決済手段を追加する手間を減らす方法の１つとして、Stripe ElementsとPaidyを利用した「クレジットカード決済と後払い」の両方をサポートする方法を紹介します。

## Stripe Elementsで、クレジットカードとPaidyを選択できるUIを簡単に実装する

Paidyのような、「いま（2024/8）の時点でStripe単独では処理できない決済手段」についても、Stripe Elementsで作成した決済フォームに組み込むことができます。組み込み方はとても簡単で、**ブラウザ側のJavaScr