- 0.0.1. JavaScript: 配列複製の速度比較
- 0.0.2. 【Nuxt3】definePropsの分割代入の変数をリアクティブにしたい！
- 0.0.3. p5.js のフィルター用シェーダー「createFilterShader()」で三角関数を使ったノイズ（WebGL 2.0／GLSL ES 3.0）：seed・スクロールアニメーションを追加
- 0.0.4. 長距離ドライブをサポートするアプリを作成しました
- 0.0.5. ロボットアームのゲームです。
- 0.0.6. httpからhttpsに対応したら急にjavascriptの何かが動かなくなった。
- 0.0.7. 【Publisher】KENDO Template can be prepared with Sharperlight expression
- 0.0.8. ChatGPT によるリバーシの作成
- 0.0.9. 「WebデザイナーはJavaScriptをどこまで学べば良いか？」をChatGPTに聞いてみた
- 0.0.10. プログラマーが陥る悪癖とは
- 0.0.11. JSONの型について
- 0.0.12. 【JavaScript】追加、編集、削除機能を持つToDoアプリを作ってみた
- 0.0.13. 小さなGPUでのエンジニアリング。1億もの調整可能なパラメーターを持つ巨大な1層のニューラルネットワーク。
- 0.0.14. TensorFlow.js ブラウザで画像ファイルからのオブジェクト検出するゲーム。
- 0.0.15. トカマク型核融合炉のトーラス内を二方向に高速でパーティクルが流れるアニメーション。
- 0.0.16. JavaScriptのdebounce実装方法
- 0.0.17. script
- 1. 動的タイトル設定のテスト
JavaScript: 配列複製の速度比較
spread構文とArray系関数の複製速度の比較をしてみます。
# benchmark 1
“`js:配列1匹分
for(let loop=1<<20,size=2,n=10;n--;loop/=2,size*=2){ let A=Array(size).fill(1),t=new Date; for(let a=loop,b;a--;)b=[...A]; t=new Date-t; let u=new Date; for(let a=loop,b;a--;)b=A.concat(); let v=new Date; for(let a=loop,b;a--;)b=A.slice(); let w=new Date; for(let a=loop,b;a--;)b=Array.from(A); console.log("loop:",loop,"size:",size,"time:",t,new Date-u,new Date-v,new Date-w) } ``` ## Chrome(128.0.6613.113)
loop 【Nuxt3】definePropsの分割代入の変数をリアクティブにしたい！
閲覧頂き、ありがとうございます🙇
この記事は `definePropsの分割代入` における、
`リアクティブ状態の保持` のための備忘録です！# 前提
| name | version |
| – | – |
| Nuxt.js | v3.13.x |
| Vue.js | v3.5.x |# ざっくり3行まとめ💨
* `propsDestructure: true` にすることで可能
* Vue.js v3.5では、`デフォルトで有効化される`
* Nuxt.js v3.13 上で動かした場合、内部的に Vue.js v3.5 でも`デフォルトで無効`の模様# 経緯🧐
以下のように親からPropsを渡し、子で分割代入した際にリアクティブが失われる
“`Parent.vue
p5.js のフィルター用シェーダー「createFilterShader()」で三角関数を使ったノイズ（WebGL 2.0／GLSL ES 3.0）：seed・スクロールアニメーションを追加
こちらの記事で書いていた内容の続きです。
●p5.js のフィルター用シェーダー「createFilterShader()」で三角関数を使ったノイズの WebGL 2.0／GLSL ES 3.0 バージョン（The Book of Shadersより） – Qiita
https://qiita.com/youtoy/items/e11126452f8528813f3b具体的には、上の記事で書いていた「見た目が 1種類限定の静止画的なノイズ画像」に関して、「見た目を変える」「アニメーションさせる」という 2つのことをやります。
（「見た目が異なる複数種類の、静止画的な出力のノイズ画像の出力」と「xy方向にスクロールするアニメーション」という内容をやります）それらを試した内容は、以下のとおりです。
https://x.com/youtoy/status/1830086501017010566
## 実装について
ノイズ画像をシェーダーで出力する話は、[前の記事](https://qiita.com/youtoy/items/e11126452f8528813f3b)か、そ長距離ドライブをサポートするアプリを作成しました
## はじめに
こんにちは！
[ジョニー](https://x.com/johnny1_ryo) と申します。
未経験からエンジニア転職を目指して、日々学習をしています。この度、[kodora-co-driver](https://www.kodora-co-driver.com/) を開発しました。
## サービス名 : kodora-co-driver
▼ サービスURL
https://www.kodora-co-driver.com/
▼ Githubリポジトリ
https://github.com/johnny23ryo/kodora-Co-Driver-
## アプリ名の由来
アプリ名「kodora-co-driver
ロボットアームのゲームです。
https://qiita.com/tetsutakamurata76/items/449c6f3f2086a963b041
GPT-2: ロボットエンジニアリング。3軸ロボットアームシミュレーションのゲームです。ロボットの制御は、ロボットがロボットを動かすための制御機構ですが、その制御をロボットに命令するのではなく、制御するロボットを制御するために、コンピュータがプログラムを実行します。 プログラムはプログラムの実行結果をコンピュータに送信し、プログラムが実行された結果がコンピュータのプログラムに送られます。プログラムを実行するロボットはロボット制御プログラム(プログラム制御)をプログラム実行プログラムとして実行しています。 このプログラムでは、プログラミングの知識がなくても、簡単にロボットを動かせますし、「ロボットプログラミング」というと、難しいイメージがありますが、「プログラミングを学ぼう」と思えば、誰でも簡単に学べるので、初心者でも安心ですね。
# チャットの内容
簡単なやり取りで、ゲーム作成・改良が出来ました。
チャットの内容を公開リンクにしてみました。https://chatgpt.com/share/d1bfccd4-8df2-47e1-8247-3da6004f7ac3
– JavaScript で、リバーシゲームを作成してください
– コードを応答
– 初期画面不正
– 初期画面に4つの駒が配置されていません
– コードを応答
– ゲーム画面表示・動作
– ゲーム中も白と黒の個数を表示して
– コードを応答「WebデザイナーはJavaScriptをどこまで学べば良いか？」をChatGPTに聞いてみた
# はじめに
この記事では、タイトル通りChatGPTに「JavaScriptをどこまで学べば良いか？」を聞いた内容をまとめています。
Webデザイナーなので、そこまで難しい操作というよりは「簡単なアニメーションができたらいいな」という気持ちはあったのですが、勉強の手順に少し悩んでいたので聞いてみました。# そもそもJavaScriptって何ができるの？
JavaScriptは、フロントエンド開発の中心的な技術であり、クライアントサイドのインタラクションを実現するために欠かせないものです。
以下の７点は、IT・Webサービスにおいてよく使われている技術の一覧です。### ①動的なウェブコンテンツの作成
HTMLやCSSを動的に操作して、ユーザーインターフェースをリアルタイムで変更できます。### ②イベント処理
ユーザーのアクション（クリック、入力、スクロールなど）に応じて、特定のコードを実行できます。### ③フォームのバリデーション
ユーザーがフォームに入力する際に、リアルタイムでチェックを行い、エラーメッセージを表示できます。### ④非同期通
プログラマーが陥る悪癖とは
# はじめに
長年、プログラミングをしていても、この悪い癖が時々、出てきます。
どういう状況の時に、出てくるかといいますと、デバックをしているときです。
一応、頭の中で考えている仕様がありますので、それに基づいてプログラミングをします。
そこで、動作確認のため、デバッグを始めます。ここで、エラーが出ます。
ここからです。悪戦苦闘が始まります。
対象としているロジックは、静的な処理ではなく、動的処理です。
特に、イベントリスナーのお化け状態のロジックになるとお手上げです。
今回のロジックは、あるブログにyoutubeの動画を複数埋め込んでいるページが対象です。
行いたいことは、各動画にリピートを追加することです。これは、比較的楽にプログラミングができました。
次に行いたいことが、問題のロジックです。
動画が複数ありますが、それらに対して、ある連携処理を行う時に発生します。
(1)リピート追加後の各動画はすべて一時停止しています。
(2)次に、いずれかの動画を選択して再生ボタンをクリックして再生します。選択した動画は再生できます。
(3)次に、その状態で、他の動画を再生します。この時、前回JSONの型について
## アジェンダ
JSON（JavaScript Object Notation）は、データをシンプルで読みやすい形式で表現するためのフォーマットです。ウェブアプリケーションやAPI間でデータをやり取りする際によく使われます。
ここでは、JSONで使用できるデータ型について簡単にまとめます。## JSONの基本構造
JSONのデータは、以下の2つの構造を基本としており、データ型は6つあります。
– **オブジェクト**: `{}` で囲まれたキーと値のペアの集合。キーは文字列、値は任意の型です。
– **配列**: `[]` で囲まれたデータのリスト。値は任意の型です。例:
“`json
{
“name”: “John”,
“age”: 30,
“isStudent”: false,
“courses”: [“Math”, “Science”],
“address”: {
“city”: “New York”,
“zip”: “10001”
}
}
“`## JSONで使用できるデータ型
JSONで扱えるデータ型は、Jav
【JavaScript】追加、編集、削除機能を持つToDoアプリを作ってみた
## はじめに
これまで勉強してきたことを活かして、追加、編集、削除機能を持つToDoアプリを作ってみたので、その時のことをメモに残します。
▼（2024/09/07追記）▼
コメントにて完成品に不具合があるとのご指摘をいただきましたので、完成品と記事に掲載しているコードの修正を行いました。
## 完成品
## 実装したいこと
– テキストボックスにToDoを入力し追加ボタンを押すと、ToDoがリストに追加される
– テキストボックスが空欄のまま追加ボタンを押すと、アラートが出る
– リストに追加された各ToDoには、編集ボタンと削除ボタンを付与する
– 編集ボタンを押すと、ToDoのテキスト部分がToDo名の値を保持したテキストボックスに変化する
– T小さなGPUでのエンジニアリング。1億もの調整可能なパラメーターを持つ巨大な1層のニューラルネットワーク。
##### GPT-2: ショートストーリー: GPT-2: 東京の郊外にある中学校、その校舎の片隅にひっそりと存在するコンピュータークラブ。主人公の中学1年生、タケルはこのクラブに所属している。タケルは他の部員が放課後に遊びに行く中、一人でコンピューターに向かっていた。彼は、自宅から持ってきた小さなgpuを搭載したパソコンを前に、静かにキーを叩いていた。タケツの穴から、彼の顔が覗き込まれている。その顔は、まるで、自分の顔のように、大きく、そして、小さく、歪んでいる。 タタツは、「この顔、なんか、変だな」と、思っていた。しかし、彼は、「顔の歪み」を、気にしていた。 「顔」は「顔立ち」ではなく、「表情」である。
（若き日のチャットGPTはこんなだったということです。でもこれはこれでよい。）### GPT-4: ショートストーリー: 1億もの調整可能なパラメーターを持つ巨大なニューラルネットワークを動かしたらどうなるんだろう？
東京の郊外にある中学校、その校舎の片隅にひっそりと存在するコンピュータークラブ。主人公の中学1年生、タケルはこのクラブに所属している。タケルは他の部員が放課後TensorFlow.js ブラウザで画像ファイルからのオブジェクト検出するゲーム。
### 画像ファイルをローカルPCから選択してオブジェクト検出を行うコードです。TensorFlow.jsのCOCO-SSDモデルを使用して、ファイル選択後に画像内のオブジェクトを検出します。
ブラウザページ再読み込みで別画像でオブジェクト検出できます。
(ページ下部にボタンあります。)
### トカマク型核融合炉のトーラス内を二方向に高速でパーティクルが流れるアニメーションを行うHTMLとJavaScriptのコードです。これを実現するには、WebGLからGPUを利用して3Dオブジェクトを描画し、パーティクルシステムを作成します。Three.jsという3Dライブラリを使ってトーラスをワイヤーフレームで描画し、その内部でパーティクルが流れるアニメーションを実装してます。
“`html
<JavaScriptのdebounce実装方法
#### どんな時にdebounceを使うか
高頻度で発火するイベントを制御したいとき、特定の時間間隔内に再度イベントが発火し、重複に関数を実行することを防ぐときに利用する一つ手法です#### 実装例
“`js
function debounce(fn, delay) {
let timer_id;
return function (…args) {
clearTimeout(timer_id);
let fn_this = this;
timerId = setTimeout(function () {
fn.apply(fn_this, args);
}, delay);
}
}var tag_name = document.querySelector(‘tag_name’);
tag_name.addEventListener(‘input|mousemove’, debounce(function (e) {
console.log(‘ユーザの操作script
“`
動的タイトル設定
動的タイトル設定のテスト
URLパラメータを確認中…
