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

JavaScript　slice()　文字列から好きな場所だけ切り取る

## 用途
文字列から好きな場所だけ切り取りたい時に使う。

## 使用方法
“`js:書き方
var hoge = “文字列”;
hoge.slice( 開始位置, 終了位置 ); // 終了位置は省略可能
“`

“`js:例（終了位置を指定）
var hoge = “ABCDEFGHI”;
var hogehoge = hoge.slice(3, 5);
console.log(hogehoge);

// 結果
// DE
“`

“`js:例（終了位置を指定しない）
var hoge = “ABCDEFGHI”;
var hogehoge = hoge.slice(3);
console.log(hogehoge);

// 結果
// DEFGHI
// ※開始位置以降全て取得する
“`

“`js:例（開始位置がマイナス）
var hoge = “ABCDEFGHI”;
var hogehoge = hoge.slice(-2);
console.log(hogehoge);

// 結果
// HI
“`

**引数マイナスについて**
末尾が -1 か

複数ドキュメントの取り扱い

今回は、HTMLページにおいて複数のドキュメントを扱う方法とかについてざっくり解説していきます。まず、下のコードをご覧ください。
“`html

“`
これは、iframe要素、つまりインラインフレームを使用した文書です。インラインフレームとは、その中に別の文書を表示する仕組みのことです。この文書では、文書の中にtest.htmlという別のページが表示されていることがわかります。

このページ全体が一つの文書ですが、表示されているtest.htmlも一つの文書です。そこで、JavaScriptでそれを処理する方法があります。

なお、今回のようにJavaScriptから他のページをいじる場合は、同じオリジンポリシーの制限を受けることになります。これは簡単に言うと、他のWebサイトの内容を読み

javascript 学び２

●while
繰り返し
　while(条件式) { 繰り返す式 }

●for
繰り返し
　for(変数;条件;計算式) { console.log }

●配列
　const animals1 = “dog”;
const animals2 = “cat” ; → const animals [“dog”,”cat”,”sheep”];
const animals2 = “sheep”;
,で区切る
インデックス番号は０からの開始となるので注意！！

●length
要素数
　console.log(animals.length); 要素数を出力

●オブジェクト
　const item {プロパティ1：値1,プロパティ2：値1};
item.プロパティ１　= 値; で該当するプロパティの値を変更可能

新入生、新人、一緒にJavaScriptしようぜ。第一日

2014 年にアメリカで始まった完全無料のプログラミング学習サイトの「freeCodeCamp」

最近日本語訳されたみたいだね！！翻訳してくれた皆さんありがとう?

思い切り勉強楽しむね！❤️#駆け出しエンジニアと繋がりたい #freeCodeCamp

JavaScriptのpushを使うときの注意点

初歩的なことだが初学者はハマってしまうと思うので備忘録

## push戻り値は要素数
pushメソッドは配列に追加してくれるが，**戻り値は要素数**となってしまう

つまり変数の上書きはダメです

“`js
let numbers = [1, 2]
numbers.push(3)
console.log(numbers);
// 出力は，　　[1,2,3]　になる
“`

“`js
let numbers = [1, 2]
numbers = numbers.push(3)
console.log(numbers);
// 出力は，　3 になる
“`

私は変数の上書きや別の変数をつけて使用しようとしてしまったのでハマりました

【ServiceNow】よく使われるスクリプト集（更新中）

# 目的
ServiceNowの開発において、コピペで簡単に使えるサンプルJavaScriptを纏めます。

