- 1. Railsでwebpack-dev-serverが起動できないエラー
- 2. Vercelでフルスタックアプリをデプロイする方法（ReactJS | Vite | NodeJS | TypeScript | Neon | PostgreSQL）
- 3. onMounted直後に処理を呼び出す方法
- 4. 古いバージョンのNodeやRubyで作ったアプリをherokuでデプロイする際の設定
- 5. 【VSCode】npmのpackage.jsonに勝手にdependenciesが追加される
- 6. Voltaを使ってNode.jsやnpmのバージョンをpackage.jsonに記載する方法
- 7. CursorでReact + Tailwind CSS IntelliSenseを設定する方法
- 8. qiita-cliからの投稿時にXに自動でポストできるようにする
- 9. 生成AIを信用しすぎてハルシネーションに引っかかった話
- 10. パッケージマネージャーについて
- 11. Honoに入門してみる
- 12. Bunのクイックスタートをさわってみた
- 13. Armadillo IoT A6EでNode開発(+GPIO/LED制御)
- 14. 1を出力する場合がある乱数を作りたい話
- 15. 使い捨てメールアドレスか判定する 薄い npm パッケージを作った
- 16. 【MySQL＋Node.js】要素ごとに異なるｎを使って、1回目～ｎ回目の値を集計表示する方法
- 17. 関数が呼び出された箇所のディレクトリを取得する方法
- 18. Node.jsとはなにか？なぜみんな使っているのか？
- 19. もしPHPが使われなくなったら、どのバックエンド言語を選ぶか？
- 20. AWS Lambda（Node.js 18.x）でwkhtmltopdfを使用するまでの流れ
Railsでwebpack-dev-serverが起動できないエラー
## はじめに
デイトラWeb開発コースを進めている中でwebpack-dev-serverが実行できず、めちゃくちゃ解決に時間をかけてしまったため、原因と解決策を残しておきます。
時間はたくさん使ってしまいましたが、一方で理解が深まった面もあるので、その点も最後にアウトプットします。## 問題
Railsのプロジェクトで`bin/webpack-dev-server`を実行すると、`Command “webpack-dev-server” not found.`のエラーが出る## 原因
node.js,rails/webpacker,webpack,webpack-dev-server,webpack-sliの互換性がない## 解決策
package.jsonに以下を記載
“`
“engines”: {
“node”: “14.16”
},
“devDependencies”: {
“webpack”: “4.x.x”,
“webpack-cli”: “3.x.x”,
“webpack-dev-middleware”: “3
Vercelでフルスタックアプリをデプロイする方法（ReactJS | Vite | NodeJS | TypeScript | Neon | PostgreSQL）
この記事では、Vercelを使ってフルスタックアプリケーションをデプロイする方法をステップバイステップで紹介します。
具体例として、実際にデプロイしたプロジェクトを本記事下部の[ （参考）](#参考実際にデプロイしたプロジェクト)から確認できます。
## 前提条件
デプロイを始める前に、以下の条件を満たしていることを確認してください。
– GitHub上にリポジトリがあり、`frontend`フォルダーと`backend`フォルダーに分けられていること
– GitHubとVercelの連携ができていること
– フロントエンド・バックエンド・DB間の接続がテスト環境上で確認できていること## バックエンドをVercelにデプロイする
まずはじめに、バックエンド側をデプロイします。### Step1. Vercelにログイン
まず、Vercelに[ログイン](https://vercel.com/login)、またはアカウント未登録の場合は[サインアップ](https://vercel.com/signup)してください。### Step2. 新しいプロジェクトの追加
onMounted直後に処理を呼び出す方法
# まとめ
setTimeoutで処理をタイマー設定しておき、onMounted内での処理は全て終わったように見せることで対応した。
“`typescript
onMounted(() => {
setTimeout(() => {
isOpen.value = true; // ここにmounted直後に呼び出す処理を記述
}, 0);
});
“`### 追記：コメントでアドバイスいただきました
#### 1. queueMicrotask
> マイクロタスク (microtask) とは、現在のタスクが完了し実行コンテキストの制御がブラウザーのイベントループへ戻る前、他に保留中のコードがなくなった時点で走る短い関数です。現在のイベントループ内でのタスク完了後に自動で処理を走らせてくれる。
setTimeoutよりも軽量。“`typescript
onMounted(() => {
queueMicroTask(() => {
isOpen.value = true; // ここにmounted直後に呼び出
古いバージョンのNodeやRubyで作ったアプリをherokuでデプロイする際の設定
## この記事の内容
### 起きたこと
herokuを使って講座で作成したWebアプリをデプロイしようしたところ、なにやらたくさんエラーが起こりました。
おきたエラーの詳細はエラー詳細に記載しています。### 前提（バージョンなど）
– Ruby：2.7.7
– Rails：6.0.6.1
– Node.js：14.15.0
– Windows11でUbuntu(WSL2)を導入### 原因
– Rubyのバージョンがherokuの最新バージョンに対応していなかった
– Nodeのバージョンがherokuが標準で使用するバージョンと異なっていた
– buildpackを導入していなかった## エラー詳細1
### エラーメッセージ
“`
!
! The Ruby version you are trying to install does not exist on this stack.
!
! You are trying to install ruby-2.7.7 on heroku-22.
!
! Ruby ruby-
【VSCode】npmのpackage.jsonに勝手にdependenciesが追加される
アホほど時間を溶かしたので備忘録を。
自分の場合、springbootで構築したプロジェクトのカレントフォルダで`npm init`した後にこれが起こった。## 自動的にdependenciesがもりっと追加される
なぜか`npm init`した後、自動生成される`package.json`にinitしたプロジェクト全体が依存関係として追加される。
“`json:package.json
{
“name”: “my_project”,
“version”: “1.0.0”,
“description”: “例”,
“main”: “index.js”,
“scripts”: {
“sass”: “sass –watch styles.scss styles.css”
},
“keywords”: [],
“author”: “”,
“license”: “ISC”,
“dependencies”: {
“my_project”: “file:”
},
“devDependencies”: {
“sas
Voltaを使ってNode.jsやnpmのバージョンをpackage.jsonに記載する方法
## 概要
Node.jsのバージョン管理ツールであるVoltaを使ってNode.jsやnpmのバージョンをpackage.jsonに記載する方法を簡単にまとめる。
## 方法
### Node.jsのバージョンを記載
下記コマンドを実行
“`terminal
volta pin node
“`### npmのバージョンを記載
下記コマンドを実行
“`terminal
volta pin npm
“`## メモ
ちなみに、Voltaが入っており、package.jsonにNode.jsやnpmのバージョン情報が記載されていた場合、そのディレクトリに移動したときにVoltaがよしなにバージョンを変更してくれるらしい。
CursorでReact + Tailwind CSS IntelliSenseを設定する方法
# はじめに
CursorエディタにてReactコンポーネント内でTailwindのクラスを入力し始めると
Tailwind CSS IntelliSense の機能がうまく動かなかったので設定する手順を説明します。# そもそもTailwind CSS IntelliSenseって
Tailwind CSS IntelliSense はどんなものかというと
Tailwind CSSのClass名を自動で補完できるようになる必須の拡張機能です。https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
# 前提条件
– Cursorエディタがインストールされていること
– Node.jsとnpmがインストールされていること
– Reactプロジェクトがすでにセットアップされていることhttps://www.cursor.com/
# 手順
### 1. Tailwind CSSのインストール
まず、プロジェクトにTailwind CSSをインストールします。
http
qiita-cliからの投稿時にXに自動でポストできるようにする
# 1. はじめに
qiita-cliというQiitaの記事をGithub上で管理投稿できるライブラリが公式から用意されています。https://www.npmjs.com/package/@qiita/qiita-cli?activeTab=readme
ブラウザから投稿すると投稿時にポストするかのモーダルが出てくれますが、qiita-cliからは対応してないみたいなので自動でポストするように改変してみます。
**バージョンの追従が非常にめんどくさくなるのでオススメはしません。**ここからは企業様のレポジトリをforkして改変していくので一応ライセンス表記
:::note warn
`qiita-cli`は、Apache License 2.0の下でライセンスされています。詳細については、[LICENSEファイル](https://raw.githubusercontent.com/increments/qiita-cli/main/LICENSE.md)を参照してください。
:::# 2. 環境
・すでにqiita-cliのセットアップが完了しているローカルレポジ
生成AIを信用しすぎてハルシネーションに引っかかった話
# はじめに
皆さんは日々の業務でAIを利活用しておりますでしょうか。
生成AIの進化は凄まじく、プログラミングの経験が浅い人でも、簡単なアプリケーションくらいなら作れてしまうほどです。すごい時代ですよね。
私自身、要件定義は自身で行い、コーディングはAIに任せるような場面も多いです。しかし、生成AIを扱う上で常に意識すべきことは、「AIは常に完璧ではない」ということです。
AIの精度は日々進化を続けていますが、それでもハルシネーションが完全に改善できているわけではありません。
> ハルシネーションとは？
ハルシネーション（Hallucination）とはもともと「幻覚、幻影」という意味です。 生成AIがユーザーの質問に対して、事実とは異なる情報を利用して回答を生成することを指し、「もっともらしいうそ」といった意味合いで、こう呼ばれるようになりました。そのため、AIが生成したコードをそのまま使用すると、予期せぬエラーに遭遇することがあります。特に厄介なのは、AIのコードを丸写しにした場合、エラーが発生しても原因の特定が難しく、解決に膨大な時間を要することがあるのです。
こ
パッケージマネージャーについて
パッケージマネージャー周り（主にnpm）を整理してみました。
## パッケージとは
ソフトウェアのコード、リソースをまとめたもの。
関数、クラス、変数、静的ファイルなどが含まれる。要は便利な機能をパッケージ化して提供していて、開発者は関数、タグなどを呼んで使うだけで0-1で実装しないで済み、開発効率を上げられる。
> 例）時刻の操作（day.js）、グラフの描画（chart.js）など
*パッケージをライブラリと呼んでもOK
## 依存関係とバージョン管理
パッケージは他のパッケージを使用している事がある。これを **依存関係** と呼びます。
例）Expressは裏側で沢山パッケージを使用していて、更に複雑にバージョンが絡んでいるそんな複雑な依存関係を人間が管理、解決するのは困難。
それをまとめていい感じに管理してくれるのが**パッケージマネージャー**## パッケージマネージャーとは
プログラムを一貫した方法でインストール、アンインストール、パッケージの依存関係を解決する流れをツールによって管理を自動化するシステム#### パッケージマネージャーの種類
Honoに入門してみる
# Honoとは
Hono (日本語の炎🔥からきてるみたい) は、Web標準に基づいて構築された小型でシンプル、かつ超高速なWeb フレームワークのこと。
Cloudflare Workers、Fastly Compute、Deno、Bun、Vercel、Netlify、AWS Lambda、Lambda@Edge、Node.js など、あらゆるJavaScriptランタイムで動作する。# とりあえず実践
※ Cloudflare Workersで動かすことを前提とする。1. プロジェクトを作成する。
– 以下のコマンドを実行する。
“`bash
npm create hono@latest my-app
“`
– いくつか質問されるので以下のように回答する。
“`bash
? Which template do you want to use?
#=> cloudflare-workers? Do you want to install p
Bunのクイックスタートをさわってみた
# はじめに
webエンジニアの風速です。
今回は前から聞いたことのあった、Bunを触ってみようと思います。# Bunとは
安定版がリリースされたのは2023年の9月で、JavaScriptおよびTypeScriptアプリ用のall-in-one toolkitで、そのなかでもメインがNode.jsの代替として設計された高速JavaScriptランタイムです。他にもテストランナー、スクリプトランナー、Node.js互換パッケージマネージャーなどの機能があります。
超速そう！# インストール
今回はmac OSを使用するので、brewでインストールします。
“`
$ brew install bun$ bun –version
1.1.26
“`# クイックスタートを試してみ
Armadillo IoT A6EでNode開発(+GPIO/LED制御)
# はじめに
Armadillo-IoT A6E(以下Armadillo)に繋いだ機器をGPIOで制御するアプリを開発することになった。(後に時間もできたのでLED制御も追加)
Armadillo開発、コンテナ開発、さらにそれらで稼働するアプリをNode+JavaScriptで開発することが初めてでもあったので躓いた点などをまとめていく。
※Node+JavaScriptで実現しようと思ったのは他の組み込み機器やRaspberryPiで利用していたソース/ロジックの多くを流用できそうだったから。
本記事で記載する項目は主に以下となる。
## ATDE
* 環境構築
* dockerネットワーク(docker0)のセグメント
* vimのマウス制御
* コンテナのバージョン(1桁の数字)をmajor.minor.rev.buildなどの形式に変更する
* コンテナからのコンテナバージョン参照## Armadillo
* 固定IPアドレス付与(nmcli利用)
* 固定IPアドレス付与(量産用のインストールディスクのip_config.txt利用)
* SSH有効化
*
1を出力する場合がある乱数を作りたい話
:::note warn
(実用性は)ないです。
記事の本文及びソースコードに誤りがある場合があります。
誤りなどがあればコメントで教えてください。
:::
どうも
Qiitaではおそらく初投稿だと思います。
普段は[note](https://note.com/otoneko1102)や[GitHub](https://github.com/otoneko1102)で活動しています。## 今回のお話
ふとした思いつきからの試みです。
JavaScriptやだいたいの言語で乱数を生成するとき、初期テーブルのままの場合、 **0~1** の乱数を返しますよね。
“`js
Math.random()
“`
でも、これは **0以上1以下** ではなく **0以上1未満** の乱数しか返さないんです。今回実現したいのは **浮動小数点数も扱える0以上1以下の乱数を出力する関数** です！
## 実装してみる
### 条件
1. ある程度すべての値が出る確率が等しいこと。
2. 処理が速いこと。
3. 他の関数などにも応用が効くこと。### v1
#### コード
“`js
使い捨てメールアドレスか判定する 薄い npm パッケージを作った
## はじめに
使い捨てメールアドレスか判定する 薄い npm パッケージを作成しました。
https://github.com/mziyut/disposable-email-domains-js
https://www.npmjs.com/package/disposable-email-domains-js
## 使い捨てメールアドレス とは
捨てアドなどと呼ばれる、一時的な使用を目的としたメールアドレスのこと。
https://wa3.i-3-i.info/word110724.html
## 作った背景
使い捨てメールアドレス一覧を GitHub 上にまとめてくださっている方が居ました。
https://github.com/disposable-email-domains/disposable-email-domains
README.md には、Python, PHP, Go, Ruby on Rails, Node.js など様々な言語で使用する方法が記載されています。
一部の言語では Package, Module として公開され簡単に使うことが
【MySQL＋Node.js】要素ごとに異なるｎを使って、1回目～ｎ回目の値を集計表示する方法
# 作業記録テーブルのcontents要素について、ｎ回目までの作業データを集計・整理したい（※ただしｎ≠一定）
## 作業記録テーブル(`test_log`)の概要
**特徴**
– カラムは`id`、`user`(作業者)、`contents`(作業内容)、`time`(作業時刻)、`upload_time`(記録した時刻)
– 同じ作業内容が複数回行われるが、その際の作業者・作業時刻はランダムに決まっている
– 記録した時刻
関数が呼び出された箇所のディレクトリを取得する方法
– next.jsといったwebページのパスとディレクトリが対応しているフレームワークで、ディレクトリ名を変えると他の箇所も記述を変える必要があるといったことに対応したい
# コード
以下を貼り付けて実行すると、この関数が実行されたファイルのディレクトリパスが表示される
“`typescript
// denoならこれ↓を記述
// import * as path from “node:path”;
// import * as fs from “node:fs”;
import * as path from “path”;
import * as fs from “fs”;
/*
* find Directory when you call this function
*/
export const findCurrentDirectory = (): string | undefined => {
const err = new Error();
const stack = err.stack?.split(“\n”) || [];// 呼び出し元のスタッ
Node.jsとはなにか？なぜみんな使っているのか？
[Node.jsとはなにか？なぜみんな使っているのか？](https://qiita.com/non_cal/items/a8fee0b7ad96e67713eb)
という記事をAIで動画にしてみました。
もしPHPが使われなくなったら、どのバックエンド言語を選ぶか？
私はベテランのバックエンド開発者として、PHPは私のキャリアにおいて重要な役割を果たしてきました。しかし、技術の世界は日々変化しており、常に新しい挑戦に備える必要があります。では、もしPHPが今日突然消滅したら、どのバックエンド言語を選ぶでしょうか？以下が私の鋭い見解です。
## 1. Golang
まず、私は間違いなくGolang（Go言語）を選びます。なぜなら、Golangは性能が優れているだけでなく、開発体験も非常に良いからです。PHPと比べて、Golangの並行処理能力はまさに雲泥の差です。Golangのコードを書くことは、面倒な設定や終わりのないデバッグがない、楽しい旅のようです。
Golangの標準ライブラリは非常に強力で、ほぼすべての開発ニーズを満たすことができます。また、Golangの”Bring your own”アプローチは、フレームワークに縛られるのが嫌な開発者にとってまさに理想的です。各構造体のために個別のファイルを作成する必要はなく、エラーハンドリングもより直接的で透明です。要するに、Golangはコードそのものに集中できるようにしてくれます。
##
AWS Lambda（Node.js 18.x）でwkhtmltopdfを使用するまでの流れ
# wkhtmltopdfを使用することになった背景
## Puppeteerでは大容量ファイルに対応できなかった
私が開発しているLaravelのWebサービスでは書類をPDF生成するという機能があります。
今まではAWS Lambda上でPuppeteerを使用してPDF生成を行っていましたが、最近になってHTMLファイルの時点で65MBという巨大なファイルをPDF生成するケースが発生し始めてしまい、実行途中でブラウザのタイムアウトや切断が発生するようになってしまったため、緊急で他の方法に入れ替えなければならなくなりました。## 他の選択肢の検討
最初に検討したのはLambdaを使用することを辞めて、[barryvdh/laravel-dompdf](https://github.com/barryvdh/laravel-dompdf)をWorker上で動かす運用でしたが、大きいHTMLファイルの処理に非常に時間がかかるため断念しました。
wkhtmltopdfはパフォーマンスに優れているのと、Lambda関数上でPuppeteerを使用している部分を入れ替えるだけで済むので、
