- 1. 消えてくれないループ removeするとindexが詰められる
- 2. サイトリサーチ 01
- 3. JavaScript 第11回 ウィンドウをドラッグ＆ドロップの改善・注意事項
- 4. りあクト！【① 言語・環境編】を読もう
- 5. FilePond ファイルサイズに制限をかける（バリデーション）
- 6. 基礎に戻って配列の処理をやり直したPart4 ChatGPT TSジェネリクスでスプレッド構文編。
- 7. encodeURI() と encodeURIComponent() の共通点と相違点
- 8. Highcharts で数値をカンマ区切りで表記するオプション指定
- 9. 【JavaScript】非同期処理の解説
- 10. ボタンタグのオンクリックイベントに、関数を設定するときの注意点
- 11. 【JavaScript】配列から条件に一致する要素を取得する方法
- 12. Javascriptの条件分岐がうまく動作しない…
- 13. Google Chrome の開発者コンソールでspanタグを120回クリックしてみた
- 14. Clould Functionsを用いたFirestoreのサブコレクション削除にバッチ処理を用いる
- 15. 【JavaScript】配列と繰り返し(for文)
- 16. Line Sticker Downloader LINEスタンプダウンロード
- 17. Vue3＋Vuetify3で電卓を作る
- 18. JavaScript 入力判定
- 19. JavaScriptのイベント駆動について復習
- 20. javascriptのよく使う配列処理と使える小技
消えてくれないループ removeするとindexが詰められる
Adobe Extendscriptを書いていて、選択したものを消したいのに消えない、でもいくつかだけ消える。ということがあり、実は当たり前のことに気づいていなかったので、自分メモ
“`js:元のコード
var doc = app.activeDocument;
var sel = doc.selection;for(var i=0; i < sel.length; i++) { sel[i].remove(); } ``` これで全部消えるだろうと思っていましたが、消えませんでした。 ```js:正解のコード var doc = app.activeDocument; var sel = doc.selection; while (sel.length > 0) {
sel[0].remove();
}
“`
または
“`js:正解のコード(2)
for (var i = sel.length – 1; i >= 0; i–) {
sel[i].remove();
}
“``sel[n]`を`remove()`すると、`sel[n+1
サイトリサーチ 01
▼サイト名
雑貨屋HAPPENING▼URL
https://happening.store/▼このサイトについての分析
全体的にデコラティブでユニークな印象を受けた。
おそらくゴシック体のフォント、バウンスのかかったアニメーション、彩度等からそれらを感じ取ったのではないか。背景が青色で、グラフィックデザインっぽくなりそうなところ、余白を大きめにとってWebサイトらしさが出ているようにしているように感じた。
社名の「HAPPENING」感をデザイン全体を通して感じることができた。ちゃんとサイトの概要とデザインが結びついているのがとても良いと思った。
JavaScript 第11回 ウィンドウをドラッグ＆ドロップの改善・注意事項
# はじめに
第9回、10回と作成したウィンドウをドラッグ＆ドロップのソースについて、もう少し改善の余地があり、また、注意することもあるなと思いましたので、まとめます。
なお、第10回のソースをベースとしますので、第9回、第10回を見ていることを前提として記載します。# 今回実施する内容
– HTMLのbodyの範囲の確認
– `pointermove`が該当要素の外へ出た場合の対応
# ソースコード(Git Hub)
https://github.com/Build-Mount/JS_11_drag_pointer2# 環境
OS: Windows 11 JP (64bit)
Microsoft Edge：バージョン 121.0.2277.98 (公式ビルド) (64 ビット)# 参考
[position](https:
りあクト！【① 言語・環境編】を読もう
# はじめに
こんにちは！
昨今のフロントエンド関連、ありえん難しいです。
わたしは業務でReactやvue以降のモダンフロントエンド技術に触れたことがなく、
ずっと、バックエンドFWとHTML/CSS, JQueryという古の技術を使っていました。
エンジニアとして四年目を迎えているのにも関わらずこれは非常にマズいと思い、Reactやそのフレームワークを独学していますが、
– え…なんでこの書き方にする必要があるの…?
– なんとなくこう書いているけどこれは合っているの?
– なにをやっているか理解できずお作法として書いているコードがあるなどなど、不安な気持ちでいっぱいです。
そんな中、モダンフロントエンド周りを理解するために購入した一冊の本がとてもためになったので、紹介します。
# りあクト！ TypeScriptで始めるつらくないReact開発 第4版【① 言語・環境編】
大岡由佳さんという方が出している本です。購入はこちらから
[りあクト！ TypeScriptで始めるつらくないReact開発 第4版【① 言語・環境編】](https://booth.pm/
FilePond ファイルサイズに制限をかける（バリデーション）
## はじめに
今回はFilePondを使ってアップロードした画像に対してサイズの制限をかける処理を実装します。
公式からプラグインが提供されているので、そちらを使用します。
FilePond公式ドキュメントは非常にわかりやすかったので、英語が得意の方は当記事を閲覧するよりも公式ドキュメントを参考にした方が良いかもしれません…
[FilePond公式 サイズ制御](https://pqina.nl/filepond/docs/api/plugins/file-validate-size/)## FilePondを読み込む
今回はCDNを使用してFilePondを読み込みます
“`html
基礎に戻って配列の処理をやり直したPart4 ChatGPT TSジェネリクスでスプレッド構文編。
# タイトル
基礎に戻って配列の処理をやり直したPart4 ChatGPT TSジェネリクスでスプレッド構文編。## 開発環境
“react”: “^18.2.0”,
“typescript”: “^4.9.5”,## 何故この記事を書こうと思ったのか。
前回の記事を参照ください。
https://qiita.com/nuhaha_2023/items/c1f7bb9796b08af60a5b## 問題の形式
ChatGPTを使用して以下の文言を各毎回投げるとします。
問題自体を自動生成してくれるのでテンプレートだと楽ですね。———–
以下のコードの基本的な処理から応用的な処理の問題を4個出して欲しい、
言語 javascript typescript
問題として使用したいメソッド 「」
こちらから使用するメソッドを指定するからこれで問題出してほしい、特にヒントはいらない、問題だけ4個出して欲しい。
オブジェクトと配列に関してはサンプル程度のを問題と一緒に用意して欲しい。
詰まるか答え合わせが必要になった時はまた送信するからレビュ
encodeURI() と encodeURIComponent() の共通点と相違点
# はじめに
この記事では、“`encodeURI()“` と “`encodeURIComponent()“` の共通点と相違点について整理します。https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/encodeURI
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent
# URLエンコードとは
> パーセントエンコーディング (英: percent-encoding) とは、URIにおいて使用できない文字を使う際に行われるエンコード（一種のエスケープ）の名称である。「%」を使用していることから、この名称で呼ばれている。一般にURLエンコードとも称される。https://ja.wikipedia.org/wiki/%E3%83%91%E3%83%BC%E3%82%BB%E3%83%B3%E3%83%88%E3%82%A8
Highcharts で数値をカンマ区切りで表記するオプション指定
ググった際に最適解に辿り着けないので備忘録
`Highcharts.setOptions` メソッドで `thousandsSep` に `,` を指定する
“`javascript
Highcharts.setOptions({
global: {
useUTC: false,
},
lang: {
decimalPoint: ‘.’,
thousandsSep: ‘,’,
},
});
“`## Highcarts API リファレンス
* [lang.thousandsSep](https://api.highcharts.com/highcharts/lang.thousandsSep)
【JavaScript】非同期処理の解説
# ■ 非同期処理とは
非同期処理を説明する前に、皆さんはCPU目線でIOにどのくらいの時間がかかっているか直感的に想像できますか。
[Latency Numbers Every Programmer Should Know](https://colin-scott.github.io/personal_website/research/interactive_latency.html) を参考に少しまとめてみます。“`
L1キャッシュの参照: 1 nsL2キャッシュの参照: 4 ns
メインメモリの参照: 100 ns
SSDのランダムリード: 16,000 ns (16μs)
HDDのシーク: 2,000,000 ns (2ms)
httpでAPIにアクセス: 1,000,000,000 ns (1s)
“`メインメモリへのアクセスと比較すると、SSDへのアクセスには160倍、HDDへのアクセスには10,000倍もの時間がかかります。ネットワークアクセスともなれば10,000,000倍です。
人間には一瞬に感じられるIOも、CPUからすると非常に待ち
ボタンタグのオンクリックイベントに、関数を設定するときの注意点
## 初めに
今回map関数内で`## 問題のコード
以下が勝手に動き始めたコードです。
``
こちらはTodoアプリに埋め込まれているボタンで、削除ボタンをクリックしたらその項目(index番目)をTodoリストから削除する、という機能を持たせました。
ですが一度クリックをしたら、その後もどんどんと削除されます…## 原因と解決方法
今回の原因となる部分は`{onClickDelete(index)}`この部分でした。
こちらの部分を`{() => onClickDelete(index)}`このように変更したところ、正常に動作しました。
`{関数名()}`としてしまうと、勝手に関数が実行されてしまうので注意が必要です。## 終わりに
ボタンのクリック時に引数を持った関数を発火させ
【JavaScript】配列から条件に一致する要素を取得する方法
## 条件に一致する最初の要素を取得
`find`を使用して以下のように記述すると条件に一致する最初の要素を取得できます。
“`js
const array = [10, 20, 40, 30, 60];
const sampleFind = array.find((element) => element >= 35)
console.log(sampleFind) // 40
“`https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/find
## 条件に一致する要素の配列を取得
`filter`を使用すると条件に一致する要素の配列を取得できます。
“`js
const array = [10, 20, 40, 30, 60];
const sampleFilter = array.filter((element) => element >= 35)console.log(sampleFilter) // [40, 60]
“`https:/
Javascriptの条件分岐がうまく動作しない…
## 初めに
Shopifyのサイトを構築していて、Javascriptの条件分岐を記述していたのですが、思ったように動作してくれずに2時間ロスしました…
前提と実装したいことは以下の通りです。
– 商品メタフィールドにアイコンのテキスト（複数リスト）を登録（test1、test2、test3）して、各商品に0~3個のアイコンテキストを設定（ネームスペースとキー：custom.icon）
– 商品にアイコンが設定されていたら、そのアイコンに紐付くアイコン画像を表示
– アイコンに説明があれば、アイコン画像をクリックした時に説明文を表示(test-text1〜3)
– クリックするとis-activeクラスを追加・削除を行い、is-activeクラスに対してdisplay:none;を設定
## 問題
問題のコードは以下の記述です
“`html