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

【JavaScript】クラスの追加・削除

`JavaScript`でクラスを追加・削除するにはclassListを使用する。
#クラスの追加
■書き方

“`
[取得した要素].classList.add(‘クラス名’);
“`

#クラスの削除
■書き方

“`
[取得した要素].classList.remove(‘クラス名’);
“`

#クラスの有無で追加or削除
■書き方

“`
[取得した要素].classList.toggle(‘クラス名’);
“`
#サンプルコード

“`html:example.html

“`

“`javascript:example.js

// 要素を取得
var example = document.getElementById(‘example’);

// ‘b’ を追加
example.classList.add(‘b’);
//　結果　

// ‘a’ を削除
example.classList.remove(‘a’)

[OutSystems]Traditional WebでモジュールのJavaScriptが動かないことがある

Traditional Webのモジュールには「JavaScript」プロパティがあります。
ここに定義したJavaScript関数はどの画面でも使用可能になるため、モジュール内で共通利用する関数を定義する場所として利用されています。

Forgeにあるモジュールに、このプロパティで定義したJavaScriptライブラリがエラーになるケースがあったので、原因を調査してみました。

# 環境情報
Personal Environment(Version 11.9.0 (Build 16900))
Service Studio(Version 11.8.7)
jQuery UI Drag and Drop and Sort(Version 2.0.2)

# 発端
Forgeにある、[jQuery UI Drag and Drop and Sort](https://www.outsystems.com/forge/component-versions/467)の動作確認をしていたところ、ドラッグもドロップもできない（UI要素をドラッグ＆ドロップする機能を提供するモジュールです）。

Ch

webpack + Pug ：テンプレート内で環境変数を取得

# 0.前提

– webpack4
– pug-html-loader

# 1.package.jsonのscriptsで環境変数を設定

– npmでcross-envをインストールし、Mac/Winどちらでも動くようにする。

“`js:package.json
“scripts”: {
“build:prd”: “cross-env NODE_ENV=production webpack –mode production”,
“build:stg”: “cross-env NODE_ENV=staging webpack”,
“build:dev”: “cross-env NODE_ENV=develop webpack”
},

““

# 2. pugのテンプレート内で環境変数取得

– pugを置換するときnodeのライブラリが使えるので、nodeのprocessをつかって環境変数を取得。
– 定義したファイルは他のテンプレートで読みこむようにする。

“`js:def.pug

//nodeのprocessを通じて環境変数を取

削除ボタン非同期

### 解決したいこと
非同期で削除ボタンを押せるようにしたいです

### 発生している問題・エラー
“`
削除ボタンを押すと非同期で消えますが、リロードを押すと戻ってしまします。
出ているエラーメッセージを入力
“`
または、問題・エラーが起きている画像をここにドラッグアンドドロップ。
https://i.gyazo.com/4766d0b4c627e834ebe5db0ce6df7e51.png
動画　

## 該当するソースコード
“`言語名←入力するとソースコードにシンタックスハイライトが付きます
ソースコードを入力
“`shopping.self-021b89f4c047630c99e17566cb93208d49fd6acb78ad1d1e3da49f4936dbbd44.js?body=1:60 Uncaught TypeError: Failed to construct ‘FormData’: parameter 1 is not of type

シンプルGatsbyサイトにガンガン機能を追加する（前編）

# 前に作ったGatsbyブログをアップグレードしよう！
[gatsby入門 ブログ作ってサーバーにアップしてみる](https://qiita.com/3S_Laboo/items/7c3ecb0f409fb143f367)で作ったサイトをアップグレードします。
結論から言うとプラグインを入れたり、graphqlを工夫したりすれば割と早く機能追加は可能でした。

# 前回は。。。
前回作成してアップしたサイトはこんな感じのシンプルなブログでした。

# そして今回
今回作成したのがこれです。
![2020-09-13_03h15_25.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567235/a99433f5-3a50-2f1f-

【JavaScript】Promise実践パターン

## はじめに
`JavaScript`・`TypeScript`にちゃんと触るようになって約半年。その過程で扱った非同期処理のパターンをまとめていきたいと思います。
中級者向けの内容だと思いますので~~偉そうなこと言ってお前は中級者なのか~~、基礎から固めたいという方は手前味噌ですが[こちら](https://qiita.com/al_tarte/items/4af009c9b21c13d5a368)をどうぞ。

## こんな人向け
– `Promise`・`await`辺りの仕組みがなんとなく分かってきた
– 非同期処理のネストが深くなってしまっている
– `firestore`や`axios`を使い始めた・使いたい

## 本編
### 1. 非同期in非同期

これはホントよく出会うパターン。非同期処理の結果を別の非同期関数に渡してその結果を・・・(ry
非同期が入れ子になっていってネスト地獄になってしまいます。

“`微妙.js
// 非同期関数1
const p1 = async() => {
return 1;
};

