- 1. npm install —save-devオプションの意味
- 2. NodeからBigQueryアクセス
- 3. Step FunctionでのループをCDKで試したメモ
- 4. astro-notion-blogでNotionからブログ記事を書く
- 5. Node.jsを使ってサーバを起動する際に、React Iconsが原因のエラーが発生
- 6. NodeJS: V8エンジン編
- 7. typescript の型を正規表現っぽく書く ( 型に型を埋め込む / Union型でOR表現する )
- 8. Node.jsでAzureBLOBStorage内へリソースのアップロード、ダウンロードする
- 9. AlmaLinux + MySpeedで自宅回線の速度と安定度を計測しよう
- 10. Node.jsでのselectのデフォルト値
- 11. Node.jsでのloggerでWinstonを選択した
- 12. Discord.js v14 でステータスをモバイルにしたい!えっ、プロパティはなくなった…?
- 13. Node.jsからCloudflare R2に動画ファイルをアップロードしてみるメモ
- 14. Node.Jsのアップデート不備の解消
- 15. GCP Cloud Dataprep機能/実装
- 16. Qiita CLI を Node.js on Docker Compose 環境で動かしてみよう!
- 17. Firebase Authenticationを使った、認証の実装の様子
- 18. React :npm ERR! cb.apply is not a function
- 19. ひよこエンジニアの学習日記
- 20. Node.jsインストール(anyenv)
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まで
– 読み込みに関する転送量については言及なし
– アプリ連携を用いると静的サイトジェネレーターが
Node.jsを使ってサーバを起動する際に、React Iconsが原因のエラーが発生
# はじめに
Viteを使って作成していたサイトをSSRに移行しようとしていた時に起きたエラーです。server.jsなどを使ってサーバを立ち上げようとすると
“`bash
SyntaxError: Named export ‘BsSoundwave’ not found. The requested module ‘react-icons/bs/index.esm.js’ is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:import pkg from ‘react-icons/bs/index.esm.js’;
const { BsSoundwave } = pkg;
“`というようなエラーが発生しました。
#### 開発時のバージョン
| 使用技術 | バージョン |
|:-:|:-:|
NodeJS: V8エンジン編
## NodeJSについて学ぶべき要素
この記事では、NodeJSに関してより具体的に学ぶ資料です。1. イベントループとlibuv
1. V8エンジンとメモリライフサイクル
1. コアモジュール# V8エンジン
NodeJSのJavaScript実行エンジンは、GoogleのV8 JavaScriptエンジンが採用されています。https://github.com/v8/v8
V8エンジンは、Chromeでも採用されている高速なJavaScript実行エンジンで、その名前の由来は燃焼機関のほうのV8エンジンに由来していると言われています。
## どのV8エンジンを利用しているか
NodeJSでは、それぞれのバージョンで利用しているV8エンジンのバージョンが異なります。
NodeJSのREPL環境で確認してみましょう。“`
> process.version
‘v16.14.2’
> process.versions
{
node: ‘16.14.2’,
v8: ‘9.4.146.24-node.20’,
uv: ‘1.43.0’,
zlib:
typescript の型を正規表現っぽく書く ( 型に型を埋め込む / Union型でOR表現する )
# コード例
以下のように、型指定の中に型を埋め込めるようだ
“`ts
type SomeType1 = `${number}px`“`
文字列を OR でつないで正規表現チックにすることも出来る
“`ts
type SomeType2 = `IT IS ${‘YES’ | ‘NO’}`
“`正規表現そのものを書けるわけではないようだが、これを組み合わせると正規表現チックに書けそうだ
## 090で始まる電話番号とか
“`ts
type PhoneNumber = `090${‘-‘ | ”}${number}${‘-‘ | ”}${number}`
“`## 全体をユニオン型でつないで OR 表現するとか
“`ts
type RGB = `rgb(${number}, ${number}, ${number})`;
type RGBA = `rgba(${number}, ${number}, ${number}, ${number})`;
type HEX = `#${string}`;type Color = RGB | RGBA
Node.jsでAzureBLOBStorage内へリソースのアップロード、ダウンロードする
Node.jsからazure blob storage内のリソースをアップロード、ダウンロードするためのコードを紹介します。
まずは、Azure SDKをインストールします。
~~~bash
npm install @azure/storage-blob
~~~次に、指定したファイルをblob storageにアップロードします。
~~~javascript:upload
// Azure Storage Blob SDKをインポート
const { BlobServiceClient } = require(‘@azure/storage-blob’);async function uploadBlob(containerName, blobName, content) {
// 環境変数から接続文字列を使ってBlobServiceClientインスタンスを作成
const blobServiceClient = BlobServiceClient.fromConnectionString(process.env.AZURE_STORAGE_CONNECTI
AlmaLinux + MySpeedで自宅回線の速度と安定度を計測しよう
# MySpeedとは
継続的に回線速度の計測を行い最大30日間記録することで、回線状況の分析ができるツール。https://github.com/gnmyt/myspeed
## 機能
* 速度、Pingなどの統計情報を生成できる
* cronを使ってスピードテストを自動化できる
* ひとつのインスタンスに複数のMySpeedサーバーを追加できる
* テスト時にエラーが発生したときに、メールなどでHealth Checkできる# セットアップ
## Node.js インストール
Nodejsが必要なのでインストールします。
“`
# インストール可能なバージョンの確認
$ sudo dnf module list nodejs
AlmaLinux 9 – AppStream
Name Stream Profiles Summary
Node.jsでのselectのデフォルト値
# 問題点
`# 結論
`ちなみに、`
# HTMLの仕様ではなく、JSXの仕様
でも下記のHTMLの仕様を読んでも、`defaultValue`というプロパティがなくて、とっても気持ち悪いのです。
– [<select>: HTML 選択要素 – HTML: ハイパーテキストマークアップ言語 | MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/select)
– [HTML
Node.jsでのloggerでWinstonを選択した
Node.jsの開発において、適切なロギングツールを選ぶために調査したことをまとめたいと思います。。
この記事では、Node.jsのロギングにWinstonを選んだ理由と、他の人気のあるロギングライブラリとの比較を紹介します。## なぜWinstonを選ぶのか?
WinstonはNode.jsの中で最も人気のあるロギングライブラリの一つです。
私は以下の理由でWinstonを選択しました。
1. **アクセス毎のロググルーピング**
Winstonを使うと、アクセス毎にログをグループ化し、整理しやすくすることができます。
2. **ログの構造化**
ログの内容を構造化し、後で分析や管理がしやすくなります。
3. **将来の拡張性**
Winstonには、将来的にAmazon S3などのストレージサービスへログを転送するためのモジュールが用意されています。さらに、Winstonは多くのリファレンスや記事があり、実績も豊富です。
そのため、多くの場合でWinston以外を選ぶ理由は少ないと言えます。## 他のロギングライブラリとの比較
No
Discord.js v14 でステータスをモバイルにしたい!えっ、プロパティはなくなった…?
# モバイルステータスって?
こういうやつ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2309889/01e48dd8-48b6-2684-701e-6c08f2bd9257.png)実はこれ、スマホだとモバイルとして表示されないんですよね。なぜでしょう…?
## 技術的な内容
実はこれは、接続元デバイスから判定しており、その情報はDiscord Gatewayに接続する際[^2]、identifyに自己申告する形で含まれています[^3]。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2309889/15d956ba-bd9a-b668-8325-0a40abdb1fb1.png)
そのため、identifyを変更すればよいわけです。要は User-Agent 書き換えのようなものですね。
# TL; DR
“`ts
const client = new Disc
Node.jsからCloudflare R2に動画ファイルをアップロードしてみるメモ
R2に動画ファイルをアップロードしてみます。
## 通常はCloudflare Workers上からアップロードするのが良い
ただ重たい処理などがあるとCloudflare workers上だと処理がキャンセルされてしまうことがあります。
– 重たいファイルを扱う場合
– その他単純にR2を外部から使いたいなどの時はNode.jsからアップロードするという選択肢も持っておくと良さそうでした。
## node-cloudflare-r2
パッと調べて出てきたこのライブラリが手軽でありがたかったです。
https://www.npmjs.com/package/node-cloudflare-r2
“`js
$ npm i node-cloudflare-r2
“``accountId`、`accessKeyId`、`secretAccessKey`の3つのキーはCloudflare R2のページから取得できます。
`https://xxxxxxxxxxxxxxxxxxxxxx.r2.dev`といった形のPublic URLも必要ですが、同じくページから確認で
Node.Jsのアップデート不備の解消
# Astroを使ったブログを作ろうとした
外に向けたアウトプット&備忘用に自分のブログを作ろうとし、[ShincodeさんのYouTube動画](https://www.youtube.com/watch?v=0zvxvmQqoZ0)を元にブログ作成にかかりました。
WordPressでやるよりJSなどを学びたいということでReactで編集できるAstroを使うことにしました。単に早くできそうだったというのも大きいです。# npm run devでつまづく(Node.jsのバージョンが古い)
[Astro](https://astro.build/themes/)から好みのテンプレートをgit cloneし、npm install、その後
“`
$npm run -dev
“`
したところで以下のエラー。“`
Node.js v14.21.3 is not supported by Astro!
Please upgrade Node.js to a supported version: “>=18.14.1”
“`
上記のエラー文と他の行にWARN lifec
GCP Cloud Dataprep機能/実装
# GCPのCloud Dataprepの概要と機能
## 目次
– [概要](#概要)
– [Cloud Dataprepとは](#Cloud-Dataprepとは)
– [主な特徴](#主な特徴)
– [機能/詳細](#機能/詳細)
– [データ準備と変換](#データ準備と変換)
– [視覚的なデータ探索とプロファイリング](#視覚的なデータ探索とプロファイリング)
– [データ品質の監視と洞察](#データ品質の監視と洞察)
– [簡単なデータのシェアとコラボレーション](#簡単なデータのシェアとコラボレーション)
– [まとめ](#まとめ)
– [サンプルコード](#サンプルコード)## 概要
### Cloud Dataprepとは
Cloud Dataprepは、Google Cloud Platform(GCP)のデータプレパレーション(データ準備)サービスです。データのクリーニング、変換、統合などを視覚的に行うことができます。クラウド上で簡単にデータの事前処理や前処理を行い、データ分析や機械学習モデルのトレーニングに使用することができます。
Qiita CLI を Node.js on Docker Compose 環境で動かしてみよう!
## はじめに
そもそも、ローカル( ホスト )に Node 環境があるなら、基本的には、あえて Docker で動かす必要もないわけですが、案外、同じことを考える人も多いもので、既に、いくつかの記事が存在していますね。
https://qiita.com/search?q=Qiita+CLI+Docker
個人的には、`node_modules` ディレクトリ等は Docker コンテナ内にだけあればよく、環境を丸ごと作り直したりするのが、非常に簡単だという点に、特に魅力を感じているのかもしれません。
というわけで、本記事では、Qiita CLI だけでなく、何かを Node で動かす際、Docker Compose を使って環境構築したい場合に、広く参考になりそうな手順を、備忘録も兼ねて、紹介していきます。
## 確認と準備
ともあれ、まずは、Qiita CLI を動かすために必要なファイルなどを生成してみて、確認するところから始めていきましょう。
https://github.com/increments/qiita-cli
ローカル( ホスト )環境に Qiit
Firebase Authenticationを使った、認証の実装の様子
前回、IDaaS認証の基礎的な仕組みをお伝えしましたが、今回は、Firebase Authenticationを使って、実装する時の様子をお伝えします。😀
FirebaseでWebアプリをデプロイする前提です。Firebaseには、Authenticationという仕組みがあるため、これを利用する登録手続きを行います。
ここではIdP(IDaaS Provider)としてGoogleを利用します。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3680908/52d2dd11-0935-136b-7d08-1268927a4754.png)
次に、フロント(js)側で使用する設定情報を、管理コンソールから入手します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3680908/afdc3133-103f-7122-0f5b-a5cf3bb89d95.png)
ログイン用の画面
React :npm ERR! cb.apply is not a function
# エラー発生:npm ERR! cb.apply is not a function
Reactの初期設定コマンド`npx create-react-app . –use-npm`を実行したところ、`npm ERR! cb.apply is not a function`というエラーが発生しました。
“`sh
twitter_react_frontend % npx create-react-app . –use-npm(node:67518) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node –trace-deprecation …` to show where the warning was created)
npm ERR! cb.apply is not a functionnpm ERR! A complete log of this run can be foun
ひよこエンジニアの学習日記
# 0.はじめに
地方の大学に通う情報科学部2年生です
個人でのwebアプリ開発に向けての備忘録を残していきます
前提情報は簡単にまとめますが,それ以降は基本的には自分用のメモなのでかなり雑に書いていきます簡単な経歴
– 情報科学部所属
– プログラミング歴 1年程度
– 開発経験ほぼなし
– progateや本などを使って独学こんな感じです
ずっとどのようにして勉強するのが正解なのかわからず迷走しています今まで大学や個人での学習で触ったことのある言語
– c++(競プロの学習をしたときに少々)
– Python(大学1年生の時に1年間学習していた)
– java(授業でアプリ開発)
– javascript(メイン)
– Kotlin(授業でアプリ開発)
– htmlcss(これは違うか)
– php(progate)# 1.どんなひとに読んでもらいたいか
– 初めてのプログラミング勉強はどのようにはじめたらよいのかわからない人へ
– 駆け出しエンジニアを高みの見物してみたい人向け
– 日記形式で投稿するのでどのくらいの期間でどのくらいのレベルになるのかわかるか
Node.jsインストール(anyenv)
## 前提
anyenvがインストールされていること
## nodenvをインストールする
“`zsh
anyenv install nodenv
“`“`
exec $SHELL -l
“`## anyenvを使ってNode.jsをインストールする
ここでは最新バージョンのNode.jsをインストールする
“`zsh
node_version=$(nodenv install –list | egrep ‘^[0-9]+\.[0-9]+\.[0-9]+$’ | tail -n 1)
“`“`zsh
nodenv install ${node_version}
“`“`zsh
nodenv global ${node_version}
“`“`zsh
nodenv rehash
“`“`zsh
node -v
“`“`:出力
v21.6.1
“`“`zsh
npm -v
“`“`:出力
10.2.4
“`