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

【Node.js】JavaScriptで組み合わせ,順列を列挙する (npmモジュールあり)

## JSで組み合わせと順列を列挙する標準メソッドはない

Rubyだと

“`Ruby:index.rb
array = [1,3,5];

#組み合わせ
p array.combination(2).to_a # => [[1, 3], [1, 5], [3, 5]]

#順列
p array.permutation(2).to_a # => [[1, 3], [1, 5], [3, 1], [3, 5], [5, 1], [5, 3]]

“`

こんな感じで簡単に組み合わせ、順列の列挙ができるのにJavaScriptだとこれがない。**Mathオブジェクトのメソッドにあってもいい気がするんだけど。。。**

とにかくこのままだとpaizaで組み合わせ、順列の問題が出てくるたびにrubyで一から書き直す羽目になるので、JavaScriptで順列と組み合わせを列挙するコードを考え、ついでにrubyのコードより分かりやすく記述できるnpmモジュールも作りました。

# コード
これから載せるのは実際にモジュールを作る際に書いたコードなのでしっかり動くはずです。

### 組み合わ

React Hooks: 子コンポーネントから親の状態をレンダー時に変えたら叱られた ー Warning: Cannot update a component while rendering a different component

ネストした子コンポーネントから親の状態を変えるReactアプリケーションで、少し試行錯誤したことを書きとめます。経緯の説明からはじめますので、タイトルの警告(Warning)の意味が知りたいという方は最後の「レンダーが済んでから親の状態を変える」をお読みください。

# 配列データから動的にドロップダウンメニューとコンポーネントをつくる
サンプルとしてつぎのコードで、ドロップダウンメニューと子のコンポーネントをつくります。同じ配列データ(`selections`)を用いて、それぞれ動的にテンプレートを組み立てました。3つのコンポーネントはメニューで切り替わり、表示されるのはつねにひとつだけです。

“`react:src/App.js
import React, { useState } from ‘react’;

function App() {
const selections = [
{name: ‘Home’, component: Home},
{name: ‘Products’, component: Products},
{name: ‘About’,

【初級編】JavaScript　if文について

## ? if文

まずJavaScriptのif文の基本形を知りましょう♪

“`javascript
if(条件){
　条件が真なら実行
}
“`
ifとは日本語で　もし　という訳をされます。
***”もし条件が正しければ実行する”***という感じの認識でいていただければOKです。

では試しに、***もしheightが180なら、身長は180ｃｍです***という文章が出力されるコードを書いてみます。

“`javascript
const height = 180;

if (height == 180){
console.log(‘身長は’+ height + ‘cmです。’);
}
“`
これで、コンソール上には、身長は180cmです。と出力されると思います。
楽勝ですね！
## ? 【余談というか補足】

ちょっと話はそれますが、***上記はあまり推奨されない記入例となっています。***
どの部分かわかりますか？
正解は***条件の部分***にあります。
==　←この部分ですね。解説していきます。

“`javascript
const height = 1

Glitchを使って24時間動き続けるDiscordBotを作る

