JavaScript関連のことを調べてみた

Webサイトについて思うこと

こんにちは。
今日はWebサイトについて思うことをつらつらと。
お気持ち表明みたいなものです。

## 凝った効果
これって何のためですか？
情報にアクセスしたいのに、情報にたどり着いたと思ったら、長ったらしいJavaScriptによる動き・・・
誰のためなのかわからないです。
Webエンジニアにとっては技術力を表すことができる絶好の機会かもしれない。
企業のHPならある程度の何かしらの指標を表しているのかもしれない。

でも、単純に調べたい人からすれば非常に煩わしいもので、「も～早く～」と焦らされている感覚です。
リーダー表示にしても見づらい、かといって5秒待つのも時間が無駄。
スクロールして今どの情報を見ているのか見当がつかないサイトだってあるので、業務改善やアクセシビリティーに携わっている身からすると悩ましい。

モバイルデータ通信料(ギガ)だって余分に消費する。

例えばAppleの製品紹介のページ。
iPhoneの前面→背面に切り替えるとき、何度もスクロールしてやっと背面が分かったと思えば画面上部で見切れていたり・・・
逆にスクロールしていてもページは止まったままサイト内のi

React(next.js)とかで開発してる時に深い階層のObjectデータをデバッグ用に吐き出すならconsole.log()ではなく、console.dir()

なんてことはない話なのかもしれないですが…こんな書き方知らなかったよ！ということで。
普通にフロントエンドのjavascriptならconsole.log()でいいんですよ。
ただ、reactなどのバックエンドjavascriptでは普通にconsole.log()を使うと多段の階層では表示されない問題が起きます。

結論で言うとこのように書けばOK。

“`javascript
console.dir(targetVariable, {depth: null})
“`

どうやら、`console.log(“%o”,targetVariable)` も行けたらしいんですが、第4階層までだったので、これじゃないと無理かなと。

### 参考にした記事とか
https://zenn.dev/kazuph/articles/dc323eca77398d

https://qiita.com/tsukasaI/items/dacc930125d7bd19845a

AND演算子（&&）とオプショナルチェイニング演算子（?.）の違いと使い分け

※個人メモ用としても記載しております。

JavaScriptでは、AND演算子（&&）とオプショナルチェイニング演算子（?.）は、それぞれ異なる目的で使用されます。
この記事では、これらの演算子の違いや使い方を詳しく解説し、シンプルに使い分けを説明します。

## AND演算子 (&&)
AND演算子は、論理演算を行うための演算子で、複数の条件がすべて真（true）の場合にのみ真を返します。
条件のどれかが偽（false）の場合、すぐに評価を停止し、その時点で偽を返します。

##### 主な用途：

– 複数の条件を組み合わせて評価したいとき
– ショートサーキット評価を利用して
特定の条件が満たされた場合のみ次の処理を行いたいとき

例として
“`
const a = 10;
const b = 20;

if (a > 5 && b < 30) { console.log("Both conditions are true."); } ``` この場合、a > 5 と b < 30 の両方が true であれば console.log が実行されます。 ショートサー

なんかの券をスプレッドシートとHTMLで管理する話

こんにちはAtsu1209です。
今回はなんかの券をHTMLとGASで管理できるようにした話を書いていきます。

# 今回使う方法
今回は 券に番号をつけてその番号をGASとHTMLで管理できるようにします。

# スプレッドシートの用意
早速用意していきます。
名前は`なんかの券管理シート`とでもしておきます。
| 1 | 2 |
|:-:|:-:|
|担当 |券番号 |
|例 太郎| 0 |

とりあえずこんなかんじです。

# GAS
GoogleSpreadSheetにはスクリプトを書くことができる拡張機能の`GoogleAppsScript`
というものがあります。
これを使って管理していきます。

