- 1. react-beautiful-dndでUnable to find draggable with idが出たときの対処法
- 2. ReactでWarning: Each child in a list should have a unique “key” prop.の対処法
- 3. AWS IoT Coreにブラウザから様々な認証方法で接続してみる
- 4. スクロールのイベント発生を制限して負荷軽減する
- 5. JavaScriptで作る変則リバーシ⑤
- 6. CSharp使いがJavaScriptへ乗り換えるためのクイックガイド
- 7. JavaScriptの学習ログ
- 8. 【JavaScript】Selectionについて図解で理解する。
- 9. ReactでWarning: task: `key` is not a prop. Trying to access it will result in `undefined` being returned.の対処法
- 10. 非同期通信後にファイルダウンロードさせる方法
- 11. スベルトさん。第1話：Svelteのコンポーネントに属するファンクションを外部からコールする。（読み物 / 連載予定）
- 12. InDesign JavaScript Excelの内容を配置(画像位置に)
- 13. p5.js を用いた JavaScript のプログラムで Leap Motion の情報を取得する（leap.js ではなく WebSocket を利用）
- 14. WebSocket Ping-Pong Frame実践
- 15. TAURIを触ってみて感じたこと
- 16. 【JavaScript】クイズアプリを作ってみよう（応用編）
- 17. Javascriptの非同期処理を克服しよう
- 18. InDesign JavaScript XML 選択オブジェクトを兄弟関係の構造に
- 19. javascript前期中間試験（配列と代入7問）
- 20. Stripe Checkoutの決済ページや請求ポータルを、任意の言語で表示するように設定する方法
react-beautiful-dndでUnable to find draggable with idが出たときの対処法
## 原因
React 18でReact.StrictModeを使っているため
“`index.js
const root = ReactDOM.createRoot(document.getElementById(‘root’));
root.render(
);
“`## 対処法
以下のようにReact.StrictModeを使わないようにする“`index.js
const root = ReactDOM.createRoot(document.getElementById(‘root’));
root.render(
<>
);
“`## 参考
https://stackoverflow.com/questions/60029734/react-beautiful-dnd-i-get-unable-to-find-draggable-with-id-1
ReactでWarning: Each child in a list should have a unique “key” prop.の対処法
## 概要
タイトルのWarningが出たので、対処方法を簡単にまとめました。## 問題のコード
“`column.jsx
return (
<>
{tasks.map((task, index) =>)}
);
“`“`task.jsx
const task = props => {
const {id, task, index} = props
return (
<>
);
}
“`## 警告の内容
“`
Warning: Each child in a list should have a unique “key” prop.
“`## 理由
コンポーネントで`key`を指定していないから## 改善策1
以下のように、key=hogehogeを追加する“`column.jsx
return (
<>
{tasks.map((task, index) =>
AWS IoT Coreにブラウザから様々な認証方法で接続してみる
AWS IoT Coreとして、MQTT ブローカが実装されており、自身でブローカを立てる必要がないですし、ブラウザ向けのクライアントライブラリもあるので、楽です。
AWS IoT Coreの認証方法にはいくつかの種類がありますので、それらを実際に試してみます。状況に合わせて使い分けてみてください。
ちなみに、今回扱うのは認証方法であって、MQTT/WebSocket/Httpといったプロトコルの種類ではないです。プロトコルは、AWS IoT Core側は特に違いは意識する必要はないですし、クライアントライブラリも違いを最低限にしてくれています。
以下の認証方法を扱います。
① （まずはNode.jsから）AWS IoT証明書を使って認証する。
② IAM認証
③ IAM＋AssumeRole認証
④ Cognito認証
⑤ カスタムオーソライザ＜やること＞
・AWS IoT Coreに認証して接続後、トピック名「test_sub」に対して、Subscribeします。
・いずれかのクライアントから、トピック名「test_sub」に対してPublishします。ソースコード
スクロールのイベント発生を制限して負荷軽減する
## throttleで負荷軽減
scrollやresizeなど、連続してイベントが呼ばれてしまうため、
カクカクした動きになったりCPUに負荷をかけてしまうことがあります。負荷軽減のためイベントの呼び出しは指定時間が経過した時や、
イベントの最後にだけ呼ばれるに呼ばれるようにします。それを実現するものとして、
`指定した時間間隔でイベントを発生させるthrottle`と
`連続したイベントの最後のみ処理するdebounce`があるようですが、今回はthrottleについてみていきます。## 指定した時間間隔でイベントを発生させるthrottle
### 間引く前
# はじめに
以前ご紹介させていただいた、下記記事からの続編(第⑤弾)になります。https://qiita.com/y-tetsu/items/6730c37cbb4ce3d3994b
プログラムの土台部分については、下記の記事で紹介しています。
https://qiita.com/y-tetsu/items/59237213d544f14bbc9c
今回は前回作ったものをベースに、新たに**赤色の石**を追加した、計**7色の石を使った、3(+2)人対戦で遊べる変則リバーシ**を作りましたので、ご紹介したいと思います。
# できたもの
以下のような、ブラウザで遊べるものを作りました。
自身が先手(黒)で、相手(白と灰、シアン、山吹)はコンピュータ、としています。
CSharp使いがJavaScriptへ乗り換えるためのクイックガイドJavaScriptとC#は基本文法の雰囲気はそんなに遠くないです。
あくまでプログラミング言語としてみた場合、C#ちょっと書ける人がJavaScriptならではの理由でつまづくことって、初級中級レベルでは無さそうです。イラッとすることはたくさんあるかも。JavaScriptからTypeScriptに入門しようとして苦労した人とそうでなかった人の両方を見たことがあるのですが
静的型付け言語(C#とかJavaとか)の経験者は割と入りやすかったようです。未経験者は結構苦労してました。
そこからの類推なのですがC#からJavaScriptは割と入門しやすい気がしてます。逆は苦労しそうです。。:four_leaf_clover: お仕事でふだんC#使っているのですがこれからJavaScriptが必要になる雰囲気があるので初学者の後輩に向けて書きました。
:four_leaf_clover: 今Qiitaを見ているブラウザ上からコードのお試しができます。右クリック > 「要素の詳細を表示」で開発者用ツールを出してからコンソールタブへ移動したら、あとはこのページのサンプルコードをコピペす
JavaScriptの学習ログ
# 学習教材
udemyで[「ウェブ開発入門完全攻略コース – HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ！」](https://www.udemy.com/course/web-application-development/)を学習。
ウェブ開発全般の基本的な知識が習得できるコースで合計24.5時間もある。
今回はその中でもJavaScriptについて学習した。
[](https://www.udemy.com/course/web-application-development/)
# 学習範囲
## JavaScript入門
JavaScriptの演算や条件分岐、繰り返し処理・配列を理解した。
## JavaScriptのDOM操作
JavaScriptの演習を通じて学習した。
こ
【JavaScript】Selectionについて図解で理解する。
# JavaScriptのSelectionについて、よく分からなかったので、図を交えて理解してみました。
## Selectionとは
Selectionとは、ざっくり言ってしまうとユーザーが選択した範囲を表すものです。
前回の[Rangeの説明](https://qiita.com/sho_U/items/088d15d38176b82dce00)では、Rangeの範囲をプログラム上で設定していましが、Selectionを使用する事により、ユーザーが選択した範囲をRangeに設定する事ができます。下記のコードで、ユーザーの選択範囲からRangeオブジェクトを取得することが可能です。
“`js
const selection = document.getSelection();
const range = selection.getRangeAt(0);
“`
まず、下記でSelectionオブジェクトを取得します。
“`js
const selection = document.getSelection();
“`次に、下記のコードからselectionオブ
ReactでWarning: task: `key` is not a prop. Trying to access it will result in `undefined` being returned.の対処法
## 概要
Reactで`key={hogehoge}`としてコンポーネントに値を渡すとundefinedとなってハマったので、原因と解決策をまとめました。## 問題
### コードkey=”test”として、Column.jsに値を渡します。
“`App.js
import React from ‘react’;
import Column from ‘./Column’;const App = () => {
return (
);
}export default App;
“`keyの値を表示してみます。
期待する値は”test”です。“`Column.js
import React from ‘react’;const Column = props => {
console.log(`key = ${props.key}`);
return (
<>
);
}export default Column;
“`### 結果
以下のように、undefi
非同期通信後にファイルダウンロードさせる方法
## 概要
`axios`などの非同期処理でAPIを実行した後に取得したファイル（ExcelやPDFを想定）をダウンロードさせる方法## プログラム
### ボタンなどのクリックイベントに登録するイベントハンドラー“`js
/**
* ファイルをダウンロードする
* @returns {Promise}
*/
const onClickDownload = async (): Promise=> {
// ファイルをバイナリーデータとして取得
const response: AxiosResponse = await Axios.get(“/api/download”, { responseType: “blob” }).catch((error) => error.response);// レスポンスを元にBlobURLとファイル名を取得
const url = URL.createObjectURL(new Blob([response.data]));
const filename = response.heade
スベルトさん。第1話：Svelteのコンポーネントに属するファンクションを外部からコールする。（読み物 / 連載予定）
# はじめに
:::note alert
これはフィクションです。
:::
:::note info
**チームリーダー**
51くん、Svelte確かやってたよね？！ この会社、他の人はReactかVueしかやってないないからちょっとお願いしたいことが有るんだけれど。
:::
:::note warn
**51**
まぁ、しょうがないですね。Svelteはマイナーですし、求人は殆どReactかVueですからね。で、お願いは何ですか？
:::
:::note info
Excelの内容を配置(画像位置に)するスクリプトは、これで良いのかな・・・？
~~~JavaScript
/*
このスクリプトを利用して起こった不具合の責任は取れません。
ご了承下さい。更新 2022/06/18
*/// アプリ指定
#target “indesign”;// スクリプト名
var scriptName = “Excelの内容を配置(画像位置に)”;//スクリプトの動作指定（一つのアンドゥ履歴にする、及び、アンドゥ名）
app.doScript(function(){// ダイアログ
var dialogueFlg = confirm(“Excelの内容を元に、同名の画像の位置にExcelの内容を入れたテキストフレームを配置します。” + “\r”
+ “\r”
+ “Excelの内容を入れるテキストフレームの雛形を複製するので、オブジェクトスタイル、段落スタイル、レイヤー等が保持されます。” + “\r”
+ “Excelの１列目はテキストフレームの１段目に、２列目は２段目に入ります。列が７つの場合は段
p5.js を用いた JavaScript のプログラムで Leap Motion の情報を取得する（leap.js ではなく WebSocket を利用）
以下の記事の続きです。
●バニラな JavaScript や p5.js で Leap Motion の情報を取得する（leap.js ではなく WebSocket を利用） – Qiita
https://qiita.com/youtoy/items/efc4da1feee26186f565上記の記事では、単純に「 `ws://localhost:6437/` 」に接続して、WebSocket で情報を取得できたことだけ確認していました。
今回は、手を認識した情報を取得するところへ進んでいきます。## 検証方法
今回、前回の 2パターンの検証方法のうちの「p5.js を用いたほう（さらに、p5.js Web Editor上でプログラムを実行する形）」で進めていきます。
leap.js は用いず、ブラウザが外部ライブラリなしに扱える WebSocket を使っているので、HTML に関して p5.js Web Editor のデフォルト状態から何も変更は加えていません（デフォルトで読み込み設定がされているライブラリ以外に、別途、ライブラリの読み込みを追加するようなことは必要
WebSocket Ping-Pong Frame実践
# WebSocket Ping-Pong Frame 実践
## inspire
mdnからWebSocketの規格を見ていたところ、Ping-Pong Frameの実装についてサーバー側からする必要があると記載を見たのでGoから実装しました。
[レファランス](https://websockets.spec.whatwg.org/#ping-and-pong-frames)## 使うライブラリ
– [gorilla](https://github.com/gorilla/websocket) >= 1.5.0
– golang >= 1.18## gorillaのAPIレファランス
Ping Frameは直接転送し、Pong Frameは[PongHandler](https://pkg.go.dev/github.com/gorilla/websocket#Conn.PongHandler)を設定することで、Ping-Pong Frameが実装できます。
## ソースコード
### サーバー側
– クライアントと接続が完了したところからのソースコードになりま
TAURIを触ってみて感じたこと
# はじめに
つい先日,新生デスクトップアプリフレームワーク,Tauriが登場した。ViewをWeb技術を利用して書けるため,フロントエンドエンジニアでも気軽にデスクトップアプリを開発することができる。そんなTauriだが以前から存在している似た志向のElectronと比較して,TauriがElectronの代替となるのか,それともそうはならないのか。そして,個人的にTauriに関して気になったこと等をまとめる。# 記事を書こうと思ったきっかけ
私は文化祭を前に音楽ゲーム制作をしている。音楽ゲームは,文化祭後一般公開の予定をしており,また気軽に遊べ,クロスプラットフォームを目指した開発をしているため,WebGLを利用することとなった。文化祭では,数台のPCを利用しての展示になり,他の作品も展示されるので,ネットワーク帯域の乱用は避けたく,またゲーム公開後もオプションとしてアプリ版の提供も考えていたためにElectronの利用を考えていた。しかし,Tauriのv1.0の到達により,こちらも選択肢として考え,最終的にどちらにするかを決めようと思ったからである。# 早速比較してみる
【JavaScript】クイズアプリを作ってみよう（応用編）
こちらの記事は、[【JavaScript】クイズアプリを作ってみよう（基礎編）](https://qiita.com/asami___t/items/cb4c750b721737e83908)の続きになります。
基礎編は1問解いて終わりでしたが、応用編では3問解き続けて、最後に「あなたは3問中●問正解でした」と表示させたいと思います。
HTMLファイルは基礎編から変更はありません。# 3問解き続けられるようにする
“`JavaScript:app.js
// 複数のクイズを解けるようにするため、連想配列(辞書型){}に変更する。
// 連想配列を作ったら、リスト型[]で囲む。
const quiz = [
// 1つ目のクイズを定義
{
question: ‘赤い果物は次のうちどれでしょう？’,
answers: [
‘メロン’,
‘レモン’,
‘バナナ’,
‘りんご’
],
correct: ‘りんご’
},
// 2つ目のクイズを定義
{
question: ‘果
Javascriptの非同期処理を克服しよう
今回初めて社外勉強会に出てみたので、その時学んだことをシェアしたいと思います。内容としてはJavascriptの非同期処理を克服しようといったもので、様々な非同期処理の書き方を学んでいきます。
## そもそも非同期処理って何?
Javascriptではシングルスレッドといって、処理の実行は前に行われている処理が終了するまで次の処理を実行することができません。これを同期処理とも言いますが、非同期処理では前の処理が終了するのを待たずに次の処理を行うことができます。何故このようなケースが必要なのかというと、例えばAPIを使用して他のサーバーからデータを取得する際に、同期処理ではそのユーザーがデータを取得するまで画面で操作を行えないといったケースが発生しますが、非同期処理を行えばデータ取得を待たずに画面上で操作を続けることができるようになります。
## 非同期処理の例 その1
ここでは基本的な非同期処理を記載してみます。コードを読んでみて、consoleがどの順番で呼ばれるか想像してみてください。
“`javascript
console.debug(‘1’);fs.readFil
InDesign JavaScript XML 選択オブジェクトを兄弟関係の構造に
選択オブジェクトを兄弟関係の構造にするスクリプトは、これで良いのかな・・・？
~~~JavaScript
/*
このスクリプトを利用して起こった不具合の責任は取れません。
ご了承下さい。更新 2022/06/17
*/// アプリ指定
#target “indesign”;// スクリプト名
var scriptName = “選択オブジェクトを兄弟関係の構造に”;// メモ：doScriptをすると元に戻したときおかしくなる事がある。
// 参照要素配列
var associatedXMLElementArray = [];// タグ付きプリセットオプションの画像のタグがImageで無い場合
if(app.activeDocument.xmlPreferences.defaultImageTagName != “Image”){// Imageに
app.activeDocument.xmlPreferences.defaultImageTagName = “Image”;
}// タグ付きプリセットオプションのテキストフレーム
javascript前期中間試験（配列と代入7問）
## はじめに
プログラミングを学習し始めて最初にくるハードルが配列です。筋の良い学生でも、配列と代入が組み合わさるとちょっと怪しくなります。配列への代入による影響について７つの問題を(高専本科2年生むけ)前期中間試験想定としてやってみましょう。
## 問題
### 問1 何が表示されますか
“`javascript
let x;
let y;
x = 1;
y = x;
x = 5;
console.log(y);
“`
### 問2 何が表示されますか
“`javascript
x = [1, 2];
y = x;
x[0] = 5;
console.log(y[0]);
“`
### 問3 何が表示されますか
“`javascript
x = [1, 2];
y = […x];
x[0] = 5;
console.log(y[0]);
“`
### 問4 何が表示されますか
“`javascript
x = [
{ a: 1, b: 2 },
{ a: 3, b: 4 },
];
y = […x];
x[0].a = 5;
console.log(y
Stripe Checkoutの決済ページや請求ポータルを、任意の言語で表示するように設定する方法
Stripe Checkoutで顧客に表示する決済ページは、基本的にはブラウザの設定言語と同じ言語で表示されます。
ですが、「サイトやアプリのユーザー設定で言語が変更できる場合」など、ブラウザの設定とは異なる言語でページを表示させたい場合も存在します。
その場合は、セッション作成時に、 `locale`パラメータを追加しましょう。
## Checkout（決済ページ）のセッションで、言語を個別指定する
“`js
const sessions = await stripe.checkout.sessions.create({
customer: customerId,
line_items: [{
price: ‘price_xxxx’,
quantity: 2,
}],
success_url: ‘https://example.com?success’,
cancel_url: ‘https://exampl
