JavaScript関連のことを調べてみた2023年09月21日 │ f@ctor

1. canvas要素の全消去
2. using : リソース変数の管理が楽になるキーワード (JavaScript&TypeScript)
3. 【2023年9月】0円で読めるオススメ技術書5選
4. 【JavaScript】【Jquery】数値以外入力不可にする※全角数値はＯＫ
5. 【備忘録】javascriptでdropdownlist内の一部選択肢の表示/非表示を切り替える方法
6. Nuxt3でPiniaを使って状態管理を実装してみた
7. RustのWASMをAngularのサービスとして使う方法
8. 【小ネタ】Reactのmaterial-tableで特定の行のみを編集可能とする
9. 【メモ】JS・TSにおける定数オブジェクトの設定について
10. Webサイト内の特定のHTML部品に含まれる文字数を算出する
11. 【vue.js】ドラッグ可能な要素のカスタマイズとスタイリングの方法
12. javascriptで一括で要素を追加する
13. NeosVR コンパイラその5
14. 【kintone/javascript】利用者ごとに採番された管理番号を利用したい
15. フィッシングサイトか確認するのにマウスオーバーで出てくるステータスバーのURLを確認するのはNG
16. 【Qiita】糞コードは直すな！ぶっ壊せ！
17. Reactの「Context」の使い方とメリット
18. エラトステネスの篩（ふるい）を行う際の配列サイズについて
19. Reactのクラスコンポーネントと関数コンポーネントの特徴と使い方
20. TyranoScriptで動的に生成したシナリオを実行してみる

canvas要素の全消去

canvas要素の内容を全消去したい場合、clearRectで全範囲を指定する方法をよく見かける。

“`:JavaScript
const canvas = document.getElementById(‘canvas’);
const ctx = canvas.getContext(‘2d’);
ctx.clearRect(0, 0, canvas.width, canvas.height);
“`

canvasのサイズを同じ値に指定し直すことでも全消去できる。

“`:JavaScript
const canvas = document.getElementById(‘canvas’);
canvas.width = canvas.width;

// または
// canvas.height = canvas.height;
“`

元記事を表示

using : リソース変数の管理が楽になるキーワード (JavaScript&TypeScript)

> この記事の内容にある意見は、個人の主観的意見を前提とします。
> 記事の内容は間違いがあり得ますので、ご了承いただけると幸いです。内容の間違い、認識の違い、違う意見などありましたら、コメント大歓迎です！

# 概要

JavaScriptにおいて、変数を初期化できるkeyword `var, let, const`に加え、`using`がまもなく追加される予定です。

`using`キーワードで宣言した変数は、リソースタイプ変数として見なされ、変数がscope外になる前に自動でリソース解除作業を行うことができるようになり、従来の明示的にリソース解除コードを書くという面倒な作業がだいぶ楽になることが期待できます。

