- 1. [paiza]野球の審判
- 2. mapメソッドを活用した繰り返し処理の効率化：具体的な事例と解説
- 3. [paiza]宝くじ (paizaランク C 相当)
- 4. fetchとaxios
- 5. LeetCode: Two Sumをわかりやすく
- 6. Google Apps ScriptでLINEbotで3択クイズを実装する(リッチメニューでクイズモードを実装)
- 7. Canvasで画像を描画する（２）
- 8. GPT-4oが書いた技術記事 ~パート1~
- 9. Turbowarpの『カスタム拡張機能』を使おう【３】
- 10. Turbowarpの『カスタム拡張機能』を使おう【１】
- 11. Turbowarpの『カスタム拡張機能』を使おう【２】
- 12. 【JavaScript | アロー関数】初心者向け！アロー関数の基本的な書き方まとめ
- 13. rails7で、Stimulusを使う
- 14. 【JavaScript】振り子もどき
- 15. MongoDB,Postmanを使ってweb開発環境を作る
- 16. kintoneの開発環境Erakisで開発と本番を分ける方法（と画像をサーバーなしで扱う）
- 17. [Node.js] [Jest] Jestでテストを行う
- 18. インプット欄に数字を入れたら”NaN cannot be parsed”とエラー
- 19. [paiza]N倍の文字列
- 20. [paiza]文字の一致
[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ファイルを指定する』ブロック
##### Scratch3.xのPEN機能：一番細い線でも2ピクセルの太さに見えます。
##### これが１ピクセルの線( P5JSで書いた LINE )
 => { 実行する処理; };
“`“`javascript:アロー関数を使用した場合のコード
let sum = (a, b) => {
return a + b;
};
“`以下の、 `function` を使った従来の書き方と比べてみると、違いが分かりやすいかと思います。
“`javascript:アロー関数を使用しない場合のコード
let sum = function (a, b) {
return a + b;
};
“`アロー関数の場合は、 `function` を使わず、代わりに引数の直後に `=>` を記述します。
## 特定条件下における3つの書
rails7で、Stimulusを使う
## はじめに
自分用の学習メモです。
Stimulusを使って、クリックすると色が変わるボタンを実装します。## 実装
bootstrapを使って、ボタンを実装します
“`rbボタン“`
Stimulusコントローラを作成します。
“`rb
rails generate stimulus btn
“`
これで、app/javascript/controllers/btn_controller.jsというファイルが作成されます。“`js
import { Controller } from “@hotwired/stimulus”// Connects to data-controller=”btn”
export default class extends Controller {
connect() {
console.log(“こんにちは！”)
}
}
“`
HTMLにStimulusコントローラを適用するには、データ属性を使用します。di
【JavaScript】振り子もどき
https://mogamoga1024.github.io/FurikoModoki/
“`html:index.html
振り子もどき
“`“`js:main.js
const canv
MongoDB,Postmanを使ってweb開発環境を作る
どうしてもデータベースとAPIを使ったweb開発がしたかったので、
shincodeさんの動画を参考にやってみました。データベースにデータ送信をするまでにかなりの量のコードを書くので、どこに問題があるのかわからないです。
VScodeではエラーが出なかったのでなおさらわからないです。そういった点がweb開発の難しさかなあと思います。
ある程度javascriptのライブラリに関する基礎が必要で、この動画を見ただけだと仕組みがわからない関数をたくさん使用することになると思います。また動画内でも〇〇が抜けていたのでエラーが出ましたというような補足もあり、ある程度経験のある人向けだと感じました。就職活動をするならポートフォリオとしてwebアプリやサイトを作りましょうとよく聞きますが、そう簡単ではないのでプログラミングスクールに通うのは悪くないかと思います。
下の画像について、データを送信しましたがデータベースに送信できなかった時に出たエラーです。一応エラーを読んでいますがどう対処するべきなの
kintoneの開発環境Erakisで開発と本番を分ける方法（と画像をサーバーなしで扱う）
[Erakis](https://www.npmjs.com/package/erakis)はkintoneのカスタマイズを簡単高速にする開発環境です。
本番環境と同等の開発環境を維持するのはとても大変ですよね。Erakisを導入したカスタマイズで、開発と本番を分ける方法について説明します。
https://www.npmjs.com/package/erakis
# 概要
Erakisで管理する環境は２つです。
– dev : development (開発環境)
– prod : production (本番環境)1つのカスタマイズに２つのアプリが紐づいています。
また、Erakisは環境変数を定義することができます。
– .env.developmentファイル（開発環境）
– .env.productionファイル（本番環境）これらの機能を利用して、開発と本番で同じカスタマイズをして、表示されるデータだけを変えてみます。
# 作りたいもの
– 日報アプリ
カスタマイズ対象となるkintoneアプリこのアプリで日報を書くとメッセージと画像が表示されるように
[Node.js] [Jest] Jestでテストを行う
# 環境
MacBook Pro (2.3 GHz 8コアIntel Core i9)
macOS 14.0（23A344）
Homebrew 4.3.8
gh 2.52.0# 目次
– []()
– []()# プロジェクトを作成する
1. プロジェクト（ディレクトリ）を作成する
~~~sh
mkdir jest-tutorial
~~~
1. ディレクトリに移動する
~~~sh
cd jest-tutorial
~~~
1. [プロジェクトルート※1](※1:プロジェクトルートは、すべてのプロジェクトソースの親であるフォルダーです。)にpackage.jsonを作成する
~~~sh
touch package.json
~~~
1. package.jsonに下記を記載する
~~~json:package.json
{
“name”: “jest-tutorial”,
“license”: “UNLICENSED”
}
~~~
1. package
インプット欄に数字を入れたら”NaN cannot be parsed”とエラー
# はじめに
Reactの課題で学習記録アプリケーションを作っています。
学習内容と数字を入力したところ、数字が入力されずにコンソールを見ると以下のエラーが出てきました。
“`
the specified value “nan” cannot be parsed, or is out of range
“`# 原因
めちゃくちゃ単純なことですが、全角入力になっていたためでした！
inputタグでnumber属性を指定した際、非数の入力は受け付けないためある種当然のことですね（笑）# 解決策
英数入力にて入力する# 終わりに
自分の性格(性質?)上よくこういったぽかをしてしまうので、当たり前にみんなができているけど意外にたまにやると忘れているようなことも記事にしていきたいです！
[paiza]N倍の文字列
# 下から順に。。。
https://paiza.jp/works/mondai/d_rank_skillcheck_archive/square
# 面倒くさいので画面パタメータをListでもらった後のFunctionだけ
ちなみに引数のListを作ってる箇所は[こっちの記事](https://qiita.com/AsilHatake/items/842548e48ae4a0eae119)に書いてあるYO!!“`javascript:square.js
// [問題文（原文）]
// 整数 N が入力されるので、N 個の*を繋げた文字列を出力するプログラムを作成しましょう。
// 例えば N = 3の場合
// ***
// のように出力してください。
function square(lines) {
if (!Array.isArray(lines) || lines.length !== 1) {
console.log(“1行入れろや！”);
return;
}
const repCnt = Number(lines[0]);
if (
[paiza]文字の一致
# 同じ文字かどうかチェック
https://paiza.jp/works/mondai/d_rank_skillcheck_sample/diff_str# 面倒くさいので画面パタメータをListでもらった後のFunctionだけ
ちなみに引数のListを作ってる箇所は[こっちの記事](https://qiita.com/AsilHatake/items/842548e48ae4a0eae119)に書いてあるYO!!“`javascript:sameStr.js
// [問題文（原文）]
// 2 つの文字列 a, b が入力されます。文字列が一致していれば “OK” 、異なっていれば “NG” と出力してください。
function sameStr(lines) {
if (!Array.isArray(lines) || lines.length !== 2) {
console.log(“2個の文字を入れろや！”);
return;
}
if (!lines.every(line => line.length > 0 && line.le
