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

FormDataオブジェクトにデータをappendしてAjaxでpostする

サーバー側にpostする値を加工する必要があったので
フォームに対して少し手を加えた。

“`javascript
data = new FormData($(“id”))

let hoge = ”;
data.append(‘fuge’, hoge)

$.ajax({
data: data,
type: “POST”,
dataType: “json”,
url: “url”
})
.done(function(data, textStatus, jqXHR) {
console.log(‘success’)
})
.fail(function(jqXHR, textStatus, errorThrown) {
console.log(‘fail’)
});
“`

送信実行結果

“`
Uncaught TypeError: Failed to construct ‘FormData’: parameter 1 is not of type ‘HTMLFormElement’.
“`

どうやらnew FormDataで

HTML関連にはまった新卒1年目のお話

## ＊はじめに
みなさん、はじめまして！
新卒一年目の初投稿です:tulip:
簡単に自己紹介します。
– 学生時代は文系
– ゼミでは映像制作をしていた
– 学部が経営情報学部だったためプログラミング入門があった
– 授業はすごく簡単でintやStringの話などだった

こんな感じでほぼプログラミングに触ったことがない初心者です。
Qiitaに何か書きたいけど、技術的なことはまだまだ提供できるものではないなと思い何を書こうと悩んだところ、今回は新卒1年目・プログラミング初心者がOJT期間中にHTMLにはまった・楽しいなと感じた話についてみなさんにお伝えできればと思います。

## ＊私が作成したもの
以下の通りレスポンシブデザインを用い、モバイルアプリ・webアプリ両方対応のレストランマップのデザインを作成しました。

“`css:text.css
@media screen and ( max-width:767px )
“`
このコードの下にモバ

JavaScript_”use strict”

“use strict” : エラーチェックを行う

“`
例１：

例２：

※　メソッド内でも、varをついてない時、グローバル変数になる
function(){
　// varをついてないため、グローバル変数
　testName = “test”;
　// varをついてるため、ローカル変数
　var testProperty = “test”;
}
“`

照度計のグラフをいじってみた

おうちモニター(oumon)で照度計のデーターをChart.js V2でグラフを表示しているのですが、いまいちピンときません。


気圧のグラフを流用して作っていました。

元々48時間分のデーターをsqlite3からmrubyでjsonにして受け取っていたのですが、cgiにパラメータを追加して3日分とかの取得を取得を可能にしました。

このデーターをjavascriptで日ごとに分解して、重ねて表示するようにしてみました。


Chart.jsぽくデフォルトのベジェ曲線で表示するよ

Bloggerの投稿画像の遅延読み込みの自動化にIntersection Observer APIを使ったJavaScriptプログラムと説明

Bloggerの記事／追加ページの投稿画像や動画の遅延読み込みをIntersection Observer APIを使って自動化するJavaScriptプログラムの内容を説明する。
“`JavaScript:JavaScript
// 記事の本文の要素（psbd）と記事の本文の中身に付けたnoscript要素（psbd）と記事の本文の要素の複製（npsbd）の取得
const psbd = Blog1.querySelector(“div.post-body”), blct = psbd.querySelector(“noscript.blog-content”), npsbd = psbd.cloneNode(false);

// 記事の本文の複製にnoscript要素のソースコードを入れる（noscript要素のソースコードはテキストだからそのままではHTMLとして扱えないため）
npsbd.insertAdjacentHTML(“afterbegin”, blct.innerText);

// 記事の本文の複製から画像要素を取得
const blimgs = npsbd.q

Bloggerの投稿画像のWebPのrwの自動化のJavaScriptプログラムと説明

Bloggerの記事／追加ページの投稿画像にWebPへ軽量化するrwのパラメーターを自動的に付けるJavaScriptプログラムの内容を説明する。

“`JavaScript:JavaScript
// 記事の本文の要素（psbd）と記事の本文の中身に付けたnoscript要素（psbd）と記事の本文の要素の複製（npsbd）の取得
const psbd = Blog1.querySelector(“div.post-body”), blct = psbd.querySelector(“noscript.blog-content”), npsbd = psbd.cloneNode(false);

// 記事の本文の複製にnoscript要素のソースコードを入れる（noscript要素のソースコードはテキストだからそのままではHTMLとして扱えないため）
npsbd.insertAdjacentHTML(“afterbegin”, blct.innerText);

