- 1. 🐳 DockerとNext.jsの基本:node_modules問題解決ガイド(AI)
- 2. #atcoder #プログラミング #Javascript # 本番環境自動判別方法等
- 3. Node.js と ws でシンプルな WebSocketサーバー: Bufferオブジェクトで受けとった文字列データを UTF-8 の文字列にする
- 4. ejsを使うときに必須コード!
- 5. プログラムにおける終了コードとは?その役割とNode.jsでの活用例
- 6. npm本体のバージョンアップデート方法
- 7. paiza.ioでnode.js その4
- 8. Boltオープンソースコードベースへようこそ
- 9. 【VRChat】OSCを使ってDiscordからチャットボックスに入力する
- 10. discord.js v15の時代がもうすぐそこへ
- 11. LINE Messaging API超入門〜概要編
- 12. SnowflakeとReactを使ったデータのリアルタイム可視化【初投稿】
- 13. これまでに勉強したWeb系技術。(ポエム)
- 14. label 要素の for 属性が正しく設定されているか調査する
- 15. GLIBCXX_3.4.26 not foundと言われたraspberry piでもできるだけ新しいnodejsが使いたい
- 16. Dockerでnode.jsイメージのコンテナを起動してみる
- 17. AWS IoT CoreをNode.jsやM5StackのUIFlowで試してみたよ
- 18. Node.jsで作るWebサイトのポイント、テンプレートエンジンとデータベース更にログイン認証
- 19. (Node.js) @mapbox/mbtilesモジュールを理解する
- 20. (Node.js) morganモジュールを理解する
🐳 DockerとNext.jsの基本:node_modules問題解決ガイド(AI)
## 🎯 目的
このガイドは、DockerとNext.jsを使用する際に発生する「node_modules」フォルダの消失問題について説明し、その解決方法を詳細な解説付きで提供します。## 📚 基本概念
### 🧱 Docker
仮想のコンピュータ(コンテナ)を作り、アプリケーションを動かすためのツールです。### ⚛️ Next.js
ウェブサイトやアプリケーションを作るための人気のあるJavaScriptフレームワークです。### 📁 node_modules
アプリケーションが正しく動作するために必要な部品(モジュール)が保存されているフォルダです。## 🚨 問題:node_modulesが消えてしまう
### 症状
– Dockerを使ってNext.jsのアプリを起動すると、`node_modules`フォルダが消失します。
– アプリケーションが正常に動作しなくなります。### 重要性
`node_modules`フォルダはアプリケーションの動作に不可欠です。このフォルダが消えると、アプリは必要な部品を見つけられなくなります。## 🕵️ 原因:バイ
#atcoder #プログラミング #Javascript # 本番環境自動判別方法等
**本内容を利用した場合の一切の責任を私は負いません。**
# 概要
初めてまともにやってみて、タイトルのものが欲しくなったんだけど、探しても見つからず、自作したもの。
(ローカルで大量のテストケースに耐えれるか確認するため、標準入力ではなく、1テストごとのファイルを大量に流し込みたい。
本番とローカルとでソースを分けたくない。)
既知だったり、別の方法があったりするかもだけど。
それと、他に気づいた点。# 本番環境自動判別方法
全部かはわからないが、提出画面の下に下記がある。![提出画面.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397476/421e9e4f-da76-2c90-372f-6530618648f8.png)
ということは、カレントにこのファイルがあれば本番ということになる。
(ローカルが異なるファイル名であることが前提。)
てことで下記で判別する。“`Javascript
var isSubmit = false;if (require(“fs”).exis
Node.js と ws でシンプルな WebSocketサーバー: Bufferオブジェクトで受けとった文字列データを UTF-8 の文字列にする
## はじめに
Node.js で下記の ws を使い、でシンプルな WebSocketサーバーを使う時の話です。過去にも、その内容の記事を書いていたのですが、今回は Bufferオブジェクトで受けとった文字列を扱う話に関わる、シンプルな内容です。
●ws – npm
https://www.npmjs.com/package/ws### 背景の補足
とあるハッカソンで、WebSocket を使った PC とスマホ・ガジェット等を連動させる通信処理を実装しようとした時に、特定の複数の文字列をキーに、複数の動作を行わせることをやろうとしました。そのテスト実装をした時、「文字列を送信する側が Bufferオブジェクトでデータを送る形」で、「受信側では、文字列変換した内容を扱いたい」という状況があってやった内容です。
## 実装内容
以下が本題です
今回、以下では、WebSocketサーバーの機能がある受信側の実装(かなりシンプルなもの)を示します。`npm i ws` でパッケージをインストールして、下記のプログラムを作り、nodeコマンドで動かします(接続は、例えば
ejsを使うときに必須コード!
## 書こうと思った理由
EJS を使っているときに、`res.render()` ではなく `express.static()` でやっていたから、ほかのコードなどでなぜかダウンロードされる現象を少なくしたいから。
`res.render()`は、例えばこんな風に使います:
“`js
app.get(‘/hoge’, (req, res) => {
res.render(path.join(__dirname, ‘/src/hoge.ejs’)); // <--ここ }); ``` **これがポイント!** 1. **`res.render('テンプレート名')`** - `'hoge'` は、テンプレートファイルの名前です。EJS では、通常 `.ejs` という拡張子を持つテンプレートファイルを使用します。この場合だと `src/hoge.ejs` というファイルが読み込まれます。 2. **データを渡す** - テンプレートにデータを渡したい場合、第二引数にオブジェクトを渡すことができます。この例では、`{ title: 'hogehoge'
プログラムにおける終了コードとは?その役割とNode.jsでの活用例
## はじめに
こんにちは。HRBrainでオウンドメディア・ランディングページの開発を担当している渡邉です。
先日、終了コードを真偽値と誤認したことが原因で、ハマりかけました。
終了コードは、プログラムが終了する際にOSへ返す数値であり、その値によってプログラムの実行結果を表しています。
この記事では、終了コードの役割と、Node.jsでの具体的な活用例を解説します。
## 終了コードを真偽値と混同してはいけない
プログラムの終了コードは `0` が成功、`0以外` がエラーや失敗を表します。
これは多くのプログラミング言語やOSで採用されている標準的な仕様です。
しかし、直感的には `0` はfalseや失敗を示し、`1` はtrueや成功を意味すると思いがちです。これが誤認の原因となります。
– 終了コード
– `0` → 成功
– `1` やそれ以外 → 失敗
– 真偽値(一般的な解釈)
– `0` → false
– `1` → true## 終了コードの特徴と一般的な値
終了コードには、以下のような特徴があります。
1. 終了コー
npm本体のバージョンアップデート方法
## npmのバージョンアップデート方法
npmのバージョンを最新に更新するには、Terminalで以下の手順を実施します。
### 1. 現在のnpmバージョンを確認する
“`sh
npm –version
“`### 2. npmを最新バージョンに更新する
“`sh
npm install -g npm@latest
“`### 3. 更新後、再度バージョンを確認して正しくアップデートされたか確認する
“`sh
npm –version
“`## 注意点
– グローバルインストールには管理者権限が必要な場合があります。その場合は、コマンドの前に`sudo`を付けて実行してください。
– Node.jsのバージョンによっては、特定のnpmバージョンが推奨される場合があります。Node.jsをアップデートすることで、推奨されるnpmバージョンも自動的に更新されることがあります。
– npmの更新後、他のパッケージやプロジェクトに影響が出る可能性があるため、更新前にプロジェクトのバックアップを取ることをお勧めします。
paiza.ioでnode.js その4
# 概要
paiza.ioでnode.js、やってみた。
練習問題やってみた。# 練習問題
リストなタプルをソートせよ。# サンプルコード
“`
process.stdin.resume();
process.stdin.setEncoding(‘utf8’);var rowElements = [{“timestamp”:”1728082796491″},{“timestamp”:”1728083796491″,”name”:”ai”,”publish”:”ture”,”condition”:”good”,”comment”:”ok”},{“timestamp”:”1728083845078″,”name”:”aita”,”publish”:”1″,”condition”:”good”,”comment”:”ok”},{“timestamp”:”1728082865943″},{“timestamp”:”1728360810390″,”name”:”test”,”comment”:”iine”},{“timestamp”:”1728362175611″,”name”:
Boltオープンソースコードベースへようこそ
> **Bolt**オープンソースコードベースへようこそ!このリポジトリには、StackBlitzの**WebContainer API**を利用した**AIによるソフトウェア開発ツール**の構築を始めるのに役立つ、bolt.newのコアコンポーネントを使用したシンプルなサンプルアプリが含まれています。
### BoltとWebContainer APIを使用して構築する理由
BoltとWebContainer APIを使用して構築することで、ユーザーが仮想マシンを必要とせず、ブラウザ上で直接フルスタックWebアプリを**プロンプト、実行、編集、デプロイ**できるブラウザベースのアプリケーションを作成できます。WebContainer APIを使用すると、AIがユーザーのブラウザタブ内の**Node.jsサーバー**、**ファイルシステム**、**パッケージマネージャー**、**開発ターミナル**に直接アクセスし、完全に制御できるアプリを構築できます。この強力な組み合わせにより、主要なJavaScriptライブラリとNodeパッケージをすぐに使用できる新しいクラスの開発ツールを作成
【VRChat】OSCを使ってDiscordからチャットボックスに入力する
# OSCを使ってDiscordからチャットボックスに入力する
こんにちは。VRChat始めたてのぽよたんぴです。
VRChatにはマイクがなくても会話できる「チャットボックス」という機能があります。ですが、文字を打ってる間は移動などができません(当然ですが)
そこで、VRChatにはOSC[^1]という、外部アプリからVRChatを制御できるAPIのようなものがあります。
今回はOSCとDiscordを使用して、スマホ版Discordから入力した文字をチャットボックスに送信するプログラムを作成していきます。# 必要なもの
– VRChat
– Node.js
– Discord# OSCを有効化
VRChatを開き、アクションメニューを開きますアクションメニューの開き方
– デスクトップ: Rキー
– Viveコントローラー: メニューボタン長押し
– Oculus Touch: B、Y長押し
– Indexコントローラー: B長押し参考: [リンク](https://vrchatjp.playing.wik
discord.js v15の時代がもうすぐそこへ
# 前置きと感謝
今年の8月にdiscord.js v13が[v13.17.1](https://www.npmjs.com/package/discord.js/v/13.17.1)で開発終了しました。
2021年6月([chore: prepare release](https://github.com/discordjs/discord.js/commit/cfde127072ae06b63f17ba19b3e0d28fddef97d6))から2024年8月までの3年間、お世話になりました!
![goodbye-discordjs-v13.png](https://cdn.oto.pet/img/goodbye-discordjs-v13.png)
[音声ファイル](https://cdn.oto.pet/aud/goodbye-discordjs-v13.mp3)# discord.jsの今後
discord.jsの現行サポートバージョンはv14です(執筆時点での最新は[v14.16.3](https://www.npmjs.com/package/discord.js/v
LINE Messaging API超入門〜概要編
## はじめに
今までいくつかLINEのMessaging APIを利用した記事を書いてきました。
* [Node.jsとMessagingAPIでLINEの応答ボットを作る](https://qiita.com/course_k/items/85bf9cfab971cb5b97ee)
* [Node.jsとMessaging APIでプッシュメッセージを送ろう](https://qiita.com/course_k/items/8a2448ac988bb6fc7914)しかし、どれも断片的な知識に留まるのみだったので、改めてその概要から機能まですべて網羅的に解説することにしました。
全何回になるかわかりませんが、すべての機能を解説する予定です。
最近はノーコードやローコードなど、コードを極力書かずにLINE BOTを作るのがはやっていますが、本シリーズでは自分で手を動かしてコードを一つずつ書くことで、その理解を深められるようにしていきます。
今回は第一回として、Messaging APIとはそもそも何なのかについて説明します。
## Messaging APIとは
###
SnowflakeとReactを使ったデータのリアルタイム可視化【初投稿】
# はじめに
はじめまして!:sunny:本記事では、Snowflakeに蓄積されたデータ(仮想IoT機器の温度)を、Express(Node.js)を使ったバックエンドで取得し、Reactフロントエンドを通じてリアルタイムで可視化するデモを紹介します。Snowflakeからのリアルタイムデータ取得から視覚化までの一連の流れが理解でき、IoTやデータ可視化などに応用できるはず…!
# 使用するライブラリとバージョン
このプロジェクトでは、以下のライブラリを使用します。– Node.js & Express: サーバーサイドでのAPI構築(Express v4.19.2)
– Socket.io: クライアントとサーバー間でリアルタイム通信を実現(Socket.io v4.7.5)
– Snowflake SDK: Snowflakeデータベースへのアクセス(Snowflake SDK v1.12.0)
– React: フロントエンドのUI構築(React v18.3.1)
– Chart.js: グラフの描画に使用(Chart.js v4.4.4)
– その他の依存関係
これまでに勉強したWeb系技術。(ポエム)
## これまでに勉強したWeb技術
## はじめに
Web開発超初心者が、ちょっとだけわかってきたので、
どんなふうに、勉強したかを紹介するポエム。ほとんどの方には、メリット0の記事となると思います。
## HTML・CSS・JS
htmlだけのシンプルなサイトをいくつか作ってきたので、
「調べたらどんなこともできる状態」
になってきた。CSSのプロパティとかJSのAPIやらは無限にあるので、覚えなくていいと思う。
アニメーションを作るのが楽しい。
## GAS(Google Apps Script)
バックエンドの処理を書きたいなーと思ってたら、
GASで簡単にAPIを作る。クロスドメイン制約がめんどくさかったけど、
簡単に、バックエンドの導入だ。ついでに、HTTPについてもお勉強。JSON便利やなー
でもなんでサーバーでJSが動くんだ?
## Node.jsの発見
Node.js。
これまで、ブラウザでしか動かないはずのJavaScriptがサーバー側で動く。普通にすごい!
でも何がしたかった?
## TypeScript
先延ばしにした
label 要素の for 属性が正しく設定されているか調査する
「システム内の jsp にある label 要素の for 属性が正しく設定されているか調査したい」と知り合いに相談されて、ぱっと解決策が浮かばなかった。
別な行だったり離れていたりする場合があり、単純な文字列検索では難しい。ページ単位でアクセシビリティ系のツールで調査できそうだが、システム内に数多くある Web ページを一括で調査するのは大変そう。あと地味に jsp という単純に html としてパースし辛い対象であることも課題。
結局、NodeJS で簡単なツールを書いて渡したので、メモとして残しておきます。
# label 要素の for 属性
今回相談されたのは、例えば以下のように間違った html が読み込まれた場合、
“`html
“`Chrome ブラウザだと以下のようにエラー表示がされてしまうという状況。
GLIBCXX_3.4.26 not foundと言われたraspberry piでもできるだけ新しいnodejsが使いたい
raspberrypi1(Raspberry Pi Model B Rev 2)がある。
普通にインストールしたら動かない
> libstdc++.so.6: version `GLIBCXX_3.4.26′ not found (required by node)
https://github.com/homebridge/homebridge/issues/3453
## 方針
[症状](https://github.com/homebridge/homebridge/issues/3453#issue-1960138201)によるとv18.18.2までは正常に動いている。
そこで動く最終版であろうv18.18.2をインストールする
でも普通にインストールするとめちゃめちゃ古い## nvm使ってみる
“`bash
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
nvm install v18.18
“`けれどくそ遅いしエラーになるし解決策になら
Dockerでnode.jsイメージのコンテナを起動してみる
こんにちは。
まもなくエンジニア歴が3年目となり、そろそろインフラ系の知見を増やしておきたいなーと思いまして、**Docker**に手を出してみました。JavaとかJavaScriptだとかは、問題なく読めるし書けるようになりましたが、作ってるアプリケーションが動くには、土台となる環境が必要ですからね。
実際に手を動かしながら、インフラ知識をキャッチアップしていこうと思います。
いざスタート!:::note info
今回のゴールとしては、Windows11上で開発しているVue.jsプロジェクトを、Ubuntu上のDockerコンテナ上で動作させること!を目標に頑張ります。
:::## Dockerとは
そもそも私の場合、環境をいじるのが初めてなので、何の説明を読んでもよく分からないのですが…
ホストOSとゲストOSってあって、ゲストOSに環境作ってアプリケーション開発するというのが、`ホスト型仮想化` で。対する Docker のような `コンテナ型仮想化` は、ホスト上にコンテナという仮想環境を作ることで、なんかホスト型より軽いらしいです。
(という事が至る所
AWS IoT CoreをNode.jsやM5StackのUIFlowで試してみたよ
## AWS IoT Coreは使ったことなかった
たぶんクラウドのブローカーサービスでいいんですよね### ちょっとMQTTのおさらい
![image02_new.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1326419/651d8bd1-d41e-c41d-38de-7cee7aa857dd.jpeg)参考:https://kfep.jp/solution/iot-mqtt/mqtt
## 実は結構詰まった
参考サイト
– https://zenn.dev/kou_pg_0131/articles/aws-iot-core-mosquitto
– 「モノ」を作らずにやったほうがまずはいいかも
– セキュリティ的に全部オッケーなものが作れる
– 自動的に作られるよりまずは一個ずつ作ったほうが理解しやすかったので## AWS側の設定
1. 証明書作成
1. 作ったときしかダウンロードできないので注意
2. ポリシー作成
1. まずは全部許可
Node.jsで作るWebサイトのポイント、テンプレートエンジンとデータベース更にログイン認証
パート1「テンプレートエンジン ejsの使い方。」
webサイトの構築を考える上で必要なイメージはWordpress等を代表するサイトデザインのテンプレートを利用し、投稿の内容はデータベースへ保存し、当然のようにログイン機能でサイトを保守する。この様な機能を網羅したサイトを今更ですが、Node.jsで作る為のメモを記載して行きます。
基本的にPC内に、node,npm等が使用可能な環境で、編集はvscodeとします。(node v22.2.0 npm 10.7.0)
ファイル構成は下記。
server.jsは下記の様。
“`
//Imports
const express = require(“express”);
const expressLayouts =
(Node.js) @mapbox/mbtilesモジュールを理解する
# はじめに
node.jsのコードの中で@mapbox/mbtilesモジュールを使用する機会があったので、どのようなモジュールであるのか簡単にまとめたいと思います。# @mapbox/mbtilesモジュールとは
Mapbox社 によって提供されている、Node.js 用のライブラリで、MBTiles 形式の地図タイルファイルを扱うためのツールです。MBTiles は、地図タイルデータを SQLite データベースにパッケージ化したファイル形式で、オフラインで地図データを提供する際にも使用できます。## 主な特徴
MBTiles ファイルの読み込み・アクセス:
.mbtiles ファイルに保存された地図タイルデータにアクセスできます。これにより、地図アプリケーションでタイルを効率的に表示したり、オフライン地図を提供することが可能です。タイルデータの取得:
ズームレベル (z)、x座標 (x)、y座標 (y) を指定して、対応するタイルデータを取得します。非同期処理に対応:
非同期でタイルファイルを開いたり、タイルデータを取得したりできるため、Node.js ア
(Node.js) morganモジュールを理解する
# はじめに
node.jsのコードの中でmorganモジュールを使用する機会があったので、どのようなモジュールであるのか簡単にまとめたいと思います。# morganモジュールとは
Node.jsアプリケーションで使用されるHTTPリクエスト(レスポンスではなく!)のロギングミドルウェアです。ExpressなどのWebフレームワークと組み合わせて使うことが一般的で、アプリケーションに送られてくるリクエスト情報(メソッド、ステータスコード、URL、レスポンスタイム(厳密にはリクエストに対するサーバーの応答時間を指すがこの情報も含む事ができる)など)を簡単にログとして記録することができます。## 主な特徴
・HTTPリクエストのログ
サーバーに送られるすべてのHTTPリクエストをログに残します。リクエストの情報を記録することで、アプリケーションの動作確認やデバッグに役立ちます。・プリセットのログフォーマット
Morganは、combined、common、dev、short、tinyといったプリセットフォーマットが用意されており、すぐに使用できます。・カスタムフォーマット