- 1. 【Dockerfile】Node.js / TypeScript のコンテナを作成
- 2. 【Node.js/TypeScript】比較して理解する ts-node
- 3. WSL2内にNode.jsが動作するDocker環境を用意した(Docker compose)
- 4. 何となく使っている”npm”ってなぁに？
- 5. くわしく解説！VS CodeでのTypeScripとReact開発のデバッグ設定方法
- 6. pnpm + Astroの構成で、GitHub Pagesにデプロイする自前のGitHub Actionsを設定する
- 7. Lambdaで使ってるNode.jsを18.xにアップデートした話 a.k.a 技術的負債の解消
- 8. ClaudeやChatGPTにリポジトリを丸ごと読み込ませるコマンドを作りました！
- 9. PM2でNuxt3をデプロイする
- 10. Dropbox APIを使ってファイル共有
- 11. WSL2内にNode.jsが動作するDocker環境を用意した
- 12. TypeScripファイルをjsに変換してブラウザへ返すexpressミドルウェア
- 13. EACCES: permission deniedの解決方法
- 14. Express.jsとPostgreSQLを使った基本的なサーバー構築
- 15. Mongooseの基本を簡潔に
- 16. Blueskyで指定のリストに登録されているユーザーの投稿画像を一括ダウンロードする
- 17. フロントエンド開発ツールのインストールと設定 (Mac)
- 18. [Node.js] JSON ⇔ XML の作成方法
- 19. viteで作る、React環境構築 with fnm
- 20. nodejsでTwitter APIを使って画像付きでツイートするメモ
【Dockerfile】Node.js / TypeScript のコンテナを作成
# はじめに
この記事では、Dockerfile からビルドしたイメージを元に Node.js / TypeScript のコンテナを作成する手順について記載します。以下の記事の Node.js / TypeScript バージョンです。
https://qiita.com/Yasushi-Mo/items/0c6ed9be966f764ff7ca
# 開発環境
開発環境は以下の通りです。– Windows11
– Docker Engine 26.1.1
– Node.js 20.15.1
– npm 10.8.2
– @types/node 20.14.10
– ts-node 10.9.2
– TypeScript 5.5.3# Node.js / TypeScript アプリケーションの作成
まずは、Node.js / TypeScript アプリケーションを作成します。## `package.json` の作成
`package.json` を作成します。https://docs.npmjs.com/cli/v10/commands/npm-init
【Node.js/TypeScript】比較して理解する ts-node
# はじめに
この記事では、TypeScript を JavaScript にコンパイルして実行する方法と ts-node を使って TypeScript を直接実行する方法について記載します。https://typestrong.org/ts-node/
# 開発環境
開発環境は以下の通りです。– Windows11
– Node.js
– npm 10.8.2
– @types/node 20.14.10
– ts-node 10.9.2
– TypeScript 5.5.3# JavaScript にコンパイルして実行する方法
まずは JavaScript にコンパイルして実行する方法を記載します。## 1. package.json の作成
`package.json` を作成します。https://docs.npmjs.com/cli/v10/commands/npm-init
コマンド実行中の質問をスキップするため、`-y` をつけて実行します。
“`powershell
npm init -y
“``package.json` が作成され
WSL2内にNode.jsが動作するDocker環境を用意した(Docker compose)
# これはなに？
前回の続きになります
https://qiita.com/acronhub/items/49523a7edf79f18ae11d
Docker composeを利用して、手軽に作業フォルダーを上書きできるようにします
– イメージ作成時にローカルフォルダーをコピーしているため、最新にするためにはイメージの再作成が必要になります
– Dockerfileだと、実行時のコマンドにオプションを付けることで作業フォルダーを上書きすることができます# 環境
– Windows11
– WSL2
– Ubuntu 20.04
– Docker Desktop
– VS Code
– Remote WSL# 準備
必要なファイルを作成します
## .gitignore
管理外のファイル・フォルダを設定します
“`docker
node_modules
“`## docker-compose.yml
以下に、部分ごとに説明します“`yaml
services:
app:
build: .
何となく使っている”npm”ってなぁに？
# はじめに
多くの開発者が日常的に使用しているnpmですが、その仕組みや重要性を深く理解している人は意外と少ないのではないでしょうか。
私もそうです。この記事では、調べて分かったnpmについてのいろいろを説明していきます。
# npmって？
npmはNode Package Managerの略称で、JavaScriptのパッケージ管理ツールです。
Node.jsのデフォルトパッケージマネージャーとして広く使用されています。パッケージのインストールと管理、バージョン管理、そして依存関係の解決という割と重要めな役割を担っています。
# npmの歴史
npmは2010年にIsaac Z. Schlueterによって開発されました。Node.jsの普及と共に急速に成長し、現在では世界最大のソフトウェアレジストリとなっています。
150万以上のパッケージが登録されており、その数は日々増加しています。2020年にはMicrosoftがnpmを買収し、将来的にはGitHubとnpmの統合が進むと言われています。
# npmの基本的なところ
npmの基本機能は主に三つありま
くわしく解説！VS CodeでのTypeScripとReact開発のデバッグ設定方法
## はじめに
VS Code上でデバッグを行う際、諸々の設定に手間取ったので、TypeScriptとReactで開発する場合のデバッグの設定について解説します。:::note warn
デバッグ自体を実行する方法（ブレークポイントの設定や、ステップ実行など）については触れていません。
あくまでもデバッグを有効化するための設定についての解説となります。
:::## 事前準備
JavaScript DebuggerというVS Codeの拡張機能が必要ですが、デフォルトでインストールされているはずなので、特に新たにインストールする必要はありません。:::note warn
古いVS Codeを使用している場合には、別途インストールが必要です。
:::## TypeScriptとReactでのデバッグ
### 設定ファイル生成
デバッグを行うためには「launch.json」というファイルに設定を記載する必要があります。以下のようにVS Codeの「実行とデバッグ」メニューから「実行とデバッグ」ボタンを押下します。
具体的な内容を提案すると、それに従って良い感じのコードを生成してくれます。Claude だと Artifacts 機能で複数のファイルが出力できるため、
PM2でNuxt3をデプロイする
## ローカルの設定
pm2をグローバルにインストールします。https://pm2.keymetrics.io/docs/usage/quick-start/
“`
yarn global add pm2
“`ecosystem.config.jsという設定ファイルを作る。
これは、本番サーバーの設定情報を書くので、
基本、.gitignoreするべきかと思ったが、
そうすると、後のコマンドでecosystem.config.jsファイルがないって
怒られるので、環境変数化したい“`:ecosystem.config.js
module.exports = {
apps : [
{
name: ‘my-nuxt-app’,
exec_mode: ‘cluster’,
instances: ‘max’, // またはアプリケーションを実行したいインスタンスの数
script: ‘./src/.output/server/index.mjs’,
args: ‘start’
}
],
Dropbox APIを使ってファイル共有
Dropbox APIを使って、Dropboxにファイルをアップロードし、他の人とファイルを共有します。Dropboxを一時的な格納庫として利用します。
Dropbox APIで以下のことを実現します。* ファイルをアップロードして、自身の複数の端末から共有できます。
* アップロードしたファイルを共有して、複数の人がダウンロードできます。
* 他の人からファイルのアップロードを受領します。もろもろのソースコードはGithubに上げてあります。
https://github.com/poruruba/ClippingService
構成要素
* プライベートサーバ ： ブラウザで動作するクライアントとDropboxを仲介するためのサーバです。クライアント向けのWebページの提供とWebAPIの処理を担っています。また、DropboxからのWebhook呼び出しも受け取ります。
* Dropboxサーバ ： 共有するファイルを管理してもらうサーバです。
* 管理クライアント（ブラウザ）： 共有するファイルを管理するためのクライアントです。PWAです。
* 一般クライアント（ブ
WSL2内にNode.jsが動作するDocker環境を用意した
# これはなに？
WSL内に、Nodeが動作するDocker環境を作成してみました
# 環境
– Windows11
– WSL2
– Ubuntu 20.04
– Docker Desktop
– VS Code
– Remote WSL# 準備
必要なファイルを作成します
## package.json
ファイルがないので、以下のコマンドで作成しました
“`console
$ yarn init
“`作成されたファイルを少し修正して以下のようにしました
“`json
{
“name”: “test”,
“version”: “1.0.0”,
“description”: “”,
“main”: “main.js”,
“scripts”: {
TypeScripファイルをjsに変換してブラウザへ返すexpressミドルウェア
## はじめに
htmlでは、通常通りにjsを読み込んでいますが、
“`html
“`
実はサーバー側はTypeScriptのファイルしかおいていないので、Webサーバー(Express)が動的にjsにトランスパイルして返す、というミドルウェアを作りました
利用方法：静的ファイルを返すexpress.static()の直前に読み込むと
* js/tsファイルのリクエストを受け取り、tsファイルを読み込む
* ファイルをトランスパイルしてブラウザに返す
“`js
app.us
EACCES: permission deniedの解決方法
# 背景と問題
Reactの新しいプロジェクトを作り、`npm start`で実行したら以下のエラーメッセージが表示された。“`bash:bash
[eslint] EACCES: permission denied, mkdir ‘/Users/username/Documents/dev/react-teset-app/node_modules/.cache’
“`# 原因
上記のエラーメッセージは**ディレクトリの作成権限**がないため発生している。
（nodeの再インストールも試してみたがエラーはそのままだった。）# 解決
ターミナルで以下のコマンドを実行することで解決できた。
下記のコマンドはプロジェクトディレクトリに適切な権限を設定している。:::note warn
ディレクトリのパスは各自で適切に変更して実行してください。
:::“`bash:bash
sudo chown -R $USER:$GROUP /Users/username/Documents/dev/react-teset-app
“`### コマンドの解説
– `su
Express.jsとPostgreSQLを使った基本的なサーバー構築
# Express.jsとPostgreSQLを使った基本的なサーバー構築
この記事では、Node.jsのフレームワークであるExpress.jsを使用して基本的なサーバーを構築し、PostgreSQLデータベースと連携する方法を紹介します。静的ファイルの提供、データの取得、データの送信方法について解説します。必要なnpmパッケージ
“`terminal
npm install express pg
“`
使用するnpmパッケージ
express: Node.js用のウェブフレームワークで、サーバーの構築に使用します。
pg: Node.js用のPostgreSQLクライアントで、データベース接続に使用します。PostgreSQLデータベースに接続するための設定を行います。
“`javascript
const { Pool } = require(“pg”);const pool = new Pool({
user: “your_db_user”,
host: “localhost”,
database: “your_db_name”,
passw
Mongooseの基本を簡潔に
# Mongooseを使ってみよう：MongoDBとのデータ操作を簡単に！
Mongooseは、Node.js環境でMongoDBを扱うためのオブジェクトデータモデリング（ODM）ライブラリです。Mongooseを使用することで、スキーマを定義してデータをバリデート、クエリ、保存、削除することが簡単にできます。本記事では、Mongooseの基本的な使い方を紹介します。
【公式ドキュメント】
https://mongoosejs.com/docs/api/mongoose.html
## インストール
まず、Mongooseをプロジェクトにインストールする必要があります。以下のコマンドを使用してインストールします。“`bash
npm install mongoose
“`
基本的な使い方
### 1. MongoDBへの接続
Mongooseを使用する前に、MongoDBデータベースに接続する必要があります。以下は、Mongooseを使用してMongoDBに接続する基本的なコードです。“`javascript
const mongoose = require(‘m
Blueskyで指定のリストに登録されているユーザーの投稿画像を一括ダウンロードする
（怪しい用途ではありますが、）Blueskyで指定のリストに登録されているユーザーの投稿画像を一括ダウンロードし、ローカルPCに保存するnode.jsスクリプトを書いてみました。
## ざっくり使い方
1. Blueskyのアプリパスワードを発行しておく
– [こちらの記事](https://docs.tokimeki.blue/ja/apppassword)が参考になります
1. node.js (v20.15.0)を導入する
– nvm（winではvolta）とか使いましょう
1. 適当にディレクトリを切って、その中に以下の3ファイルを作成する
– `package.json`
– `tsconfig.json`
– `src/index.ts`
1. 上記3ファイルに、当ページ後述のソースコードをまんまコピペする
1. ターミナルを起動し、上記で切ったディレクトリに移動する
– winでの動確未検証です
1. `% npm install`を実行する
1. `src/index.ts`内の定数を書き換える
– あなたのアカ
フロントエンド開発ツールのインストールと設定 (Mac)
## はじめに
このチュートリアルでは、WindowsとMacの両方のプラットフォームでフロントエンド開発ツールをインストールし、設定する手順をステップバイステップでご紹介します。一般的に使用される開発ツールの適切なインストールと設定方法を探求し、フロントエンド開発の第一歩を簡単に踏み出せるようにします。初心者から経験豊富な開発者まで、このチュートリアルは開発ツールのインストールプロセス中のさまざまな問題を解決し、コードを書くことに集中できるようにサポートします。さあ、始めましょう！## 1. VSCode (無料で使いやすいコードエディタ)
ダウンロードリンク: [https://code.visualstudio.com/Download](https://code.visualstudio.com/Download)
公式サイトでは
[Node.js] JSON ⇔ XML の作成方法
# はじめに
javascript を使用して XML ファイル群を作成する必要があり、知見が溜まってきたのでこちらにまとめておきます。
# 方法
– [**xml2js**](https://www.npmjs.com/package/xml2js) というライブラリを使用しました。
XML ⇔ JSON の変換が可能で、扱いやすかったです。### JSON から XML への変換例
#### JSON オブジェクト
“`javascript
const jsonObj = {
library: {
$: { name: ‘My Library’, location: ‘City’ },
books: {
book: [
{ id: 1, title: ‘Book 1’, author: ‘Author A’ },
{ id: 2, title: ‘Book 2’, author: ‘Author B’ }
]
}
}
};
“`#### 変換処理
“`javascrip
viteで作る、React環境構築 with fnm
# Node.js環境構築とReact
## 前提
OSはWindow11を想定しています。
おそらく、Windows10でも同様の手順で構築可能かと思います。
記事を読んで、できた方はご一報くださると幸いです。諸事情でNode.jsの古いバージョンをインストールしており、最新のバージョンを使えない場合でも問題ありません。
FNMという、Rust製のNode.jsのバージョン管理ツールを使います。
シンプルな操作感で、複数のNode.jsのバージョンを共存させることができます。
Windowsの場合、Powershellの使用が必須です。この記事で解説している手順には、一部管理者権限が必要な場合があります。
### 使う技術
1. Node.js
2. FNM
3. vite
4. React
5. (TypeScript)## 概要
1. 会社の新プロジェクトでReactとTypeScriptを使いたいけど、環境構築はどうすればいいかわからない…
2. 会社で使っているパソコンのNode.jsのバージョンが古くて動かない…このような背景、前提があり
nodejsでTwitter APIを使って画像付きでツイートするメモ
## はじめに
nodejsで画像付きのツイートを調べてみる。
色々サイトを参考にするが、意外と動かない。
Twitter APIの1.1と2.0が混在していて何がなんだか。aiに聞いてもぐふわふわしちゃう。要するに画像のアップロードは1.1じゃないとできない。
だけど、ツイート1.1ではできず、2.0じゃないとできない。1.1でアップロード。アップロードが完了するとmedia idを発行してくれる。
そのmedia idをつけて2.0でアップロードという方法らしいです。“` twitterManager.ts
import {TwitterApi, TwitterApiReadWrite} from ‘twitter-api-v2’;
export class TwitterManager {
constructor() {
}
public tweet = async (message:string, filePath:string):Promise=>
{
const client:TwitterApi
