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

【Javascript】 分割代入について（オブジェクト編）ーDestructuring Objects

# 初めに
ES6に新たに導入された便利な構文の一つに「分割代入（destructuring)」があります。前回に引き続き、分割代入について学習した内容をもとにいろいろ試してみました。外部APIを利用する際に非常に役に立つので記事にしてみました。

前回の記事
:https://qiita.com/redrabbit1104/items/3ba4783c658ebfa624a0

※内容に間違いなどがある場合はご指摘をよろしくお願いします。

# オブジェクトを分割代入してみる
###① 配列の代入と違うところ（注意点）

配列を分割代入する場合、配列の中身はindexによって取得できるため変数名を指定するだけで済みました。これに対してオブジェクトはkeyとvalueが存在するので書き方が若干違います。

“`javascript
//配列の場合
const flowers = [‘薔薇’, ‘桜’, ‘朝顔’, ‘ひまわり’]
const [a, b, c, d] = flowers;
console.log(a, b, c, d);
“`
指定した変数a,b,c,dにそれぞれの

【JavaScript 変数】var、let、constの違いや使い分けなど

#変数

変数とは**文字列や数値のデータを格納して、何度も使えるようにする**箱のようなものです。
変数を宣言するときには以下のように、右の値を左の変数に代入することになります。

“`.js
var “変数名” = “値や文字列”;

var a = 1;
let apple = 3;
const banana = ‘バナナ’;
“`

**var**、**let**、**const**はJavaScriptで変数を宣言すると気に使うキーワードです。

#var, let , constの使い分け

var, let, constはそれぞれできること、できないことがあります。

|var| let|const
-|-|-|-
**再代入**|○|○|×
**再宣言**|○|×|×
**スコープ**|関数|ブロック|ブロック

###再代入
再代入とは宣言した変数の値を再び別の値で代入することです。

varやletで宣言した変数を再代入とすると代入後の値が適用されます。
constで代入するとするとエラーが出ます。

“`.js
// var
v

JavaScriptのminify（最小化・圧縮）の解説をいくつかまとめてみた

JavaScriptを手で書いたあと、Webで公開する際にはminifyすることが定番、のはず。
けれども、minifyしたあとのJavaScriptは元と全く同じ動作をするが、文法すら全く異なるように最小化されることが多い。

JavaScript初心者のわたしとしては`??？？？`となることが多かったので、言語仕様を勉強するためにもいくつかまとめてみた。

#例1：ローカル変数の置き換え
“`javascript:minify前
(function (position) {
const SOURCE = ‘ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789’;
return SOURCE[position];
})(3);
“`

“`javascript:minify後
(function(a){const b=”ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789″;return b[a]})(3);
“`

##解説
JavaScriptのスコープには、「グローバルスコープ」と「ローカルスコープ（関数スコープとブロックスコ

Vue.jsとReact.jsのプロジェクト作成から公開準備（※コーディングは含みません。）

# Vue.jsとReact.jsのプロジェクト作成から公開準備
Javascriptで使用できるフロントエンド側のフレームワーク、VueとReactのプロジェクト作成コマンドを忘れないためと、ビルドしてからの流れについての説明が見当たらず、せっかく個人開発でやってみても誰にもリリースすることがないように記す。
なお、今回はそれぞれポートフォリオをフロントエンド側でのみ、作成したという程で作成しました。

## 動作環境
– MacBook Air (Retina, 13-inch, 2018)
– BicSur 11.3.1
– 1.6 GHz Dual-Core Intel Core i5
– 6 GB 2133 MHz LPDDR3
– Node.js
– v13.8.0
– @vue/cli 4.5.13

## 各プロジェクトの作成

### Vue.js
“`terminal
vue create vue-portfolio
“`

### React.js

“`terminal
npx create-react-app r

SwitchBot温湿度計を Web Bluetooth API でスキャンする

表題の通りです。

Node.js や Python等を使って [SwitchBot温湿度計](https://www.switchbot.jp/meter)からの情報取得を実現した記事をいくつか見かけていました。
そして、Web Bluetooth API でやってみようと思って手をつけずにいたのですが、今回試してみて試行錯誤の過程を含めて自分用メモとして記事にしました。

# Web Bluetooth API でスキャンしてみる
## スキャンに必要な情報
公式から以下の情報が提供されていました。

●Meter BLE open API · OpenWonderLabs/python-host Wiki
　https://github.com/OpenWonderLabs/python-host/wiki/Meter-BLE-open-API

上記の仕様を見ると UUID は `cba20d00-224d-11e6-9fb8-0002a5d5c51b` になるようです。

そこで、まずはブラウザの開発者ツールのコンソールで、以下の UUID をフィルタに使った形の処理で実行し

Enterキーで次項目へフォーカス移動(jQuery版)

[テストページ](https://murasuke.github.io/focus-next-jquery/public/index.html)

## 目的

似たようなスクリプトは探せば結構あるのですが、問題が多いので1から作りました。

button上でenter押下時も移動するようにしていますが、実際のアプリに組み込んで動作確認したら動作を変えるかもしれません。

* enterキー押下時に次項目へ移動するjavascript(jQuery利用)
* フォーカス移動概要
* tabindex順に移動します(tabindex1以上⇒tabindex未指定の順)
* tabindexがマイナスの項目へは移動しません
* tabindexがマイナスの項目から移動する場合は、直近前後の項目へ移動します。
* 通常移動しない項目

やにtabindexを付けると移動可能になることを考慮
* 上記に関連して、フォーカス移動可能な項目が入れ子になっていても移動できる

## ソース
“`html