- 1. 動的に追加された要素も静的要素もまとめてイベントの面倒をみるJS
- 2. BootstrapのDropDownメニューで苦戦した記録
- 3. MyBatisのSQLログからSQLを生成する
- 4. 【JavaScript】openでコントローラーのメソッドを呼んだ後にタブ名を設定する【ASP.NET】
- 5. 【2024年版】JavaScript(React)におけるリーダブルコードのチートシート10~13章
- 6. 柴犬の画像を取得する個人開発Webアプリdog_app
- 7. HTML: img要素で遊ぶ
- 8. TypeScript 型一覧
- 9. ServiceNowとChatGPTをREST APIで繋げてみる
- 10. スニペットで超効率的にコードを書く方法【VSCode】
- 11. 話しかけたら楽に判るから 値付け間違いないもん♥byいしかわ version 0
- 12. JSON.stringifyの第2引数について
- 13. 配列の要素を持つ配列オブジェクトを要素のみの配列オブジェクトに変換する
- 14. JavaScriptからFlaskへのデータ送信ーajax通信400エラー
- 15. 2023年下期にチャレンジしたこと
- 16. remixのESLintの設定をFlat Configで記述し直す
- 17. filter() map() reduce()の意味と使い方
- 18. Three.jsのインポートで躓いた
- 19. 【JavaScript】console.log()に色をつけることができるらしい
- 20. Reactに星評価UIを実装する
動的に追加された要素も静的要素もまとめてイベントの面倒をみるJS
動的に追加された要素もイベントを埋め込むニーズがあったのでそのメモ。
解釈としては「個別に要素にaddEventListenerしなくてもどの要素をクリックされたかがわかる」ということが実現できればいい。
最初から存在するdocumentオブジェクトにイベントリスナーを張っておけば、documentの上に乗っかってくる要素のイベントも拾ってくれますよ、というのが答え。
以下サンプルソース。
“`html
anchor1
“`実行結果
要素を左から順にクリックして最後に白い部分をクリックしたのが以下の実行結果。
 {
let newWindow = open(“/Home/CreatePDF”);
}
“`“`ruby:C#
public class HomeController
{
[HttpGet]
public IActionResult CreatePDF()
{
// PDF作成処理
…return File(fileContents, “application/pdf”);
}
}
“`この状態だと、タブ名がコントローラーのメソッド名（CreatePDF）になってしまう。
以下のようにdocument.titleを設定したところ、最初の数秒は反映されるが、PDFの読み込みが終わったタイミングでタブ名がCreatePDFに書き換わってしまった。
“`
【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
TypeScript 型一覧
## はじめに
今回初めてTypeScriptでNext.jsを利用したいと考え、まずは型定義でしっかりとハマることがあったので、頭の整理のためにまとめてみたいと思います。– object型
“`jsx
const person: {
name: string;
age: number
} = {
name: ‘taro’,
age: 20,
}
“`
– array型
“`jsx
//すべての要素に対して、ひとつの型のみを許可する型指定
let favoriteActiveties: string[] = [‘basketball’, ‘soccer’];
//変数に対して変数であるというだけの型指定。要素に対してはどのような型でも許容する
let favoriteWords: any[] = [‘love’, 0, ‘family’];
//tuple型: 変数に対して配列であり、配列の長さ、配列の要素の指定をする。配列
ServiceNowとChatGPTをREST APIで繋げてみる
Vancouverリリースから追加されたNow Assistのいくつかの機能[^1]に触れる機会があったのですが、Now Assist利用で発生する追加コスト[^2]の負担がちょっと厳しいなと思いました。
そこでOpenAIやAzure OpenAIサービスのどちらもREST APIに対応していますし自分で作ったほうがいいかなと思い、ServiceNow→ChatGPTへの処理を行う仕組みを作ってみました。また、将来的なメンテナンス性や拡張性を考慮してChatGPTへのプロンプトの内容をスクリプト内にハードコートはせず、ノーコードで追加・更新・削除できるような形での作成を行っていきます。
# 全体図
全体図としては以下のコンポーネントで構成されたものになります。1\. 拡張テーブル：REST API接続の各種パラメーターを格納・管理する
2\. Script Include：REST API接続を行う
3\. Service Catalog（Catalog item）：エンドユーザーが利用する;` が表示される、ということができる。
ファイルの種類ごとに管理できるので、上の例だと c と打ったときにPythonだと `cv2` と表示させたいということもできる。
## 普段使っているスニペットを紹介
僕がVSCodeで使っているスニペットを紹介します。ちなみにスニペットのjsonファイルを呼び出すには、以下のようにすればよい。
– `command` + `^control` + `p` でEnter
– 呼び出したい言語 (pythonなど) を選択するか入力する
HTMLとJavascriptでつくる
声を掛けたら それらしいのを返してくれるヤツ## 下記課題解決のプロトアウト
お弁当や総菜など商品作ってラベル貼るときな
ラベル貼機にその商品の品番入力背なあかんねんけど
品番は紙の表になっとって見にくい探しにくいねん品番多いねん 紛らわしいのもあんねん 表から探すのめんどいやん！
何ページもある表から探してって、その時間が無駄や！
しかも見間違いが多発すんねん！と あつく かたる いしかわてんちょう
## 作りたい商品の名前を話したら 検索して表示してくれるのでけへんか？！
音声からそれらしい商品の候補を出しゃ、探しやすいやん
探す時間めっちゃ少なくなるやん！
間違え減るやん！楽できるやん！と あつく かたる いしかわてんちょう
## HTMLとJavascriptで書いて
JSON.stringifyの第2引数について
## 前置き
JavaScriptの関数[`JSON.stringify`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify)は、JavaScriptのオブジェクトや値をJSON文字列に変換します。第1引数に、変換したいオブジェクトや値を設定します。
“`JavaScript:JSON.stringify
let hoge = {
a: 1,
b: ‘fuga’,
c: {
d: ‘piyo’,
},
e: [5, 6, 7],
};
console.log(JSON.stringify(hoge));
/// 結果
{“a”:1,”b”:”fuga”,”c”:{“d”:”piyo”},”e”:[5,6,7]}
“`
参考までに、第3引数に数字を設定すると、その分だけインデントして出力してくれます。
“`JavaScript:JSON.stringify 第3引数
let hoge = {
a: 1,
b:
配列の要素を持つ配列オブジェクトを要素のみの配列オブジェクトに変換する
– data1.jsonをdata2.jsonにしたい
“`data1.json
{
{ “name”: “a”,
“id”: 1,
“status”:
[
{ “type”: “b1”, “code”: “b2” },
{ “type”: “c1”, “code”: “c2” }
]
},
{ “name”: “d”,
“id”: 4,
“status”:
[
{ “type”: “e1”, “code”: “e2” },
{ “type”: “f1”, “code”: “f2” }
]
}
}
“`
“`data2.json
{
{ “name”: “a”,
“id”: 1,
“type”: “b1”,
“code”: “b2”
},
{ “name”: “a”,
“id”: 1,
“type”: “c1”,
“code”: “c2”
},
{ “name”: “
JavaScriptからFlaskへのデータ送信ーajax通信400エラー
## 初めに
Flaskを用いて開発を行っており、JSからFlask側にajaxを使って情報を送ろうとした。
コードは下記通り
“`
var fData = new FormData();
fData.append(Data1, data1);
fData.append(Data2, data2);
fData = Object.fromEntries(fData.entries())
$.ajax({
url : ‘URL’,
type : ‘POST’,
data : JSON.stringify(fData),
dataType : “json”,
processData : false,
contentType : “application/json”,
async : false,
})“`
app.p
2023年下期にチャレンジしたこと
## はじめに
この記事は、2023年下期に自己研鑽として取り組んだことをまとめた記事です。
## 2023年11月時点の自分のスキル
フロントエンドエンジニアのロードマップを元に自分のスキル分析を行いました。https://roadmap.sh/frontend
### 分析結果の概要
– インターネット関連
– 全体的に知識が不足している
– HTML
– 実務経験ありだが、アクセシビリティ/フォーム&バリデーションの知識はない
– CSS
– 全体的に実務レベルで問題なさそう
– Javascript
– 重点的な学習が必要
– Git
– 全体的に実務レベルで問題なさそう
– Package Maneger
– 業務で使っているけど実はあまりわかっていないその他画像でグレーアウトしている部分も現状のスキル感を洗い出したが、全体的に「足りていない」の一言だったため省略
という設定ファイルの新たな記法がデフォルトで有効になり、元の記法が非推奨となります。そしてバージョン10.0.0では元の記法がサポートされなくなります。https://eslint.org/blog/2023/10/flat-config-rollout-plans/#flat-config-by-default-in-eslint-v9.0.0
サポートが切れるため元の記法で記述していた場合はFlat Configへ書き直す必要があります。しかし、同じ設定を記述するには記法が大きく変化したため慣れや工夫が必要となります。
この記事ではFlat Configに移行することへ慣れるための練習として、`create-remix`で生成されるremixのESLintの設定をFlat Configに書き直します。
remixの設定はReactを開発する上で一般的なルール
filter() map() reduce()の意味と使い方
# filter()の使い方
filterメソッドは配列の要素を指定した条件で絞り込む関数です。
配列を1つ1つ判定して、関数の中でtrueになったものだけをまとめて配列として返します。
trueとなったもののみを配列として返すだけなので、実際に処理を加えるわけではありません。
Arrayオブジェクトが持つ関数なので配列にのみ仕様できます。“`javascript
const array = [1, 2, 3, 4, 5]
const newArray = array.filter(value => {
return value > 3
})console.log(newArray)
// 出力結果
> [4, 5] //配列として返す
“`# map()の使い方
mapメソッドはfilterメソッドと違い、配列の各要素に処理を加えるメソッドです。
“`javascript
const arr = [10, 20, 30, 40, 50];// mapの場合
const mapResult = arr.map(value => {
return
Three.jsのインポートで躓いた
# 初めに
最近Three.jsを趣味で触りたいと思い、勉強を始めました。初学者のため、誤りや不適切な部分があれば教えていただけると幸いです。## 躓いたこと
マウス操作の機能をつけるために`OrbitControls`をインポートしようとしたところ、エラーになりました。* 問題のコード
“`
import * as THREE from “./build/three.module.js”;
import { OrbitControls } from “./jsm/controls/OrbitControls.js”;
“`
* コンソールに表示されたエラー文
“`
Uncaught TypeError: Failed to resolve module specifier “three”. Relative references must start with either “/”, “./”, or “../”.
“`## 考察
threeというモジュールが見つからないようなので、パスの位置が今参考にしている資料のバージョンと異なるみたい。
→今のバージョンの正
【JavaScript】console.log()に色をつけることができるらしい
## はじめに
先輩から教わった、小ネタ的なものですが個人的に面白いと感じたのでその備忘録。## 本文
親の顔より見てきた`console.log()`です。
とりあえず簡単なサンプルコードを以下に。
“`javascript
console.log(‘コンソールに出力されるよ’);
“`
期待通りの結果ですね。
上記の`console.log()`に色付けをしていきます。
“`javascript
console.log(‘%c コンソールに出力されるよ’, ‘color: red;’);
“`
Reactに星評価UIを実装する
## Reactに星評価UIを実装する
Reactで簡単に星評価UIを実装する方法を紹介します。この記事では、`react-icons`パッケージを使用して星のアイコンを表示し、`react-bootstrap`パッケージを使用してスタイリングを行います。
完成イメージ
#### ユーザによる星評価：
– ユーザが星をクリックして評価を変更できます
– 通常はクリック可能な星アイコンを表示します#### 星評価表示：
– ユーザの評価を表示するだけであり、評価を変更することはできません
– 通常はクリック不可能な星アイコンを表示します### 1. `react-icons`のインストール
まず、`react-icons`パッケージをインストールします。
“`bash
npm ins
