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

JavascriptでSlackbotにリアクションをさせよう

本記事はJavaScriptでSlackbotにリアクションさせる方法を紹介するものです。

Pythonでリアクションをさせる方法については「[Slackbotにリアクションをさせる〜PythonでのBot開発〜](https://miyabikno-jobs.com/slackbot-react/)」をお読みください。

## Slackの絵文字リアクション機能について
Slackの機能で自分や他の人に投稿したコメントに対してマークをつけることができます。
リアクションのマークをつけることで相手に同意や反対の意思を示すことが可能です。

下記のように一つのコメントに対して複数のリアクションをすることも可能です。
![昼はカレーかラーメンか](https://miyabi-knock.com/tools/wp-content/uploads/2018/12/bot_reaction2

フロントエンド目線でのObserverパターン

デザインパターンの一つであるObserverパターンについて学習したので、フロントエンド目線での所感をまとめてみます。

## Observerパターンとは

観察する側（Observer）、観察される側（Subject）に処理を分割し、Subjectの状態が変化した際にObserverに通知し、通知毎に定義した処理を実行するパターンです。フロントエンド界隈においては、JavaScriptのaddEventListenerとdispatchEvent、jQueryのonとtriggerをイメージするとわかりやすいかもしれません。

## どういった時に使うと良さそうか

Observerパターンを使うことによってObserverとSubject間の処理が疎結合になります。
Subjectは状態によってObserverに通知することが主な目的となり、Observerがどのような処理をしているのか関心がありません。
またObserverはSubjectが通知した際に必要な処理を実行することが主な目的となり、Subjectの状態がいつどのように変化するのか関心がありません。お互いの関心が薄く

【Elixir/Phoenixプロダクトへリプレイス②】フロント部分：JavaScriptをTypeScriptにリプレイスする例

# 概要
こちらの　[「Elixir/PhoenixでTypeScriptを使えるようにする。」](https://qiita.com/akkiii/items/435e3b399e425176bff2)を実装したPhoenixプロダクトのJavaScript部分をTypeScriptにリプレイスする手順を残しておく。

# 手順
リプレイス前のjsファイルを`filename.js`とする。

## 1. filename.jsを`assets/js`配下に配置
JSファイルをコピーしてペースト

## 2. ファイル名filename.jsを`filename.ts`に変更

## 3. html部分を書き換える

`filename.html.eex`

“`diff
–JS呼び出す< +TS呼び出す
“`

## 4.`filename.ts`をTy

Node.jsのmodule.exportsの仕組みを理解する

# はじめに

こちらは、[エンジニアの新たな学びキャンペーン](https://qiita.com/official-events/716dbcb617afc83e9555)に向けた記事となります。

[Node.js + Express で作る Webアプリケーション 実践講座](https://www.udemy.com/course/web-application-with-nodejs-express/)を参考にしながら、
`module.exports`について理解を深めたことを記事にします。

# 実行環境

– Node.js v12.16.3
– Express 4.16.1
– 10.4.11-MariaDB

# 本記事の概要

私は今現在、Webアプリケーションの開発をしていますが、ある問題を抱えています。
その問題とは、1つのファイル内のソースコードが膨らみすぎて可読性が落ちているというものです。
これはデータベースへの接続、ミドルウェアの呼び出し、レスポンスの処理内容など、あらゆる情報を`app.js`内に書き込んでいることに由来します。

そこで、`app

[Javascript] 配列の主な操作をまとめてみた

##はじめに
Javascriptの配列の操作方法について調べてみたので備忘録として残す

##配列を操作するメソッド

###※配列を作成
下記の配列をもとに進める

“`
let test = [‘a’, ‘b’]

console.log(test.length)
// 2
“`

###位置を指定して配列にアクセスする
“`
test[0]
// a

test[fruits.length – 1]
// b
“`

###配列に値を追加
“`
test.push(‘c’)
// [‘a’, ‘b’, ‘c’]
“`

###配列に末尾を削除
“`
test.pop()
// [‘a’, ‘b’]
“`

###配列に銭湯に値を追加
“`
test.unshift(‘z’)
// [‘z’, ‘a’, ‘b’]
“`

###要素の添字を取得
“`
test.indexOf(‘a’)
// 1
“`

###要素の添字を取得
“`
test.indexOf(‘a’)
// 1
“`

###配列をコピー
“`
let testCopy = test

MQTTによるIoT制御を無料でやってみる

# 前置き

※途中まで頑張りましたが、断念したため供養記事となります。m..m

## 背景
IoTの制御としてArduino, Raspberry Piなどを用いて各種センサー情報を収集、又はアクチュエータの制御などを想定する。

## MQTTとは

– ネットワークプロトコルの一種
– HTTPと比較すると以下が特徴的
– 一対多, 多対多で情報のやりとりが可能
– リアルタイムでの通信が可能
– ヘッダー情報が少なくHTTPの10分の1と軽量　など

詳細はIBMのサイトに記載されています。
[MQTT の基本知識](https://www.ibm.com/developerworks/jp/iot/library/iot-mqtt-why-good-for-iot/index.html)

基本的に Subscriber(受け手), Publisher(送り手), Broker(中継点)の3者で構成します。
![base.png](https://qiita-image-store.s3.amazonaws.com/0/172077/c0cd5daa-3e2f-ce35-

AppSync & GraphQL 入門


## AppSync とは？

GraphQL というAPI仕様を用いて「柔軟なAPI」を提供するAWSのマネジメントサービス

ちなみに、従来の REST API 形式だと AWSは API Gateway を提供している

## GraphQL とは？

Facebookが開発しているWeb APIのための規格

「クエリ言語」 と 「スキーマ言語」 からなる

REST API は、1URLに対し1つのAPIや情報を提供できるのに対し、

GraphQL は欲しいデータを以下のようなクエリとして発行すると、**欲しいデータを欲しいObject形式で**得ることができます

“`javascript
// リクエスト
query GetCurrentUser {
currentUser {
id
name
}
}

“`

↓

モトローラ形式（S-Record）（.motファイル）のチェックサムを付与するツールつくった【自分用】

モトローラ形式の文字列をぶちこむと、末尾のチェックサムをいい感じにしてくれるツールをつくってみた

See the Pen
MotCheckSumCalculator by kob58im (#UIFlow の BLE UART を使った #M5Stack_Core2 （ #M5Stack ）からブラウザへのデータ送信とグラフ化

これまで、UIFlow の BLE UART を試して以下の記事を書いてきました。

* [#UIFlow の BLE UART を使った文字のやりとりを #M5Stack_Core2 で試してみた（ #M5Stack ） – Qiita](https://qiita.com/youtoy/items/0aeac01927d60c33f421)
* [【JavaScript 2020】 #UIFlow の BLE UART を使ったブラウザから #M5Stack_Core2 （ #M5Stack ）への文字の送信 – Qiita](https://qiita.com/youtoy/items/3da58570972803134f6c)
* [#UIFlow の BLE UART を使った #M5Stack_Core2 （ #M5Stack ）とブラウザとの双方向無線通信 – Qiita](https://qiita.com/youtoy/items/d581d4e756656c68a8b7)

この記事は、上記で試してきた流れと、以下の記事で使ったグラフ化とを組み合わせた内容になります

画像のプレビュー機能

## はじめに
画像投稿時に、画像ファイルの名前だけが表示されるだけで、きちんと出来ている分かりづらいと感じたので、プレビュー機能を実装しました。

**プレビュー機能実装前**

##1.準備
**1. プレビュー機能を実装させるためのjsファイルを作成する。app/javascript/packsにpreview.jsを作成**
→ **app / javascript / packs / preview.js**

**2.preview.jsを読み込めるようapplication.jsを編集する。**

“`ruby:app/javascript/packs/application.js
require(“@rails/ujs”).start()
require(“@rails/activestorage”)

C3jsでリアルタイムグラフ

## 結果

See the Pen
C3js TimeSeries Realtime Graph by Nagitch (

[JavaScript]書き方と基礎文法に関して(変数、四則演算、条件分岐、繰り返し処理)

今回は、JavaScriptの基礎文法について書いていきます！！
JavaScriptの文法はRubyと似ていて少し頭の中がごちゃごちゃします(笑)

なので、記憶が新しい内に整理していきます。
#Javascriptの書き方（2通り）

**scriptタグ**を使います。

その後からは、下記の2種類の方法で出来ます。

①htmlファイル内に書いていく。

“`html:①.html:title





//scriptタグ内に書いていく。


“`

②〇〇.jsファイルに書いていく。　
　＊.js = javascript拡張子ファイルのことです。イメージとしては、cssファイルと同様です。

“`html:②.html:title

手軽にチャットを作成できるサービスをリリースした！

##初めに
今回はweb上で動くチャットアプリ　「スコーチチャット」を作りました。
アカウント登録不要
ダウンロード不要
で使い捨てで使われることを想定してます。

パスワードも設定可能です

URL
https://scorch-chat.herokuapp.com/

##開発環境
rails6
ruby2.7
heroku
postgresql
ActionCable
slim

いつもと同じです。

##開発期間
５日くらいです。
webアプリは当たる確率が6%程で質より量を打ったほうがいいといわれたのでなるべく早く作りました。

##チャット画面
![chat-smart.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480294/0f689b9

【Vue.js】コンポーネントを動的に切り替える時とその注意点【動的コンポーネント】

#前提
__コンポーネントを複数用意した際の切り替え方。__
__その際注意すること。__

* __House__コンポーネント
* __Content__コンポーネント
* 親コンポーネント : __App.vue__

今回は__二つ__子コンポーネントを用意。
ボタンを押すことで二つの__コンポーネントを切り替える__ことができる。

__House__コンポーネント

“`Vue:House.vue

“`

__Content__コンポーネント

“`Vue:Content.vue

“`

__親__コンポーネント

v-calender でCSSが効かない件

#環境
　エディタ：VS-CODE
Vue:@vue/cli 4.5.9 vue”: “2.6.11”,
“v-calendar”: “2.1.6”,
“bootstrap”: “4.5.3”,

###初めての記事なので、わかりにくい場合は申し訳ありません。

カレンダーをVueで利用しようと思い、v-calenderを選択しました。
サンプルとして、GitHubの
https://github.com/nathanreyes/v-calendar/blob/master/docs/.vuepress/components/homepage/custom-calendar.vue
からコードをコピペしてVS-CODEに張り付けたのですが、CSSが適用されず困っていました。
調べたところissueにも回答が見つけられず、自力で調べてみました。
参考issue : https://github.com/nathanreyes/v-calendar/issues/727
まだ、Gitのサンプルと違う？というところはありますが、備忘録的に記載しておきます。

##1.npm

【Next.js】CSR,SSG,SSR,ISRがあやふやな人へざっくり解説する

# 前書き

仕事で`Next.js`を書いているのですが`SSG` `SSR` `ISR`らへんの知識があやふやだったので噛み砕いて解説してみました。間違っているところなどあれば、ご指摘していただけるとありがたいです?‍♂️

以下、本題です。

# それぞれの基本的な解説

## CSR（クライアントサイドレンダリング）

>クライアントサイド レンダリング（CSR）は JavaScriptを使用し、直接ブラウザでページをレンダリングすることを意味します。すべてのロジック、データフェッチ、テンプレーティングやルーティングは、サーバーではなくクライアント上で扱われます。

[引用元](https://developers.google.com/web/updates/2019/02/rendering-on-the-web?hl=ja)

つまりサーバーではなく、（JavaScriptによって）ブラウザ側でレンダリングする方法です。**しかし**`CSR`（クライアントサイドレンダリング）は大きいアプリケーションの場合、クライアントで処理するJavascriptの量も増えますよね。*

switch / if を式として

## はじめに

無職 やめ太郎（本名）氏の記事
[4歳娘「パパ、constしか使わないで？」](https://qiita.com/Yametaro/items/17f5a0434afa9b88c3b1)
のコメント欄にて、`switch` や `if` を式として構成する話が盛り上がっているようだった。
こういう話好き。

ただ、記事の主旨はタイトル通り「変数を `const` のみにするには」と言うのが主眼なようなので、コメントではなく記事にしてみることにした。

汎用的な条件分岐 (conditional branch) は Maybe と Either で構成できるよ、というお話。
若干関数型チックな雰囲気を感じるかもしれないけれど、モナモナ言い出さないので安心してほしい。

## Maybe (ある / なし)

まずは `Maybe` について。
値が「ある」場合と「ない」場合を表現する構造。
他言語だと `Optional` と呼ばれることもしばしば。
ここでは単純に、要素数が 0 または 1 の配列、と言うことにしよう。

~~~ts
type Nothing = [

notistack で複数のポップアップを同時に表示する

# はじめに
[notistack](https://iamhosseindhv.com/notistack/) は [Material UI](https://material-ui.com/) の `Snackbar` コンポーネントをラップしたライブラリでうす。
![Screen Shot 2021-01-20 at 13.38.55.png](https://qiita-image-sto

さて、驚くほど簡単にreCapthca認証でBOT、スパム対策を行おう！！

ログインフォームや会員登録を行うフォームにて、色々対策したいなと思い調べていると、Googleが提供しているreCaptchaというものを使うことで対策が出来るらしい。

誰しもが１回は見たことのある、「私はロボットではありません」てきなやつ。

ただ、画像をクリックしたりあの分かりづらい文字列を入力したり色々と面倒。。。

そこで、GoogleはこれらをやらなくてもユーザーがBotやスパムではないと判断する最新「v3」を今提供している。

イメージとしてはこんな感じ


ページの右下にこのようなマークが表示され常にユーザーが人間らしい動きをしているかを確認している。

流石Googleさん！

今回はこのreCaptchaの簡単な使い方を説明していこうと思います！！

調べてみてわかったことが、割とドキュメントが少なく初めての人にとって分かりやすい記

AR.jsのLocation Basedで遠くにモデルを表示させようとして困った話。

#１．ARで遠くのランドマークをアイコンで表示したい

ARで遠くのランドマークをスマホに表示させたいとの希望がありました。
アクティブなユーザー数は、月100以下を想定していたので、有料のライブラリは無理だなぁってことで、[「AR.js」](https://ar-js-org.github.io/AR.js-Docs/ “AR.js Documentation”)で作成することになりました。

AR.jsは、Marker Tracking、Image Tracking、Location Basedに対応している優れもので、htmlに数行のコードでよしなにARを実装してくれます。

Location Based ARは、GPSの位置情報に基づいて指定の位置にコンテンツを表示させる仕組みです。今回はAR.jsのLocation Based とA-Frameバージョンを使用することにしました。

希望としては、こんな感じです。
実際には、ピンの代わりにランドマークのアイコン等を表示させます。

![bg_pattern2_pin.png](https://qiita-image-store