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

[paiza]すごく普通に書いてみた

# こういう問題大好き
[コレ](https://paiza.jp/works/mondai/s_rank_skillcheck_sample/mod7)に挑戦

https://paiza.jp/works/mondai/s_rank_skillcheck_sample/mod7

# Node(index.js)で正攻法で書いてみた
ちなみに標準出力から値を取得するって部分は、[paizaで公開されてるサンプル](https://paiza.jp/guide/samplecode.html)をそのまま使いました。
“`javascript:index.js
// [問題文（原文）]
// 整数が書かれた複数のカードの中から3枚を選び、
// そこに書かれた整数の和が7で割り切れるかどうかで運勢を決めようというものです。
// カードは必ず異なる3枚を選ぶ必要があり、
// 全てのカードには全て異なる数字が書かれています。
// — ここから paizaで公開されてるサンプル
process.stdin.resume();
process.stdin.setEncoding(‘

SharePoint サイトのタイムゾーンを取得する方法

SharePoint サイトのタイムゾーンを確認するには、「サイトの設定」にアクセスする方法がありますが、もしあなたに「サイトの設定」にアクセスする権限がない場合は、 JavaScript を使って確認することができます。

## JavaScript コードとその使い方

タイムゾーンを確認したい SharePoint Online サイトにアクセスし、そのサイトにあるなにかしらのリストにアクセスします。

そして、ブラウザの DevTools を開き、以下のスクリプトを実行します。

“` JavaScript
(async function(){
let response = await fetch(
_spPageContextInfo.webServerRelativeUrl + “/_api/web/RegionalSettings/TimeZone”,
{
method: ‘GET’,
headers: {
‘Accept’: ‘application/json;odata=verbose’,

Amazonサイトの広告(スポンサー)を非表示にしてみよう

# はじめに
Amazonのスポンサー表示ってウザいですよね。chrome拡張機能で非表示にしようという話です。

すでに広告ブロッカーはchromeウェブストアに行けばたくさんあります。けど、よく分からない人が作った拡張機能は怖いです。なので自分で作ろうということになりました。ちょー簡単実装なのでコピペで使えます。

# とりあえず
下の左画像がオリジナルのスポンサー箇所をピンクにしてみました。右画像が今回作った拡張機能の結果です。
「腕時計 電波」で検索しているのに目覚まし時計が先頭のスポンサー。ひどい。アマゾンさん、それはないでしょ。

とりあえずピンクにしてどんな所がスポンサーなのかを確認してから使用すると良いです。ピンクのままで使用しても良いと思います。

謎のUncaught SyntaxError: Unexpected token ‘<' エラーについて

# Uncaught SyntaxError: Unexpected token ‘<' エラー Laravelで開発をしていたら突如コンソールに ``` Uncaught SyntaxError: Unexpected token '<' at Function ()
at template.js:259:12
at t.exports (_apply.js:13:25)
at attempt.js:29:12
at t.exports (_apply.js:15:25)
at _overRest.js:32:12
at t.exports (template.js:258:16)
at t.value (Template.js:14:21)
at station-list.js:11:4
at station-list.js:1:20573

“`

というエラーが起き、データがうまく出力されないといった現象に遭いました。

これがまた厄介でローカル環境では表示されるのに開

【Prisma】findManyで100万規模のデータを取得する

# :sunny: はじめに

今回は約100万件ほどのデータを**生SQLクエリ**ではなく**Prisma（ORM）でデータ取得をする**というところに焦点を当てて、実装までに当たった問題点や内容のご共有ができたらと思います。

# :four_leaf_clover: 環境

* TypeScript：4.7.4
* Prisma：5.9.0
* Provider：MySQL

# :gear: 実装したコード

“`TypeScript:service.ts
type DataType = {
id: number
name: string
createdAt: Date
}

async getData(): Promise<{ result: DataType[] }> {
const batchSize = 150000
let lastId = 0
let results: DataType[] = []
let specificData:

Canvasで画像を描画する

# はじめに
Canvas API を使用すると、ブラウザ上で画像やテキストを描画できるのですが、画像を切り取ったり、拡大・縮小したり、マウスクリックした状態でドラッグして移動したり…
といった色々なことができます。

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

弊社のいくつかのプロダクトでは、これらの技術を用いて合成画像を出力し、お客さんへ届けるという仕組みを構築しています。

本記事では、Canvas で画像を描画するための、非常に基本的な使い方を紹介します。

# まずは画像を描画する

canvas要素は、二次元描画コンテキストを提供します。
これは、図形、文字、画像、その他のオブジェクトを描画するのに使用します。

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

今回、横と縦が300 * 400のねこちゃん画像を描画します。
描画される範囲（枠）のサイズは広めの800 * 600としておきます。

`

【TypeScript/JavaScript】Knipで不要なコードを簡単に削除する方法

# はじめに
TypeScript/JavaScriptのプロジェクトで不要なコードを検出し、削除するツール「Knip」について紹介します。
# Knipとは？
`Knip`は、TypeScriptやJavaScriptのコードベースから不要なコードを検出するためのCLIツールです。

以下のような不要なコードを検出することができます。

+ package.json の dependencies / devDependencies に含まれているが、実際には使われていないパッケージ
+ exportされているが、どこからもimportされていない変数、関数、型
+ 使用されていないファイル

これらの不要なコードを検出し、整理することでプロジェクトのメンテナンス性を向上させることができます。
# Knipの使い方
`Knip`の使い方は非常にシンプルです。
以下のコマンドを実行することで、プロジェクト内の不要なコードを検出できます。
“`sh
# インストール
npm install -D knip typescript @types/node

# 実行
npx knip
“`

自己紹介ページのフッターを編集ー2

お疲れ様です。

前回自己紹介ページのフッターに貼っている画像を、アニメーションを使ってじわりと表示するようにし、今日はその画像が順々に表示されるようコードを書きなおそうと思っていたのですが、冷静に考えると

「このページが表示された瞬間に画像たちがじわっと表示されてるから、スクロールしてたどり着くころには全部表示されてるし、これって意味ないんじゃ…？」

ということに気が付きましたので、かなり前に使った監視の observe を使っていきます:sweat_smile:

“`diff_javascript
const imgItem = document.querySelectorAll(‘.item’);

// 監視対象が範囲に交差したら実行する
const showItem = (entries) => {
for(let i = 0; i < imgItem.length; i++){ const keyframes = { // 定数keyframesで画像の透明度を指定する opacity: [0, 1], }; // 再生時間の指定 co

MIPSで様々なプログラムを書いてみる

# 概要
大学でアセンブリ言語を学んでいるので学んだ知識を共有できたらなということでJavaScriptとC言語で書かれたプログラムを色々[MIPS](https://ja.wikipedia.org/wiki/MIPS%E3%82%A2%E3%83%BC%E3%82%AD%E3%83%86%E3%82%AF%E3%83%81%E3%83%A3)アセンブラで書いていきます。今回は再帰関数をやっていきます。

# 1から任意の数nまでの合計 – その壱
数学のように書くとこのようになります。
“`math
\sum_{n=1}^{n}k
“`
コードを見てもらった方が早いでしょう。
以下にJavaScriptとC言語のコードを載せておきます。

JavaScript

“`javascript:sum.js
function sum(n, res){
if(n<1) return res; else return sum(n-1,res+n); } ```

castjs を使って Chromecast への動画のキャストを JavaScript で行う（p5.js も併用）

調べものをしている中で、Chromecast への動画のキャストなどを扱えるライブラリの castjs を見かけたので、それを試してみた話です。

●castjs/castjs: 📺 Chromecast Sender Library for the Browser
　https://github.com/castjs/castjs


とりあえずのお試しで、リビングにある Chromecast（第3世代）に、castjs のデモで掲載されている動画をキャストしてみました。

## 試した内容
### 利用するブラウザ
今回のお試しでは、ブラウザは「Google Chrome」を使っています。

### デバイスの構成
今回、利用しているデバイスは以下の通りです。

– PC
– Chromecast（第3世代）
– Chromecast を接続し

脱初心者向けにpaizaランク B「神経衰弱」を解説

「paizaxQiita記事投稿キャンペーン」という楽しそうなキャンペーンを見つけ、参加することにしました。

今回はキャンペーン対象の中で、レベルB「神経衰弱」に挑戦しました。中の人は生粋のJavaScripterですので、言語はJavaScriptで解いています。

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

## 解き方
問題文を読み、入力される値の○行目に何が出力されているかを把握します。当たり前のことですがここを間違えると全て台無しになってしまいます。頑張って理解しましょう。

そしていきなり書くのではなく、どういった手順を踏んでいけばいいか考えます。今回だとまずトランプの配置をどう表現するか、プレイ中の値をどのように処理すればいいだろうか、などです。

自分はまず整理してクリアにした状態から書きたいタイプですので、その方法で進めていました。

## 解答コード
まずは私が書いたコードの全体をお見せします。

:::note info
構成自体は手続き型ではなく、オブジェクト指向

【今更】ぷよぷよプログラミングやってみた

# サマリ
ぷよぷよプログラミングをやってみました。

# 背景
プログラミングの学習サイトで有名だったので一度はやってみたいと思っていたのですが
知らぬ間に時はながれ2024年…というわけでリリースから4年も経ったのでこのままだと一生触らないかもと思い、やってみることにしました。
結局、何をするにせよ最初の一歩が重たいんですよね
（ちなみにぷよぷよはほぼやったことありません（おい））

# ゴール
ぷよぷよプログラミングに必要なアカウント作成、
その後実際にコースを試してみる。

# 対象読者
– ぷよぷよプログラミングが気になっている方

# 前提
必須：PC、インターネット環境
# 環境
– ホストOS：Window10 Home
– ブラウザ：Google Chromeバージョン: 126.0.6478.127（Official Build） （64 ビット）
# 手順

### そもそも
ぷよぷよは言わずと知れたセガが開発したパズルゲームですね。

ぷよぷよプログラミングとは以下です。

> プログラミング学習環境『Monaca Education』において、セガが展開するア

Reactで学習記録アプリを作ってみた

# はじめに
私は現在、JISOUというコミュニティでReactの学習をしています。エンジニア歴は4年になりますが、普段はWeb制作を行っていてアプリ制作は素人になります。今回は、学習の過程で制作した学習記録アプリについて紹介します。

# 制作したもの
今回制作したものは学習記録アプリになります。基本的には、Todoアプリに機能を追加したようなものになっています。スタイリングはしていないので非常にシンプルな構造になっています。


# 気がついたこと
ReactはJavaScriptのライブラリです。JavaScriptの基本的な内容が分かっていないと学習効率が全く変わってくると感じました。私は以前、別のプログラミングスクールに通っていました。約4ヶ月ほど学習しましたがTodoアプリをまともに作れるかどう

素朴な疑問 ~ モジュールバンドラーって何？ ~

# 素朴な疑問
筆者が新人教育する中で、プログラミング実務未経験者がよくされる質問を紹介します。
未経験者に限らず、「そういえば何のために使っている技術（ツール）なんだっけ？」とよく理解していないまま利用しているケースも少なくありません。
この記事で、その純粋で素朴な疑問を改めて明確にして理解を深めていきましょう！

# 今回の疑問
今回の疑問は表題通り、

「**モジュールバンドラー** って何？」　です！

モジュールバンドラーの代表的なものとして[webpack](https://webpack.js.org/)がありますね。

# モジュールバンドラーって何？
一言で言うと、
「モジュールを**一つ（少数）のファイルへと変換する**ツール」 です。

ここでいうモジュールとは、プロジェクト内の各ファイルのことを指します。
実際、我々がプログラミングしたモジュールは、そのままではブラウザ上で読み込ませることができません。
それには理由があります。以下の画

【ブックマークレット】画面をスリープさせない

# ページを見ている時にスリープされないようにする
レシピを見ている時に画面がスリープされること、ありませんか？
そんなときに役立つブックマークレットのご紹介です！

実行するとこのようになり、スイッチがオンになっているときには画面がスリープしないようになります。


元々、クラシルのサイトでは料理モードという名前でスリープしない機能がありました。
それをすべてのサイトで使えるようにしたいと思い作成しました。


仕組みとしてはScreen Wake Lock APIを使用しています。

X（Twitter）で自動的にいいねするスクリプトを公開する

今回は、JavaScriptを使ってTwitterの自動いいねスクリプトを作るコードを紹介します。

## 実際のコード

“`javascript
let likeCount = 0; // いいねカウンター

function autoLikeTweets() {
// すべてのツイートのいいねボタンを取得
const likeButtons = document.querySelectorAll(‘button[data-testid=”like”]’);

if (likeButtons.length > 0) {
// 最初のいいねボタンをクリック
likeButtons[0].click();
likeCount++; // いいねカウントを増やす
console.log(`いいねしました: ${likeCount} 件`);
} else {
// いいねボタンがない場合、ページをスクロール
window.scrollBy(0, 100

Javascriptでこれ知ってますか？直接idのvalue指定で表示変更？

https://developer.mozilla.org/ja/play
のサイトで偶然下記のようにjavascriptを入力したら
getElementById を使わなくても id 属性で要素を指定できる。
一般的な記述
HTML
“`
ここに何か書いてください
“`
Javascript
“`
const cityx = document.getElementById(“city”)
cityx.value = “新たなデータ”
“`
を
“`
city.value = “新たなデータ”
“`
だけで表示された！！

参考サイト：
https://mseeeen.msen.jp/elements-can-be-referenced-without-using-getelementbyid/

【未経験】入社して３ヶ月経過してみて入社までにしておくべきだったと感じたこと

## はじめに
4月中旬に未経験から受託開発企業に入社して3ヶ月が経過した中で、入社までにしっかりと理解しておけばよかったと感じた知識についての備忘録になります。

## 入社までの私の学習状態について
学習期間は中断している期間も含めるとだいたい2年ぐらいで、主にPythonを中心に学習していました。フレームワークはDjangoとFlaskを使用した経験があり、それぞれでログイン機能付きのTODOアプリなどのフレームワークの理解に役立つ簡易的なアプリを2~3個を作成しています。フロントに関してはHTML５＋Bootstrapをメインに扱っており、javascriptは必要最低限使用する状態にしていました。ポートフォリオはDjangoを使用して過疎地域での高齢一人暮らし世帯の見守り負担軽減を目的としたLINEのようなメッセージアプリを作成しました（＊現在使用を停止しています）。ボットで定期的にメッセージを送信し、一定期間手動の既読ボタンがクリックされなければ管理者側に通知がいくといったものです。

## 入社後の状態
ありがたいことに未経験入社ということで約２ヶ月トレーニング期間を設

paizaプログラミング問題をやってみた：Dランク

## はじめに

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

まずはDランクの問題です。
言語はJavaScript（TypeScriptがなかった…）を選択しています。

## 文字の一致

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

var lines = [];
var reader = require(‘readline’).createInterface({
input: process.stdin,
output: process.stdout
});
reader.on(‘line’, (line) => {
lines.push(line);
});
reader.on(‘close’, () => {
if(lines[0] === lines[1]){
console.log(“

reduceって？

## Reduceって？
[MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce)には、下記のような説明が記載されています。
> Arrayインターフェイスのメソッドで、配列のそれぞれの要素に対して、ユーザーが提供した「縮小」コールバック関数を呼び出します。

配列の各要素に対して、処理を実行するメソッドですかね。

使い方は、
“` js
const arr = [1, 2, 4];
const res = arr.reduce((acc, curr) => acc + curr, 0);
console.log(res); // 7
“`
上記のように。

### 構文
“` js
配列.reduce(コールバック関数, 初期値)
“`
– コールバック関数：配列のそれぞれの要素に対して、呼び出す関数
– 初期値（省略可）

コールバック関数内の引数
– accumlator：前回のコールバック関数の戻り値
– currentValue：