“`js:script.gs
function doGet(e) {
const spredSheetByActive = SpreadsheetApp.getActive();
const sheet = spredSheetByActive.getActiveSheet();

// パラメータ ‘num’ で送られてきた番号があるかをチェック
con

TypeError: Failed to execute ‘appendChild’ on ‘Node’: parameter 1 is not of type ‘Node’.の解決方法

## はじめに

fetch した script, css, html を挿入するときに上記のようなエラーが発生したので、その原因と解決方法をまとめます。

## 発生した問題

まず以下のようなコードでエラーが発生しました。

“`ts
try {
const res = (await fetch(url)).json();

if (res.style) {
document.head.appendChild(res.style); // ←ここでエラー
}

} catch (error) {
console.error(“データの取得中にエラーが発生しました:”, error);
}
“`

appendChildメソッドは`Node.appendChild(node: HTMLScriptElement): HTMLScriptElement`という定義がなされています。

resはjsonでparseしているのでそのままだとstring型で返ってきます。
そのため、当然HTMLScriptElementでは

フラグメントシェーダを用いた 262144 ピクセル並列数値計算。


#### フラグメントシェーダによる並列高速数値計算手法。

1. はじめに
近年、グラフィック処理ユニット（GPU）の進展により、数値計算やシミュレーションなどの非グラフィックス用途においてもGPUが積極的に利用されている。特に、シェーダプログラムを使用した並列計算は、従来のCPUによる逐次計算に比べて大幅な計算速度向上を実現できる。フラグメントシェーダは、各ピクセルの色を計算するためのプログラムであり、ピクセルごとに並列処理を行うことができるため、高速な数値計算に適している。本研究では、フラグメントシェーダを活用した並列数値計算手法について、基礎的な理論とその応用事例を解説する。

2. シェーダプログラムの基礎
シェーダはGPUで実行されるプログラムであり、主に頂点シェーダとフラグメントシェーダに分かれる。頂点シェーダは頂点デー

JavaScriptバイナリデータを扱うためのクラスまとめ


# [File](https://developer.mozilla.org/ja/docs/Web/API/File)
ファイルを表すクラス。Blobを継承している。
name, lastModified, sizeなどのプロパティを持つ。
``の`document.getElementById(“file1”).files` はFileListクラス。FileListはFileの配列のようなクラス。

# [Blob](https://developer.mozilla.org/ja/docs/Web/API/Blob)
Fileと似たようなクラス。プロパティとしてsize, type（MIMEタイプ）を持つ。
Fileと同様、FileReaderで読み込める

プリミティブ型のimmutableとは

# はじめに
JavaScriptのデータ型は大きくプリミティブ型とオブジェクトの2つに分かれます。
そのうちのプリミティブ型の特性として挙げられるのがimmutableです。
immutableは、「一度作成したら変更できない」ことを指します。しかし、私は`let`を使えば変更可能じゃないか！と思いました。

# 疑問点
immutableは「一度作成したら変更できない」を意味するのではないの？変更できるじゃん！
“`javascript:index.js
let message = ‘Hello’;
console.log(message);
message = message + ‘World’;
console.log(message);
“`
“`結果
Hello
HelloWorld
“`
`message`が`Hello`から`HelloWorld`に変わっています。

# 結論
私が行なったことは変更ではなく、再代入でした。（変数`message`に変数`message`と文字列`World`を繋いで生成した文字列を格納している場所を渡している）*参考文

【JavaScript、TypeScript】未入力チェックで0を入力しているのにfalseになるお話

# はじめに
JavaScript、TypeScriptにおいて0がfalseとして判定されること自体は知っていましたが、
空文字も含めるといろいろとややこしかったのでまとめてみます。
間違い等あったらご指摘いただけるとありがたいです。

### 参考にさせていただいた記事

https://qiita.com/_masa_u/items/4633519d6642098cd8fe

# 0はfalseと等価である
JavaScript(TypeScript)において0はfalsyな値であると定義されています。
https://developer.mozilla.org/ja/docs/Glossary/Falsy
> 偽値 (falsy または falsey) な値とは、論理型コンテキストに現れたときに偽とみなされる値です。

そのため以下のような場合はfalseとなります。
“`javascript:
if(0)
if(“”)
“`

これを知らずに`if(value)`で未入力チェックなどをしていると、入力しているのにエラーが発生するぞ！という状況になってしまいます。
こちらに

Teachable Machine・CodePenを使用したリハビリ器具使用方法補助ツール作成

# デイサービスでリハビリ器具を覚えてトレーニングを判断するAIツールの作成


## はじめに

デイサービスにおいて、新しく入ったスタッフがリハビリ器具を適切に使用するには、器具の使用方法やトレーニングの目的を理解することが重要です。しかし、すべてのスタッフが理学療法士（PT）や作業療法士（OT）のような専門知識を持っているわけではなく、器具の使い方をすぐに覚えるのは簡単ではありません。そこで、**Teachable Machine**を活用し、リハビリ器具を識別して適切なトレーニングを案内するツールを作成しました。このツールを使えば、専門職でなくても利用者に合ったトレーニングのサポートが容易にできないか試案しました。

このシステムは、実際のリハビリ器具を認識し、その器具に適したトレーニング内容や注意点を表示します。これにより、デイサー

大学サークルのホームページを作ってみた！(その２-コードについて➀)

## このページについて
この記事は大学サークルのホームページを作ってみた！の第2弾です．
第2弾では主にコードについて書いていく予定なので，ホームページ作成の概要などについてはその1の記事をご覧ください！

https://qiita.com/hyuga20011212/items/9f9a2fe70f75df9dcfcc

## 作成したホームページ

https://fmmediasaga.chillout.jp/

https://github.com/KunitakeHyuga/fmmediasaga

## ファイル
main/
├ index.html/
├ otoiawase.html/
├ otoiawase2.html/
├ style.css/
└ (その他画像ファイル)/

ラジオサークルのホームページのためトップ，放送後記，地図・アクセス，お問い合わせの計4ページを作成しようと考えていましたが，放送後記は今後実装予定なのでそれ以外の3ページです．ファイル名はコピペして訂正するのが面倒だったのでotoiawase2みたいな変なネーミングになっています．
企業のサ

音を出して遊ぶRPG

音を出して遊ぶRPG

音を出してその分だけポイントとして充電し、集めたポイントでダンジョンを探索する
RPGゲームのようなPGMを作成しました.これで新生児をあやしている最中でもゲームが
遊べるようになっています

---

ゲーム初期設定

最初にゲームの大まかな仕様として以下を考えました

考えた仕様

---

(スタミナ、ヒットポイント、攻撃ポイント、防御ポイント)

スタミナ、
洞窟を探索するのに必要、
ランダムで1〜5pt消費、
なくなったときに自動でダンジョンを離脱
一回探索ごとにランダムな確率でランダムなアイテムを入手(鉄、銅、銀、金、石油、石炭、クリスタル、チタン、マンガン、お金)
50%の確率で鉱石入手、
50%の確率で戦闘

ヒットポイント、
モンスターと戦うときのHP
なくなったときに自動でダンジョンを離脱
(1〜99999ptの範囲で回復できる)

攻撃ポイント
攻撃力ランダムで1〜10pt消費(ない場合は常に1)
モンスターへのダメージ
攻撃ポイント×装備品別ダメージ量でダメージ計算

Supabase のエラーコードから、いい感じの日本語エラーメッセージを

Supabaseのエラーコードから、いい感じのエラーメッセージを作成します。
StorageとAuthを紹介します。

## ユーザーに寄り添ったエラーメッセージとは
いい感じのエラーメッセージってなんだっけ？はこちらを参照しました。

https://note.com/nagaju/n/n8f5d8545f78d

## Supabase Storageのエラーコードについて

### ドキュメント

https://supabase.com/docs/guides/storage/debugging/error-codes

### codeをメッセージに変換するためのオブジェクト

“`js
export const supabaseStorageErrorCodeToJapaneseMessage: Record = {
“NoSuchBucket”: “指定されたフォルダが見つかりません。フォルダ名を確認し、アクセス権限があることを確認してください。”,
“NoSuchKey”: “指定されたファイルが見つかりません。ファイル名を確認

Javascriptの基本

JavaScriptの基本を押さえよう

## HTMLへの埋め込み
JavaScriptをHTMLファイルに埋め込む際には、<script>タグを使用します。ただし、このタグをHTMLファイルの上部に記述すると、他のまだ読み込まれていないHTML要素に影響を与え、思わぬ不具合が発生することがあります。そのため、通常は<script>タグをファイルの末尾に配置するのがベストです。

以下はその例です。
“`html

ハイアンドローゲームをHTMLとJavaScriptで作成してみた

# はじめに
今回は、HTMLとJavaScriptを使ってトランプのハイアンドローゲームを作成しました。カードのランク（数字やJ、Q、Kなど）を見て、次のカードが「高い」か「低い」かを予測するシンプルなゲームです。デザインも少しオシャレにしてみたので、ぜひご覧ください！

## 完成したゲームのデモ

このゲームでは、現在のカードが表示され、その後プレイヤーが次のカードが「高い」か「低い」かを予測します。正解すると連続正解数が増え、不正解になると連続正解数がリセットされます。

## 使用技術
– **HTML**
– **CSS**
– **JavaScript**

それでは、具体的な実装に入っていきましょう。

—

## HTMLの構成

まずは、HTMLの構成です。この部分では、ゲ

大学サークルのホームページを作ってみた！(その１-概要)

## 作成したホームページ

https://fmmediasaga.chillout.jp

https://github.com/KunitakeHyuga/fmmediasaga

## はじめに
私は大学3年で情報系(ネットワークやソフトウェア開発)を専攻しているのですが，大学の授業でホームページを作成したり，アプリ開発をしたりといったことは今まで1度もやったことがありません．大学でCS専攻になってからの1番のギャップです．
ある程度自分で開発経験を積まないと実務をするまでの技術力に到達できないのではないかと考え始めたので，今回はお試しで大学サークルのホームページを作ってみました．

実際にページ作成→仮想環境→本番環境までの流れを行う中で意外と参考記事を見つけるのが難しかったのでできるだけ詳細に書いてみようと思います．今後ホームページ作成する人などの参考になれば幸いです．

## 使用技術について
使用言語
・HTML
・CSS
・JavaScript

たぶん一番オーソドックスな言語選定だと思います．
ネットでは「プログラミングはHTMLから始めろ」という文言をよく見ますが

LogTape 0.6.0のリリース：何が変わったのか？

JavaScript及びTypeScript用のゼロ依存構造化ロギングライブラリである[LogTape]がv0.6.0をリリースしました。何が変わったのでしょうか？

[LogTape]: https://logtape.org/

## 親ロガーのシンクをオーバーライド可能に

LogTapeの特徴の一つは、[階層的カテゴリ]を通じたシンクの**継承**です。例えば、以下のように2つのロガーを設定した場合：

“`ts
import { configure, getConsoleSink, getFileSink } from “@logtape/logtape”;

await configure({
sinks: {
console: getConsoleSink(),
file: getFileSink(“app.log”),
},
loggers: [
{ category: [“app”], level: “debug”, sinks: [“file”] },
{ category: [“app”, “

ビジュアルプログラミングで高位合成 その11

# 概要
ビジュアルプログラミングで組み合わせ回路を組み立てて、シュミレーションして、verilogを生成します。
高位合成です。
全加算器の高位合成を実装しました。
ここまでで、考察します。

# 浮かび上がった、問題点
問題と言うか、能力が足りないというか、
論理デバイスを組み合わせて、ビジュアルプログラミングで、回路を組み立てる必要があるわけですが
そもそも、それができるのかが、課題というか、問題です。

# その対策
それは、すでに開発しています。
ビジュアルプログラミングでは、ありません。
こちらです。

https://qiita.com/ohisama@github/items/b9b29d632cd57d05e175

真理値表を表示する、インタープリターのコマンドで高位合成します。
論理デバイスは、使いません。

以上。

CodeWars オススメ問題 #4

# はじめに

個人的に好きなアルゴリズム学習サイト「CodeWars」の問題をシェア。

週1くらいのペースで、全10回を目指す予定。

:::note
CodeWarsはいいぞ！の紹介は[こちら](https://qiita.com/kohki_takatama/items/2ae2808b931e943262b8)

CodeWarsの始め方は[こちら](https://qiita.com/javacommons/items/7c473cda7825ab99e08c
)
:::
# オススメ問題

https://www.codewars.com/kata/55908aad6620c066bc00002a/javascript

### 問題
与えられた文字列に`x`と`o`が同数含まれているかを返す問題です。
含まれていない場合は`0`としてカウントします。

“`
XO(“ooxx”) => true
XO(“xooxx”) => false
XO(“ooxXm”) => true
XO(“zpzpzpp”) => true // when no ‘x’ and ‘o’ i

Webサイトでよく見るお問い合わせフォームの作り方【中級編①】

# はじめに
今回は、自分のポートフォリオサイトで使う目的があるため、お問い合わせフォームを作っていきます。

# 全体のコード解説

See the Pen
Webサイトでよく見るお問い合わせフォームの作り方 by Uka Suzuki (