- 1. 複数htmlファイルを対象に閉じタグミスを検出する方法
- 2. [paiza]コレがSランクだと？（文字列収集 (paizaランク S 相当)
- 3. Expressにおけるセキュリティ強化：Helmetについて👷
- 4. Next.js の dashboard tutorial 用の docker image を作ってみました。
- 5. chromecast-api ＋ Node.js（JavaScript）で Chromecast への動画のキャストを行う
- 6. 【初めてのWEB開発】Node.jsを使用した小説紹介サイト開発
- 7. Node.jsやJavaScriptビルドツールのインポートパスの仕組み：index.tsxなどを使った簡略化
- 8. AWS-Parameters-and-Secrets-Lambda-Extensionを試す
- 9. `npm run dev`の簡単な方法
- 10. web開発者にとって最高の無料ツール
- 11. TypeScript 基本構文 忘備録
- 12. Fuse.jsを使って あいまい検索(fuzzy search)をする
- 13. JavaScriptでWebサイト作業自動化
- 14. Web上のボタンを押すと指定範囲を印刷自動化
- 15. [paiza]暇を持て余した神々の遊び(じゃんけんの手の出し方 (paizaランク A 相当))
- 16. VoltaでプロジェクトのNode.jsとnpmのバージョンを固定化
- 17. 2024年におすすめのMac開発ツール（超使いやすい）
- 18. [paiza]と～う！！
- 19. 新しいReactプロジェクトの始め方
- 20. [paiza]山あり谷ありラジバンダリ
複数htmlファイルを対象に閉じタグミスを検出する方法
複数htmlファイルを対象に、HTMLHintを使用して閉じタグミス（「Tag must be paired」エラー）が発生しているファイル名を抽出する方法を説明します。この手法は、他のVSCodeのエラーメッセージにも汎用的に使用することができます。
## 手順
### 1. HTMLHintのインストールまず、確認したいファイル群を含んだプロジェクトディレクトリにHTMLHintをインストールします。
“`sh
npm install htmlhint –save-dev
“`### 2. HTMLHintの設定ファイルを作成
プロジェクトのルートディレクトリに .htmlhintrc ファイルを作成し、以下のように設定を記述します。
“`sh
{
“tagname-lowercase”: true,
“attr-lowercase”: true,
“attr-value-double-quotes”: true,
“doctype-first”: true,
“tag-pair”: true,
“spec-char-escape”:
[paiza]コレがSランクだと？（文字列収集 (paizaランク S 相当)
# なんか急に簡単じゃね？
処理自体4行で書けたんだけど、これホントにSランクなの？https://paiza.jp/works/mondai/real_event/word_collection
# 面倒くさいので画面パタメータをListでもらった後のFunctionだけ
ちなみに引数のListを作ってる箇所は[こっちの記事](https://qiita.com/AsilHatake/items/842548e48ae4a0eae119)に書いてあるYO!!“`javascript:wordCollection.js
// [問題文（原文）]
// あなたは文字列の愛好家で、文字列を収集することにとても熱心です。
//
// 文字列は市場で高値で取引されています。今、市場には N 個の文字列が出まわっており、文字列 S_i (1 ≦ i ≦ N) の価格は P_i です。 あなたは数ある文字列の中でも、とくに先頭がある特定の文字列で始まる文字列に興味があり、そのような文字列をすべて買い占めたいです。例え、同じ文字列が複数売っていたとしてもそのすべてを買います。
//
Expressにおけるセキュリティ強化：Helmetについて👷
# はじめに
Webアプリケーション開発において、セキュリティは非常に重要な要素です。攻撃者が脆弱性を悪用するリスクを最小限に抑えるためには、適切なセキュリティ対策を講じる必要があります。
Express.jsを使用したWebアプリケーションの開発において、これらのセキュリティ対策をシンプルかつ効果的に実装できるライブラリがHelmetです。
この記事では、Helmetの基本機能、インストール方法、主なセキュリティ機能について紹介します。https://helmetjs.github.io/
https://www.npmjs.com/package/helmet
# Helmetとは？
Helmetは、Node.jsのWebフレームワークであるExpress.jsアプリケーションにセキュリティ関連のHTTPヘッダーを設定するためのミドルウェアです。
これにより、アプリケーションの脆弱性を軽減し、さまざまな攻撃（クリックジャッキング、XSS、MIMEタイプのスニッフィングなど）から保護します。Helmetのインストール
以下のコマンドでインストールできます。“`
np
Next.js の dashboard tutorial 用の docker image を作ってみました。
## 作成した Dockerfile
“`
FROM node:20-alpine
RUN apk update && \
apk upgrade && \
apk add –no-cache g++ && \
apk add –no-cache make && \
apk add –no-cache python3 && \
mkdir /home/pnpm && \
npm install -g npm@latest && \
npm install -g pnpm && \
pnpm config set store-dir /home/pnpm/store
“`### npm が古いと警告が出たので npm を最新に upgrade しています。
“`
npm install -g npm@latest
“`出た警告
“`
1 package is looking for funding
run `npm fund` for details
npm notice
npm noti
chromecast-api ＋ Node.js（JavaScript）で Chromecast への動画のキャストを行う
以下の記事で扱った「Chromecast制御 ＋ JavaScript」の話に似た内容です。
●castjs を使って Chromecast への動画のキャストを JavaScript で行う（p5.js も併用） – Qiita
https://qiita.com/youtoy/items/595147a78f4d2b2c8630上記との違いは、自前で用意したプログラムをブラウザで動作させるのではなく、Node.js で動作させるという部分です。
## 今回利用するパッケージ
今回は、以下のパッケージを使って実装します。●chromecast-api – npm
https://www.npmjs.com/package/chromecast-api
## 実装内容
### JavaScript のコード
JavaScript
【初めてのWEB開発】Node.jsを使用した小説紹介サイト開発
## はじめに
約1ヶ月ほどで友人と共同開発した小説紹介サイト「ノベルバース」について、使用技術や開発過程で直面した課題、そしてセキュリティ面での取り組みを紹介します。
## サイト概要
サイト名：ノベルバース (https://www.novelverse.net)
ノベルバース（以下、本サイト）は、次に何を読もうか迷っている人が最新情報を元に、手軽に小説を探せることを目的に設計されました。ユーザーは多様なカテゴリーや作家名から小説を探索し、お気に入りの作品をブックマークできます。
### 主な機能
– アカウント管理（作成、削除、ログイン、ログアウト）
– 多様なカテゴリーによる小説一覧表示
– 小説詳細情報の閲覧
– ブックマーク機能（「読みたい＋」ボタン）
– 検索機能（全文検索および作家名検索）
– お問い合わせフォーム## 使用技術
開発に使用した主要な技術スタックは以下の通りです：
### フロントエンド
– HTML / CSS
– JavaScript (Vanilla JS)
– EJS（テンプレートエンジン）### バックエンド
– Node
Node.jsやJavaScriptビルドツールのインポートパスの仕組み：index.tsxなどを使った簡略化
## アジェンダ
JavaScriptやTypeScriptを使ってプロジェクトを開発する際、`import { Test } from “../test”;`のように相対パスでフォルダを指定すると、そのフォルダ直下にある`index.js`、`index.jsx`、`index.ts`、`index.tsx`が特別扱いされ、なぜファイル名を指定せずにインポートできるのか、その仕組みについて簡単にまとめます。## デフォルトファイルの読み込み
Node.jsや多くのJavaScriptビルドツール（Webpack、Babelなど）では、フォルダを指定してインポートした場合、そのフォルダの直下にある`index`ファイルを自動的に探しに行くという規約があります。具体的には、`../test`と指定すると、自動的に`../test/index.js`、`../test/index.jsx`、`../test/index.ts`、`../test/index.tsx`などを探し、見つけた場合はそれをインポートします。## モジュールのエクスポートとインポートの簡略化
`index.t
AWS-Parameters-and-Secrets-Lambda-Extensionを試す
## 背景
Lambda上でSSMパラメータストアの値を都度取得するのが嫌で調べてたら以下を見つけたので試して見るhttps://docs.aws.amazon.com/ja_jp/secretsmanager/latest/userguide/retrieving-secrets_lambda.html#retrieving-secrets_lambda_env-var
* Lambda Layer は以下を指定
`arn:aws:lambda:ap-northeast-1:133490724326:layer:AWS-Parameters-and-Secrets-Lambda-Extension-Arm64:11`## コード
“` typescript:index.mjs
import {SSMClient, GetParameterCommand} from ‘@aws-sdk/client-ssm’;export const handler = async () => {
const path = “/hoge/secure/params”;
`npm run dev`の簡単な方法
“`Dockerfile:Dockerfile
FROM nodeWORKDIR /app
COPY . .
RUN npm install -g create-next-app
RUN npx create-next-app my-next-app –use-npm –ts –eslint –tailwind –src-dir –app –import-alias “@/*”
WORKDIR /app/my-next-app
RUN npm installCMD [“npm”, “run”, “dev”]
“``RUN npx create-next-app my-next-app –use-npm –ts –eslint –tailwind –src-dir –app –import-alias “@/*” `
では、
“`terminal
✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like
web開発者にとって最高の無料ツール
無料ツールは、どのWeb開発者のツールキットにも欠かせません。特に予算が限られている人や、お金をかけずにスキルアップしたい人にとっては必要です。
これらのツールは、開発者がコストを節約し、重要な機能やリソースへのアクセスを提供するのに役立ち、生産性と創造性の向上に役立ちます。
私は多くの重要な要素に基づいてこのリストのツールを選択し、各ツールが無料であるだけでなく、機能が強く、ユーザーフレンドリーで、Web開発のすべての部分に適用されることを保証しました。
可用性：このツールはどのくらい使いやすいですか。異なる技術レベルの開発者にとって、これは簡単で明瞭ですか？
機能性：このツールにはWeb開発者に役立つ多くの機能と機能がありますか。
コミュニティサポート：このツールには、知識、チュートリアル、サポートを提供するアクティブなコミュニティがありますか。
相関性：このツールは現代のネットワーク開発実践のニーズを満たす上でどのくらい有効ですか。ここでは、私が選んだ5つの無料web開発ツールを探ってみましょう。
1.反対
[2. 想定読者](#2-想定読者)
[3. 型について](#3-型について)
[4. インターフェース](#4-インターフェース)
[5. 関数](#5-関数)
[6. クラス](#6-クラス)
[7. ジェネリック](#7-ジェネリック)# 【1. 概要】
TypeScriptをこれから触ってみる方向けに、どんな機能があるのかを簡単にまとめてみました。# 【2. 想定読者】
・JavaScriptの経験がある方。
・TypeScriptってそもそも何ぞや、の基本は抑えておられる方。# 【3. 型について】
## プリミティブ型
“`ts:boolean
const b: boolean = true;
“`“`ts:number
const n: number = 0;
“`
Fuse.jsを使って あいまい検索(fuzzy search)をする
Node.js環境で[Fuse.js](https://www.npmjs.com/package/fuse.js)を使用して簡単にあいまい検索を実装する方法を紹介します。
Fuse.jsはJavaScript製の軽量な全文検索ライブラリで、特にデータを加工したり、難しい知識を必要とせずにあいまい検索を実現することができます。
https://www.fusejs.io/
## 準備
まず、必要なモジュールをインストールします。Node.jsのプロジェクトを作成し、以下のコマンドを実行して必要なモジュールをインストールします。
“`
npm install fuse.js
“`注意点としては `fuse` ではなく `fuse.js` とすることです。[なぜなら `fuse` という名の別名のモジュールが存在している](https://www.npmjs.com/package/fuse)からです。
次に、サンプルコードを以下に示します。今回のコードはJIRAのAPIからデータを取得し、Fuse.jsを使用して検索結果をフィルタリングし、結果をTSVファイルとして保
JavaScriptでWebサイト作業自動化
## JavaScriptでWebサイトの作業を自動化
Webサイトで行う作業を自動化したかったので、JavaScript（以下、js）で簡単に作ってみました。
備忘録がてら、基本的なことを記録してます。js経験者やプログラミングできる人は比較的楽で簡単に使えるかと思います。
本作業はNode.jsを使用します。
また、当方はwindows11環境になります。## Node.jsのインストール
以下より、Node.jsのインストーラをダウンロードし、インストールをしてください。
https://nodejs.org/en/download/prebuilt-installer## プロジェクトフォルダを作成
ソースを格納するフォルダを任意の場所に用意します。例では「AutoJS」というフォルダ名にします。
コマンドで行う場合は、mkdirで作成できます。## nodeからpuppeteerをインストールする
コマンドプロンプトで先程作成したプロジェクトフォルダ（以下、pjフォルダ）にカレントディレクトリを移動して、以下を入力します。**npm install puppe
Web上のボタンを押すと指定範囲を印刷自動化
# 展示会での物理的な思い出
パラメータいじるだけでグラフィックを作成できる展示に物理的な思い出を持たせたい！！！！
クリエイティブコーディングやWeb上で作成したグラフィック、
それをポストカードやステッカーなどで持ち帰る体験を作りたいなと思いボタンを押しただけで自動で印刷まで出来上がる仕組みを構築しました
以下はその簡易実装例です## 概要
本記事では、Webページ上のボタンをクリックすることで指定範囲をキャプチャし、その画像をサーバーに送信して自動で印刷する仕組みを実装する手順を紹介します。使用技術や環境構築、各コード例を含めて解説します。
### 使用技術
– HTML2Canvas
– Node.js v18.17.0 （Express, Multer）
– ShellScript### 簡単な流れ
1. HTML2Canvasで指定範囲を保存
2. 画像データをサーバに送る
3. クライアントから送信されたデータを受け取る
5. シェルスクリプトをリクエスト
5. 印刷を実行## 実装
### 環境構築`Node.js` が入ってない方はこち
[paiza]暇を持て余した神々の遊び(じゃんけんの手の出し方 (paizaランク A 相当))
# ドンドン人間離れしていく。。。
`あなたはこれから友人と N 回じゃんけんをします。しかし、あなたは全てを見通す千里眼の持ち主なので、友人がこれから出す N 回のじゃんけんの手が全て分かってしまいました。`何年もたつのだから もう気が付かなきゃいけない
もう 心に刻まなきゃいけない……！
勝つことがすべてだと……
勝たなきゃゴミ…… 勝たなければ…… 勝たなければ……
勝たなければ………！https://paiza.jp/works/mondai/a_rank_skillcheck_sample/janken
# 面倒くさいので画面パタメータをListでもらった後のFunctionだけ
ちなみに引数のListを作ってる箇所は[こっちの記事](https://qiita.com/AsilHatake/items/842548e48ae4a0eae119)に書いてあるYO!!“`javascript:janken.js
// [問題文（原文）]
// あなたはこれから友人と N 回じゃんけんをします。しかし、あなたは全てを見通す千里眼の持ち主なので、友人がこれから出す
VoltaでプロジェクトのNode.jsとnpmのバージョンを固定化
## アジェンダ
VoltaでプロジェクトのNode.jsとnpmのバージョンを固定化する方法をまとめます。## 手順
プロジェクトにNode.jsの特定バージョンを固定するには、以下の手順に従います。まず、プロジェクトのディレクトリで次のコマンドを実行してください（バージョン番号は適宜変更してください）。“`sh:Node.jsのバージョンをプロジェクトに固定する
volta pin node@12.22
“`同様に、npmのバージョンを固定する場合も、以下のコマンドを実行します。
“`sh:npmのバージョンをプロジェクトに固定する
volta pin npm@9.3.1
“`この操作により、指定されたバージョンはプロジェクトディレクトリに戻ると自動的に有効になります。
この操作を行うと、プロジェクトの`package.json`には以下のように設定が追記されます。
“`json:固定されたバージョンの管理
“volta”: {
“node”: “12.22”,
“npm”: “9.3.1”
}
“``package.json`に設定が
2024年におすすめのMac開発ツール（超使いやすい）
仕事をうまくやるには、まず道具を磨かなければならないと言われています。有用なツールは私たちをより効率的にすることができ、美しいインタフェースは私たちを喜ばせることができます。そのため、使いやすく視覚的に魅力的な開発ツールは私たちの開発ツールです。
そこで今日は、2024年のMacに適した開発ツールをお勧めしたいと思います。それらはあなたにとって実用的で役に立つものです。
1.TablePlusTPはデータベース管理ツールであり、ここで記述されていますが、NaviCatを使用して可用性を高めることをお勧めします。Navicatは有料ですが、「ラーニング版」を選択することができます。私がTPを使ったのは、NavicatがすべてのTPをアンインストールするように会社に手紙を送ったからです。だから私はこの代替案を見つけて、それもとても良いです。
複数のデータベース接続をサポート
に書いてあるYO!!“`javascript:hanoi.js
// [問題文（原文）]
// ハノイの塔というパズルがあります。
//
// 3つの杭があり、左から順にA,B,Cの杭とします。
// 杭Aに円盤が下から大きい順に n 個重なって置かれています。
// この円盤は必ず1つ上の円盤は下の円盤より小さくなくてはいけないルールがあります。
//
// このルールを守りながらAの杭からCの
新しいReactプロジェクトの始め方
## アジェンダ
新しいReactプロジェクトをセットアップするための基本的なステップをまとめます。## 1. Node.jsとnpmのインストール
Reactプロジェクトを始めるには、まずNode.jsとnpm（Node Package Manager）が必要です。これらがインストールされていない場合は、[Node.jsの公式サイト](https://nodejs.org/)からインストールしてください。### インストール方法（例：Homebrewを使用）
“`sh
brew install node
“`インストール後、以下のコマンドでバージョンを確認できます。
“`sh
node -v
npm -v
“`## 2. Create React Appの利用
Reactアプリケーションを素早くセットアップするために、Facebookが提供する公式のCLIツールであるCreate React Appを使用します。このツールは、プロジェクトの設定や依存関係の管理を自動化します。
### 新しいReactプロジェクトの作成
次に、`create-reac
[paiza]山あり谷ありラジバンダリ
# ありおりはべりいまそかり
`最近、ひたすら紙を折り続けるということがマイブームとなっているあなたは、今日もひたすら紙を折り続けています。それも、折り紙のような凝った折り方ではなく、紙の右辺が上から左辺に重なるような二つ折りを、ただひたすら繰り返すだけです。
`おいおいおい、プログラムのし過ぎで頭おかしくなったんか？
刺し身にたんぽぽ載せる仕事とかに転職したほうがいいんじゃない？
かと不安になる問題文の冒頭。。。https://paiza.jp/works/mondai/real_event/origami
# 面倒くさいので画面パタメータをListでもらった後のFunctionだけ
ちなみに引数のListを作ってる箇所は[こっちの記事](https://qiita.com/AsilHatake/items/842548e48ae4a0eae119)に書いてあるYO!!“`javascript:origami.js
// [問題文（原文）]
// 最近、ひたすら紙を折り続けるということがマイブームとなっているあなたは、今日もひたすら紙を折り続けています。それも、折り紙
