JavaScript関連のことを調べてみた2022年04月02日

Railsでlink_to deleteが出来ない

某オンラインスクールで学習4ヶ月目、
Railsにてオリジナルwebアプリを作成していて
link_toの”削除”が実行できなくてぐるぐるしたので備忘録として。
　

dpテーブルに投稿したレコードを削除するため実装、削除出来ず。
“`ruby
<%= link_to "報告の削除", dp_path(@dp.id), method: :delete %>
“`
　
エラー画面も出ず、元の画面に戻ってきてしまう。
ログを見るとどうやらGETで動いている模様。
　

参考にした記事
https://qiita.com/mami3sansan/items/6a9710b3ffdc937aa5f3
https://nabelog.org/695/
https://takayuki-inoue.hatenablog.com/entry/2018/01/12/105846
　

その他いくつか読んでみたが、解決に至る糸口が見つからず。
上記記事等から得た知識を元に思い当たる節を探ってみたところ、
作成初期に放り込んでいた、bootstrap絡みの
cssやらjavascriptあたりに要因が

Phaser.jsで作った大富豪をユーザー登録制にしました

Laravelでバックエンドを作成し、大富豪をユーザー登録制にしました。
成績がバックエンドに登録され、ネットで確認することができます。

大富豪のURL
https://www.new-doumeishi.me/vs_daihugou/public/

成績確認のURL
https://www.new-doumeishi.me/vs_daihugou_server/show

@paramってなんだ

# ＠paramとは
結論から行くと@paramというのはJSDocというツールのタグである

## JSDocとは
JavaScript用のソースコードにデコレーターを追加するツール

## 主なタグ
– ＠type
– 変数の型を記述
– ＠param　
– 関数の名前、型を記述
– ＠return
– 戻り値の型を記述
– ＠todo
– 終わっていない課題を記述
– ＠readonly
– 読み取り専用を示す

## 実際の使用例
“`javascript
/**
*テスト変数
* @type {Number}
*/
const test = 10;

/**
*テスト関数
* @param {Number} arg1
* @param {String} arg2
* @return {Boolean}
*/

function test(arg1, arg2) {
return false
}

“`

## 参考資料

https://jsdoc.app/

Kintone 現在時刻を秒にする

*Kintoneで秒がとれないってほんと！？？

“`
const currentDate = luxon.DateTime.local().startOf(‘day’);
“`

