JavaScript関連のことを調べてみた2020年12月01日

RedHat OpenShiftのNode-REDオペレータを利用する方法

日立製作所OSSソリューションセンタの横井です。この記事では、OpenShift上でNode-REDを利用する方法について説明します。OpenShiftのウェブコンソールのおかげで、初心者の方でもコマンドライン操作なしで、Node-RED環境を簡単にデプロイすることができます。最近、OpenShiftカタログには、次のようなNode-REDオペレータが用意されるようになりました。

[RedHatエコシステムカタログ](https://catalog.redhat.com/software/containers/search?q=node-red)

2020年12月現在、カタログには4つの項目があります。この中の「Node-RED Operator」をKatacoda上のOpenShift環境に導入してみましょう。

# (1) OpenShiftのウ

canvasの文字がぼやける・にじむ 他【HTML5】

ハマったのでメモ。

# fillTextで書いた文字がにじむ

結論から言うと、[ここに書いてあること](https://developer.mozilla.org/ja/docs/Web/API/Window/devicePixelRatio)をやればいい。windowsなのでRatinaディスプレイ云々は関係ないと思い込みスルーしていたのだが、windowsの設定で「全体を大きくする」を使用していたことをすっかり忘れていた。

以下、ついでにハマったことメモ。

# fillTextの高さがおかしい

高さの基準がデフォルトでalphabeticになっているため、CSS感覚で指定すると何か上にずれる。[textBaselineをtopに指定すれば](https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingContext2D/textBaseline)解決する。

# canvasの画像をリサイズする
上の方法でcanvasの内部解像度を大きくすると、画像にした時に環境によって画像サイズが変わってしまう。jsで新し

Ethereum（ブロックチェーン）のスマートコントラクトの処理履歴を取得する方法

# はじめに
この記事では、Ethereumのスマートコントラクトの実行結果の履歴を取得する方法について解説していこうと思います。

自身でdAppsを作る場合は、スマートコントラクトの処理の状態を確認するために、スマートコントラクトの実行結果を監視したりします。それ以外にも、他者が作ったdAppsの利用状況を把握するといった目的で、スマートコントラクトの実行結果の履歴を取得することもできます。

今回は、dAppsの利用状況を把握するケースを例に解説していきます。

# 環境
この記事では、下記を利用します。
– 言語：Javascript
– 実行環境：Node.js
– 接続先ブロックチェーンノード：Infura

# 利用状況を確認するdApps
今回はRaribleというdAppsを対象にスマートコントラクトの実行結果を取得します。Raribleは、デジタルアート（NFT）を売買できるdAppsで、2020年12月現在、利用量で世界トップクラスのdAppsです。
https://rarible.com/
![スクリーンショット 2020-11-10 16.30.25.png]

npm installとexpo installの違いって何？

## 結論

expo installは、

「使用中のExpo SDKのバージョンと互換性のある依存関係のバージョンをインストールする」

点が異なります。

## 挙動の違い

npm installもexpo installも実際のインストールはnpmやyarnを呼び出します。

### expo installでインストールする場合

“`
expo install expo-secure-store
“`


yarnを使ってSDK39と互換性のあるネイティブモジュールをインストールと書いてありますね。
以下のようにバージョンをしてくれています。

“`
expo-secure-store@~9.2.0
“`

### npm installでインストールする場合

![image.png](https://qiita-image

【javascirpt】switch文と正規表現を組み合わせるやり方。

# javascriptのswitch文で一瞬躓いたところ
javaScriptでコーティングする際、switch文と正規表現を組み合わせたい。そう思うことってあると思うんです。
その際、

“`javascript
var body = “遅刻するので休みます。”;

switch(body) {
case /遅刻/.test(body):
console.log(“遅刻”);
break;
case /早退/.test(body):
console.log(“早退”);
break;
default:
console.log(“なんか書いてよ”);
}
// 結果：なんか書いてよ
// 本当は遅刻が出力されてほしい。
“`
と書くと認識してくれません。

ではどうすればいいのかというと

“`javascript
var body = “遅刻するので休みます。”;

switch(true) {
case /遅刻/.test(body): // test()

なぜJSが必要なのか？　(JS学習アウトプット)

##あいさつ
初めての人は初めまして！知っている人はこんにちは！
Atieです！
実は一度qiitaのアカウントを消したのですが「[web系エンジニアになろう](https://www.amazon.co.jp/21%E4%B8%96%E7%B4%80%E6%9C%80%E5%BC%B7%E3%81%AE%E8%81%B7%E6%A5%AD-Web%E7%B3%BB%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%AB%E3%81%AA%E3%82%8D%E3%81%86-AI-DX%E6%99%82%E4%BB%A3%E3%82%92%E7%94%9F%E3%81%8D%E6%8A%9C%E3%81%8F%E3%81%9F%E3%82%81%E3%81%AE%E3%82%AD%E3%83%A3%E3%83%AA%E3%82%A2%E3%82%AC%E3%82%A4%E3%83%89%E3%83%96%E3%83%83%E3%82%AF-%E5%8B%9D%E5%8F%88/dp/4408339334)(勝又さん)」の本を読んで「q

未経験からのエンジニア転職を目指す人の学習記録②

こんにちは。
前回からの進捗状況を報告致します。
同様に現職の仕事もしながらプログラミング学習をしている方やこれから勉強を始める方への参考になれば幸いです。

#①M1 MacBookAirを購入
表題の通り、M1 MacBookAirを購入しました。
GPU7コアでメモリだけ16GBにカスタマイズしたものです。

ただやはり言われているようにDockerやVirtualBoxなどの仮想環境ツールは動作せず。
届いたのが22日の日曜日でしたがこの日と次の月曜日はほぼ開発環境を整えるのに時間を費やしました（笑）
色々試行錯誤して、HomeBrewなどダウンロードできたもののRails -s でローカルサーバーが立たず、、、

徹夜でやってもうまくいかず一旦環境作りは諦めましたね、、、
#②Progate JavaScriptまで一周終了、ただ、、、
気を取り直してProgateを再開しましたが、RailsコースをVあたりでわけわからなくなったので中断してしまいました、、、

アプリ版でちょこちょこやってたJavaScriptコースを終わらせる方にシフトし、ちょうど終了した形になります。

JavaScriptでクエリパラメータを取得

# 方法

“`js
new URL(decodeURIComponent(document.location.href)).searchParams.get()
“`

で取得できます。

# 解説

“`
http://example.com/?param1=hoge&param2=fuga
“`

例えばこのようなクエリパラメーターつきのURLがあるとします。
それぞれ`param1`と`param2`の値である`”hoge”`と`”fuga”`を取得したいと思います。

## URLを取得

“`js
document.location.href
// “http://example.com/?param1=hoge&param2=fuga”
“`

パーセントエンコーディングに対応させる場合

“`js
decodeURIComponent(document.location.href)
“`

このようにしてデコードできます。

## パラメータを取得

“`js
new URL(decodeURIComponent(document.

Flash Advent Calendar 1日目 – JavaScriptでの開発環境の構築 –

当時は`grunt`が主流で、`gulp`が出始めた頃でした。
JSで本格的な開発をするにあたってどちらで進めるか悩んだのですが
折角だから新しい`gulp`を使ってみようという安易な理由で`gulp`を選びましたw

また、当時はJSでテストを全然書いてなかったので
デグレに苦しめられていて。。。この機会にテスト駆動で開発してみようと思ったのも`gulp`を選んだ理由の一つでもあります。

# 目次
1. Node.jsを準備する
2. gulp & karmaを準備する

# 1 Node.jsを準備する
nvmでNode.jsは管理する
※バージョンが古いですが、2015年位のお話なので、悪しからず

“`linux
cd ~
git clone https://github.com/creationix/nvm.git ~/.nvm
source ~/.nvm/nvm.sh
nvm install v8.9.3
nvm alias default v8.9.3
“`
自分のhomeディレクトリにnvmをcloneして起動
macを起動した時に自動でNode.jsが起動す

時間起動を試作。ドラクエの宿屋の曲をObnizの圧電スピーカーで流してみた。

Obnizの時間起動のテストとして、ドラクエの宿屋の曲を圧電スピーカーで流してみた。起動したい時間をDB登録しておいて、その時間になったら曲を流す。（曲のチョイスはただの遊び。あと、音飛びはただのテストなので勘弁して。）

#obniz #protoout
時間起動の試作で、ドラクエの宿屋の曲を圧電スピーカーで。（テストなので音飛びは勘弁…） pic.twitter.com/HtZ2sgG4BB

— @Jis (@PmanRabbit)

Node-RED の JSONata で日付と時間をうまく扱える Tips

この記事は Node-RED Advent Calendar 2020 1日目の記事です。

いよいよスタートです！参加される、Node-RED UG のみなさまよろしくおねがいします！

今年もアドベントカレンダーはじまりましたね！

## Node-RED の JSONata 機能について

以前も enebular で使える JSONata 式の便利 Tips といった記事を書いておりまして、Node-RED における JSONata の便利さを日々感じています。

詳しくは、英語ですが

JSONata Documentation · JS

【JavaScript】JavaScriptにおけるクロージャーとは

※当方駆け出しエンジニアのため、間違っていることも多々あると思いますので、ご了承ください。また、間違いに気付いた方はご一報いただけると幸いです。

#クロージャーとは
####「外側のスコープにある変数への参照を保持できる」という関数が持つ性質のこと。
…なんのこっちゃ。

実際にクロージャーを用いたコード

“`javascript
function outside() {

let count = 0;

function inside() {
count = count + 1;
return count;
}
return increment;
}
“`
このような関数があるとします。
この時、

“`js
const myCounter = outside();
console.log(myCounter());
“`
このように、outsideを実行して、変数myCounterに格納し、中身をみてみると。

“`js
>> function inside() {
count =

【備忘録】htmlのselectで特定のものを選んだときに追加項目を出し、かつ必須項目に設定する

##やりたいこと
formのselect(プルダウンメニュー)で特定のものを選んだら
1.追加項目を出す
2.追加項目に必須項目を設定する


##結論
jsを使って入力可否を入れ替える。

“`html:index.html

生産地
種類	Nuxtでlayout適用時にページが表示されないときの解決策 # Nuxtでlayout適用時にページが表示されない ## 起きていること layoutを適用した場合、pagesの\