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

#javascript の some / every の挙動を #node で確認する

“`
$ node
“`

# some

“`js
// 配列の中の一つでも値が1であればtrue
> [1,2,3].some(value => value == 1)
true
> [3,4,5].some(value => value == 1)
false
“`

複数条件をつなげることも出来る

“`js
// 配列の中の一つでも値が1または2の要素があればtrue

> [1,2,3].some(value => value == 1 || value == 2)
true
> [2,3,4].some(value => value == 1 || value == 2)
true
> [3,4,5].some(value => value == 1 || value == 2)
false
“`

# every

“`js
// 配列の全ての値が1または2または3であればtrue
> [1,2,3].every(value => value == 1 || value == 2 || value == 3)
true
> [2,3,4].every(va

Javascript基本集(6)~正規表現~

自分の学習用です:santa:

#正規表現とは
文字列の集合を一つの文字列で表現する方法で、
文字列に特定の文字が含まれているかを確認することや、特定の文字を取り除くなどの操作を行うための技術

**代表的な特徴**
・文字列の一部分を置換する
・文字列が制約を満たしているか調べる
・文字列の一部分を抽出する

##「RegExp」オブジェクト
正規表現の英名【Regular Expression】が由来となる。
JavaScriptで正規表現を扱えるようにするためには、まず**「RegExp」オブジェクト**を作成する必要がある。
RegExpオブジェクトを利用することで、正規表現による検索や置換など文字列操作を自在に扱えるようになる。

構文

“`js
var reg = new RegExp( パターン, フラグ );//newでRegExpオブジェクトを生成して変数に代入
“`
引数の「**パターン**」には一般的な正規表現を指定し、「**オプション**（g,i,mなど）」を指定する。

**パターン**
![FireShot Capture 224 – 【JavaSc

【JavaScript】非同期処理とはなんぞや

## はじめに
JavaScriptの初心者を脱出して最初に躓くのは恐らく**非同期処理**な気がします。
自分も見事につまずいているので、記事にまとめながら勉強していきます。

## 非同期処理とは
処理を待たずにどんどん処理を進めていきます。
遅いやつを待ってあげるような優しい奴ではありません、非情です。

“`js
const fs = require(‘fs’);

const file1 = fs.readFile(‘file1.txt’)
const file2 = fs.readFile(‘file2.txt’)
const file3 = fs.readFile(‘file3.txt’)

console.log(`file1: ${file1}, file2: ${file2}, file3: ${file3}`)

“`

動きません。

readFileは非同期処理です。file1君が処理を終えるのを待っているほどfile2君の気は長くありません。
それはfile3も同じです。結果として誰も成功できない。これが非同期処理です。

## 解決策
この誰も待ってく

LINEでメッセージを送ると メロディを奏でるBOT【IoT連携】【LINE BOT】

LINEでメッセージを送ると メロディを奏でるBOTを作成してみました。

BOTの名前は音符(ONPU)とPUSHをもじって、
“ON-PUSH”にしました。

現時点ではバッテリーが備わっていない点、Wi-Fi環境下でないと起動できない点はありますが、よくスマホ等のモノを家でどこに置いたか分からなくなることがあるので、これで好きな曲で探すことができます。

今回は、『きらきら星』の曲を鳴らしています。

##環境
– Windows 10
– Node.js 12.16.1

##必要なもの
[obniz Board](https://obniz.io/ja/products)の購入が必要です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6

[JavaScript] consoleでログファイルを出力する

# はじめに

JavaScriptでconsoleのファイル出力機能を作成しました。

通常、JavaScriptのconsoleオブジェクトを使用すると、PCのWEBブラウザ開発モードからコンソール画面にログが表示されます。

ここでは、consoleオブジェクト使用すると、サーバー側でログファイルを出力するようにしました。処理の流れは下記の通りです。


consoleオブジェクトの関数（例えば、console.log()）を実行すると、ログメッセージがキューイングされます。10秒間隔て定期的にサーバー（php）にログメッセージがPOSTされます。そして、サーバー側でメッセージをファイルに出力しています。

この仕組みのメリットは、開発モードが使えないブラウザで有効であると思います。例えば、IOTデバイスにブラウザが組み込まれているような場合は、

ブラウザでAngularやReactを実行できるヤツだー！

はこです！こんにちわ！
今日は
**『ブラウザでさっくりとAngular/Reactを動かして確認したいんだよなー！できれば最新版（あるいは特定の版）で！』**
とか
**『StackOverFlowに質問を投げたりQiitaに書くときに問題が再現する最小で実行可能なサンプルを…！』**
とかの要望に使えるやつの話をします！
つまりブラウザで動きトランスパイルもしてくれるエディタの話です！

よさげな順に並べときます。

### StackBlitz

https://stackblitz.com/

Angular, React, Io

Reactである程度スクロールしたかどうかの状態更新

Reactで一定量スクロールしたら`setState`する際の処理を書いたのでメモ。
スクロール処理には`throttle`を使用。ここではnpmの`throttle-debounce`を`import`する。
以下は`isPiyo`に1000px以上下へ縦スクロールしているかどうか(true/false)を更新するもの。
throttleの第一引数は一定間隔間引く基準を指定するもの。1000ms毎に処理を行う。

“`javascript:hoge.js
import { Container } from ‘unstated’;
import { throttle } from ‘throttle-debounce’;
// 省略
…