ECMAScript Proposalは以下となっておりStage3段階となってます。
https://github.com/tc39/proposal-explicit-resource-management#status
※ Stage4になると標準として確定されます。詳しくは[The TC39 Process](https://tc39.es/process-doc

元記事を表示

【2023年9月】0円で読めるオススメ技術書5選

# はじめに
みなさん、こんにちは。高校生エンジニアの[Raio](https://twitter.com/Raio14f)です！
平日は公立高校に通いながら、放課後や休日はIT企業のエンジニアとして働いています??‍?

↓筆者について↓

https://qiita.com/Raio14f/items/ef0fb67685b36298bcb0

今回の記事では、**0円で読めるオススメ技術書5選**を紹介します！
無料で読む方法も紹介してるので、是非最後まで見て頂けると幸いです??

# 技術書を無料で読む方法
[KindleUnlimited](https://amzn.to/3t3n5sY)を使うことで、**沢山の技術書を無料で何冊でも読むことが可能です**?

– 200万冊以上の書籍が何冊でも読み放題
– 月額980円が今なら1ヶ月無料
– 場所に囚われず、様々な端末で使用可能

勿論、技術書以外にもビジネス書や漫画など種類豊富です！

**今回の記事で紹介する技術書も、全てKindleUnlimitedで読むことができるので是非** ?

**↓入会したい方は画像をクリッ

元記事を表示

【JavaScript】【Jquery】数値以外入力不可にする※全角数値はＯＫ

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

$(‘input[name=”cost”]’).on(‘input’, function() {
var num = $(this).val().replace(/[０-９]/g,(s) => String.fromCharCode(s.charCodeAt(0)-0xFEE0));
$(‘input[name=”cost”]’).val(num);
if(!$.isNumeric(num)) {
alert(‘数値を入力してください’);
$(‘input[name=”cost”]’).val(num.replace(/\D+/g, ”));
}
})
“`

元記事を表示

【備忘録】javascriptでdropdownlist内の一部選択肢の表示/非表示を切り替える方法

# やりたいこと
ASP.NETでWebアプリを開発しているときに、javascriptでdropdownlist内の選択肢を状況に応じて一部選択肢の表示/非表示の切り替えが出来る様にしたかった。

# 解決方法
表示/非表示にしたい選択肢のdisplayプロパティをいじることにより解決した。

●javascript
“`javascript
//選択肢の「不明」の表示/非表示を切り替える。
function Changeoptions() {
var ddl1 = document.getElementById(“<%=ddl_1.ClientID %>“)
if(ddl1.options[3].style[“display”]==”none”){
ddl1.options[3].style[“display”] = “block”;
}else{
ddl1.options[3].style[“display”] = “none”;
}
}
“`

●aspx
“`html

元記事を表示

Nuxt3でPiniaを使って状態管理を実装してみた

## はじめに
Nuxt3でPiniaを使って状態管理を実装してみました。

PiniaはVueで扱うグローバルなデータの状態を管理するための状態管理ツールです。Vue2まではVuexがデフォルトのVueの状態管理ツールでしたが、Vue3ではPiniaの利用が推奨されています。
この記事では、Piniaを使用してファイル間での状態共有を実現し、さらに pinia-plugin-persistedstate/nuxt プラグインを利用して、ページをリロードしても状態が保持される機能を実装します。

## 開発環境
– Windows 11
– Nuxt.js 3.4.1
– Vuetify 3.4.0-alpha.0
– npm 8.19.4
– Node.js 16.20.0

## ディレクトリ構造
本記事で使用するプロジェクトのディレクトリ構造です。ファイルの作成については、実装を進めながら必要に応じて行いますので、現時点では作成されなくても構いません。
“`
[プロジェクト名]/
├── composables/
│ └── states.ts
├── pages

元記事を表示

RustのWASMをAngularのサービスとして使う方法

ハイサイ！オースティンやいびーん！

# 概要

Rustとwasm_bindgenを使って、Angularのサービスとして使えるWASMを作る方法をサクサクと紹介します。

## なぜWASMをAngularに？

そもそもなぜWASMをAngularで使いたいのかというところを疑問に思う読者もいるかもしれませんが、その思いはおそらくパフォーマンスを追求するならAngularを使うのはどうかという前提だと仮定してお話しします。

Angularはパフォーマンスが悪いのはその通りです。特にFirst Paint（DOMに最初にレンダーされる）までの時間が悲惨です。読み込んだ後のパフォーマンスはReactよりはいいが素晴らしいわけでもないのです。

しかし、Angularが向いているのは、業務アプリであり、その業務アプリではサクサクと動作することが非常に大事です。以前勤めていた会社では、Angularを使ったアプリ開発をしていたのですが、パフォーマンスが最大の課題でした。Angularを使っていたこと自体が問題だったというより、JavaScriptのメモリ管理の問題に直面していたといった

元記事を表示

【小ネタ】Reactのmaterial-tableで特定の行のみを編集可能とする

material-tableを使って特定の行のみを編集可能としたくて試していたがある罠にはまって中々できなかった。
同じような罠にはまる人がいるか分からないが一応記録として残しておきます。

## material-tableとは
Reactで使えるMaterial-UIをベースとしたデータテーブルコンポーネントとしてmaterial-tableというOSSがあります。 material-tableを使うことにより、Reactの標準のデータテーブルコンポーネントよりもフィルター、検索、ソートなどのテーブル機能を拡張することができます。

## 特定の行のみを編集可能とする
参考にした記事が特定の列を編集可能にする記事だったので、
私は特定の行を編集可能とする方法を調べていました。

https://qiita.com/orangeroad0922/items/36d27df9a5989e0d7ac9

特定の行を編集可能とするには、以下から“isEditable“を使えばいいんだなと分かり早速試してみました。
https://material-table.com/#/docs/fe

元記事を表示

【メモ】JS・TSにおける定数オブジェクトの設定について

## 下記の方法で、下記が実現できる
– オブジェクト自体の再代入が防げる
– オブジェクトのプロパティとその値が不変になる

“`ts
export const SAMPLE_OBJECT = Object.freeze({
NOT_SET: “未設定”,
AAA: “aaa”,
} as const)
“`

## as const
提供元：TypeScript
作動タイミング：コンパイル時に作動

## Object.freeze()
提供元：JavaScript
作動タイミング：ランタイム時に作動

元記事を表示

Webサイト内の特定のHTML部品に含まれる文字数を算出する

個人的な需要があったので書きました。

## 1.事前準備

“`terminal
brew install node
“`

“`terminal
npm install node-fetch jsdom
“`

## 2.コード

“`count_characters.js
import fetch from ‘node-fetch’;
import { JSDOM } from ‘jsdom’;

async function countCharacters(url) {
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`Failed to fetch URL: ${url}`);
}

const html = await response.text();

const dom = new JSDOM(html);
// 抽出したいDOMを指定する
const element = dom.wi

元記事を表示

【vue.js】ドラッグ可能な要素のカスタマイズとスタイリングの方法

## 【vue.js】ドラッグ可能な要素のカスタマイズとスタイリングの方法

こんにちは。今回は、vue.jsについて初心者エンジニアに向けて、ドラッグ可能な要素のカスタマイズとスタイリングの方法について解説します。

ドラッグ可能な要素を実装することで、ユーザーが要素をドラッグして移動させたり、他の要素とのドロップ操作を行ったりすることができます。vue.jsを使用すると、簡単にドラッグ可能な要素を実装することができますが、その見た目や挙動をカスタマイズすることもできます。

以下では、ドラッグ可能な要素のスタイルや外観をカスタマイズする方法、ドラッグ時の要素の透明化やカーソルの変更手法、ドラッグ操作時の要素のサイズ変更や位置制約の設定方法、ドラッグ中の要素にハンドルや制御部品を追加する方法、そしてドラッグアンドドロップ要素にトランジションやアニメーションを適用する方法について順に説明していきます。

## ドラッグ可能な要素のスタイルと外観のカスタマイズ方法

ドラッグ可能な要素のスタイルと外観をカスタマイズするためには、vueコンポーネントのスタイルセクション内でcssを使用する

元記事を表示

javascriptで一括で要素を追加する

# Document.createDocumentFragment()
新しい空の DocumentFragment を作成し、そこに DOM ノードを追加して画面外の DOM ツリーを作成します。

“`js
var element = document.getElementById(“ul”); // ul が存在することを仮定
var fragment = document.createDocumentFragment();
var browsers = [“Firefox”, “Chrome”, “Opera”, “Safari”, “Internet Explorer”];

browsers.forEach(function (browser) {
var li = document.createElement(“li”);
li.textContent = browser;
fragment.appendChild(li);
});

element.appendChild(fragment);
“`
### 出典
https://developer.mo

元記事を表示

NeosVR コンパイラその5

# 概要
NeosVRのオブジェクトを外部で生成するコンパイラを開発した。
練習問題、やってみた。

# 練習問題
nasaのapiを叩いて取得した今日の画像を表示するオブジェクトを生成せよ。

# 方針
xhrでapiを叩く。

# 写真

![2023-09-20 01.41.43.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/53ff50ed-c05c-4ad5-df0e-7ffc351c6b69.jpeg)

# 俺コード

“`
new FrooxEngine.StaticTexture2D
new FrooxEngine.UnlitMaterial
new FrooxEngine.MeshRenderer
new FrooxEngine.QuadMesh
FrooxEngine.StaticTexture2D.Data.URL.Data = “@” + NasaApi.url
FrooxEngine.UnlitMaterial.Data.Texture.Data = Froo

元記事を表示

【kintone/javascript】利用者ごとに採番された管理番号を利用したい

# はじめに
自動採番処理はプラグインを始め色々ありますが、担当者ごとに採番値を発番する必要があったので備忘録として残しておきます。

単独でプラグインを購入するのは勿体ない、、、
なんとか自作できないか、、、

という方向けに共有です。

“`javascript:autonumbering.js
(function() {
“use strict”;

// 管理番号を自動採番します。
// <仕様>
// アプリ内の過去レコードから最も大きな採番値を取得し+1した番号をセットします。
// 管理番号の接頭辞は「従業員ID」の情報を付与します。「従業員ID」が設定されていない場合はユーザーIDを設定します。
//
// <前提条件>
// ・採番値をセットする「文字列」フィールドが設定されていること　※本サンプルでは”管理番号”というフィールドを想定
// ・「ユーザー選択」フィールドが設定されていること　※本サンプルでは”担当者”というフィールドコードを想定
// ・「数値」フィールドが設定されて

元記事を表示

フィッシングサイトか確認するのにマウスオーバーで出てくるステータスバーのURLを確認するのはNG

フィッシングサイトかどうか確認するのに、マウスオーバーをしてステータスバー（ブラウザの下のほうにでてくるやつ）を確認するという方法があるようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3533089/95ec08e8-d947-7448-8d5e-cc2e2edd5088.png)

javascriptを勉強しているうちに、「あれ？この方法ってもしかしたら」と思って、chatGPTさんに聞いてみました。

> はい、JavaScriptを使用して、マウスオーバー時とクリック時に異なるリンク先を設定できます。以下は、それを実現するためのサンプルコードです。

“`

リンク先切り替え</ti</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/bennyyagiyama/items/de03f30b40cfce001e62'>元記事を表示</a></div> <h3 id="outline__16"><a href='https://qiita.com/mogamoga1337/items/0add694958159b310e27'>【Qiita】糞コードは直すな！ぶっ壊せ！</a></h3> <blockquote><p> ## 実演</p> <p>![sample.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/649673/c30b3347-e624-b21f-18dc-4c25e37525e9.gif)</p> <p>## 遊び方</p> <p>* スペースで玉発射<br /> * 矢印キーで移動<br /> * Rキーでリトライ<br /> * Qキーで終了</p> <p>## コード</p> <p>開発者ツール（F12キーででるやつ）のコンソールに貼り付けて実行</p> <p>“`js<br /> const racket = document.createElement(“div”);<br /> const racketWidth = 100;<br /> let racketX = (window.innerWidth – racketWidth) / 2;<br /> racket.style.width = `${racketWidth}px`;<br /> racket.style.height = “20px”;<br /> racket.style.backgroundColor = “#FFD700”;<br /> racket.style.position = “fixed”; </p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>Qiita</div> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>ブロック崩し</div> <div class='tag-cloud-link'>イースターエッグ</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/mogamoga1337/items/0add694958159b310e27'>元記事を表示</a></div> <h3 id="outline__17"><a href='https://qiita.com/nakajima417/items/0492e1178c86ed9abaac'>Reactの「Context」の使い方とメリット</a></h3> <blockquote><p>　Reactの __Context__ は、コンポーネントのツリー全体にデータを提供するための方法です。propsを使って手動でデータをコンポーネントの一つ一つに渡す代わりに、Contextを使用することでコンポーネントツリーのどの階層でもデータにアクセスできます。</p> <p># ReactのContextが必要な理由:<br /> 　シチュエーション: ウェブアプリケーションを考えてみてください。このアプリには、多くのコンポーネントがあり、それらがネストされて複雑な構造を持っています。ユーザーがアプリにログインすると、そのユーザー情報（名前、プロフィール写真、設定など）が多くのコンポーネントで必要になります。</p> <p>– __問題__: このユーザー情報を、上位のコンポーネントから下位のコンポーネントへとpropsを使って一つ一つ渡していくのは、非常に手間がかかり、管理が難しくなります。このような手法を「__prop drilling__」と呼びます。</p> <p>– __解決策__: ここでContextが役立ちます。Contextを使うと、ユーザー情報をアプリケーションのどこからでも直接アクセスできるようになります</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>プログラミング</div> <div class='tag-cloud-link'>TypeScript</div> <div class='tag-cloud-link'>React</div> <div class='tag-cloud-link'>プログラミング初心者</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/nakajima417/items/0492e1178c86ed9abaac'>元記事を表示</a></div> <h3 id="outline__18"><a href='https://qiita.com/TETSURO1999/items/923692e3a2a3b253c9ae'>エラトステネスの篩（ふるい）を行う際の配列サイズについて</a></h3> <blockquote><p># はじめに</p> <p>下記の自分の記事で配列サイズの見積もりを誤っていた。</p> <p>https://qiita.com/TETSURO1999/items/a8321c80405a70755c41</p> <p>JavaScript の場合わりと配列サイズはアバウトでよく，そもそもサイズも型も不定で `var a = [];` と宣言できてしまうし，`var a = new Array(256);` のようにサイズを定義して宣言した場合でも，当初宣言したサイズを超えたアクセス，たとえば `a[300]` に書き込んでも読み込んでもエラーにはならない。ただし，このようなアクセスを行うとパフォーマンスは格段に落ちることが知られている。詳しくは下記の記事を参照されたい。</p> <p>http://nmi.jp/2019-06-09-The-reason-you-should-avoid-new-array-100</p> <p>最大のパフォーマンスを得るには必要な配列のサイズを最初に定義し，この範囲内でアクセスが完結するよう注意しなくてはならない。</p> <p># 自然数をそのまま配列に割り当てる場合</p> <p>与えられた自然数 $N$ に対して，$N$</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>素数</div> <div class='tag-cloud-link'>素因数分解</div> <div class='tag-cloud-link'>素数判定</div> <div class='tag-cloud-link'>TypedArray</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/TETSURO1999/items/923692e3a2a3b253c9ae'>元記事を表示</a></div> <h3 id="outline__19"><a href='https://qiita.com/nakajima417/items/f80cd73f95ebc7a8b3c0'>Reactのクラスコンポーネントと関数コンポーネントの特徴と使い方</a></h3> <blockquote><p># Reactのコンポーネント<br /> Reactを使ってウェブページを作る際、画面上の各部分（例えばボタンやテキストボックスなど）は「コンポーネント」という部品で表現されます。このコンポーネントを組み合わせて、複雑なページやアプリケーションを構築します。</p> <p>## 1. クラスコンポーネント<br /> ### 特徴:<br /> – __クラスベース__: JavaScriptのクラスを使って定義されます。<br /> – __ライフサイクルメソッド__: 特定の時点で実行されるメソッドがあります。例えば、コンポーネントが画面に初めて表示されるときや、データが変わったときなどの動作を定義できます。<br /> – __状態管理__: this.stateで状態（データ）を持ち、this.setStateで状態を更新できます。<br /> ### 例:<br /> “`javascript<br /> class WelcomeClass extends React.Component {<br /> // コンストラクタ: コンポーネントが作成されるときに一度だけ実行される<br /> constructor(props) {<br /> super(props);<br /> this.sta</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>プログラミング</div> <div class='tag-cloud-link'>TypeScript</div> <div class='tag-cloud-link'>React</div> <div class='tag-cloud-link'>プログラミング初心者</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/nakajima417/items/f80cd73f95ebc7a8b3c0'>元記事を表示</a></div> <h3 id="outline__20"><a href='https://qiita.com/EmptyBottle/items/70af5bb6e2beacd3460f'>TyranoScriptで動的に生成したシナリオを実行してみる</a></h3> <blockquote><p># 概要<br /> TyranoScriptで動的に生成したシナリオを実行することに成功したので、その方法を共有します。</p> <p># できること<br /> JavaScript側で生成したシナリオを、通常のシナリオと同じように実行できるようになります。</p> <p># コード<br /> まずはコードから<br /> “`js<br /> [iscript]<br /> // 仮想シナリオを構築<br /> let scenario = “”;<br /> scenario += “Hello World[l][r]\n”;<br /> scenario += “仮想シナリオのテストです[p]\n”;</p> <p>// 仮想シナリオをキャッシュに格納<br /> const scenario_name = “$TestScenario$”;<br /> let parsed_scenario = TYRANO.kag.parser.parseScenario(scenario);<br /> TYRANO.kag.cache_scenario[`./data/scenario/${scenario_name}`] = parsed_scenario;</p> <p>[endscript]</p> <p>; 仮想シナリオをコール<br /> [jump storage=”$TestS</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>TyranoScript</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/EmptyBottle/items/70af5bb6e2beacd3460f'>元記事を表示</a></div> </div> </section>  <aside> <ul class="socialList"> <li class="socialList__item"><a class="socialList__link icon-facebook" href="http://www.facebook.com/sharer.php?u=https%3A%2F%2Fmiofactor.com%2F2023%2F09%2F21%2Fpost-27799%2F&t=JavaScript%E9%96%A2%E9%80%A3%E3%81%AE%E3%81%93%E3%81%A8%E3%82%92%E8%AA%BF%E3%81%B9%E3%81%A6%E3%81%BF%E3%81%9F2023%E5%B9%B409%E6%9C%8821%E6%97%A5" target="_blank" title="Facebookで共有"></a></li><li class="socialList__item"><a class="socialList__link icon-twitter" href="http://twitter.com/intent/tweet?text=JavaScript%E9%96%A2%E9%80%A3%E3%81%AE%E3%81%93%E3%81%A8%E3%82%92%E8%AA%BF%E3%81%B9%E3%81%A6%E3%81%BF%E3%81%9F2023%E5%B9%B409%E6%9C%8821%E6%97%A5&https%3A%2F%2Fmiofactor.com%2F2023%2F09%2F21%2Fpost-27799%2F&url=https%3A%2F%2Fmiofactor.com%2F2023%2F09%2F21%2Fpost-27799%2F" target="_blank" title="Twitterで共有"></a></li><li class="socialList__item"><a class="socialList__link icon-line" href="http://line.naver.jp/R/msg/text/?JavaScript%E9%96%A2%E9%80%A3%E3%81%AE%E3%81%93%E3%81%A8%E3%82%92%E8%AA%BF%E3%81%B9%E3%81%A6%E3%81%BF%E3%81%9F2023%E5%B9%B409%E6%9C%8821%E6%97%A5%0D%0Ahttps%3A%2F%2Fmiofactor.com%2F2023%2F09%2F21%2Fpost-27799%2F" target="_blank" title="LINEで送る"></a></li></ul> </aside>   <aside class="widgetPost widgetPost-bottom"><aside class="widget widget-post"><h2 class="heading heading-primary">タグ</h2><div class="tagcloud"><a href="https://miofactor.com/tag/%e3%81%9d%e3%81%ae%e4%bb%96/" class="tag-cloud-link tag-link-13 tag-link-position-1" style="font-size: 8pt;" aria-label="その他 (1個の項目)">その他</a></div> </aside></aside>   <aside class="related"><h2 class="heading heading-primary">関連する記事</h2><ul class="related__list"> <li class="related__item"> <a class="related__imgLink" href="https://miofactor.com/2023/12/09/post-29158/" title="Lambda関連のことを調べてみた"> <img src="https://miofactor.com/wp-content/uploads/2019/10/lambda-150x150.png" alt="Lambda関連のことを調べてみた" width="150" height="150" > </a> <h3 class="related__title"> <a href="https://miofactor.com/2023/12/09/post-29158/">Lambda関連のことを調べてみた</a> <span class="icon-calendar">2023.12.09</span> </h3> <p class="related__contents">目次 1. 特級呪物と化したAWS IoT Enterprise Buttonを勤怠ボタンとして活用する2. Lambda go1.xランタイムからp[…]</p> </li> <li class="related__item"> <a class="related__imgLink" href="https://miofactor.com/2022/04/23/post-18474/" title="Ruby関連のことを調べてみた2022年04月23日"> <img src="https://miofactor.com/wp-content/uploads/2019/10/ruby-150x150.png" alt="Ruby関連のことを調べてみた2022年04月23日" width="150" height="150" > </a> <h3 class="related__title"> <a href="https://miofactor.com/2022/04/23/post-18474/">Ruby関連のことを調べてみた2022年04月23日</a> <span class="icon-calendar">2022.04.23</span> </h3> <p class="related__contents">目次 0.0.1. API 経由で起動する Shopify Flow のトリガーを自作してみた0.0.2. Rails+docker環境構築でyarn[…]</p> </li> <li class="related__item"> <a class="related__imgLink" href="https://miofactor.com/2021/09/16/post-12846/" title="iOS関連のことを調べてみた2021年09月16日"> <img src="https://miofactor.com/wp-content/uploads/2019/10/ios-150x150.png" alt="iOS関連のことを調べてみた2021年09月16日" width="150" height="150" > </a> <h3 class="related__title"> <a href="https://miofactor.com/2021/09/16/post-12846/">iOS関連のことを調べてみた2021年09月16日</a> <span class="icon-calendar">2021.09.16</span> </h3> <p class="related__contents">目次 1. [Swift]修飾子のLazyとは？2. iPhone13を発表したAppleEventメモ3. Flutterで手書きを実装する4. F[…]</p> </li> </ul></aside>      </main>   <div class="l-sidebar"> <aside class="widget"> <div class="searchBox"> <form class="searchBox__form" method="get" target="_top" action="https://miofactor.com/" > <input class="searchBox__input" type="text" maxlength="50" name="s" placeholder="記事検索"><button class="searchBox__submit icon-search" type="submit" value="search"> </button> </form> </div></aside><aside class="widget"><h2 class="heading heading-widget">Category</h2> <ul> <li class="cat-item cat-item-1"><a href="https://miofactor.com/category/other/">OTHER</a> </li> </ul> </aside><aside class="widget"><h2 class="heading heading-widget">Back number</h2> <ul> <li><a href='https://miofactor.com/2024/09/'>2024年9月</a></li> <li><a href='https://miofactor.com/2024/08/'>2024年8月</a></li> <li><a href='https://miofactor.com/2024/07/'>2024年7月</a></li> <li><a href='https://miofactor.com/2024/06/'>2024年6月</a></li> <li><a href='https://miofactor.com/2024/05/'>2024年5月</a></li> <li><a href='https://miofactor.com/2024/04/'>2024年4月</a></li> <li><a href='https://miofactor.com/2024/03/'>2024年3月</a></li> <li><a href='https://miofactor.com/2024/02/'>2024年2月</a></li> <li><a href='https://miofactor.com/2024/01/'>2024年1月</a></li> <li><a href='https://miofactor.com/2023/12/'>2023年12月</a></li> <li><a href='https://miofactor.com/2023/11/'>2023年11月</a></li> <li><a href='https://miofactor.com/2023/10/'>2023年10月</a></li> <li><a href='https://miofactor.com/2023/09/'>2023年9月</a></li> <li><a href='https://miofactor.com/2023/08/'>2023年8月</a></li> <li><a href='https://miofactor.com/2023/07/'>2023年7月</a></li> <li><a href='https://miofactor.com/2023/04/'>2023年4月</a></li> <li><a href='https://miofactor.com/2023/03/'>2023年3月</a></li> <li><a href='https://miofactor.com/2023/02/'>2023年2月</a></li> <li><a href='https://miofactor.com/2023/01/'>2023年1月</a></li> <li><a href='https://miofactor.com/2022/12/'>2022年12月</a></li> <li><a href='https://miofactor.com/2022/11/'>2022年11月</a></li> <li><a href='https://miofactor.com/2022/10/'>2022年10月</a></li> <li><a href='https://miofactor.com/2022/09/'>2022年9月</a></li> <li><a href='https://miofactor.com/2022/08/'>2022年8月</a></li> <li><a href='https://miofactor.com/2022/07/'>2022年7月</a></li> <li><a href='https://miofactor.com/2022/06/'>2022年6月</a></li> <li><a href='https://miofactor.com/2022/05/'>2022年5月</a></li> <li><a href='https://miofactor.com/2022/04/'>2022年4月</a></li> <li><a href='https://miofactor.com/2022/03/'>2022年3月</a></li> <li><a href='https://miofactor.com/2022/02/'>2022年2月</a></li> <li><a href='https://miofactor.com/2022/01/'>2022年1月</a></li> <li><a href='https://miofactor.com/2021/12/'>2021年12月</a></li> <li><a href='https://miofactor.com/2021/11/'>2021年11月</a></li> <li><a href='https://miofactor.com/2021/10/'>2021年10月</a></li> <li><a href='https://miofactor.com/2021/09/'>2021年9月</a></li> <li><a href='https://miofactor.com/2021/08/'>2021年8月</a></li> <li><a href='https://miofactor.com/2021/07/'>2021年7月</a></li> <li><a href='https://miofactor.com/2021/06/'>2021年6月</a></li> <li><a href='https://miofactor.com/2021/05/'>2021年5月</a></li> <li><a href='https://miofactor.com/2021/04/'>2021年4月</a></li> <li><a href='https://miofactor.com/2021/03/'>2021年3月</a></li> <li><a href='https://miofactor.com/2021/02/'>2021年2月</a></li> <li><a href='https://miofactor.com/2021/01/'>2021年1月</a></li> <li><a href='https://miofactor.com/2020/12/'>2020年12月</a></li> <li><a href='https://miofactor.com/2020/11/'>2020年11月</a></li> <li><a href='https://miofactor.com/2020/10/'>2020年10月</a></li> <li><a href='https://miofactor.com/2020/09/'>2020年9月</a></li> <li><a href='https://miofactor.com/2020/08/'>2020年8月</a></li> <li><a href='https://miofactor.com/2020/07/'>2020年7月</a></li> <li><a href='https://miofactor.com/2020/06/'>2020年6月</a></li> <li><a href='https://miofactor.com/2020/05/'>2020年5月</a></li> <li><a href='https://miofactor.com/2020/04/'>2020年4月</a></li> <li><a href='https://miofactor.com/2020/03/'>2020年3月</a></li> <li><a href='https://miofactor.com/2020/02/'>2020年2月</a></li> <li><a href='https://miofactor.com/2020/01/'>2020年1月</a></li> <li><a href='https://miofactor.com/2019/12/'>2019年12月</a></li> <li><a href='https://miofactor.com/2019/11/'>2019年11月</a></li> <li><a href='https://miofactor.com/2019/10/'>2019年10月</a></li> </ul> </aside> </div>  </div>  <div class="categoryBox"> <div class="container"> <h2 class="heading heading-primary"> <span class="heading__bg u-txtShdw bgc-darkgray">OTHER</span>カテゴリの最新記事 </h2> <ul class="categoryBox__list"> <li class="categoryBox__item"> <div class="eyecatch eyecatch-archive"> <a href="https://miofactor.com/2024/09/19/post-36890/"> <img src="https://miofactor.com/wp-content/uploads/2019/10/js-554x410.png" alt="JavaScript関連のことを調べてみた" width="554" height="410" > </a> </div> <ul class="dateList dateList-archive"> <li class="dateList__item icon-calendar">2024.09.19</li> </ul> <h2 class="heading heading-archive "> <a class="hc-darkgray" href="https://miofactor.com/2024/09/19/post-36890/">JavaScript関連のことを調べてみた</a> </h2> </li> <li class="categoryBox__item"> <div class="eyecatch eyecatch-archive"> <a href="https://miofactor.com/2024/09/19/post-36891/"> <img src="https://miofactor.com/wp-content/uploads/2019/10/java.jpg" alt="JAVA関連のことを調べてみた" width="540" height="270" > </a> </div> <ul class="dateList dateList-archive"> <li class="dateList__item icon-calendar">2024.09.19</li> </ul> <h2 class="heading heading-archive "> <a class="hc-darkgray" href="https://miofactor.com/2024/09/19/post-36891/">JAVA関連のことを調べてみた</a> </h2> </li> <li class="categoryBox__item"> <div class="eyecatch eyecatch-archive"> <a href="https://miofactor.com/2024/09/19/post-36894/"> <img src="https://miofactor.com/wp-content/uploads/2019/10/ios-554x410.png" alt="iOS関連のことを調べてみた" width="554" height="410" > </a> </div> <ul class="dateList dateList-archive"> <li class="dateList__item icon-calendar">2024.09.19</li> </ul> <h2 class="heading heading-archive "> <a class="hc-darkgray" href="https://miofactor.com/2024/09/19/post-36894/">iOS関連のことを調べてみた</a> </h2> </li> <li class="categoryBox__item"> <div class="eyecatch eyecatch-archive"> <a href="https://miofactor.com/2024/09/19/post-36888/"> <img src="https://miofactor.com/wp-content/uploads/2019/10/rails-725x410.png" alt="Rails関連のことを調べてみた" width="725" height="410" > </a> </div> <ul class="dateList dateList-archive"> <li class="dateList__item icon-calendar">2024.09.19</li> </ul> <h2 class="heading heading-archive "> <a class="hc-darkgray" href="https://miofactor.com/2024/09/19/post-36888/">Rails関連のことを調べてみた</a> </h2> </li> <li class="categoryBox__item"> <div class="eyecatch eyecatch-archive"> <a href="https://miofactor.com/2024/09/19/post-36884/"> <img src="https://miofactor.com/wp-content/uploads/2019/10/lambda.png" alt="Lambda関連のことを調べてみた" width="360" height="230" > </a> </div> <ul class="dateList dateList-archive"> <li class="dateList__item icon-calendar">2024.09.19</li> </ul> <h2 class="heading heading-archive "> <a class="hc-darkgray" href="https://miofactor.com/2024/09/19/post-36884/">Lambda関連のことを調べてみた</a> </h2> </li> <li class="categoryBox__item"> <div class="eyecatch eyecatch-archive"> <a href="https://miofactor.com/2024/09/19/post-36886/"> <img src="https://miofactor.com/wp-content/uploads/2019/10/python-640x410.png" alt="Python関連のことを調べてみた" width="640" height="410" > </a> </div> <ul class="dateList dateList-archive"> <li class="dateList__item icon-calendar">2024.09.19</li> </ul> <h2 class="heading heading-archive "> <a class="hc-darkgray" href="https://miofactor.com/2024/09/19/post-36886/">Python関連のことを調べてみた</a> </h2> </li> </ul> </div> </div>  <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Article ", "mainEntityOfPage":{ "@type": "WebPage", "@id": "https://miofactor.com/2023/09/21/post-27799/" }, "headline": "JavaScript関連のことを調べてみた2023年09月21日", "image": { "@type": "ImageObject", "url": "https://miofactor.com/wp-content/uploads/2019/10/python-640x410.png", "height": "410", "width": "640" }, "datePublished": "2023-09-21T11:50:16+0900", "dateModified": "2023-09-21T11:50:16+0900", "author": { "@type": "Person", "name": "editor" }, "publisher": { "@type": "Organization", "name": "f@ctor", "logo": { "@type": "ImageObject", "url": "", "width": "", "height":"" } }, "description": "目次 1. canvas要素の全消去2. using : リソース変数の管理が楽になるキーワード (JavaScript&TypeScript)3. 【2023年9月】0円で読めるオススメ技術書5選4. 【JavaScript】【Jquery】数値以外入力不可にする※全角数値はＯＫ5. 【備忘録】javascriptでdropdownlist内の一部選択肢の表示/非表示を切り替える方法6 […]" } </script>   <footer class="l-footer"> <div class="container"> <div class="pagetop u-txtShdw"><a class="pagetop__link" href="#top">Back to Top</a></div> <div class="widgetFoot"> <div class="widgetFoot__contents"> </div> <div class="widgetFoot__contents"> <aside class="widget widget-foot"><h2 class="heading heading-footer">タグ</h2><div class="tagcloud"><a href="https://miofactor.com/tag/%e3%81%9d%e3%81%ae%e4%bb%96/" class="tag-cloud-link tag-link-13 tag-link-position-1" style="font-size: 8pt;" aria-label="その他 (1個の項目)">その他</a></div> </aside> </div> <div class="widgetFoot__contents"> </div> </div> <div class="copySns "> <div class="copySns__copy"> © Copyright 2024 <a class="copySns__copyLink" href="https://miofactor.com">f@ctor</a>. <span class="copySns__copyInfo u-none"> f@ctor by <a class="copySns__copyLink" href="http://fit-jp.com/" target="_blank">FIT-Web Create</a>. Powered by <a class="copySns__copyLink" href="https://wordpress.org/" target="_blank">WordPress</a>. </span> </div> </div> </div> </footer>  <script type="text/javascript" src="https://miofactor.com/wp-includes/js/comment-reply.min.js?ver=6.4.1" id="comment-reply-js" async="async" data-wp-strategy="async"></script> <script type="text/javascript" src="https://miofactor.com/wp-includes/js/wp-embed.min.js?ver=6.4.1" id="wp-embed-js" defer="defer" data-wp-strategy="defer"></script> <script> function toggle__search(){ extra__search.className="l-extra"; extra__menu.className="l-extraNone"; menuNavi__search.className = "menuNavi__link menuNavi__link-current icon-search "; menuNavi__menu.className = "menuNavi__link icon-menu"; } function toggle__menu(){ extra__search.className="l-extraNone"; extra__menu.className="l-extra"; menuNavi__search.className = "menuNavi__link icon-search"; menuNavi__menu.className = "menuNavi__link menuNavi__link-current icon-menu"; } </script><script>Array.prototype.forEach.call(document.getElementsByClassName("css-async"),function(e){e.rel = "stylesheet"});</script> </body> </html>