- 1. 【React】公式チュートリアル（三目並べ）の中で学んだことの備忘録
- 2. p^4+14は素数なのか？
- 3. JavaScriptでマウスカーソル位置の単語を取得する方法が難しかった
- 4. Could not find gozip for packaging. Using DotNetZip to package. のエラーを表示しないようにしたメモ
- 5. 映像作品を評価して記録できる拡張機能「Streaming video tracker」
- 6. Laravel10とJavaScriptのFetchAPIでいいね機能を実装する 【非同期処理】
- 7. playwrightで任意のapiをmock化
- 8. モンテカルロ法シミュレーション。
- 9. 文字列収集 (paizaランク S 相当) を普通にツリー構造で解く(JavaScript)
- 10. 新たな計算の形。 64ビット（８バイト）のメモリを持つシンプルな並列ビット演算計算機。
- 11. 日本語プログラミングアシスタント (HTML対応)。AIを使ってゲームコードを自動生成するシステム。
- 12. ElectronでMacOSデスクトップアプリを作ろう！初心者向けステップバイステップガイド
- 13. 【paiza×Qiita】JavaScriptで最小文字数での解答を目指す【Bランク編】
- 14. 【2024年最新版】 Reactの状態管理ライブラリ比較３選＋α（Redux, Zustand, Jotai）
- 15. [GAS, JavaScript] 脱初心者！配列の filter, map, find を使えるようになろう
- 16. 【Javascript】Consoleやdebuggerを使った開発支援
- 17. 私がアロー関数を理解するまで
- 18. [GAS, JavaScript] try-catch と Error のこと
- 19. javascript のタスク系処理を Promise / AsyncIterator を交えつつまとめてみた
- 20. 【API不要】Twitterのリストを無料で出力する方法(自分用メモ)
【React】公式チュートリアル（三目並べ）の中で学んだことの備忘録
# コンポーネント
自作したコンポーネントは、大文字で始める
“`react:例
function Box() {
}
“`# props
コンポーネントに値を渡すことができる
“`react:例
function Box ( { size } ) {
returnsize : {size}
;
}{/*コンポーネントへの値の渡し方*/}
“`# state
– 何らかの値を「記憶」するために、コンポーネントは**state**というものを使用する
– React は、**useState**という特別な関数を提供しており、コンポーネントからこれを呼び出すことで「記憶」を行わせることができる
“`react:例
{/*useState関数でstateを得る。引数はstateの初期値。stateとそのset関数を配列で受け取る*/}
const [value, setValue] = useState(null);
“`
– 各コンポーネントはそれぞれ独自のstateを保持している。それぞれ
p^4+14は素数なのか？
## そもそも
京都大学の2021年の入試問題に、次のようなものがある。
“`math
pが素数ならばp^4+14は素数で無いことを示せ。
“`この問題は、次のように解答可能である。
1) $ p=3 $のとき
$ 3^4+14=95 $より、素数でない2)$ p≡1,2 (mod3) $のとき
$ p^4≡1 (mod3) $であるから、$ p^4+14≡15≡0(mod3) $
以上より、$ p $が素数のとき、$ p^4+14 $は素数でない。## ところで
**これ、pが素数じゃなくても成立するんじゃね？**
現に、1,4,6,8,9を代入してみたところ、全て合成数となるのである。
手計算しようかとも思ったが、面倒なので適当にコードを書いて確かめようと思った。
ごちゃごちゃしながら最終的にできた ~~クソ~~ コードがコチラ
“`javascript
function myFunction() {
let a;
let arr = new Array();
for(let i=2;i<100;i++){ a = Math.pow(i,4)
JavaScriptでマウスカーソル位置の単語を取得する方法が難しかった
# これはなに？
ばにらJavaScriptにおいて、ページ全体に設定したEventListener内で、マウス位置の単語を取得する方法。# 概略
JavaScriptで特定の文字列のクリックイベントやマウスオーバーイベントを取得するにはspanタグで囲うなどの方法が用いられるが、例えばUserScriptやBookmarkletで表示中のページにあるすべて特定の文字列にspanを設定することは難しい。たとえば、innerHTMLで単純置換を行うと、hrefやalt attributeに特定の文字列が設定されていれば、ページが崩壊してしまう。また、DOM操作を行うにしても、TextNodeから一部にspanタグを設定して、しかも前後のタグとの関係を処理することは困難である。そこで、この記事ではwindow.addEventListenerでページ全体に設定したイベント内で、マウスカーソルの位置にある単語(英語などのスペース区切りの言語に限る)を取得する方法を紹介する。# コード
“`javascript
document.addEventListener(“mousemov
Could not find gozip for packaging. Using DotNetZip to package. のエラーを表示しないようにしたメモ
## 概要
package.jsonに下記コードを書いてGitBashで実行したら、削除はできるが警告が表示される状態となった。
環境はwindows。“`
“clean”: “rm -rf dist”,
“`“`
Could not find gozip for packaging. Using DotNetZip to package. This may cause problems preserving file permissions when using in a Linux based environment.
“`## 対処
rimrafを使う。
“`
npm install –save-dev rimraf
“`“`diff
– “clean”: “rm -rf dist”,
+ “clean”: “rimraf dist”,
“`
映像作品を評価して記録できる拡張機能「Streaming video tracker」
# はじめに
今回、UnextやNetflixなどの視聴を検知して、その場で★の評価やコメントなどを保存できる拡張機能を作成しました。作成に至った経緯は、今現在あるスマートフォンなどの映画記録アプリは気軽さに欠けており、いちいち自分でアプリを起動する必要があります。それが非常に煩わしく結局評価が後回しになって、「あの映画何だっけ」となることが多かったからです。現在この拡張機能はUnextとnetflix、amazon prime、Disney plusでの対応になっています。(問題のセクション参照のこと)
https://github.com/BB-KING777/Streaming_Video_Tracker
↑↑↑ここからダウンロードできます。releasesからダウンロードしてください。
chromeの拡張機能管理画面から、パッケージ化されてない拡張機能から、解凍したこのzipを導入してください。
# UI画像
### アプリ画面はこちら
とabort()を使ったサンプルコードと結果を示します。* fulfill(): レスポンス内容を変更
https://playwright.dev/docs/api/class-route#route-fulfill
* abort(): リクエストを中断
https://playwright.dev/docs/api/class-route#route-abort### パターン1: レスポンスボディを変更
“`sample1.js
// レスポンスパラメータを変更する
await page.route(“**/api/logIn”, (route) => { //第一引数は任意のapiパス
route.fulfill({
モンテカルロ法シミュレーション。
#### ショートストーリー: 「データが語る、東京の米の未来」
東京の高層ビルの谷間にあるオフィスで、田中陽介はモニターに映し出されたコードに集中していた。彼の仕事は、未来の東京の食料供給を支える重要なプロジェクトだった。それは、東京に住む何百万人もの人々にとって最も重要な食料、つまり「米」の適正在庫量をデータに基づいて予測することだった。
日本の首都東京は、世界中のどの都市よりも多くの米を消費する。だが、都市化と人口の変動に伴い、米の需要は変わり続けていた。もし在庫が不足すれば、都市全体にパニックが広がるだろう。一方で、過剰な在庫は無駄なコストを生む。そこで陽介は、これらの複雑な問題を解決するために、モンテカルロシミュレーションを使ってデータを分析することにした。
文字列収集 (paizaランク S 相当) を普通にツリー構造で解く(JavaScript)
## 問題
https://qiita.com/official-events/9ab96aa95d62fe3cbdd7
これの
https://paiza.jp/works/mondai/real_event/word_collection
これです。
標題の通り、今回は(自分的には)普通にやります。## 説明
入力の中の「文字列と価格」の行の部分、
“`
paiza 16
pizza 1
paizaio 4
paizapoh 2
pizzaio 8
“`ここをどういうデータ構造で持つかという話ですね。
1文字づつ辿っていくツリー構造にしましょう。ノードは単純です。“`
Node {
total: 自身と配下のノードの合計額,
index: { a: Node, b: Node, … }
}indexの要素は存在するパターンのみ
“`上記入力を例にすると以下のような構造になります。
“`
(※「total」「index」の表記は省略しています)
(※ルール的に空文字がなく、ルートのtotalは使われないので0のままにしてありま
新たな計算の形。 64ビット（８バイト）のメモリを持つシンプルな並列ビット演算計算機。
#### ノイマン型計算機と並列化されたGPUの物語
東京の摩天楼の一角にあるハイテク企業で働くプログラマ、田中悠一は、今や彼の専門知識が試される重要なプロジェクトに挑んでいた。彼の目の前に広がるのは、かつて世界を席巻したノイマン型計算機の古典的なモデルだ。しかし、今日はそれを新たな次元に進化させるという、並列計算のシミュレーションを行う日だった。ノイマン型計算機とは、メモリーを一次元の配列(チューリングマシンの無限に長いテープ。)として保持し、そのメモリーに対して演算ユニットが計算を行うという極めてシンプルなモデルだ。悠一は、これを何度も勉強し、実装し、理解してきた。しかし、今日彼が取り組んでいるのは、この古典的な計算機モデルを並列化し、GPUのような強力な
日本語プログラミングアシスタント (HTML対応)。AIを使ってゲームコードを自動生成するシステム。
https://qiita.com/muratatetsutaka84/items/bf1519d64501cbbebda9
#### ショートストーリー: 「東京のプログラマとAIが紡ぐゲームの世界」
東京の夜は深く、ネオンの光が街を彩る中、一人のプログラマが熱心にキーボードを叩いていた。彼の名前はタケシ。東京の先端IT企業で働く彼は、最近特別なプロジェクトを任されていた。それは、AIを使ってゲームコードを自動生成するシステムを開発するというものだった。タケシのデスクには、最新のディスプレイと、温かい緑茶のカップが置かれていた。ディスプレイには、JavaScriptで書かれた複雑なコードと、リアルタイムで生成されるゲームのプレビューが映し出されている。タケシは、AIが生成したコードがどのよ
ElectronでMacOSデスクトップアプリを作ろう！初心者向けステップバイステップガイド
## はじめに
こんにちは！今回は、Electronを使ってクリックするたびに名言が変わるおしゃれなデスクトップアプリを作成します。このアプリは初心者でも簡単に作れるので、初めてのデスクトップアプリ開発にぴったりです。ぜひ一緒にチャレンジしてみましょう！
## Electronとは？
**Electron**は、JavaScript、HTML、CSSを使用してクロスプラットフォームのデスクトップアプリケーションを作成できるフレームワークです。GitHubによって開発され、Visual Studio CodeやSlackなどの有名なアプリケーションにも使われています。
## 事前準備
まずは、Electronを使うために必要な環境を整えましょう。
### 1. Node.jsのインストール
Electronを動かすためにはNode.jsが必要です。以下の公式サイトからNode.jsをダウンロードしてインストールしてください。
[Node.js公式サイト](https://nodejs.org/)
### 2. Electronのインストール
Node.jsのインストー
【paiza×Qiita】JavaScriptで最小文字数での解答を目指す【Bランク編】
# はじめに
こちらの[paiza×Qiita記事投稿キャンペーン](https://qiita.com/official-events/9ab96aa95d62fe3cbdd7)のCランク問題を、コードゴルフの要領で最小文字数で解答することを目指しました。
言語はJavaScriptです。他のランクはこちら
– [Dランク](https://qiita.com/TD12734/items/8864fc925e4b35efea13)(標準入力の解説もこちら)
– [Cランク](https://qiita.com/TD12734/items/746336ad4f7ffc38d989)# 多分これが一番短いと思います
## 3Dプリンタ
“`js
x=0;a=[];require(‘readline’).createInterface({input:process.stdin}).on(‘line’,l=>{if(x){if(l==”–“&&!–z)a.map(c=>console.log(c.join“));for(i=0;i
【2024年最新版】 Reactの状態管理ライブラリ比較３選＋α（Redux, Zustand, Jotai）
Reactの一大テーマ、「状態管理」
私は今までReduxを使っていました。ただ、最近ライブラリがどんどん増えてきた中で色々試したくなったので、この機会に見てみます。
今回は、代表的な状態管理ライブラリ「Redux」、「Zustand」、「Jotai」で簡単なカウンターアプリを例にそれぞれメリット・デメリットを比較しました。
興味ある部分だけ見て自分に合うライブラリを見つける参考にしてもらえれば嬉しいです。
:::note warn
ちなみに…
「Recoil」も有名ライブラリの一つなのですが、2023年で更新が止まりメンテナンスされていないみたいなので今回候補からは外しました
:::
## そもそも状態管理って何？なんで必要？
（初心者向け超ざっくり）
:::note warn
「状態管理」はわかると言う方は次のセクション「今のトレンドを見ておく」まで飛んでください
:::「状態管理」の「状態 (state)」とは、簡単に言うと「**コンポーネントが持つデータ**」のことです。
例えば、＋のボタンを押すとカウンターの数字が１ずつ増えるという簡
[GAS, JavaScript] 脱初心者！配列の filter, map, find を使えるようになろう
# これは何？
非エンジニア向けにGoogleAppsScript(GAS)レクチャーを行なっています。プログラムが全くの初めての人を対象にしています。このレクチャーを卒業し、基本的なことが理解できるようになった人が「その次に知っておいたほうがいいこと」の一つに **配列の扱い** があるなと思いました。これを説明してみよう、という記事。
実務でよく使いそうな、`filter`, `map`, `find` についてです。
# 対象者
* GoogleAppsScriptおよびJavaScriptでの基本構文は知っている
* 具体的には [ケーススタディでしっかり身につく! Google Apps Script超入門](https://www.amazon.co.jp/dp/4297126273) を修了している* **アロー関数について理解できている** → まだの人は[私がアロー関数を理解するまで](https://qiita.com/sakaimo/items/678dc05105ecce3a642a)を先に読んでおいてください！
# [1] 配列の要素のう
【Javascript】Consoleやdebuggerを使った開発支援
他にも競合記事が多そうですが！
社内で JavaScript を書いている時に、どのようにデバッグしたら良いかという質問があり記事にしました！以下、サンプルは Vue にて表示しているが、基本的に JS 系列ならすべて同じ。
—-
https://developer.mozilla.org/ja/docs/Web/API/console
:::note info
【Console 画面】
「F12」や右上の「… > その他のツール > デベロッパーツール」画面にて
「Console」タブを選択した際に閲覧できる場所。
ブラウザのターミナル。
Show console drawer を ON にすると、いつでも友達になれて便利。
レクチャーを行なっています。プログラムが全くの初めての人を対象にしています。このレクチャーを卒業し、基本的なことが理解できるようになった人が「その次に知っておいたほうがいいこと」の一つに **配列の扱い** があるなと思いました。これを説明してみよう、、、
と思ったのですが、実務でよく使いそうな、`filter`, `map`, `find` について説明するには **アロー関数** を説明しないと話が繋がらないので、この記事では **アロー関数が存在しない世界線のJavaScriptを書いていた私が、アロー関数をどうやって理解したのか** を記述します。
# 対象者
* GoogleAppsScriptおよびJavaScriptでの基本構文は知っているレベル
* 具体的には [ケーススタディでしっかり身につく! Google Apps Script超入門](https://www.amazon.co.jp/dp/4297126273) を修了しているレベル# 関数を変数/定数に代入できるのは
[GAS, JavaScript] try-catch と Error のこと
# これは何？
非エンジニア向けにGoogleAppsScript(GAS)レクチャーを行なっています。プログラムが全くの初めての人を対象にしています。このレクチャーを卒業し、基本的なことが理解できるようになった人が「その次に知っておいたほうがいいこと」の一つにErrorへの対応があるなと思いました。これを説明してみよう、という記事。
# 対象者
* GoogleAppsScriptおよびJavaScriptでの基本構文は知っているレベル
* 具体的には [ケーススタディでしっかり身につく! Google Apps Script超入門](https://www.amazon.co.jp/dp/4297126273) を修了しているレベル# エラーとは？
初学者にとってエラーは可能なら見たくないし、メッセージも英語だから読みたくないし、もうイヤだ。という心境になりますよね？私はなりました。
だけど、エラーは「ここがおかしいよ」って教えてくれているので、それを読み解くことでエラーを解消することができます。
例えば下記の関数を実行するとエラーが出ます。
“`js
fu
javascript のタスク系処理を Promise / AsyncIterator を交えつつまとめてみた
# サンプル
## playground
See the Pen
interval example. by juner clarinet (@juner)
on 【API不要】Twitterのリストを無料で出力する方法(自分用メモ)# はじめに
要素を特定できるクラスが全然なくて、多分、
人によってクラス名が違う可能性もありますので、他の方の環境でも動作することは保証できません。# 何が問題か
ツイッターのリストって、エクスポートできないんですよ。
Twitter APIでリスト出力は可能なんですが、Basic以上のプラン契約が必要で、べらぼうにお金が必要なんですね。
ネットでリスト出力できるスクリプトも有料販売されていますが、私の場合、リストに登録しているユーザー数は100人程度なので、別にAPIやスクリプト使うほどのことでもないなと思いまして。
なんとか無料でできないかと模索した結果、できました。# 実装
“`javascript
let resultArray = [];function processElements() {
const elements = document.querySelectorAll(‘div.css-175oi2r[data-testid=”cellInnerDiv”]’);elements.forEach(element => {