export default class HogeContainer extends Container {
constructor(appContainer) {
// 省略
…
this.state = {
// 省略
…

isPiyo: false,
}

Pre-Signed URLでS3に直接ファイルをアップロードする

# S3にファイルをアップロード
S3にファイルをアップロードするときLambdaやEC2経由にすることが多いかと思いますが、大容量のファイルだとS3に直接アップするほうが効率が良さそうです。
そういった場合はPre-Signed URLを取得して直接S3にファイルをPUTしてやると良さそうです。

# Pre-Signed URLの取得
以下のコードでPre-Signed URLが取得できます。

“`js:Lambda
const s3 = new AWS.S3()
const params = {
Bucket: ‘<バケット名>‘,
Key: ‘<ファイルパス>‘,
Expires: 100 // 期限（秒）
}

async function getPresignedUrl(){
return new Promise((resolve,reject)=>{
s3.getSignedUrl(‘putObject’, params, (err, url) => {
if (err) {
reject(err)
}

Pixabay APIでフリー素材の画像を取得しLINE botで送信する

#やること
　**[Pixabay API](https://pixabay.com/api/docs/)**という、フリー素材の画像、イラスト、動画を提供しているAPIを利用して取得した画像をLINE botへ送信してみます。
　LINE botからユーザに画像を送信する方法は次の記事にまとめました。
[【LINE botから画像送信する方法】問いかけると柴犬の画像を返してくれるLINE botを作ってみた](https://qiita.com/kmaepu/items/fe718d6fd57929dd6e36)


#できたもの
　何かテキストを入力すると、ビーバーの画像を返してくれる。（本当は、テキストに応じた画像を出したかった…。）

元記事を表示

2020年版 VSCodeの良さげな拡張機能紹介

日々VSCodeをより気持ちよく使用するために拡張機能の探求は欠かせません。
今回は私の独断と偏見で良さげな拡張機能を紹介します。

# 見た目編

## Peacock
https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock

VSCodeのウィンドウをおしゃれにできます。
私は複数の環境(プロジェクトやプログラミング言語)を使い分けるので、ウィンドウごと色を変えることで気持ちも一緒に切り替えています。

公式より拝借

## Ubuntu VSCodeTheme
https://mar

Kinx ライブラリ – Double

# Double

## はじめに

**「見た目は JavaScript、頭脳(中身)は Ruby、（安定感は AC/DC）」** でお届けしているスクリプト言語 [Kinx](https://github.com/Kray-G/kinx)。言語はライブラリが命。ということでライブラリの使い方編。

今回は Double です、… と言いつつ、Double 組み込み特殊メソッドは少ないので、短い記事です。

* 参考
* 最初の動機 … [スクリプト言語 KINX（ご紹介）](https://qiita.com/Kray-G/items/ca08b6fb40d15dd0ec76)
* 個別記事へのリンクは全てここに集約してあります。
* リポジトリ … [https://github.com/Kray-G/kinx](https://github.com/Kray-G/kinx)
* Pull Request 等お待ちしております。

## Double 特殊オブジェクト

Double オブジェクトに対して関数定義する

webpack-dev-serverのhot reloadでCPU使用率が上がる問題対応

# 概要
タイトル通り
nodeの使用率が100%前後になってMacが高熱になってて辛かった

# 方法
webapck-dev-serverのconfigに以下を追記する

“`
watchOptions: {
poll: 1000,
ignored: [‘node_modules’]
}
“`

# 結果
追加前は100%前後だったCPU使用率が20%前後に落ち着いた
Macが熱くて火傷しそうだったので助かった

# 参考
github issueにあった
https://github.com/webpack/webpack-dev-server/issues/2140

Powershellでクリップボードを監視しよう

# Powershellでクリップボードを監視しよう

windows標準環境（Powershell+ブラウザ）でクリップボードを監視しようではないかという投稿です。

## 背景

色々とセキュリティが厳しい昨今、PCにソフト１つ入れるのも難しい環境がお有りではないでしょうか。
クリップボード監視ツールなんてフリーソフトでcliborとかいろいろあるんですが、
そのへんが導入できない壁があり、
windows標準環境だけでクリップボード監視できるものを作ってみようと思い立ちました。

## この記事の対象者

– 会社でWindows使っている方＋なかなかソフトが自由に入れられない方
– Powershellでクリップボード監視する方法に興味がある方

## 今回作るもの


## フォルダ構成

“`
■フォルダ
│ backup

【初心者向け】Vue.jsをToDoアプリを作りながら学ぼう

この記事では、Todoアプリを作りながら学んだVue.jsの基本をまとめています。
超初心者向け、超入門です。難しいことは書けないのでご容赦ください。。

## 筆者の学習時の技術レベル
– プログラミング学習開始して5ヶ月、エンジニア実務経験 (Rails) 3ヶ月
– バックエンド Rubyを中心に勉強しており、今後もバックエンドがメインのつもり
– フロントエンドはJavaScript、jQueryの基本的な読み書きはできる程度

## 必要な前提知識
– HTML/CSS/JavaScriptの基本的な知識

## どうやってVue.jsを勉強したの？
#### [超Vue JS 2 完全パック – もう他の教材は買わなくてOK！ (Vue Router, Vuex含む)](https://www.udemy.com/course/vue-js-complete-guide/)

僕は動画のほうが入りやすいので、まずUdemyですね。

タイトルにもあるように、他の教材を買わなくてもいいくらい充実した内容です。
Todoアプリを作るくらいなら全部やらなくても大丈夫ですが、
「V

在宅ワーク中に会議中だよサインをobnizとLINEBotで作ってみた

### はじめに
こちらはProtoOutStudioというイケイケなスクールの「LINE Bot+IoTで表現してアウトプット」という課題で製作したものです。
obnizとLINEBotを組み合わせて何か作ろう！というものです。
### 概要と作れなかったところ
新型コロナウィルスのせいで在宅ワークになったため、仕事中の家族との距離が難しい。
特にうちは猫が３匹もいるので、ニャンコちゃん達が騒ぎ始めたらどちらの部屋に引き取る？とか、
ご飯何時にする？
などなど、いちいちメッセージを送らずに部屋越しに会話することがよくあるのですが、実は「今オンラインミーティング中！！！！ノックしないでー、開けないでー」みたいなことがあって気まずい思いをしたりして、何かトイレの空き情報みたいなサイネージが欲しくて作りました。

[obniz S

VSCode でF5でホーム画面を起動して JaveScript をステップ実行する

~~TypeScript 編は、
[VSCode でF5でホーム画面を起動して TypeScript をステップ実行する]() を見てください~~

## ゴール

– F5でホーム画面を起動 (CakePHP以外でも**ステップ実行までの手順は基本同じ**です)

## 書かないこと
– CakePHP のインストール手順

## 前提

– CakePHP ビルトイン の簡易ウェブサーバ (port:8765) を起動していること

“`
C:\src\cake-app\bin>cake server

Welcome to CakePHP v3.8.11 Console
“`
## Version

| – | version |
| ———–

100日後にエンジニアになるキミ – 20日目 – Javascript – JavaScriptの基礎3

今日もJavaScriptの続きをやっていきましょう。

前回はこちら

[100日後にエンジニアになるキミ – 19日目 – Javascript – JavaScriptの基礎2](https://qiita.com/otupy/items/f2ed8df08d2b0ba135c5)

## 定数

昨日は「変数」についてやりました。

変数はその名の通り「変わる数」なので
中身を上書きして変更したりできました。

定数は変数と同様に宣言して、値を代入まではできますが
その後、中身を変更できないものになります。

書き方は
`const`を頭につけて宣言します。
`const SAMPLE_CONST;`

代入まで行うと
`const SAMPLE_CONST = ‘abc’;`

“`
const MY_FAV = 7;
MY_FAV = 20;
“`
Uncaught TypeError:

“`
const MY_FAV = 20;

// ここから下は全てエラー
const MY_FAV = 20;
var MY_FAV = 20;
let MY_FAV = 20;

どん兵衛を生け贄に青眼の白龍を召喚！

# はじめに
React Native で ARKit を使ってみたかったのやってみました。
使用するライブラリは [react-native-arkit](https://github.com/react-native-ar/react-native-arkit) です。

完成形は以下のようになります。


では、実装していきます。

# インストール

正直、ここが一番面倒でした。
公式が、 React Native >= 60.0 から追加された Autolink に対応していない…！

まだ取り込まれていない[修正プルリクエスト](https://github.com/react-native-ar/react-native-arkit/pull/208)があったので、そちらに従いました。

“`bash
yarn add g

JavaScriptを学ぼう！

# JavaScriptを学ぼう！

##【目次】

– JavaScriptとは？
– JavaScriptで計算しよう
– JavaScriptで論理を扱う
– ループで繰り返し処理
– 配列を利用しよう
– 関数を作ろう
– オブジェクトを活用しよう

### ①JavaScriptとは？
**JavaScript**とは、webページの情報に変更を加えられるプログラミング言語です。**JS**と略されて呼ばれています。（以下、基本JSと書きます）　

例えば、以下のようにJSをHTMLの``タグ内に記述すると、
“1+2”の計算式の説明と計算結果をHTMLに表示することが出来ます。

“`html

“`

1. **`