// 非同期関数2
const p2 = as

【JavaScript】Qiita APIをGASで叩いてくるbotをSlackに導入してみた

APIの学習がきっかけではあったのだけど、
せっかくだからSlackのbot導入についても合わせ技で一緒に学んでしまおうという目的で。
いつものように備忘録。今回は新米の自分には非常に学びが多かった気がします。

というわけで、今回の実装でやりたい事は
・Qiitaの記事一覧をくれるAPIを叩きにいきます
・Slackからコマンドでbotを呼び出し、欲しい記事のジャンルを選択
・記事のURLを返してくれる感じのを想定します

## 前提
・Qiitaアカウントを持っている（一応）
・Googleアカウントも持っている（なければ作って）
・導入したいSlackワークスペースの管理者権限がある

## ざっくり手順
1. Slackbotを作成
2. Qiitaでアクセストークンを取得
3. GASでslashコマンド受け取り用のwebアプリケーション1を作成
4. GASで選択肢ボタン受け取り用のwebアプリケーション2を作成
5. slackとアプリケーションを連携

こんな感じになりますが、各工程も躓いたところをピックアップし、他あっさり行きます。
詳しく知りたい方は参考にした記事を

reduceでasyncする方法はこれ！

reduceのなかでasyncをしたい時の書き方がわかんなくて時間くっちゃったのでメモ。

# 答えはこれだ！！
“`typescript
const itemCodeList = [
‘000000001’,
‘000000002’,
‘000000003’,
];

const itemList = await itemCodeList.reduce(
async (accum: Promise, itemCode) => {
const prev = await accum;

// APIとかから情報引っ張ってくるの待つ
const item = await getItemFromCode(itemCode);

item && prev.push(item);

return Promise.resolve(prev);
}, Promise.resolve([]));
“`

答えが分かっちゃえば、あーなるほどねってなられる方多いかと。

## 軽い解説

解説というほどでもないんですけど、ミソ

見ているページのURLとタイトルをすぐにPukiWikiスタイルの書式に変換するブックマークレットを作った。

表題どおり。pukiwikiのために毎回URLやタイトルをコピペしてコリコリするっていうのがおっくうになったのでブックマークレットを作りました。

![e128219b8e2f9242ba053cb240f32f89[1].png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/712840/75c9ae59-ac7a-8442-624b-0bf002ddb07a.png)

URLをすぐHTMLリンク形式にする～みたいなやつをサクッと改造したやつです。

