- 1. WindowsでのAngular環境構築（Node.jsのインストール～Hello Worldまで）
- 2. Mac（M1）のnodeバージョンアップ
- 3. Playwright 入門
- 4. huskyのv8とv9の違いを確認しつつ、npm scriptsを理解する
- 5. passport.jsでユーザー認証を実装してみた
- 6. WebSocketをローカルで試す
- 7. node.js で VRT – PlayWright で Webページにアクセスしてスクリーンショットを撮影し、reg-cli で差分レポートを出力する例
- 8. Javascript Registry (JSR) とは
- 9. Node.js – npx なら package.json で管理している node モジュールのコマンドを直接実行できる
- 10. pnpmで管理しているWebフロントエンドをGitHub ActionsでGitHub Pagesにデプロイする
- 11. node js でdiscord のbot作成#2応答機能と作る
- 12. ChatGPTのチャットの返答をfetchでStream受信しようとしたらSyntaxError: Unterminated string in JSONが出たことと解決法
- 13. 【小ネタ】Node.js用の OpenAI パッケージ（OpenAI版・Azure版）を軽く見比べてみる
- 14. CloudFrontの署名付きCookieを用いてプライベートコンテンツを配信する
- 15. Exceljs でシートを保護し、特定のセルだけロックを解除して編集可能にする
- 16. 【Deno Deploy】md5sum api【md5】
- 17. [AWS]Serverless Frameworkを使ってAPI Gateway×Lambda×DynamoDBを使用したWebAPIを構築する
- 18. Vue.js + LaravelでシンプルなSPA構築チュートリアルについて
- 19. Denoってなに？試しに使ってみよう
- 20. Node.jsでHTML、CSSを反映させる（自分用メモ）
WindowsでのAngular環境構築（Node.jsのインストール～Hello Worldまで）
## Node.jsのダウンロード
以下サイトで最新バージョンのダウンロード。
https://nodejs.org/en/downloadWindowsの一番上をポチっと。
## Node.jsのインストール
画面に従いNextを押下していく。
※今回はすべてデフォルト。## バージョンとnpmの確認
コマンドプロンプトで以下のコマンドで確認できる。
“`
Node –version
npm –version
“`◆参考
## Angularの最新をインストール
以下のコマンドを実行する。
“`
npm install -g @angular/cli
ng version //確認
“`バージョンはこの通り。
“`
Angular CLI: 17.2.2
Node: 20.11.1
Package Manager: npm 10.2.4
OS: win32 x64
“`## 統合開発環境(IDE)のインストール
Visual
Mac（M1）のnodeバージョンアップ
## 背景
nodeのバージョンをあげずに放置していたらv16系だったので、バージョンをあげることにしました。
その際のまとめです。## 現在のバージョン確認
### Homebrew
“`
$ brew -v
“`### nodebrew
“`
$ nodebrew -v
“`### Node.js
“`
$ node -v
“`### npm
“`
$ npm -v
“`## バージョンのアップデート
### Homebrew
“`
$ brew update
“`終わったらちゃんと上がっているか先ほどのコマンドでバージョン確認。
### nodebrew
“`
$ brew upgrade nodebrew
“`自分の場合はここでエラーが出ました。
“`
Error: Failure while executing; `/usr/bin/env cp -pR /private/tmp/d20240303-30797-co2iaz/nodebrew/. /usr/local/Cellar/nodebrew`
Playwright 入門
# はじめに
この記事では、E2E テストツールの Playwright の概要や基本的な操作方法について記載します。https://playwright.dev/
# Playwright の概要
Playwright は、Microsoft で開発が行われている E2E テストツールです。2020年にリリースされました。
複数ブラウザ・プラットフォーム・言語で利用可能などの特長があります。他の E2E テストツールとしては、Cypress、Puppeteer などがあります。
Playwright は、2023年の後半から利用者数が伸びているようです。
https://npmtrends.com/cypress-vs-playwright-vs-puppeteer-vs-selenium-webdriver-vs-testcaf
huskyのv8とv9の違いを確認しつつ、npm scriptsを理解する
# 概要
husky がずっとv4のプロジェクトがあるので、 Node.js のバージョンアップに合わせてアップデートをしようとしました。
2024/1/25にv9.0.1がリリースされていたので違いを確認しつつ、 npm について理解したことをまとめます。# v8とv9の違い
Release Notehttps://github.com/typicode/husky/releases/tag/v9.0.1
v9に変わり、インストール時のコマンドが一つで済むようになり、 .husky/pre-commit もシンプルになっています。
例えば、v8のインストール手順のコマンドは以下です。
“`bash
npm pkg set scripts.prepare=”husky install”
npm run prepare
npx husky add .husky/pre-commit “npm test”
“`v9では上記のコマンドは以下で全て実行されます
“`bash
npx husky init
“`他には、v9にあたり Node.js のv14とv16
passport.jsでユーザー認証を実装してみた
## はじめに
Passportは、認証や認可を簡単に実装できるNode.js用ミドルウェアです。
非常に柔軟なPassportはExpressベースのWebアプリケーションで利用できるため、ローカル認証やTwitter、FaceBookなどの外部認証にも使用されます。
今回はその中のローカル認証機能を実装していきます。・使用するライブラリのインストール
“`zsh:zsh
npm install passport passport-local bcrypt express-session
“`## ストラテジの設定
はじめに、ストラテジの設定を行います。新しく`config`フォルダを作成し、その下の`passport.ts`ファイルに設定内容を記述します。“`typescript:config/passport.ts
import passport from “passport”;
import { Strategy as LocalStrategy } from “passport-local”;
import { PrismaClient } from “@
WebSocketをローカルで試す
仕事でwebsocketを使って試験をする必要があるということで、やり方を事前に調べておこうと思いました。
## ローカルでwsを立ち上げる
* まず、node.jsをインストールしておき、npm install wsにてwebsocketをインストールします
“`
// グローバルの場合は-g を付ける
npm install ws
“`* 以下の処理を 例）server.jsとして保存します
“`js
const WebSocket = require(‘ws’);// WebSocketサーバーを作成し、ポート8080でリッスンします
const wss = new WebSocket.Server({ port: 8080 });// 接続時の処理
wss.on(‘connection’, function connection(ws) {
console.log(‘新しいクライアントが接続しました’);// メッセージを受信した時の処理
ws.on(‘message’, function incoming(message) {
co
node.js で VRT – PlayWright で Webページにアクセスしてスクリーンショットを撮影し、reg-cli で差分レポートを出力する例
# 事前準備
## npm インストール
`package.json` の例
“`json
{
“devDependencies”: {
“playwright”: “^1.42.0”,
“@playwright/test”: “^1.42.1”,
“http-server”: “^14.1.1”,
“reg-cli”: “^0.18.1”
}
}
“``npm install`
## Playwright セットアップ
`npm init playwright@latest`
質問にはてきとうに Yes と答えておく
# localでWebサーバーを起動しておく
## HTML
見た目の違うページを2個用意しておく
例:
`example1.html`
`
Javascript Registry (JSR) とは
### 概要
JSRとはjavascriptのパッケージのためのレジストリです。npmやNodeとも互換性がありますが、npmを進化させたようなレジストリです。
### レジストリとは
パッケージ等を管理するストレージのようなものです。例えば `npm install lodash` をすると、通常はnpmに設定されているデフォルトのレジストリである `https://registry. npmjs.org/ ` からパッケージをインストールしようとします。ここで注意すべきはパッケージ管理ツールとレジストリは別の概念であることです。`npm`コマンドはあくまでもパッケージ管理ツールであり、`npm`コマンドを使っていても実際にパッケージをインストールしてくるストレージは自由に設定可能です。この記事で紹介しているJSRは**レジストリ**であり、したがってnpmコマンドを使ってJSRからパッケージを取得することが可能です。
例えば企業などでは独自のレジストリを管理しており、npmコマンドなどでもデフォルトのレジストリが会社の管理するものになっているケースも多いと思います。
Node.js – npx なら package.json で管理している node モジュールのコマンドを直接実行できる
# 概要
npxをインストールしておけば、 package.json で管理している node モジュールを直接コマンド指定で実行できる
## インストール
“`
npm install -g npx
“`## 利用例
たとえば次のような package.json がある場合
“`json
{
“dependencies”: {
“prettier”: “^3.2.5”
}
}
“`次のように自由にサブコマンド、フラグなどを指定して実行できる
“`sh
npx prettier some_dir
“`“`sh
npx prettier –cache other_dir
“`# 問題の前提 – npm run
package.json の script にコマンドを書いておけば、パッケージ管理しているバージョンでコマンド実行が出来るが、
– scripts に書かずに単発のコマンド実行がしたい
– 様々なバリエーションでコマンド実行したいという時に不便だった
# チャットメンバー募集
何か質問、悩み事、相談
pnpmで管理しているWebフロントエンドをGitHub ActionsでGitHub Pagesにデプロイする
# やりたいこと
`pnpm` でパッケージ管理をしている Web フロントエンドアプリケーションを、GitHub Actions を用いることで、`main` ブランチへ `push` されたタイミングで自動的にデプロイします。# 前提
[こちらの GitHub レポジトリ](https://github.com/Yuki-Imajuku/pnpm-ghpages-deploy) も参照してください。– Ubuntu (22.04.4)
– Node.js (20.11.1)
– pnpm (8.15.4)“`txt:ディレクトリ構成
pnpm-ghpages-deploy/
├── .github/workflows/ghpages-deploy.yml
├── frontend/
├── .gitignore
├── LICENSE
└── README.md
“`# プロジェクト作成
下記のコマンドでテンプレートの React アプリケーションを作成します。ビルドツールには Vite を採用しています。
“`sh
pnpm create vite@late
node js でdiscord のbot作成#2応答機能と作る
# 前回のコードの詳しい説明
“`javascript:index.js
const {Client,GatewayIntentBits, GuildTemplate} = require(“discord.js”)
const client = new Client({intents:[]})
client.on(“ready”,async (c) =>{
console.log(`${c.user.tag}でログインしました`)
})
client.login(“先ほどのトークン”)
“`“`js
const {Client,GatewayIntentBits, GuildTemplate} = require(“discord.js”)
“`
まずはここです
`require`は読み込み先を指定するためみたいな感じです
`const`は一度定義したら二度と再定義できない変数です
“`js
const client = new Client({intents:[]})
“`
操作するためのクライアントを制作するためのものですintentsはオプションみたいな
ChatGPTのチャットの返答をfetchでStream受信しようとしたらSyntaxError: Unterminated string in JSONが出たことと解決法
# エラーに遭遇した状況
openAIのchatGPTにAPIで質問を投げて、取得した回答を表示するということをしようと思いました。
chatのapiにはstreamというオプションがあります。これを使うと回答全体の構築を待たずに先頭から流してくれるようになります。
以下の記事を参考にこれを試してみようと思いました。https://zenn.dev/himanushi/articles/99579cf407c30b
# やったこと
まずフロントのページを用意しました。
// Sheet
const worksheet = workbook.addWorksheet(‘My Sheet’)// Header
worksheet.columns = [
{ header: ‘Name’, key: ‘name’ },
{ header: ‘Age’, key: ‘age’ },
]// Rows
worksheet.addRow({ name: ‘Alice’, age: 20 })
worksheet.addRow({ name: ‘Bob’, age: 30 })// Lock cell
const cell = worksheet.getCell(‘B2’)
cell.protection = { locked: false }//
【Deno Deploy】md5sum api【md5】
javascriptでmd5するの結構めんどいのでAPI作った
# 使い方
“`javascript
const md5 = text => fetch(‘https://md5sum.deno.dev/’ + text).then(r=>r.text())console.log(await md5(‘abc’))
“`# ソースコード
“`typescript
import { Md5 } from “https://deno.land/std@0.119.0/hash/md5.ts”const headers = { ‘Access-Control-Allow-Origin’: ‘*’ }
Deno.serve((req: Request) => new Response(new Md5().update(req.url.slice(24)).toString(), { headers }));
“`
[AWS]Serverless Frameworkを使ってAPI Gateway×Lambda×DynamoDBを使用したWebAPIを構築する
## インフラ構成
WebAPIの作成に当たって今回使用するAWSの各サービスを簡単にまとめてみます。・API Gateway
HTTPリクエストを受け付けて、他のAWSサービス(Lambda等)にルーティングする機能です。REST APIやWebSocket APIを簡単に作成できます。API Gatewayでは、リクエストのパスやクエリパラメータ、ヘッダー、ボディなどをLambda関数に渡すことができます。
https://aws.amazon.com/jp/api-gateway/・Lambda
サーバレスコンピューティングのサービスです。コードをアップロードするだけで、イベントやトリガーに応じて自動的に実行されます。サーバの管理やスケーリングを気にする必要がありません。Lambdaは、Node.js、Python、Java、Go、Rubyなどの言語に対応しています
https://aws.amazon.com/jp/lambda/・DynamoDB
DynamoDBは、NoSQLデータベースのサービスで、高速でスケーラブルなキーバリューストアやドキュメントストアを提
Vue.js + LaravelでシンプルなSPA構築チュートリアルについて
完全honaki用悪しからず
php7.4
Laravel6.x
node.js20## PHP7.4の導入
### homebrewのインストール### PHPの導入
https://c-limber.co.jp/blog/1691## Composerの導入
ターミナルで以下を実行
“`
curl -sS https://getcomposer.org/installer | php
“`ターミナルで以下を実行でComposerインストール 確認
“`
composer -v
“`
以下画像の通りならOK
## NPMの導入(mac)
### Node.jsのインストール
https://nodejs.org/en/download
上記UR
Denoってなに？試しに使ってみよう
2か月前に投稿してそのまま放置してました。
~~まあUbuntuやらなんやらで遊んでただけですがね~~
さて本題に戻って、今回はDenoってなに？って人向けに簡単に説明を書きます。# Denoとは
Node.jsの作者のライアン・ダールがJSConf EU 2018での公演「Node.jsに関する10の反省点」で発表されたJavascirpt・Typescirptのランタイムです。# インストール方法
Windowsは
“`powershell:PowerShell
irm https://deno.land/install.ps1 | iex
“`
Mac・Linuxは
“`sh:Bash
curl -fsSL https://deno.land/install.sh | sh
“`
のコマンドを実行するとインストールされます。# 実際に使ってみよう
:::note warn
自分が使っているDenoのバージョンはv1.41.0です。
なのでバージョンが上がるにつれ動かなくなる可能性があります。
:::
まずDenoを実行してみましょう。
“`
deno ru
Node.jsでHTML、CSSを反映させる（自分用メモ）
# はじめに
ポートフォリオ用にウェブサイトを作りたいけどやり方が分からねぇってことで勉強したことをまとめました。最初の導入部分的なことしかまだわかっていませんが、もし似たようなことをしたくて困っている人の助けになればと思います。# 1.プロジェクトを作成
（最初はNode.jsの導入をする必要があります）
ターミナルにて好きなフォルダに行く
“`
cd プロジェクトファイル
“`
package.jsonの作成
“`
npm init
“`
express（モジュール）をインストール
“`
npm install express –save
(npm install モジュール名 オプション)
“`こんな感じにファイルを置く（by ChatGPT）
GPT先生は偉大
“`
プロジェクトフォルダ/
│
├── node_modules/ # npmによってインストールされたモジュール
│
├── public/ # 静的ファイルを格納するディレクトリ
│ ├── css/