[Kintone](https://developer.cybozu.io/hc/ja/articles/900000985463-Luxon-%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6-kintone-%E3%81%AE%E6%97%A5%E4%BB%98%E3%82%84%E6%97%A5%E6%99%82%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB%E3%83%89%E3%81%AE%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%83%E3%83%88%E3%82%92%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA%E3%81%99%E3%82%8B)で紹介されているようにやってみたら

“`
2022-04-01T00:00:00.000

Kintone 自動入力「レコード番号」取得方法

目的：自分のメモ
だからちょっと見ずらいけど
がまん、がまん
そのうちうまくなるでしょ。

*レコード追加の際は
“`
kintone.events.on([‘app.record.create.submit.success’], function(event)
“`
レコード保存が完了した後でないと取得できない

“`
var record = event[‘record’];
window.alert(‘レコードID： ‘ + record.$id.value + ‘ 。’);
“`
取得した後にこの数値を加工しようと思ったけどできるはずもなく、だんねん

以上

ガワネイティブなWebGLアプリをUnityで作った時の話

# 概要
あるネイティブアプリ上で動くゲームを作って欲しいという案件があり、いくつか調査をした上でUnity WebGLで作ることになりました。その際、詳細は伏せますが、アスペクト比を固定しないと、大きく破綻してしまう機能などがあることが発覚し、対応することになった話になります。

# アスペクト比を維持したスケーリング
概要にある通り、アスペクト比を固定する必要がでてきました。
WebGLTemplatesを作る事になるのですが、あまり元のテンプレートを弄らずに、スケーリング処理をするJavaScriptを追加することで対応を図りました。

“` javascript: resize.js
var aspect_with_height = 0.5625;
var aspect_with_witdh = 1.7777;

window.onload = function () {
canvas = document.getElementById(‘unity-canvas’);
canvas.style.right = 0;
canvas.style.left

【JavaScript, 正規表現】replace()で複数文字列を置換した際のエラーについて

## はじめに
+ 実行環境：Google Apps Script
+ 文字列 `log(x)` から `Math.log(x)` への置換

## エラー内容
`log(x)` が１つの場合は問題なかったが、`log(x) + log(y)` のように複数になると一部しか置換されなかった。

“`javascript:js
function convertExpression(str){
str = str.replace(/log\((.+)\)/g, “Math.log($1)”);
console.log(str); // Math.log(2) + log(3) ← 置換されていない
return String(eval(str));
}

console.log(convertExpression(“log(2) + log(3)”)); // ReferenceError: log is not defined
“`

## 原因
[基本的な正規表現一覧](https://murashun.jp/article/programming/regul

【Deno1.20～】import-mapを自動検出する

昔は実行時にimport-mapを自動で検出する方法が無かったため、コマンドラインフラグの`–import-map`を渡す必要がありました。

“`shell
deno run –import-map=./import_map.json ./mod.ts
“`

しかし、Deno1.20以降では[deno設定ファイル](https://qiita.com/access3151fq/items/7aa44ee69b4a5ff867c7)が自動検出されるようになったため、この機能を利用してimport-mapを自動検出できるようになりました。

## import-mapを自動検出する方法

#### 1. deno.jsonを作成する

`deno.json`（deno設定ファイル）を作成します。
作成する場所はプロジェクトフォルダのルートディレクトリでOKです。

“`:プロジェクトフォルダ（例）
project/
├ deno.json
├ import_map.json
└ mod.ts
“`

ファイルの中には以下のように記述します。（`”import_map.

BOM付きCSVファイルを読み込むときの注意点

## 環境
node.js v10.19.0
Ubuntu 20.4

## はじめに
UTF-8のCSVファイルには、BOM付きのCSVファイルととBOMなしのCSVファイルの２種類が存在しています。CSVファイルを読み込んで中身を取得する場合、BOM付きのときは、BOMを削除しないとデータが正しく取得されないことになります。（BOMが付いたままでデータを取得すると、処理に誤りが生じることになります）

CSVファイルを読み込んだら、まずは、BOMが付いているかどうか判断して、付いていれば、データを取得する前に削除する必要があります。

BOMが付いているかどうかを判断する方法は、CSVファイルをダブルクリックして、Excelで開いて、文字化けが起こればBOMが付いていない。文字化けが起こらなければ、BOMが付いていると判断することができます。

CSVファイルをエディタで開いて中身を確認しても、BOMは改行コードのように、目で見えるものではないため、エディタでは直接確認することはできません。

## コードの解説
test_bom.csvをBOM付きで作成します。test_bom.

【パブリッシャー】HTMLとJavaScriptで対話型WEBレポートを作成してみる

[Sharperlight](https://sharperlight.jp/)パブリッシャーを利用して、WEBレポートを作成し会社内LAN上等に公開する場合は、通常は部門間および社員間で情報をリアルタイムで共有するだけで、閲覧している社員はそのレポートに対してなんらアクションを起こすことができません。
しかしながらWEBレポートを通じで、閲覧者に入力を促したい場合が業務上多々存在すると思われます。
そのような場合、HTMLとJavaScriptを利用して、[Sharperlight](https://sharperlight.jp/) Webレポートを対話型レポートに拡張することが簡単に行えます。そうすることで、[Sharperlight](https://sharperlight.jp/)にはセキュリティ機能組み込み可能な**書き戻し機能**が標準で備わっているので、[Sharperlight](https://sharperlight.jp/)RESTfulサービス経由で入力された値をデータベースに書き込むことも可能になります。

この記事では、レポート上へのテキストBOXとボタ

Seleniumのセットアップから基本的な使用法のまとめ【Javascript, Node.js, chrome】

Javascriptを用いてSeleniumを動かしたいという方向けに記事をまとめました。
Node.jsにおけるSeleniumのセットアップからJavascripを用いた基本的な使い方をまとめています。

Seleniumがどういったツールなのかなどの説明はこの記事の対象ではありません。

ご参考になれば幸いです。

※私の理解でまとめていますので、間違っている箇所の修正や情報の追加などございましたらコメントください。

# Seleniumセットアップ(Node.js, chrome)

環境:windows10, Node.js
使用言語: Javascript
ブラウザ: chrome

※今回はブラウザはChromeのみを対象としています。

## 1.Selenium libraryのインストール
seleniumをインストールします。
`npm install selenium-webdriver`

## 2.chromedriverのインストール

Chromeブラウザを操作するにはchromeのweb driverが必要になります。

選択肢1 :chrome

Agora.ioでカメラ映像にWaterMark(透かし)を入れる方法

Agora.ioではWebSDKでカメラ映像を取得するAPIが用意されています。ですが、今回の件名にあるように少し映像を加工して配信したい場合もあります。
そのような要件に対応すべく、加工した映像を配信するAPIも用意されています。
この記事では例としてWaterMark(透かし)を入れる方法を解説します。

サンプルは[Github](https://github.com/fu-jimoto/AgoraIO-WaterMark-Web)に公開しています。

## 実装方法
### カメラ映像の取得
AgoraのAPIでカメラ映像取得する場合は[createCameraVideoTrack](https://docs.agora.io/en/Video/API%20Reference/web_ng/interfaces/iagorartc.html#createcameravideotrack)を利用しますが、今回は加工をする為、getUserMediaを利用します。
canvas上にカメラ映像と画像を描画しています。

“`javascript
const canvas = doc

Core Web Vitals（コアウェブバイタル・CWV）改善の施策を考える

## Core Web Vitals（コアウェブバイタル・CWV）改善の施策を考える

### はじめに
　Core Web Vitals（コアウェブバイタル・CWV）のスコアを改善する機会があったため、勉強も兼ねてスコア改善するためにどのような方法があるかをまとめたいと思います。
コアウェブバイタルは
・LCP（ページの読み込み速度）
・FID（インタラクティブ性、応答性）
・CLS（ページレイアウトなどの視覚的安定性）
の3つがありますが、今回は特にLCPの改善を中心にまとめました。

### スコア改善を検討した結論

　・施策を適用すれば必ずスコアが改善するとも限らないので、施策を入れた場合と入れていない場合で改善が見られるかを何度かスコア計測して確認してみることが大事。
　・スコアを改善する施策は色々あるが、手間と後の保守性を考えた施策を選ぶべき

### スコ

爆速でするNuxtとSkywayの連携

こんにちは！関西の大学に通うキンジョウです！もう春ですね。桜がとても楽しみです！！

## 今回は、NuxtとSkywayを連携をやっていきたいと思います。

### 成果物

Skyway使って通信試してみた
意外と簡単で、おもしろい！ pic.twitter.com/OBqYIl0Uhw

— キンジョウ/金城翔太郎 (@kinjyo1130) March 29, 2022

こんな感じで通信できるこ

jQueryで改行が効かない

## jQueryで改行ができなかった件について

## 修正後（改行できるようになった）
“` js:改行できる
var message = “この文は改行できます。” + “
” + “この文は改行できます。”;
$(‘書き換えたいクラスやidなど’).html(message);
“`
“` :結果
この文は改行できます。
この文は改行できます。
“`

## 修正前（改行できない）
“` js:改行できない
var message = “この文は改行できません。” + “\n” + “この文は改行できません。”;
$(‘書き換えたいクラスやidなど’).text(message);
“`
“` :結果
この文は改行できません。この文は改行できません。
“`

## 改行するために変更したこと
– 改行タグを `\n` から `
` にした
– `text()` ではなく `html()` にした

jQueryのtext()とhtml()の違い

## text()について

text()は指定した要素のテキストノードを返す。
指定した要素に含まれる子孫要素のテキストノードすべてを結合して返す。
※ テキストノードは、「HTML 文書」や「XML 文書」の、タグ以外の文字データ
　

今回使用するhtmlの例
“` html:html

hoge1です

• hogeの中の1個目
• hogeの中の2個目

hoge1です

エープリルフールなのでJavaScriptの信じがたい話をします

今日はエープリルフールなので、JavaScriptに関する、にわかに信じがたい話(実話)をしたいと思います。実用的な話ではないので、息抜きがてらお読みいただき、「嘘だろ!?」とツッコミながらJavaScriptへの関心を少しでも深めていただければと思います。

思いつきでゆるめにとりとめもなく書いたため、内容がざっくりしているところがあります。詳しい方はコメントなどで補足いただけると助かります??‍♂️ できるだけ十分に調査したつもりですが誤りなどあればご指摘いただければ幸いです。

## JavaScriptは10日で作られました

JavaScriptは最も利用される言語のひとつで、[JetBrainsの統計](https://www.jetbrains.com/ja-jp/lp/devecosystem-2021/#What-programming-languages-have-you-used-in-the-last–months)によれば70%近くの開発者が使ったことがあるほど、広く普及している言語です。

IntersectionObserverクラスで画面をスクロールした時、要素をふわっと出現させる。

#はじめに
ホームページなどでよく見る、下にスクロールさせると下からふわっと画像が出現するようにするにはどうすれば良いのか気になったので調べてみました！

#コード紹介&解説

このような物を作っていきます！

See the Pen

ループ内でコールバック関数に変数を渡すとき、変数のスコープ次第でんぁぁぁぁってなる

## 突然ですが

以下のスクリプトの実行結果は

“`js
(function(){
let i = 0;
for (i = 0; i < 3; i++) { console.log(i); setTimeout(function(){ console.log(`hello ${i}`)}, 1000); } })(); ``` このようになります。 > 0
> 1
> 2
> hello 3
> hello 3
> hello 3

Oh……全部3になってやがるぜ……。

変数iのスコープがforのブロック外にあるので、`setTimeout`に渡しているコールバック関数は***最新のiの値***を参照します。
また、`let`で宣言せずに`for (var i = 0; i < 3; i++)`と記述しても同じ結果になります。varは関数以外ではブロックスコープを作りません。 この手のやつ、むかーし（letがないころ）すごいはまりました。イベントリスナーをループ内で設定しようとして「んぁ

【HTML5】マリオのコインの音をブラウザで出そう【ファミコン】

## サンプルページ
[こちら](https://bu-kurokky.github.io/mytest/beep/nes.html)になります。「？」マークをクリックしてもらえばきっと音がなるはずです！

## きっかけ
ライブ配信システムに「**TVでよく見かける[テストパターン](https://bu-kurokky.github.io/mytest/beep/tv_test1.html)のを出したら面白いかなぁ？**」と思いJSでbeep音を出すのを調べたら**AudioContextを使えばできる**というのが分かました。

そして、そのパラメーターが「’triangle,’sine’,’square’,’sawtooth’」というファミコン世代にドンズバなものだったので、「だったらやろう！」と思ったのがきっかけです。
（JavaScriptでbeep音をちょっと検索するとmp3やm4aのバイナリをbase64化して〜っていう古めの記事が出てくるんですが、今回のはJSのAudioContextで音声を生成して流します。）

## なぜファミコン世代にドンズバ？

令和の