“`
javascript: (function () { var ele = document.createElement(‘textarea’); ele.style.width = ‘100%’; ele.value = ‘[[‘ + document.title +’>’+ location.href + ‘]]’; document.body.insertBefore(ele, document.body.firstChild); ele.focu

初めてのchrome拡張機能開発の記録

先日、chrome拡張機能『[YouTube Pin Button](https://chrome.google.com/webstore/detail/youtube-pin-button/jiniehblanaeejjdbdnlhhihikoocfmj)』をリリースしました。

JavaScript＆chrome拡張機能初心者だった私が、開発時に得た学びを雑多に書き記していこうと思います。

私と同じような初心者の方の役に立てれば幸いです。

初心者でない方は、間違いがあればコメントで指摘して頂けるとうれしいです。

※以下の本文では、私が作った拡張機能のソースコードを引用している所があります。全てを載せると長くなる部分は省いていますが、詳細を見たい方は[Chrome extension source viewer](https://chrome.google.com/webstore/detail/chrome-extension-source-v/jifpbeccnghkjeaalbbjmodiffmgedin)などのツールを使うか、拡張機能をインストールしてローカルストレージ

RailsでJavaScript（バニラ）が反応しない。

rails5では初期からjQueryのgemが導入されており、削除しない限りはデフォルトで利用できる状態です。
Railsを学び始めて、いつの間にか素のJavaScript（以降”バニラ”）よりもjQueryを使う方が慣れてしまっていたので、今回は改めてバニラを学習するためあえてjQueryを使わない方法を模索しました。

## 環境
Ruby 2.5.7
Rails 5.2.4

## 経緯
改めてバニラでコードを書き始めると割とハマるところが多くありました。
jQueryで書けるならそれでいいと言われればそれまでなのですが、そのままにしておくのは気持ち悪かったので少し向き合うことにしました。

### 即時関数が効かない
手始めにクリックイベントでコンソールログを確認しようとしました。
jQueryでは下記のように`$(function() {処理});`
という書き方をする必要があります。（理由は後述します。）

“`javascript:application.js
// jQuery
$(function() {
$(“セレクタ名”).on(‘クリック’, functi

【React】任意の場所まで自動スクロールさせる方法

# はじめに

任意の場所まで自動スクロールするには、標準の`WebAPI`で提供されている`Element.scrollIntoView()`が便利です。
チャットアプリで送受信に合わせて最新のメッセージまでスクロールしたい時などに使えます。

DOMの`Element`はReactであれば`React.useRef()`で取得することができます。

# 実装の例

任意の場所にスクロールしたい場合、**あらかじめその場所に`透明な

`を仕込んでおく**と便利です。

– `透明な

`を長いリストの最後に仕込んでおく
– `React.useRef()`で`透明な

`の参照を取得
– `透明な

の参照に対して`Element.scrollIntoView()`を使用する

“`jsx:関数コンポーネント
const messageEndRef = React.useRef();

const scrollToLatest = (behavior = ‘smooth’) => messageEndRef.current.scrollIntoVi

Geolocation APIで現在位置を取得する

## はじめに
Geolocation APIを使って現在位置を取得する方法の簡単なまとめです。

## 概要
– Geolocation APIの概要
– 実際に現在位置を取得する

## Geolocation API
Geolocation APIとは、ユーザの位置情報を取得するためのAPIです。
GPS、IPアドレス、無線LAN、WiFiなどから位置情報を取得することができます。
位置情報を取得するためには、ユーザの許可が必要です。

## Geolocation APIのオブジェクト
Geolocation APIのGeolocationオブジェクトはデバイスの位置を取得する機能を提供します
Geolocationオブジェクトを取得するには、Navigatorオブジェクトのgeolocationプロパティを使用しま

【Vue.js】怖がらないで、引数分割束縛（argument destructuring）

関数({ $axios })とか初見だと、ビビる引数の書き方でてきますよね

その名も`引数分割束縛`。なんか、恐い言葉です。

これの目的は、何回も記されるコードを`因数分解`して、省略しちゃおうというのが目的です。

##asyncData

contextを省略するパターン

“`javascript:
async asyncData(context) {
const posts = await context.$axios.$get(‘/posts’)
return { posts }
},
“`

↓

“`javascript:
async asyncData({ $axios }) {
const posts = await $axios.$get(‘/posts’)
return { posts }
},
“`

contenxtとresを省略するパターン

“`javascript:
async asyncData (context) {
const res = await axios.get(‘/posts/’ + context.p

自分のQiita記事をインクリメンタル検索するAlfred Workflowを作ってみた

消防士時代からQiita投稿を続け、累計投稿数は140記事を超えました。
投稿記事が増えると「あれ？これ前Qiitaに書いた気がするけどなんだっけな..？」となっても、自分の過去投稿を探すのが一苦労です。
そんな手間を解消するため、Qiita APIとAlfredを使って自分のQiita記事をインクリメント検索するAflred Workflowを作ってみました。

結構便利なので、Qiitaヘビーユーザーの方々に使ってもらえると嬉しいです。

# alfred-my-qiita

こちらのGIF画像のように、自分の投稿記事をインクリメンタル検索できます。
初回はAPIリクエストが走るので少し時間がかかりますが、その後はキャッシュが効くのである程度高速に動作します。

https://github.com/kawamataryo/alfred-my-qiita-post

![ezgif.com-gif-maker (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114396/ebc8df07-21

packsファイルの.jsに記載したのに反応しない

【概要】
—————————————-
1.結論

2.どのように使うか

3.なぜjsファイルに書き込まなかったのか

4.ここから学んだこと

1.結論
—————————————-
直にhtml.erbファイルで”script”を記述しscript内にjavascript言語を記載する！

2.どのように使うか
—————————————-
任意のhtml.erb内で

“`ruby:****.html.erb

“`
と記載してJavascriptを記載するだけです！
注意点としてapplication.html.erbで
<%=yiled%>を使用してヘッダーフッダーを適用している場合は反映させる順番に注意です。
HTMLが読み込まれるよりも前にJavascriptを適用させてしまうとブ

react-bootstrap-table2ならDOM要素１つでテーブルを書ける

Reactでテーブルを書くためのパッケージ、react-bootstrap-table2を使ってみたので備忘録です。
**react-bootstrap-table2**　https://github.com/react-bootstrap-table/react-bootstrap-table2

# テーブルの作成
まずはただデータを表示するだけのテーブルを作成します。

データとカラム定義はそれぞれ配列として用意し、react-bootstrap-table2のpropsに渡すだけです。
このパッケージはその名の通りbootstrapを使用しています。あらかじめbootstrapを導入しておきます。

“`App.jsx
import React from ‘react’;
import BootstrapTable from “r

レンダリングと描画の違いを整理する

ブログ:
https://in-thepink.com/rendering/

# はじめに

レンダリングと描画を同じ意味で使っていませんか？
会話などカジュアルな場合には気にする必要はありませんが、厳密には違うので整理して理解しましょう！！

# DOMの種類

DOMはリアルDOMと仮想DOMがあります。
また、そもそもDOMとはHTMLを操作するためのAPIです。
[DOMの紹介](https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model/Introduction)

– リアルDOM
– 実際に表示されているDOM
– 変更すると画面がそのまま変わる
– 変更しようとする場合、負荷が大きい処理になる
– VDOM
– 単なるデータ
– 変更しても画面が変更されない
– 負荷が小さい処理で変更できる

# レンダリングとは

state(props)変更前のVDOMと変更後の差分を比較し、差分を検知することでVDOMを再構築すること

## レンダリ

テスト02

テスト02です

Node.jsのバージョンあげたら「Node Sass could not find a binding for your current environment」とでた場合

# 概要
Node.jsのメジャーバージョンをあげると、node-sassがエラーをはくことがある

**「Node Sass could not find a binding for your current environment」**

そのときは、node-sassをリビルドして自分のnode環境に合った状態にする

## 対処法

“`
npm rebuild node-sass
“`

これでOK

## そのほか対処法

それでもだめなら

“`
npm rebuild node-sass –force
“`

それでもだめなら、いったんnode-sass消してから。いれなおす。
（入れ直しでも、環境にあった適切なbinaryが生成される）

“`
npm uninstall node-saas
npm install node-sass –save-dev
“`