- 1. ビジュアルプログラミングで高位合成 その11
- 2. CodeWars オススメ問題 #4
- 3. Webサイトでよく見るお問い合わせフォームの作り方【中級編①】
- 4. JavaScriptで実装するモーダルウィンドウ【初級編⑦】
- 5. Webアプリでの長押し機能の実装は意外と難しい
- 6. JavaScript での Brunner-Munzel検定 の実装
- 7. 【JavaScript】高齢者の色覚を確認できるツールサイトを作ったわよ
- 8. TODO リスト用のフォルダ作成
- 9. 砲撃戦のゲーム。スペースキーを押すたびにボールが発射され、地面で炸裂します。
- 10. サイン関数でのアニメーションを鑑賞するゲーム。マウスのドラッグ操作で視点操作できます。
- 11. package-lock.jsonファイルの役割について
- 12. Godot EngineのWebエクスポート時、Godot – JavaScript間でデータのやりとりをする
- 13. Reactを使った初めてのアプリ作成
- 14. TypeScriptでの非同期処理とクラス設計に学ぶ実践的プログラミング
- 15. ACDLを提唱します。その5
- 16. ビジュアルプログラミングで高位合成 その10
- 17. ビジュアルプログラミングで高位合成 その9
- 18. 【JS】三項演算子で複数の処理を書く
- 19. React map関数で展開しているのに表示されない（エラーもでない）
- 20. 道路ネットワークのグラフ生成（OpenStreetMap）
ビジュアルプログラミングで高位合成 その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 (
JavaScriptで実装するモーダルウィンドウ【初級編⑦】
# はじめに
今回は、クリックしたら表示されるモーダルウィンドウを作っていきます。# 全体のコード解説
See the Pen
JavaScriptで実装するモーダルウィンドウ by Uka Suzuki (Webアプリでの長押し機能の実装は意外と難しい## Webアプリケーションにおいてはタップやクリックの長押しはそもそも一般的ではない？
あなたはWebアプリケーションのUIで、タップやクリックの「長押し」をした経験がありますか？
ネイティブアプリでは日常的に使われる長押しですが、Webアプリケーションではあまり見かけません。
Webアプリケーションにおける長押しの用途として、例えばブラウザ上で画像をダウンロードしたり、リンクを別タブで開いたりといった操作が考えられます。
それ以外で、長押しをするようなUIって何があるでしょうか？
例えば、以下のようなインクリメントボタンなんかが当てはまりそうです。JavaScript での Brunner-Munzel検定 の実装
title: JavaScript での Brunner-Munzel検定 の実装
tags: JavaScript R 統計 検定 Brunner-Munzel# Reactive stat 内部の Brunner-Munzel検定 の実装 です
この記事では、Brunner-Munzel検定 の概要と、JavaScriptでの実装方法を説明します。
## はじめに
弊社では **[ブラウザだけで使える無料統計ソフト Reactive stat](https://www.emuyn.net/stats)** を提供しています。
信頼性の高い R で統計解析し、その結果を AI が解説します！
その背景には、統計に苦労している医療者の助けになりたい、という気持ちがあります。
最終的な統計解析は R で行うのですが、レスポンスとサーバー負荷の改善のため、一部の統計計算はブラウザ内で行っています。
そのうち、汎用性の高い部分を共有させていただきたいと思います。
できるだけ R の出力と整合性を持つように javascript をインプリメントしてあるので、参考になれば幸いです。【JavaScript】高齢者の色覚を確認できるツールサイトを作ったわよ
:::note
このサイトのお話をしています: https://konbraphat51.github.io/ElderVisionSimulation/
:::## はじめに
[User-Friendlyの王、User-Firendlyキング](https://qiita.com/uts1_6/items/11e348ead4bae71571b8)になりたいですよね。現在卒論で認知症関係のヒューマンコンピューターインタラクションをやっていますが、[なんと老化にともなって視界がどんどん”黄ばんでいく”そう](https://www.tyojyu.or.jp/net/kenkou-tyoju/rouka/koreisha-shikikaku-roka.html)
なので、推奨される色使いなどがあります。[[参考]](https://www.caresapo.jp/kaigo/issue/83dn3a000000hp8q.html)
しかし、定性的にこうしろと言われたところで、じゃあ自分がデザインしたインターフェースが高齢者にとって見やすいか、（若年層にとっては）想像しづらいで
TODO リスト用のフォルダ作成
### 1. ターミナル開く
1. まず、MacやLinuxでは「ターミナル」、Windowsでは「コマンドプロンプト」または「PowerShell」を開きます。ターミナルは、コマンドを入力して操作するためのツールで、コードの実行やファイル操作などを行います。
2. 画面に表示されるスクリーンショットのように、アプリケーションフォルダ（Macの場合）やスタートメニュー（Windowsの場合）からターミナルを起動します。
– 上記の画像は、Macの「ターミナル」を開いた際の画面です。
### スペースキーを押すたびにランダムな角度でボールが発射され、何発でもボールを発射できるようになっています。
“`html
Ball Launch and Particle Explosion
サイン関数でのアニメーションを鑑賞するゲーム。マウスのドラッグ操作で視点操作できます。
と申します。
普段は不動産スタートアップでフロントエンドエンジニアとしてお仕事しています。
今回は「package-lock.jsonファイルの役割」について記事にしました。
良ければご覧ください。[Shiramizu\_Junya lit\.link\(リットリンク\)](https://lit.link/js226)
# ■環境
– Mac
– チップ：Apple M2 Max
– OS：macOS Sonoma バージョン14.6.1
– npm：10.8.2# ■環境構築
“`terminal
// SSH
❯ git clone –filter=blob:none –no-checkout git@github.com:shiramizu-junya/private-tech-blog.git && cd private-tech-blog && git sparse-checkout set –cone && git
checkout
Godot EngineのWebエクスポート時、Godot – JavaScript間でデータのやりとりをする
# はじめに
私がUnityで作った [VRMViewMeister](https://sites.google.com/view/lumis-vroidbase/pubcontents/vrmviewmeister) は幅広い環境でVRMのアニメーション作成を楽しんでもらうため、WebGLビルドで展開している。
ネイティブな各OSのビルドより諸々制約はあるのだが、あえて？苦難の道を進んでいる。（そのせいでURP対応やWebXR対応も苦労してしまっているが）UnityのWebGLビルドではC# – JavaScript間のデータのやり取りでは最初なかなか苦労した。それもあって、もしGodot でVRMViewMeisterを（あえて）Webエクスポート版にするなら、同じようにGodot – JavaScript間のデータのやり取りの方法を調べなくてはと思った。
今回はそれを調べて簡単ではあるが動作を確認したので、覚え書きとして記事にまとめた。
# ゲームエンジン – JavaScript間のやりとり
## Unityでは
公式マニュアルではこのあたりを参考にしたい。
[
Reactを使った初めてのアプリ作成
## 概要
Reactで始めてアプリを作成したので、その際の学びを記事にしました。
Reactの学習を始めたばかりのため、間違い等あるかもしれませんが、その際は優しくご指摘・アドバイス等頂けると幸いです。
よろしくお願いします。## 対象読者
– これからReactの学習を始めたい方
– 始めてReactでアプリを作ろうと考えている方## 本記事の内容
Reactで始めてアプリを作成する際に学んだこと# 何をやったのか
大まかに以下の要件を持ったアプリを作成しました。
– 学習時間と学習内容を登録できる
– フォームに入力されている内容を動的に表示する（確認用）
– 登録をしたらフォームが初期化される
– フォームを入力せずに登録ボタンを押すとエラーが表示される
– 記録した勉強の時間を合計して表示する| |
|:-:|
|: Promise=> {
try {
const response = await fetch(url);
const data = await response.json();
c
ACDLを提唱します。その5
# 概要
ACDLとは、アプリは、クラウド、大切なデータは、ローカルです。
素晴らしいアプリ見つけたので、plunkerに上げてみた。# 参考にしたページ
https://qiita.com/yaju/items/66678f9abb530f169a80
# 写真
# 成果物
https://embed.plnkr.co/plunk/h0d0hXwRkoeZPkpv
以上
ビジュアルプログラミングで高位合成 その10
# 概要
ビジュアルプログラミングで組み合わせ回路を組み立てて、シュミレーションして、verilogを生成します。
高位合成です。
実は、今の実装では、全加算器が高位合成できません。
全加算器の高位合成を実装しました。検証します。
検証編# テストベンチを書く。
“`
module x(input B, input A, input Cin, output Sum, output Cout);
wire w0;
wire w1;
wire w2;
wire w3;
assign Sum = (Cin ^ w0);
assign w0 = (A ^ B);
assign w1 = (A ^ B);
assign w2 = (A & B);
assign Cout = (w3 | w2);
assign w3 = (Cin & w1);
endmodulemodule test;
reg A;
reg B;
reg Cin;
x u(.A(A), .B(B), .Cin(Cin), .Sum(Sum), .Cout(Cout));
initia
ビジュアルプログラミングで高位合成 その9
# 概要
ビジュアルプログラミングで組み合わせ回路を組み立てて、シュミレーションして、verilogを生成します。
高位合成です。
実は、今の実装では、全加算器が高位合成できません。
全加算器の高位合成を実装します。
実装編# 成果物
https://embed.plnkr.co/plunk/pSU5YIiA3nYeSDoJ
# 生成したverilog
“`
module x(input B, input A, input Cin, output Sum, output Cout);
wire w0;
wire w1;
wire w2;
wire w3;
assign Sum = (Cin ^ w0);
assign w0 = (A ^ B);
assign w1 = (A ^ B);
assign w2 = (A & B);
assign Cout = (w3 | w2);
assign w3 = (Cin & w1);
endmodule
“`# サンプルコード
“`
function make(s) {
var i;
var j;
【JS】三項演算子で複数の処理を書く
flgがtrueの時に処理Aと処理Bを実行したい場合
“`
flg ? console.log(A)とconsole.log(B)を実行したい : null;
“`下記のようにカンマで区切ることで実行可能！
“`
flg ? (console.log(A), console.log(B)) : null;
“`
React map関数で展開しているのに表示されない（エラーもでない）
propsで受け取ったデータをmap関数で出力するだけの簡単な処理でしたが、迷走していました。
とりあえず解決はできたのですが、なぜかといわれると説明はまだできないです結果として、map関数部分をreturnで囲めばOKでした
console.log(表示されています +～
と書いてコンソールでは出力されるのに何で出ないんや！となっていましたがとりあえずどうにかなったので記録しておきます
道路ネットワークのグラフ生成（OpenStreetMap）
こんにちは。
OpenStreetMap データを用いて、道路ネットワークの[グラフ](https://ja.wikipedia.org/wiki/%E3%82%B0%E3%83%A9%E3%83%95_(%E3%83%87%E3%83%BC%E3%82%BF%E6%A7%8B%E9%80%A0))を生成しました。
* https://github.com/kkdd/GraphFromOSM今回、[オリジナル](https://github.com/MatveiT/GraphFromOSM) に対して機能追加しました。
* “`displayGraph(graph)“`: 地図上可視化
* “`simplifyGraph(graph)“`: simplification（グラフの degree-2 vertex削除のこと[^1]；directed だけではなく undirected グラフに対しても[^2]）[^1]: 解説例：[OSMnx: Python for Street Networks](https://geoffboeing.com/2016/11/osmn