# サーバースクリプト集
– レコードを挿入する
“`javascript
var gr = new GlideRecord(‘incident’);
gr.initialize();
gr.setValue(‘name’, ‘New Incident’);
//挿入結果
var insert_result = gr.insert();
//挿入結果により、成功または失敗を判定する
if (insert_result ) {
gs.info(‘挿入が成功しました’);
} else {
gs.info(‘挿入が失敗しました’);
}
“`
– レコードを検索する
“`javascript
var rec = new GlideRecord(‘incident’);
rec.addQuery(‘active’, true);
rec.query();
“`
– レコードを更新する
“`javascript
var gr = new GlideRecord

JavaScript 学びまとめ１

●console.log(” “);
()内に書かれた文字を出力

●//console.log
コメントアウト

●let name
変数　変数は書き換え可能
※nameの部分は自由に命名可能　英単語、２文字以上の英単語は大文字で区切る　例）oddNumber

変数更新の際は、”let”　は付けない

●const name
定数

テンプレートリテラル
文章の中に変数や定数を用いることができる
console.log(`~${変数or定数}~`) ()内は“(バッククォーテーション)で囲む
変数（定数）は${}で囲む

●if
条件分岐　if (条件)　｛　処理　}

●演算子
・演算子　< <= > >=
・等価演算子　== 等しい　!= 異なる
・厳密等価演算子　=== 厳密に等しい　!==　厳密に異なる

●else
ifの条件が成り立たない場合の処理
if (条件) { 条件trueの時の処理　} else { 条件falseの時の処理　}

●else if
条件追加
if (条件１) { 条件１がtrueの処理 } else if(条件２) { 条件１

【MEO対策】【Googleマイビジネス】口コミと評価一覧をExcel形式で取得するブックマークレット

Googleマイビジネス（GoogleMap）の店舗の直近の口コミレビューと評価について、APIや専用ツールを使わずに簡易的に取得するブックマークレットです。PC版GoogleChromeで確認しています。MEO対策の一環として、まだAPIや専用ツール使うほどじゃないないんだけどまとめたい・・・という時などにご活用ください。

※あくまで表示されているものをまとめているので、日付は明確な日付でなく、〇ヵ月前、〇週間前といった表記になります。

## 結果イメージ
こんな感じで、Excelにまとめやすいタブ区切りのデータを出力出来ます。

## 使い方
事前準備：後述するコードを、適当なブックマークのURLに貼り付け。

1.知りたい店舗を検索→マップに表示
![revew1.png](https://qiita-image-store.s3

C#でMonacoEditor

WebView2でMonaco Editorを使用する。
Monaco Editorを至る所で目にするので（ブラウザ・デスクトップアプリ）
C#のWPFアプリにも取り入れてみました。
electronでやるのが一般的

– Monaco Editor

https://microsoft.github.io/monaco-editor/

## 環境
– C# 8か9くらい
– .NET6
– WPF

## ソースコード
– 実装

https://github.com/Yuki4-dev/SimpleMonaco

## 画面
WPFで動作するシンプルなMonacoEditorです。
コマンドライン引数を指定することで、開くファイルと言語シンタックスを選択することができます。
Ctrl＋Sで名前を付けて保存or上書き保存を行うことができます。
（以下の画面は言語シンタックスをJavaScriptに指定）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/688992/b46d5793-

Beebotte で外向きの HTTPリクエスト（Webhook）が扱える BeeRule（BeeRules Engine）を使う

過去に、以下の記事でも扱った [Beebotte](https://beebotte.com/) に関する記事の 第4弾となるものです。

– [Beebotte の REST API と MQTT の組み合わせを公式情報を見つつ試す（curl と Node.js）【2022年4月版】 – Qiita](https://qiita.com/youtoy/items/be1ffffa2f003082bef8)
– [MQTTブローカーとしても使える Beebotte で MQTT.js を使った Pub/Sub（Node.js で実装）【2022年4月版】 – Qiita](https://qiita.com/youtoy/items/e2539558b67e708b905d)
– [Beebotte のダッシュボードで M5StickC から送った数値をグラフ化する（UIFlow ＋ MQTT でデータ送信） – Qiita](https://qiita.com/youtoy/items/b65ddfc89a03117a0ee3)

## 今回の記事の内容
今回扱うのは、以下の [Be

プロパティ名を引用符（クォーテーション）で囲むことについての話

**（小鳥のさえずり 8分42秒）**

**ナレーション:** むかしむかし、あるところにおじいさんとおばあさんがいました。

**（川のせせらぎ 2分23秒）**

**おじいさん（少し小声で）:** JavaScriptのコードを読んでいると、次のようなオブジェクトが定義されていました。プロパティ名の `background-color` はなぜ引用符で囲っているの？

“`js
const obj = {
color: ‘red’,
‘background-color’: ‘blue’,
}
“`
**おばあさん:** 答えはMDNに書かれています。[オブジェクトリテラル](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Grammar_and_types#object_literals) の項目を見てみると、

> オブジェクトのプロパティには空の文字列を含むあらゆる文字列が使えます。もしプロパティ名が JavaScript で有効な識別子か数値でなければ、引用符で囲む必要があります。[^1

JavaScriptのmatchメソッドでマッチした文字列を取得する際のエラー回避

# 前提
JSで文字列の一部をパターン指定で抽出する際、matchメソッドを用いる。
このmatchメソッドの返り値は以下の2通り。
– マッチした場合 : `Array`
– マッチしなかった場合 : `null`

参考：[String.prototype.match() – JavaScript – MDN Web Docs](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/match)

# やりたいこと
マッチ結果の配列ではなく、該当した文字列を直接取得したい。
とりあえず次のようなコードを書いた。

“`javascript
const result = ‘abc123XYZ’.match(/[0-9]{3}/)[0] // ‘123’
“`

しかし、文字列の中に指定パターンが存在せずマッチしなかった場合、null[0]のような形になってしまい、エラーになる。
“`TypeError: Cannot read properties of null

