f@ctor

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

JavaScript関連のことを調べてみた2021年05月17日
目次

【Javascript】Spread Operator（スプレッド構文）を試してみた

# 初めに
配列やオブジェクトで使うと便利なスプレッド構文について学習した内容をまとめてみました。

# スプレッド構文とは
MDNの公式ドキュメントには以下のように解説されています。

>スプレッド構文 (…) を使うと、配列式や文字列などの反復可能オブジェクトを、0 個以上の引数 (関数呼び出しの場合) や要素 (配列リテラルの場合) を期待された場所で展開したり、オブジェクト式を、0 個以上のキーと値のペア (オブジェクトリテラルの場合) を期待された場所で展開したりすることができます。

要するに配列や文字列を必要な場所にspread(展開する）する構文です。

# なぜ使うのか
理由はシンプルで、コードを短く書けるからです。数字の配列numArrがあったとします。
これに1,2,3の数字が入っている配列に、numArrの数字を追加しnewNumArrを作るとします。

“`javascript
const numArr = [4, 5, 6];
const newNumArr = [1, 2, 3, numArr[0], numArr[1], numArr[2]];
/

元記事を表示

SwitchBot温湿度計のデータを Web Bluetooth API で取得する【完結編】

この記事は以下の 2つの記事の続きで、完結編となる内容です。

1. [SwitchBot温湿度計を Web Bluetooth API でスキャンする【試行錯誤中】 – Qiita](https://qiita.com/youtoy/items/e28a10866dd0050251c0)
2. [SwitchBot温湿度計のデータを Web Bluetooth API で取得する：【未完】準備や試行錯誤のメモ – Qiita](https://qiita.com/youtoy/items/6abcc9d704aaebcf5b18)

## これまでの流れ
### やろうとしていること
これまでの記事・この記事でやろうとしていることは、以下の「[SwitchBot温湿度計](https://www.switchbot.jp/meter)」の温湿度のデータを Web Bluetooth API を使って取得する、というものです。
![SwitchBot温湿度計](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508

元記事を表示

素人がGW中に履歴書作成ウェブアプリを作ってみたよ

（職業訓練校でWebデザインとAIを学習したばかりの）素人が、ゴールデンウィークを利用して、履歴書作成ウェブアプリを作ってみました。?
　ウェブアプリといっても、HTML、CSS（SCSS）、JavaScriptのみで構成されていて、ソースをダウンロードしてローカル実行も可能です。

できれば、ソースとか見て意見等を頂きたいです。
勝手ですいません?

## Webサイト
下記ページにアクセスすれば利用できます。

– [提供ページ](https://www.mikuro.works/portfolio/works/resume_editting/)
– [GitHub](https://github.com/bonji-396/resume_editting)

![resume.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490554/78310719-bb29-acb5-1480-63c489bee99c.gif)

## ターゲット
履歴書作成ウェブアプリです。

「日本独自のお馴染み「履歴

元記事を表示

kintone を TypeScriptでカスタマイズしてみる

TypeScriptの自習として、kintoneのカスタマイズのコードをTypeScriptで写経する記事です。

自習教材として、[cybozu developer network](https://developer.cybozu.io/hc/ja) の [cybozu developer コミュニティ](https://developer.cybozu.io/hc/ja/community/topics) に投稿された記事等を参考にさせていただいています。

# 環境

* TypeScript “3.9.9”

# 開発環境

kintone-cliにて環境構築します。
`$ kintone-cli dev –watch –app-name app237` にて開発用サーバーを起動して `–watch` オプションでコードの変更を監視させると開発時は便利です。

“`
$ kintone-cli init –install -p app237
$ cd app237
$ kintone-cli create-template -t Customization -s –

元記事を表示

SwitchBot温湿度計のデータを Web Bluetooth API で取得する：【未完】準備や試行錯誤のメモ

この記事は、以下の記事の続きで、あれこれ試した内容などのメモです。
　●SwitchBot温湿度計を Web Bluetooth API でスキャンする【試行錯誤中】 – Qiita
　　https://qiita.com/youtoy/items/e28a10866dd0050251c0
なお、思ったように進まなかった部分があり、今回の記事でも完結はしていない状況です。

## Web Bluetooth API でのスキャン（前回の記事の内容）
前回の記事では、例えば以下のような処理で SwitchBot温湿度計 をスキャンできるところまでは確認していました。

“`javascript
// パターン1
navigator.bluetooth.requestDevice({filters: [{ services: [“cba20d00-224d-11e6-9fb8-0002a5d5c51b”] }]});
// パターン2
navigator.bluetooth.requestDevice({filters: [{ name: [“WoSensorTH”] }]});
//

元記事を表示

【Vue.js】Vueインスタンスのライフサイクル

## はじめに
仕事で使う事になったので1からVue.jsについて学んだ。
ちゃんと覚えておかないとまずそうな事を備忘録として1つ1つ残しておく。

## Vueインスタンスのライフサイクル
Vueインスタンスにはライフサイクルという概念があり、以下のようなライフサイクル（フェーズ）がある。
これが分かっていると、DOMの描画後に…などの柔軟な実装ができるようになる。
![Vueインスタンスのライフサイクル.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372684/e33972a2-82d6-b14c-6cda-2560b50c6fb5.png)
上記の図中の`状態(プロパティ)名`と書かれている部分がVueインスタンスが持つフェーズである。
各フェーズでconsole.log()を出力させるようにすると、以下の動画のように各フェーズに到達してconsole.log()が出力されているのが分かる。
![ezgif.com-gif-maker (1).gif](https://qiita-imag

元記事を表示

Intersection Observerの使い方　ー まとめ ー

# はじめに
スクロールを行った際、画面内に対象物が入った時にJavaScriptを実行するという処理を学習したため、まとめたいと思います。

# もくじ
1. Intersection Observerとは
2. 基本的な記述
3. options
4. おわり

# 1. Intersection Observerとは

Intersection Observerをそれぞれ日本語にすると、以下のように訳されます。

|Intersection|交差、交差点|
|——————-|———|
|Observer| 監視する者、観察者|

このことから、Intersection Observerは「（物体の）交差を監視する者」という意味になります。

「物体の交差」とは、配置されている物体がスクロールされることで画面内（window内）に入ったり、出たりすることを「物体の交差」と表現されます。

そして、Intersection Observerはこの交差を監視しています。

#

元記事を表示

モーダルで表示するYouTube動画をボタンごとに切り替え

#はじめに
　今回[なでしこジャパン応援団体eAstBlueのHP](https://eastblue-nadeshiko.com/)を作る際に調べて出てこなかった内容を書き留めたものです。この記事を見た方にとって参考になっていましたら幸いです。

#モーダルでYouTubeの表示
　今までHTML埋め込みの形ではやっていました。同様の方法でモーダルにそのまま埋め込んだ場合に起こった問題。__モーダルを閉じても動画が止まらない__ことがわかりました。[YouTube公式のマニュアル](https://developers.google.com/youtube/player_parameters?hl=ja)を参考に実装しました。

“`HTML:YouTube埋め込み部分のタグ

“`

“`JavaScript:使用するスクリプト
// iframeへのYouTubeAPI埋め込み
var tag = document.createElement(‘script’);
tag.src = “https://www.youtub

元記事を表示

平成生まれのエンジニアが初めてIoTに触れるのに丁度良い、生き残りゲーム～令和最新版～のプロトタイプをobnizで作る

先日、手軽にIoTに触れられると噂の「obniz」を入手しました。
ラズパイに比べて、圧倒的に早く、楽に電子デバイスを操れるのでうっかりスキルが向上したか？と錯覚するほどです。
この手軽さを活かす先は、プロトタイプでしょ？！ということで、さっそく行動してみました。
#生き残りゲームの令和最新版をプロトしよう
時代背景・コロナ感染予防・働き方・IoT・サーボモーターの動き、、、パッとピラめいたのが
　**生き残りゲーム**
レトロラブな私としては、これの令和最新版が作りたい！新しい形で対戦してみたい！　これです。　
**コレは絶対楽しいやつ**にしか思えないので、**プロトしてポテンシャルを測ってみたい**と思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/365273/e3e14ef3-6e86-fde7-ee99-7455d34b7975.png)
ちなみに、この生き残りゲーム、平成生まれの方はあまり知らないらしいですね。そんな記事をネットで見ました。
ご存じない方は「生き残り

