- 1. 国土地理院の空中写真を並べて立体視
- 2. Azure OpenAI Service の公式情報などを見つつ「GPT-4 Turbo」の「Chat Completions の JSON Mode」を試す：【Node.js（JavaScript）で「@azure/openai」を利用】
- 3. Kintoneで親と子アプリ間でフィールドの値を引き継いでレコード作成するJavaScript
- 4. Django REST framework(DRF)を使ったAPIサーバーとReactとのデータ連携
- 5. classList(add.remove)の使い方
- 6. Javascriptの基本について
- 7. ボタンを押した時だけheadタグにscriptタグを追加する
- 8. javascriptでfizzbuzzプログラム
- 9. JavaScript について説明できる
- 10. LINE BotをBunで外部依存モジュールを使用せずに作ってみる - 2024年1月版
- 11. JavaScript: Logical OR (||) と Nullish Coalescing (??) の違い
- 12. 「デデンネする」をJavaScriptでコードゴルフ
- 13. Highcharts よく使いそうな設定まとめ
- 14. HTMLでJavaScriptを読み込む方法
- 15. InternetExplorerの終焉とJavaアプリケーションとアプレットの意味
- 16. React+D3 アプリ作成入門
- 17. Array.prototype.sort()について学びなおす。
- 18. 【環境構築】MacのC++でstdc++.hやちょっとだけ他言語と比較してみる
- 19. 【JavaScript】三項演算子の入れ子、いうほど可読性悪くない説
- 20. Next.jsで()付きのディレクトリの扱い
国土地理院の空中写真を並べて立体視
## はじめに
令和６年能登半島地震を受けて、国土地理院が情報提供を行っております。
https://www.gsi.go.jp/BOUSAI/20240101_noto_earthquake.html
提供情報の中には、空中写真があります。国土地理院では、地図とぴったり重ねることができる「正射画像」も公開しています。
一方、正射画像が作成される前に、「垂直写真」というものが公開されます。これは、航空機から撮影された１枚１枚の写真す。建物の倒れこみなどがあり、地図とぴったり重ねることはできません。一方、２枚の写真を利用することで**立体視**をすることができます。
国土地理院では、標高データを提供しており、地理院地図3D や地理院地図Globe 等で地図を３次元表示することができますが、この標高データは地震前のものであり、地震後の状況を反映しているわけではありません。上述の正射画像を重ねることで、「崩壊した場所がもともとどのような地形だったか」は把握できますが、「崩壊したとにどのような形状になっているのか」については、（標高データが更新されるまでは）地図上で見て確認することは
Azure OpenAI Service の公式情報などを見つつ「GPT-4 Turbo」の「Chat Completions の JSON Mode」を試す：【Node.js（JavaScript）で「@azure/openai」を利用】
## はじめに
本記事で扱う内容は、以下の記事や過去の他の記事でも書いてきた、Azure OpenAI Service に関するものです。●Azure OpenAI Service の GPT-4 まわりの話を個人的にまとめてみる【2024/1/11時点】 #Azure – Qiita
https://qiita.com/youtoy/items/c4b69c2891f8e77a92c5その中でも、上記の記事の「サポートされているプログラミング言語」という項目で書いた JavaScript を使い、「GPT-4 Turbo の Chat Completions」を扱う話です。
せっかくなので、GPT-4 Turbo から利用できるようになった「JSON Mode」を使います。## 参照する公式の情報
まずは、今回参照する公式の Azure OpenAI Service の情報源を記載します。具体的には、[公式の Azure OpenAI Service でサポートされているプログラミング言語](https://learn.microsoft.com/ja-jp/azu
Kintoneで親と子アプリ間でフィールドの値を引き継いでレコード作成するJavaScript
# 概要
kintoneにて、ある顧客に関連する詳細データを別アプリで作りたいとき、
詳細データ用アプリで親アプリでの顧客IDや電話番号手入力での手間があるので、
ボタン1発でデータを引き継いでレコード作成できるJavaScriptを作りました。▼イメージ
# 導入方法
親と子、それぞれのアプリごとに下記を導入してください。
## 親アプリには下記JavaScriptを入れます。
“`javascript:parent.js
(function() {
‘use strict’;var RELATED_APP_ID = ‘your_child_app_id’; // 子アプリのIDを設定
// レコード詳細画面が表示されたときのイベント処理
kintone.events.on(‘app.record.det
Django REST framework(DRF)を使ったAPIサーバーとReactとのデータ連携
## 概要
[前回の記事](https://qiita.com/xinome/items/f883ce4565cd9c56ad17)の続きで、バックエンド側の実装を進めました。
今回はDjango REST frameworkを使用し、Django-adminで設計されたデータの取得とフロント側での表示を実装します。### 実装機能
– [Django REST framework(DRF)](https://www.django-rest-framework.org/)の導入
– Django管理画面で実装したデータの取得### 参考文献
https://www.django-rest-framework.org/community/release-notes/
https://docs.djangoproject.com/ja/5.0/topics/install/
https://qiita.com/Bashi50/items/203505440049d759b694
## フォルダ構成
今回使用しているものをメインに抜粋
– バックエンド(Pyt
classList(add.remove)の使い方
## classList(add.remove)って何？
特定のhtml要素にcssで記述したクラスを追加、削除するJavaScriptのメソッドです！#### 例えば下の要素に新しいクラスを付与したい時
“`html:htmlピーマン“`
“`javascript:js
```
javascriptでfizzbuzzプログラム
https://playcode.io/javascript
```fizzbuzz.js
for (let i = 1; i <= 100; i++) { let output = ''; if (i % 3 === 0) output += 'Fizz'; if (i % 5 === 0) output += 'Buzz'; console.log(output || i); } ```
JavaScript について説明できる
# 1. JavaScript とは
JavaScript は、Webページを動的に制御し、対話的な要素を追加するためのスクリプト言語です。JavaScriptは主にブラウザ上で動作し、ユーザーとの対話やWebページの挙動を制御する役割を果たします。# 2. ECMAScript とは
ECMAScriptは、JavaScriptの標準規格のことを指します。JavaScriptは、Webページ上で動的な挙動や対話性を実現するためのスクリプト言語であり、その基本的な仕様や機能がECMAScriptによって定義されています。
プログラム言語には標準規格が存在し、それに基づいて開発されたプログラムが異なる実行環境で一貫性を保つためには、標準化が不可欠です。ECMAScriptはJavaScriptの標準規格であり、各ブラウザやJavaScriptエンジン（Node.jsなど）はこの標準に基づいてJavaScriptを実装しています。
LINE BotをBunで外部依存モジュールを使用せずに作ってみる - 2024年1月版
先日書いた記事をベースにBunのAPIに書き換えた版を作ってみます。
https://qiita.com/n0bisuke/items/0ab7b3b38557384370ed
## BunとNode.jsの互換性もあるけど
前提としてBunのランタイムはNode.js互換性があるので、何もしなくてもそのまま（少なくとも今回のコードは）Node.jsで書いたコードも動きます。
そんなに調べてませんが昔は互換性が微妙って話もちらほら聞いてましたけどv1.0になって良くなったのか、シンプルな内容だからなのかBunのネイティブAPIを使って書き換えられる部分を書き換えてみたいと思います。
## Bun.serve()とBun.CyptoHasher()
主にサーバー部分とHA256アルゴリズムでハッシュ化する部分の2箇所を書き換えてます。
### サーバー部分 - Bun.serve()
ドキュメントみるとこんな感じで書くみたいですね
```js
Bun.serve({
fetch(req) {
const url = new URL(req.url);
JavaScript: Logical OR (||) と Nullish Coalescing (??) の違い
JavaScriptには`||`（論理OR）と`??`（Nullish Coalescing）という2つの演算子があります。
これらはどちらも値が`null`または`undefined`のときにデフォルト値を設定するために使用されますが、その挙動には重要な違いがあります。
## 論理OR (||)
```javascript
return params || "";
````||`演算子は左辺の値が`falsy`（評価時に偽となる値）の場合に右側の値を返します。JavaScriptでは以下の値は `falsy`と評価されます。
```
false
0 や -0
""（空文字列）
null
undefined
NaN
```このため、`params`変数が`null`や`undefined`だけでなく、その他の`falsy`な値（例えば空文字列や`0`）の場合にも右辺のデフォルト値（この場合は空文字列`""`）が返されます。
## Nullish Coalescing (??)
```javascript
return params ?? "";
````??`演算子
「デデンネする」をJavaScriptでコードゴルフ
## 元ネタ
http://kutachu.web.fc2.com/dedenne.htm
## ルール
* デ：50%, ン：25%, ネ：25% の割合でランダムな文字列を生成する。
* 末尾がデデンネになったら生成を止め、文字列を表示する。## コード
70文字
```js
for(t='';!t.includes(d='デデンネ');)t+=d[Math.random()*4|0];console.log(t)
``````js:読みやすく加工
for (t = ''; !t.includes(d = 'デデンネ');) {
t += d[Math.random() * 4 | 0];
}
console.log(t);
```
Highcharts よく使いそうな設定まとめ
# 概要
Highchartsでよく使いそうな機能や設定をまとめていきます。
ちなみにHighchartsはグラフを表示するためのJSのライブラリです。# 公式ドキュメント
公式ドキュメントは最新のバージョンに対するもののみのようです。
使っているHighChartsのバージョンと一致しない場合、公式ドキュメントと挙動が一致しない場合もあるので注意してください。
- [公式トップ](https://www.highcharts.com/)
- [公式HighCahrtsドキュメント](https://www.highcharts.com/docs/index)
- [公式HighChartsの概要がわかるドキュメント](https://www.highcharts.com/docs/chart-concepts/understanding-highcharts)
Chart concept以下に纏められた記事（Understanding Highcharts等）を順に読んでいけば、HighChartsで使う基本的な設定やできることの大枠が掴めると思います。
- [公式各グラフのデモ
HTMLでJavaScriptを読み込む方法
# はじめに
HTMLでJavaScriptを読み込む方法について学んだので，アウトプットしていきます．# 方法1：JavaScriptをHTML内に記述する
`script`タグ内にJavaScriptのコードを書いていく．HTMLの読み込みが途中で止まらないように，`body`タグの最後に書くことが奨励されている．
```html
```# 方法2：JavaScriptを外部ファイルとして読み込む
`script`タグの`src`属性にJavaScriptファイルを指定する．
```html
<
InternetExplorerの終焉とJavaアプリケーションとアプレットの意味
[マイクロソフトはInternet Explorerのメインストリームサポートを2022年6月に終了することを発表した](https://docs.microsoft.com/en-us/lifecycle/faq/internet-explorer-microsoft-edge#:~:text=Internet%20Explorer%20is%20a%20component,systems%20starting%20June%2015%2C%202022.)。その時点で、IE11デスクトップアプリケーションは使用できなくなり、Microsoft Edgeにリダイレクトされます。
Microsoft Edgeがこの責任とそれ以上のことを引き受けることができるようになったため、Internet Explorer 11デスクトップアプリケーションは、Windows 10の特定のバージョンにおいて、2022年6月15日に引退し、サポートを終了します。
1995年に発売されたInternet Explorerは、今日の消費者市場では長い間無用の長物となっていたが、多くの古い企業向けソフトウ
React+D3 アプリ作成入門
React+D3 アプリの簡単な作り方を説明しました。React や D3 については【関連記事】を参照してください。記事の全体は【古い記事】のリライトの側面もありますが、React がかなり更新されているので新記事として読んでいただければと思います。
【関連記事】
[React 再入門 (React hook API) - Qiita](https://qiita.com/sand/items/7a6ef787d11c3ebabf08)
[D3 v7 入門 - Enter / Update / Exit - Qiita](https://qiita.com/sand/items/8b5ca42d1bf511e61ccd)
[D3 v7 応用 - Enter / Update / Exit - Qiita](https://qiita.com/sand/items/999715cebe52ade66c0b)
[D3 v7 グラフ - d3-scale、d3-axis、d3-shape - Qiita](https://qiita.com/sand/items/721db51592e1
Array.prototype.sort()について学びなおす。
今回はArray.prototype.sort()について学びます。
早速解説を見ていきます！> sort() は Array のメソッドで、配列の要素をその場 (in-place) でソートし、ソートされた同じ配列の参照を返します。既定のソート順は昇順で、要素を文字列に変換してから、 UTF-16 コード単位の値の並びとして比較します。
疑問が出たポイントを調べてみます。
- その場 (in-place) でソート
- 元の配列を変更すること。(新しい配列を作らない破壊的変更)
- 同じ配列の参照を返します
- 返り値が配列なので、そのままメソッドチェーンが可能。
- 既定のソート順は昇順
- 小さい順から並び替えます
- 要素を文字列に変換してから
- 数値10は文字列"10"に変換されます。
- UTF-16 コード単位
- UTF-16 コード単位は、Unicode文字をエンコードするために使用される16ビット（2バイト）の値のこと。
- 数値の10と2は文字列として比較すると、"10" は "2" よりも小さいと判断されます。試してみまし
【環境構築】MacのC++でstdc++.hやちょっとだけ他言語と比較してみる
## ハマったこと
C++の`bits/stdc++.h`をincludeしたかった。
STLをひとつひとつincludeするのは面倒なので、全部入り神モジュールである`stdc++.h`を入れたい。2つ必要なことがあった。
1️⃣ファイル本体が必要
2️⃣静的解析がエラーを吐く環境はMacでvimです。
### 1️⃣ファイル本体が必要
ようはstdc++.hというファイルが、欲しいincludeを死ぬほど大量にincludeしまくってくれてるファイルということ。
だから、欲しいincludeを全部あらかじめincludeしておいたファイルを、1枚だけincludeすれば楽だよねっていうだけ。とくに魔法みたいなことはしてない。`stdc++.h`はどこにあるか？
gccの最新を入れると一緒についてくる、gccを入れたくない場合は、ネット上に転がっているファイルを取ってくればいい。
または自分で好きにカスタムすればいい（多すぎるincludeを自前で用意したいならの話）```gccをいれる.sh
brew install gcc
``````ここにあるはず.バージ
【JavaScript】三項演算子の入れ子、いうほど可読性悪くない説
## ワンライナーで書かれた入れ子は見にくいけど…
```js:例1
const result = isFizz && isBuzz ? 'FizzBuzz' : isFizz ? 'Fizz' : isBuzz ? 'Buzz' : i;
```## 改行されていればそんなに可読性が悪くない
```js:例2
const result = isFizz && isBuzz ? 'FizzBuzz' :
isFizz ? 'Fizz' :
isBuzz ? 'Buzz' : i;
```改行されていても見にくいかも？と感じる方は三項演算子を気にしすぎているかもしれません。
`?`や`:`のことは気にせず、このように脳内変換すれば読みやすくなるでしょう。```js:例3
const result = isFizz && isBuzz ⇒ 'FizzBuzz'
isFizz ⇒ 'Fizz'
isBuzz ⇒ 'B
Next.jsで()付きのディレクトリの扱い
## バージョン
```php
"next": "13.5.6",
"react": "^18",
"react-dom": "^18",
```## 概要
Next.jsでルーティングを行う時にディレクトリ内にpage.tsxを作成するとルーティングが可能になる。例えば、下記のようにディレクトリ内に作成すると`[http://localhost:3000/](http://localhost:3000/contact)pages`となる。
```php
pages
→page.tsx
```## 課題
仮にpagesディレクトリにtaskディクトリとcontactディレクトリを作成して、それぞれの配下にpage.tsxを作成する。それぞれのルーティングは`http://localhost:3000/pages/task`と`http://localhost:3000/pages/contact`になる。このパス中のpagesの記述をなくしたい。
## 解決策
pagesディレクトリを(pages)に書き換えることで、それぞれのルーティン
