- 1. SpringBootで包み込むVue.js開発環境 カンタン構築
- 2. 【Node.js】Error: error:0308010C:digital envelope routines::unsupportedの解決法
- 3. Docker環境のNode.js + TypeScriptでDatadogAPMを検証する
- 4. Google Cloud Runでdeployできないエラー備忘録
- 5. [TypeScript] Expressをやってみる(10分で?)
- 6. Qiitaの記事をGithub で管理したくて、WSL にvolta でnode インストールしてQiita 記事をpull まで
- 7. NodejsでS3にファイルをアップロード・ダウンロード
- 8. npx コマンドでCLIを実行したら”could not determine executable to run”って言われた
- 9. 「Error: error:0308010C:digital envelope routines::unsupported」エラーでビルドができない
- 10. デジタルお小遣い帳を作ってみたい!by初心者 第1回目
- 11. Reactからffmpeg.wasmを使って動画にウォーターマークを埋め込んでみる
- 12. SvelteKitで稀にchunkファイルがNot foundエラーになる問題に遭遇した
- 13. Astroのススメ
- 14. sveltekit-view-transitionを使ってSvelteKitでView Transition APIを簡単に使う
- 15. Symbolノードリスト取得Script
- 16. GitHub Actions上でのprocess.stdout.clearLine is not a function
- 17. Node.jsでTCP通信する簡易クライアントとサーバを作ってみた
- 18. OpenShift 上の container に Dev Containers でアタッチする
- 19. GitHub Organizationから専用のNode.jsのパッケージを展開する
- 20. Qiita ハッカソン 2024 準備編
SpringBootで包み込むVue.js開発環境 カンタン構築
# はじめに
こんにちは。バックエンドエンジニアを目指して奮闘中のひろえです。
突然ですが、未経験・独学の身では、何から勉強を始めて、何に重点を置くかって大事ですよね。
私自身も `Java` や `Spring Boot` から学び、バックエンドに力を入れてきました。
しかし、ポートフォリオを作るうえでも、フロントエンドやインフラに関しても最低限メジャーな技術は押さえておきたいところ。ということで、簡単にフロントエンドを始めるべく、私の希望をざっと挙げてみました。
– フロントエンドはほとんど触ったことがないから最小構成から始めたい
– `Webpack` や `Babel` を導入したい
– `Vue.js` の単一ファイルコンポーネント使ってみたい
– `CI/CD` 環境や本番環境でもシンプルに環境構築できるようにしたい
– 静的アセットは `jar` ファイルに同梱し、`Spring Boot` の静的リソース配信機能を利用して配信したい希望を叶えるため、あれこれ調べているうちに以下の記事に出会いました。
[領域展開「Gradle」で Node.js を制する
【Node.js】Error: error:0308010C:digital envelope routines::unsupportedの解決法
# Reactのwebアプリをローカルサーバーで起動できなくなった
あるwebサイトを久しぶりにアップデートしようと手を加えて確認しようとした。“`
$ npm start
“`すると見たことも無いエラーが表示されたのである。。。:rolling_eyes:
“`console
Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:69:19)
at Object.createHash (node:crypto:138:10)
at module.exports (/home/yonas/git/server/ui/node_modules/webpack/lib/util/createHash.js:135:53)
at NormalModule._initBuildHash (/home/yonas/git/server/ui/node_modules/webpack/lib/NormalM
Docker環境のNode.js + TypeScriptでDatadogAPMを検証する
前提として、ローカル環境にDockerインストール済み、Datadogのアカウント作成済みの方を対象としています。
# Datadogにて前準備
APM導入に必要なAPIキーとアプリケーションキーを作成します。
## APIキーの取得
Datadogにログインしたらメニューの一番上にある「Go to」を押下します。
検索窓にて”api”と入力して「API Keys」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1671245/57d4cd87-0809-705d-6b47-1f5af3eec4ac.png)遷移したら右の方にある「+ New Key」というボタンを押下します。
適当な名前を入力してAPIキーを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1671245/88495ede-d4c8-e41b-b9cb-d9f819ea9c5e.pn
Google Cloud Runでdeployできないエラー備忘録
# 場面
GCP Cloud Runの[公式tutorial](https://cloud.google.com/run/docs/quickstarts/build-and-deploy/deploy-nodejs-service?hl=ja)実行中# 環境
WSL2 Ubuntu
Google Cloud SDK 463.0.0
node v21.5.0# エラーメッセージの確認
[公式tutorial](https://cloud.google.com/run/docs/quickstarts/build-and-deploy/deploy-nodejs-service?hl=ja)の以下のコード実行時に発生
“`sh
gcloud run deploy
“`
コンソール画面にログ確認用のURLが表示されるので、ブラウザでチェック# エラーメッセージ
“`
Step #1: ERROR: failed to build: executing lifecycle. This may be the result of using an untrusted
[TypeScript] Expressをやってみる(10分で?)
# はじめに
typescriptでAPIを作ってみたいなぁと思い、expressを始めてみました。そこで、めっちゃ初期のところは簡単だったので、書いてみる# Step1: フォルダの作成
最初に、プロジェクト用の新しいフォルダを作成します。任意の名前をつけてください。
今回は`express-ts-app` を使用します。“`bash: bash
mkdir express-ts-app
cd express-ts-app
“`# Step2: npmプロジェクトの初期化
プロジェクトフォルダ内で、以下のコマンドを実行してnpmプロジェクトを初期化します。
これにより、`package.json`ファイルが作成されます。“`bash: bash
npm init -y
“`ちなみにこのときの `-y`は、**yes**の略です。すべての質問に自動的に「はい」と回答します。`npm init`だけを実行した場合には、プロジェクト名、バージョン、説明、エントリポイント、テストコマンド、gitリポジトリ、キーワード、ライセンスなどについて、入力や回答を求めら
Qiitaの記事をGithub で管理したくて、WSL にvolta でnode インストールしてQiita 記事をpull まで
# 今回の趣旨
Qiita の記事をQiita 内で管理してもよかったのですが、どうせならGithub で管理してみたいなという欲望があったので、設定をしてみることにしました。その時にWSL と普段は連携しているので、WSL 上にnode をインストールする必要が出てきました。
# 今回の記事の前提
– Github のアカウントをもっていること
– Qiita でpersonal access token を発行済みであること
(後にGithub action を使うため)# volta install
curl でvolta をインストールします。
“`powershell
$ curl https://get.volta.sh | bash
“`volta のインストールの確認をしていきます。
“`
volta -v
1.1.1
“`(volta のバージョンを確認するコマンドでバージョンが表示されない時は、一度WSL などを閉じてから再度開いてみるとバージョン確認コマンドが通ると思います。)
# node install
今回 Qi
NodejsでS3にファイルをアップロード・ダウンロード
### 概要
こちら記事では、NodeJSでローカルでS3アップロードとダウンロードの基本的な方法を書かせていただきます。
内容として5つあります
1.環境
2.前提
3.初期設定
4.アップロード
5.ダウンロード
6.最後
7.参考
### 1.環境
– Nodejs v21.6.0
– MacOS### 2.前提
– デモ用のS3 バッケットが作成済み
– ローカルに認証情報ファイル設定ずみ (まだ設定しない場合は[こちら](https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/cli-configure-files.html)をご参考してください)
– プロフィルにせめてS3アクセス権を付与
– デモ用画像を準備### 3.初期設定
作業のフォルダを作成
“`bash
desktop/m
npx コマンドでCLIを実行したら”could not determine executable to run”って言われた
# 動作環境について
デスクトップのWindows環境と、ラップトップのChromeOS(CrostiniでDebianが動作)環境の2種類で開発していた。Nodejsのバージョンはどちらもv20.22.0# 経緯
理由は分からないが、あるプロジェクトではnpxコマンドでfirebaseエミュレーターを起動させる構成になっていた。そしてなぜかWSLではエミュレーターが動いたのにCrostini側でエラーが発生して起動しないという問題が発生。“`bash
npx firebase emulators:start –export-on-exit=’./.emulator’ –import=’./.emulator’
npm ERR! could not determine executable to run
“`雑に訳すと「お前が入力したコマンドは実行できるように見えない」みたいな感じだと思われる。
# 原因:パッケージ名とコマンドが揃っていない。
エラーメッセージで検索するとすぐに情報が見つかった。https://kazuhira-r.hatenablog.co
「Error: error:0308010C:digital envelope routines::unsupported」エラーでビルドができない
# 問題
「Error: error:0308010C:digital envelope routines::unsupported」というエラー発生してビルドができない。# 環境
Mac OS# 原因
Node.jsの新しいバージョンにしたことで、パッケージやライブラリとの互換性に問題が生じたため。# 解決方法
nvmが入っていない場合はインストール
“`bash
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
nvm –version
“`ここで
「-bash: nvm: command not found」というエラーが返ってきた場合は“`bash
source ~/.nvm/nvm.sh
“`
上記のコマンドを実行。その後、改めてお好きなバージョンのnvmをインストール
“`bash
nvm install 12.0.0
nvm use 12.0.0
“`再度ビルドを行なって確認
“`bash
npm run bui
デジタルお小遣い帳を作ってみたい!by初心者 第1回目
## はじめに
この記事は、初心者がWebアプリ制作を通して力をつけていこう!という趣旨の記事です。
途中で躓くかもしれません。その際はごめんなさい。
アドバイス等はとてもうれしいのですが、誹謗中傷はおやめください(泣きます)。## なぜお小遣い帳なのか
・自分で使えるものが欲しかったから
・家族が家計簿を欲しがっていたから(それっぽいものをつくって褒められたい!!)## 自分の技術力
JavaScriptを少し触ったことがある程度
なので実はハードル高め!## 使いたい思っている技術
・React
・Node.js
・Express
・MongoDB
・vite## 作りたいアプリに必要な機能(ページ)
・収入入力ページ
・支出入力ページ
↓ここからはいずれ挑戦
・ほしいものページ
・グラフビューページ
・サブスクページ
・目標ページ## 今回作るもの
アプリのひな型!### 1.開発用のフォルダを作る
・名前はそのまんま”money-book-mern”としました。
・フォルダをVScodeで開きます。
・viteを使ってプロジェクトを作成します
`
Reactからffmpeg.wasmを使って動画にウォーターマークを埋め込んでみる
## 概要
Reactでffmpeg.wasmを使って、選択した動画ファイルに対してウォーターマーク(透かし)を埋め込むツールを作ります。## ffmpeg.wasmとは
[ffmpeg.wasm](https://github.com/ffmpegwasm/ffmpeg.wasm)は、FFmpegの純粋なWebassembly/Javascript移植版です。ブラウザ上でビデオやオーディオの録画、変換、ストリーミングを行うことができます。Webassemblyなので従来はサーバサイドで行っていた動画リソースに対するいろいろな処理をクライアントで処理することが可能になります。## Reactのプロジェクトを用意する
予めNode.jsのv16以上を使えるようにしてください。
“`bash
# バージョンをチェック
$ node -v
“`
### インストール
今回は[Vite](https://ja.vitejs.dev/)を使います。
“`bash
$ npm create vite@latest
“`
**Select a framework**で`React`を
SvelteKitで稀にchunkファイルがNot foundエラーになる問題に遭遇した
## 発端
クライアントでページ A を表示したまま放置して、サーバに新しいバージョンをデプロイした後、放置していたクライアントでページ B へ遷移した際、下記のようなエラーが発生しました。
“`
Not found: /_app/immutable/chunks/HogeComponent.2b502a68.js
“`## 原因
調査した結果、クライアント使用中に新しいバージョンをビルドしたことでチャンクファイルが存在しなくなってしまったことが原因のようでした。元々 SvelteKit にはスクリプトのバージョン確認機能が搭載されているみたいなのですが、ページのプリロードなどを使用していると先読みしたスクリプトでエラーが発生するケースも有るようです。
参考:[GitHub Not found /\_app/immutable/assets/xxx #9089](https://github.com/sveltejs/kit/issues/9089)
## 解決策
SvelteKit の公式ドキュメントに[バージョン管理に関する記述](https://kit.sve
Astroのススメ
## Astroとは
Astroは[コンテンツ重視](https://docs.astro.build/ja/concepts/why-astro/#%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E9%87%8D%E8%A6%96)の高速なWebフレームワークです。サーバサイドの実装もできるので認証を組み込んだりヘッドレスCMSと連携することもできます。Astroは比較的新しいフレームワークで、
[2022.stateofjs.com](https://2022.stateofjs.com/en-US/)ではDeveloper RetentionとDeveloper Interest部門で1位を獲得しました。
2023/8/30にv3.0がリリースされましたが、v2のリリースが2023/1/25なので比較的速いスピードで成長していることが伺えます。https://astro.build/
[日本語のドキュメント](https://docs.astro.build/ja/getting-started/)が用意されているので学習
sveltekit-view-transitionを使ってSvelteKitでView Transition APIを簡単に使う
## View Transition APIとは
[MDN Web doc](https://developer.mozilla.org/ja/docs/Web/API/View_Transitions_API)によると
> ビュートランジション API は、異なる DOM 状態間のアニメーション遷移を簡単に作成する仕組みを提供し、同時に DOM コンテンツも単一の手順で更新します。とのことです。つまりスマートフォンアプリなどで一般的なスムーズな遷移表現のWeb版ですね。
## SvelteKitとView Transition API
SvelteKitとView Transition APIについてはSvelte.devの[Blog記事](https://svelte.dev/blog/view-transitions)に記載の通り、SvelteKit 1.24で実装されたonNavigateライフサイクルで利用可能になりました。以下のコードはページ遷移時にクロスフェード効果を適用します。
“`js
onNavigate((navigation) => {
if (!
Symbolノードリスト取得Script
Symbolのノードリストが欲しいときにどうぞ。
ノードリストは変動するので最新のリストはhttps://symbolnodes.org/nodes/
にあります。
下記のコードをサイトにアクセスしてF12を押して
ブラウザーコンソールにコピペして叩くとノードのドメインリストが取得できます。
httpsかつapiノードを取得します。“`
gets=document.getElementsByTagName(“table”)[1].getElementsByTagName(“tr”)NodeList=[];
search=”.”;for ( ass = 0; ass < gets.length; ass++) { const element = gets[ass] if(element.childNodes[8].innerHTML.indexOf("https")!=-1){ if(element.childNodes[5].innerHTML.indexOf("api")!=-1){ //ノードのドメインに検索したい文字列があれば"."を変更する。 //
GitHub Actions上でのprocess.stdout.clearLine is not a function
ローカル開発では問題なく使えていた`process.stdout.なんとか`がGitHub Actions上だと使えなかったです。
“`
process.stdout.clearLine();
^TypeError: process.stdout.clearLine is not a function
“`## GitHub Actionsではprocess.stdout系は使えない模様。
issueあげてる人もいるようにprocess.stdout系は使えない模様。
https://github.com/vercel/pkg/issues/356
またprocess.stdout.writeだけは使えるようです。
GPTもこんな回答を
> ![スクリーンショット 2024-02-06 19.44.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/a0d3803e-b1e0-2a37-6341-fe25a6f3
Node.jsでTCP通信する簡易クライアントとサーバを作ってみた
# はじめに
JavaScriptアプリケーションで簡易的にサーバに接続して状況確認する機能を実装できるか検討する必要があり、調査したところNode.jsの`net`ライブラリを使用することで実現できそうなことが分かった。
しかし、サンプルコード等を調べてみるとクライアントとサーバ間で複数回会話するものはなかった。
そこで、試行錯誤して開発してみた。# サンプルコード
サーバアプリケーションとクライアントアプリケーションを開発した。### サーバアプリケーション
“`javascript:サーバアプリケーション
const net = require(‘net’);const sever = net.createServer(socket =>{
socket.on(‘data’, data => {
console.log(data + ‘ from ‘ + socket.remoteAddress + “:” + socket.remotePort);
socket.write(‘Echo: ‘ + data);
});
OpenShift 上の container に Dev Containers でアタッチする
# 要約
– OpenShift 上の container に Visual Studio Code ( 以降 VSCode ) の [Dev Containers extension](https://code.visualstudio.com/docs/devcontainers/containers) で接続できたら便利かもしれないと思った
– extension のドキュメントには Kubernetes 上の container に接続できそうな記載がある
– Kubernetes で接続できるのであれば OpenShift でも接続できるに違いない
– 試した結果、接続できたが途中何度かつまづいたため記事に残す
– OpenShift を初めて 2 日程度の初心者のためもっと良い方法や間違っている箇所がある場合は教えてください
– 環境は以下を用いた
– クライアント ( VSCode の実行環境 ) は Windows 11
– [Redhat Developer sandbox](https://developers.redhat.com/developer-sa
GitHub Organizationから専用のNode.jsのパッケージを展開する
## はじめに
この記事ではGitHub Organization内でのみ利用可能なNode.jsのパッケージを公開する方法を紹介します。:::note info
パッケージはGitHub内の権限などを活用して公開するため、通常の[npm public registry](https://registry.npmjs.org)に公開するのではなく、GitHub Packagesのnpm registryに公開します。GitHub Packagesでnpm private registryを利用するには、GitHub Team等のプランに加入する必要があります。利用できる環境にあるか確認してからお試しください。
:::## パッケージを公開する
### 準備
公開するNode.jsのプロジェクトを準備します。今回は簡単のため2つの数値を足し合わせるプログラムを公開することを考えます。
ますはNodejsのプロジェクトの初期化を行います。対象のディレクトリで以下のコマンドを叩いてください。
“`sh
npm init
“`
名前は`@NAMESPACE/add_number
Qiita ハッカソン 2024 準備編
## TODO
– [ ] Open AI API
– [ ] リスト化
– [ ] サンプル実装
– [ ] Gemini Pro API