元記事を表示

浦島太郎のVue.js

# 前書き

数年ぶりにJavaScript触ったら結構変わってるな…！
と思ったので、私みたいな浦島太郎さんが他にもいたら役立てて欲しいなという記事です。
一応Vue3の想定で書いていますが、Vue2限定のものが混ざっていたらすみません。

## 想定読者層

だいたい下記レベル感を想定しています。

– 他の言語でプログラミング自体はできる
– 基礎的なLinuxコマンドが打ててアレルギーがない
– JavaScriptは昔ちょっとjQuery触ったことがある（一応DOMの概念はわかる）
– ブラウザ上で動くJavaScriptについては一応知ってる
– 最近イケてると噂のVue.jsを触ってみたい
– npmってなにさ？
– webpackってなにさ？
– 細かい部分はググればわかりそうだけど、前段階としてざっくり概念を知ったり、できることを簡単に知っておきたい

## 注意書き

私も学習しながらざっくり理解で進めたので、正確でない部分があるかもしれませんがご了承ください。
間違いがあれば教えて頂けると助かります。

# Vue.jsってどういうもの？

そもそも問題ない人は[

元記事を表示

obnizで天気予報を可視化して傘予報をしてみた☂

最近、家を出てから雨を降っていることに気づき部屋までちょいちょいあり、どうにかならないかと思い作ってみました！

#概要図
傘不要（晴れ）、折り畳みを持って行った方がいい場合（曇り）、傘必要（雨）の場合に分けています。
それぞれ緑・黄色・赤で表現しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1390350/cca8cd4a-64b9-8d09-7b69-d2793c63ddfc.png)

