JavaScript関連のことを調べてみた2022年08月19日

人事のおじさんプログラミングを学ぶ Day3「ダイアログボックスの表示」「HTMLを書き換える」

書籍『確かな力が身につくJavaScript「超」入門 第2版』に沿ってやってみた。
繰り返し書かないと忘れちゃうね。まずは考え方だけちゃんと理解しておこ。



discord.js v14を使用した簡単な応答botの作り方

# discord.js v14を使用した簡単な応答botの作り方
## はじめに
どうもはじめまして、だらけ(darakeee)です。
今回はdiscord.js v14を使用して簡易的な返答Botを作っていこうと思います。

こちらは、JavaScript と discord.js を利用した Discord Bot 開発のチュートリアル記事を想定して書いております。

もし説明が間違っていたり、分かりづらかったら教えてください。

DeveloperPortalで必要な操作は別の記事を書いたので、こちらをご覧ください。

https://qiita.com/darakeee/items/bb923e1c0cde6c552f9f

## 動作環境
– npm 8.14.0
– node.js 18.4.0
– discord.js 14.1.2
– dotenv 16.0.1

※discord.jsは「16.9.0」以前は対応していないので注意。

## ファイル構成
> discordBot/
　├ node_module/
　├ src/
　│　 └ index.js
　├

Python,Ruby,PHP,Java,JavaScript,Perlの文字列処理の比較

Python,Ruby,PHP,Java,JavaScript,Perlの文字列処理の比較

# Python

https://qiita.com/tomotaka_ito/items/594ee1396cf982ba9887

# Ruby

https://qiita.com/kyohei-horikawa/items/b3308601931c20074c31

# PHP

https://qiita.com/chimayu/items/9b9cb14548aa7dd8da1b

# Java

https://qiita.com/suema0331/items/a3c947076ee1a0c6037a

# JavaScript

https://qiita.com/saka212/items/11ce1f1d6316c1fbf15b

# Perl

https://perlzemi.com/blog/20161003147558.html

SliP のご紹介

こんにちは SliP というコンピュータ言語を細々と作っているものです。最近この言語を使って複数の数式をコピペして一気に計算できる電卓サイトを作ったので紹介させて下さい。もしご意見等いただけたら幸いです。

アドレスは https://slip.828.tokyo になります。

## 基本

まずはSliPの基本的なプログラムがどのような見た目かというと、数式そのものです。

“`
4+2
“`

このプログラムを評価すると6が出力されます。
同様に他の四則演算は以下のようになります。

“`
4-2
4×2
4÷2
“`

この3行は 2,8,2 と評価されて出力されます。
ちなみに掛け算の演算記号は`*`ではなく`×`、割り算のは`/`ではなく`÷`です。

上記の例でわかるように、SliP は中置記法で記述する言語です

JSでawait出来るsetTimeoutがたった１行で作れるって話

## コード ?

“`js
await new Promise((resolve) => setTimeout(resolve, 3000));
“`

以上！
めちゃくちゃ簡単?

:::note warn
awaitを使っているので、これを使う関数にはasyncを付ける必要があるので要注意！
:::

## 簡単な解説 ?

:::note info
前提知識として、Promise() をなんとなく理解している必要があります。
:::

1行だと少し理解するのが難しいので分解してみます。

“`js
await new Promise((resolve) => {
setTimeout(() => {
resolve();
}, 3000)
});
“`

“`:処理の流れ
１．Promise内でsetTimeoutを実行する
２．setTimeoutが指定時間(3000ms)だけ待つ
３．時間が経ったらresolve()を実行して終了！
“`

`await new Promise()`の組み合わせのおかげで`resolve()`が実行されるまでは処

JavaScriptのPromiseについて part3

# 初めに
今回は`async`と`await`キーワードについてまとめていきたいと思います。

