[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

（JS）ぐにゃぐにゃ動く背景

お疲れ様です。お久しぶりです。

勉強はしていたのですが、なんかコードを書いても、ちらちら見てばかりでちゃんと理解しながら書けていないなーと思い、参考書をちゃんと読み返しておりました。
今日も「1冊ですべて身につく入門講座」様から学んだアニメーションです。

“`diff_css
#move {
background: #0bd;
border-radius: 50%;
padding: 30px 30px;
color: #fff;
text-align: center;
}
“`

“`diff_javascript
const moving = document.querySelector(‘#move’);

const keyframe = {
borderRadius: [
‘50% 20% 70% 30%/30% 60% 20% 50%’,
‘70% 20% 40% 60%/30% 50% 70% 20%’,
‘40% 10% 50% 70%/40% 60% 20% 50%’,
‘60%

【JavaScript】Fizz Buzz (paizaランク C 相当) やってみたのと初学者向けに解説

これのやつです。

https://qiita.com/official-events/9ab96aa95d62fe3cbdd7

プログラミングのスキルアップがしたく、イベントに参加してます。

今回、ランクCの問題のため、初学者向けに説明しています。
参考になりましたら幸いです。

# 自己紹介
エンジニア歴8年くらいのWebエンジニアです。
仕事以外のプログラミング歴を合わせると15年くらいプログラミングをしています。

# 問題
https://paiza.jp/works/mondai/c_rank_skillcheck_sample/fizz-buzz

（問題文抜粋）
> 整数 N が入力として与えられます。
> 1からNまでの整数を1から順に表示してください。
>
> ただし、表示しようとしている数値が、
> ・3の倍数かつ5の倍数のときには、”Fizz Buzz”
> ・3の倍数のときには、”Fizz”
> ・5の倍数のときには、”Buzz”
> を数値の代わりに表示してください。

> <入力される値>
> 入力は以下のフォーマットで与えられます。
> “`
>

【Netlify / React】初デプロイ

# はじめに
今年の初めごろ、Youtube のハンズオン教材で React の勉強をしていた。真似をしてコードをいくつか書いたので [Netlify](https://www.netlify.com/) にデプロイしてみる。

# Netlify とは
Netlify とは（Netflixじゃないよ）、フロントエンド Web アプリケーションのデプロイを簡単かつ**無料で**行えるクラウドサービスである。また GitHub リポジトリに変更を加えると自動デプロイされるので管理の手間が少ない。

# デプロイした URL
> – [タイピングゲーム](https://github-typing.netlify.app/) / [GitHubリポジトリ](https://github.com/TanakaLatias/github-typing)
> – [メモリーゲーム](https://qiita.com/shozzy/items/dadea4181d6219d2d326) / [GitHubリポジトリ](https://github.com/TanakaLatias/netlify

プロフィールページのテンプレートを作ってみた！

[僕のホームページ](https://pocketpoem24493.github.io/ “僕のホームページ”)見てくれましたか?(圧)
[そのホームページ](https://pocketpoem24493.github.io/ “僕のホームページ”)のデザインにこだわったのでテンプレートとして配布したいと思います(そこまでキレイではない)
下がホームページのスクショです。
[結構こだわりました。](https://pocketpoem24493.github.io/ “僕のホームページ”)

アイコンはルート直下に`profile.jpg`としてアイコンを置いておけば一番上の丸アイコンが変えられます。また、拡張子がGifなどにしたい場合はソースコードから``から`src`属性変えてください。それから、このソースコードと全く同じ物

Viteを使った開発の流れ

# はじめに
この記事では、Viteを使ったフロントエンド開発の流れについて説明します。Viteは、次世代のフロントエンドツールで、超高速な開発サーバーと最適化されたビルド機能を提供します。以下に、Viteのセットアップから基本的な使い方、そしてプロジェクトのビルドまでの流れを紹介します。

https://ja.vitejs.dev/

# 前提条件
* Node.jsがインストールされていること

# 1. Viteプロジェクトのセットアップ
## プロジェクトの作成
まず、Viteのプロジェクトテンプレートを使って新しいプロジェクトを作成します。以下のコマンドを実行します。

“`
npm create vite@latest my-vite-app
“`

または、yarnを使用する場合:

“`
yarn create vite my-vite-app
“`

コマンドを実行すると、プロジェクトのテンプレートを選択するように求められます。例えば、vanilla（プレーンJavaScript）、vue、react、preact、lit、svelteなどが選択できます。こ

この記事でアロー関数をすぐに理解できる

#### 基本構文

アロー関数の基本構文は次の通りです：

“`javascript
(param1, param2, …, paramN) => { statements }
“`

もし引数が1つだけの場合、丸括弧を省略できます：

“`javascript
param => { statements }
“`

関数本体が1つの式のみで、その式が返り値を必要とする場合は、大括弧と `return` キーワードを省略できます：

“`javascript
(param1, param2, …, paramN) => expression
“`

### 例

#### 1. 引数がないアロー関数

**アロー関数：**

“`javascript
const sayHello = () => {
console.log(“Hello, world!”);
};
sayHello(); // 出力：Hello, world!
“`

**従来の関数式：**

“`javascript
const sayHello = function() {

わかってみれば「なるほど」となるが、わかるまでが大変なこと

# はじめに
chromeのプラグインを作成していると、中々、原因をつかむことができなくて、困るエラーに出会います。エラーメッセージを見ても意味を理解しにくいというか、現象の原因がはっきりとメッセージに表現されていないということです。単に’undefined’と表示されても困ります。もう少し、具体的なメッセージにはならないでしょうか。どこがどう悪いからエラーになっていますとか。今回、遭遇したエラーの現象と解決策をご説明します。

# 現象
chrome.runtime.sendMessage()を使用して、background.jsへメッセージを送信しようとして、sendMessage()がundefinedというエラーになりました。
デバッガーで追うと、chromeのオブジェクトに、runtimeメソッドがありません。
runtimeがないから、sendMessageもないことになります。
ここで、なぜ、runtimeメソッドがないのかを具体的に示して欲しいのですが、その記述はありません。この原因を特定するまでに相当の時間がかかりました。
この現象をもう少し、追いかけてみました。
別

[paiza]【殿堂入りキャンペーン】名刺バインダー管理 (paizaランク B 相当)

# 力こそパワー
いい感じの公式だったりアルゴリズムが思いつかない時に大事なのは？

**そうだね、筋肉だね!!**

https://paiza.jp/works/mondai/b_rank_skillcheck_archive/name_card

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

“`javascript:nameCard.js
// [問題文（原文）]
// あなたはこれまでに出会った人たちの名刺を集めています。
// 名刺は、複数枚のファイルを閉じることができるバインダーに保存されています。
//
// 1枚のファイルには、n個のポケットが横に並んでおり、表と裏の両面から名刺を眺めることができます。
// このため、1つのポケットには、2枚の名刺が背中合わせに入っています。
//
// 各名刺には1から順に通し番号が付いているため、この番

[paiza]長テーブルのうなぎ屋 (paizaランク B 相当)

# 江戸っ子への偏見がすごいw
“`text
ただしお客さんは江戸っ子なので、それら座席のうち、いずれか一つでも既に先客に座られている座席があった場合、
一人も座らずにグループ全員で怒って帰ってしまいます。江戸っ子は気が早いんでぃ。
“`
この問題の世界の住人はヤベェ奴らしかおらんのか。。。

https://paiza.jp/works/mondai/b_rank_skillcheck_sample/long-table

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

“`javascript:longTable.js
// [問題文（原文）]
// 東京の下町に長テーブルで有名な老舗うなぎ屋がありました。
//
// そのうなぎ屋にはとても大きい長テーブルがあり、テーブルの周りにn個の座席が配置されています。
// 座席には、時計回りに1, 2, …,

お前らにPromiseを再度説明します

## ObjectとPromiseの理解はJavaScriptで最重要

まず最初に、お前らなどと言ってしまい、誠に申し訳ございませんでした。
備忘録がわりに、未来の複数の地点での自分に向けて書こうと思ったら、こういった不適切な表現になってしまいました。

さて、[以前の記事にもPromise、Async、Awaitについての基本](https://qiita.com/monsoonTropicalBird/items/88424c54734b0aeb317d) を書いたけれど、お前らに、ここにもう少し踏み込んだ説明をしてやろうと思います。

JavaScriptの理解には、**Objectの理解と、Promise関数の理解はめちゃ重要**で、ここを理解できればJavaScriptの半分は理解出来たと思ってよろしいと思います。
最近はもっぱらReacterなのですが、使う関数の半分以上は非同期関数です。サーバー関係の関数はほぼ非同期です。
そして、自分も学習を始めた初期は、かなり理解に苦しみました。
何となくコードは書けてるけど、本当に理解していない気持ちの悪い感じ。あまり知らない他人

パーサを作成してみたい

JSでのパーサを作成してみたい

“`
function parseMarkdown(markdown) {
const rules = [
{ regex: /###### (.*?)(\n|$)/g, replacement: ‘

$1

$2′ },
{ regex: /##### (.*?)(\n|$)/g, replacement: ‘

$1

$2′ },
{ regex: /#### (.*?)(\n|$)/g, replacement: ‘

$1

$2′ },
{ regex: /### (.*?)(\n|$)/g, replacement: ‘

$1

$2′ },
{ regex: /## (.*?)(\n|$)/g, replacement: ‘

$1

$2′ },
{ regex: /# (.*?)(\n|$)/g, replacement: ‘

$1

$2′ },

[paiza]みんなでしりとり (paizaランク B 相当)

# 条件がめんどくせぇんよ
指定された単語リストがあるのに、そのリストから選ばない（入力例2）とかサイコパス集団がしりとりしとるんか？
もう少しルールわかる奴らでしりとりあえよ。

https://paiza.jp/works/mondai/b_rank_skillcheck_archive/word_chain

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

“`javascript:wordChain.js
// [問題文（原文）]
// あなたは友達たちと N 人でしりとりを行うことにしました。
// 1 人目、 2 人目、…、 N 人目、 1 人目、2 人目、… という順序で発言をします。
//
// ここで、それぞれの人は、次に挙げる 4 つのしりとりのルールを守って発言をする必要があります。
//
// 1. 発言は、単語リストにある K

ChatGPTで最近”書いた”javascriptの紹介

専業のエンジニアではアリマセン。

## 要件
– wordpressで構築しているマニュアルページ内に設置
– tableタグの中のテキストをクリックでクリップボードにコピー
– コピーしたらクリックした場所に「コピーしました」を表示する

## ChatGPTプロンプト
“`diff_html

“`
> 上記のhtmlの各セルの文言をクリックするとクリップボードにコピーされるようにしたいです。

## プロンプトの追加
思った動きではなかったので追加しました。

> ブラウザのメッセージは出さずにテキストのすぐ近くに「コピーしました」というメッセージを出したい。メッセージの背景はブルーで文字は白です。1秒後にこのメッセージは自動で消えます。

これでイメージ通りになりました😃

## 最終結果
### CSS
“