■コード全文

“`node.js
const fetch = require(“node-fetch”);
const APIKEY = “APIKYEを入力”;
const RED_WEATHERS = [
“Rain”,
“Snow”,
“Thunderstorm”,
“Drizzle”,
“Fog”,
“Squall”
];
const YELLOW_WEATHERS = [
“Clouds”,
“Mist”,
“Smoke”,
“Du

元記事を表示

[JavaScript]プリミティブ型・オブジェクト型の違い

##目的

めも
プリミティブとオブジェクトとラッパーについてうまく説明できない人向け

##プリミティブ型とオブジェクト型

| 型 | 値 |
|:———–|————|
| プリミティブ| 数値・文字列・真偽値・undifined・null|
| オブジェクト|それ以外|

##大きな違い

オブジェクトには、関数とプロパティが存在する。
プリミティブにはない。

##疑問①文字列に対して使われるlengthはプロパティでは？？

lengthは、ラッパーオブジェクトのプロパティ。
プリミティブ型に対して使うと、自動でプリミティブ型からオブジェクト型に変換されて(ラップされる)ラッパーオブジェクトになるため使用できる。

##ラッパーオブジェクトとは

本来プリミティブ型である数値や文字列を、オブジェクトのようにして使えるようにしたもの。

“`
let stringObj = new String(“Hello”);
let numberObj = new Number(0);
“`

##参考記事

– [プリミティブとオブジェクトとラッパー

元記事を表示

Youtubeの広告を簡単にスキップするChrome拡張 – YoutubeAdSkipper

# 開発の動機
Youtubeをながら見しているとき、表示される広告をスキップするのが面倒くさくなるときありませんか? 私は、いちいちマウスを操作してクリックするのが面倒くさくて、せめてキーボードショートカットでも、と思って、いろいろ探してみたんですが、Chrome拡張にも見当たらず、いっそのこと作ってみるかというのが始まりです。ショートカットキーだけでは寂しいので、自動でスキップする機能も実装することにしました。

# 機能
* Youtube playerに表示される広告を自動でスキップします。
* 手動で直ちに広告をスキップするショートカットキーを追加します。

# インストール方法
YoutubeAdSkipperはまだパッケージ化していません。githubのレポジトリから直接ダウンロードして、インストールしてください。
1. 以下のレポジトリにアクセスして、ZIPファイルをダウンロードします。
https://github.com/oyajizap/YoutubeAdSkipper
2. ダウンロードしたZIPファイルを、ローカルストレージの適当なフォルダに解凍します。

元記事を表示

【Vue2】 Vue Routerの機能の整理

# Vue Routerを使う

– インストール

“`bash
npm i vue-router
“`

– vue-routerの設定を行う（ルーティングとコンポーネントの紐づけ） ( /src/router.js )

“`js
import Vue from ‘vue’;
import Router from ‘vue-router’
import Home from ‘/views/Home.vue’
import About from ‘/views/About.vue’

Vue.use(Router) // プラグイン（どこでも使える機能）を適用するために記載

