- 1. eslintをv7からv8にアップデート
- 2. Docker Imageどれを選んだらいいのかわからない
- 3. Node.js の環境構築をする際によく出てくるマネージャーたち
- 4. npmってなんなのさ
- 5. 【Node.js】ts-nodeの実行で躓いた話
- 6. VSCodeを使ったGoogle Apps Script開発の環境構築
- 7. 仮想通貨APIで発注してみる
- 8. 仮想通貨APIをお触りしてみる
- 9. Access-Control-Allow-Credentials: trueにしないとsessionをCookieに保存できない
- 10. Salesforceしか開発経験のない自分が、Node.js(+LWR)でWebアプリを開発してつまずいたところ
- 11. ブックマーク集(LIFF, Messaging API, Next.js, Node.js, xserver, nginxなど)
- 12. LINE Bot ハンズオン
- 13. LINE Notify ハンズオン
- 14. Node16 + Nuxt2で@nuxtjs/i18nをインストールするとエラーが発生した
- 15. TurborepoのESLint及びPrettierをBiomeに移行した手順
- 16. Mac Node.js 1万件の情報が入ったcsvを出力するスクリプトを作ってみる
- 17. #プログラミング #Javascript #nodejs #chrome ビット演算・算術演算、領域管理の速度差
- 18. npm install時のエラー「npm WARN EBADENGINE Unsupported engine…」への対応
- 19. GPT-4oで簡単なWebアプリを作成
- 20. NodejsでreCAPTCHA実装
eslintをv7からv8にアップデート
## やったこと
“`diff:diff
– “@typescript-eslint/eslint-plugin”: “^6.21.0”,
– “@typescript-eslint/parser”: “^6.21.0”,
– “eslint”: “^7.29.0”,
– “eslint-plugin-jest”: “^27.2.3”,
+ “@typescript-eslint/eslint-plugin”: “^7.9.0”,
+ “@typescript-eslint/parser”: “^7.9.0”,
+ “eslint”: “^8.57.0”,
+ “eslint-plugin-jest”: “^28.5.0”,
“`– nodeを18.18.0以上に変更
– @typescript-eslint/eslint-pluginと@typescript-eslint/parserをtypescript-eslintに変更## @typescript-eslint v7の要件
– node v18.18.0以上
– ESLint の最小バージョンが v8.56.
Docker Imageどれを選んだらいいのかわからない
## 困ったこと
いざアップデートしようとしてtagsを見ていてもいっぱいあり過ぎてわからない…
slim?buster?alpine?何が違うんだ…
となったので調べてみましたnodeを導入する前提として進めていきますが、node以外でも参考になるはず
https://hub.docker.com/_/node/tags
よければこちらもみてください↓
https://qiita.com/mayobimu/items/c1eb88882dec2fa132ed
## node
`22.x`は2024-10-29からLTSになるのでそれまでは依存関係次第ですが`20.x`を選択しておけばOK
https://nodejs.org/en/about/previous-releases
https://github.com/nodejs/release?tab=readme-ov-file#release-schedule
## ベースイメージ
v20.10で絞り込んでみるとこれだけあリました“`
20.10.0
20.10-slim
20.10
Node.js の環境構築をする際によく出てくるマネージャーたち
会社は Windows プライベートでは Mac な環境。
Node.js 周りの環境構築でパッケージマネージャーやらバージョンマネージャーやら混乱してきたので整理。# Mac
## ターミナル
デフォルトのターミナルか好みで iTerm2 とか## パッケージマネージャー
### Homebrew
[https://brew.sh/ja/](https://brew.sh/ja/)
macOS または Linux 用パッケージマネージャーMac の場合はとりあえずこれでいいんじゃないかな
## Node.js バージョンマネージャー
Node.js の バージョンを管理するツール
いくつかピックアップ### nodebrew
[https://github.com/hokaccha/nodebrew](https://github.com/hokaccha/nodebrew)
プロジェクト単位で Node.js のバージョンを指定できる### nodenv
[https://github.com/nodenv/nodenv](https://github.c
npmってなんなのさ
## はじめに
Node.jsを使って開発をしていると避けて通れないのが`npm`コマンドです。
この`npm`が何であるかを調べると
「Node Package Manage」の略で、Node.jsのパッケージの管理をする
という説明が多く見られます。
しかし、私にはこれではピンとこないので、自分なりに調べた結果をまとめます。## npmとは
以下の公式サイトを確認します。
[About npm | npm Docs](https://docs.npmjs.com/about-npm)npmとひとくちに言っても、その実態は大きく3つのことを指すようです。
* Webサイトとしてのnpm
* CLIとしてのnpm
* レジストリとしてのnpmよく目にするのは「CLIとしてのnpm」です。要はコマンドとして使うnpmです。
しかし、この3つの中でも個人的に重要なのは「レジストリとしてのnpm」だと考えます。
公式ドキュメントのはじめの文章にはnpmが世界最大級のレジストリであると書かれています。つまり、npmの本質は巨大なJavaScriptのデータベースであると言えそう
【Node.js】ts-nodeの実行で躓いた話
社内でNode.jsを使用した以下の勉強課題をいただきました。
+ [Nodeビギナーズブック](https://www.nodebeginner.org/index-jp.html)この記事はJavaScriptで記載されていますが、TypeScriptに直して実行することが今回の課題です。
実行の条件として以下をもらいました。
+ TypeScriptで記載すること
+ 「require」ではなく、「import」を用いること
+ TypeScriptでは「node」コマンドは動かないので、「ts-node」で実行すること上記条件にて、順にコードを記載していったところ、今回タイトルとして記載している「ts-node」の実行という、だいぶ初歩的なところで躓いたので備忘として整理しておきます。
環境はMac端末にて以下で実行しています。(多分現時点で最新の状態のハズ、、、)
“`
% nodebrew -v
nodebrew 1.2.0% node -v
v20.5.0npm -v
9.8.0
“`## 概要
コードを記載し、下記コマンドにて「ts-node
VSCodeを使ったGoogle Apps Script開発の環境構築
## はじめに
この記事では、VSCodeでGoogle Apps Script(以下`GAS`)開発の環境を構築する方法を紹介します。GASを開発するためにはGoogleアカウントが必要になるので、もしお持ちでない方は先に作成してください。また、ローカルからGoogleアカウントにアクセスするために`clasp`というNode.jsパッケージを使うので、Node.jsも必要になります。詳細は以下のドキュメントをご覧ください。https://developers.google.com/apps-script?hl=ja
https://github.com/google/clasp
### 最終的なディレクトリ構成
“`
myApp/
├── .clasp.json
├── .claspignore
├── appsscript.json
└── main.js
“`### Google Apps Script APIを有効にする
まずはGAS APIを有効にしましょう。使いたいアカウントにログインした上で設定してください。以下からアクセスできま
仮想通貨APIで発注してみる
# 前回
https://qiita.com/noritama08/items/11605e024d01e2cc1d9a前回に続き、GMOコインのAPI(Node.js)で遊びます。
前回: APIで情報を参照
今回: APIで注文を入れてみる
# 注文を入れる
### 方針
private APIの「注文」を参考にするhttps://api.coin.z.com/docs/?javascript#order
– レバレッジをかけず
= 現物取引
– 金額を指定
= 指値
を満たす様サンプルを書き換える
### 実装
“`order.js
const axios = require(‘axios’);
const crypto = require(‘crypto’);const apiKey = ‘YOUR_API_KEY’;
const secretKey = ‘YOUR_SECRET_KEY’;const timestamp = Date.now().toString();
const method = ‘POST’;
const endPoint
仮想通貨APIをお触りしてみる
# 背景
一昔前まで週刊SPAとか胡散臭い雑誌(主観)くらいでしか聞かなかった仮想通貨。
BitCoinの価値が100万円まで上がって以降あまり情報見てなかったが、最近は1,000万円を越えたらしい。いきなりまとまった金額を投資するのも怖い、、、ので
GMOコインで原資1万円で遊んでみる(本当に遊ぶわけではなく)## APIとは何か
・アプリケーション・プログラミング・インターフェース(Application Programming Interface)の略
・自作アプリに組み込み、提供元のサービスにアクセスする事ができる
### 例
・LINE、Slack などに自動投稿するbotを作成
・Google Mapをサイト内に表示
## 何故GMOコインなのか
・入出金で手数料がかからない
・APIを提供していてその利用手数料が無料
・国内でも信頼度が高い
### 対応言語
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214861/bdb34cdc-8ff1-410e-2252-
Access-Control-Allow-Credentials: trueにしないとsessionをCookieに保存できない
卒研でWebアプリを開発しており、ログインセッションの実現をしようとしていたところ思いのほか躓いたので記事書くことにしました。
:::note warn
ここではExpressでのsession構築、Redis構築の話は一切行いません。予めご了承ください。
説明は致しませんが、この記事の最下部にて私が参考にしたURLを貼っております。
:::## Cookieがセットされない…
[express-session](https://www.npmjs.com/package/express-session)というライブラリを使って、Redisにセッション情報を保存しつつログインセッションを実現しようと思い環境構築を行っていました。
いろんな方のブログや公式リファレンスを参考にして、いざやってみるとなぜかブラウザにCookieがセットされない。
ブラウザの検証ツールで確認してみると、**通信は正常**に行われており、**Set-Cookieもレスポンスヘッダーに存在**し、ますます路頭に迷う羽目となっておりました。## ざっくり環境
– **Front**: SvelteKit
Salesforceしか開発経験のない自分が、Node.js(+LWR)でWebアプリを開発してつまずいたところ
## はじめに
今までSalesforce Platform上でしかほぼ開発経験がなかったのですが、それなりに大きな案件となると、Salesforceだけで完結せずに外部のシステムと連携するパターンが多いと思うので、Node.js + Lightning Web Runtime(LWR)でWebアプリを開発してみました。一般的なWebアプリ開発知識が不足しているせいか、めちゃくちゃ初歩的な部分でいくつか躓いたので、それらをまとめたいと思います。## 目次
[1. 想定する読者](#想定する読者)
[2. 執筆者のバックグラウンド](#執筆者のバックグラウンド)
[3. 使用したテクノロジー](#使用したテクノロジー)
[4. 作成したアプリのデモ動画](#作成したアプリのデモ動画)
[5. npmが分からない](#npmが分からない)
[6. サーバーを起動するという概念が分からない](#サーバーを起動するという概念が分からない)
[7. アプリケーションという単位が分からない](#アプリケーションという単位が分からない)
[8. JSforceはとても簡単だった!](#js
ブックマーク集(LIFF, Messaging API, Next.js, Node.js, xserver, nginxなど)
# ブックマーク集
LIFF & MessagingAPIで、LINEミニアプリを作成した時に参考にした
Webサイトをここにまとめる。※編集中
***
### JavaScript* [JavaScriptで小数点以下の桁数を指定する方法 #JavaScript – Qiita](https://qiita.com/KenRoda/items/b6f57ec37d032bb054ba “JavaScriptで小数点以下の桁数を指定する方法 #JavaScript – Qiita”)
* [JavaScriptのNumberオブジェクト toFixed(x) メソッドの使い方 – 0xBrokers ブログ](https://0xbrokers.com/javascript-number-tofixed-method/ “JavaScriptのNumberオブジェクト toFixed(x) メソッドの使い方 – 0xBrokers ブログ”)
* [Number.prototype.toFixed() – JavaScript | MDN](https://developer.
LINE Bot ハンズオン
# はじめに
Messaging APIを使ってLINE Botを作成するハンズオン記事です。
ユーザーが送ったメッセージをそのままオウム返しで返すLINE Botを作成します。# 前提条件
* LINEアカウントを持っていること
* VS Codeがインストールされていること
* VS CodeへGitHub or Microsoftアカウントでサインインしていること
* Node.js v18以上がインストールされていること# ハンズオン
## LINE Developersコンソールへログイン
[Messaging APIページ](https://developers.line.biz/ja/services/messaging-api/)へアクセスし画面右上の「コンソールにログイン」ボタンをクリックし、ログインします。https://developers.line.biz/ja/services/messaging-api/
![image](https://gist.github.com/assets/22117028/948e5423-85a3-4c
LINE Notify ハンズオン
# はじめに
手軽にLINEへPush通知を行えるLINE Notifyのハンズオン記事です。
APIの実行方法はcurl、Node.js、Arduinoの3通りの方法を紹介します。# ハンズオン
**トークン発行**と**API実行**の2つのステップで進めていきます。
## トークン発行
[LINE Notifyページ](https://notify-bot.line.me/ja/)へアクセスし画面右上の「ログイン」をクリックし、ログインします。
(QRコードログインが楽です)https://notify-bot.line.me/ja/
![image](https://gist.github.com/assets/22117028/c8076aee-5b53-4624-8db2-e47b93b9b41e)
ログイン後にアカウント名をクリックし、表示されるメニューより「マイページ」を選択します。
![image](https://gist.github.com/assets/22117028/8c26d0c6-8964-4598-bbb0-8
Node16 + Nuxt2で@nuxtjs/i18nをインストールするとエラーが発生した
# 前提
* Node:16.13.2
* Nuxt.js:2.15.8
* Vue.js:2.7.10
* yarn:1.22.15# エラーについて
下記のようにインストールしようとしたところエラーが発生しました。
“`sh
$ yarn add @nuxtjs/i18n
yarn add v1.22.15
[1/4] Resolving packages…
[2/4] Fetching packages…
error globby@14.0.1: The engine “node” is incompatible with this module. Expected version “>=18”. Got “16.13.2”
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
“`
`globby@14.0.1`というパッケージがNode18以上でないといけないようです。ちなみに何回
TurborepoのESLint及びPrettierをBiomeに移行した手順
## はじめに
– Turborepoに標準インストールされていたESLintとPrettierを辞め、Biomeに移行する必要が生じたので、移行に要した手順を公開する
– パッケージ構成は以下の通り
“`
(root)
|—-apps
| |—-web ← ワークスペース
|
|—-packages
| |—-ui ← ワークスペース
| |—-eslint-config ← ワークスペース
“`## Turborepoの前提知識
### `turbo lint`を実行すると、なぜwebやuiのlintが実行されるのか?
– Turborepoのルートディレクトリに存在する`turbo.json`を見てみる
“`turbo.json
{
“$schema”: “https://turbo.build/schema.json”,
“globalDependencies”: [“**/.env.*local”],
“pipeline”: {
“build”: {
“dependsOn”: [“^build”]
Mac Node.js 1万件の情報が入ったcsvを出力するスクリプトを作ってみる
## 概要
Macのローカルでjsのスクリプトを動かして1万件の情報が入ったcsvを出力してみる。
## 方法
1. MacのローカルにNode.jsを導入(筆者はVoltaを使ってNode.jsを管理している。Node.jsのバージョンは20.11.1を使用)
1. 任意のディレクトリを作成
1. 下記コマンドを実行して初期化“`shell
npm init
“`1. 下記コマンドを実行してcsv-writerパッケージをインストール
“`shell
npm install csv-writer
“`1. 下記コマンドを実行してスクリプトファイルを作成
“`shell
touch generate_csv.js
“`1. 作成したスクリプトファイルに下記の記載を実施
“`generate_csv.js
const createCsvWriter = require(‘csv-writer’).createObjectCsvWriter;
const
#プログラミング #Javascript #nodejs #chrome ビット演算・算術演算、領域管理の速度差
**本内容を利用した場合の一切の責任を私は負いません。**
いつもコーディングする時に、コンバイル言語の名残で、書き方で違いがでるか迷うので実験してみた。
実験結果から、ソースが違うだろうから、node.jsとChromeではやはり挙動に違いがありそう。
書き方は意識した方がいいのかも。
最適化もありそうな気がする。# バージョン
– OS
OS 名: Microsoft Windows 10 Home
OS バージョン: 10.0.19045 N/A ビルド 19045
システムの種類: x64-based PC
– node.js
node-v20.9.0-win-x64.zip
– Chrome
バージョン: 125.0.6422.114(Official Build) (64 ビット)#ソース
“`javascript:a.js
function aa() {
let total;console.time(“elap3”);
total = 0;for
npm install時のエラー「npm WARN EBADENGINE Unsupported engine…」への対応
## はじめに
`$npm install` 実行時のエラーの内容と対処法について書きます。
## 環境
– Windows 10
– node v18.16.0## 経緯
Viteで環境構築を行うために`$ npm create vite@latest`を実行しました。
続いて`$ npm install`を行ったところ、以下のエラーになりました。
Node.jsのバージョンが低く、必要なパッケージがインストールできないようです。
“`bash
> npm install
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: ‘@typescript-eslint/eslint-plugin@7.11.0’,
npm WARN EBADENGINE required: { node: ‘^18.18.0 || >=20.0.0’ },
npm WARN EBADENGINE current: { node: ‘v18.16.0’, npm: ‘9.5
GPT-4oで簡単なWebアプリを作成
# はじめに
GPT-4はプロンプトの応答が遅かったのですが、GPT-4oになってだいぶ早くなったというのを目にしていました。出力の精度も確認したかったので、簡単なWebアプリを作成してみようと思いました。# アプリケーションの概要
– Node.jsでTodo管理するWebアプリケーション
– ユーザ登録、ログイン、トークン認証あり
– プロジェクトと、プロジェクトごとのTodoの追加※あくまでサンプル的なものなのであまり期待せずでお願いします。
# GPT-4o プロンプト入力
プロンプトは以下で入力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/468278/a543ddfb-4ae1-3593-02bf-f0fcf6cc4490.png)# GPT-4o プロンプト応答
出力されたプロジェクト構造
“`
my-todo-app/
│
├── node_modules/
├── app.js
├── config.js
├── database.js
├── r
NodejsでreCAPTCHA実装
# 環境
OS: Ubuntu Server 22.04(SSHでローカルコンピュータから接続)
作ったProject名称: MIRAI
Nodejs: Nodejs v20.14.0# reCAPTCHAの`API key`の取得
[GoogleCloudPlatform](https://www.google.com/recaptcha/admin/create)にアクセスして、`API key`を取得します。
https://www.google.com/recaptcha/admin/create
ラベルという項目に認証を実行するドメインを入力します。
v2かv3かというラジオボタンがありますが、私は厳密に人間のみを通したかったのでv2を選択しました。
プロジェクト名を入力したら送信して完了です。# フロントエンドの作成
まずは、フロントエンドを作成します。
“`html