- 1. express routing
- 2. expressの備忘
- 3. そこに i はあるんか、という話
- 4. JavaScriptで複素数クラスを作る
- 5. ESP8266で電源電圧を自己測定し、Googleスプレッドシートに記録して推移を可視化する
- 6. Windows上Subline Text3 javascript実行させる
- 7. PleasanterのAddResponseの使いどころ
- 8. JavaScriptのsortについて
- 9. JavaScriptで数値計算—二分法とニュートン法
- 10. GitHub ActionsでのJavaScriptヒープメモリエラーの解決方法
- 11. SSR/CSRの違いとは
- 12. GASのSHA256を16進数の文字列に変換したいときのコードスニペット
- 13. ChatGPT使えば結構いい感じのサイト作れるんじゃね?というお話。 Part2
- 14. 動的に追加された要素も静的要素もまとめてイベントの面倒をみるJS
- 15. BootstrapのDropDownメニューで苦戦した記録
- 16. MyBatisのSQLログからSQLを生成する
- 17. 【JavaScript】openでコントローラーのメソッドを呼んだ後にタブ名を設定する【ASP.NET】
- 18. 【2024年版】JavaScript(React)におけるリーダブルコードのチートシート10~13章
- 19. 柴犬の画像を取得する個人開発Webアプリdog_app
- 20. HTML: img要素で遊ぶ
express routing
# express routing
## 基本
“`
app.METHOD(PATH, HANDLER)
“`– app : expressのインスタンス
– METHOD : post, get, put …（HTTPメソッドを小文字にしたもの）
– PATH : サーバ上のパス（URLのパス？）
– HANDLER: URLがPATHとマッチしたしたときに実行するメソッド## 基本サンプル
– 基本はHTTPメソッド毎に、処理（メソッド）を割り当てる
“`
// GET メソッドルート
app.get(‘/’, function (req, res) {
res.send(‘GET request to the homepage’)
})// POST メソッドルート
app.post(‘/’, function (req, res) {
res.send(‘POST request to the homepage’)
})
“`– すべてのHTTPメソッドを割り当てる
“`
// 共通処理を仕込んでメソッド毎の処理はnex
expressの備忘
# express
## 参考
– [Express](https://expressjs.com)
## インストール
“`
# package.jsonの作成
# entry point: (index.js) はお好みで。”app.js” もよくある。
npm init# –save でpackage.jsonに追加されるので、後で構築しやすくなる。
# これはモジュールのみnode_modulesにインストールされる
npm install express –save
“`## Hello Wolrd サンプル
– 000.HelloWolrd_index.js
“`
const express = require(‘express’)
const app = express()
const port = 3000app.get(‘/’, (req, res) => res.send(‘Hello World!’))
app.listen(port, () => console.log(`Example app list
そこに i はあるんか、という話
# 1. 今回記事の内容
知っている人は知っている話ですが、JavaScript のちょっとした書き方の違いで意外な動きの違いを生むという話です。# 2. コード例
以下の２つのコードを見て下さい。“` JavaScript: ソース１
console.log(“1つ目:iがfor()の中にある場合”);
const a = [];
for (let i = 0; i < 3; i++) { a[i] = () => {
console.log(i);
};
}
a.forEach((e) => e());
let i = 4;
console.log(‘逆順にも回してみる’);
a.reverse().forEach((e) => e());
“`
“` JavaScript: ソース２
console.log(“2つ目:iがfor()の外にある場合”);
const a = [];
let i = 0; // ここが違う
for (; i < 3; i++) {
JavaScriptで複素数クラスを作る
# 概要
JavaScriptで数値計算するたに前に[JavaScriptが実行できるテストページ](https://qiita.com/I-Yasusi/items/8180ca49f12fb0464cde)を作った。
そのテストページには四則演算子をBabelを使ってJavaScriptでなんちゃって演算子オーバーロード化してある](https://qiita.com/I-Yasusi/items/ad0f174e8d5f14d598b9)。
その演算子オーバーロードを使ったクラスの例として作った複素数クラスについて解説する。
作ったものはGithubの[https://github.com/T-Yasusi/t-yasusi.github.io/blob/main/js/modules/calc/class/Complex.js](https://github.com/T-Yasusi/t-yasusi.github.io/blob/main/js/modules/calc/class/Complex.js)においてあります。## TypeScriptによる擬似メソッド列挙
ESP8266で電源電圧を自己測定し、Googleスプレッドシートに記録して推移を可視化する
# 目的
Arduinoで無線LANを利用したい場合、ESP8266やESP32を使用する場面は多いと思います。低消費電力モードを備え、乾電池により駆動することもできますが、実際、どのくらい動作し続けることができるのか検証してみようと思い立ち、定期的に電源電圧を取得するところから始めてみました。データはSDカード等のローカルに保存することもできますが、今回はGoogleスプレッドシートを活用し、クラウドに保存してみます。リアルタイムに確認できるので便利です。
# 開発環境
特にライブラリのバージョンは注意してください。バージョンが異なると仕様も大きく異なるためです。
* Windows 11 Home 23H2
* Arduino IDE 2.3.0
* ArduinoJson 5.13.5
# 概要
全体的な流れとしてはGASでWebア
Windows上Subline Text3 javascript実行させる
概要
—
Subline Text3上で、.jsファイルをビルド実行させる方法を説明します。Node.js を[インストール](https://nodejs.org/en/download)
—– Node.jsバージョンなど選択してダウンロードします。
– ダウンロードしたファイルをクリックして、インストールします。
– ライセンス同意して次のボタン押して、インストールまで進みます。
いろいろできそう？と思いつつ、いまいち使いどころが見えなかったのですが、業務の中で活用できる場面があったのでまとめてみます。
# 実装要件
以下のような要件でテーブルを作ることを考えました
– 一覧のガイドにリンクを設定する
– マークダウンを使う
– リンクは別タブ別ウィンドウで開きたくないざっくり画面イメージ
 {
let splitWord = str.split(‘ ‘).sort(function(a, b) {
let result = a.length – b.length
return result
});
return splitWord[0].length
}
console.log(shortest(‘osaka aomori akita kanagawa’))
// console.logの出力結果は’5′
“`a, bには配列に変換された’osaka aomori akita kanagawa’が入ってきます。
“`di
JavaScriptで数値計算—二分法とニュートン法
# 要するに
前回の記事のJavaScriptを実行できるWebサイトを使って
汎用的な方程式の数値的開放である二分法とニュートン法について解説する。
これらはあらゆる$f(x)=0$を解ける、つまり汎用的な数値的解放として代表的な２つである。
JSでのコーディングの例として数値計算の例として代表的な$\sqrt(2)$を求める問題を取り上げる。### Github
これらはgithub,ioのページとして公開している。それらへのリンクは解説のあとにつけておく
github自体へのリンクは[ここ](https://github.com/T-Yasusi/t-yasusi.github.io)である## 二分法
ある２つの値、$x_0,x_1$、としそれらの関数の値がそれぞれ正と負であるとする。
その時、必ず$x_0$と$x_1$の間に答え(解)がある。
なので、その平均$x_{center}=\frac{x_0+x_1}{2}$を新たな値として範囲を狭めていく方法である。
解が求まったという条件は$x_0$と$x_1$のが十分小さいとする。
JSの数値型は倍精度浮動点少数であ
GitHub ActionsでのJavaScriptヒープメモリエラーの解決方法
## はじめに
GitHub Actionsでのテスト実行中にJavaScriptヒープメモリエラーが発生した経験を共有します。エラー内容、その原因、そして解決策について詳しく解説します。## エラー内容
以下が発生したエラーメッセージです。“`
FATAL ERROR: Reached heap limit Allocation failed – JavaScript heap out of memory
“`このエラーは、JavaScriptプログラムが実行中にメモリ制限に達したことを示しています。
## 原因
JavaScriptヒープメモリエラーの原因は、プログラムが使用するメモリ量が多すぎるか、無限ループなどが原因でメモリが不足している可能性があります。## 解決策
1. ヒープメモリサイズの調整
GitHub Actionsのワークフローで実行されるNode.jsのプロセスに対して、ヒープメモリのサイズを増やします。
“`yaml
env:
NODE_OPTIONS: –max-old-space-size=4096
SSR/CSRの違いとは
## はじめに
Webブラウザにおけるレンダリングとは、WebサイトのHTMLやCSS、JavaScriptファイルをそのままのコードではなく、画像・映像などの形式として閲覧できる形に変換することです。
Webアプリケーションのレンダリング手法は様々ありますが、本記事ではSSR(Server Side Rendering)、CSR(Client Side Rendering)の違いについて、まとめます。
## CSR
CSRでは、クライアントからのリクエストに対して**JS、CSS、ほぼ空のHTMLファイル**がサーバーから返却されます。その後、クライアント側でJavaScriptを実行し、APIから取得したデータなどをもとにレンダリングします。
単一のWebページを読み込み、別の内容を表示する際にはJavaScriptを通じて内容を更新する**SPA**(Single Page Application)を実現するためには必須の技術といえます。一度ページを読み込んでしまえば、画面遷移しても画面全体を再描画する必要がなくなるというメリットがあります。
一方で、初回表示に時間がかかる
GASのSHA256を16進数の文字列に変換したいときのコードスニペット
# 目的のコード
指定された鍵で HMAC-SHA256 を使用して指定された値に署名し、16進数の文字列にして返す
“`js
function toSha256(key: string, value: string): string {
const signatureBytes = Utilities.computeHmacSha256Signature(value, key);
const signature = signatureBytes
.map((byte) => (byte < 0 ? 256 + byte : byte)) .reduce((str, byte) => str + byte.toString(16).padStart(2, “0”), “”);
return signature;
}
“`
keyに鍵を、valueに目的の値をいれる。戻り値が16進数の文字列だ。# 解説
* 下記のユーティリティ関数のwrapperである。https://developers.google.com/apps-script/reference/u
ChatGPT使えば結構いい感じのサイト作れるんじゃね?というお話。 Part2
こんにちはAtsu1209です。
今日は前に書いた
`ChatGPT使えば結構いい感じのサイト作れるんじゃね?というお話。`
という記事の続きみたいなものになります。
前回の記事↓↓↓https://qiita.com/Atsu1209jp/items/2c93be5930360d007c60
# 前回やったこと
前回は適当なHTMLをChatGPTにCSSを書いてもらっていい感じのサイトにする
ということをやりました。# 今回やること
今回はJavaScriptを書いてもらって更にいい感じにしてもらいます。# 前回のコード
“`html:index.html
Atsu1209
動的に追加された要素も静的要素もまとめてイベントの面倒をみるJS
動的に追加された要素もイベントを埋め込むニーズがあったのでそのメモ。
解釈としては「個別に要素にaddEventListenerしなくてもどの要素をクリックされたかがわかる」ということが実現できればいい。
最初から存在するdocumentオブジェクトにイベントリスナーを張っておけば、documentの上に乗っかってくる要素のイベントも拾ってくれますよ、というのが答え。
以下サンプルソース。
“`html
anchor1
“`実行結果
要素を左から順にクリックして最後に白い部分をクリックしたのが以下の実行結果。
 {
let newWindow = open(“/Home/CreatePDF”);
}
“`“`cs:C#
public class HomeController
{
[HttpGet]
public IActionResult CreatePDF()
{
// PDF作成処理
…return File(fileContents, “application/pdf”);
}
}
“`この状態だと、タブ名がコントローラーのメソッド名（CreatePDF）になってしまう。
以下のようにdocument.titleを設定したところ、最初の数秒は反映されるが、PDFの読み込みが終わったタイミングでタブ名がCreatePDFに書き換わってしまった。
“`js:J
【2024年版】JavaScript(React)におけるリーダブルコードのチートシート10~13章
:::note
2024/3/18
コードの再構成
10章 無関係の下位問題を抽出する
### 10.1 入門的な例: findClosestLocation():::
こちらの記事の続編になります。
https://qiita.com/kntmaan/items/79ab45fa8206876cef47
### 10.1 入門的な例: findClosestLocation()
“`javascript:
const findClosestLocation = (lat, lng array) => {
let closest;
let closes_dist = Number.MAX_VALUE;for(var i = 0; i < arrya.length; i += i){ //2つの地点をラジアンに変換する const lat_rad = radians(lat); const lat_rad = radians(lnt); const lat2_rad =
柴犬の画像を取得する個人開発Webアプリdog_app
# dog_app of development_log
dog_appの開発記録をここに残します。
## 参考サイト
## 環境構築の流れ
流れとしては、次のように開発環境を構築していきます。
1. 最初にローカルでNext.jsをインストール
2. .gitignoreなどは自分で作る必要はない（Next.jsはでデフォルトで記述済み）
3. 次にGit管理するためにリモートリポジトリへプッシュする。## Next.jsをインストール
“`terminal
$ cd ~/workspace/create
$ npx create-next-app@latest –typescript
“`Next.jsインストール時に聞かれる項目については以下のように回答しました。
– `✔ What is your project named? … dog_app`
– `✔ Would you like to use ESLint? … No / Yes`
– `✔ W
HTML: img要素で遊ぶ
`
`という構成の最短記述を検証してみました。dataURI形式限定で、外部画像fileを読み込むのは禁止です。
1画素の画像を表現すれば良さそうだと思い、bmp、gif、png、jpg形式の画像fileをdataURIに変換してみたところ、どうやらgifが最も小さくなるっぽい。何やら不正臭いですが…。
“`html
gif 51 bytes
png 88 bytes
“`
svg要素からdataURIを作ると最小で以下のようになるかも。
“`html
46 bytes
103 bytes
