- 1. npm installでパッケージのダウンロードが始まらない
- 2. デジタルストップウォッチ
- 3. Next.js + microCMS構成のブログにChakra-UIを追加したらJavaScript heap out of memory
- 4. Serverless Frameworkで画像(バイナリ)をダウンロードするAPI
- 5. 【Next.js + Tailwind】これを押さえればOK 最新のフロントエンド開発
- 6. Chainlinkの外部アダプターを実装するまでのあれこれ【CFH2021その5】
- 7. Docker上のDebianで日本語入力環境を構築する方法
- 8. Node.js v17 で webpack error
- 9. 【Laradock】npm run devでエラー
- 10. [追記式]Discord.js v13のメモ
- 11. 超爆速でNode.js開発環境構築する
- 12. ng new my-appでのエラーを解決する方法
- 13. Discord.jsでbotを作ってみよう!(環境準備からスラッシュコマンドであいさつを返すところまで)
- 14. sequelizeのモデルをTypeScript化して、ルーティングで使用する方法
- 15. メモ:Node.js(http)でWebSocketを扱う
- 16. Node Scheduleで定期処理を行う
- 17. JLCPCB-3Dブリントサービスの始まり
- 18. 気象庁公式の天気予報の情報を Node.js で取得し中身を検索する(ライブラリに Got を用いる)
- 19. 【Node.js】Error: error:0308010C:digital envelope routines::unsupported【エラー】
- 20. react-hooks 基礎
npm installでパッケージのダウンロードが始まらない
#起こった事象
githubで管理されてるnode.jsで開発されたソースをcloneして、とりあえず動かすために“`
$ npm install
“`
を実行したが、一向にインストールが進まなかった。ログを見る限りパッケージのDL自体できてなさそう##環境
– Ubuntu 20.02 (AWS EC2インスタンス)
– nvmでnode.jsのバージョンを管理#原因
npmの設定を確認したところ、user-configのregistryの値が謎のIPアドレスになっていた。“`
$ npm config list
; userconfig /home/xxx/.npmrc
registry = “xxx.xx.xxx.xxx”
“`いつどこで書き換えてしまったのかは不明…
#解決策
以下のコマンドでregistryを標準のアドレスに設定し直して解決“`
$ npm config set registry https://registry.npmjs.org/
“`.npmrcファイルの中身を空にしてnpm installを再実行でも解決す
デジタルストップウォッチ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1873014/ca3f17c6-44f0-94f9-db2c-ca56caaa6f57.png)
-Maninder Bir SinghGulshan著
Next.js + microCMS構成のブログにChakra-UIを追加したらJavaScript heap out of memory
# ソースコード
[リポジトリ](https://github.com/Ibuki-Matsumoto/sample-next.js)
初学者が初めてのエラーで発狂し泥沼に沈んだ様子を記しています。笑ってください。## ことの発端
* なんかChakra-UIよさそうやん!
* ファッ!?インストールしたら`npm run dev`できへんやん!??“`
<--- Last few GCs --->[25700:0000000000656F00] 43929 ms: Scavenge (reduce) 4070.6 (4140.1) -> 4070.5 (4140.9) MB, 6.9 / 0.0
ms (average mu = 0.442, current mu = 0.263) allocation failure
[25700:0000000000656F00] 43937 ms: Scavenge (reduce) 4071.6 (4140.9) -> 4071.4 (4141.6) MB, 7.0 / 0.0
ms (average mu
Serverless Frameworkで画像(バイナリ)をダウンロードするAPI
# まえがき
Serverless FrameworkとAPI Gatewayで画像をダウンロードするAPIを作ってみました。
ネット上の情報だとうまくいかなかったので、試行錯誤を繰り返すことになり大変でした。# ソース
https://github.com/t-mine/qiita/tree/master/serverless-image-dl-api
# 手順
## Serverless Frameworkインストール
“`
npm install -g serverless
“`## プロジェクト作成
“`
serverless create –template aws-nodejs –name serverless-image-dl-api –path serverless-image-dl-api
“`## Serverless FrameworkにAWSの認証情報を設定
AdministratorAccessポリシーを付与したIAMユーザーを用意して、設定します。“`
serverless config credentials –pr
【Next.js + Tailwind】これを押さえればOK 最新のフロントエンド開発
#目次
[1.この記事を書くきっかけ](#1-この記事を書くきっかけ)
[2.自己紹介](#2-自己紹介)
[3.この記事を見てほしい人](#3-この記事を見てほしい人)
[4.Reactについて](#4-reactについて)
[5.Next.js + Tailwind cssの導入方法](#5-nextjstailwind-cssの導入方法)
[6.Tailwind css](#6-tailwind-cssについて)
[7.スクロールアニメーション](#7-スクロールアニメーション)
[8.Next.jsのImageについて](#8-nextjsのimageについて)
[9.おわり](#9-おわり)
[10.おまけ](#10-おまけ)#1. この記事を書くきっかけ
fwywdという会社の1次試験でQiitaに記事を投稿するという試験があり、書くことになりました。初めて記事を書くので、ご不明な点等があるかもしれませんが、できるだけ詳しく書いていくので、どうぞよろしくお願いいたします。
#2. 自己紹介
私はhtml css を3カ月前に勉強し始めたばかりの学生です。Tai
Chainlinkの外部アダプターを実装するまでのあれこれ【CFH2021その5】
さて、ぼちぼち開発をすすめていきましょう!
…って何を作るかまだ未定ですが^^;https://chainlink-fall-hackathon-2021.devpost.com/
とりま、外部からおもしろそうなデータを引っ張ってきてごにょごにょする系が作りたいなーと思うので、
外部アダプターの作り方&使い方をマスターしておきたいと思いますー
参考記事はこちら。https://blog.chain.link/build-and-use-external-adapters/
# Chainlink外部アダプター(External Adapter)とは
“`
あらゆるブロックチェーン上のスマートコントラクトは、
Chainlinkのオラクルと統合することで、
あらゆる開発者が現実世界のデータやイベントをブロックチェーンの世界に簡単に接続できるようにします。
ChainlinkがオラクルソリューションとしてSolidityに参入して以来、
APIやオフチェーンデータの利用はすでに大規模に拡大しています。Chainlinkにはアダプターという機能があり、
「コアアダプタ
Docker上のDebianで日本語入力環境を構築する方法
# はじめに
DockerでNodeの公式イメージを使って開発環境を構築したのですが、日本語入力ができませんでした。基本、どの環境も英語だと思うので仕方ないですよね。。
でもやっぱり今のプロジェクトメンバー間では日本語で入力したい!と思ったので、Dockerに日本語入力環境を構築するためにネットで方法を調べてみました。
しかし、いろんな記事を渡ってみるも、なぜか思うように設定できない、、と約2時間奮闘してようやく設定できました。笑
# 環境
使用したイメージは、公式の`node:14.17.6`で、OSは`Debian: 9.13`でした。
# 実装方法
Dockerfileに以下を記述して、Docker環境を立ち上げる。“`Dockerfile:Dockerfile
RUN apt update \
&& apt install -y task-japanese locales locales-all \
&& locale-gen ja_JP.UTF-8 \
&& echo “export LANG=ja_JP.UTF-8” >> ~/.bashrc
Node.js v17 で webpack error
#### digital envelope routines::unsupported
最近(2021年10月19日) Node.js が v17 になりましたが、webpack (v5) で次のようなエラーがでるようになりました。“`text
Webpack in development mode
[webpack-cli] Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:67:19)
at Object.createHash (node:crypto:130:10)
…
:6:1) {
opensslErrorStack: [ ‘error:03000086:digital envelope routines::initialization error’ ],
library: ‘digital envelope routines’,
reason: ‘unsupporte
【Laradock】npm run devでエラー
#出たエラー
opensslErrorStack: [ ‘error:03000086:digital envelope routines::initialization error’ ]#原因
Node.js v17.0.1では「digital envelope routines」がサポートされていないとのこと。#対処法
Node.jsのバージョンをダウングレードする。#引っかかった点
“`
# npm install -g n
# n v16.13.0
“`
とバージョンを指定してインストールを行なったが、認識されるバージョンはv17.0.1のまま変わらなかった。
→Node.jsのバージョン管理をしているvnmを参照していた。
(activeのところで「.nvm」を見ているようなら同じ状況と思われます)#解決策
nvmの方でNode.jsのバージョンをダウングレードする。“`
# nvm install v16.13.0
“`
その後、“`
# npm run dev
“`
を実行したところ、問題なく実行できた!#参考記事
https:/
[追記式]Discord.js v13のメモ
## 自分がDiscord.jsを用いた際のメモをただただ残していく
元々は`Discord.py`([discord.pyへようこそ](https://discordpy.readthedocs.io/ja/stable/))を用いてBOTを組んでいましたが,開発が終了していたり,自分が欲しい機能(ex. Slash Commands)かなかったりと色々あるので`Discord.js`に移行することを決めました.### 余談
今まで`Python`ばかり触れており`node.js`?を触れるのは初めてなのでわからないことばかりです.なので,備忘録的な感じでここに追記しながら書き収めていきたいと思います.記述していくものはコード中心なのでBOTの設定等は省略します.### 注意
あくまでも僕自身のやり方なので必ずしも正しい書き方とは限りません.有識者の方いらっしゃいましたらアドバイス等よろしくお願いします!## 備忘録
2021/11/10: この記事の始まり### 基本的なファイル構成
“`
├── main
├── config.json
├──
超爆速でNode.js開発環境構築する
# やりたいこと
複数のNode.jsバージョンが混在可能な開発環境を構築したい。# 解決策
[Volta](https://docs.volta.sh/guide/getting-started)をインストールしましょう。
# Linuxの場合
“`shell:ターミナル
curl https://get.volta.sh | bash
volta setup
volta install node@14
“`
上手く行かない場合はターミナルを再起動しましょう。“`shell:ターミナル
# バージョン表示されればOKです。
volta -v
node -v
npm -v
“`以上。
ng new my-appでのエラーを解決する方法
Angular公式の基礎講座のようなものをやろうとしたときに、“ng new my-app“というコマンドを叩いたらエラーが出た。
## ng new my-appを叩いた時のエラー
“`
$ ng new my-app
^[[ANode.js version v16.2.0 detected.
The Angular CLI requires a minimum Node.js version of either v12.20, v14.15, or v16.10.Please update your Node.js version or visit https://nodejs.org/ for additional instructions.
“`
このようなエラー。翻訳してみるとこのような内容だった。“`
Angular CLIには、Node.jsのバージョンが最低でもv12.20、v14.15、またはv16.10のいずれかが必要です。Node.jsのバージョンを更新するか、https://nodejs.org/ で詳しい説明をご覧ください。
“`
Discord.jsでbotを作ってみよう!(環境準備からスラッシュコマンドであいさつを返すところまで)
Discord.pyを使ってbotを作っていたんですが、いつの間にか開発終了してしまっていたらしいです…[※詳しく](https://gist.github.com/Rapptz/4a2f62751b9600a31a0d3c78100287f1)
お世話になりました…!
引越し先として、Discord.jsさんにお世話になろうと思います。
今回は環境作成から、おはよう!といったたらおはよう!と返してくれるところまで実施したいです。
![画像3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2251471/aac3daf8-fff2-0c07-141b-7a762513515e.png)discordのBOTはこれからスラッシュコマンドが主流になるという話を聞いたので、それも取り入れていこうと思います。(/と入れると実行できるコマンドの事です)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22514
sequelizeのモデルをTypeScript化して、ルーティングで使用する方法
### 初めに
今回は、sequelizeで作成したモデルをTypescript化してルーティングから呼び出し、DBから値を取得する方法を記述します。https://qiita.com/shintaro_secual/items/05b1fe0b0109b6ed2002
上記記事を参考に、ルーティングはTypeScript化し、Sequelizeのモデルの初期設定は済んでいる前提で記載していきます。
### 環境
■ Nodeのバージョン
v14.14.0
■ 使用OS
MacOS Big Sur:バージョン11.6
■ 総合開発環境
Visual Studio Code
■ Sequelizeのバージョン
v5.22.4
■ MySQLのバージョン
v5.6.50### 使用するテーブル設計
“`SQL
CREATE TABLE `users` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(255) NOT NULL,
`pass` varchar(255) NOT NULL,
`statu
メモ:Node.js(http)でWebSocketを扱う
基幹系システムではあまり出番がないので触っていなかった双方向通信のWebSocket
[ここ](https://www.sejuku.net/blog/82316)とか
[ここ](https://qiita.com/ij_spitz/items/2c66d501f29bff3830f7)を参考にテストWindowsServer2012, Nodejsはv14.16でテスト
# Node.js側
単純にWebSocketを使う場合は
`npm install ws`
でいけるが、Socket.ioを使う場合は
`npm install socket.io`
でインストールする。
今回はsocket.ioを選択サーバ側ではexpressではなく通常のhttpを利用した。
server.onでclient.htmlを返すように設定“`javascript:server.js
var fs = require(‘fs’);
var http = require(‘http’);
var server = http.createServer();// HTTPのアクセ
Node Scheduleで定期処理を行う
プロジェクトでnode-scheduleライブラリを使って定期処理を行いました。
この記事は自分用メモです。# Node Scheduleの概要
Node Scheduleはインターバルベースではなく(interval-base),タイムベース(time-base)で定期処理を行います。例えば、2021年11月8日にあるプロセス(メソッド)を実行したい場合、適切なパッケージだと思います。
Node Scheduleはcron-style schedulingです。
“`
* * * * * *
┬ ┬ ┬ ┬ ┬ ┬
│ │ │ │ │ │
│ │ │ │ │ └ day of week (0 – 7) (0 or 7 is Sun)
│ │ │ │ └───── month (1 – 12)
│ │ │ └────────── day of month (1 – 31)
│ │ └─────────
JLCPCB-3Dブリントサービスの始まり
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1873014/81d8a1bc-1350-aa5c-5714-7961d643da00.png)
https://jlcpcb.com/3d-printing
いよいよJLCPCB プリント サービスが始まりました。
ご注文の際、https://jlcpcb.com/JPA を通してクーポンを受け取ることができます。
また、「JLCPCB$7」のコードを入力すると7ドルの割引があります。
気象庁公式の天気予報の情報を Node.js で取得し中身を検索する(ライブラリに Got を用いる)
以下のシリーズの続きのようなものになります。
●気象庁公式の天気予報の情報(JSON)を curl・Node.js で取得し Node.js での処理を試す – Qiita
https://qiita.com/youtoy/items/932bc48b03ced5a45c71●curl で取得した気象庁公式の天気予報の情報(JSON)を jqコマンドで処理する – Qiita
https://qiita.com/youtoy/items/db5b515d400d2aa96420上記の 1つ目の記事で Node.js による処理を行っていたものの、上記の 2つ目の記事に含まれるような中身の検索は行っていませんでした。
そこで、Node.js で取得した情報の中身を検索してみよう、というのがこの記事の内容です。## 気象庁公式の天気予報の情報を Node.js で取得
冒頭の 1つ目の記事の中では、Node.js による情報取得に axios を使っていました。“`javascript
const axios = require(“axios”);const u
【Node.js】Error: error:0308010C:digital envelope routines::unsupported【エラー】
##発端
https://ja.reactjs.org/docs/create-a-new-react-app.html#create-react-app
create-react-appしてnpm startを叩いても開発サーバーが起動しないというエラーにハマったのでメモ##環境
macOS Catalina v10.15.6
Node.js v17.0.1##エラー
“`text
Starting the development server…/Users/xxxx/xxxx/React_Practice/my-app/node_modules/react-scripts/scripts/start.js:19
throw err;
^Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:67:19)
at Object.createHash (node:crypto:130:10)
react-hooks 基礎
## 目次
1. [react-hooksについて](#1-react-hooksについて)
1. [useState](#2-usestate)
1. [useEffect](#3-useeffect)
1. [useRef](#4-useref)
1. [React.memo / useCallback / useMemo](#5-reactmemo–usecallback–usememo)
1. [useReducer](#6-usereducer)
1. [Context / useContext](#7-context–usecontext)
1. [カスタムフック](#8-カスタムフック)## 1. react-hooksについて
* Reactのバージョン16.8.0で追加された機能
* 関数コンポーネントで利用できる関数のこと
* クラスコンポーネントでしかできなかったこと(state管理)が、関数コンポーネントでもできるようになる
* クラスコンポーネントよりもコード量を減らせる
* ロジックを分離できるので、ロジックの再利用やテストがしやすい## 2.