- 0.0.1. TypeScriptでの非同期処理とクラス設計に学ぶ実践的プログラミング
- 0.0.2. ACDLを提唱します。その5
- 0.0.3. ビジュアルプログラミングで高位合成 その10
- 0.0.4. ビジュアルプログラミングで高位合成 その9
- 0.0.5. 【JS】三項演算子で複数の処理を書く
- 0.0.6. React map関数で展開しているのに表示されない（エラーもでない）
- 0.0.7. 道路ネットワークのグラフ生成（OpenStreetMap）
- 0.0.8. 【JavaScript】ABC372まとめ（A~E）
- 0.0.9. 【個人開発】自分だけのベストアルバム一覧を作れるサービスを開発しました
- 0.0.10. Material UIの無料テンプレートであるDashboardを実装する方法
- 0.0.11. #ウルティマオンライン のUO職人サイトの錬成成功率計算( #Javascript #プログラミング )を現バージョンに合わせる方法
- 0.0.12. トップに戻るボタンの作り方【初級編⑥】
- 0.0.13. javascript json 天気予報
- 1. 欲しい地域の天気予報情報を取得できます
TypeScriptでの非同期処理とクラス設計に学ぶ実践的プログラミング
#### 概要
この記事では、TypeScriptを使った非同期処理、クラス設計、データベース操作を解説します。特にPromiseを用いた非同期処理の流れ、アロー関数の使い方、Jestによるモック関数の作成に焦点を当て、実際の開発で役立つノウハウを紹介します。progate pathにおける自身の学習の記録として記事を作成していますので、内容に偏りがあったり、一貫性がないことも多いですが、ご容赦ください。—
### 1. **非同期処理の基礎: Promise と async/await**
まずは、非同期処理の重要性と、その基礎である`Promise`、`async/await`の使い方について説明します。
#### 例: 非同期処理の実装例
“`typescript
const fetchData = async (url: string): 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) に対して機能追加し、地図上可視化および simplification（グラフの2次vertex削除のこと[^1]；directed だけではなく undirected グラフに対しても[^2]）の機能を加えました。
* “`displayGraph(graph)“`: display the graph on a map
* “`simplifyGraph(graph)“`: reconstruct the graph by removing degree-2 vertices[^
【JavaScript】ABC372まとめ（A~E）
AtCoder Beginner Contest 372
https://atcoder.jp/contests/abc372
A~Dの4完（61分）でした。
974perfでレートは758->782（+24）です。
Eも解けそうでしたがkが10以下という制約をすっかり見落としており、
UnionFind＋マージテク＋SortedSetをがちゃがちゃやって最終的にTLEで沼りました。
コンテスト後に正しい解法でupsolveしたので、それを含めてA~E問題をまとめます。# A – delete .
https://atcoder.jp/contests/abc372/tasks/abc372_a入力$S$を受け取り文字列`.`を削除するか、あるいは$S$を1文字目から見ていき`.`以外だけ追加していけばよいです。
“`js
function Main(input) {
input = input.split(“\n”).map((line) => line.trim());
const s = input[0].split(“”);
for(let i =
【個人開発】自分だけのベストアルバム一覧を作れるサービスを開発しました
### 概要
今まで聴いてきた音楽の中から「自分だけのベスト10」をアルバムアートを表示しつつ一覧にできるサービスを作成しました:v::headphones::headphones:個人的に使うだけなのでリンクは特に掲載しません。
実際に使用しているキャプチャも最後まで載せたいところですが、アルバムアートは著作権的にアウトだと思いますので、途中までになります。
実際にはこのあとアルバム一覧が表示→アルバムを選択したらアルバムアートが一覧で表示できます。
### 開発背景
友人とよく「◯◯ベスト10」というような話をします。ゲームだったり映画だったり…
それぞれの好きなものがわかりますし、色んな視点を聞くことができるので個人的にはすごく楽しい話題だと思っています。
この話をするときに視覚的な情報も一緒にあるとよりイメージつきます
Material UIの無料テンプレートであるDashboardを実装する方法
初投稿です。Dashboardの実装に大変苦労したため、備忘録として作成しました。
## はじめに
この記事はMaterial UIのインストールから無料テンプレートであるDashboardを実装するまでの手順を書いたものです。
また、この方法は2024年9月22日時点においての実装方法です。今後実装方法が変わり、本記事のやり方では実装できなくなる可能性があることをご了承ください。
それでは、始めていきます。## Material UIのインストール
以下のコードを順番に実行します。
“`
npm install @mui/material @emotion/react @emotion/styled
npm install @fontsource/roboto
npm install @mui/icons-material
“`
## プロジェクトの下準備
Material UIの公式サイトにあるサンプルプロジェクトを実装します。サンプルは[Example projects](https://mui.com/material-ui/getti
#ウルティマオンライン のUO職人サイトの錬成成功率計算( #Javascript #プログラミング )を現バージョンに合わせる方法
**本内容を利用した場合の一切の責任を私は負いません。**
# 概要
下記の通り、補正率が合っておらず、合わせるにはHP変換属性無は2.25、有は0.9にする必要がある。
https://x.com/tw388192/status/1837703362680442963
本記事は合わせる方法である。# 結論
HTMLにHP変換属性無と有の識別コードがあるので、それを変更する。
それぞれ5コで計10ヶ所。
`# 内訳
補正率は識別コードを利用して保持している。
識別コードの100未満の桁が補正率の10倍値、100以上の桁は表示値換算種別値になっている。
後者は、例えば、HP増なら上限は5、MP増なら上限は8で、この値から現在値の強度割合を計算できるようにしている。
現在値が2の場合、HP増なら40、MP増なら25で計算が異なるため、これを表示値換算種別値で識別している。
HP変換は上限が15で、命中
トップに戻るボタンの作り方【初級編⑥】
# はじめに
今回は、下記のサイトを参考に、トップに戻るボタンを作っていきます。https://www.solluna.blog/web/javascript/to-top/
# ずっと表示されているトップに戻るボタン
javascript json 天気予報
### javascriptの勉強とhtmlの勉強とjsonの勉強でした。
参考サイト
https://itsakura.com/js-selectbox“`html
天気予報取得
欲しい地域の天気予報情報を取得できます
ビジュアルプログラミングで高位合成 その8
# 概要
ビジュアルプログラミングで組み合わせ回路を組み立てて、シュミレーションして、verilogを生成します。
高位合成です。
実は、今の実装では、全加算器が高位合成できません。
全加算器の高位合成を計画します。
ワイヤーの概念を導入します。
構想編# 論理デバイスと論理デバイスが繋がっている。
今のコードでは、対応できない。
# ワイヤーの概念を導入する。
論理デバイスと論理デバイスが繋がっている場合、ワイヤーがあると設定する。
# 生成されるverilog
“`
module x(input B, input A, input Cin, output Sum, output Cout);
wire w0;
wire w1;
wire w2;
assign Sum = (Cin ^ w0);
as
ビジュアルプログラミングで高位合成 その7
# 概要
ビジュアルプログラミングで組み合わせ回路を組み立てて、シュミレーションして、verilogを生成します。
高位合成です。
実は、今の実装では、全加算器が高位合成できません。
全加算器の高位合成を計画します。
設計編# 全加算器を動作させて、真理値表を作る。
こちらに、simcirjsがあります。動作させて、真理値表を作成しましょう。https://embed.plnkr.co/plunk/UOeNFNBciol1kqprJ2Pu
# 左のデバイス一覧から、FullAdder、DC、In、Out、Toggle、LEDをドラッグします。
# ワイヤーをつなぎます。
;
assign Sum = (A ^ B);
assign Carry = (A & B);
endmodulemodule test;
reg A;
reg B;
x u(.A(A), .B(B), .Sum(Sum), .Carry(Carry));
initial
begin
$display(” A B Sum Carry”);
$monitor(” %b %b %b %b”, A, B, Sum, Carry);
A = 0;
B = 0;
#10;
A = 0;
B = 1;
#10;
A = 1;
B = 0;
#
RSSとAtom 記事一覧の取得方法の話
# はじめに
複数のプラットフォームから記事一覧を取得したい！
なるべく処理を共通化したい！# RSS1.0 / RSS2.0 / Atom
https://medifund.jp/seo/rss-atom/こちらの記事がとても参考になります。
記事情報の取得（**Feed**）のための仕組みは３種類あるようです。| 仕組み | 採用プラットフォーム | タイトルの取得方法 |
| :-: | :-: | :-: |
| RSS1.0| | |
| RSS2.0 | Zenn / しずかなインターネット / note | `channel > item > title`|
| Atom | Qiita / Github（コミット情報）| `entry > title` |同じ仕組みを採用している場合、処理を共通化することができます。
# 共通化した処理
プラットフォームごとのURLを受け取り、共通化された処理を行います。返り値は`{title:string, link:string, published:date}`です。
仕組みによりますが、以下の要素も取得可
ビジュアルプログラミングで高位合成 その5
# 概要
ビジュアルプログラミングで組み合わせ回路を組み立てて、シュミレーションして、verilogを生成します。
高位合成です。
実は、今の実装では、半加算器、全加算器が高位合成できません。
半加算器の高位合成を実装します。
実装編# 成果物
https://embed.plnkr.co/plunk/3dX40SUC5LEbZD7j
# 生成したverilog
“`
module x(input A, input B, output Sum, output Carry);
assign Sum = (A ^ B);
assign Carry = (A & B);
endmodule“`
# サンプルコード
“`
function make(s) {
var i;
var j;
var k;
var res = “”;
var ins = [];
var outs = [];
var divs = [];
var ass = [];
var json = JSON.parse(s);
var koko = document.getE
