[JS] forEach

##この記事について
JavaScriptの配列forEachについて備忘。

##forEach
配列に格納された値1つ１つに対して操作を行いたい時に使用する繰り返し構文

###forEachの引数にコールバック関数を渡した際に、コールバック関数の引数に格納されるもの
※コールバック関数…他の関数に引数として渡される関数

第1引数　配列の値
第2引数　配列のインデックス
第3引数　配列そのもの

“`javascript
const array = [1,2,3,4,5];

array.forEach(function(value,index,array){
console.log(value); //1,2,3,4,5が表示される
});
“`

##おまけ
配列から新しい配列を作る

###mapを使う

“`javascript
const array = [1,2,3,4,5];

const newArray = array.map(function(value,index,array){
return value; //newArrayに[1

Kinesis Video StreamのsignalingChannels を使って iOSからWebRTCする

一応オフィシャルでサンプルがあるけど、
https://github.com/awslabs/amazon-kinesis-video-streams-webrtc-sdk-ios
そこそこ作り込んでるサンプルで、試しずらかったので簡易なサンプルを作る。

# 作るもの
iOS(Master 1) -> kinesis-video-streams signalingChannels -> ブラウザ(Viewer 多 audience/publisher)

## 成果物

### iOS


### web

よっしゃできた
Amazon Kinesis Video Streams の webrtc使っての

map関数をわかりやすく分解してみた

個人的にJavaScriptのmap関数が{}と()がグチャグチャで分かりにくかったので分解してわかりやすくしたメモ。

#従来の書き方(for文)
“`javascript:list.js
const animalList = [“dog”, “cat”, “monkey”];
“`
こういった配列から要素を取り出したいとき、従来の書き方だとfor文で書いていました。

“`javascript:for.js
for(let i = 0; i < animalList.length;i++){ console.log(animalList[i]); } //出力結果　dog cat monkey ``` 配列の要素数を取得してインデックスを0から要素分繰り返しです。 #map関数 map関数を使うとfor文よりシンプルに書けるのですが個人的に順を追って理解していかないと複雑に思えたので分解してみました。 ###map関数を分解 まず基本の形「配列.map()」から。 ```javascript:map.js const animalList = ["dog", "ca

safariだけimgのonloadイベントが走らないパターン

# 背景
画像と、その他のコンテンツが動的に切り替わっていく画面で、画像が見えてから他のコンテンツを表示させたいという要件があり、対象の画像のimageのonloadで他のコンテンツを表示、またタグごと取り換えると遅いということで、imageタグ内のsrc属性を書き換えていくような実装をしていました。
その際2連続で同じ画像を出した時にiphoneユーザーだけうまく動かず、その調査の備忘録です。

# 実験
こんなスクリプトをブラウザのコンソールに読ませます。これはページのimgタグの最初の1つに、onload時にコンソールにメッセージが出るイベントが付与されます。

“`
const img = document.getElementsByTagName(“img”)[0]

img.addEventListener(‘load’, function() {
console.log(‘load!’)
}, false);
“`

これを適当なimgタグのあるサイトで流したあと、さらにこのスクリプトを2回流します。imgに適当な画像のurlを埋め込んでいます。

“`
//

【Vue.js】【Nuxt.js】ハマったにも関わらず気づくと一瞬で直せた凡ミスまとめ

`Vue.js`を開発で使うことがありますが、
予期せぬエラーで数時間溶かすことがあります。

ハマって数時間を溶かしてしまったにも関わらず、気づくとすぐ直った凡ミスについて紹介します。
同じ犠牲者を出さないためにも。
居ないかもしれませんが。

## TypeError: ~~~~ is not a function

メソッドはちゃんと定義しているのに、無いと怒られます。
例えばこんな感じに書いていました。

“`vuejs:sample1.vue

“`

`sampleFunc`はしっかり定義しているのに何故か定義されてない、と怒られます。

慣れている方ならすぐ分かりますね。

**メソッドを定義は`method`ではなく`metho

【個人開発】ネットで調べ物するたびに、タイトルとアドレスをメモれるツールを作って10年以上使っている話

たいした技術力はないのですが、個人開発の簡単なサンプルとして紹介したいと思います。

## Webコピ太郎とは

