- 1. ハッカソンで掃除をリズムゲーム化するアプリを作ってみた
- 2. Javascript + Reactで天気予報アプリを作ろう ～アプリケーション作成～
- 3. Nightbotで「グー」「チョキ」「パー」のじゃんけんをする
- 4. 初学者ワイ、ループ処理につまづいたので調べてみた。
- 5. 【JavaScript】オブジェクトの特徴について
- 6. Nightbotで「簡易的でない」おみくじを作る
- 7. 【JS/ES6】JSの型の種類
- 8. RustでもWebTransportがしたい! 2023年のミニまとめ付き
- 9. Cloudflareの無料プランでキャッシュキーをカスタマイズする方法
- 10. 電子ペーパーデバイス 2種に p5.js で描画した画像を表示させてみる【Processing】（Adventar）
- 11. 【完全保存版】2023年度Qiita月別人気記事ランキング【JavaScript】
- 12. 【0→100】ブログサイトを完成まで個人で作った話
- 13. Next.jsでEvernoteの代替アプリを自作してみた
- 14. JointJSでAdventCalendarを作成する
- 15. 【Next.js】public内のファイルがリンク切れになる
- 16. YouTubeのプレイリストから動画を付け替える
- 17. Tailwind CSSで要素を一度だけ一回転させる
- 18. Three.js勉強1.5: 環境構築(ローカル編)
- 19. UMD版Hexabase JavaScript SDKを使ってファイルアップロードを行う
- 20. Bunを駆使して学ぶNode.jsモジュール開発
ハッカソンで掃除をリズムゲーム化するアプリを作ってみた
# アプリの概要
掃除機のスライドを、取り付けたスマートフォンに搭載された加速度センサで検知し、リズムゲームの判定とするアプリです。
2020年の技育展で優秀賞をいただいた作品になります。
チームメンバーは私を含め3人で、私を除く2人はweb開発未経験でしたが2週間余りで作品を作ることができました。
github: https://github.com/ysdko/rhythmic-cleaner
デプロイURL: https://rhythmic-cleaner.vercel.app/## 主な機能
* 楽曲・難易度選択
の要求を吸い上げてからデベロッパ(開発者)が整理をし、重々認識合わせを行う必要がある重要な項目です。…ですが今回は利用者も開発者も自分なので
Nightbotで「グー」「チョキ」「パー」のじゃんけんをする
## グー、チョキ、パー…じゃんけん！
[Nightbotで「簡易的でない」おみくじを作る](https://qiita.com/curuusa/items/6f4d83bd0f4085ff678b)の続きです。
(「おみくじを作る」と言いながらじゃんけんしてますが)[Nightbot](https://nightbot.tv/) のコマンドには引数が使えます。
自作したカスタムコマンドでも、もちろん引数が使えます。今回は、Nightbotを導入したライブ配信で
「じゃんけん グー」とか「じゃんけん パー」と入力したら
その手を出してくれるコマンドを作ってみましょう。## 引数を使ってより複雑なおみくじにする
### １． [Nightbot](https://nightbot.tv/) 側の設定
Commandos > Custom からコマンドを追加しましょう。Messageにコマンドを入力。
新たな変数 [$(query)](https://docs.nightbot.tv/variables/query) を [$(urlfetch)](https://do
初学者ワイ、ループ処理につまづいたので調べてみた。
# はじめに
こんにちは！[堕罪ｵｻﾑ](https://qiita.com/awesomeDazzaye)です。
私、**for文**とかのループ処理を書くのがめっちゃ苦手なんです……。だからなんだよと言われるとアレなんですけども。泣
あまりにfor文が分からなかったので、for文の中身を分解して理解を深めようと思います！
また後半はfor文以外のループ処理についても引用をして理解を深めました。
**for文やループ処理が苦手だ**といった仲間がいらっしゃいましたらぜひ読んでみてほしいです。
よろしくお願いします！
## for文とは
>for文（for statement）とは、多くのプログラミング言語に用意されている構文の一つで、繰り返し（ループ）処理を記述するためのもの。決まった回数の繰り返しを記述するために用いられることが多い。
>
>*引用:[IT用語辞典 for文 【for statement】 forループ / for loop ](https://e-words.jp/w/for%E6%96%87.html)から*“`javascript
fo
【JavaScript】オブジェクトの特徴について
JavaScriptの仕様でオブジェクトは参照渡しというものがあります。
Reactのドキュメントを読んでいたところオブジェクトのコピーについて理解できてなかったのでこの際に理解を深めたいと思います。
https://ja.react.dev/learn/updating-objects-in-state
## JavaScripの参照渡しについて
JavaScriptでは、プリミティブ型の数値、文字列、真偽値、null、undefinedなどは値渡しですが、**オブジェクト型の配列、連想配列、関数は参照渡し**です。
## なぜ参照渡しなのか？
JavaScriptのメモリ管理とパフォーマンスに考慮するためだそうです。具体的には、プリミティブ型は値が直接保存されるため、その値をコピーする際には新しいメモリ領域を確保して値をコピーする必要があります。
一方、オブジェクト型は参照渡しなのオブジェクトが保存されているメモリ領域への参照をコピーすることでメモリ使用量は少なくなります。
:::note alert
オブジェクトのプロパティを変更した場合、その変更は参照を持っ
Nightbotで「簡易的でない」おみくじを作る
## 配信者向けツール「Nightbot」
[Nightbot](https://nightbot.tv/)とは、Twitch、YouTubeのライブ配信で利用できる
「チャット機能」を管理するためのWebサービスです。ライブ配信中、一定の間隔で宣伝や注意書きコメントを流すのがメインになると思いますが、
Javascriptが利用できることを活用し、コマンド経由で遊ぶこともできます。## Nightbotで簡易的なおみくじを作る
( [Nightbot](https://nightbot.tv/) 導入の方法は省略します)Nightbot には、独自の変数があり、
[$(eval)](https://docs.nightbot.tv/variables/eval) 変数でJavaScriptを使用できます。コマンドを追加するには、
Nightbot の Commandos > Custom から追加できます。
青いボタン [+Add command]から、Messageに以下のコードを入力。“`javascript
$(user)の運勢は$(eval X=[‘大
【JS/ES6】JSの型の種類
# 型って？
型は変数や関数などに紐付けられるデータの種類や形式のこと。
その型にはどのようなデータなのか？どのような引数を取ってどのような返り値を返すのか？などが定義する。# 型の種類
JSの型は大きく「プリミティブ型」と「オブジェクト型」に分けられる。## プリミティブ型
プリミティブ型には数値や文字列など7種類がある。
– 文字列（string）
– 数値（number）
– 論理値（boolean）
– undefined
– null
– シンボル（symbol）
– 長整数（bigint）## オブジェクト型
プリミティブ型は、配列や正規表現などが含まれ、複数の変数やプリミティブ型の値などの集合からなる。
値自体を後から変更することができるデータ型で、たくさん種類がある。
下記は代表的な型。– オブジェクト（Object）
– 配列（Array）
– 関数（Function）
– 日時（Date）
– 正規表現（RegExp）
– マップ（Map）とウィークマップ（Weak Map）
– セット（Set）とウィークセット（Weak Set）など# 型定
RustでもWebTransportがしたい! 2023年のミニまとめ付き
# 2023年のWebTransport状況
みなさん、こんにちは。
どうやら2023年もすっかり終わってしまうようで時間の経つのは早いものです。さて、2017年ごろから話が出て2021年の11月のCrome97でGAされたWebTransportですが、2年間でどう変わったのか軽くまとめておきたいと思います。
#### そもそもWebTransportって何? という方はこちらの記事をご覧ください
https://qiita.com/yuki_uchida/items/d9de148bb2ee418563cf
– 2020年末 : QuickTransportが触れるようになり、[WebTransportの紹介記事](https://qiita.com/yuki_uchida/items/d9de148bb2ee418563cf)が話題に。
– 2021年 : WebTrasnportベータ版
– 2021年11月 : Chrome97にてWebTransportがGAされる。
– 2022年初夏 : FacebookやTwitchがメディア配信向けのプロトタイプを公開(W
Cloudflareの無料プランでキャッシュキーをカスタマイズする方法
概要:私はユーザーの言語を検出して対応する言語のページに自動的にリダイレクトする多言語の絵文字検索エンジンを作成しました。 そのため、キャッシュキーをカスタマイズする必要がありましたが、Cloudflareではキャッシュキーをカスタマイズするにはエンタープライズプランにアップグレードする必要があり、それは私の予算を超えていました。 しかし、ドキュメントを徹底的に研究した結果、変換ルールの設定を使用して、カスタマイズされたキャッシュキーと同等の効果を実現することに成功しました。 この記事では、設定方法を共有します。キャッシュキーをカスタマイズする必要がない場合でも、この記事の前半からCDNとキャッシュに関する知識を学ぶことができます。
始める前に、コンテキストをよりよく理解していただけるよう、私の Web サイトをご紹介します。
– 🧐 **SearchEmoji** ([https://searchemoji.
電子ペーパーデバイス 2種に p5.js で描画した画像を表示させてみる【Processing】（Adventar）
この記事は [Adventar](https://adventar.org/) でのアドベントカレンダーの 1つとして作られている、「[Processing Advent Calendar 2023](https://adventar.org/calendars/8532)」の 11日目の記事です。
## 今回の内容
この記事では、以下の 2種の電子ペーパーデバイスに p5.js で作った画像を表示させてみようというものです。– 「EZ Door Sign」： 赤・黒・白の 3色が使える小型の電子ペーパーデバイス
– 「M5Paper」： スマホサイズの通信機能なども着いた電子ペーパーデバイスどちらも電子ペーパーなので、いったん自分が出したい内容を表示させた状態にしてしまえば、書きかえをするタイミングまでは電源不要で表示が維持されます。
そのため、以前から所有していた「M5Paper」は、この特性がぴったりな、イベント用の名札の用途でよく使っています。日本科学未来館で開催の、 #xDiversity プロジェクト×日本科学未来館のハッカソンが始まった！
内容は「さわってあそぶ! 機械学習おもちゃハッカソン」で、 #toio と #M5Stack が絡むのもあり楽しそうです。
M5Paper の電子ペーパー名札と、バグ除け御守りも準備した！https://t.co/0Afsp6G9dy https://t.co/IFDTHcdvyP pic.twitter.com/tY2fKtY0Aw
— you (@youtoy) December 17, 2023
![image
【完全保存版】2023年度Qiita月別人気記事ランキング【JavaScript】
今年人気になった記事一覧です。
Stockしたのに読んでない記事とか再発見してください。
特にまとめ記事を除外したり、作者の好き嫌いで弾いたりはしておりません。成形用の参考コード
“`ts
export const qiitaFileToPost = async (tag: string) => {
const file = `${downloadsPath}/res_${tag}.json`;
const data = JSON.parse((await readFileSync(file, ‘utf8’))) as QiitaItem[];
console.log(data.length);const result = [];
// 12回ループ2023年ま
for (let i = 1; i <= 12; i++) { const m = `0${i}`.slice(-2); const ym = `2023-${m}`; result.push(`## ${
【0→100】ブログサイトを完成まで個人で作った話
# 初めに
今回は全くプログラミング未経験だった僕が１からAstroというフレームワーク（ツールのようなモノ）を使用して０からブログサイトを作ってきたのでその体験を記事化したものです。僕の内容の濃い２週間が興味深く凝縮されているので、ぜひ最後まで読んでみてください。## ブログサイト
下に今回作成したブログサイトのリンクを張っておきます。開発の都合上英語にしたかったのでウェブサイト自体は英語なのですが、英語が出来なくてもポチポチボタンを押して「こんなのを作れるんだなー」ぐらいに見てみてください。
https://binary-fish.vercel.app/
# 本編
まず筆者のプログラム歴は長いもののそこまで良いものでは無かったです。プログラミングの仕方は分かっているものの、長く続かずいろんなことを試してみては中途半端に終わるという繰り返しでした.…**ウェブ開発をやってみるときもあればゲーム開発をやってみるときもあり、こんなゲームを作ろう！と決意するとアプリ開発に移る…**
そんな感じで結局何も完成させられていないという悪循環でした。実際に僕は中学１年生まではScra
Next.jsでEvernoteの代替アプリを自作してみた
[UdonTech Advent Calendar 2023](https://qiita.com/advent-calendar/2023/udontech)の25日目です。
– 2022-11-16 [Evernote’s Next Move: Joining the Bending Spoons Suite of Apps](https://evernote.com/blog/evernote-next-move-joining-bending-spoons)
– 2023-04-28 [Evernote の価格プラン改定と今後の機能強化に関するお知らせ](https://evernote.com/ja-jp/blog/evernote-pricing-upcoming-features-update)
– 2023-07-08 [Moving the Evernote center of operations to Europe](https://evernote.com/blog/moving-the-evernote-center-of-operations-to-eur
JointJSでAdventCalendarを作成する
ここまで紹介したJointJSの技術をもとにしてAdventCalendarのような図形をJointJSで作成します。
最終的に以下のような図が作成されます。[^1]
コードはこちら。
https://github.com/acnaman/jointjs-adventcalendar
作成のポイントをいくつかかいつまんで説明します。
## 日ごとのパーツをカスタム要素で作成
AdventCalendarのステータスとして以下3つを想定しました。
1. 未登録
1. 登録予約済み（記事へのリンクは未登録）
1. リンク投稿済みこの3つのステータスに分けて、カスタム要素を作成しています。
“`js
/**
* 参加受付中の日
*/
export const AcceptingDay = dia.Element.define
【Next.js】public内のファイルがリンク切れになる
# 結論
いい設定方法が見つからなかったため、結局ページのファイルに直接埋め込むことにしました。
まずはサブディレクトリの設定をします。
`next.config.js`を以下のようにしてください。“`next.config.js
const isProd = process.env.NODE_ENV === ‘production’;
const basePath = isProd ? ‘ここにパスを入れる’ : ”; // 例: /sub-directory/** @type {import(‘next’).NextConfig} */
const nextConfig = {
publicRuntimeConfig: {
basePath, // basePathを他のファイルから読み込めるようにする
}
}module.exports = nextConfig
“`このコードでは、
1. `isProd`変数に本番環境かどうかが格納される
1. `basePath`変数にサブディレクトリのパスが格納される
1. `pu
YouTubeのプレイリストから動画を付け替える
プレイリストAにある動画をプレイリストBに付け替えます。
過去にそれぞれ書いてた処理をまとめた感じです。
## 検索 -> 編集 -> 元のリストから削除の3ステップが必要そう
– 1. プレイリストAから対象動画Cを検索
– 2. プレイリストBに対象動画Cを紐付け
– 3. プレイリストAから対象動画Cを削除の処理が必要になりそうでした。
### 1. プレイリストAから対象動画Cを検索
`youtube.playlistItems.list`を使います。
“`js
const res = await youtube.playlistItems.list({
part: ‘snippet’,
maxResults: 50, // 一度に取得する最大動画数
playlistId: oldPlayListId
});
“`### 2. プレイリストBに対象動画Cを紐付け
`youtube.playlistItems.insert`を使います。
“`js
const playListAdd = async (playList
Tailwind CSSで要素を一度だけ一回転させる
Tailwind CSSで作成しているウェブサイトで
「クリックするたびに、アイコンが反時計回りに一回転する」
という演出を作ろうとしたところ、意外と難しかったのでメモしておきます。## うまく行かない例：その１
アイコンを0.7秒でくるんと回したいので、`.-rotate-[360].transition-transform.duration-700` を付与して以下のようにHTMLを書いてビルドしました。
“`HTML
ここにアイコンが入る
“`すると、HTMLをブラウザで表示した途端に一回転してしまいました。
## うまく行かない例：その２
`-rotate-[360deg]`が入っているのがいけないのだな、と思い、先ほどのコードから削除しました。
“`HTML
Three.js勉強1.5: 環境構築(ローカル編)
# はじめに
以前、[React Three Fiber(R3F)に関する記事](https://qiita.com/skm_bnn/items/9bdca6e2965fe8fa61e5)を投稿しました。ReactではThree.jsを容易に扱えるとの噂で、触ってみましたが、そもそもThree.jsでできることが何なの分からず、環境構築止まりになってしまいました。そこで、本記事ではThree.jsを基礎から学びつつ、備忘録として記事にまとめてみたいと思います。– [Three.js勉強1: 環境構築](https://qiita.com/skm_bnn/private/fe4c17ac65ce5c4a89db)
– [Three.js勉強1.5: 環境構築(ローカル編)](https://qiita.com/skm_bnn/private/4a9a739ec08a41f2588e)
– [Three.js勉強2: シーンの主要要素](https://qiita.com/skm_bnn/private/32f21e39ed40668041e9)
– [Three.js勉強3: 3Dオ
UMD版Hexabase JavaScript SDKを使ってファイルアップロードを行う
[Hexabase（ヘキサベース）](https://www.hexabase.com/)は企業においても安心して利用できるBaaS（Backend as a Service）を提供しています。多くのBaaSがそうであるように、主にフロントエンド開発者に利用してもらいたいと考えています。そこで現在、TypeScript SDKの開発が進められています。
元々TypeScriptで作られていることもあって、Next.jsやVue.jsなどでimportして利用することができます。しかし、もっと普通のWebアプリケーションなどで使う際には、CDN経由で利用したいと考える方もいるでしょう。そこで、UMD版Hexabase JavaScript SDKを作成しました。
今回は、そのUMD版Hexabase JavaScript SDKを使ってファイルアップロードを行うデモを紹介します。
## デモ
デモはこちらのURLで体験できます。
[# Bun とは
Bunは、特に「速度」と「効率性」を重視して設計された新しいランタイムです。Nodeの場合、パッケージマネージャはnpmやyarnを使い、TypeScriptのトランスパイルはtypescriptパッケージを使います。
Bunの場合、自身がパッケージマネージャ(npm互換)やバンドラーの機能をもっています。
さらにTypeScriptのトランスパイルもデフォルトで可能で、トップレベルでawaitが使えます。
タスクランナーとしての使い方もできます。
“`json:
{
“name”: “testapp”,
