- 1. typescriptでExpressをやってみる(10分で?)
- 2. Qiitaの記事をGithub で管理したくて、WSL にvolta でnode インストールしてQiita 記事をpull まで
- 3. NodejsでS3にファイルをアップロード・ダウンロード
- 4. npx コマンドでCLIを実行したら”could not determine executable to run”って言われた
- 5. 「Error: error:0308010C:digital envelope routines::unsupported」エラーでビルドができない
- 6. デジタルお小遣い帳を作ってみたい!by初心者 第1回目
- 7. Reactからffmpeg.wasmを使って動画にウォーターマークを埋め込んでみる
- 8. SvelteKitで稀にchunkファイルがNot foundエラーになる問題に遭遇した
- 9. Astroのススメ
- 10. sveltekit-view-transitionを使ってSvelteKitでView Transition APIを簡単に使う
- 11. Symbolノードリスト取得Script
- 12. GitHub Actions上でのprocess.stdout.clearLine is not a function
- 13. Node.jsでTCP通信する簡易クライアントとサーバを作ってみた
- 14. OpenShift 上の container に Dev Containers でアタッチする
- 15. GitHub Organizationから専用のNode.jsのパッケージを展開する
- 16. Qiita ハッカソン 2024 準備編
- 17. npm install —save-devオプションの意味
- 18. NodeからBigQueryアクセス
- 19. Step FunctionでのループをCDKで試したメモ
- 20. astro-notion-blogでNotionからブログ記事を書く
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
npm install —save-devオプションの意味
npmを使用してマークダウンを使って職務経歴書を作成している
そこで、参考にさせて頂いている下記の記事中でtextlintを使用すると良いと学んだhttps://zenn.dev/ryo_kawamata/articles/resume-on-github
installのコマンドを見た時に、疑問が湧いた
“`
$ npm install –save-dev textlint
“`–save-devってなんだっけ?
前にも調べたことがあった気がしたが、完全に忘れていた。
なので、もう一度調べてみた。## どういうときに—save-devするのか?
このオプションの有無で何が変わるのか?
を考えるとその存在意義が分かりやすかった。
このオプションは、
package.jsonに記載される依存関係が、
devDependenciesになるか?Dependenciesになるか?の違いを生み出す。開発用のパッケージか、実行用のパッケージか分けられる。
当然開発していれば、これらを分離したいと思うのは当たり前だ。
特にLinterなんて、アプリケーシ
NodeからBigQueryアクセス
# 1. はじめに
Reactでサービスを作るにあたって、そのログをBigQueryへ格納しようと思います。なので、サーバー側のアプリケーションからBQへの、接続の技術検証です。
GCPの公式リファレンス( [Node.js client library | Google Cloud](https://cloud.google.com/nodejs/docs/reference/bigquery/latest) )を参考にし、イチから構築します。ソースは下記にあります。
https://github.com/yo16/react_prac_using_bq
# 2. 準備
## 2.1. サーバーアプリを作成
あるURLを指定されたら、BigQueryへInsertするサーバーアプリを作ります。でもその部分は後で実装するとして、まずはexpressで超単純な普通のWebサーバー「log_server」を作ります。
– 参考
– Express公式のチュートリアル(express-generatorを使わないシンプル版)
– [Installing Express](h
Step FunctionでのループをCDKで試したメモ
## 概要
Step Functionの理解を深める。
[Lambda を使用してループを反復する](https://docs.aws.amazon.com/ja_jp/step-functions/latest/dg/tutorial-create-iterate-pattern-section.html)をCDKで書いてみた。## callbackとreturnの書き換え
例では戻り値をcallbackに渡しているが、冗長なのでreturnで返す形に書き換えた。
([Node.js の AWS Lambda 関数ハンドラー](https://docs.aws.amazon.com/ja_jp/lambda/latest/dg/nodejs-handler.html))[ソースコード](https://github.com/hibohiboo/aws-cdk-v2/blob/2046e79638a2000e1f791b8aaf98c669379be79e/cdk/lib/step-functions-stack.ts)
以下の2つのソースは等価となる。
“`js
exp
astro-notion-blogでNotionからブログ記事を書く
ここでは、Astroを用いて高速なブログを生成する [astro-notion-blog](https://github.com/otoyo/astro-notion-blog) をローカルで試す方法を、つまづいた点を含めて解説する。
## ブログ記事保存先としてのNotion
別件でブログを立ち上げようとしたが主に次の点で悩んでいた。
– GitHub上に静的サイトジェネレーターのプロジェクトごとpushする: 記事や画像が多くなると `git clone` に時間がかかる可能性がある。立ち上げの初期段階ではその見積もりが難しい。
– 画像をS3などのストレージにアップロードして使う: 記事, 画像の紐付けが煩雑になる
– また、読み込みの転送量が従量課金の場合は万が一でもEDoS(Economy Denial of Service)が起こる可能性があるNotionでは
– 無料プランでブロック数無制限(文字や画像を挿入できる単位)
– 1ファイル5MBまで
– 読み込みに関する転送量については言及なし
– アプリ連携を用いると静的サイトジェネレーターが