f@ctor

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

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

JavaScript の Segments の使い所を考える

JavaScript の Segments という機能を知りました。



Pop UP Window

「アドバイザー・にゃんこ」

元記事を表示

バッククォート(`)で文字列を囲った際のJavaScriptの挙動について

TypeScriptのソースコードを読んでいると、文字列を囲う際に、シングルクォート `'` やダブルクォート `"` ではなく、バッククォート `` ` `` を使うことがあります。

[JavaScript Primer](https://jsprimer.net/basic/data-type/#string) によると
バッククォート`` ` ``で囲んだ範囲を文字列とするリテラルのことを **テンプレートリテラル** と呼ぶそうです。
ES2015から導入されたリテラルで、TypeScriptを書くなら頻繁に目にしてもおかしくないリテラルですね。

## (本題)テンプレートリテラルの主な特徴

1. 複数行の文字列をそのまま書くことができる
2. 文字列内で `${変数名}` と書くと、変数の値を埋め込むことができる

### 1.複数行の文字列をそのまま書くことができる
```JavaScript: sample01.js
`複数行の
文字列を
入れたい`; // => "複数行の\n文字列を\n入れたい"
```

### 2.文字列内で `${変数名}` と書くと、

元記事を表示

JQuery の ready の実装

# JQuery の ready の実装

DIV でもなんでも ready が実行できて追加要素の描画完了時に実行してくれるのでどういう実装してるのかと思ってソース読んだら setTimeout してた

[JQuery 3.7.1 のソース](https://code.jquery.com/jquery-3.7.1.js)

## 一部抜粋
``` javascript
if ( document.readyState === "complete" ||
( document.readyState !== "loading" && !document.documentElement.doScroll ) ) {

// Handle it asynchronously to allow scripts the opportunity to delay ready
window.setTimeout( jQuery.ready );

}
```

## 動作を推測
* setTimeout を呼び出す
* 描画含む他のタスクに処理が一旦切り替わる
* 描画処理が終わったら処

元記事を表示

Quine を書いてみた

年賀状でよくみる Quine を自分自身でも作ってみたかったので、作ってみました。

```js
f=()=>{eval(`p='ThisIsAQuine!';o='';t='f='+f+';f();';r='\\u0020';s='\`';t=t.replace(/[\\n]|[
\\s]/g,'').split('\`');u=t[4];t=t[0]+s+t[1]+s+t[2]+s+t[3];c=0;a=[[0,92],[0,92],[0,92],[0,92]
,[0,92],[0,92],[0,8,16,48,51,92],[0,6,18,48,51,92],[0,5,10,15,19,48,51,92],[0,4,8,16,20,92],
[0,3,7,18,21,92],[0,2,6,18,22,92],[0,2,5,19,22,92],[0,2,5,19,23,28,31,39,42,48,51,57,60,63,6
8,81,87,92],[0,1,5,20,23,28,31,39,42,48,51,57,60,61,70,79,89,92],[0,1,4,20,23,2

元記事を表示

【2024年版】フロントエンドに求められるミドルレベルのエンジニアと達成する為にすべきこととは

# はじめに

経験年数を数年積んでくると、大体の実装はできるようになったけど、この先何を目指すべきなんだろう？と迷子になってしまうことがないでしょうか。
今回は私と同じような迷える子羊に「ジュニアレベルを卒業してミドルレベルのエンジニア」を目指す際に意識すべきことや、具体的に何をやっていけばいいのかをまとめてみました。

これは自分のための記事であると同時に、同じようにミドル層、ひいてはシニアレベルのエンジニアを目指す方にも刺さる内容になっているかと思います。
今、**自分がどのようにキャリアアップしていくべきなのか**、どのような道筋でスキルを磨いていけばいいのか。そんなふうに悩んでいる方は是非読んでみてください。

今同じくキャリアに悩むフロントエンドエンジニアの方の道標になれば幸いです。

※内容はフロントエンジニアが対象になりますが、バックエンドの方もなにか通じるものがある…かもしれません。

ジュニアレベルのエンジニアについては下記記事で詳しくは解説していますので、気になる方は是非読んで見て下さい！

https://qiita.com/mamimami0709/items

元記事を表示

JavaScriptでかの有名な水の移し替えパズルを解く【反復深化深さ優先探索】

## 元ネタ

https://qiita.com/jerrywdlee/items/c7bbcbb6c68e37e7ef71

## 問題

水が5L入る容器と3L入る容器がある、この2つの容器だけを使って、
4Lの水を量るにはどうすれば良いですか？
水はいくらでも使えるものとします。

## ソース

```js
class 容器クラス {
constructor(最大容量) {
this.容量 = 0;
this.最大容量 = 最大容量;
}
get 残り容量() {
return this.最大容量 - this.容量;
}
水を入れる() {
this.容量 = this.最大容量;
}
水を捨てる() {
this.容量 = 0;
}
水を移す(dst容器) {
const 移動する容量 = this.容量 >= dst容器.残り容量 ? dst容器.残り容量 : this.容量;
this.

元記事を表示

【JavaScript】Canvasのバグを疑ってしまう興味深い現象

## 何が言いたいのか

PCとスマホでCanvasの表示が変わる現象があった。

## 何を表示したいのか

Canvasいっぱいに
```
🌓🌓🌓🌓🌓🌓🌓🌓🌓🌓🌓
🌓🌓🌓🌓🌓🌓🌓🌓🌓🌓🌓
🌓🌓🌓🌓🌓🌓🌓🌓🌓🌓🌓
🌓🌓🌓🌓🌓🌓🌓🌓🌓🌓🌓
```

といった感じに表示したい。

## const emoji = "🌓";

### PC

### スマホ

## const emoji = "🌗";

### PC

JavaScriptでインデックスソート

# JavaScriptでインデックスソート

インデックスソート必要になるたびに思い出しながら実装してるのでメモ

## インデックスソートとは？
``` javascript
var a = [2, 3, 1];
// ↓インデックスソートする
// > [2, 0, 1] と返ってくる
// a[2] = 1
// a[0] = 2
// a[1] = 3
// ソートした場合の参照インデックスを返してくれる
```
と返ってくるソートです

## ソースコード

``` javascript
function argsort(x) {
var tmp = [];
for(var i = 0; i < x.length; i += 1) { tmp.push([i, x[i]]); } tmp.sort(function(a, b) { return a[1] - b[1]; }); var idxs = [];

元記事を表示

CookieClickerのチートプログラム

# あらまし
完全に正月の自由研究で、CookieClickerのチートプログラムを書いた。
# 経緯
1000回転生する隠し実績をちまちま進めていたのだけど飽きがきたし、せっかくなので自動化で遊んでみることにした。元々はSeleniumに挑戦しようと思っていたのだけど、Macへの導入がなかなか大変そう・・Automatorでやろうかな？と色々考えたが
GoogleChrome拡張機能の、
[ScriptAutoRunner](https://chromewebstore.google.com/detail/scriptautorunner/gpgjofmpmjjopcogjgdldidobhmjmdbm?hl=ja)
のJavaScriptで素朴にやることにした。
コンソールのメッセージは気にしない。
# そもそも
数値操作をすれば転生実績は解除できたりしそうだけど、あくまで「ブラウザ操作の自動化」をやりたいというのが当初の目的だったので、謎に地道な操作を自動化しているかもしれない。チートのことをよくわかっていない。

# コード
```javascript
//フラグ
let s

元記事を表示

Rails: JavaScript からコントローラの POST メソッドに対して非同期でリクエストを送信する

一定の時間が経過したら強制的に投稿するフォームを作成する。
questionsコントローラのsubmitメソッドに対し、選択した`choice_id`を送信する。

```html
<%= form_with(url: submit_questions_path, method: :post) do |form| %>

<%= form.radio_button :choice_id, 1 %>
<%= form.radio_button :choice_id, 2 %>
<%= form.radio_button :choice_id, 3 %>

<%= form.submit '投稿' %>
```

もちろん、上記のフォームで選択をして投稿ボタンを押せば投稿ができる。
しかし今回は、一定の時間が経ったらjavascriptで強制的に投稿させる。
それをしてくれるjavascriptは以下。
viewにベタ打ちなどして記述する。

```javascript

var postAfterSeconds = 5;
setTimeout(function()

元記事を表示

p5.js でのループアニメーションで「frameCount」と「剰余演算 or 三角関数」を使う ：2D・3D のそれぞれで x方向に往復する動きを例に ＋α

## 今回の内容
p5.js でループするアニメーションを作る際に、frameCount と剰余演算を組み合わせたものをよく使います。それに関連する話では以下の記事を書いていました。

●frameCount・剰余演算を使った p5.js でのループアニメーション：アニメーションの最初と最後に空白の時間を作る - Qiita
　https://qiita.com/youtoy/items/68f9dc64cb6cbe912bc4

そして今回は、「値の増加 ⇒ 値の減少 ⇒ 値の増加 ⇒ ...」という内容のループアニメーションを作る時の話です。それについて、「frameCount と 剰余演算」を組み合わせた方法について書きつつ、「frameCount と 三角関数」を組み合わせた方法も合わせて書いてみます。

## 2D
まずは 2D の描画で、横方向の位置座標を変化させる場合の例を書いてみます。

### 実装内容
最初に、例として実装した 3つの内容を掲載します。
他の実装方法もあると思いますが、試してみた内容のうち 3つをピックアップしてみました。

```javascrip

元記事を表示

async/await 比較（C#, JavaScript, Python）

## メッセージループ

### C#

Dispatcher.Run()

```C#
using System.Windows.Threading;

Dispatcher.CurrentDispatcher.InvokeAsync(() =>
{
// いろいろな処理...

// メッセージループを終了させる
Dispatcher.CurrentDispatcher.BeginInvokeShutdown(DispatcherPriority.Normal);
});

Dispatcher.Run();
```

WPF とか WinForms とかでは、フレームワークがすでにメッセージループを回しているので、自分で Dispatcher.Run() する必要はない。

### JavaScript

自分で書く必要なし。

### Python

asyncio.run(最初に実行するasync関数)

```python
import asyncio

async def main():
# いろいろな処理...
pass

asynci

元記事を表示

Promiseを繰り返し呼び出して制御する

# Promiseを繰り返し呼び出して制御する

Promise を繰り返し呼び出しなんらかのフラグにより呼び出しを中止します

``` javascript
var loopCounter = 5;
function LoopPromise() {
console.log("LoopPromise: ", loopCounter);
if(loopCounter > 0) {
new Promise(function(resolve) {
setTimeout(function() {
loopCounter -= 1;
LoopPromise();
resolve(true);
}, 1000);
});
} else {
// NOP
}
}
```

## 想定される使い道
下記のような使い方を想定しています
* APIのポーリング　…　レスポンスが０の間は

元記事を表示

Date型のmonthはmonthIndexなので注意

# このページは？
javascriptの`new Date(2024, 1)`と`new Date('2024-1')`の違いについて説明することができますか？
あまり直感的な仕様じゃなく、混乱したのでまとめます。開発者ツールのconsoleで気軽に確かめられることなので、是非自分でも動かしながら読んでください。
# 内容
## monthにはmonthIndexが格納されている
前提として、Date型のmonth要素には月(1月-12月)ではなく、 monthIndex(0-11)が格納されています。
つまり、単純に`getMonth()`するとずれた値が返ってくる。
```javascript
// date: 2024年1月
date.getMonth()
// 結果: 0
```
なので、現実世界の月として扱う際は+1する必要がある。
```javascript
console.log(`${date.getFullYear()}年${date.getMonth()+1}月`)
// 結果: 2024年1月
```
## new Date()するときの注意
ここからが本題です

元記事を表示

【React】ChatGPTを使っておみくじサイトを作ってみた

# はじめに

あけましておめでとうございます。KDDIアジャイル開発センター所属のtakateinです。
大晦日の日に「今年はAIが本当に流行ったけど、chatGPT使って開発してないなぁ」と、ふと思い作ることにしました。

# なぜ、chatGPTを使うのか
"おみくじを引くだけ" のアプリだと面白くなくて、一言メッセージを添えるとユーザーも楽しそう。
この一言メッセージを人間が考えてDBとかに保存してランダムで使用するよりかは対話型AIに考えてもらった方が面白そうだから。

# 完成品
こちら
http://agorophius.com/game/2024_AgoMikuji/index.html

個人でバンド活動をしており、SNSを観てくれる方が年始から気軽に楽しめるコンテンツが提供出来たらいいなー と思い作りました。
chatGPTには、「ユーザー名を読み込み、ランダムにおみくじの結果を返す。その結果からバンド名にあった面白い曲名」を考えてもらうようにしました。

↓↓↓こんな感じで返ってきます↓↓↓
_________
「ふん、たかてぃ～んさんへのおみくじね。せーのっ！中

元記事を表示

OTHERカテゴリの最新記事