参考文章はこちらです。
[Async/await – javascript.info](https://javascript.info/async-await)

# `async`/`await`
`async`：関数が解決（resolve）された`Promise`を返すことが約束される。
`await`：`async`関数の中で、指定の`Promise`が完了（settled）状態になるまで待つ。`async function`の中のみ動作する。

## `await`
`await`の動きを見ていきたいと思います。
“`jsx
async function fn() {
let promise = new Promise((resolve, reject) => {
setTimeout(() => resolve(‘done!’), 1000)
})

let result = await promise

console.log(‘before resu

役に立つ覚書

mapとfilterを使っただぶり削除の処理

“`js
const noDuplicationTimeList = resultEntries
.map((elem) => elem)
?.filter(
(element, index, self) => self.findIndex((e) => e === element) === index
)
“`

“`js
const categoryName = resultEntries
?.filter(
(element, index, self) =>
self.findIndex((e) => e === element) ===
index
)
.map((elem) => elem)
“`

【js】スマホアドレスバーを除いたvhを取得する

スマホのアドレスバーが邪魔で要素と重なる、という時に使用できます。

# 画面サイズが変わる毎にvhを取得しcss変数に格納

## js
“`js

/**
* 画面サイズが変わるたびvh取得
*/
function setHeight() {
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty(‘–vh’, `${vh}px`);
}
setHeight();
//ブラウザのサイズが変更された時・画面の向きを変えた時にvh再計算
window.addEventListener(‘resize’, setHeight);

“`

# css
“`css

.fv {
min-height: 100vh; /* カスタムプロパティ未対応ブラウザ用のフォールバック */
min-height: calc(var(–vh, 1vh) * 100);
}

“`

参考：
https://web-dev.tech/front-end/javascript

JavaScript チート・オブジェクトの要素数とオブジェクトの配列の要素数を求める

– [あるWebサービスの開発メモ・目次ページに戻る](https://qiita.com/ishi32/items/152a1ecf7eeee7a8fb57)
– [あるWebサービスの開発メモ・JavaScript チートに戻る](https://qiita.com/ishi32/items/aa1db70e2176652dc97f)

### オブジェクトの要素数は .length から取得できない

“`
obj1 = {name: “mop”, age:”15″};
console.log(obj1.length);
“`

よく書いてしまうコードなのですが undefined がログに出力されます

(連想配列の)オブジェクトには .length というプロパティは無いんですね

### オブジェクトの要素数は “` Object.keys(obj).length “` から取得する

“`
console.log(Object.keys(obj1).length);
“`

2 がログに出力されます。

Object.keys() メソッドは、引数に指定された

Azure Functions (Node.JS) からの http リクエスト (GET|POST) で async/await を適用する

# Azure Functions (Node.JS) で fetch が使えない?

Rest API に GET|POST したいので、fetch を使おうとしたら動かない? ということで調べたら、Node.JS(v16) では module として利用できないので NG と．．．。

https://docs.microsoft.com/en-us/answers/questions/740430/can39t-get-node-fetch-to-work-my-first-azure-funct.html

# 公式ドキュメント: Azure Functions の JavaScript 開発者向けガイド を見てみる

公式ドキュメントである [Azure Functions の JavaScript 開発者向けガイド](https://docs.microsoft.com/ja-jp/azure/azure-functions/functions-reference-node?tabs=v2-v3-v4-export%2Cv2-v3-v4-done%2Cv2%2Cv2-log

git push前にユニットテストを自動実行させる

# 背景
テスト実行せずpushしてmaster(main)ブランチにエラーが混じるケースがあった

# 対処
huskyを導入し、push前にユニットテストを実行させる
https://github.com/typicode/husky

# 実装
huskyのインストール
※npmの場合

“`
npm install husky -D
“`

hookファイル作成
“`
npx husky add .husky/pre-push “npm test”
“`

ちなみにcommit時に実行させたい場合は `pre-commit` に記述
“`
npx husky add .husky/pre-commit “npm test”
“`

# .gitファイルとpackage.jsonが同一ファイルにない場合
こんなディレクトリ構成の場合
“`
root/
|–.git/
|–web/
| └──…
└──client/
|–…
|–package.json
└──…
“`

`.git can’t be found`というエラー

anime.js で さらに かっこいい サイト を 作る [アニメーション]

最近、こんなのを見つけました。

https://animejs.com/

anime.jsというのはhtmlの要素にアニメーションを付ける軽量なjavascriptのファイルです。
では今回はこのanime.jsを使いこなしていきましょう。

“`html:html










“`

“`javascript:javascript
anime({ //アニメを実行
// ここにふるまい,対象の要素を入力しよう

Python,Ruby,PHP,Java,JavaScript,Perlの変数の比較

Python,Ruby,PHP,Java,JavaScript,Perlの変数の比較

# Python

https://qiita.com/G-Rape/items/854a51ef188cd5933bcc

# Ruby

https://qiita.com/Hashimoto-Noriaki/items/d705a3fb92db14de4742

# PHP

https://qiita.com/tokutoku393/items/72d2f3f8986c97c36a27

# Java

https://qiita.com/takahirocook/items/52298e13281e26e576ab

# JavaScript

https://qiita.com/andota05/items/238ff472a0e711b65275

# Perl

https://perlzemi.com/blog/20161107147852.html

人事のおじさんプログラミングを学ぶ Day2「JavaScriptのファイルをHTMLファイルに読み込む」

書籍『確かな力が身につくJavaScript「超」入門 第2版』をKindleで購入。
JavaScriptのファイルをHTMLファイルに読み込んでみる。
うむ、わかりやすい。

jQueryを使ってテーブルの行をドラッグ&ドロップで並び替え

# 背景
ユーザーにより自分が好きな順番でtableの表示データーを設定できるように
`jQuery UI`の`sortable`を使用してHTMLのtable項目の並び順設定を作ってみました。

# 結果

# 環境
* jQuery: `1.8.3`
* jQuery UI: `1.8.24`

# 今回試したブラウザ
以下はテストしてみたブラウザのリストです。これ以外のブラウザにも対応できるかもしれません。
* Mozilla Firefox: `103.0.2`
* Chrome: `104.0.5112.79`
* Microsoft Edge: `104.0.1293.47`
* Safari: `15.6`

# ソースコード
## 並び替えたいHTMLのtableを用意する
“`html:html

元記事を表示

第2弾! html & css & javascript で かっこいいサイト を 作る[アニメーション]

https://qiita.com/caleb7023/items/bfa2b365d675616196a3

前回この記事が私にとって絶好だったので2弾目を作りました。
是非、LGTMお願いします。

—

最近サイトを作りました。
https://caleb7023.hmath.pro/
私のサイトはレンタルサーバーが高いので仕方なくgoogle sitesで作ってあります。
しかし、google sitesは自由度が低すぎるということで最近、
結局レンタルサーバーを借りてhtmlで作ろうと思っています。

しかしhtmlには弱点があります。
それは ***「専門知識が必要になる」*** ということです。
サイトの見栄えをよくしないと誰も来てくれません。
そこでサイトの見栄えをよくするアニメーションなどの作り方が書いてある
[動くwebデザインアイデア帳](https://coco-factory.jp/ugokuweb/)というサイトを参考に作っていこうと思います。

私が気に入ってるサイトです。

では、ここから役に立ちそうな背景のアニメーションを紹介していこうと思います。

元記事を表示

javascriptにおけるスコープについて

# 前置き
まずは以下のコードを実行するとどうなるでしょう。

~~~javascript:javascript
function count() {
for (var i = 1; i < 10; i++) { setTimeout(() => {
console.log(i)
}, i*100)
}
}
count()
~~~
このコードを実行すると、1, 2, 3, … 9を0.1秒間隔で出力すると思うけど、実は10が９回出力されます。
なぜこのような結果になったのでしょうか。
また、1, 2, 3, … 9を0.1秒間隔で出力させるためにはどのように修正すれば良いでしょうか。
これを説明するためにはこれから説明するスコープについて知る必要があります。

# 関数スコープとブロックスコープ
### 関数スコープ
~~~javascript:javascript
function someFn() {
if (true) {
var text = ‘foo’;
}

元記事を表示

【夏休み企画】#IT用語一問一答【毎朝投稿10日目】XHR

# この記事を読むと、、
– 「関連用語」を使って「XHR」を説明できるようになる
– 「XHR」がもっと好きになる(多分)

# 関連用語
Fetch API / Ajax

[**復習用**] 記事の内容を見る前に上記の言葉で「XHR」を説明してみよう！

# 企画説明
– クラウドって何？って人に聞かれて説明してるけど俺もよく知らないや、、
– ドキュメント読んでみてるけど半分くらい何言ってるか分かんない、、
– 今日の夕飯はナスの炒めものにしよっかな〜、あれ、NASってなんだっけ？

みたいなことが結構あったので、知ったかしていたIT用語を毎日一個ずつちゃんと学んでいこうっていう企画です！

昨日の記事はこちら↓

https://qiita.com/acta/items/4d0a30ff0ed6b9c9f766

# XHRとは
XHR = XMLHttpRequest = ブラウザからサーバーとデータをやり取りするためのAPI

– ブラウザのJavaScript環境で使える
– 実はHttpじゃないプロトコルでも使えるらしい
– 実はXMLじゃない形式でもデータをやり取り

元記事を表示

JavaScript_var、let、const変数宣言違い

– var,let,constの違いは
ブロックスコープ : let, const
関数スコープ : var
※ブロックは{}

例：
“`js

click me