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

Puppeteer 文字列で 特定の要素を選択したい時、またその文字列の近くの要素をクリックしたい時

#Puppeteer 文字列で 特定の要素を選択したい時、
またその文字列の近くの要素をクリックしたい時

##なぜ文字列で選択したいか

・Xpath脳死コピペ
・HTMLタグ
・クラス名やID名
では**限定しきれない時**があるから

例えば
Yahoo!広告アカウントに送られてくる特定の名前のレポートのみをクリックしたい時
**(あくまで抽象化するための例)**

##ポイントは２点

**①文字列で選択する方法**
**②その文字列自体をクリック・抽出しても意味がない
aタグまでパスを渡す**

#結論：Xpathあんま理解してなかったのが俺が悪い

“`app.js
const reportPath =
“//span[contains(text(), ‘hogehoge’)]/../..//a”;

await page.waitForXPath(reportPath);
const reportClick = await page.$x(reportPath);
await reportClick[0].click();

“`

“

JavaScript + SimpleBar: スクロールバーのスタイルをカスタマイズする

[SimpleBar](http://grsmto.github.io/simplebar/)はスクロールバーをカスタマイズするライブラリです。スクロールバーを独自につくるのではなく、CSSのスタイルを割り当てるので、おかしな挙動は起こらず、ネイティブなスクロールのパフォーマンスが保たれます。あくまで、スクロールバーの見栄えを変えるだけです。


#### デザインはCSSで定める
SimpleBarは純粋なCSSでスクロールバーのスタイルを定めます。CSSで与えられるスタイルでさえあれば、自由にカスタマイズできるのです。

#### 軽量なライブラリ
6KBのとても軽いライブラリです。JavaScriptはスクロールの動きそのものには触れません。ネイティブな動きとパフォーマンスが得られます。

#### モダンブラウザをサポート
ChromeとFirefox、Safariなどのモダ

javascriptでアナログ時計を作成

今回はjavascriptでアナログ時計を作ってみました。

—-

## なぜ作ったか

—-

アナログ時計なので
時間周りの処理が必要なのでそこらへんの勉強になるのと、
あまりwebサイトではアナログ時計を見ないですが、サイトにあったら意外とお洒落かもと思って
作ってみました。

—-

## 作るアナログ時計の完成イメージ

—-

—-

基本的な丸型の時計です。

—-

—-

## コード

—-

### html

—-

まずはアナログ時計の元になるhtmlを書いていきます。
必要なhtmlはごく少量です。
大きく分けて、必要なのは

—-

– 外枠
– 時針
– 分針
– 秒針
–

JavaScript: 「エラトステネスの篩」を読んで関数にしてみた

とくに必要というわけではないのですが、最近、素数づいてるので書きます。

[「エラトステネスの篩」の説明の記事](https://qiita.com/Ryo-N-cell/items/69af363597b0a6fd7e1b)を読んで、全然頭に入ってこなくてもやっとしてしまったので。
(記事のせいではないです。だんだん理解力が…)

…困ったときのwikipedia。
[エラトステネスの篩](https://ja.wikipedia.org/wiki/エラトステネスの篩)

> アルゴリズム
(中略)
ステップ 1
探索リストに2からxまでの整数を昇順で入れる。
ステップ 2
探索リストの先頭の数を素数リストに移動し、その倍数を探索リストから篩い落とす。
ステップ 3
上記の篩い落とし操作を探索リストの先頭値がxの平方根に達するまで行う。
ステップ 4
探索リストに残った数を素数リストに移動して処理終了。

だそうな。

やってみます。
たぶん末尾再帰案件だとあたりをつけました。

“`js
const primesInner = primes => sieveds =>

正式リリース前に総予習!! Vue3の変更点まとめ

[8月上旬に正式リリース予定](https://github.com/vuejs/rfcs/issues/183)とされているVue3の変更点をいち早く理解できるように概要をまとめてみました。それぞれの項目ごとに[vuejs/rfc](https://github.com/vuejs/rfcs)又は[Vue3 Document](https://v3.vuejs.org/)へのリンクを貼っているので索引的に使ってもらえると嬉しいです。

この記事は以下バージョン時点の情報です。

– [vue-next v3.0.0-rc.5](https://github.com/vuejs/vue-next/releases/tag/v3.0.0-rc.5)

# Composition APIの追加
– [rfcs/0013-composition-api.md at master · vuejs/rfcs](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0013-composition-api.md)
– [Composition

ServiceNowからTeamsに通知を飛ばす

# 概要
ServiceNowではIntegrationHub にSlack Spoke, Microsoft Teams Spoke その他メッセージ送信するアクションがありますが、
別のサブスクリプションが必要なので、RESTメッセージを使用して実装できないか調べてみました。

## プラットフォーム
Paris

## サンプルケース
変更要求のステータスが実装になるとTeamsに通知するというケースを想定
変更要求の更新をトリガーでビジネスルールでTeamsのWebhookにメッセージを送信します。

# 手順

## Webhookの設定
Webhookの設定は他の記事を参考にして
[Microsoft Teams API (Incoming Webhook) で投稿](https://qiita.com/wataash/items/72b49509c3964294dd67)

エンドポイントをコピーしておく
## RESTメッセージの設定
System Web Services > Outbound > REST Message から[New] ボタンを押してREST Me

console.logでJSONから特定の要素を取り出す方法

JavascriptでJSONから特定の要素を取り出す際の考え方が配列のときと少し異なるのでまとめました。

#JSONとは
– JavaScript Object Notationの略。直訳すると「Javascriptオブジェクト記法」ということになる。JSONにおけるJavascriptオブジェクトとは基本的には、{}（オブジェクト）と[]（配列）を組み合わせてデータ構造を表現したものをJSONとして扱うことができる。

→つまり、JSONとは、{}（オブジェクト）と[]（配列）を組み合わせてデータ構造のこと。

#JSONの特定の要素の取り出し方

“`example.tsx
const messageArrayContainer: any[] = [{
“text”: [“Suzuki”, “Yamada”, “Miyazaki” ]
“user”: {“_id”: 1, “avatar”: “”, “name”: “”}
}];

console.log(‘データ’ + JSON.stringify(messageArrayContainer, repl

ブラウザ上にカメラプレビューを表示する

# 概要

– 以下のようにブラウザ上にカメラデバイスを利用してプレビューを表示します

[](https://takeshit.info/wp-content/uploads/2020/08/camera_preview.pnghttp:// “カメラプレビューサンプル”)

## 使うもの

– [navigator.mediaDevices.getUserMedia](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia)
– カメラデバイス（Facetime HDカメラ、iPhoneバックカメラ、フロントカメラ等）
– ブラウザ（Chrome）
– videoタグ
– HTTPSでアクセスできる環境（これ重要）
– ※ iPhone, Androidではssl環境下でないとカメラデ

JavaScriptの基本文法

JavaScriptの基本文法について書いていきます。
rubyと比較しながら勉強していくといいと思います!!

・window.alert()
　ブラウザでアラートを表示させるメソッド。
　例）window.alert(‘こんにちは’);

・console.log()
　ブラウザのコンソールにテキストを表示させるメソッド。
　デバックとしても使用。
　例）console.log(‘こんにちは’);

・let, const
　変数宣言の際に使用する。
　letは、後で書き換えることができる変数宣言であり、
　constは、後で書き換えることができない変数宣言ある。
　例）　let name = ‘yamada’;
　　　console.log(name + ‘さん、こんにちは今日’);

・配列 [ ]
　例）let list = [‘ruby’,’javascript’,’html’];

　①配列の要素の取得（今回はjavascript)
　console.log(list[1]);

　②配列の要素数の取得
　console.log(list.length);

JavaScriptとRust(WebAssembly)でグラフの深さ優先探索のベンチマーク

# はじめに

前々からRust + WebAssemblyでネットワーク可視化のライブラリを作っていましたが、使い勝手を良くするためのFFI（Foreign Function Interface）、つまりJavaScript側とRust側のどちらでデータを持つのか、そして他方にどのようなインタフェースを提供するのかの設計には悩まされていました。そこで今回は、グラフ処理の基本の一つである深さ優先探索（DFS）でベンチマークをとり、性能面での比較を行いました。私のアプリケーションでは、RustとJavaScript双方でアルゴリズムを書くこともあるため、グラフデータ構造の隣接リストとDFSのそれぞれをJavaScriptとRustの両方で実装し、4通りの組み合わせを比較します。

# 実装

それぞれの実装の一部を記載します。全体のソースコードは [GitHubのリポジトリ](https://github.com/likr-sandbox/dfs-bench) をご覧ください。

## 隣接リストのJavaScriptによる実装

今回のベンチマークに必要最低限の以下の4つのメソッドを実

Expressでの環境変数の設定

##環境変数を使う意義
①コード内のテキストをプレーンテキストから環境変数にすることでセキュリティ向上
②環境を変数に格納することでカスタマイズしやすくなる

##①セキュリティについて
APIキーなどの重要な情報をそのままコード内に書いてしまっていると、GitHubにアップした時に、丸見えになってしまう。

##②カスタマイズ性について
例）MongooseをMongoDBに接続する時

“`javascript
const mongoose = require(‘mongoose’)

mongoose.connect(‘mongodb=//localhost:27017/task-manager-api’, {
useNewUrlParser: true,
useUnifiedTopology: true,
useFindAndModify: false
});

“`
↓
このままだと、「’mongodb=//localhost:27017/task-manager-api’」という、ローカル環境のMongoDBに接続し続けることになる

→ローカル以外の

【Vue.js】vue-headの導入について

フロント開発をする中、head要素をvueで管理する方法として、
[vue-head](https://github.com/ktquez/vue-head)というライブラリを導入する機会があったので、備忘録としてまとめておく。

## 前提
[vue-router](https://router.vuejs.org/ja/guide/#html)を導入している事。
※この記事ではvue-routerについての解説は行いません。

## 手順
導入自体はとても簡単。
まずは`npmコマンド`でパッケージをインストール。

“`
npm install vue-head –save
“`

今回は`main.js`で読み込みます。

“`main.js
import Vue from ‘vue’
import VueRouter from ‘vue-router’
import VueHead from ‘vue-head’

Vue.use(VueHead)
Vue.use(VueRouter)
“`
あとは各ページのコンポーネント毎にタイトルとmetaタグ設定すればOK。

Mongooseでタイムスタンプを利用する

##タイムスタンプとは
ある値が作られた時間を記録するもの。
サーバー側からもクライアント側からも使用することができる。

##Mongooseにタイムスタンプを設定

Mongooseの設定から、オプションでタイムスタンプを自動作成させることができる。
＜公式ドキュメント＞　https://mongoosejs.com/docs/guide.html#timestamps

“`javascript
const mongoose = require(‘mongoose’)

const userSchema = new mongoose.Schema({
{..},
{timestamps: true}

})

“`
↓
新しく

JQueryでのDOM操作まとめ ～Javascriptでテストを自動化したい～

僕が最初にやったプログラミングは求人サイトに載っている求人の自給を自動取得だったのですが、この時の経験が今やっている開発でも生きているので記事にしてみました。
バイトの時給なんて大体同じなのでデータを集めてもあまり意味はなかったのですが、その代わりにWebのデータを集めるためにDOM要素について調べたおかげでかなりWebのことを知ることができました。

> その時読んだ記事：[Python Webスクレイピング テクニック集「取得できない値は無い」JavaScript対応@追記あり6/12](https://qiita.com/Azunyan1111/items/b161b998790b1db2ff7a)

DOMのことが知れればWeb開発・RPA・スクレイピング・テスト自動化と色々なことができます。

DOM操作のやりかた～的な良記事は他にたくさんあるため、ここでは入力フォームの操作に焦点を当てて記事を書いていこうと思います。

## テキストボックス
“`html

文字列のURLからドメイン名とか取得するとき

##`https://example.com/piyo/?chu=pero`こういう文字列からドメイン名を取得したいとき

車輪の再発明にならないようにと思ったけどこれでいいのかな？

“`javascript
function getDomainFromUrl(url) {
const dummy = document.createElement(‘a’)
dummy.setAttribute(‘href’, url)

return dummy.protocol + ‘//’ + dummy.hostname
}

const url = ‘https://example.com/?chu=pero’
const domain = getDomainFromUrl(url)

console.log(domain) // https://example.com
“`

##追記

@il9437 さんからコメントでもっといい方法を教えていただきました！

メソッド作る必要なかった

“`javascript
const url = ‘https://

VeeValidate に電話番号のバリデーションルールを追加する

先週投稿した [VeeValidate で非同期的なバリデーションを行う記事](https://qiita.com/hamakou108/items/b47f98e1e0175f695e85)に続いて、今回も [VeeValidate](https://logaretm.github.io/vee-validate/) ネタです。

VeeValidate には電話番号のバリデーションルールはデフォルトで用意されていません。そのため [google\-libphonenumber](https://www.npmjs.com/package/google-libphonenumber) を使ってカスタムルールを実装してみたので、そのメモです。

ちなみに google-libphonenumber は電話番号のパースやバリデーションのための国際対応ライブラリです。非常に便利なので是非使ってみてください！

– [Googleの電話番号を扱うライブラリlibphonenumberを使ってみたのでメモ \- t\-miliya612のブログ](http://t-miliya612.hate

JavaScript/node.jsでsleep

ちょっとしたことだけど、JavaScriptにはsleepがないので。

“`JavaScript
async () => {
// 前の処理
await new Promise(resolve => setTimeout(resolve, 1000));
// 1秒待った後の処理…
}
“`

## JavaScriptに馴染みのないサーバーサイドの方向けに説明
### setTimeout
`setTimeout(コールバック, ミリ秒)`でミリ秒後にコールバックを実行します。JSのタイマー処理の基本。

### Promise
`new Promise()`でPromiseオブジェクトを取得します。Promiseオブジェクトは非同期処理が完了したら結果がもらえるやつです。

“`JavaScript
const 結果のPromise = new Promise(resolve => {
// 任意の処理
resolve(結果);
});
“`
### await
`await Promiseオブジェクト`で結果を取り出せます。`

ウェブサイト作成用備忘録・５号：１カラムＷＥＢデザインの自作サンプルその１【コピペでプレビュー】

日々の学習のアウトプットの為、自主学習の際に工夫した内容を記録していきます。

今回は 自分が作成した１カラムＷＥＢデザインのオリジナルサンプルを紹介します。

（※練習で作成したデザインなので、機能性は乏しいかもしれません…）

###テーマ：javascript の動的制御で１カラムの背景ウインドウに複数の animation プロパティを適用し、複数の役割を与える。

####記述サンプル

今回はHTMLファイルに全ての記述を行うので、コードをそのままコピペするだけで、実際の動作を確認出来るようにしました。

HTML

“`