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

最短距離：ブラウザにプッシュ通知を送信　（仕組みと実装）

本記事では、ブラウザへのプッシュ通知を最短距離で実装する。


# 本記事で使う言語・サービス・ライブラリ
– Google Chrome
（Firefoxでは、うまくいったりうまくいかなかったりしたのでChromeをおすすめします。）
– HTML / Javascript（フロントエンド）
– npm
– webserver ([http-server](https://www.npmjs.com/package/http-server))
(Push通知設定は、`file://`からできない)
– [Web-Push](https://www.npmjs.com/package/web-push) (プッシュ通知送信用)

# プッシュ通知の仕組み

## 基本的

一時的な障害に強いシステム（アプリケーション）を構築する

## 以下の記事を参照して頂ければと思います

https://note.com/shift_tech/n/n236a7e03c033

**※Qiitaの記事は全て個人的な記載であり、所属する組織団体とは無関係です。**

## 補足
ソースコード全体は以下。

https://github.com/yuta-katayama-23/intro-vuecli/commit/a4f87435f7c34bae23cfa4f9ecfa450a94af371f

SlackのBot通知を任意の条件の日で実装させてみる Part.3 Slackとの連携

# はじめに
今回の記事は一気に書き切ります、中の人です。

これまでの記事では、通知日時判定ロジックを実装、Google DriveにGoogle Apps ScriptとしてアップロードすることでWeb環境上での動作を実現させてきました。
この記事でいよいよ本題となるSlack連携を実現させます。
これまでが長かった…忘れないように書き残したかった部分をようやっと書き始めますよって。
よかったら参考にしてくださいませ。

ちなみに今回までの全3回のシリーズものです。
それぞれ、こんな内容でやっていきます。

Part.1：[JavaScriptでの通知日時設定の実装](https://qiita.com/icchy_sh33p/items/068d450735029d95adc4)
Part.2：[実装通知判定関数のGoogle Apps Scriptへのアップロード](https://qiita.com/icchy_sh33p/items/43c28fe25b7842ed260f)
Part.3：[Slackとの連携](https://qiita.com/icchy_sh33p/

SlackのBot通知を任意の条件の日で実装させてみる Part.2 Google Apps Scriptへの関数アップロード

# はじめに
今日は連日投稿します、中の人です。
前回からシリーズものとして書いているいろいろいじってみたときのお話の第2弾になります。
前回、記事に落とし込む〜なんてたいそうな口を叩いていましたが、今回からはどちらかというと自分用への備忘としてのメモ要素が一気に爆上がりします。
でも、ここからは使用ツールの癖もあったりするからこんなくらいの書きっぷりが参考になると嬉しいな。

全3回のシリーズものです。
それぞれ、こんな内容でやっていきます。
– Part.1：[JavaScriptでの通知日時設定の実装](https://qiita.com/icchy_sh33p/items/068d450735029d95adc4/)
– Part.2：[実装通知判定関数のGoogle Apps Scriptへのアップロード](https://qiita.com/icchy_sh33p/items/43c28fe25b7842ed260f/)　←このページです
– Part.3：[Slackとの連携](https://qiita.com/icchy_sh33p/items/2d267a1fa68

SlackのBot通知を任意の条件の日で実装させてみる Part.1 JavaScriptでの通知日時設定の実装

# はじめに
お久しぶりです。中の人です（なんて名前でやっていたのかも覚えていない…）

ありがたいことに、SEとしてたくさんの業務をこなしてきましたが、今回久しぶりに業務そのものではなく、日頃気になっていた人力での作業（作業といえるものでもないかもしれない）をなんとか自動化させたいと思い、久しぶりにちょっとひとりでいじってみました。
結構、似たような境遇の人はいるんじゃないかと勝手に思ったので、記事に落とし込むところも久しぶりにやってみました。せっかくなので、やってみたくなったら試してみてね。

では、早速書き進めていきます。
ちなみに今回は全3回のシリーズものです。
それぞれ、こんな内容でやっていきます。
– Part.1：[JavaScriptでの通知日時設定の実装](https://qiita.com/icchy_sh33p/items/068d450735029d95adc4/)　←このページです
– Part.2：[実装通知判定関数のGoogle Apps Scriptへのアップロード](https://qiita.com/icchy_sh33p/items/43c28fe

JavaScript_よく使われるイベント（onclick,onchange,onmouseover,onmouseout,onkeydown,onload）

onclick:マウスがクリックされたとき
onchange:入力に合わせて動的に表示内容を変えたい場合
onmouseover:マウスのポインタ（カーソル）を要素の上に合わせた時のイベント。
onmouseout:当該要素内に入っていたカーソルが外れたとき
onkeydown:キーを押したとき
onload:ページを読み込みとき

例：
“`


```

HTML5 からはこの書き方で OK
```

```

外部ファイルを読み込むには、src 属性をつける
```

```

Vue Selectを導入して、いろいろカスタマイズしてみる

## はじめに
業務でVue Selectを利用する機会があったので、諸々のカスタマイズについての備忘録。
とても便利なライブラリだが、細かな情報を探すのに苦労したのでここに残しておく。

（間違いなどあれば、コメントにてご指摘いただければ幸いです。）

## Vue Selectとは
Vue.jsで利用可能なセレクトボックスコンポーネント。
[公式サイト](https://vue-select.org/) 曰く
> Everything you wish the HTML element could do, wrapped up into a lightweight, extensible Vue component.
> (HTMLの要素にできることをすべて、軽量で拡張性の高いVueコンポーネントにまとめました。)

この記載通りで、とても手軽にセレクトボックスを実装できる。
さらに、選択肢に対する前方一致の絞り込みなどの機能も利用可能な優秀なライブラリ。

## 筆者環境
Vue.js: 2.6
Vue Select: 3.1
(Larave

Firebase(v9) から取得したIDトークンをサーバサイド(Node.js)で検証する

# 概要
Express等で簡単に作ったAPIとの通信をセキュアにするため、Firebase Authenticationの```getIdToken()```メソッドを使おうと思ったら、v8でのnamespacedな書き方しか見つからなかったのv9でのmodularな記述方法を探した。

実はv8っぽい書き方が動かないというのがそもそも勘違いだったのだが、v9っぽくモジュール化されたメソッドでも同様のことができるので、雑にだが備忘として残しておく。

## 出来上がり
最初に結論をば
web v9っぽいidTokenの所得方法はこう
```v9.js
import { getAuth, getIdToken } from "firebase/auth";

const auth = getAuth()
const user = auth.currentUser
const idToken = await getIdToken(user, true)

```
ちなみに、公式ドキュメントにはこう書いてある
v9っぽい書き方ではないが、v9を使っていてもちょっと手直しすれば普通に動

元記事を表示

JavaScriptのreduce()を使って配列の最大・最小値を取得するって話

今回は、JavaScriptで使えるArray.reduce()を使って、配列内の値から最大値・最小値を取得するプログラムを作ってみます！
数値など単純な配列だけではなく、連想配列(オブジェクト)の配列からも求めることが出来るので超便利です?

?複数の値は取得できないの注意してください
?配列が空の場合、reduce()はエラーになるので注意してください

## 数値の配列から求める

```
// 対象の配列
const values = [5, 3, 8, 6, 7, 2];

// 最小値を取得
const minValue = values.reduce((a, b) => {
return Math.min(a, b);
});

// 出力：２
console.log(minValue);
```

## 連想配列(オブジェクト)の配列から求める

```
// 商品データ
const products = [
{ name: 'ハンバーガー', price: 300 },
{ name: 'ラーメン', price: 800 },
{ name: 'うど

元記事を表示