容量無制限Dropboxで容量無制限Imgurを作る

See the Pen
Dropbox by John Doe (@04)
on CodePen.

`と書く必要がある

## 私がとった方法
参考にしたサイトではvscodeの`live server`を使っていたが
私はxamppを使ってサーバーを立てた

参考
--
https://hothukurou.com/blog

Vue.jsでelで指定したidの要素の子要素にさらにelで指定したidがある時

例えば下記の様に二つのvueコンポーネントを登録したjsファイルがある
```like.js

Vue.component('like-component', require('./components/Like.vue').default);

const like = new Vue({
el: '#like',
});
```
```star.js

Vue.component('star-component', require('../components/Star.vue').default);

const star = new Vue({
el: '#star',

});

```

これらを一つのテンプレートで下記の様に読み込むとする
```app.blade.php

オブジェクトとクラスをjavaScriptとpythonで比べる

紛らわしいので、記事にして、アウトプットしておく。

クラスandインスタンス化

javaScript

```javascript
class Person {
run() {
console.log("run")
}
}
const person = new Person();
person.run();
```

python

```python
class Person(object):
def run(self):
print("run")

person = Person()
person.run()
```

__init__とconstructor

javaScript

```javascript
class Person {
constructor(name) {
this.name = name;
}
run() {
console.log(

同一form内の押すボタンによってaction内容を変更する

## 概要
編集ページを作っている際に同じformタグ内に複数submitボタンが欲しい場合があったので、同一フォーム内で押すボタンによって、actionの内容を変更する方法を記載する

展開しやすいようにjQueryなどは使わず、素のJavaScriptで記載します。

## 実装イメージ

今回は同一ページ内に以下のようにbuttonタグを配置して、押したボタンによって指定のurlを叩くといった動作をさせます。

## 完成ソース

```html

出勤

axiosでページ遷移してフラッシュメッセージを出す！

# [何をするか？](#-2.何をするか?)
WEBサービス内でコンテンツを削除したりする際にモーダル画面を出す時は
Vue.jsでやったりする方が楽だったりします。

その際にaxiosを使用して削除実行後に特定のページ、または同一ページに遷移した後に
フラッシュメッセージを出したいとします。いや、出したい。

*削除ボタン押してモーダルが出るこんなイメージ

削除用ルーティング
```web.php
Route::post('/delete/{id}','DeleteController@idea_delete')->name('delete');
```

下記の様に削除ボタンがあったとしましょう。
今回は簡単な例なのでController内の記述は省きます
propsで削除す

インラインスクリプトをデバッグする方法

# はじめに

インラインスクリプト(htmlのscriptタグに書かれたjavascript)をデバッグするには、サーバに配置したhtmlファイルなどを書き換える必要があります。
例えば、[このようにして](https://qiita.com/madobon/items/cf1a22b7960840bb1a65)。
つまり、手の届くところにhtmlファイルがないとデバッグできません。

まさにこのデバッグできない状況に追い込まれました。

そうしたときにどのようにしてインラインスクリプトのデバッグを実現するのか?
これについて、私が実際に使った方法を書き残しておきます。

本文の手順1と2については状況によっては不要もしくは代替手順が必要です。
例えば、htmlのデバッグしたいscriptタグ内にベタ書きでスクリプトが記述されている場合は不要です(その場合の代替手順については本文の「手順」節の次節にて提案します)。

しかし、今回私が遭遇したケースのように、jsがどこかのタイミングで対象scriptタグ内に外部jsファイルを書き込んでいる場合は、手順1と2との両方を行うことになるかと

Beebotte の REST API と MQTT の組み合わせを公式情報を見つつ試す（curl と Node.js）【2022年4月版】

過去に、以下の記事でも扱った [Beebotte](https://beebotte.com/) で、REST API と MQTT を組み合わせて使う話です。

- [MQTTブローカーとしても使える Beebotte で MQTT.js を使った Pub/Sub（Node.js で実装）【2022年4月版】 - Qiita](https://qiita.com/youtoy/items/e2539558b67e708b905d)
- [Beebotte のダッシュボードで M5StickC から送った数値をグラフ化する（UIFlow ＋ MQTT でデータ送信） - Qiita](https://qiita.com/youtoy/items/b65ddfc89a03117a0ee3)

## 通信方法に関するドキュメントを見てみる
### Beebotte の MQTT
MQTT を使う話は、冒頭でも掲載していた[過去記事](https://qiita.com/youtoy/items/e2539558b67e708b905d)をご参照ください。

### Beebotte の R