export default new Router({
routes:[
{
path:’/’, // URL
component:’Home’ // 上記URLのときに表示するコンポーネント
},
{
path: ‘/about’,
com

元記事を表示

obnizでわが子と一緒に「オリジナル目覚ましBot」を作って、実際に起きられるかどうかを試した結果

##今回の目的　～わが子に”オリジナル目覚まし”を作りたい！～
来年の今頃は、わが家の息子は小学校１年生。
今後のために、朝は１人で起きられるようになって欲しい！！
そんな思いから、先日学習したobnizで「**オリジナル目覚ましBot**」を作ってみよう！と考えました。

そもそも、わが家の息子は、朝がとっても苦手。
毎日、必死に起こすのが日課となっていますが、寝起きがとっても不機嫌です?
本人いわく、「パパやママの声だと、ビックリするから嫌」なのだとか。
その後の支度もグダグダとなってしまうので、なんとか**笑顔で朝を迎えてくれたら**・・・と、模索しており、このあたりもBotで解消できればと思います。

##完成品（「わが子専用 目覚ましBot」）
完成品のご紹介です。
LINEBotからの合図とともに、obniz電圧スピーカーからメロディーが流れる仕様。
[前回の記事](https://qiita.com/kokano23/items/b34b7d0361b8aaa6ad1f)で作ったLINEBotを、一部アレンジしています。

超リアルなザクを目指して！obnizでぐぽーんと音がしてモノアイが光るプロトタイプを作成！！

##ぐぽーんと音がしてモノアイが光るのは男のロマン
ガンダムの色んな作品でよく見かける演出として、
**格納庫でスタンバってるMS（モビルスーツ）の目が「ぐぽーん」という音と共に光る**
というのがあります。（ザクやドムなどバリエーションも豊富）

この演出、個人的に大好物なんですが、いつかこれを**ガンプラで再現したい**なーと思っています。

今回は**100均で見かけたおもちゃとIoT基盤「obniz」を組み合わせてプロトタイプを作った**ので記事にしていきます。

##完成品（ぐぽーんとなってモノアイ光るぜ）
実際に作ったものはこんな感じで動きます。

S3 + CloudFront + CloudFront Functions で Basic 認証付きの WEB コンテンツ配信

# はじめに
S3 上に格納した WEB コンテンツを CloudFront で配信する際に Basic 認証で簡易なアクセス制限をかけたい、というのはよくあるユースケースだと思います。というわけで、2週間ほど前（2021年5月3日）にリリースされたばかりの「CloudFront Functions」でやってみました。

ちなみに、この CloudFront Functions ですが、CDN のエッジ側で簡易な処理を高速かつ安価に実行できるサービスです。これまでも Lambda（[Lambda@Edge](https://aws.amazon.com/jp/lambda/edge/)）を使って同じようなことができていましたが、より Viewer（クライアント）に近いところに関数を配置でき、高速かつ安価な処理が実現できるようになった、とのことです。

– [Amazon CloudFront が軽量エッジコンピューティング機能である CloudFront Functions を発表](https://aws.amazon.com/jp/about-aws/whats-new/2021/

正規表現を用いたreplaceメソッドの使い方

※プログラミング学習中の私がアップロードしてます。理解が浅いです。
この記事は厳密な仕様に関するものではなく、考え方理解のまとめとして受け取ってください。

正規表現を用いたreplaceメソッドの使い方
–

replaceメソッドにおける正規表現では、検索する文字列を『/（スラッシュ）』で囲み、末尾にフラグを付与します。 オプションのフラグを幾つかを列挙します。

|フラグ|フラグの意味合い|
|–|–|
|g|グローバルマッチ|
|i|大文字と小文字の違いを無視する|
|m|複数行を越えたマッチ|

|文字|説明|正規表現の例|マッチする例|
|–|–|–|–|
|^|直後の文字が行の先頭にある場合にマッチします。|^google|google…|
|$|直前の文字が行の末尾にある場合にマッチします。|google$|…google|

つまり直後の文字で始まるってこと

testメソッドとは
–

testメソッドは文字列を正規表現でチェックするために使います。
指定した文字列が正規表現のパターンにマッチすれば「true」を返し、マッチしなければ「fal

【rails×js】簡単実装できるJavaScript/jQuery小技集

#実装すること
PFでJavascriptを使用して実装した便利？な機能を紹介します。
実装はとても簡単ですので試してみてください。

①トップページに戻る機能
②タイピング風に文字が表示される機能
③文字数をカウントしてくれる機能
④入力したpasswordを表示する機能
⑤データを円グラフで表示してくれる機能(Chart.jsの実装: https://qiita.com/tani__san929/items/cb6640173ff801acc203)

#完成形

①トップページに戻る機能
* 下に進むと右下にボタンが表示されます。
* 押すとトップページに戻ります。
![gif (5).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1029483/82934cda-9022-79d0-e9d7-961f0b7262ea.gif)

②タイピング風に文字が表示される機能
* 特定の文字がタイピングされているように順番に表示されます。
* リロードすると再び同じ動きをします。

![gif (4).g

元記事を表示

OTHERカテゴリの最新記事