// 記事の本文の複製から画像要素を取得
const blimgs = npsbd.querySelectorAll(

Bloggerの投稿画像のlazy-loadの自動化のJavaScriptプログラムと説明

Bloggerの記事／追加ページの投稿画像や動画に遅延読み込みのHTML属性のloading-lazyを自動的に付けるJavaScriptプログラムの内容を説明する。

“`JavaScript:JavaScript
// 記事の本文の要素（psbd）と記事の本文の中身に付けたnoscript要素（psbd）と記事の本文の要素の複製（npsbd）の取得
const psbd = Blog1.querySelector(“div.post-body”), blct = psbd.querySelector(“noscript.blog-content”), npsbd = psbd.cloneNode(false);

// 記事の本文の複製にnoscript要素のソースコードを入れる（noscript要素のソースコードはテキストだからそのままではHTMLとして扱えないため）
npsbd.insertAdjacentHTML(“afterbegin”, blct.innerText);

// 記事の本文の複製から画像要素を取得
const blimgs = npsbd.querySe

React で指定した数コンポーネントを繰り返したいとき

# Reactで指定した数繰り返したいとき
とりあえずお手軽に書きたいときに
“`typescript
// 100回繰り返される
{[…Array(100)].map(() => )}
“`
配列オブジェクトをスプレッド構文`…`で展開しmapでJSXで埋めている感じです

Alpine.js 紹介

##### Alpine.jsの公式の翻訳になります。
https://alpinejs.dev/

## 15 Attributes

#### x-data
HTMLのブロックに対して新しいAlpineコンポーネントとそのデータを宣言します
“`php

    …

“`
#### x-bind
##### 要素に動的にHTML属性を設定する
“`php

  …

“`
#### x-on
##### 要素のブラウザイベントをリッスンする
“`php

  Toggle

“`
#### x-text
##### 要素のテキストコンテンツを設定する
“`php

  Copyright ©
 
  

【メモ】非同期でhttpリクエストを実行する。

こんな感じでhttpリクエストができる。（メモ程度）

“`typescript:members.component.ts
ngOnInit(): void {
const myAsync = async (url) => {
const response = await fetch(url); //await で fetch() が完了するまで待つ
const data = await response.json(); //await で response.json() が完了するまで待つ
console.log(‘1’);
return data;
}
myAsync(‘http://localhost:8080/api/messages’).then(value => this.members = value).catch((err) => this.disp(‘データの取得に失敗しました。’));
console.log(‘2’);
}
“`
“`typescript:memb

【Next】動的なページへの遷移後に、指定の位置(hash)までスクロールさせたい

個人的な議事録です。

# 環境
– react: 17.0.2
– next: 11.1.3

# やりたいこと
– 動的に高さの変わるページへhash値を渡して、ページを遷移後に指定位置にスクロールさせたい

# 試してダメだったこと
– 遷移前の component に next/link で hash を渡す

“`tsx:一覧のcomponent
import NextLink from ‘next/link’;

// 省略

const UserListComponent = () => {

return (

【macOS】右クリックから短縮したAmazonリンクをコピーする

## まとめ

– Amazonってリンクが無駄に長い
– そういうサイト[^短縮サイト]もあるが、macの右クリックからコピーしたい
– Automatorを使って作った

https://github.com

## Amazonのリンクは長い

検索から飛ぶと、こんなに長くなってしまう
https://www.amazon.co.jp/%E3%83%A2%E3%83%AD%E3%83%83%E3%82%B3-%E3%83%95%E3%83%AB%E3%83%BC%E3%83%84%E3%83%A8%E3%83%BC%E3%82%B0%E3%83%AB%E3%83%88-60%E5%80%8B%E5%85%A5%E3%82%8A1BOX/dp/B007CEWVRW/ref=sr_1_4?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=3DI1RMHPRJFY3&keywords=%E3%83%A2%E3%83%AD%E3%83%83%E3%82%B3%E3%83%A8%E3%83%BC%E3%82%B0%E3%83%AB&q

Microsoft 365 を使っていくうえでの便利なブックマークレット集

# 背景
ブックマークレットを知ったらめっちゃ便利だって気付いたので、備忘録

まだ、「集」って言っちゃあかんレベルですが、徐々に増やしていければ・・ :hammer:

# Share Point 系

## サイトトップへ移動
サブサイトや、各種コンテンツアドレスになってる時に、Top サイトへ戻る
“`javascript: サイトトップへ移動
javascript:location.href=/.+?sites\/.+?\//g.exec(location.href)[0]
“`

:::note info
設定系ページをよく使う場合は、これを基礎として、URL生成してやると便利
後述の[サイトメトリックスへの移動](#サイトメトリックスへ移動) がその例
:::

## サイトメトリックスへ移動
サイト設定にも表れない記憶域メトリックスへの移動用

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/d80f85b4-6fc5-d9c9-5a49-057567fa

Google Spread Sheetで管理するLINE BOTの作り方【その３】

# 概要

以前書いた記事の詳細解説版、その③です。なぜその①②を先に書いていないかには触れないでいただけると助かります。

https://qiita.com/WdknWdkn/items/b78ae572e7cb5c9dfdca

# 今回やったこと

「スプレッドシート」のシート「debug」に、書き込む関数をつくります。

※下の画像みたいに書き込みをしてくれる関数です

# ソースコード内容

“`
/**
* 引数で与えた内容から、SpreadSheetに記載する関数
* ※あとから引数を増やして、書き込む内容を動的に変えられるようにする
*/
function debug()
{
// 書き込むシート「debug」を取得
const sheet = SpreadsheetApp.openById(SHEET_ID).

Google Map JavaScript APIのcustom markerの画像にスタイルを適用させたい

google map javascript apiのcustom markerで任意の画像を設定する際に、画像に対しstyleを適用させたい。

デザインを自由に指定するためにcustom overlaysを使う方法もあるが、markerでなんとかしたかった。

以下の方法で実現した。

“`
marker = new google.maps.Marker(
{
map: map,
position: latlng,
icon: {
url: ‘gazo.png’ + ‘#custom_marker’, #ここでセレクタを設定する
scaledSize: new google.maps.Size(50, 50)
},
}
);
“`

“`
img[src$=”#custom_marker”]{
border: 2px solid #939598;
border-radius:50%;
}
“`

注意なのは、マーカの最適化。
デフォルトだとgoogle map api側でマーカーの最適化を行うかどうか

jQueryでカラム数に関わらず左詰めにする

## 解決したい問題
よくある display:flex; で3カラムの横並びの配置の時、要素そのものは中央に配置したいけど余った要素は左詰めにしたい時の対処法。

※わかりやすいように親要素の背景を薄い薄いグレーに塗ってます。

See the Pen
Untitled by K S (Tensorflow.jsを使ってブラウザで任意の物体検出がしたい2022【Tensorflow.jsを使ってブラウザで物体検出編】

# はじめに
Tensorflow.jsを使って、ブラウザで任意の物体検出がしたい！
見事大ハマリしたので、同じエラーで苦しんでいる人を解決方向に導けたら。
後の自分への備忘録も兼ねて。

# 概要
Tensorflow.jsを使って最終的に有名巨大像(牛久大仏、鎌倉大仏、奈良大仏、高崎観音、自由の女神)をブラウザでリアルタイム検出するモデルを作成した。
その過程を2回に分けて記事にする。
大きくTensorflowのObject Detection APIを使ってモデルを学習する部分と、そのモデルをTensorflow.jsで使えるように変換、ブラウザで読み取れるようにする2ステップだ。
今回は後編の **【Tensorflow.jsを使ってブラウザで物体検出編】** である。
自作ライブラリでReact有利ベンチマークに挑んでみた

皆様、お疲れ様です。iMasanariと申します。
いきなりですが、下記の記事をご存知でしょうか。

https://qiita.com/uhyo/items/35cb243557df5e1a87fc

https://qiita.com/uhyo/items/4cef029d140923f205d4

上記は、文字入力の快適さを計測するベンチマークによって、Reactは高いユーザーエクスペリエンスを実現できるライブラリである、という記事です。ベンチマークスクリプトやソースコードは公開されており、自由にチューニングを施してReactに挑戦できるようになっています。

> 興味がある方は、以上のレギュレーションの中で高速化に挑戦してみてください。純粋なレンダリング高速化で筆者の鼻を明かすのもよし、Reactのスケジューリングに負けない機構を自前で実装するもよし、レギュレーションの抜け穴を見つけてReactを打ち負かすのもよしです。

この記事では、上記に挑戦するためのUIライブラリを自作していきたいと思います。つまりは、「[Reactに有利なベンチマーク][ハードモード]」に有利なライブ

元記事を表示

【Chrome拡張機能】Githubのコミット間差分表示ページURLを生成して開く

# 概要
掲題のChrome拡張機能「GithubDiff」を作成したので紹介します。
# 目次
– [概要](#概要)
– [目次](#目次)
– [目的](#目的)
– [利用方法](#利用方法)
– [想定](#想定)
– [手順](#手順)
– [参考動画](#参考動画)
– [書いたコードの紹介](#書いたコードの紹介)
– [ディレクトリ構成](#ディレクトリ構成)
– [manifest.json](#manifestjson)
– [popup.html](#popuphtml)
– [popup.js](#popupjs)
– [つまづいた問題](#つまづいた問題)

# 目的
ChromeでGithubのコミット間差分表示ページに移動する際、アドレスバーのURLを編集する手間を簡単にする。

# 利用方法
## 想定
Pull requestにコードレビューと修正コミットがあり、修正前後のコミット間差分を表示したい。

## 手順
– Chrome拡張機能メニューにある「GithubDiff」のアイコンをクリックする。
– ポップアッ

【Vue.js】