- 1. TypeScriptでパスエイリアス”@types”を定義してはいけない理由
- 2. TypeScriptの実行環境をDockerで作る
- 3. Google Spreadsheet APIを用いたNode.jsでのスプレッドシート操作
- 4. 【初心者】Node.js(Express)でHTMLを読み込もうとしたらCSSを拒否された件について
- 5. PostGISからベクトルタイルを作成する
- 6. ユーザー新規登録処理を書いてみた(zod , node.js , mysql ) [備忘録]
- 7. New Relic の Synthetic Monitoring (Scripted API) を使って RSS の情報を収集
- 8. 何もしていないのに CI が壊れた
- 9. WSL2でAWSを使うための環境構築(Node/Python)
- 10. (Node.js) winstonモジュール、winston-daily-rotate-fileモジュールを理解する
- 11. Node.js ハンズオン 1 〜 3章まとめ
- 12. 10月なので言語のサ終を確認しましょう
- 13. Gemini API ― File Upload/画像認識
- 14. (Node.js) hh-mm-ssモジュールを理解する
- 15. (Node.js) prettysizeモジュールを理解する
- 16. (Node.js) better-queueモジュールを理解する
- 17. (Node.js) cli-spinnerモジュールを理解する
- 18. LINE Botで医薬品を瞬時に識別! 禁忌情報や出荷状況も一目でわかる新システムのプロトタイプ
- 19. DockerでNode.jsを使ってVue.js勉強環境を作って公式チュートリアルをやってみる
- 20. Gemini API ― チャット
TypeScriptでパスエイリアス”@types”を定義してはいけない理由
# 問題:”@types”を定義するとインポートエラーが発生する
型定義ファイルをまとめて格納するための、typesディレクトリがあったとします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3840466/b6b64af5-6f40-cb17-b8ed-9c6f38fe01b3.png)
呼び出すたびにパスを直接指定するのは、保守の観点から望ましくないため、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3840466/01d17e7a-2ba0-1e8d-79a9-42b85433be4a.png)
tsconfig.jsonへパスエイリアスを追加したとします。
“`tsx
import { Article } from ‘@types/article’;
“`インポートを行うと
“`
型宣言ファイルをインポートできません。’@types/article’
TypeScriptの実行環境をDockerで作る
## はじめに
Typescriptの勉強を始めたので、まずは実行環境を作りました。
nodejsの環境を作るだけですが、どなたかの参考になれば幸いです。
## やりたいこと
Typescriptの実行環境を作りたい
## 方法
Dockerfileでコンテナを起動## Dockerfileの中身
NODE_VERでバージョン指定できます“`
ARG NODE_VER=20.10.0
FROM node:${NODE_VER}WORKDIR /usr/src/app
# コンテナ内で必要パッケージを追加
RUN npm install -g typescript ts-node ts-node-dev“`
## docker-compose.ymlの中身
“`
ARG NODE_VER=20.10.0
FROM node:${NODE_VER}WORKDIR /usr/src/app
# コンテナ内で必要パッケージを追加
RUN npm install -g typescript ts-node ts-node-dev
“`
Google Spreadsheet APIを用いたNode.jsでのスプレッドシート操作
## 概要
この記事では、Google Spreadsheet APIを使ってNode.jsアプリケーションからスプレッドシートを操作する方法を解説します。具体的には、Googleのサービスアカウントを使用してスプレッドシートにデータを **書き込み**、特定のセルの値を **読み取る** という操作を行います。さらに、CLIからキーワードを入力し、スプレッドシート内のデータと比較・検索する処理を実装します。
## 期待した結果
A列2行目以降にハロースプレッドシートと書き込まれる
B列2行目以降に書かれている任意のテキストを検索して表示される| Message | searchKeyword |
|:-:|:-:|
| ハロースプレッドシート |任意のテキスト |
| | |## 依存パッケージのインストール
## 事前準備
### 1. Google Cloudでサービスアカウントの作成
1. Google Cloud Console にログインし、プロジェクトを作成します。
2. **APIとサービス > 認証情報** から「サービスアカウント」を
【初心者】Node.js(Express)でHTMLを読み込もうとしたらCSSを拒否された件について
こんにちは。
最近になってNode.jsの勉強を始めたのですが、開幕早々躓いた点がありましたので備忘録として残しておきます。
ちなみに私はNode.jsのことを少し前までJavaScriptのライブラリの一種みたいに考えていた人間です……。
(だって……「~.js」みたいな表記してるから!)
もし何か間違っている箇所などありましたらご教授頂けますとありがたいです。▼今回導入や実行に辺り参考にさせて頂いた記事です。ありがとうございます。
https://qiita.com/ryome/items/16659012ed8aa0aa1fac
***
さて、Node.js、Expressを導入してローカルサーバーを立ち上げる所までは順調に進んでおりました。
(Hello World!を表示させる定番のアレですね)
そして自分が制作していたWebページを表示させてみようと思い、
先程の記事を参考にHTMLを読み込ませる記述を書いてみました。
“`Node.js
// 静的ファイルの提供とキャッシュの有効化
app.use(express.static(‘/’, { maxAge: 8
PostGISからベクトルタイルを作成する
# はじめに
[こちらの記事](https://qiita.com/k96mz/items/fdb410af634d91ee44d2)でPostGISデータベースを作成しました。今回は、作成したPostGISデータベースからデータを抽出し、ベクトルタイルを作成するところまでをやってみたいと思います。
[こちらの記事](https://qiita.com/T-ubu/items/146a86558281abac8b2e)を参考にさせていただきながら、本記事を記載します。node.jsのコードの書き方で推奨される記載方法に変化があるため、参考記事の書き方と、それを改良したコードの両方を書いていきたいと思います。
使用したレポジトリは以下です。
https://github.com/k96mz/20240917Postgis2vector## 環境
macOS Sequoia 15.0(チップ:Apple M3)
zsh 5.9
PostgreSQL 16.4
PostGIS 3.4.2
node.js v20.15.1
npm 10.7.0# レポジトリの準備
レポジトリを作成
ユーザー新規登録処理を書いてみた(zod , node.js , mysql ) [備忘録]
## zod でのvalidation check
[前提]
next.jsでツイッターlikeなmusicpostアプリケーションを作成している。
今回tsでログインフォーム、新規登録フォームの処理を書いている。
色々苦労したのでまとめる。
tsのライブラリーであるzod , dbはmysqlを用いてユーザーの入力のチェック、新規登録を行う。mysqlの操作を少しでも覚えたいのでORMなどは使わない。
先に、完成版
以下からコードについて詳しくみていく。“`typescript
import { NextRequest } from “next/server”;
import { NextResponse } from “next/server”;
import { formSchema } from ‘../../../validations/schema’;
import { ZodError } from “zod”;
import bcrypt from ‘bcrypt’;
import { db } from ‘../../../lib/db’;e
New Relic の Synthetic Monitoring (Scripted API) を使って RSS の情報を収集
New Relic の Synthetic Monitoring の一つであるScripted APIを使用して RSS で公開されている情報を New Relic に収集する方法を紹介します。利用している SaaS の障害情報を New Relic にまとめておくことができるので増え続ける SaaS の業務アプリの状態をまとめて管理するといった活用方法が考えられます。
# 今回のポイント
この記事で紹介しているポイントは、次の2つです。
1. **Scripted API の使い方がわかる**
スクリプトの作成方法や参考になるサンプルの情報を紹介します。
2. **実行したスクリプトの結果を New Relic に保存する方法がわかる**
スクリプトの実行結果を New Relic のデータベースに保存して、NRQL でそのデータを確認する方法を紹介します。
:::note info
最新のアップデートの詳細はこちら
[New Relic アップデート一覧
](https://newrelic.com/jp/blog/nerdlog/new-relic-update “Ne
何もしていないのに CI が壊れた
ある日、Dependabot が作成したライブラリアップデートの PR がコケていました。
コケていたのは VRT (Visual Regression Test) 、そしてその時私は別のプロジェクトを触っていました。「まあライブラリのアップデートで見た目が崩れる事もあるよね、見た目となるとサクッと修正出来ない可能性が高いし一旦置いておくか。」
としばらく放置していました。
数か月後
CI がコケていたプロジェクトを触る機会がやってきました。「そういえば、CI コケていたんだったなー、原因はなんだろな・・・ん??見た目が変わったことでコケているわけではないぞ、、、しかもローカルだと通るんだけど!??」
何もしていないのに GitHub Actions の CI が壊れた!
—
この記事で扱っている CI がコケた理由は私が扱っている環境等に依存するものでおそらくあまり遭遇しない物だと思います・・・つまり完全に誰得記事となっております。
なのでこの記事では問題の調査方法に焦点を当てて書いてみようと思います。
原因と解決方法だけ知りたい人(そんな人いない気がするけど)
WSL2でAWSを使うための環境構築(Node/Python)
## 目次
– VSCodeのインストール
– WSL2(Ubuntu)の構築
– node.js環境構築
– python環境構築
– その他開発環境構築
– aws関係## VSCodeのインストール
– Windows環境で行う
– インストール方法は省略
– WSLでの利用に備えて最低限以下のExtensionを入れる
[Remote Development](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack)## WSL2(Ubuntu)の構築
### 参考記事
– 下記の記事が大変分かりやすいためそちらを参照
[WSL2 のインストールとアンインストール](https://qiita.com/zakoken/items/61141df6aeae9e3f8e36)– 過去にUbuntu環境を作っていたがそのパスワードがわからなくなった場合
[wsl でパスワードを忘れてしまった際の対処](https://qiita.
(Node.js) winstonモジュール、winston-daily-rotate-fileモジュールを理解する
# はじめに
node.jsのコードの中でwinstonモジュール、winston-daily-rotate-fileモジュールを使用する機会があったので、どのようなモジュールであるのか簡単にまとめたいと思います。# winstonモジュールとは
Node.jsでよく使われるロギングライブラリで、アプリケーション内のログを効率的かつ柔軟に管理するためのツールです。アプリケーションの状態を追跡したり、エラーメッセージを記録したり、パフォーマンスをモニタリングするために使用されます。## winston の主な特徴
– 複数のトランスポートをサポート:ログをファイル、コンソール、HTTP、あるいはリモートサーバーなど様々な場所に出力できます。
– ログレベルの設定:ログの重要度に応じて、出力するメッセージをフィルタリングできます(例:info, warn, error)。
– カスタマイズ可能なフォーマット:ログの出力フォーマットを自由に設定でき、タイムスタンプやカラーリングなどのカスタマイズも可能です。
– 非同期での動作:ロギングが非同期で行われるため、パフォーマンスに負荷をか
Node.js ハンズオン 1 〜 3章まとめ
随分前に読んだ本ですが、再入門しようと思って読み直しています。
その内容を投稿しようと思っています。
自分の理解が浅いところだけまとめていますので、網羅的ではないですが備忘録として記事にしました!# 第1章 イントロダクション
## クラス継承と `prototype` について
JavaScriptには、クラス継承を実現する仕組みとして `prototype` があります。各クラスには class.prototype.method という形でメソッドを追加することができ、オブジェクトがそのクラスのインスタンスかどうかを instanceof 演算子で検証できます。また、`prototype` を使用することで、既存のクラスにメソッドやプロパティを動的に追加することが可能です。これは、後から機能を拡張したり、柔軟にクラスの振る舞いを変えたい場合に非常に有用です。
– `prototype` チェーン
prototype チェーンを利用すると、あるオブジェクトが継承している元のクラスの prototype に遡ることができます。例えば、以下のように prototype チェーン
10月なので言語のサ終を確認しましょう
そろそろ10月.
iPhoneが出るような季節には,言語のバージョンも確認するのをルーティンにしたいですね….
サ終している環境でリリースや構築して面倒なことにならないために….よく使う3種の言語について個人的にまとめておきます.
## Python
2024年10月のイベント
* 3.8 系が end-of-life(サポート終了)
* 3.13 系が prerelease3.12 は9月末まで bugfix だったので,3.11 あたりをメインの開発環境に据えたいところ….
https://devguide.python.org/versions/
|version|status|firstRelease|end-of-life|
|:–|:–|:–|:–|
|3.13|prerelease|**2024/10/01**|2029/10|
|3.12|bugfix|2023/10/02|2028/10|
|3.11|security|2022/10/24|2027/10|
|3.10|security|2021/10/04|2026/10|
|3.9|se
Gemini API ― File Upload/画像認識
# 概要
(日記)前回https://qiita.com/shokkaa/items/a74bb2f9a3e843430530
の続き。Geminiに画像の説明などを求める。
# 環境
– Ubuntu 24.04
– Node.js v22.4.1# Geminiに画像ファイルをアップロード
画像などのファイルをGeminiにアップロードする。
“`js:src/fileUpload.ts
import { FileMetadata, GoogleAIFileManager } from “@google/generative-ai/server”
async function main() {
const file = process.argv[2]
const fileManager = new GoogleAIFileManager(process.env.GOOGLE_API_KEY ?? “”)
const metaData: FileMetadata = { mimeType: “image/jpeg”, displayName: `
(Node.js) hh-mm-ssモジュールを理解する
# はじめに
node.jsのコードの中で hh-mm-ssモジュールを使用する機会があったので、どのようなモジュールであるのか簡単にまとめたいと思います。# hh-mm-ssモジュールとは
時間の表現を管理するためのシンプルなライブラリです。
toMs, toS は、時間をそれぞれミリ秒、秒に変換する関数です。
fromMs, fromS は、ミリ秒や秒から「時間:分:秒」形式に変換します。# サンプルコード
“`javascript:hh-mm-ss.js
const TimeFormat = require(“hh-mm-ss”);console.log(TimeFormat.toMs(“00:01”));
console.log(TimeFormat.toS(“02:00”));console.log(TimeFormat.fromMs(3000));
console.log(TimeFormat.fromS(180));
console.log(TimeFormat.fromS(1800));
console.log(TimeFormat.fromS(180
(Node.js) prettysizeモジュールを理解する
# はじめに
node.jsのコードの中でprettysizeモジュールを使用する機会があったので、どのようなモジュールであるのか簡単にまとめたいと思います。# prettysizeモジュールとは
データのバイト数を人間が読みやすい形式に変換するための Node.js ライブラリです。ファイルサイズやデータの大きさを表示する際に、より直感的な形式(例えば KB、MB、GB など)で表現することができます。# サンプルコード
“`javascript:prettysize.js
const prettysize = require(“prettysize”);const result1 = prettysize(1024);
const result2 = prettysize(1024 * 1024);
const result3 = prettysize(123456789);
const result4 = prettysize(10000000000);console.log(result1);
console.log(result2);
console.lo
(Node.js) better-queueモジュールを理解する
# はじめに
node.jsのコードの中でbetter-queueモジュールを使用する機会があったので、どのようなモジュールであるのか簡単にまとめたいと思います。# better-queueモジュールとは
Node.js環境で使用されるジョブ(タスク)キューを提供するためのモジュールです。主に、複数の非同期タスクを効率的に処理し、同時に実行されるタスク数を制御したい場合に便利です。シンプルかつ柔軟な設計で、並列処理、再試行、失敗時の処理、タスクの永続化などの機能をサポートします。# サンプルコード
“`javascript:better-queue.js
const Queue = require(“better-queue”);// キューの処理
const queue = new Queue((task, cb) => {
console.log(`Processing task: ${task.name}`);// 非同期処理
setTimeout(() => {
if (task.name === “Task 2”) {
con
(Node.js) cli-spinnerモジュールを理解する
# はじめに
node.jsのコードの中でcli-spinnerモジュールを使用する機会があったので、どのようなモジュールであるのか簡単にまとめたいと思います。# cli-spinnerとは
Node.js環境で使用されるライブラリで、コマンドラインアプリケーション上でスピナー(アニメーションのようなもの)を表示するために使用されます。スピナーがあることで、何も実行されていないわけではなく、処理中なんだなということが一目で分かり便利です。# サンプルコード
“`javascript:cli-spinner.js
const Spinner = require(“cli-spinner”).Spinner;
Spinner.setDefaultSpinnerString(1);
// Spinner.setDefaultSpinnerString(“|/-\\”);const productionSpinner = new Spinner();
productionSpinner.setSpinnerTitle(“Test Spinner..”);
productionSp
LINE Botで医薬品を瞬時に識別! 禁忌情報や出荷状況も一目でわかる新システムのプロトタイプ
皆さんこんにちは!おもぷーです。
今回の記事は、LINE Botに医薬品の写真を送信すると、自動で薬の名前や詳細情報を返信してくれて、さらに**禁忌情報や限定出荷の有無**なども一緒に確認できるという、痒いところに手が届くプロトタイプになってます。
**Teachable Machine**、**LINE Bot**、**Google Apps Script (GAS)** を連携させたプロトタイプになります。
## 実際の動作動画
https://x.com/331824miyamoto/status/1838236234248065079## なぜこのプロトタイプを作ったのか
現在の薬局業界では**医薬品供給不足**が大きな課題となっています。特に、入荷できない薬が増えており、どの薬が通常通り入荷でき、どの薬が入荷困難なのかを常に確認しなければなりません。**この確認作業がとにかくめんどくさい**。業務効率の低下や患者対応の遅れにもつながっています。**調剤事務(受付)の負担も爆増しています**
https://www
DockerでNode.jsを使ってVue.js勉強環境を作って公式チュートリアルをやってみる
# はじめに
普段はバックエンドでPHPを使って仕事をしています。CakePHP歴1年、Laravel歴1ヶ月ほど。仕事ではほんの少しのJavaScript、JQueryをメンテナンスする、というほどのJavaScript歴です。会社のとあるプロジェクトのバックエンド側で、VueでやるのかReactでやるのか、派閥が軽く分かれて争いが始まりそう。私はReactもVueも全くわからないですが、それぞれがどんなものか触っていこうと思います。
最小限のDockerfile、docker-compose.yamlでNode.jsを使える環境を作り、Vue.jsを公式チュートリアルに沿って学習するまでの流れです。
MacでVSCodeを使っています。
# Vue.jsを学ぶ環境の選択
https://zenn.dev/comm_vue_nuxt/articles/ways-of-vuejs-setup-app
こちらの記事にもいろいろな環境が紹介されていますが、とにかくシンプルにいきたい。調べた結果、DockerでNode.jsを使うのが一番簡単にできる気がしたので、あまり他のやり
Gemini API ― チャット
# 概要
(日記)前回https://qiita.com/shokkaa/items/0e257a5e9c069402c80c
の続き。Node.jsで試す。
# 環境
– Ubuntu 24.04
– Node.js v22.4.1# Project準備
https://qiita.com/shokkaa/items/6f83b3a107006ccc598b# generateContent() ―― 一問一答
“`ts:src/generateContent.ts
import { GoogleGenerativeAI } from “@google/generative-ai”async function main() {
const key = process.env.GOOGLE_API_KEY ?? “”
const genAI = new GoogleGenerativeAI(key)
const model = genAI.getGenerativeModel({ model: “gemini-1.5-flash” })