[前回の記事](https://qiita.com/ronge/items/6d4204a7d70847d0c21f)でBotをローカルで作成、起動する方法を紹介しましたが、あの方法だとパソコンを常に起動しておかないとBotがオフラインになってしまします。
なので今回はGlitchというサイトを使ってBotを起動し、常時起動にする方法を書いていきます。

必要なもの
–
– BotのTOKEN
– Glitchのアカウント
– uptimerobotのアカウント

Botのトークンに関しては、前回の記事の[TOKENの取得](https://qiita.com/ronge/items/6d4204a7d70847d0c21f#token%E3%81%AE%E5%8F%96%E5%BE%97)を見てください。

Glitch
—
https://glitch.com/
へ飛び、右上にある`Sign in`を押してください。
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636708/32

[javascript]困ったときに使う技術的検索サービスとか公式ドキュメント(メモ)

## 検索サービスや公式ドキュメントを探すのが面倒なのでまとめてみた
私のデスクトップは結構キレイに整頓されているのですがどうしても色んなアプリやらゲームやらで埋められてしまいリンクがどっか行ってしまうのでまとめてみました。

## 一覧

– [Google検索(JP)](https://www.google.com/)
– [Google検索(EN)](https://www.google.com/webhp?gl=us&hl=en&gws_rd=cr&pws=0/)
– [Qiita(ここ)](https://qiita.com/)
– [Stack Overflow](https://stackoverflow.com/)
– [Amazon Kindle](https://www.amazon.co.jp/Kindle-%E3%82%AD%E3%83%B3%E3%83%89%E3%83%AB-%E9%9B%BB%E5%AD%90%E6%9B%B8%E7%B1%8D/b?ie=UTF8&node=2275256051/)
– [BOOTH(技術書)](https://booth

【JavaScript】ダイアログの表示いろいろ

##`alert( )を使う`##

“`javascript

alert(‘hello!’);
“`

– 計算式を表示する

“`javascript
//alert()の引数に「計算式」を指定すると計算結果が表示される
alert(100 + 200);
“`

– 変数を表示する

“`javascript
//現在の日時を取

react-navigationのページ遷移先でパラメーターを取得できない問題

#サマリー

FW

React Native

パッケージ

react-navigation v5

問題

ページ遷移先にパラメーターを渡しているのに、遷移先のページでパラメーターを取得しようとするとエラーがおきる

原因

react-navigationのバージョンによってパラメーターの取得方法が異なり、使用しているバージョンとは違うやり方をしていたこと。

ネットだとバージョン４系に対応した書き方が沢山出てくるかと思いますが、最新は5系になりますので書き方が違います。
もし、”undefined”だったり、”…is not a function”みたいなエラーが出ていたら、バージョンにあった書き方をしているかどうか確認してみてください！
以下より詳細に解説していきます。
#コード
##問題のコード
パラメーターの取得方法がネットでは２種類のやり方がありまし

【JavaScript】日付の操作いろいろ

##`日時を取得`##

“`javascript
//現在日時を取得
const d = new Date();

//西暦を取得
d.getFullYear(); //2020

//現在の月を取得(0から始まるので注意。１月は0になる)
d.getMonth(); //5

//現在の日を取得
d.getDate(); //13

//現在の曜日を取得
d.getDay();

//時間を取得
d.getHours(); //0~23

//分を取得
d.getMinutes(); //0~59

//秒を取得
d.getSeconds(); //0~59

//現在の日時を取得して何月何日と表示
const d = new Date();
//getMonth()は0から始まるので+1する
console.log(`${d.getMonth() + 1}月 ${d.getDate()}日`)
// 実行結果
// 5月13日
“`

##`特定の日時を扱う`##
“`javascript
//引数に年月日などを渡す。年と月は必須

MacでDeno v1のインストールとHello World

今朝起きたら全Web開発者が待っていたDeno v1がリリースされていたので、Macでインストールしたログを残します。

# Homebrewでインストールしてみる

Homebrewだとまだ0.42がインストールされるようですね。

“`bash
$ brew install deno
…省略
$ deno –version
deno 0.42.0
v8 8.2.308
typescript 3.8.3
“`

# install.shで

公式にも乗ってるインストールのスクリプト叩いてみる

“`bash
$ curl -fsSL https://deno.land/x/install/install.sh | sh

Archive: /Users/shin/.deno/bin/deno.zip
inflating: deno
Deno was installed successfully to /Users/shin/.deno/bin/deno
Manually add the directory to your $HOME/.bash_profile (o

いつも忘れる ApplePencil対応

# Apple pencilなんで仕事してくれへんの
selectやinputをApple pencilで突きすぎてペン先が磨耗した人向け

# 動け！（切望)
“`
const elm = document.getElementById(‘idDayo’)
elm.addEventListener(‘touchstart’, function(){
elm.focus();
elm.select();
})
“`
cssにcusrosr:pointer;をつけると良いなど、探すといろいろな方法があるがどれも期待した動作をしない。。。
メンテナンス性は悪いけど、期待する動作はしてくれたのでおけまる

# クラスで使用する場合
“`
class NanikaClass{
constructor() {
this.elm = document.getElementById(‘idDayo’)
this.elm.addEventListener(‘touchstart’, function() {
this.elem.focus();

Deno v1.0.0 がリリースされたということでマニュアルページを翻訳ッ?

[Deno v1.0.0 がリリースされた](https://deno.land/v1) ということで、Deno Manual のページを翻訳してみました。
Qiita に翻訳記事を掲載するのは適さないのかもしれませんが、日本では一番エンジニアにリーチしそうに思いましたので Qiita に投稿させて頂きました。

ベースにしたバージョンとコミットは以下のものになります。v1.0.0 のものではないですが、ご了承くださいｍｍ

* version: v1.0.0-rc1
* commit: https://gith

[JavaScript]プロトタイプチェーンでprivateを実現する

# はじめに
接頭部に#をつけることでprivateとする構文は対応ブラウザが少なく、別の方法を使用する必要がありました。

クロージャを利用したprivate実現方法は、可読性が低く、コンストラクタにメンバを全て定義する関係上、パフォーマンスが低下する問題がありました。

そこで、プロトタイプチェーンで実装し、クロージャによる実装の問題をクリアしようと考えました。

# 実装
## コード
“` JavaScript
// IE以外のブラウザ対応

// Object.getOwnPropertySymbols() を消せば hard private
// Object.getOwnPropertySymbols() を残せば soft private を実現できる
delete Object.getOwnPropertySymbols

// class Example
let Example
;{
const _ = Symbol(“private”)

// constructor
Example = function(pub, pri) {
this.p

25+ CSSドロップダウンメニュー

#CSS Perspective Text Hover

See the Pen
CSS Perspective Text Hover by James Bosworth (画像自動判別で、あなたに最適なカメラマンを探してくれるサイトを作りたかった。(Azure)

今回やったこと
—
・Custom Vision を使用したwebサイトの作成
・Azure App Services へのデプロイ

成功したこと
—
・Azure App Services へのデプロイ

背景
—
僕はカメラマンをしています。最近、僕と、もう2人のカメラマンの3人チームで活動することが増えてきました。それぞれ撮影するジャンルが違うのですが、例えば、クライアントから僕たち３人に向けて撮影の依頼をした時、３人の中で誰が一番クライアントが希望する写真を撮れるのか、クライアント側で事前にわかるといいなというアイデアがありました。
そんな時、Azure の Custom Vision という、”独自の画像分類器を構築、デプロイ、改良できるようにする認識サービス”を知りました。これを使えば、クライアントが希望する写真の雰囲気に近い画像をアップロードすると、独自に構築した画像分類システムが、僕たち３人の中で誰が最もクライアントのイメージする写真に、近い写真を撮ってきたのかが分かるのでは？と思いサイトの作成に至りました。

結果
—
散々時間を浪費しましたが、Azure

Next.jsをGitHub Pagesにデプロイしたらリンクが壊れた

# 背景

[新しくなった Next.js のチュートリアル](https://qiita.com/thesugar/items/01896c1faa8241e6b1bc) を完走し、せっかくだからと GitHub Pages にデプロイしてみたところ、ハイパーリンクや画像が正しく参照されなかった。

一般ユーザーの GitHub Pages の URL は `https://USER_NAME.github.io/PROJECT_NAME/` の形式だが、 Next.js は原則としてルートからの絶対パスでリンクするため、例えばチュートリアルで作成するブログサイトにおける 1 つ目の記事は `https://USER_NAME.github.io/posts/ssg-ssr` にリンクされてしまう。

# 注記
本記事は [Next.js のチュートリアルのコード](https://github.com/zeit/next-learn-starter/tree/master/demo)を前提としているが、筆者の趣味で **TypeScript に置き換えられている**ので注意。Jav

Azure画像認識系の機能をいくつか試してみた（Face API / Custom Vision API / Computer Vision API）

私自身初めてMicrosoftのAzureを使ってみました。
ここでは、Azureを使う為にやることと、Face API / Custom Vision API / Computer Vision API の使い方や応用サンプルをまとめます。

# 1.Microsoft Azureを使ってみる
初めて使う人のための手順を簡単にメモ。
## 1-1.outlook アドレスを取得する
持ってない場合は下記を参考にアドレスを取得する。
https://qiita.com/TomoyoH/items/fca3f49729d82d9884eb

## 1-2.Microsoft Learnページにサインインする
下記ページにサインインする。
https://docs.microsoft.com/ja-jp/learn/

## 1-3.Azureアカウントを作成する
下記ページを参考にAzureアカウントを作成する。
https://docs.microsoft.com/ja-jp/learn/modules/create-an-azure-account/3-exercise-creat

electron-react-boilerplateのpackage.jsonを理解する

electronのボイラープレートの中でもシェアが高く使い勝手の良いelectron-react-boilerplate
https://github.com/electron-react-boilerplate/electron-react-boilerplate

typescriptビルド環境からreact/redux react-routerなどのライブラリ群も入っていて尚且つテストツールやpre-commitまで入って至れり尽くせり。
そのまま使えばリッチな環境で開発が行えるが故に、定義ファイル群を理解せずに使いがち
あれこれディレクトリ構成を変えてるうちに動かなくなった なんてことにならないように一つ一つ読んで理解していこうと思う。

この記事ではpackage.jsonに書かれている定義から読み解いていく。

# この記事で書かないこと
「electron-react-boilerplateの」package.jsonの機能的な部分だけに触れていくので以下のようなpackage.json自身のフィールドには触れない
repository, author contribu

【備忘録】 ObjectのKeyを取得して、keyとObjectの中の要素を取得する

何度か直面したときの調べたので残しておく。

“`
const hoges = {
names: [
{ id: 1, name: ‘taro’ },
{ id: 2, name: ‘hanako’ }
],
place: [
{ id: 1, val: ‘tokyo’ },
{ id: 2, val: ‘kanagawa’ }
]
}
“`
keyがnamesのものを取り出したい。

“`
const names = Object.entries(hoges).find(hoge => hoge[0] === ‘names’)
“`

####出力結果

“`
console.log(names)
//→ [‘names’, [{ id: 1, name: ‘taro’ },{ id: 2, name: ‘hanako’ }]]

console.log(names[1])
//→ [{ id: 1, name: ‘taro’ },{ id: 2, name: ‘hanako’ }]
“`

新しく作成した.jsファイルが読み込まれない

#新しく作成した.jsファイルが読み込まれない
jQueryで追加機能を新しいファイルに書き込み実装したところ、うまく起動しなかった。
つまり読み込まれていないという状況であった。
その時の解決方法を備忘録的に記入する。

##状況

新たに「searches.js」を加えたがうまく実装しない。

##結論
「application.js」に
`//= require_tree .`
を追記するだけ

##軽く説

OutSystemsでJavaScriptからScreen Actionを起動する(Traditional Web)

ブラウザ内で動作するJavaScriptの処理を起点として、Screen Actionを動作させてみます。
（Traditional Webの場合）

# FakeNotify Widgetを使う方法
1. RichWidgetsモジュールのFakeNotify Widgetを参照に追加
2. 画面にFakeNotify Widgetを配置し、Nameを設定する
3. Javascript処理中の、Screen Actionを呼び出したい部分で、「”OsNotifyWidget(‘\‘, \<パラメーター\>)”」を実行
4. FakeNotify WidgetのOn Notifyに設定したScreen Actionが起動する

Forgeで利用しているモジュールがありましたのでこれを参考に実装方法を確認します。
[Tabs With Fake Notify Widget](https://www.outsystems.com/forge/component-overview/3557/tabs-with-fake-notify-widge