[Webコピ太郎](https://www.catch.jp/program/copy-taro/)は、いま見ているWebページのタイトルとアドレスを取り出すだけのツールです。

1. メモっておきたいWebページを見ているとき、このツールを呼びだす
2. ページのタイトルとアドレスを取り出して、テキストボックスに表示
3. クリップボードにコピー


## なぜ、こんなツールを作ったのか

ネットで調べ物をする度に、役立ちそうなページのアドレスとタイトルをコピペして、テキストファイルにメモするなんてありませんか？

たくさんの参考ページをメモろうとすると、何度もタイトルとアドレスをコピーするのでたいへん面倒くさい。

でも、メ

GSAP ScrollTrigger.jsを使ってみる

##参考記事
>・[【2021年最新】GSAPの「ScrollTrigger」を使って爆速でスクロールアニメを実装する](https://www.to-r.net/media/scrolltrigger/)
・[ScrillTrigger.jsの実装例 | Green Sock公式](https://greensock.com/st-demos/)
・[指定できるCSS | Green Sock公式](https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin)

##やりたいこと
>トリガー(`.js-trigger`)の要素が指定の位置に来たら、その親要素(`.js-main`)の背景色と文字色を変化させ、`.js-trigger`を過ぎたら元に戻したい

>“`html:index.html

“`

>こんな感じ

Puppeteer でスクレイピングを行う方法

### 前提条件

* Yarn がインストールされている

### 作成手順

1. 作業用ディレクトリを作成
1. コマンドライン上で作業用ディレクトリに移動
1. `yarn init -y` を実行して package.json を生成
1. `yarn add puppeteer` を実行。スクレイピングは Puppeteer で行う
1. 次のような内容の index.js を作成。`node index.js` を実行すると「Example Domain」が出力される。これは `

` 要素のテキストである

“`javascript
const puppeteer = require(“puppeteer”);

(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(“https://example.com”);
await page.waitForSelector(“h1”);

QR Codeをライブラリレスで

[参考サイト](https://sites.google.com/a/osshc.co.cc/web/studies/it/qr)の情報をもとに作ってみました。

See the Pen
QR Code Data Structure by kob58im (@kob5

jsでバーコードリーダー

ブラウザで動作するバーコードリーダーを実装した際の覚書

##### 使用したライブラリ
[ZXing for JS](https://github.com/zxing-js)
細かいことはドキュメントとか読んでね。

– とりあえずインストールして

“`zsh
# npm　　install
npm i @zxing/library
npm i @zxing/browser
“`

– 表示用のhtml用意して

“`html




“`

– リーダーを起動する

“`javascript
import { BrowserMultiFormatOneDReader, BrowserQRCodeReader } from ‘@zxin

Firebase Database NoSDK

# エンドポイントの設定
“`javascript
base=’https://osaka5-default-rtdb.asia-southeast1.firebasedatabase.app’
“`

Realtime Databaseを開き、赤枠内を`base`変数に設定
[Firebaseプロジェクト作成(80秒)](https://www.youtube.com/watch?v=b6gdL_tTZeo) Firebaseは無料で利用できます。クレカは登録してはいけません

# データを追加
## curl
“`bash
curl $base/users.json -d ‘{“名

Intersection Observerを使ってみる

##Intersection Observerとは
>【参考記事↓】
・[使ってみよう！Intersection Observer！](https://qiita.com/ryo_hisano/items/42f5980720bc832e6e09)
・[JSでのスクロール連動エフェクトにはIntersection Observerが便利](https://ics.media/entry/190902/)

##実装の流れ
>①監視したい要素を取得
②オプションの設定
③トリガーが交差したときの処理（今回はシンプルにクラスの付け外し）
④Intersection Observerを呼び出し
⑤IE11への対応

##サンプル

>“`js:main.js
//監視したい要素を取得
const scrollTrigger = document.querySelectorAll(“.js-trigger”);
const targetArray = Array.prototype.slice.call(scrollTrigger);
//オプション設定
const scrollOption

【Handsontable】セル内に日時入力(DateTimePicker)の表示

# はじめに
前回、weareoutman氏が作成した「[ClockPicker](https://weareoutman.github.io/clockpicker/)」を使用して、セル内に時刻入力(ClockPicker)の表示を実現しました。

https://qiita.com/yaju/items/25ea509c153af41e64e5

それならと日付と時刻の両方を満たす DateTimePicker に挑戦してみました。
今回は、バニラJavaScriptで作成されている DatetimePickerの「[flatpickr](https://flatpickr.js.org/)」で実現したいと思います。

https://qiita.com/yaju/items/2ec8195df692cc6bf032

# 環境
HandsontableはMITライセンス版のバージョン 6.2.2を使用しています。
一応、有償版バージョン 8.3.2でも動作は確認しています。

# CDN
“`html 用語集

refactoring
リファクタリング とは、コンピュータプログラミングにおいて、プログラムの外部から見た動作を変えずにソースコードの内部構造を整理することである。

validation
データのバリデーションといった場合、記述・入力されたデータが、あらかじめ規定された条件や仕様、形式などに適合しているかどうかを検証・確認することを表す。形式的な妥当性の検証であり、意味論的に適切な内容かどうかは判断しない。

アコーディオンの中にスムーススクロールのアンカーリンクを入れた時のIE11対応

業務上、なんやかんやとまだ使っているjQuery、そしてそれを利用したスムーススクロール。
基本的にjQueryを使ったスムーススクロールだと、以下のような記述をしていると思います。

“`javascript
$(function(){
$(‘a[href^=”#”]’).on(‘click’, function(){
var href= $(this).attr(‘href’);
var target = $(href == ‘#’ || href == ” ? ‘html’ : href);
var position = target.offset().top;
$(‘html, body’).animate({scrollTop:position}, 500, ‘swing’);
return false;
});
});
“`

大体はこれで動きますし、`offset()`も普通に値が取得できると思います。
今回は

* jsでアコーディオン化した要素の中にアンカーリンクとアンカーリンク先がある
* アンカーリンクをクリッ

【初学者向け】JavaScriptの分割代入について

今回は分割代入について解説していきます。

##分割代入とは？

分割代入とは配列やオブジェクトから値を取り出して、変数に代入してくれるJavaScriptの機能です。

☆**通常の代入では一つの変数に対して一つの値を代入していくのに対して、
分割代入は複数の変数に、配列やオブジェクトの値を一気に流しこむイメージです。**

##使い方(①配列の場合 / ②オブジェクトの場合)
①配列の場合
☆**point**: 左辺の変数は **[ ]** で囲うこと

“`javascript
const arry = [10, 20, 30];
//分割代入で一気に代入
const [a, b, c] = arry;

//確認
console.log(a); // 10
console.log(b); // 20
console.log(c); // 30

//一つずつ代入するとしたら…3回代入しなくてはいけない
const a = arry[0];
const b = arry[1];
const c = arry[2];
“`

②オブジェクトの場合
☆**point*

Editorjsにメンション機能を実装する

# 前提
制約がないのであれば、ライブラリを使用する方が効率がいい。どうしても自作する必要がある人やメンションの実装をしてみたい人に向けた共有記事です。

[vue-mention](https://github.com/Akryum/vue-mention)

# 環境
Editorjs v2.22.2
Vue 2.6.14
Vuetify 2.5.8

#コンセプト
MessangerやSlackのように「＠」の入力に対してメニューを表示し、選択したユーザーをメンションする。

#設計
1. Editorjsのreadyを使いDom生成を検知、Editorjsのsaveを使い編集を検知
2. Editorjsの一番外枠にMutationObserverをつけて、ブロックの変更を検知する。
3. 動的に追加されるDomでメンション可能なものにさらにMutationObserverをつけて監視
4. 行頭やスペース後の＠に対してメニューを表示
5. 表示メニューの選択に応じてアンカータグ（メンション）追加

#　実装物
![mention_gif.gif](https://qiita

【kintone】サブテーブルの行を自動追加・削除する

## やりたいこと
数値フィールドに入力された値を元にサブテーブルの行を追加したり削除したりしたい

## フィールドとフィールドコード
| タイプ | フィールド名 | フィールドコード |
|:-:|:-:|:-:|
| 数値 | テーブルの行数 | rowCount |
| テーブル | テーブル | table |
| 文字列（1行） | 文字列（1行） | string |


## コード
“`javascript:sample.js
(function() {
“use strict”;
// rowCountフィールドが変更されたときに動かす
const events = [“app.record.create.change.rowCount”,

SORACOM RS-LTECO2 で計測したCO2値を kintone で確認する


## 概要
ちょっと前に SORACOM RS-LTECO2 を購入して、以下を参考に自宅の仕事場のCO2濃度や室温などのデータを SORACOM Lagoon で可視化までやっていました。

**SORACOM レシピ：IoTで、CO2と温湿度を計測し換気促進**
https://soracom.jp/recipes_index/9972/
とはいえ、確認のため SORACOM Lagoon をいちいち起動するのは手間で、普段使いしている kintone で CO2濃度や室温などのデータを確認できるように可視

Flutter経験者がReactで温泉ランキングを作ったその１（API取得まで)

#React歴
もともとwebの知識（html/css,javascript)とFlutterでのアプリ開発経験があるので、行けるのではないかと思い挑戦しました。
つまり、Reactは初です。

#必要な知識
html/cssとFlutterが理解できれば大丈夫です。

#完成図
検索フォーム（今回は昨日少なめな検索フォームです）があり、下に内容がでるという感じです。

#参考にした動画
こちらの動画を参考にさせていただきました。

#環境構築
こちらを参考にしました。
https://qiita.com/rspmharada7645/items/25c496aee87973bcc7a5
すごく