- 1. Service Locator と DI の違いを TypeScript を書きながら体験してみる
- 2. Azure OpenAIをWebサイトに組み込む
- 3. Node.jsをMacにインストールした
- 4. 【Node.js】GoogleのOAuth 2.0 APIを使ってクライアントアプリを実装してみた
- 5. Node.jsで普通のJavaScriptをimportする
- 6. node開発環境構築個人メモ
- 7. Moment.jsからDay.jsに移行したらタイムゾーン変換が遅すぎて転げ回った話
- 8. custom-resource-apigw-cw-roleがnode16.xランタイムでデプロイされる件
- 9. JavaScriptで電力測定してみた
- 10. Pocketの認証をワンライナーで実施する方法
- 11. Reactでフォームを作るために、Formikをイチから理解する
- 12. npm installするとSSL/TLSネットワークエラーが発生した場合の対処方法(ESET編)
- 13. node.jsでalexaスキル その8
- 14. process.onと併せてExpressアプリケーションで発生しうるエラーを可能な限り包括的に処理する方法
- 15. 【node-cli】readline-syncで日本語が文字化けする
- 16. node.js – クラスにメンバ変数・メンバ関数を定義する ( インスタンス変数、インスタンス関数的な )
- 17. node.jsでalexaスキル その7
- 18. node.jsでalexaスキル その6
- 19. node.jsでalexaスキル その5
- 20. 初めてのWebアプリケーションを作ってデプロイした話(React / Express)
Service Locator と DI の違いを TypeScript を書きながら体験してみる
この記事を読みました。すごくわかりやすい記事です。
以下のことがふんわりわかりました。
– Service Locator も DI も同じような課題を解決するためのもの
– Service Locator と DI コンテナは利用する目線だとほとんど同じもの
– DI の方がおすすめなんとなく理解したんですが、たぶん後輩に聞かれても説明できないです。
このモヤモヤを取り払うため、実際に TypeScript で書いてみることにしました。## 何も考えずに書くと
“`ts
class A {
exec(){
console.log(‘exec A’)
const b = new B()
b.exec()
}
}class B {
exec(){
console.log(‘exec B’)
}
}class App {
main(){
const a = new A()
Azure OpenAIをWebサイトに組み込む
# はじめに
Azure OpenAIにWeb ClientからWeb Serverを介してリクエストを行い、
応答をWebクライアントに表示する方法をサンプルコードで紹介します。※node.js、socket.io、Azure OpenAIについての学習を行う過程で作成したもののため
回りくどいやり方をしている部分があります。ご了承ください。
### 作るもの
テキストボックスに質問を入力して送信するとAzure OpenAIからの応答が表示される
プログラムを作成します。
# Azure OpenAIについて
Azure OpenAI ServiceとはChatGPTを含む、複数のAIモデルを利用することができるMicrosoftの提供するサービスのことです。
プラットフォームはAzureでAzureのリソースと組み合わせて利用す
Node.jsをMacにインストールした
# はじめに
Macでhomebrewを使ってnodebrewをインストールし、node.jsをインストールした際のメモです。
# つまづきメモ
つまづいた箇所を記載します。詳しくは[参考にした文献](#参考にした文献)をご覧ください。
## node.jsがインストールできない
node.jsの安定版がインストールできませんでした。
“`
% nodebrew install-binary stable
Fetching: https://nodejs.org/dist/v22.0.0/node-v22.0.0-darwin-x64.tar.gz
Warning: Failed to open the file
Warning: /Users/owner/.nodebrew/src/v22.0.0/node-v22.0.0-darwin-x64.tar.gz: No
Warning: such file or directory
curl: (23) Failure writing output to destinationdownload failed: https:
【Node.js】GoogleのOAuth 2.0 APIを使ってクライアントアプリを実装してみた
OAuth 2.0の勉強のため、Google OAuth 2.0 API を使って、Node.jsでOAuth 2.0 のクライアントアプリをを実装してみました。Googleの認可サーバを使用し、トークンエンドポイントから`アクセストークン`と`IDトークン`を取得するところまで実装しています。
– GitHubリポジトリ
https://github.com/fcf-koga/google-oauth2client-nodeこの記事では、OAuth 2.0 の認可コードフローに対応したクライアントアプリを実装しながら学んだことを整理しておきます。
## シーケンス図
今回実装した、OAuth2.0のクライアントアプリのシーケンス図です。
基本的なOAuth 2.0の「認可コードフロー」になっています。“`mermaid
sequenceDiagram
Actor U as ユーザー
participant A as ブラウザ
participant B as [クライアントアプリ]
participant D as [Google]
Node.jsで普通のJavaScriptをimportする
ES ModulesでもCommonJS でもUMDでもない普通のJavaScriptをimportする方法を調べました。ブラウザで動作するスクリプトをテストしたいときにご活用ください
# 普通のJavaScript
“`js:script.js
class MyClass {
hello() {
return ‘こんにちは’
}
}
“`# 普通のJavaScriptを変更することなくimportする
## eval⭐⭐⭐⭐⭐
“`js:main.mjs
import { readFileSync } from ‘node:fs’eval(readFileSync(‘script.js’) + ‘;global.MyClass=MyClass’)
console.assert(new MyClass().hello() === ‘こんにちは’, ‘あいさつすること’)
“`普通のJavaScriptを変更しなくていいのでオススメ
## import⭐⭐⭐
“`js:main.mjs
import { readFile
node開発環境構築個人メモ
久々にエンジニア仕事をやることになったので、昨年末に買った Mac の環境構築個人メモ。
Node.js のコード管理ができるようになるところまで。# Homebrew インストール
公式のインストールガイドを参照。https://brew.sh/ja/
> macOSをお使いの場合は新しい.pkgインストーラーをお試し下さい。
と書いてあるのでそうする。
[https://github.com/Homebrew/brew/releases/latest](https://github.com/Homebrew/brew/releases/latest) にアクセスすると現時点での最新バージョンは 4.2.18 らしい。
ページの一番下にある `Homebrew-4.2.18.pkg` をダウンロードしてインストール。これだけだと PATH が通らなかったので、スクリプトを実行する従来型インストールで最後に案内されるコマンドを実行。
“`
echo ‘eval “$(/opt/homebrew/bin/brew shellenv)”‘ >> ~/.zprofile
Moment.jsからDay.jsに移行したらタイムゾーン変換が遅すぎて転げ回った話
# はじめに
タイトル通り、本記事は約1年前に[Moment.js](https://momentjs.com/)から[Day.js](https://day.js.org/)へ移行した際のお話です。
今更なことは多々ありますが、その時に色々と学んだことがあったので備忘録と自戒の意味を込めて残しておきます。
ライブラリを移行するのは頻度としてはさほど多くないのですが、だからこそ気を付けなければならないことがありますね。# 前提
そもそもの話として、Moment.jsについては2020年9月頃に**メンテナンスモード**[^1]へ移行しています。
ライブラリとしてはmomentオブジェクトがmutableであるとか、サイズが大きいのを削減出来ないとかの問題があったのですが構造的に解決が難しいとのこと。（[公式サイトより](https://momentjs.com/docs/#/-project-status/)）
そういうことでMoment.jsはもう他のライブラリ使いなよ～って言ってるのですが、そのライブラリの一つとしてDay.jsが挙げられています。実際に検索すると「Day.js
custom-resource-apigw-cw-roleがnode16.xランタイムでデプロイされる件
## いきさつ
ある日AWSからnode16のサポート終了のお知らせが届きました。> …
LambdaでのNode.js 16のサポートは2024年6月12日に終了します
…自分のLambdaを眺めていると、`xxx-custom-resource-apigw-cw-role`node16ランタイムがいました。
これはServerless frameworkでデプロイしたときに自動生成されるもので、API GatewayのCloudWatch Logsのロールを作成するために使用されるらしい。
slsのバージョンを上げればいけそうだな〜と思い現在のバージョンを確認すると`3.38.0`。これは記事執筆時点での最新バージョンです。えぇ…。調べてみると以下のやりとりが：
https://github.com/serverless/serverless/issues/12307ざっくり、こんな流れでした：
– サーバーレスフレームワークを介して作成されたcustom-resource-apigw-cw-role lambdaのランタイムを変更するにはどうすれば
JavaScriptで電力測定してみた
電力測定をする際に電流量測定のモジュールを使ってみようかと思ったところスイッチボットシリーズのスマートプラグで消費電力などを計測できることを知ったので試してみました。
obnizを使うことでJavaScriptで電力測定ができます。
## SwitchBotプラグミニ
スマートホーム的な何かをやれるコンセントです。
> [](https://amzn.to/3UpTzZC)
> https://amzn.to/3UpTzZC結構安い。スマホからオンオフできて便利。
## obnizのパーツライブラリにもある
obnizからこのプラグにアクセスできるとのことで、BLEを使って情報にアクセスできる模様です。
htt
Pocketの認証をワンライナーで実施する方法
# はじめに
Pocketとは，Firefoxを開発するMozillaが運営しているブックマーク保存サービスである．
IOSアプリケーションやブラウザの拡張機能でブックマークの登録ができる点．ブックマークにタグ付けする機能がある点が気に入っており常用している．そして，API機能で，機械的にブックマークの取得，追加及び変更を行える．本記事では，API機能を用いるのに必要なアクセストークンをワンライナーで取得できるNode.js,Denoツールをご紹介する．
*事前にコンシュマーキーは発行しておく必要があります!!*
# 事前準備 : コンシューマキーを取得
下記公式ドキュメントの Step 1をブラウザで実施する．
[Pocket Authentication API Documentation](https://getpocket.com/developer/docs/authentication)# Node.jsでアクセストークンを取得する方法
1. 下記コマンドをターミナルで実行する．
“`bash
npx pocket-auth
`
Reactでフォームを作るために、Formikをイチから理解する
## はじめに
4月から新しい現場で働くようになり、いままで触っていなかったいろんな技術に触れる機会が増えました。今回はその中のひとつであるFormikというライブラリについて、学習のために自分で調べてわかったことを記事にしました。
簡単なフォームでのFormikの使い方について3つのステップに分けてイチから理解できるようにまとめています。なお、はじめは環境構築からになるので、単純に使い方を知りたい方は「Formikとは」からご覧ください。
## 環境構築
### Reactアプリの生成
まずはReactの環境を作ります。
“`bash
npx create-react-app practice-formik-front
“`
`practice-formik-front`の部分は各自作成したいフォルダ名に置き換えてください。※`create-react-app`は公式サイトから記載が消えており、非推奨となっているようです。
React単体で使うのではなく、Next.js等のフレームワークと組み合わせて使うことが推奨されています。
今回はサクッと試すだけなのでこちらで
npm installするとSSL/TLSネットワークエラーが発生した場合の対処方法(ESET編)
# 記事を書こうと思った背景
## ある日突然、npm installするとう、うごかない…
Node.jsパッケージ管理ツール「npm」を使って開発していると、ある日突然、npm経由でソフトウェアをインストールできなくなってしまった…💦
今まで普通にダウンろーできなのに…かなり焦りました。
## 試みたこと
| 試みた内容 | 手法 | 結果|
|:———–|————:|————:|
| npmのバージョン更新 | npm install -g npm |×|
| Proxyの確認 | npm -g config list |×|
| Node.jsの再インストール|[Node.jsダウンロード公式サイト](https://nod
node.jsでalexaスキル その8
# 概要
node.jsでalexaスキル、やってみた。
練習問題やってみた。# 練習問題
Alexa-hostedで、暗算、インテントを追加せよ。# 方針
– attributesManagerを使う。LaunchRequest
「暗算ゲームをはじめます。それでは問題です。20足す40は？」AnswerIntent
「60だぜ」「すごい正解です。20足す40は60です。よくわかりましたね！」
「70だぜ」
「残念20足す40の答えは60です。」
# 写真
# アンサー、インテントを追加
– 対話モデル>インテント>インテントを追加>カスタムインテントを作成
AnswerIntent– 対話モデル>インテント>インテントを追加>サンプル発話
” {ans} だぜ”–
process.onと併せてExpressアプリケーションで発生しうるエラーを可能な限り包括的に処理する方法
## 概要
ExpressでWEBアプリを作成する際に、全体のエラーハンドリングに関する知識があいまいであったので、Node.jsのエラーハンドリングに関しても触れながら考えていきたい。
## ざっくり全部対応しているサンプルコード
以下は、Expressアプリケーションで発生しうるエラーを包括的に処理する方法の全体的なコード例です。:::note warn
メモリリークに関しては取得できませんでした、、
:::“`javascript
process.on(‘uncaughtException’, (err) => {
console.error(‘Uncaught Exception:’, err);
// エラーのログ記録やクリーンアップ処理を行う
process.exit(1);
});process.on(‘unhandledRejection’, (reason, promise) => {
console.error(‘Unhandled Rejection:’, reason);
// エラーのログ記録やクリーンアップ処理を行う
p
【node-cli】readline-syncで日本語が文字化けする
## 事象
“`node:interactive.js
const readlineSync = require(‘readline-sync’);
let inputString = readlineSync.question(`文字を入力…`);console.log(inputString)
“`Powershellで`node interactive.js`と実行すると、「inputString」はおろか「文字を入力…」の箇所まで文字化けしてしまう。
inputStringをコード上で日本語と一致比較しようにも、全く機能しなくなる。
## 解決
https://qiita.com/zawazawa5809/items/d6f84cf92a56f47229ed
CtrlPanel>地域>管理>システムロケールの変更>ベータ:ワールドワイド言語サポートでUnicode UTF-8を使用(U) にチェック
node.js – クラスにメンバ変数・メンバ関数を定義する ( インスタンス変数、インスタンス関数的な )
# バージョン
– node v20
# コード例
オブジェクト ( インスタンス ) 作成時に設定した boolean が返る メンバ変数、メンバ関数をそれぞれ一つずつ設定する
“`ts
class ExampleClass {
constructor(flag) {
this.flag = flag
}getFlag() {
return this.flag
}
}const exampleInstance1 = new ExampleClass(true)
console.log(exampleInstance1.flag) // true
console.log(exampleInstance1.getFlag()) // trueconst exampleInstance2 = new ExampleClass(false)
console.log(exampleInstance2.flag) // false
console.log(exampleInstance2.getFlag()) // false“`
#
node.jsでalexaスキル その7
# 概要
node.jsでalexaスキル、やってみた。
練習問題やってみた。# 練習問題
Alexa-hostedで、ズンドコ、インテントを追加せよ。# 方針
「ズンドコ」で、「ズン ドコ キヨシ」# ズンドコ、インテントを追加
– 対話モデル>インテント>インテントを追加>カスタムインテントを作成
ZundokoIntent– 対話モデル>インテント>インテントを追加>サンプル発話
” ズンドコ ”– 対話モデル>インテント>インテントを追加>保存>スキルをビルド
# コードを追加
“`
const ZundokoIntentHandler = {
canHandle(handlerInput) {
return handlerInput.requestEnvelope.request.type === ‘IntentRequest’ && handlerInput.requestEnvelope.request.intent.name === ‘ZundokoIntent’;
},
handle(handlerInput) {
let sp
node.jsでalexaスキル その6
# 概要
node.jsでalexaスキル、やってみた。
練習問題やってみた。# 練習問題
Alexa-hostedで、じゃんけん、インテントを追加せよ。# 方針
– 「じゃんけんグー」で、「私もグー、あいこだね」# じゃんけん、インテントを追加
– 対話モデル>インテント>インテントを追加>カスタムインテントを作成
GuuIntent– 対話モデル>インテント>インテントを追加>サンプル発話
” じゃんけんグー ”– 対話モデル>インテント>インテントを追加>保存>スキルをビルド
# コードを追加
“`
const GuuIntentHandler = {
canHandle(handlerInput) {
return handlerInput.requestEnvelope.request.type === ‘IntentRequest’ && handlerInput.requestEnvelope.request.intent.name === ‘GuuIntent’;
},
handle(handlerInput) {
const a
node.jsでalexaスキル その5
# 概要
node.jsでalexaスキル、やってみた。
練習問題やってみた。# 練習問題
Alexa-hostedで、九九、インテントを追加せよ。# 方針
– 「一の段」で、「いん いち が いち ・・・」# 九九、インテントを追加
– 対話モデル>インテント>インテントを追加>カスタムインテントを作成
NumIntent– 対話モデル>インテント>インテントを追加>サンプル発話
” {num} の段 ”– 対話モデル>インテント>インテントを追加>インテントスロット
num AMAZON.Number– 対話モデル>インテント>インテントを追加>保存>スキルをビルド
# コードを追加
“`
const NumIntentHandler = {
canHandle(handlerInput) {
return handlerInput.requestEnvelope.request.type === ‘IntentRequest’ && handlerInput.requestEnvelope.request.intent.name === ‘N
初めてのWebアプリケーションを作ってデプロイした話(React / Express)
# 目次
[1. どんな人にオススメの記事??](#1-どんな人にオススメの記事)
[2. 自己紹介](#2-自己紹介)
[3. まえがき](#3-まえがき)
[4. 作ったサイトについて](#4-作ったサイトについて)
[5. 使った言語やライブラリなど](#5-使った言語やライブラリなど)
[6. どうやって勉強したの?](#6-どうやって勉強したの)
[7. 作ったアプリの反省](#7-作ったアプリの反省)
[8. 今回得たこと](#8-今回得たこと)
[9. 今後の展望](#9-今後の展望)
[10. 終わりに](#10-終わりに)# 1. どんな人にオススメの記事??
この記事の読者対象は次のような方にオススメです
– Webアプリケーションを作ってみたいけど**何から学べばよいか分からない**– ある程度HTMLやCSSは触れるけど、**バックエンドの知識は全くない**
# 2. 自己紹介
– 電気通信大学の学部4年生で情報系の専門です
– プログラミング歴については大学に入ってから始めたので3年ほどになります
– C++で競技プログラミングをしていて現在
