- 0.0.1. yarn での parse エラー解決方法
- 0.0.2. Nuxt.jsでfakerを使って日本語ダミー文章を生成する
- 0.0.3. React(Node js + MySQL)の構成でアプリを作成をしました【簡単なCRUDアプリケーション】
- 0.0.4. 睡眠不足が続いているので、永久の眠りにつかせてくれる世界を作った
- 0.0.5. 依存パッケージの脆弱性修正には、package.jsonのoverrides / resolutionsフィールドを使いましょう
- 0.0.6. RPi + CHIRIMEN + Node-REDの環境づくり
- 0.0.7. 【緊急】トイレの蓋を閉め忘れ彼女にブチギレられたので、obnizを使って解決しにいった話
- 0.0.8. node-configのlocal.json
- 0.0.9. VercelでLineボットを作って総理大臣の名前を暗記するゲームをやってみる
- 0.0.10. MySQLのテーブルのデータをJson形式で出力(エクスポート)する
- 0.0.11. Vue.jsで文字列をBase64に変換する方法
- 0.0.12. Volumio3(Raspberry Pi)でRadikoを再生する環境構築
- 0.0.13. クラスオブジェクトの@Expose()ってなに?
- 0.0.14. npm のライブラリ(モジュール)のドキュメントを見るコマンド
- 0.0.15. Class Transformerの概要について備忘録を書いた
- 0.0.16. Node.js 18の気になる点を挙げてみる
- 0.0.17. Progate HTML&CSS中級編終わり
- 1. 2h未満程度で終わった
- 2. progateを始めてみる
yarn での parse エラー解決方法
yarn を使ってビルドしていたら、原因不明の parse エラーに悩まされました。
結論としては、ビルド時のキャッシュがおかしくなったっぽく、キャッシュや node_module ディレクトリを削除してビルドし直せば治ります。
キャッシュを削除するって初歩的なところでしたね?
## エラーの例
例えば [storybook](https://storybook.js.org/) を使ってプロジェクトを作っていて、いきなり以下のようなエラーに悩まされました。
ローカルでは全く問題なくビルドできていたのです。
“`
[ssh@example.com]$ NODE_OPTIONS=–max_old_space_size=4096 yarn build-storybook:coding
yarn run v1.22.19
$ BASE_PATH=/storybook build-storybook -o dist/storybook
info @storybook/vue3 v6.5.10
info
info => Cleaning outputDir: /var/ww
Nuxt.jsでfakerを使って日本語ダミー文章を生成する
公式サイト
https://fakerjs.devGithubはこちら
https://github.com/faker-js/fakerインスコ
“`
npm install –save-dev @faker-js/faker
“`メソッド一覧(公式Githubより)
“`
Module Example Output
Address faker.address.city() Lake Raoulfort
Animal faker.animal.cat() Norwegian Forest Cat
Color faker.color.rgb() #cdfcdc
Commerce faker.commerce.product() Polo t-shirt
Company faker.company.companyName() Zboncak and Sons
Database faker.database.engine() MyISAM
Datatype faker.datatype.uuid() 7b16dd12-935e-4acc-8381-b1e457bf0
React(Node js + MySQL)の構成でアプリを作成をしました【簡単なCRUDアプリケーション】
## 参考サイト
[初心者のCRUDチュートリアル-ReactJS、MySQL、NodeJS](https://www.youtube.com/watch?v=re3OIOr9dJI)
睡眠不足が続いているので、永久の眠りにつかせてくれる世界を作った
## 永久の眠りにつきたい
睡眠不足が続くと、もう永遠に眠りたい衝動に駆られます。
そんなとき、こんなものを発見しました。これがあったらもう会社に行かないでも良いのではとさえ思える!笑
アラーム設定しているのに、それをあえて消す発想が面白い!睡眠大切これ絶対?#protoout #無駄づくりhttps://t.co/wRPnhVA139— Umemoto Ryota (@UmeUmeTanTanR) October 8, 2022
これ、アラームが鳴ったらスヌーズを押して、永久にスヌーズにする装置なんです。
衝撃的なのは、アラームをつけているのに、消すんです!!
私はこれをみた時に、 **これだ!** と思いました。
いわばこれは、己の意志とは関係なく、アラームが消されるわけですよね?つまり、誰が悪いわけではなく、ただそういう世界なだけなんです。これで起きなくても誰も責めることはできないはず!:heart_eyes:(それはない?)つまり、**「私自身は起きようとしている、だけど世界がそれを許してくれないならずっと寝ててもいいんじゃないか?」**
私はそんな世界を目指しました。
## やりたいこと
手元にあるものでできることを考えた結果、**自動照明OFF装置**を作ることにしました。
イメージとしては、朝起きて部屋の明かりをつけようとしたら、永遠に照明を
依存パッケージの脆弱性修正には、package.jsonのoverrides / resolutionsフィールドを使いましょう
## はじめに
この記事は、npmとyarnの依存関係ツリーを上書きする`overrides` / `resolutions`フィールドの使い方を共有するためのものです。
### 想定する環境
– node.js 16.17.1
– npm 8.15.0
– yarn v1.22.19:::note warn
overridesフィールドは、npm [v8.3.0](https://github.com/npm/cli/releases/tag/v8.3.0)で導入されました。それ以前のバージョンでは動作しません。
::::::note warn
この記事は[yarn v1](https://classic.yarnpkg.com/lang/en/)系統を対象としています。[yarn v2+](https://yarnpkg.com/)では挙動が変わるかもしれません。各自でご確認ください。
:::## 依存関係ツリーを上書きして脆弱性に対応する
依存パッケージが以下のような状態だと、セキュリティ更新に追従するのが難しくなります。
– 脆弱性を持ったパッケージに依存
RPi + CHIRIMEN + Node-REDの環境づくり
# はじめに
Web IoT MakersというIoTの演習+ハッカソンイベントでCHIRIMENというJavaScriptでRPiを動かせるフレームワークを学びました。
Web系のエンジニアの方はJavaScriptですいすいコーディングできるのだと思うのですが、すこしでも楽をしたいのでNode-RED環境も作って併用する環境を作ってみます。
少々回りくどいですが、CHIRIMENのコア部分はWeb I2C APIとWeb GPIO APIです。htmlでUIを使ってJSのAPIでセンサやGPIO制御してMQTTでデータをNode-REDに投げてごにょごにょするイメージです。# CHIRIMEN用のマイクロSDを作る
CHIRIMENの基本的な情報は次のサイトを参考にしてください。
https://chirimen.org/
https://tutorial.chirimen.org/pizero/#chirimen–1
https://chirimen.org/chirimen/gc/top/examples/起動用のmicro SDカードの作り方はこちらです。
ht
【緊急】トイレの蓋を閉め忘れ彼女にブチギレられたので、obnizを使って解決しにいった話
# やばい状態です
現在、彼女と半同棲しているのですが、人間が共に暮らすと様々な問題が発生します。
我々の場合、それはトイレで起こりました。
僕はとてもズボラな人間で、よくトイレの蓋を閉め忘れてしまいます。
僕自身、「だから何?」程度の話なのですが、彼女はそれを許すことができないようで、この世の終わりくらいキレ散らかします。いつもならば彼女に平謝りをして許して頂いているのですが、あまりに改善されないので、ついに彼女が僕に対して「制裁」を始めました。
**晩ご飯が豆腐とキムチだけになったのです、、、、**
さすがにいつか死んでしまう気がするので、緊急でなんとかしようと躍起になっております。# インスパイアを受ける
そんなとき、これを見つけました。https://twitter.com/togenkyoo/status/1413742448036126722?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1413742448036126722%7Ctwgr%5E1706c5c7d80f021a34cfa6953b83e
node-configのlocal.json
# はじめに
[node-config](https://github.com/node-config/node-config) が `NODE_ENV` の言うことを聞いてくれなくて困ったことがあったので記録しておく。# 起こったこと
`NODE_ENV` の値は `dev` になってるのに、どうしても`local.json`の値が読み込まれてしまう# 原因
仕様だった。local.jsonとかlocal-xxx.yamlとかそういうのを設定ファイルに含めると、`NODE_ENV`の値に関係なく必ずそいつを読み込むらしい → https://github.com/node-config/node-config/issues/685「この仕様のおかげで、ローカルではテスト通ってたのにプッシュしたらテスト通らない みたいなことがなくなるよ」などと言っている → https://github.com/node-config/node-config/wiki/Configuration-Files#local-files
# おわりに
https://github.com
VercelでLineボットを作って総理大臣の名前を暗記するゲームをやってみる
どうも。今までQiitaに3つ記事を書いたんですけど、なんだかそれらが時代に取り残されている気がしてたんですよ。エラストテネスとか紀元前3世紀じゃねえか。だから今回はもうちょっと若くなろうと思って、Lineボットを作ってみました。内容はシンプルです。スクレイピングしてきた内閣総理大臣の一覧を使って、古今東西・内閣総理大臣の名前ゲームをしてくれるチャットボットです。
ボットが句読点打ってる時点で
MySQLのテーブルのデータをJson形式で出力(エクスポート)する
MySQLのテーブルのデータをJSONで出したくなり、その際に作ったスクリプトを紹介します。
Node.jsで書きます。
“`bash
root
|- docker-compose.yml
|- node-script/
|- package.json
|- export-mysql-data.js
|- db.js“`
まずは docker-compose ファイルを用意して、環境を整える。
“`yml:docker-compose.yml
version: “3”
services:
# #######################################
# # Script
# #######################################
script:
image: node:16
working_dir: /usr/src/app
volumes:
– ./node-script/:/usr/src/app
tty: true# #######
Vue.jsで文字列をBase64に変換する方法
## 概要
– Fitbitのアクセストークンを更新する際に `client_id:client secret` をBase64に変換する必要があったので、やり方を備忘録として残します。**Fitbitの公式ドキュメント**
[Fitbit Developer – Refresh Token](https://dev.fitbit.com/build/reference/web-api/authorization/refresh-token/)## 環境
Windows10
Vue.js 3## やり方
#### 1. ターミナルでnpm install ####
“`terminal:powershell
npm install buffer
“`#### 2. 変換コード ####
“`javascript:Sample.vue
import { Buffer } from ‘buffer’// base64にエンコード
const beforeText = “HogeTaro:example”
const afterText = Buffer.from(
Volumio3(Raspberry Pi)でRadikoを再生する環境構築
はじめまして、mOqOmです。
突然ですがVolumioでRadikoを再生したいですよね!
有志の方が作成したvolumio_jpradioだと私の知識が足りなく起動ができず困っていたのでNode.jsに移植してみました。
20221010時点ではダウンロード機能はないですが、サービスとして自動起動設定を行うことも可能となっています。早速ですが、volumio_jpradioをNode.jsに移植した私のvolumio_jpradioについてのインストール方法を記載したいと思います。
まずインストールする環境は以下の通りとなっています。
※npmは後述の手順でアップデートを行い、その他のバージョンについてはVolumio3(Ver:3.378)をインストールした環境のままのバージョンです。
以前のバージョンではインストールされていなかったffmpegがデフォルトでインストールされているので手順を飛ばしています。
### 動作環境
+ Raspberry Pi 4 Model B
+ Volumio3(Ver:3.378)
+ Node.js(Ver:14.15.4)
+ npm
クラスオブジェクトの@Expose()ってなに?
# はじめに
API開発を進めていく中で、クラスオブジェクトの定義の中になにやら`@Expose()`という呪文が書いていたので調べてみることにしました。また、過去にはclass-transformerの概要についても書いてみました。
https://qiita.com/enomoto11/items/aa9c9faa508b3aed6540
# plainToClass()関数
まず、(プレーンオブジェクトを要素とする)連想配列usersと独自に定義したUserクラスがあるとします。
“`index.ts
import { plainToClass } from “class-transformer”;const users = [
{
id: 1,
firstName: “Johny”,
lastName: “Cage”,
age: 27,
},
{
id: 2,
firstName: “Ismoil”,
lastName: “Somoni”,
age: 50,
},
{
id
npm のライブラリ(モジュール)のドキュメントを見るコマンド
探したけどそれっぽいものが見つからないので自前で。
[glow](https://github.com/charmbracelet/glow) というコマンドに依存しているので事前に brew install などして入れてください。.bashrc や .zshrc に下記を記述
“`bash:.bashrc
nodedoc() {
local readme_path
if [ -f “node_modules/${1}” ]; then
readme_path=”node_modules/${1}/README.md”
else
readme_path=”$(npm root -g)/${1}/README.md”
fi
glow -p “$readme_path”;
}
“`使い方
“`
nodedoc“`
Class Transformerの概要について備忘録を書いた
# はじめに
API開発を進めていく中でclassTransformerがかかわってくるところがあったので調べていると日本語記事があまり見つからなかったので備忘録を兼ねてこちらの記事を書くことにしました。
本記事は`class-transformer`の説明の導入部分についての記事になります。# 自己紹介
はじめまして!
私は2022年4月から現在までCatallaxyという会社でエンジニアインターン生として勤務しているエンジニア志望の大学生です。# class-transformerを理解する前に
JavaScriptには、
– プレーンオブジェクト
– クラスオブジェクトの2種類があり、これらの違いを知る必要あります。
### プレーンオブジェクト
プレーンオブジェクトは、`{}`を使って作られるオブジェクトのことで例えば以下の配列の各要素に見られるような形になります。(以下の形式は特に`JSON形式`とも呼ばれます)
“`users.json
[
{
“id”: 1,
“firstName”: “Johny”,
“lastName”
Node.js 18の気になる点を挙げてみる
## はじめに
こんにちは、NamedPythonです。
ちょっと個人開発の熱が戻ってきたのもあり、技術選定も兼ねて色々調べているところです。
BunとかDenoもあるけど、一周回って **次のLTSなNode.js(18.x)が気になる** という気持ちになったので、公式ドキュメントを読みくだしながら気になったところをちょ〜〜っとだけ深掘ってピックアップしようと思います。Node.js 18がActive LTSになるのは **2022-10-25** からなので、実はもう結構近いのです。
https://github.com/nodejs/release#release-schedule
## 読むドキュメントたち
### Node.js v18 のリリースニュース
https://nodejs.org/de/blog/announcements/v18-release-announce/
### リリースブログのうちのNode.js v18.x.y についてのもの
https://nodejs.org/ja/blog/release/
## ピックアップ
#
Progate HTML&CSS中級編終わり
2h未満程度で終わった
初級編の続きをしている感じであった。
btn img の概念等よく作られているサイトだとしみじみ感じた。
しかし実際に1からプログラムを書けって言われると、これ終わらせただけでは未だうまくコーディング出来ないんだろうなってのが正直なところ。
次はjavascript!早くアニメーションで動的サイトを作りたい。(簡単なボタンは中級編で作ったが)
作業ディレクトリ依存のnodeバージョン確保する
direnvをインストールする
https://qiita.com/kompiro/items/5fc46089247a56243a62
nvmをインストールする
https://qiita.com/chatrate/items/88046663236fc546e9d3このファイルを作る
“`.envrc
__=`pwd`
export NVM_DIR=$__/.nvm
if ! [[ -d $NVM_DIR ]];
then
mkdir $NVM_DIR
fi
source $(brew –prefix nvm)/nvm.sh
“`:::note alert
direnv: error /Users/pooh/Workshop/ibushigin/code/ibushigin-gohe_2/.envrc is blocked. Run \`direnv allow\` to approve its content
:::
このエラーが出たらあせらず`direnv allow`を実行###### 経緯
他の作業環境のglobal汚染やnodeバージョンをあやまって
大学2年後期から3年前期のインターンまでにまともなポートフォリオを作成する軌跡
progateを始めてみる
まずはウェブ開発コースを進めることにする。
HTML&CSS>>Javascript>>Node.js の予定。
~追記~
Reactもとりあえずやるっぽい。
React(Node js +Express +Reset API)の構成でアプリを作成をしました【CRUD Rest API】
## C (create)
R (read)
U (update)
D (delete)Get ⇨ /Users get all users
Post ⇨ /Users create a new user
Get ⇨ /User/:id get single user details
Delete ⇨ /User/:id delete a user
Put ⇨ /User/:id update a user## APIとは ?
APIは「Application Programming Interface」の略語。
3つの単語には、それぞれ下記のような意味がある。– アプリケーション: パソコンやスマホの中で動くソフトのこと
– プログラミング: プログラミング言語を利用して、パソコンやスマホに実行させる指示を出すこと
– インタフェース:ITの分野では、機器を繋ぐ接続部分や接触する箇所のこと##### つまりAPIとは、
『2つのアプリケーションやソフトウェア同士が情報をやり取りする際に使用される、プログラミング上の窓口』