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

[paiza]売れ残りにはなりたくねぇなぁ。。。

# 市場から売れ残らないように生きたい
実力社会って厳しい世の中。。。無能は淘汰されていくのね。。。

https://paiza.jp/works/mondai/c_rank_skillcheck_archive/leftover

# 面倒くさいので画面パタメータをListでもらった後のFunctionだけ
ちなみに引数のListを作ってる箇所は[こっちの記事](https://qiita.com/AsilHatake/items/842548e48ae4a0eae119)に書いてあるYO!!
“`javascript:leftover.js
// [問題文（原文）]
// あなたはスーパーマーケットを経営しています。
// 今、ある生鮮食品を m[kg] 仕入れました。とても新鮮だったため、生のまま販売したところ、 m[kg] のうち p[%] を売ることができました。次にその売れ残りをすべてお惣菜にして販売したところ、売れ残った量のうち q[%] が売れました
// さて、m[kg] 仕入れたこの食品は最終的に何kg 売れ残ったでしょうか。ただし、生鮮食品をお総菜にする際は、

[paiza]みんな大好きFizzBuzz

# ループ・分岐を1度に学ぶならコレ
とりあえず新しい言語を始める時にHelloWorldの次ぐらいにやるのがFizzBuzz。
コレでループとifの書き方を理解してってやるのが下手な教科書で研修やるより1番いい気がする。

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

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

“`javascript:fizzBuzz.js
// [問題文（原文）]
// 整数 N が入力として与えられます。
//
// 1からNまでの整数を1から順に表示してください。
//
// ただし、表示しようとしている数値が、
//
// ・3の倍数かつ5の倍数のときには、”Fizz Buzz”
// ・3の倍数のときには、”Fizz”
// ・5の倍数のと

[paiza]みかん農家に俺はなる！

# 命の水だ、ポンジュース（みかんみかんみかん
自分が中学ぐらいにメタルというジャンルを日本に広めた素晴らしいバンドだったと思う。

https://paiza.jp/works/mondai/c_rank_skillcheck_archive/mikan

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

“`javascript:mikan.js
// [問題文（原文）]
// あなたはみかん農園を営んでいます。
// 収穫の季節になると、あなたはみかんを収穫し、重さごとに仕分けなければいけません。
// 仕分け作業は非常に時間がかかる作業なので、あなたはみかんを重さごとに仕分けてくれるプログラムを書くことにしました。
// みかんはある定数 N の倍数のうち、正の整数の重さが書かれた箱に仕分けられます。
// 例えば N = 10 の時、10 g, 20 g,

背景が伸びる見出し

お疲れ様です。

投稿は2日ぶりですが、タイトルの内容の勉強をちまちまとしておりました。
そのまとめです。

“`diff_css
#about-main {
line-height: 70px;
background: linear-gradient(90deg, #ffe4c4, #ffe4c4 50%, #fff 50%, #fff);
background-size: 200% 100%;
padding: .1rem 1rem;
color: #ff8c00;
}
“`
“`diff_javascript
// 自己紹介のアニメ
const aboutMain = document.querySelector(‘#about-main’);

const keys = {
color: [‘transparent’, ‘#fff’],
backgroundPosition: [‘100% 0’, ‘0 0’],
};

const op = {
duration: 1000,
// アニメが変化する速度、タイミング（開始と終了を緩やか

ReactのuseEffectのダークサイド

ReactのuseEffectフックは、コンポーネントの副作用を管理するための強力なツールです。
だけど、このフックには見落としがちな落とし穴や注意が必要な側面が存在します。

この一見無害なReactコンポーネントを見てみましょう。
以下のコードには重大なエラーがあります。

“`react:React
import React, { useEffect, useState } from ‘react’;

function DarkSideOfUseEffect() {
const [count, setCount] = useState(0);
const [pressed, setPressed] = useState(false);

useEffect(() => {
console.log(‘Count is’, count);
setPressed(!pressed);
});

// …他のコンポーネントロジック…

return (

Count: {count}

Blueskyの埋め込みタイムライン出力サービスを作ってみた（BlueskyTimeline）

## Blueskyの埋め込みタイムライン機能が公式で提供されていない
X（旧Twitter）では埋め込みタイムラインウィジェットが提供されていますが、いつのタイミングからかログインしていない状態ではタイムラインが表示されない仕様になっており、公式サイトなどで日々のお知らせなどを告知する媒体としてはイマイチな状態になってしまいました。

Xと近しいサービスで移住先としてBlueskyがひそかに注目されていましたが、執筆時点でもまだまだ発展途上で整備されていない機能も多く、埋め込みタイムラインウィジェットの提供もない状況であったため、ないなら作るか、ということでAPIを通じてタイムラインを出力するサービスを用意してみることとしました。
## [BlueskyTimeline](https://bst.heion.net/jp/ “BlueskyTimeline”) はどんなサービス？
本サービスはBlueskyの非公式タイムラインウィジェットの出力サービスです。
以前にWordpress向けプラグイン[BlueskyTimeline for WordPress](https://www.

DOMとは何か？

# 仕様から考える
DOMの仕様は２つあり、メインは[WHATWG](https://html.spec.whatwg.org/)のものでサブとして[W3C](https://www.w3.org/TR/)の仕様があります。WHATWGの仕様では[1.8 HTML vs XML syntax](https://html.spec.whatwg.org/#html-vs-xhtml)に
> This specification defines an abstract language for describing documents and applications, and some APIs for interacting with in-memory representations of resources that use this language.
The in-memory representation is known as “DOM HTML”, or “the DOM” for short.

> (日本語)この仕様は、文書やアプリケーションを記述するための抽象言語と

【Github Actions✕Firebase】リモートマシン上でfirebase deployを実行時に警告が表示される。

# はじめに
Github Actions上でのFirebaseのデプロイ自体は成功するがリモートマシン上に警告が表示されたので対応しました。

# 問題
以下の警告がGithubのリモートマシン上に表示される。

“`console
⚠ Authenticating with `FIREBASE_TOKEN` is deprecated and will be removed in a future major version of `firebase-tools`.
Instead, use a service account key with `GOOGLE_APPLICATION_CREDENTIALS`:
“`
大まかに訳すと、「FIREBASE_TOKEN」を使った認証は非推奨だからやめてね、代わりに「GOOGLE_APPLICATION_CREDENTIALS」を使った認証の方法にしてね、という感じ。
警告発生時点でのymlの設定は以下の通り。

“`yaml:autoDeproy.yml（抜粋）
– name: Deploy to Firebase

【Supabase✕Firebase✕Github Actions】Github Actionsでのデプロイ時に「Error: supabaseUrl is required.」がブラウザのコンソールに表示

# はじめに
Github Actionsを用いてFirebaseにデプロイを行った際、デプロイ自体は成功するが、
いざアプリを開くと以下のエラーがブラウザ上のコンソールに表示される（画面は真っ白）。
“`console
Error: supabaseUrl is required.
“`

# 問題
ymlファイルの設定は以下の通り。
supabaseへの接続のための環境変数はymlに設定していたが、読み込めていない様子。
※secretsの変数については各々Github上に登録済。

“`yaml:autoDeploy.yml（中略）
– name: Run build
run: bun run build
env:
VITE_SUPABASE_URL: ${{secrets.SUPABASE_URL}}
VITE_SUPABASE_ANON_KEY: ${{secrets.SUPABASE_ANON_KEY}}
“`

autoDeploy.yml（全

JavaScript: カレンダーアプリで今月に記述されている「先月の最終週」と「翌月の最初の週」を取得する方法

## 読んで欲しい人

– カレンダーアプリで下記の部分を取得する方法がわからん人
– 1.先月から今月に、はみ出てきてる奴ら：28, 29, 30, 31
– 2.翌月から今月に、はみ出てきてる奴ら：1, 2, 3, 4, 5, 6, 7

– dotインストールの問題を自力で解こうと頑張ってた過去の俺

## ソースコード

### 1.先月から今月に、はみ出てきてる奴ら：28, 29, 30, 31

“`javascript
const getCalendarHead = () => {

const dates = []
const d = new Date(‘現在の年’, ‘現在の月’, 0).getDate()
const n = new Date(currentYear, current

GitHub Pull requestsのUnityの.metaファイルを全て非表示にするスクリプト (ブックマークレット)

## 内容
* Unity開発時の、GitHub Pull requestsで.metaファイルをすべて非表示にしてレビューしやすくするJavaScriptです
* ChromeのJavaScriptコンソールで下記のスクリプトを実行します
* または、[ブックマークレット](https://ja.wikipedia.org/wiki/ブックマークレット)に登録しておくとすぐに使えて便利です

## .metaファイルをすべて非表示にする
“`js
var elements = document.getElementsByClassName(“file”);
for (var element of elements)
{
if (element.dataset.fileType.indexOf(“.meta”) != -1)
{
element.remove();
}
}
“`
## ブックマークレットに登録
ブックマークにJavaScriptを登録する仕組みであるブックマークレットを作成しておくとすぐに実行できて便利です。

####

[paiza]野球の審判

# だんだんやる気が。。。
千葉大会の市船の決勝戦、監督が直接審判とやり取りできないからって、キャプテンの子が審判と監督の間を行ったり来たりの板挟み状態で、これは将来立派な中間管理職になれそうですね！
ってか、オリンピックもそうだけど、これだけカメラだったりAIの技術が上がったんだから、誤審して叩かれる人間の審判ってもういらなくね？

あとサッカーの超演技的痛がり方はもはや芸術の域だよね！
あんなに痛がってたのに、数秒で立ち上がってプレー再開できるとか超人なのか？

https://paiza.jp/works/mondai/c_rank_skillcheck_archive/umpire

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

“`javascript:umpire.js
// [問題文（原文）]
// 野球の各打者はストライクが 3 つたまるとアウトと

mapメソッドを活用した繰り返し処理の効率化：具体的な事例と解説

### `map`メソッドとは？
`map`メソッドは、JavaScriptで配列の各要素に対して同じ処理を行い、その結果を新しい配列として返すメソッドです。元の配列は変更されず、新しい配列が生成されます。

### 具体的な事例

#### 1. 配列の各要素に1を足す
“`javascript
const numbers = [1, 2, 3, 4, 5];
const numbersPlusOne = numbers.map(number => number + 1);
console.log(numbersPlusOne); // [2, 3, 4, 5, 6]
“`
`map`メソッドを使用することで、元の配列の各要素に1を足し、新しい配列を簡単に作成できます。

#### 2. オブジェクトの配列から特定のプロパティを取り出す
“`javascript
const users = [
{ name: ‘Taro’, age: 25 },
{ name: ‘Jiro’, age: 30 },
{ name: ‘Saburo’, age: 35 }
];
co

[paiza]宝くじ (paizaランク C 相当)

# Cランク解いてイキりたい
サマージャンボが当たったら、フルテレOKな会社に転職して、犬のブリーダーやりたい。。。
こんなクソ暑い中、~~コロってても~~出社を推進してくる会社があるとか頭おかしいよね～

https://paiza.jp/works/mondai/c_rank_skillcheck_archive/lottery

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

“`javascript:lottery.js
// [問題文（原文）]
// 今年もパイザ宝くじの季節がやってきました。パイザ宝くじ券には 100000 以上 199999 以下の 6 桁の番号がついています。毎年1つ当選番号 (100000 以上 199999 以下)が発表され、当たりクジの番号が以下のように決まります。
//
// 1等：当選番号と一致する番号
// 前後賞：当選

fetchとaxios

Vue勉強中にaxiosというAPIが出てきて調べている際に（前回の記事）、
axiosに似たAPIにfetchというものがあるとわかった。

比較してる記事がいくつかありました。

https://www.wantedly.com/companies/company_1071330/post_articles/865429

https://rakuraku-engineer.com/posts/axios/

> ✅axiosはfetchを進化させたようなライブラリ。

>ざっくり解説「シンプルにHTTPリクエストができるfetchが進化したライブラリ」

とのこと。

確かに、fetchの方が長く、axiosのほうが簡潔なコードになるようだ。

前回の、axios のコード
“`javascript:javascript
const app = Vue.createApp({
data: () => ({
users: []
}),
mounted: function() {
axios.get(‘https://j

LeetCode: Two Sumをわかりやすく

https://leetcode.com/problems/two-sum/

## 1. 問題の概要
「Two Sum（ツーサム）」という問題は、次のような問題です：

与えられるもの: 数字が並んだリスト（配列）と、特定の数字（ターゲット）。
やること: リストの中から、合計してターゲットになる2つの数字を探し、その数字の場所（インデックス）を答える。
## 2. 具体的な例
例えば、リストが [2, 7, 11, 15] で、ターゲットが 9 の場合を考えます。このとき、リストの中の 2 と 7 を足すと 9 になるので、これが答えです。2 はリストの最初（インデックスは 0）、7 はその次（インデックスは 1）なので、答えは [0, 1] になります。

## 3. 解き方の説明
### 方法1: 全部試してみる（ブルートフォース）
リストの中から1つ目の数字を選びます。
次に、その数字以外の他の数字を全部足してみて、ターゲットになるか確認します。
これを全部の数字で試して、ターゲットになる組み合わせを見つけます。
例:

まず 2 を選んで、7, 11, 15 と足してみます

Google Apps ScriptでLINEbotで3択クイズを実装する(リッチメニューでクイズモードを実装)

LINEのリッチメニューでクイズを選択するとクイズモードへ移行し、3択クイズが始まるという簡単なアプリケーションを作成した。


リッチメニューからクイズのボタンを選択すると「クイズ」というテキストが送られて、それをもとにクイズが送られてくるというものである。

https://nksg.net/lab/blog/linebot-6/

このリンク先のスクリプトを参考にしたが、このリンク先のアプリケーションと異なる点は、以下の２つの点である。

・ユーザーIDに問題の進捗を記録させ、進捗に応じて問題を適宜出す
・クイズを開始するとステータスを”1″へ変更することでクイズの最中とクイズ中以外で返信するメッセージの内容を変更する

これらを実行するために、以下のようなス

Canvasで画像を描画する（２）

# はじめに
前回の [Canvasで画像を描画する](https://qiita.com/generokenken/items/46bc89382cd36f5cc4c1)の続きとなります。
今回は、前回作ったCanvasにもう少し手を加えていき、最終的に合成画像をダウンロードするところまでいきたいと思います。

話をわかりやすくするために一つのscript.jsに処理を書いていますので、記述量が多くなってしまっていますが、ご了承ください。

# 画像の角を丸くする

クリッピングパスを使って画像を切り取ります。

https://developer.mozilla.org/ja/docs/Web/API/Canvas_API/Tutorial/Compositing#%E3%82%AF%E3%83%AA%E3%83%83%E3%83%94%E3%83%B3%E3%82%B0%E3%83%91%E3%82%B9

今回、角の半径が50ピクセルとなるように切り取っていきます。

“`index.html

GPT-4oが書いた技術記事 ~パート1~

こんにちは！クラウディアやけん、今日は皆さんにソフトウェア開発の面白さを教えるとよ！今回は「JavaScriptで始める、シンプルなToDoアプリの作り方」っちゃけど、これを通じてJavaScriptの基礎を一緒に学んでいくよ。

—

## 導入: ToDoアプリってなんで作ると？

さて、皆さんも「ToDoアプリ」って聞いたことあるっちゃろ？毎日のやることリストを管理するための便利なアプリで、すごくシンプルなのに使い勝手がよかと！特にプログラミングの練習には最適っちゃね。今回は、このToDoアプリを作りながら、JavaScriptの基本を学ぶとよ。

## メインテーマ: ToDoアプリの基礎

### 1. プロジェクトの準備

まずは、プロジェクトの準備から始めるけん！以下の手順に従ってね。

1. **フォルダの作成**: 新しいフォルダを作成して、その中にHTMLファイル、CSSファイル、JavaScriptファイルを作成する。
2. **HTMLファイルの作成**: `index.html` という名前でファイルを作成し、基本的なHTML構造を記述する。
3. **C

Turbowarpの『カスタム拡張機能』を使おう【３】

# 本記事について
Turbowarpのカスタム拡張機能をる方法の説明、その３です。

前記事までで、外部Javascriptファイルを読み込み、Turbowarpの再起動無しでJavascriptの変更を反映させる方法を解説しましたが、外部Javascriptファイルの場所（名前）が固定でした。

外部Javascriptファイルの場所（名前）を変更できるようにしたいと思います。

# やりたいことの解説

JSファイルのURL をブロックの引数として与えることで、JSファイルを切り替えられるようにします。


#### 『JSファイルを指定する』ブロック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294946/f72683a4-32d