- 1. 非同期処理 async、await[JavaScript]
- 2. [Three.js r165] WebGPURenderer.outputColorSpaceはMaterial.opacityに影響を与える
- 3. JavaScriptでZIPファイルを操作する方法：zip.jsを使ってみよう
- 4. React19にuseActionStateが導入されて非同期処理がシンプルになった
- 5. 体育科出身の僕がLeetCode入門してみた – Day3 2704. To Be Or Not To Be
- 6. LZP圧縮
- 7. JavaScriptでもできる！JSDocを使った型定義の基本と実践例
- 8. NestJSで学ぶ、依存性注入(DI)の基本とメリット
- 9. 【stackblitz】簡単にフロントの環境を共有できるオンラインIDE
- 10. オブジェクトが持つ任意のキーに対する値を配列に入れ込みたい
- 11. 【便利】AIに作ってもらったタイマー
- 12. 非同期処理 Promise[JavaScript]
- 13. 【JavaScript】え？forって使わんの？
- 14. 【高速化】画像を速く、確実に表示する方法
- 15. JavaScriptのPromiseとは何か？
- 16. Cognos Analytics 12.0.3 レポート JavaScript APIの更新
- 17. polyfill.ioを使うのは危険かもしれない
- 18. jQueryのイベント設置: セレクタ指定の有無で何が変わる？
- 19. js課題（009）進捗
- 20. 制作したWebサイト、Webアプリケーションのパフォーマンスを測定する
非同期処理 async、await[JavaScript]
非同期なJavaScripについてまとめ、Promiseについてもまとめたので、
最後にasync、awaitについてまとめていこうと思います。async、awaitは、Promiseをより簡単に書くことのできる糖衣構文になります。
>※糖衣構文(とういこうぶん)とは？ wiki 参照：
>
>プログラミング言語において、読み書きのしやすさのために導入される書き方であり、複雑でわかりにくい書き方と全く同じ意味になるものを、よりシンプルでわかりやすい書き方で書くことができるもののことである。非同期処理の考え方やPromiseについては、下記で記載させていただいてます。ご参考までに。
https://qiita.com/shisshi_engineer/items/6cfbd29820ac8607ae5b
https://qiita.com/shisshi_engineer/items/ed9832bc1257ca42c15b
## 目次：
– [async関数](#async関数)
– [await演算子](#await演算子)
– [Promiseがresolve
[Three.js r165] WebGPURenderer.outputColorSpaceはMaterial.opacityに影響を与える
## 先に結論だけ
Three.js r165において
– `WebGPURenderer`では`outputColorSpace`はMaterialの透明度に対して影響を与えます
– `WebGLRenderer`では`outputColorSpace`を変更してもMaterialの透明度は影響されませんWebGPURendererでWebGLRendererと同じようにMaterialの透明度を扱いたい場合は、[Colorクラス](https://threejs.org/docs/#api/en/math/Color)の変換関数を利用しましょう。
## はじめに
この記事は、Three.js r165のWebGPURendererにおいて、`outputColorSpace`とMaterialの透明度の関係性について調査した結果をまとめたものです。
### 対象とする読者
– Three.jsを使用している方
– WebGPURendererを使用しているか、使用する予定がある### 対象とする環境
– Three.js r165
– Chrome v126.0
JavaScriptでZIPファイルを操作する方法：zip.jsを使ってみよう
ZIPファイルは、複数のファイルやディレクトリを一つの圧縮ファイルにまとめる便利な形式です。今回は、JavaScriptを使ってZIPファイルを操作する方法を紹介します。具体的には、`zip.js`というライブラリを使って、ZIPファイルの内容をリスト表示し、ユーザーが選択したファイルを抽出する方法について解説します。また、ZIP64仕様にも対応できることを説明します。
# zip.jsとは？
`zip.js`は、JavaScriptでZIPファイルを読み書きするためのライブラリです。ブラウザ上でZIPファイルの操作ができるため、サーバー側の処理なしでクライアントサイドで完結できます。特に、ZIP64仕様にも対応しているため、大きなファイルやディレクトリの圧縮・解凍にも適しています。
`zip.js`の公式ドキュメントはこちらからご覧いただけます: [zip.js公式サイト](https://jsr.io/@zip-js/zip-js)
# 準備
まず、`zip.js`のライブラリをプロジェクトに追加します。以下のようにCDNから読み込むことができます。
“`html
<
React19にuseActionStateが導入されて非同期処理がシンプルになった
## はじめに
React19で新たに追加された`useActionState`は、非同期アクションの状態管理を簡素化し、エラーハンドリングや状態管理を容易にします
本記事では、`useActionState`の使い方とその利便性について解説していきます## `useActionState`関数とは
`useActionState`は非同期アクションの実行状態、成功時の状態、エラー時の状態を一元管理できるフックです
これにより、非同期アクションの実装が簡潔になり、コードの可読性が向上します### React 19の実装例: useActionStateの使用
“`js
import { useActionState } from ‘react’;cont [error, submitAction, isPending] = useActionState(
async (previousState, newName) => {
const error = await updateName(newName);
if (error) {
// エ
体育科出身の僕がLeetCode入門してみた – Day3 2704. To Be Or Not To Be
# 概要
文系（体育科）卒業の僕が、人並みのアルゴリズムを身につけるためにLeetCodeを初めてみました。
日本だとAtCoderが一般的なようですが、海外エンジニアへの憧れを持つ僕はLeetCodeを選びました。フロントの言語しかほぼ触ったことがないのでJavaScriptでやっていこうと思います。
# 問題
[text](url)問題文
> Write a function expect that helps developers test their code. It should take in any value val and return an object with the following two functions.
toBe(val) accepts another value and returns true if the two values === each other. If they are not equal, it should throw an error “Not Equal”.
notToBe(val) accepts anoth
LZP圧縮
LZ77系の変異種、LZP様を紹介します。これは過去出現した文字列と一致する文字列を少ない情報量で出力できます。なんと一致判定flagと一致長のみ。LZ77系は一致位置というかなり幅のある情報も出力。それに比べると大幅な改善です。………が、良い事ずくめではありません。
一致率が非常に控え目なのです。展開速度は高速ですがLZ77系には劣ります。そういう訳で、これ単体ではほぼ役に立ちません。他の圧縮法の前処理として利用するのが一般的です。## 原理
直前の数文字からhash値を計算し、その値を添字にして文字列の位置を配列に格納しまくっていきす。
その配列から得た位置を基準に次の文字列と一致する長さが一定以上あれば、一致成功と判定します。## 実装
今回の実装ではhash値というより、3文字分そのまんまの値を添字にして配列に位置を格納。故に配列長は16MB。
一致flagは引数`flag`で指定(0～255)。256以上にすると自動で決定。
一致成功とする最低一致長は引数`min`で指定(0～127)。実際には+2される。
引数`level`で一致探索法を指定(0～2)。圧縮率にささ
JavaScriptでもできる！JSDocを使った型定義の基本と実践例
## イントロダクション
### JavaScriptでの型定義の重要性
JavaScriptは、動的に型が決定される柔軟な言語です。この柔軟性は、迅速な開発やプロトタイピングにおいて大きな利点となりますが、同時に大規模なプロジェクトや長期間にわたるメンテナンスにおいては、バグの原因となることがあります。特に、変数や関数の型を明示的に定義しないため、**思わぬ型の不一致**や**予期しないエラー**が発生することがあります。
### TypeScriptとの違い
TypeScriptは、JavaScriptに静的型付けの概念を導入し、これらの問題を解決するための強力なツールです。しかし、すべてのプロジェクトでTypeScriptを導入するのは現実的ではない場合があります。既存のJavaScriptプロジェクトをすべてTypeScriptに移行するのは時間と労力がかかるためです。
そこで、TypeScriptを導入せずにJavaScriptのまま型定義を行う方法として、JSDocコメントを利用する方法があります。### この記事の目的
この記事では、TypeScriptを
NestJSで学ぶ、依存性注入(DI)の基本とメリット
## はじめに
NestJSは、モダンなNode.jsフレームワークであり、効率的でスケーラブルなサーバーサイドアプリケーションの開発をサポートします。その設計はAngularにインスパイアされており、強力な型システムやデコレータを活用したコーディングスタイルが特徴です。特に、依存性注入（DI）の概念を取り入れることで、コードの管理とメンテナンスが非常に容易になります。
しかし、DIの概念は初心者にとっては難解であり、理解に時間がかかることがあります。私自身も最近NestJSのプロジェクトに参画した際、DIの概念を理解するのに苦労しました。この経験を基に、この記事ではDIの基本概念から実践的な使い方、さらにそのメリットについて詳しく解説します。
## 本記事の目的と対象読者
本記事の目的は、NestJS初心者に対してDIの基本的な概念とその実装方法をわかりやすく解説し、DIをプロジェクトに導入できるようになることです。対象読者は、以下です。
– **NestJSを初めて使う開発者**
– **依存性注入について理解を深めたいと思っているバックエンドエンジニア**この記事
【stackblitz】簡単にフロントの環境を共有できるオンラインIDE
フロント向けにオンラインIDEというものを初めて触って感動したので共有したいと思います。
# 対象
本記事は私のようなフロントエンドの開発初心者、プログラミング初心者の方を対象にしています。
（内容に間違い等あればご容赦ください）# 本記事で紹介するオンラインIDEについて
本記事では**stackblitz**というサービスについて紹介します。
https://stackblitz.com/
無料プランでも結構利用することができ、Githubアカウントがあればログインすることが出来ます。
編集画面はこんな感じです。
おなじみVSCodeに雰囲気が似ているのですぐ馴染めます。
スクショはHTMLとCSSだけのプロジェクトのものですが、javascriptやTypeScript、ReactやVue.jsなど様々な
オブジェクトが持つ任意のキーに対する値を配列に入れ込みたい
# はじめに
よくあるやつだと思いますが、備忘録としてまとめておきたいと思います。
# やりたいこと
下記のようなオブジェクトをフロントで受け取った際、
“`view_data = [‘12345678’, ‘87654321’]“`のようにdata_idsを配列に入れ込みたい。“`jsx
allowed_data = [
{
“id”: “1”,
“data_ids”: [
“12345678”
]
},
{
“id”: “2”,
“data_ids”: [
“12345678”,
“87654321”
]
},
{
“id”: “3”
},
{
“id”: “4”,
“data_ids”: [
“12345678”
]
}
]
“`# 手順①
【便利】AIに作ってもらったタイマー
## フレームワークはもはや必要なくなった。なぜなら。。
最近私はフレームワーク不要論を唱えています。
なぜならAIがコーディングしてくれるのでフレームワークを使わない冗長的なコードのほうがAIとしては出力しやすいからです。
フレームワークはバージョンが上がると突然すべての書き方が変わったり、古すぎたりするとセキュリティ的なリスクが純正より高くなります。
## 普段のお仕事のお悩み、それは時間管理
私は普段教育関係のお仕事をしています。
そこでよく問題になるのが**時間管理**です。
受講生側や講師側も目の前のことに集中しすぎていて
いつの間にかお昼休みの時間になっていたり、終了予定の時間を超えて講義してしまったりします。
**残業してる自分ってなんて会社に貢献してるんだろう**なんていう価値観もいまだに根強く残っています。
## シンプルなタイマーを使って共有しよう
こちらがシンプルなタイマーのスクショです。パラメーターにイベント名を入力すると勝手に見出しにしてくれます。
– [非同期処理の成功や失敗を表現するオブジェクト「Promise」](#非同期処理の成功や失敗を表現するオブジェクトpromise)## 非同期処理の成功や失敗を表現するオブジェクト「コールバック関数の場合」
プロミス: 非同期処理の成功や失敗を表現するオブジェクトです。
例：
リクエストを投げて情報を取得する場合。APIなどリクエストを投げる時には、時間がかかるかもしれないし、成功するか失敗するかわかりません。
・ログインしていないかもしれない
・URLが間違っているかもしれない
・インターネットがつながっ
【JavaScript】え？forって使わんの？
とある記事ではJavaScriptの`for`句を巡って議論が交わされていたので少し興味をもちました。私はこれらの議論に参加できるほどの専門力はありませんが感想程度に。
間違い等あればコメントいただけますと幸いです。https://qiita.com/ukiuni@github/items/abad07524856c65a20ea#comment-f2d7f3bb190f9395bf38
https://qiita.com/miyabisun/items/8e52b7ba6ef38028f1c4
https://qiita.com/miyabisun/items/4cc9114c1a998cd9bfd7
# 読み取れたこと
### メリット
* 行数が減る
* ネストが深くなりづらい
* 可読性…?“`javascript:🤔.js
const a = [];
for (let i=0; i<=99; i++){ a.push(i); } const a = Array(100).fill().map((_, i)=>i)
“`* 一度`for`なしを
【高速化】画像を速く、確実に表示する方法
## ポイント
– 外部の画像サーバーは安定性の懸念がある
– 画像を後から差し替える## 目的：画像を速く、確実に表示する
前回、外部のサーバーを利用すると画像を高速に表示できることを紹介した。
一方で、外部のサーバーは安定性の懸念があり、サーバーにトラブルが発生すると画像が表示されなくなる問題がある。
そこで、画像を遅延読み込みで差し替えて確実に表示できるようにする。
## 遅延読み込みの方法
遅延読み込みする画像は、次のように記述する。
~~~
~~~`data-src=””` という項目を追加して、差し替える画像のURLを記入する。
次に、ページの最後にこの記述を追加する。
~~~