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

【JavaScript】反復処理①　ループ文

#はじめに

Udemyの[【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)の講座の振り返りです。

前回の記事

https://qiita.com/nao0725/items/b4e9b0432850000a3a2c

#目的

* 反復処理についての理解を深める

#本題
###1.ループ文

####for文

““基本構文.
for (初期化式; 条件式; 変化式){
実行する文1;
実行する文2;
…
}
““`

Javaと一緒？？

参照

https://www.javadrive.jp/javascript/for/index2.html

““js
// ①初期値を設定
// ②条件式　→　どうなったらループ抜ける？
// ③変化式 →　1ループごとにどうやって値が変化するか
for(let i = 0; i < 10; i = i + 1){ // 0から9まで出力される console.log(i); } `

もう、なくそう。誹謗中傷を「なくす」アプリの開発

# はじめに
**技術的な内容のみをご覧になりたい方は[こちら](#技術的なポイント)からどうぞ**

[](https://tokiwaproject.page.link/mute)

**誹謗中傷をネット上から「なくす」アプリ**を開発しました。簡単にいうと、Web上の特定の単語、過激な表現や人を傷つけるような言葉を非表示にするものです。

アプリ開発の動機など、いわゆる「ポエム」よりの内容は[note](https://note.com/izumo092/n/ne17f44c9fda4)に掲載しているので、Qiitaでは機能や技術面に絞ってお話ししたいと思います。

**[ダウンロードはこちらから](https://tokiwaproject.page.link/mute)**

https://apps.apple.com

気象庁公式の天気予報の情報を 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

【JavaScript】メールアドレスとパスワードでよくある正規表現を理解する

#はじめに
こんにちは。
こちらの記事では、メールアドレスとパスワードでよくある正規表現を理解する方法を記しています。
誤っている点がございましたらコメントいただけると幸いです。

##正規表現とは
正規表現について簡単に説明すると、特殊文字の組み合わせにより、使用したい文字を指定することができます。よく使われる場面は、郵便番号で数字とハイフン`-`を指定したり、今回のようにメールアドレスとパスワードのときに用いられます。

>参考記事：https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions

##前提
こちらの[前回の記事](https://qiita.com/YuStarrr/items/989deeb6e117278f6352)で正規表現を用いたのですが、理解を深められるよう、下記のメールアドレスとパスワードに関して解説していきます。

“`javascript:
//メールアドレスの正規表現
/^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z

【Vue.js】イベントハンドラに引数を渡す、$event

#はじめに
こんにちは！
今回は【Vue.js】イベントハンドラに引数を渡す方法、$eventについてアウトプットしていきます！

#書き方・解説
前記事の`メソッドイベントハンドラ`の内容を例に解説していきます。

“`HTML:HTML

{{ message }}

Click!

“`
“`Vue.js
var app = new Vue({
el: “#app”,
data: {
message: ”
},
methods: {
clickHandler: function(message) {
this.message = message
}
}
})
“`

動作としては、ボタンをクリックしたら`clickHandler`を呼び出す。その時に値(`Vue.js!`)を出す。
そしてそ

WYSIWYGエディタのためのSelection, Range(JavaScript)の扱い

#WYSIWYGエディタのためのSelection, Range(JavaScript)のサンプル
##イントロ
自前のCMS(WYSIWYG)を作成するために、innerHTMLをcontenteditable=trueで編集していました。
strongタグやspan(特定のクラスを与えている)タグで要素を囲んだり、するための関数を作成しましたが、結構めんどくさかったので、記事を作成しました。
特に、**タグを解除する**機能が大変でした。
もっとよう方法があれば教えてください。

“`vuejs

文字サイズ(範囲選択:小)

“`

“`javascript
makeStrong() {
const selection = window.getSelection();
if (selection.rangeCount > 0 && !selection.isCollapsed) {

[JavaScript] JR新幹線の運賃計算がそれなりに複雑なのでテスト駆動で実装してみた

新幹線の運賃を行ってみました。

## 仕様

元の計算仕様はこちらの通りです。

masuda220/jr-pricing
https://github.com/masuda220/jr-pricing#12月から１月の繁忙期と閑散期

> # JR 新幹線 料金ルールを実装してみよう
>
> 今回はサンプルとして
>
> – 出発地：東京
> – 目的地：新大阪または姫路
>
> とする。
>
> # 料金ルール (Fare System)
>
> 料金 ＝ 運賃 + 特急料金
>
> 運賃、特急料金は１０円単位が基本です。（券売機で１円硬貨、５円硬貨を扱わないため）
>
> ## 基本の運賃と特急料金
>
> 東京からの運賃と特急料金は以下の通り。
>
> ### 運賃(basic fare)
>
> – 新大阪まで 8,910 円
> – 姫路まで 10,010 円
>
> ### 特急料金(super express surcharge)
>
> #### 指定席(ひかり)
>
> – 新大阪まで 5,490 円
> – 姫路まで 5,920 円
>

htmlファイル内にjsが書かれている場合のデバック方法

これ知らなかったのでかなり便利！！
詳しくは[参考サイト](https://qiita.com/madobon/items/cf1a22b7960840bb1a65)を見てください！！

以下のコードを入れるだけで開発ツールにJSファイルとして出てくる
ファイル名はお好きにつけてください

“`
//# sourceURL=hello-world.js
“`

なぜ私はdiscord.jsを選ぶのか

## 前書き
最近というか前々から私はdiscord.jsでの開発をメインにしています。
旧垢含め、時々discord.pyの開発を多めにやっていたこともありましたが、やっぱりdiscord.jsの開発に戻ってきます。
なぜ私がdiscord.pyやdiscord4J、discordrbではなく、discord.jsを選んだのかをご紹介したいと思います。

## 初心者でも比較的簡単に開発できる
1番目にこれかなと思っています。
私のようなプログラミングをし始めた初心者でも比較的簡単に開発ができると思っています。情報が多いので、初心者でも調べれば分かるなんてこともあります。
意味は分かってなくてもYoutube見てなんとなくコードを書いてみたら動く、なんてこともあります。（一応意味が分かっていた方が良いとは思います）

## 情報が多い
先程と繋がりますが、情報がめちゃくちゃ多いです。
Discord.js Japan User Groupというものもあります。

https://scrapbox.io/discordjs-japan/

試しにGoogle先生に「discord.js

○○分後に死ぬSpatial.chat ~ 裏仕様10000分数制限との戦い、そして事件は起こった ~ #iotlt #protoout

いや、戦えません。撤退する話です。

そしてそこまで大トラブルにはなってない（個人の感想）けど面白いので記事にしておきます。

トラブル発生 -> ネタにして実装&記事まで書くができたのでトラブルに逆に感謝。

## Spatial.Chatのフリープランは裏仕様がある

[IoTLTのハッカソン](https://iotlt.connpass.com/event/227414/)で知りました。

こんな感じで追い出された人いません？#iotlt #protoout pic.twi

JavaScript DOM操作③ 「タグ名をキーに要素を取得」

#目次
[1.はじめに](https://qiita.com/Stack_up_Rising/items/579cf47faf5f1bdb41e7#1-%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB
)
[2. getElementsByTagName](https://qiita.com/Stack_up_Rising/items/579cf47faf5f1bdb41e7#2-getelementsbytagname
)
[3.どうやって書くの？](https://qiita.com/Stack_up_Rising/items/579cf47faf5f1bdb41e7#3-%E3%81%A9%E3%81%86%E3%82%84%E3%81%A3%E3%81%A6%E6%9B%B8%E3%81%8F%E3%81%AE
)
[4.例題](https://qiita.com/Stack_up_Rising/items/579cf47faf5f1bdb41e7#4-%E4%BE%8B%E9%A1%8C
)
[5.おわりに](https://qiita.com/Sta

PlunkerでjavascriptのVue.js3 + ag-grid用のデバッグ環境を準備する

ブラウザ上でjavascriptがテストできるPlunkerの環境がほしかったのですが、準備するのにハマったので備忘録として記載します。
ブラウザ上でVue.js3とag-gridを確認できます！

IDEとかの開発ツールでもjavascriptを確認できるけど、ブラウザ上で簡単に確認したり、人に説明する時にPlunkerを使うととても便利です！

ag-gridのgridOptionsについて最低限必要なものを記事中段ぐらいにまとめました、ag-gridを始めたばかりの方にはすごく役に立つかもしれないです！

##Plunkerプレビュー
実際のリンクは後ほど記載させて頂きます。


##メインのhtml
メインのhtmlです。Plunkerの環境のため javascriptライブラリはunpkg経由で読み込みしてます。
chart.js

【基礎】 discord.js v13 でボット作成 #4 ～コマンドログ～

## 前書き
[前回](https://qiita.com/hitori_yuu/items/72edadc4b9e11e559b38)、コマンドをさらに使いやすく、ということでコマンドに情報を入れてみたりしました。
今回は、だれがいつ、どこでコマンドを使用したか、というログをとれるようにしたいと思います。
中型くらいのボットになると、トラブルを防ぐためにユーザーが使用したコマンドのログを取る事が多いと思われます（多分）
今回は、そのようなログを取る方法を紹介していきたいと思います。（意外と簡単かもです）

## 開発環境
[前回](https://qiita.com/hitori_yuu/items/72edadc4b9e11e559b38) と変わりません

* Windows10
* npm 7.6.3
* node 17.0.1
* discord.js 13.3.1

## コーディング
[前回](https://qiita.com/hitori_yuu/items/72edadc4b9e11e559b38)触れた`index.js`を編集します。

“`diff_java

JavaScriptの実行コンテキストを理解する

## 実行コンテキストとは
**コードを実行する際の文脈・状況**
→コードがどのような状況で実行されているのかということ

ブラウザ上でコードを実行した場合には`windowオブジェクト`と`this`がJavaScriptエンジンによって準備されます。
コードが実行されている状態によってコンテキストが変わってくるので、これらを含めたものを**実行コンテキスト**と表現します。

## 実行コンテキストの種類
実行コンテキストには以下の３つ種類があります。

– グローバルコンテキスト
– 関数コンテキスト
– evalコンテキスト

なお、evalコンテキストについては、evalという関数自体が非推奨であるため、本記事では扱いません。

基本的にはこの３つのコンテキストが存在します。

## グローバルコンテキスト

グローバルコンテキスト内でコードを実行しているときには以下の３つが使えます。

– 実行中のコンテキスト内の変数と関数
– グローバルオブジェクト
– this

実際のコードで確認してみます。

“`html:index.html

【JavaScript】演算子と優先順位

#はじめに

Udemyの[【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)の講座の振り返りです。

前回の記事

https://qiita.com/nao0725/items/fcba89f9c5fb2d7332ae

* 演算子と優先順位についての理解を深める

#本題
###1.演算子と優先順位

演算子とは
値(オペランド)を元に処理を行い、**結果を返す**記号
ex. =, +, new…

演算子には優先順位がある

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

21〜0までの優先順位が決められており、21から先に処理する

####例1

実際のコードで優先順位を確認する

“`js
// 3と出力される
// +と=では+のほうが優先順位が高い(リンクの表参照)
// よって、先に足し算が行われてから、

Photoshopで画像をレイヤとして一括読み込み

3Dのレンダリングした複数の画像を決まった設定で Photoshopのレイヤとして読み込む作業が出たので
一括処理するPhotoshop用スクリプトを作成してみました

Photoshopと同じ階層にあるフォルダと同名の**グループ（レイヤーセット）を作成**して、フォルダ内の画像を
設定に従って**レイヤ名　合成モード　不透明度　塗りの不透明度**を調整してレイヤとして読み込みます
レイヤとして一括読み込みだけなら標準であるものの　合成モードや透明度の定型操作が多かったためこの仕様です

## 使い方
今回のスクリプトは
スクリプト本体の**Load_layer_setings.jsx**と
レイヤの設定を記述するための**layer_setting.txt**の２つのファイルになります。

この２つのファイルは同じフォルダ階層に置いてください

Chromeの恐竜ゲームでチート使おうぜww

# はじめに
インターネットに繋いでないときChromeって恐竜のゲームができますよね。
今回はこの恐竜のゲームをJavaScriptのコンソールで改造していきたいと思います。
(link : Chrome://dino)
# 必要なもの
* ブラウザ (ChromeやChromiumなどの恐竜ゲームの遊べるもの)

# 実践
1.まずはじめに恐竜ゲームを開いてください。わざわざインターネットを
切らなくても、アドレスバーに Chrome://dino と入力すれば開けます。

2.開発者モードを開きます。開発者モードはサイトのHTMLやCSS，
JavaScriptなどを編集するところです。右クリック>検証　(F12を押してもできます)

3.Consoleタブをクリックし、以下のコードを実行

“`javascript
Runner.prototype.gameOver = function(){}
“`

当たり判定がなくなり無敵になります

“`javascript
Runner.instance_.setSpeed(100)
“`

スピードが100になります(すごく

Javascript fetchを使えるようになろう

## はじめに
初学者
基本は備忘録

## fetch APIとは
[詳しくはこちらのサイト](https://ja.javascript.info/fetch)
HTTPリクエストをサーバーに送るための関数
解決時にResponseオブジェクトを取得できるPromiseを返す
thenに渡す関数の引数はresponseにする(暗黙)

**thenを利用した場合の例**

“`js
const result = fetch(‘取得したAPIのURL’);
result.then((response) => response.json())
.then((info) => console.log(info[0].プロパティ名))
“`

## 少し説明
JavaScript は、必要に応じていつでもサーバへリクエストを送信し、新しい情報を読み込むことができます。

例えば、次のようなことができます:

注文を送信する
ユーザ情報を読み込む
サーバから最新の更新情報を受け取る
…など
…そしてこれらはすべてページをリロードすることなく行うことができます。
**基本構文**

“`

Async/Await 非同期処理

## はじめに
初学者
基本は備忘録

## Async/Await
Promiseを簡単に書けるようにしたもの

**Async**
関数の頭に`async`がついていればPromiseを返す関数
return 値 → 値をラップした解決されたPromiseオブジェクトを返す
return 値 === return Promise.resolve(‘値’)

“`js
async function f() {
return 1;
}

f()
.then((data) => console.log(data))// 1
“`

**Await**
`async`関数の中でのみ動作する
Promiseが確定しその結果を返すまで、JavaScriptを待機させる。

構文

“`js
// async 関数の中でのみ動作します
let value = await promise;
“`

**1秒で解決するPromiseの例**

“`js
async function f() {

let promise = new Promise((resolve, reject

非同期処理 Promise

## はじめに
初学者
基本は備忘録
別の記事でPromiseについて取り上げたので、それとは別の実装編

# Promise + α

問題
Promiseを使って
遅延のコードを実行する
ms秒経ったらアラートを実行する

“`js
function delay(ms) {
// あなたのコード
}

delay(3000).then(() => alert(‘runs after 3 seconds’));
“`

答え

“`js
const delay = (ms) => {
return new Promise((resolve, reject) => {
settimeout(resolve, ms)
})
}

delay(ms).then(() => alert(‘run afeter 3 seconds’));
“`

## Promiseを利用して カウントアップタイマーを作る
*実際にやってみて*

“`js
const delay = function(data) {
return new Promise((resolve,