- 1. Node.jsでAzure Open AIのライブラリ(@azure/openai)を使ってAzure Open AIを使うメモ
- 2. JavaScriptはelse ifが存在しないという話の続き【小話】
- 3. OpenAIを利用してAIに校正提案させた話
- 4. OpenAI公式npmモジュールでAzure Open AIのGPT APIを使うコピペサンプル
- 5. 【v4対応】シンプルにNode.jsからOpen AIのGPT APIを使うメモ
- 6. Chrome 拡張機能で同時ダウンロード数制御
- 7. 当たり判定に使うミンコスキー差を可視化した
- 8. Mobile Safariでinput type=”file”をjsのclick()で開くと、onchangeが発火しない問題
- 9. Slackの会話履歴の取得をTypeScriptで実装する ~conversations.replies~
- 10. ChatGPTといっしょにJavaScriptでスイカゲームっぽいものを作ってみる
- 11. 【エンジニア向け】生産性を上げるチートシートまとめ
- 12. BabylonJS attachCamera(canvas,true)のcanvas引数は無視される
- 13. 0→1でスピード重視で作られたアプリのTypeScriptコードを改善するために気にしていること
- 14. Svelteの画像最適化ライブラリが公式からリリースされたので使ってみる！
- 15. Cloudflare Pagesで動作するAstro製ブログのランタイムをbunに移行した話
- 16. React入門４: リファクタリング [リフトアップ編]
- 17. 我が家のReact – React開発始めるときにとりあえず用意するもの7つ –
- 18. JavaScriptの非同期処理について
- 19. 同期処理と非同期処理の処理順を完全に理解すれば、銀座に高級寿司を食べに行くことだってできる
- 20. マナビDX Quest：QRコードでのデジタル化 -DXへの第一歩-
Node.jsでAzure Open AIのライブラリ(@azure/openai)を使ってAzure Open AIを使うメモ
[前回の記事](https://qiita.com/n0bisuke/items/9ee0627ea79ccc414b84)で、`The completion operation does not work with the specified model, gpt-35-turbo. Please choose different model and try again. You can learn more about which models can be used with each operation`というエラーがでるという話をしていましたが、どうやら使おうとしているモデルとメソッドの対応がよくなかった模様でした。
タイトル、冗長ですが、、前回は公式OpenAIライブラリでAzure Open AIを使ったので今回の表現で良い気がする…
## 準備
こちらの記事を元に、モデルを準備します。
https://qiita.com/n0bisuke/items/9ee0627ea79ccc414b84
次にライブラリは@azure/openaiを使います。
ht
JavaScriptはelse ifが存在しないという話の続き【小話】
https://qiita.com/advent-calendar/2023/javascript
アドベントカレンダー6日目の記事です。
# JSにはelse ifという構文は存在しない
`else if` は `else` と `if` の組み合わせで表現されている、という有名な話があると思うのですが
> 複数の if…else 文をネストすることで、 else if 節を作成することができます。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/if…else
先週コードを書いていると以下のようなTypeScriptコードを生成してしまい（意図せずにPrettierに生成された・・・）、「え？？？else次の行になっているけど動くの？？」みたいなことになったのでその供養に記事をかいてます。
“`typescript
const func = (bool: Boolean) => {
if (bool) return bool;
else retur
OpenAIを利用してAIに校正提案させた話
:::note info
[技術広報 Advent Calendar 2023](https://qiita.com/advent-calendar/2023/tech_pr) の 6日目の記事です。
::::::note warn
この記事はAIに校正提案させてみた感想が中心の記事になります。技術的詳細については、[KLab Engineer Advent Calendar 2023](https://qiita.com/advent-calendar/2023/klab) の [Github Actions でカジュアルに OpenAI を利用する](https://qiita.com/gutio/items/c631744e4ff0d4147159)の記事で紹介しているので、ぜひそちらもご覧ください。
:::こんにちは。KLabで技術広報をしているgutioです。
KLabの技術広報は、エンジニアがタイトルの開発業務などと兼務で技術広報活動に当たっています。私も、ゲームのバックエンド開発やツール開発業務と兼務しながら、技術広報業務を担当しています。
本記事は、技術広報業
OpenAI公式npmモジュールでAzure Open AIのGPT APIを使うコピペサンプル
Azure Open AIのAPIをNode.jsから使ってみます。Azure Open AIのライブラリ(@azure/openai)を使ったら上手くいかず公式(openai)を使ったら上手くいきました。
https://zenn.dev/n0bisuke/scraps/c18f0da1fdc980
## 色々準備
### まずはOpenAIのライブラリインストール
ライブラリを入れておきましょう。
“`bash
$ npm i openai
“`公式を使う場合のはこちらに残しています。
https://qiita.com/n0bisuke/items/6759ff0b0e481892f810
### モデルを作成する
Azureの管理画面からOpenAIのリソースを作成し、モデルデプロイをします。
（ちなみに、現状この時にどこのリージョンを選ぶかで、GPT4が使えたり使えなかったりします)> ;
const key=’API キー’const openai = new OpenAI({
apiKey: key, // defaults to process.env[“OPENAI_API_KEY”]
});async function main() {
const completion = await openai.chat.completions.c
Chrome 拡張機能で同時ダウンロード数制御
Chrome 拡張機能の開発で background 側のスクリプトを想定した記事です。
認証の関係で wget などのツールが使えないとき、拡張機能からファイルをダウンロードしたいことがあります。何も考えずに次々キューに放り込むと、ダウンロードが追い付かずにどんどん溜まって、数百を超えると OS の動作にも支障を来すほど重くなります。そこで同時ダウンロード数の制御を試みます。
# 実装
`chrome.downloads.download()` をラップして、成功と失敗が明示的に受け取れるようにします。
“`js
function download(url, filename) {
return new Promise(async (resolve, reject) => {
try {
const downloadId = await chrome.downloads.download({
url: url,
filename: filename
});
chrome.downloads.onChanged.addListener(
当たり判定に使うミンコスキー差を可視化した
## はじめに
皆さん、**当たり判定** はご存知ですか？
主にゲームや物理シミュレーションで行われる、「二つのオブジェクトが衝突しているかどうか判定する」アルゴリズムのことです。当たり判定には色々ありますが、有名なものに **GJKアルゴリズム** があります。
これは、凸型(簡単に言うと凹みがない)多角形(ポリゴン)なら何でも当たり判定が出来てしまうアルゴリズムです。その **GJKアルゴリズム** の **コア** として、 **ミンコスキー差** が登場します。
## ミンコスキー差って？
ミンコスキー差は、まず言語で説明すると「二つのポリゴンの中身にある座標(位置ベクトル)を全部引き算した後の**図形** 」を言います。例えば、ポリゴン0とポリゴン1のミンコスキー差を出すとします。
ポリゴン0の中に含まれる座標(位置ベクトル)がありますね。ポリゴン1にも。
これらを **全ての組み合わせにおいて** 引き算します。
つまり、ポリゴン0に内包される位置ベクトル全てを
“`math
P_0 \in \vec p_{0, i} (i=0, \cdots)
Mobile Safariでinput type=”file”をjsのclick()で開くと、onchangeが発火しない問題
## 環境
iPhone 11 Pro
iOS 17.1.2## 発生している問題の概要
Mobile Safariでカメラロールから読み込むための``を、
JSから`click()`で発火すると、onchangeが発火しない## やりたいこと
iPhoneから画像をアップする読み込みボタンを押すなりしたら読み込みダイアログを出して、
選んだ画像を返すようなメソッド、`showOpenImageDialog()`を作る## 動かないソース
“`
function showOpenImageDialog() {
return new Promise(resolve => {
const input = document.createElement(‘input’);
input.type = ‘file’;
input.accept = ‘image/*’;
input.addEventListener(‘change’ , (event) => {
resolve(event.target.files[0]
Slackの会話履歴の取得をTypeScriptで実装する ~conversations.replies~
# 目次
1. 概要と前提
1. 実装のポイント
2.1. [`conversations.replies`](https://api.slack.com/methods/conversations.replies)のスコープ
2.2. [`curosr`ベースのページネーション](https://api.slack.com/docs/pagination#cursors)
2.3. [Rate limits](https://api.slack.com/docs/rate-limits)
1. ソースコード
1. 感想# 1. 概要と前提
Slackのメッセージの会話履歴の取得をTypeScriptで実装していきます。
本記事では、私が実装する上で躓いたところを中心に解説していきます。そのため、全ての手順を詳細に解説するわけではありません。上記の目次を参考に、必要な箇所だけつまみ食いしていただければ幸いです。
**注意**：そもそも、Slackには、会話履歴などのデータをexportする機能が備わっています。
参考：[ワークスペースのデータをエクス
ChatGPTといっしょにJavaScriptでスイカゲームっぽいものを作ってみる
普段BtoBのお堅めWebアプリを作っているエンジニアがスイカゲームに魅了されてしまい、
ChatGPTをお供にスイカゲームっぽいものを作ってみたというお話です。
# 背景
私は普段、BtoBの割と堅めのWebアプリケーションを作っていて、
業務の中でJavaScriptと戯れる機会がそれなりにあるのですが、業務アプリ以外で、JavaScriptのアクションゲームっぽいものをつくってみたいな～
と常々思ってました。ただ、何から手を付けていいかわからなかったので、今まで未着だったのですが、
ちょうどよい機会なのでChatGPTに聞きながらスイカゲーム風の何かの製作に挑戦してみることにしました。# 題材を考える
何かものづくりをするときは、モチベーションが欲しいですよね。
私は猫が好きなので、猫関連グッズをモチーフとした「ネコゲーム」
【エンジニア向け】生産性を上げるチートシートまとめ
## はじめに
今回はエンジニア向けのチートシートをまとめていきます。
チートシートを利用することで、
– 作業効率が上がる
– 大枠を掴める
– 学習になるといった恩恵が得られます。
ただし、毎回コードを書くたびに「**チートシート集でカンニングすればええや**」と思うのではなく、「チートシートを使う中で徐々に体で覚えていく」ことが重要です。
最終的にはチートシートは見ずに「自分の使える技術」として定着させるための道具だと思って使ってください。
## この記事の対象者
– エンジニア初心者
– 作業効率を上げたい人
– コードを書くテクニックを知り合い人## [VsCodeチートシート](https://camo.qiitausercontent.com/8e7b0b88be526969f856b75f97e05b23516f0d72/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f38313534382f3035323866633
BabylonJS attachCamera(canvas,true)のcanvas引数は無視される
# attachControl 関数
[Babylon.js Playground](https://playground.babylonjs.com/) の初期サンプルコードにも登場する `camera.attachControl(canvas, true)` ですが、2023年12月2日現在の Babylon.js 6.32.1 では、boolean 型でない先頭の引数は無視するようになっています。
例えば [`FreeCamera.attachControl`](https://doc.babylonjs.com/typedoc/classes/BABYLON.FreeCamera#attachControl) では以下の2つが定義されていますが後者は後方互換の目的で残されています。
– attachControl(noPreventDefault?: boolean): void
– attachControl(ignored: any, noPreventDefault?: boolean): voidそのため、attachControl の引数にHTML要素を指定し
0→1でスピード重視で作られたアプリのTypeScriptコードを改善するために気にしていること
# はじめに
[ecforce ma](https://ec-force.com/product/ma) というサービスの開発に参画してから半年程度が経ちました。
当初、スピード重視であまりコードの品質にこだわらずにローンチを目指したサービスのようで、途中から参加した私が読めない（まったく何をしているのかわからない、あるいは理解するまでに時間がかかる）コードが多く、機能追加や不具合修正のたびに時間がかかっていました。
そのたびに、関連するコードの改善をしながら、今ではある程度読み易いコードになったと思いますので、この半年程度で遭遇し、そのたびに改善してきたことをまとめようと思います。
# この記事のターゲット
– TypeScriptの経験が多くないが、業務でTypeScriptを書かないといけない人
– どんな書き方のコードをアンチパターンを捉えたらよいのか判断する材料がほしい人フロントエンド、特にJavaScriptやTypeScriptにある程度精通している人にとっては、特に新しい情報は無いかもしれません。
# 具体例と解決策
## 1. 新しい配列の作成をfo
Svelteの画像最適化ライブラリが公式からリリースされたので使ってみる！
# はじめに
Svelteの画像最適化ライブラリがSvelte公式から2023年11月にリリースされました！
現時点ではexperimentalですが、Svelte/SvelteKitを使ってWebサイトを作る上でとても便利なので使ってみたいと思います。# インストール
動作条件としては、Viteを使っていればSvelteKit以外でも動作するようです。“`shell
npm install –save-dev @sveltejs/enhanced-img
“`“`diff_javascript:vite.config.js
import { sveltekit } from ‘@sveltejs/kit/vite’;
+ import { enhancedImages } from ‘@sveltejs/enhanced-img’;
import { defineConfig } from ‘vite’;export default defineConfig({
plugins: [
+ enhancedImages(),
sveltekit()
]
Cloudflare Pagesで動作するAstro製ブログのランタイムをbunに移行した話
:::note info
これは[Bun Advent Calendar 2023](https://qiita.com/advent-calendar/2023/bunjs)6日目の記事です
:::
## はじめに
こんにちは！ @Yu_yukk_Y です！
先日Astroで作成した自身のブログのランタイムをbunに移行したのですが、実はそれまでの数ヶ月間Cloudflareでbunを使う方法がわからずにめっちゃ困っていました。。。
そこで、おそらく同じ悩みを抱えている人は自分の他にもいるだろうと思い、この機会に備忘録がてら記事にしてみることにしました！記事の最後に移行後のビルド時間の比較も載せてあります！
## 元々の環境
– パッケージマネージャー: pnpm
– フレームワーク: Astro v2.10.15(HybridモードでCloudflare Adapterを使って動作させています)
– Cloudflare Build System: v1
– ランタイム: node v20.2.0Cloudflare PagesとGithubを連携し、mainと
React入門４: リファクタリング [リフトアップ編]
# はじめに
私自身の復習兼、備忘録的な意味もあり、複数回の記事に渡って React を用いてマルバツゲーム(三目並べ)を開発していきたいと思います。
– [React](https://ja.react.dev/)
– [CodeSandbox(公式)](https://codesandbox.io/)
– [CodeSandbox(非公式)](https://csb-jp.github.io/)## シリーズの一覧
1. [React入門１: 環境構築 [オンライン版]](https://qiita.com/banana_bancho/items/64fa6ccb58101eadbb63)
– [React入門1.5: 環境構築 [ローカル版-番外編]](https://qiita.com/banana_bancho/private/30f5d9d2c5eea00ac11c)
1. [React入門２: 盤面の作成](https://qiita.com/banana_bancho/private/c50495b5d4c30555cec3)
1. [React入門３: イン
我が家のReact – React開発始めるときにとりあえず用意するもの7つ –
Reactを使用した開発には、さまざまな便利なツールやライブラリが存在します。ここではReactを使ったSPA（Single Page Application）開発で、一通り必要となるものの中で私がよく開始時に導入するものを紹介します。基本的には一般的にもスタンダードかと思われるものを、コード関連からビルドやテストに関するものまで一通り紹介しています。
# 我が家のReact開発でよく使っているもの
## 1. ビルドツール: [Vite](https://ja.vitejs.dev/)ReactのビルドツールとしてViteを使っています。Reactのアプリケーションを作り始めるときは一般的にはビルドツールやNext.jsのようなフレームワークを導入してアプリのひな型を生成することから初めて行きます。私は小規模SPAかつサーバーサイドが必要ならpython等の別言語を使うことが多いのでViteを選択していますが、大規模またはSSRが必要等の理由があれば最近はNext.jsを使うことも多いのかもしれません。ReactのビルドツールといえばwebpackやCreate React A
JavaScriptの非同期処理について
JavaScriptの非同期処理に関しての理解
# 背景
フロント開発で、よくPromise、await、then、catch、finally、asyncなどのキーワードがありますね、これらと一緒に出る単語は”同期処理”、”非同期処理”ですね。
多分Javaでの逐次処理、並列処理、並行処理と類似しているものと最初勝手にそう思いました。
実際にフロントエンドの開発を始め、この非同期処理の理解についてすごく苦労してました。（ただのプロセス上コードを一行ずつに実行するか、プロセスが複数に同時に処理することではなかったですね😭）# いきなり非同期処理クイズです！
###### まず下記のソースコードの実行順を予測してみてください！~~~javascript
// timeandpromise.jsconsole.log(“[A] 🦖 MAINLINE: Start”);
setTimeout(() => {
console.log(“[B] ⏰ TIMERS: setTimeout[0ms]”);Promise.resolve(“1st Promise”)
同期処理と非同期処理の処理順を完全に理解すれば、銀座に高級寿司を食べに行くことだってできる
# はじめに
いきなりですがクイズです。
下記のコードはどのような順番でconsoleに表示されるでしょうか？
“`javascript
const sushi = () => {
setTimeout(() => {
console.log(‘寿司’);
});
};
sushi();console.log(‘高い’);
new Promise((resolve) => {
const pref = ‘銀座で’;
return resolve(pref);
}).then((pref) => {
console.log(pref);
});const tabeyo = () => {
console.log(‘食べよう’);
};
tabeyo();
“`… わかりましたか？
正解はこちら！
 6日目の記事です。
（昨日は@edamoto さんの記事でした👏）
今回がQiitaで初投稿となります。よろしくお願いします。## 自己紹介
製造業の設計開発部門でハードウェアの電気や制御に関する業務をしています。
昨年度のマナビDX Quest2022を修了し、今年度のマナビDX Quest2023も受講しています。## 記事の概要
昨年度のマナビDX Quest2022を修了して今年度のマナビDX Quest2023を受講するまでの前日譚となります。QRコードを使ったデモアプリを作って、「社用携帯をガラホ（ガラケー型スマートフォン）から通常のスマホに変えるとこんな有効活用ができますよ」と社内で紹介した話の中で、**Qiitaなのでエンジニアっぽい部分を抜粋**して記事にしています。
### DXQRとは
**DX**と**QRコード**というワードから作り出した
