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

JavaScriptだけでIoTネットワークを構築する方法

この記事では、**Alibaba Cloud**の**IoT**プラットフォーム上で**JavaScript**を使って開発者が簡単に**IoT**ネットワークを構築する方法を説明しています。

*本ブログは英語版からの翻訳です。オリジナルは[こちら](https://www.alibabacloud.com/blog/implementing-an-iot-network-using-only-javascript_594140)からご確認いただけます。一部機械翻訳を使用しております。翻訳の間違いがありましたら、ご指摘いただけると幸いです。*

#概要
この例では、開発ハードウェアとしてDeveloper Kit（AliOS Thingsを移植したもの）を使用して、基板実装の温度センサからLink Developへのデータアップロードを実装し、デモにはWeb Appを使用しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/647921/56d4f955-af07-2946-e

意外と複雑な「クリップボードにコピー」

メールアドレスなどでよく見かける、「クリックしてクリップボードにコピー」
よく見かけるが故に`copy(‘コピーしたい文言’)`みたいな感じで簡単に出来ると思ったら、意外と複雑だったので備忘録です。

“`js
clipboardCopy: function(e) {
e.preventDefault()
const targetSentence = ‘コピーしたい文言’
let input = document.createElement(‘input’)
input.readOnly = true
document.body.appendChild(input)
input.value = targetSentence
input.select()
document.execCommand(‘copy’)
document.body.removeChild(input)
}
“`

## ざっくりとした流れ

①inputを

window.location.hrefで別タブでリンクを開く方法

`window.location.href`を使用すると、外部URLへ遷移させることができます。

“`js
window.location.href = ‘https://qiita.com’
“`
上記では、同一タブで開くので、別タブで外部サイトを開かせる場合は`window.open()`を使います。

## window.open()で外部URLを開く

“`js
const url = ‘https://qiita.com’
window.open(url, ‘_blank’)
“`
上記のコードで、別タブで外部URLを開くことが可能です。

DOMとは何か（初心者からの目線）

#DOMとは何か

###そもそもDOMって一体何？
https://ja.wikipedia.org/wiki/Document_Object_Model

DOMはDocumentObjectModelのこと。
HTLMなどの階層化、構造化された文章のこと。

階層化された文章のオブジェクト群だよ（各要素群の集合だよ）という理解。

PropsとStateの違い

Reactを学習していて、PropsとStateの違いってなんやろ
とふとした時に思い調べました。

学習メモなのでふわっとしていますが、どうぞよしなに。

*間違いがあれば教えていただけると、ありがたいです。

【Propsとは】
・オブジェクト
・親コンポーネントからもらう値
・Propsを受け取る側の子コンポーネントではPropsを変化させれない
・親コンポーネントから変化させられる

【Stateとは】
・オブジェクト
・コンポーネント自身で定義する
・初期値を設定したらsetStateでStateの値を変更する

<まとめ>

Props→上から下に流れるデータ
State→コンポーネント自身が持つデータ

インクリメンタルサーチ

#はじめに・目的
– search controllerのhtml viewでの検索機能だと、ワード全て入力して検索しないといけない。
– jsonを使ったインクリメンタルサーチだと、非同期で検索可能。
– テーブル内で検索が頻繁に行われるカラムにインデックスを設定することで検索の高速化を図る。
– 今回はtweetsテーブルのtextカラムにインデックスを貼ることで、データの検索を高速化する。

“`terminal:terminal
$ rails g migration AddIndexToTweets
“`
“`ruby:マイグレーションファイル
class AddIndexToTweets < ActiveRecord::Migration def change add_index :tweets, :text, length: 32 end end ``` →migrate実行 #1.ルーティングなどAPI側の準備 ##Formatごとの条件分岐 ```ruby:app/controlers/tweets_controller.rb def sear

Fetch APIでPHPにデータを送信する方法

画面遷移をせず、ajaxでデータをPHPに渡す方法です。

下記は「ボタンをクリックした時にPHPにデータを渡す」処理についてのサンプルです。

## Javascript

`id=”start”`のボタンがあるとします。

“`HTML:index.html

start

“`
vanilla Javascriptでは、下記のように記述します。

“`javascript:main.js
start.addEventListener(‘click’, () => {
const postData = new FormData; // フォーム方式で送る場合
postData.set(‘firstName’, ‘hoge’); // set()で格納する
postData.set(‘lastName’, ‘fuga’);

const data = {

ReactでSemantic Uiを 使ってみる

■semantic ui react

“`
yarn add semantic-ui-react
“`

※フォントを変えたいのでsemantic-cssは読み込まない

LESSを読むためにcracoをインストール

“`
yarn add @craco/craco @semantic-ui-react/craco-less semantic-ui-less –dev
“`

Package JSONを書き換え

“`
{
“scripts”: {
“start”: “craco start”,
“build”: “craco build”,
“test”: “craco test”,
“eject”: “craco eject”
}
}
“`

craco.config.jsを作成

“`
module.exports = {
plugins: [{ plugin: require(‘@semantic-ui-react/craco-less’) }],
}
“`

必要なbuildツールをインストール

“`
np

node.jsでvercelを使って環境変数を設定するメモ

#環境変数設定メモ
[***vercel***](https://vercel.com/home) では、環境変数を本番環境、プレビュー環境、および開発環境用に簡単に分けることができる。

#手順
####1. vercle **プロジェクト設定の[ 全般]ページ** に移動して、**[環境変数]** セクションを見つける。

####2.環境変数の名前を入力する。
たとえば、`Node.js`を使用していて、`SENTRY_KEY`という名前の環境変数を作成すると、コード内で`process.env.SENTRY_KEY`で使用できるようになる。

| 環境 | 説明 |
|:—————–:|:—

iOSで100vhが効かない問題で、楽な方法をNuxt.jsでやってみる

iOS safariで100vhがうまくいかない時に、
`window.innerHeight`を取って各要素のstyle属性に一個一個付ける、
というのをやりがちでしたが、楽な方法が無いかと探すとカスタムプロパティが使えるそうなので、
その手順をNuxt.js版で書きます。

# mixinを作る
`–wh`という名前でカスタムプロパティを定義する。
ロード時と、リサイズ時に`window.innerHeight`を取って`–wh`に入れる。

“`javascript:mixins/device.js
export default {
data: () => ({
style: {
‘–wh’: ‘100vh’
}
}),
mounted() {
this.$nextTick(() => {
this.getWindowSize()
window.addEventListener(‘resize’, this.getWindowSize)
})
},
methods: {
get

攻撃から学ぶWEBセキュリティ対策（XSS編）

#はじめに
WEBエンジニアとして成長するために、セキュリティ対策は避けては通れない道ですよね。

僕も含め**「なんとなく知ってる」**という方は多いのではないでしょうか。

大切なWEBサイトを守るためにも、WEBエンジニアとしての基礎を固める為にも、しっかりと学んで一緒にレベルアップしていきましょう。

また、本記事の内容は様々な文献をもとに自身で調べ、試したものをまとめています。
至らぬ点や、間違いがありましたら、コメントにてご指摘をお願いします。

#XSSってなに？
XSS（Cross-site scripting）とは、他人のブラウザーで悪意のあるJavaScriptを実行するコードインジェクション攻撃です。

ターゲットに標的を定めて攻撃するのではなく、ターゲットがアクセスするWEBサイトの脆弱性を悪用して、悪意のあるJavaScriptを実行します。

このように攻撃者が直接攻撃していることは被害者には分からないので

**自分のサイトが気がついたら犯罪に加担していた**

という最悪の事態も考えられます。

#JavaScriptでどんな攻撃ができるか
上記のように

【jQuery】手数料を計算して表示させたい

ユーザーが入力した数値に計算を加えて表示させる際の手順について
簡潔にまとめたのでご紹介します。
（今回は、価格と販売利益として表示します。）

# 1. HTMLで価格コーナーを準備する

“`haml:sample.haml
~省略~

= f.number_field :price, placeholder: “0”, class: ‘exhibit-form_price’ do　-#入力欄
　　%span.mark
　¥
.exhibit-form_right
.commission-line
.commission-line_left
販売手数料 (10%)
.commission-line_right
ー
.profit-line
.profit-line_left
販売利益
.profit-line_right
ー

~省略~
“`

# 2. Jsの準備をする
フォームの入力値を取得し、任意の計算をした数値を
販売利益の欄に差し込みます。

“`js:sample.js

$(‘

GitHubの草を草色に戻すChrome拡張作った

GitHubのデザインが色々変わって、草が草の色じゃなくなったのが寂しかったので、草色にするChrome拡張を作りました。

## 効果

### before（新デザイン）

### after（Chrome拡張を実行）

どうですか？草ですね。落ち着きますね。

## 入手方法

まだChromeExt

HTML canvasタグを使って描画

# 前置き
HTMLで碁盤を作れないだろうか?と考えた。
CSSだけでは線が引けないことで悩んでいたら、HTMLのcanvasタグを使うとjavascriptで描画が出来るということで試してみた。
## HTML側
HTMLの方は、canvasタグで描画される幅・高さを指定できる。
style属性を指定することで、背景色なども変更できる。

“`html:app/html/kifu.html

canvasで碁盤を描く

碁盤を表示するには、canvasタグを

jqueryでsubmitボタンを毎回有効にする方法

###テックキャンプでJavaScriptの学習中に学んだ事

jQueryを使って非同期通信の学習をしている最後に、送信ボタンを押してイベント発火後に
送信ボタンが無効化されているのを有効にする方法を記します。

“`
$(‘#hoge’).prop(‘disabled’, false);
“`

調べてみてわかった事は

– Railsのver5.0以降はdisabledがデフォルトで設定されている事（連打防止等の為）
– 他にも有効に出来る方法はある

例えば

“`
$(‘#hoge’).attr(‘disabled’, false);
“`

自分のコードで試したが、どちらでも有効でした

今度は連打防止などの方法も調べて使え様にしていきます

非同期通信が自由に扱える様になると、少ないビューファイルの中に沢山の動的要素を
取り入れる事が出来て、かつレスポンスも早そうなので、プログラミングを学びたての自分でも
魅力的だなって感じました。

難しいけど面白い

javascript　神経衰弱ゲーム（自分なりの解説）

今回も、書籍[ゲームで学ぶJavascript入門](https://www.amazon.co.jp/%E3%82%B2%E3%83%BC%E3%83%A0%E3%81%A7%E5%AD%A6%E3%81%B6JavaScript%E5%85%A5%E9%96%80-HTML5-CSS%E3%82%82%E8%BA%AB%E3%81%AB%E3%81%A4%E3%81%8F%EF%BC%81-%E7%94%B0%E4%B8%AD-%E8%B3%A2%E4%B8%80%E9%83%8E-ebook/dp/B019WTE1FE)で紹介されている
神経衰弱ゲームの知識定着のために自分なりに解説をしてみます。

##シャッフル処理

書籍の中では、
まず配列のprototypeの中に、
配列をシャッフルをする処理を記述してあります。(書籍と記述が異なります。）

“`js:shuffle.js
Array.prototype.shuffle = function(){
var length = array.length;
for(var i = length – 1; i > 0;

async/awaitで非同期処理の完了を待つ

##①非同期処理をおこなう関数を宣言
“`javascript

const 関数名 = async () => {
const message = ‘GitのユーザーIDは’;
const url = ‘https://api.github.com/users/taizo-pro’
“`

##②awaitをつけ、fetchが実行完了するまで次に進まなくさせる
“`javascript
// jsonにreturnされた値が入る
const json = await fetch(url)
.then(res => {
console.log(‘非同期処理成功時のメッセージです’)
return res.json()
}).catch(error => {
console.error(‘非同期処理失敗時のメッセージです。’, error)
return null
});

const username = json.login;
console.

作って理解JavaScript：JOKE開発記その6 – break/continueおよびswitch

# 今回のスコープ

[前回の予告](https://qiita.com/junjis0203/items/4830b45c6e8024a0a4da#%E3%81%82%E3%81%A8%E3%81%8C%E3%81%8D)通り、以下を実装します。

– breakとcontinue（JavaScriptはラベル指定breakができるがサポートしない）
– breakを踏まえたうえでのswitch文

またfor文で1つ目／2つ目／3つ目の式を省略した場合のテストをしていなかったのですが、特に2つ目は本文中でbreakしないと無限ループしてしまうので今ステップでテストすることにしました（なおステップ7段階の実装はもちろん省略に対応できていませんでした）

ステップ8段階のコードは以下にあります（push後に開発記書いててバグってる箇所に気づきました・・・）
https://github.com/junjis0203/joke/tree/step0008-fix1

# break/continueのための仕組み

前回、「if/while/forはジャンプする量を事前に計算できるがbr

【javascript】タグ付きテンプレートリテラル

#タグ付きテンプレートリテラルとは
関数を使ってタグ付けしたテンプレートリテラルのことです。
#タグ付のやり方
テンプレートリテラルの先頭にその関数の名前を配置します。

“`javascript
myTag`my string`
“`
上の例では`my string`を関数`myTag`でタグ付けしています。
**`myTagb`関数の呼び出しではテンプレートリテラルが引数として渡されます。**

テンプレートリテラルを関数でタグ付けすると、テンプレートリテラルが**文字列部分と補間部分に分解**され、タグ関数に別々の引数として渡される。

|引数|説明|
|—|—|
|最初の引数|文字列部分がすべて含まれた配列|
|以降の引数|補間される値|

“`javascript
function tagFunction(
stringPartsArray,
interpolatedValue1,
…,
interpolatedValueN)
{

}
“`
**しかしこれらの引数を明示的に記述する必要はありません。**
##テンプレートリテラルが分解されて関数に渡される

CORS（preflight request）にハマったけど解決した話

CORS（preflight request）にハマったので、解決方法を備忘録として残しておきます。

# エラーが起きた場面
異なるドメインからHttpリクエストを送る場合は、CORSに注意だよなぁ。
サーバー側のレスポンスで、ヘッダーをつけてあげれば良いんだろう。
簡単じゃん。

## クライアント側
何かしらのデータをjasonでPOSTする。

“`js
var xmlhttp = new XMLHttpRequest();
xmlhttp.open(“POST”, API_ENDPOINT);
xmlhttp.setRequestHeader(“Content-Type”, “application/json;charset=UTF-8”);
xmlhttp.send(JSON.stringify(data));
“`

## APIサーバー側
サーバー側では、レスポンスのヘッダーを付けてあげる。

“`go
func (a *API) HandleFunc(w http.ResponseWriter, r *http.Request) {
//略…

w.He