- 1. 【Node.js】npm proxyの使い方
- 2. Reduxの環境を5分で構築しよう！
- 3. node.jsでデータベースをherokuに接続できないの解決法
- 4. TypeGraphQLでN+1問題を解決した話
- 5. 話題のesbuildをさっくりと調査してみた
- 6. 【Node.js】promiseの使い方
- 7. Node.js版CCXTでbitFlyerのPrivate APIを使う
- 8. [Node.js][LINE] 毎日 LINE に花粉情報を通知する
- 9. nodebrewを利用したnodeのインストール
- 10. 【Node.js】promiseの非同期処理について
- 11. オンプレ環境で使えるDiscordの読み上げBotを作りました
- 12. ナウキャストの画像取得(20210224版)
- 13. if文なしでじゃんけん – JS版
- 14. 【Scratch3.0】Realtime Database拡張ブロックを作ったので参照実装したら既視感あるアレができちゃった件
- 15. [Node.js] MySQLのIN句をプレースホルダーで表す
- 16. 【テスト自動化】Playwrightでファイルのアップロードのテスト
- 17. 【JavaScript】JavaScriptの非同期処理について
- 18. 【imi-enrichment-date】年号を含む日付表示の正規化
- 19. RustでWebAssemblyを使ってみた時の記録
- 20. Node.js+MongoDB構成でGraphQLのお勉強
【Node.js】npm proxyの使い方
#プログラミング勉強日記
2021年3月1日#proxyとは
proxyは、npm configコマンドで使用できる代理(プロキシ)サーバー設定のこと。
開発中にインターネットでアクセスの制限をされた場合など、セキュリティの問題によってアクセス制限された環境でプロキシサーバーを経由した開発を行うことがある。#使い方
npmでプロキシサーバーの設定をするためには、npm configコマンドでproxyを使用する。npm config set proxyと入力することで、npm config機能の一部であるproxyを利用できる。“`
$ npm config set proxy http://: “` “`:proxyを解除する方法
$ npm -g config delete proxy
“`“`:proxy設定の確認
$ npm -g config list
“`#参考文献
[プロキシサーバーを使う際に役立つ！npm proxyの使い方【初心者向け】](https://techacademy.j
Reduxの環境を5分で構築しよう！
# Reduxの環境を5分で構築しよう！
Reduxの環境を5分で構築する方法を記します。## Reduxとは
Redux（リダックス）とは、Reactにおけるコンポーネントの状態を管理する機能を提供するライブラリです。## 今回のゴール
Node.jsをインストールし、Reactプロジェクトを作成し、ReactプロジェクトにReduxをインストールすること## OS情報
* Windows10## 構築手順
1. Node.jsをインストール
[https://nodejs.org/ja/](https://nodejs.org/ja/)にアクセスし、推奨版をダウンロードします。
標準設定でインストールする場合は、デフォルトのまま「Next」をクリックすればよいです。2. Reactプロジェクトを作成
コマンドプロンプトを開き、任意のディレクトリにReactプロジェクトを作成します。
`npx create-react-app`と入力します。 3. Reduxのインストール
作成したプロジェクトにReduxをインストールします。
node.jsでデータベースをherokuに接続できないの解決法
“`
Unable to connect to the database: ConnectionError [SequelizeConnectionError]: self signed certificate
“`
上記エラーが出たときloaderに下記コードを追加したら治りました。“`
dialectOptions: {
ssl: {
require: true,
rejectUnauthorized: false // <<<<<< YOU NEED THIS } } ```
TypeGraphQLでN+1問題を解決した話
## はじめに
GraphQLをサービスで使い始めて、N+1問題にぶち当たったのでその解決策を紹介する。## プロジェクト構成
* Node.js
* TypeScript
* Express
* GraphQL(Apollo, TypeGraphQL)## 実際何が起こったか
DBにはとあるレコードが入っており、それぞれに`userid`を保持している。
`userid`からユーザー名やメアドなどのユーザー情報を取り出すには、別の内部APIに問い合わせる必要がある。GraphQLのスキーマはこのように定義している。
“`graphql:schema.gql
type Query {
record(id: Int!): Record
records(name: String): [Record!]!
}type Record {
id: Int!
name: String!
user: User
userid: Int!
}type User {
userid: Int!
username: String!
}
“`レコード
話題のesbuildをさっくりと調査してみた
[ブログからの転載です。](https://blog.hedrall.work/posts/esbuild-2021-02-14)
今大注目のesbuildに関してさっくり調べて見ました。
ゆるめの記事です。# 調査のきっかけ
私がフロントを本格的に勉強し始めたのは2016-2017年のAngular2が出たころです。モダンフロントエンド開発の選択肢が増え、
PWAが提唱されるなどWEBフロントエンドが一気にリッチ化すると同時にカオス化した時期だったと思います。
つまり、本当に面白い状況だったのですが最近になってその状況も落ち着いてきたと感じている方も少なくないと思います。昔よくあった、React vs Angular vs Vue論争の熱は冷めたし、
SSRだけでペラペラだった(ドキュメントもダサかったw)Next.jsも2019~2020年の大規模機能拡張でフルスタックフレームワークとして堂々たるツールに成長し、今では画像配信サーバを内臓し、画像の最適化まで面倒をみてくれます。
この背景として、先立って機能拡充が進んでいたNuxt.jsからのいいとこ取りができたところも
【Node.js】promiseの使い方
#プログラミング勉強日記
2021年2月28日#基本的な書き方
promise処理を作るには任意の関数の中で`new Promise()`を返すのが基本となる。“`js
return new Promise(resolve) {
// 処理を記述する
}
“`“`js:具体例
function myFunction() {
return new Promise(function (resolve) {
resolve(“Hello World”);
})
}
“`#thenを使ったメソッドチェーン
promiseによる非同期処理の結果を取得するにはthenを使ったメソッドチェーンを使用することができる。“`js
// dataにpromiseの結果が格納されている
// resolve()に設定した文字列になる
myFunction().then(function(data) { console.log(data) })
“`“`:実行結果
Hello World
“`#promiseの並列処理
allメソッ
Node.js版CCXTでbitFlyerのPrivate APIを使う
# はじめに
ccxt.js経由でbitFlyerの現在のポジション(建玉)を知りたかったのだが、ちょっと調べてもなかった。
詰まったので同様の問題に遭遇した人のためにも解決方法残しておこうと思う。## コード
“`javascript
const ccxt = require(‘ccxt’)
const bitflyer = new ccxt.bitflyer({
apiKey: env.apiKey, // APIキーを入れる
secret: env.secret // シークレットをいれる
})
bitflyer.privateGetGetpositions({ product_code: ‘FX_BTC_JPY’ }).then(data => console.log(data))
“`## ちょっと解説
ccxtでPrivate APIを使うには、メソッドの命名に独自の法則を使っている“`
private + {メソッドがgetならGet、postならPost} + {private APIの名前}
“`上の例ではGetメソッドで`
[Node.js][LINE] 毎日 LINE に花粉情報を通知する
# 概要
– [自分の LINE に Ruby で通知を送る](https://qiita.com/QUANON/items/94f8835e923c76188f66)
– [[Ruby][LINE] ごみ出し日に LINE で通知する](https://qiita.com/QUANON/items/ccfe650a30bd6068a5f4)に引き続き、[LINE Notify](https://notify-bot.line.me/ja/) を使って LINE に通知するシリーズです！
花粉 が辛い季節ですね :disappointed_relieved: 花粉情報が非常に気になる毎日なので、当日の花粉情報を LINE に通知するようにしました。
# 方法
## バージョン情報
– Node.js 14.15.5
– Playwright 1.9.1
– axios 0.21.1## コード
まず [Playwright](https://github.com/mic
nodebrewを利用したnodeのインストール
Homebrewを使ってインストール。
“`sh
$ brew install nodebrew
“`* バージョン確認
“`sh
$ nodebrew -v
“`* セットアップコマンド。出力されたパスを通す。
“`sh
$ nodebrew setup# Fetching nodebrew…
# Installed nodebrew in $HOME/.nodebrew
#
# ========================================
# Export a path to nodebrew:
#
# export PATH=$HOME/.nodebrew/current/bin:$PATH <= コイツを記述 # ======================================== ``` ```sh $ vi ~/.bash_profile ``` * インストール可能なバージョンの確認 ```sh $ nodebrew ls-remote ``` * stableをインストール。`install`コ
【Node.js】promiseの非同期処理について
#プログラミング勉強日記
2021年2月27日
[昨日の記事](https://qiita.com/mzmz__02/items/6b83805bc4917810dfb7)でJavaScriptの非同期処理について扱ったが、今回はNode.jsのpromiseの使い方をまとめる。#promiseとは
Node.jsのpromiseは、非同期処理を読みやすいコードで実装できる。
Node.jsでも使用されるJavaScriptでは、非同期処理のときにコールバック関数を使用する。だが、処理が複雑になるほどコールバック関数が入れ子になってしまい、コードの内容がわかりにくくなる。#Node.jsでpromiseを使う方法
まず、promiseをインストールする。“`
$ npm install promise
“`promiseの書き方は以下のようになる。
“`js:文法
// promiseパッケージを読み込む
var 変数 = require(‘promise’);変数(function (fulfilled, rejected) {
処理内容
}
オンプレ環境で使えるDiscordの読み上げBotを作りました
# 事の発端
知り合いとのDiscordサーバーでは土日に通話しながらゲームをするときに、テキストチャンネルで発言するのみで喋らない”聞き専”が結構います。
そこでチャットを読み上げてくれる「Shovel」というBotを導入しました。
しかし、土日の夜は非常に人が多いのか、ボイスチャットに呼ぼうとしても呼べない時が何度かあり、そこで自分たち専用のBot用サーバーを用意する案が上がります。# Raspberry Piを入手
秋葉原に行って、Raspberry Pi4と電源などの一式を入手。
早速、以下の条件を満たす読み上げDiscord Botを探し始めます。– ラズパイ上で動く
– Dockerでいける(環境を汚したくないため)
– オンプレ環境で使える
– 完結している、クラウドサービスを使っていない(Cloud Text-to-Sp
ナウキャストの画像取得(20210224版)
# これは何ですか？
気象庁の降水レーダー画像を取得するスクリプトです。2021年02月24日の更新に伴って書き直しました。画像取得ソースは:point_down:
https://www.jma.go.jp/bosai/nowc/
コードはgistに収めています。
[ナウキャストの画像取得(20210224版) by puppeteer/node.js]
(https://gist.github.com/59t9/666901916c2d06332f7f3a659da5e255)相変わらず習作ですが、画像取得リトライ工作をなんぼかいたしました。Slackによるエラー通知もさせてみました。ユーザ依存な部分を伏せ書きにしていますのでご注意ください。
お役に立てれば幸いです。
if文なしでじゃんけん – JS版
[if文なしでじゃんけん – Qiita](https://qiita.com/tadsan/items/65d91ba6b50535fc8815) を読んでJSで組んでみました。
# 解答
“`js
const gu = “gu”;
const choki = “choki”;
const pa = “pa”;const createResult = (winHand, loseHand, drawHand) => ({[winHand]: “勝ち”, [loseHand]: “負け”, [drawHand]: “あいこ”})
const hands = Object.freeze({
[gu] : {view: “✊”, judgeTable: createResult(choki, pa, gu)},
[choki] :{view: “✌ “, judgeTable: createResult(pa, gu, choki)},
[pa] : {view: “✋”, judgeTable: createResult(gu, choki, pa)},
【Scratch3.0】Realtime Database拡張ブロックを作ったので参照実装したら既視感あるアレができちゃった件
# 事始め
今年、弊社内ではゲーム制作コンテストが開催されており、私は運営チームとしてScratchのサポートを担当しています。Scratchの自主練をしていたところ、楽しそうな記事を見つけました。
* [Scratch 3.0でオリジナルブロックをつくろう – @Hiroyuki_OSAKI](https://qiita.com/Hiroyuki_OSAKI/items/a46e1c881d3aed4661f7)
そんなことができるのですね！
そしたら、[Realtime Database](https://firebase.google.com/docs/database?hl=ja) のブロックとかつくって、ネットワークゲームも制作できるようになる……!!!
これはやるしかないでしょ、ということで。
やってみたいぃぃい✨
Scratch 3.0 で Web API 呼び出しの拡張ブロックを作る、の手始め – [Node.js] MySQLのIN句をプレースホルダーで表す
#概要
Node.jsでMySQLを扱うにあたり、
IN句のリスト部分をプレースホルダーで表すには、どのようにすれば良いかを以下に記していきます。#本題の前に…
(本題しか興味ない人は、すっ飛ばしてください)
##Node.jsでMySQLを扱うためにインストール`npm i -S mysql promise-mysql`
##Node.jsでMySQLプレースホルダーを扱うときの基本
例えば、プレースホルダーなしで書こうとすると以下のようになります。(良くない例です)
“`javascript:【NG例】プレースホルダーなし
const userid = 1 ;
const sql = `SELECT * FROM users WHERE userid = ${userid} ;`
“`このままだと、SQLインジェクションの格好の餌食となってしまうため、
プレースホルダーを使って書き直します。“`javascript:【OK例】プレースホルダーあり
const userid = 1;
const sql = `SELECT * FROM user【テスト自動化】Playwrightでファイルのアップロードのテスト
# Playwrightでファイルのアップロードのテスト【テスト自動化】
・[Playwright](https://playwright.dev/)でテスト自動化をかんたんに
・インストール等は他ドキュメントが詳しいので省略します
・ファイルのアップロードが必要な場合# 環境
・Windows10 64bit
・node.js v14.15.5
・cygwin# Playwright とは
– https://github.com/microsoft/playwright
– https://playwright.dev/> Playwrightは、Chromium、Firefox、WebKitを単一のAPIで自動化するNode.jsライブラリです。
> 常に環境に配慮し、機能があり、信頼性が高く、高速なクロスブラウザーWeb自動化を可能にするように構築されています。個人的な感想ですが、「Windows で *webkit (safari)* も実行できる」ブラウザテスト自動化用のツール。
Selenium（最近はあまり触っていないですが・・・）より使った感じは良好。
【JavaScript】JavaScriptの非同期処理について
#プログラミング勉強日記
2021年2月26日#同期処理とは
同期処理は、コードを順番に処理していって、1つの処理が終わるまで次の処理は行われない。同期処理では、実行している処理は1つだけとなるので直感的な動作になる。
しかし、1つの処理が終わるまで次の処理ができないことによっての問題点も存在する。具体的には、同期的にブロックする処理があると大きな問題が生じる。JavaScriptでは基本的にブラウザのメインスレッドで実行されるので、メインスレッドが他の処理でいっぱいになってしまうと表示が更新されなくなってしまいフリーズしたような状況になる。これは、メインスレッドが表示の更新といった処理を行っているためである。#非同期処理とは
非同期処理でもコードを順番に処理していくが、1つの非同期処理が終わるを待たずに次の処理を行うことができる。なので、非同期処理では同時に実行している処理が複数ある。
JavaScriptにおける非同期処理には、コールバック、Promise、async/awaitの3種類ある。JavaScriptにおいての多くの非同期処理はメインスレッ
【imi-enrichment-date】年号を含む日付表示の正規化
# imi-enrichment-dateとは
経産省のジービスインフォというサイトで公開されているオープンソースライブラリの１つで、
`令和３年２月２６日`のような日付表示を`2021-02-26`といった形式に正規化することができます。
MITライセンスで公開されているので商用利用も可能です。## インストールの仕方
このツールはnpmのようなパッケージ頒布サイトでは公開されていないようで、
経産省のサイトあるいはプロジェクトのGitHubページからダウンロードして用います。“`bash
# on your own project
npm install https://info.gbiz.go.jp/tools/imi_tools/resource/imi-enrichment-date/imi-enrichment-date-1.0.0.tgz
“`## 使い方
ここでは自分のプロジェクトに組み込んで使う方法を紹介します。
ライブラリから適当な名前で読み込んだ関数は、引数に`2021年2月26日`や`令和三年二月二六日`のような日付を表す文字列か、`{“@
RustでWebAssemblyを使ってみた時の記録
# この記事について
プログラミング独学3年目の文系大学生の開発メモ。# なぜWebAssemblyなのか
特に理由はありません(笑)
最近話題になっていると聞いて触ってみました。# なぜRustなのか
これも特に理由なしです。
システムプログラミング言語なのに低レベルだけではなく、色々なアプリケーションを開発するためのライブラリが揃っていると聞いて興味を持ちました。# 開発環境 (2021/02/26現在)
Windows10 Education バージョン 20H2 (Windows10 Home バージョン 20H2上のVMware Workstation Player 16仮想マシン)
Visual Studio Code
gcc 8.1.0
node 11.13.0
npm 6.9.0
rustc 1.50.0
cargo 1.50.0# 開発開始
[MDNに掲載されているRust用のWebAssembly入門](https://developer.mozilla.org/ja/docs/WebAssembly/rust_to_wasm “Rust から We
Node.js+MongoDB構成でGraphQLのお勉強
#はじめに
現場でGraphQLを使用しているのですが、保守改修段階でプロジェクトに入ったのでスキーマ作成などの基本的なところをやったことがありませんでした。また、NoSQLデータベースも使ったことがなかったので、まとめて学んでみようということでNode.js+MongoDBの構成でGraphQLサーバをたててみることにしました。今回作成したプロジェクトはGitHubにあります。
#GraphQLのよさ
RESTとの比較記事がいたるところにあるので(例えばこちら)詳しく書きませんが、単一のエンドポイントであるというのがGraphQLの一番の特徴です。GraphQLをつかうことで、RESTで必要なすべてのデータを取得しようとするときに発生する以下のような問題を解決することができます。
– 複数のエンドポイントへリクエス
