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

以下のサイトのコードの完全版欲しいです

GASで作る社内ツール (キャンセル・報告編
https://qiita.com/nyanko-box/items/905d224d3ba8d3d00796

ソースコードそのままコピペしても、
キャンセル、報告ボタンが書かれておらず動きません。完全に動くソースコードが欲しいです。

当方、プログラミング初心者につき、最初は先人のマネから入って、
カスタマイズして、業務に応用させたく、どなたかお力添えはただけると幸いです。

ES2018で追加された機能について

# はじめに
[JavaScript: Everything From ES2016 to ES2019](https://inspiredwebdev.com/everything-from-es-2016-to-es-2019)のを読み、本稿はES2018で導入された機能についてわかったことを自分なりにまとめたものになります。

# レスト構文とスプレッド構文(Rest/Spread)をオブジェクトにも使用可能

ES2015では、配列にスプレッド構文を使用することができました。

“` JavaScript
const name = [“taro”, “ichiro”, “hanako”];
const spread_name = […name, “jiro”];

console.log(spread_name); //[“taro”, “ichiro”, “hanako”, “jiro”]
“`

**ES2018では、オブジェクトにもスプレッド演算子を使用できるようになりました。**

“` JavaScript
let sampleObj = {
a:

Kinx 実現技術 – VM（Virtual Machine）

# Virtual Machine

## はじめに

**「見た目は JavaScript、頭脳(中身)は Ruby、（安定感は AC/DC）」** でお届けしているスクリプト言語 [Kinx](https://github.com/Kray-G/kinx)。作ったものの紹介だけではなく実現のために使った技術を紹介していくのも貢献。その道の人には当たり前でも、そうでない人にも興味をもって貰えるかもしれない。

前回のテーマは [Switch-Case](https://qiita.com/Kray-G/items/dfeed33544b9687717bb)、今回のテーマは VM (Virtual Machine)。

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

コールバックと、ポリモーフィズムと、それからコルーチンを構造的に見る

この記事では、**コールバックはポリモーフィズムの特別な場合である**という見方もできること、その意味では**そんなに難しい話ではないこと**を説明します。
あと、関数呼び出しを視覚的にブロックみたいなもので表現すると、ポリモーフィズムやコルーチンを使ってどういう事をやっているのか何となくわかった気になれるので、そのような表現を試みます。
ちょっと見方に変化をつけることで、難しそうな概念が身近になるといいなというような試みです。

# コールバックのおさらいと、ご利益

“`javascript
const someFunction = (someCallable) => {
/* nagai syori */
const isContinued = confirm(‘nagai syori ga owatta yo! tudukeru?’)
someCallable(isContinued)
}

someFunction((isContinued) => {
if (isContinued) {
alert(‘Yeah!’)
} else {

JavaScriptのモジュールは変数をエクスポートする

今時のJavaScript開発において、JavaScriptが持つ**モジュール**の機能は欠かすことができません。我々はプログラムをいくつものファイル（モジュール）に分割し、`import`文と`export`文を使ってそれらを繋げています。各モジュールは`export`文を用いてそのモジュール内で定義した変数・関数などをエクスポートすることができ、別のモジュールが`import`文でそれらの値を取得することができるのです。

皆さんは、この`import`・`export`文がどのように働いているのか正確に説明できるでしょうか。実は、`import`文や`export`文というのは値をインポート・エクスポートしているのではなく、言わば**変数そのもの**をインポート・エクスポートしているのです。これを理解するのがこの記事のゴールです。

※ 本当は変数ではなく「バインディング」といったほうが用語としてより正確なのですが、この記事では分かりやすさのために変数という用語を使用しています。

## `export`文は変数をエクスポートする

モジュールから何かをエクスポートするときに使

2020年から始めるAzure Cosmos DB – JavaScript SDK (SQL API)を見てみる (Part.2)


# この記事について

本記事は、2020年3月6日 (米国時間) にて、Azure Cosmos DB に新しく Free Tier (無償利用枠) が登場したことに伴い、改めて Azure Cosmos DB を色々と触っていく試みの 4 回目です。
今回も、[前回記事][PrevLink1] 同様、 **Microsoft Azure Cosmos JavaScript SDK** について見ていきたいと思います。

– [2020年から始めるAzure Cosmos DB – JavaScript SDK (SQL API)を見てみる (Part.1)][PrevLink1]

# 対象読者

– Azure Cosmos DB について学習したい方
– Node.js で Azure Cosmos DB への CRUD 操作を行いたい方
– Microsoft Azure Cosmos JavaScript

Vue.jsによるバリデーションのサンプルを作ってみた

##Vue.jsを使うメリット

###導入のしやすさ
Vue.jsが流行っているのは段階的に導入を進めていきやすいからというのが挙げられると思います。また実装の規模によってCDNで導入したりnpmコマンドでVue CLIを入れてがっつりVueを使用して構築することも可能です。

###大量のイベントの記述を一掃できる
Vue.jsで実装を行うとjQueryで大量に記述するonclickなどのイベントの記述を一掃することができます。
HTMLに**$(.js-selector)**のようにクラスの先頭にjs-って付けてJSだけで使用されるクラスををたくさん記述する必要がなくなるのでHTMLの見通しも良くなります。またDOMの構造が変化してもプログラムが動かなくなることが基本的にありません。

##バリデーションのサンプルを実装した

js関数まとめ

# 関数

## 関数宣言文と関数リテラル式の違い

“`js
//関数宣言文
function func_name() { /* 処理 */ };
//関数リテラル式
var f = function func_name() { /* 処理 */ };
var f = function () { /* 処理 */ }; // 関数名func_nameは省略可。
“`
関数宣言文は巻き上げ（hoisting ホイスティング:varによる変数宣言と、functionによる関数宣言はスコープ内の一番先頭で”宣言”されたものと見なされる）が起こるため、宣言より前に呼び出してもエラーしない。

## 引数

関数内から実引数にアクセスするには`arguments`オブジェクトが使える。
`arguments.length`として実際に受け取った実引数の数を取得できる。
反対に関数自身の持つlengthプロパティを使うと仮引数の数を取得できる。

# スコープ

varにはブロックスコープが存在しない。letではこれがある。

“`js
if (var i = 0; i < 2; i++)

高階関数を書いたら、中級者になれた気がした。を批判したら上級者になれた気がした。を格下目線から批判してみた。

# はじめに
[高階関数を書いたら、中級者になれた気がした。](https://qiita.com/Yametaro/items/fe863978994861f36611)という記事を読んだのち、[高階関数を書いたら、中級者になれた気がした。を批判したら上級者になれた気がした。](https://qiita.com/elipmoc101/items/c34b38ddbbd9b52d0a4f)まで読んだところ、非常にもやもやする部分があったので批判をしてみる、という趣旨の記事になります。
非情に底辺（[某記事](https://qiita.com/Rwf-9DH3/items/fe65756c0485f095cc98)で言う格下目線）の内容になっていますので、こういう場所もあるんだというネタとしてお読みください。

# 結論
高階関数にする前のべた書きコードが要件を満たせて安全なほぼ最適解！

“`javascript
const setHeight = (element, toRed, width) => {
element.style.height = ‘100px’;

【Node】dotenvで環境変数を設定する

## 概要

– Nodeでプログラムを実行する時に環境(dev/stag/prodなど)ごとに値が異なる部分はコードを修正せずに実行するため環境変数として埋め込むことがよくあると思います
– セットする環境変数が1つ2つであればコマンド実行時に設定すればよいですが規模が大きくなってきたらファイルでまとめて定義したくなるでしょう
– そんな時は[dotenv](https://github.com/motdotla/dotenv)を使うと便利です
– dotenvを使うと`.env`ファイルに定義された値を環境変数として使うことができます
– また、システムの環境変数として値が設定されていればそちらを優先して使うということもできます
– なので、開発時はローカルで`.env`を配置し、本番ではホスティングサービスの機能で環境変数として設定するといった使い方をすることでリポジトリ内のファイルを変更せずに実行することができます

## Nodeスクリプトの実行時にdotenvを使う場合

– シンプルな形でいうと`index.js`があって`node index.j

vue cliのscroll behavior: アンカーリンクをつくる方法

こんにちは。備忘録です。

ページ内にたくさんの記事があるとします。1ページに表示されている記事数は5つ。ところが一番下にある「もっと読む」というボタンをクリックすると、新たに5記事が表示される。そんな動きをしたいとします。

ところがアンカーリンクを設定しなければ、「もっと読む」をクリックしたときにページのトップに連れて行かれてしまいます。UX的には、「もっと読む」をクリックしたときは、トップに飛ばされないまま、続く5つの記事が見たいです。

こんなとき、vue.jsではscroll behaviorという機能を使って、トップに連れて行かれないよう調整することができます。

（下に来る例が上にくる例と違うので紛らわしいのですが、、、）

### Step 1. RouterのJSファイルをいじる。

“`
const router = new Router({
mode: “history”,
scrollBehavior(to, from, savedPosition) { //ここでscrollを調整する。ここにはto, from, savedPositionの三つの引

ブロックチェーンでリモート承認してみる（２）

今回は申請者と承認者でタブを分けて実運用に近い形で検討してみます。
また、リスナーやフィルターを利用して自動承認なども実装してみましょう。

前回の記事をまだ読んでいない方は[こちら](https://qiita.com/nem_takanobu/items/78eb872a80db8c88f4ef)から先にお読みください。

[ブロックチェーンでリモート承認を導入してみる](https://qiita.com/nem_takanobu/items/78eb872a80db8c88f4ef)

### 事前準備（申請者、承認者両方で実行）

申請者をAlice、承認者をBobとします。
chromeブラウザで申請者タブと承認者タブの2つを開いてください。双方ともにF12キーあるいは fn+F12キーを押してデベロッパーツールを起動しておきます。

まずはライブラリの読み込みます。

“`js:alice,bob
(script = document.createElement(‘script’)).src = ‘https://s3-ap-northeast-1.amazonaw

初心者がElectron(NW.js)を始めてみて分かったことまとめ

#目次
1. [はじめに](#a1)
2. [個人的にHTA(WSH?)とNW.jsはオススメしません](#a2)
3. [electron開発の流れ](#a3)
1. [プロジェクトフォルダ（名前は何でもOK：ここではmoge）の準備](#a31)
2. [中身を編集する](#a32)
3. [moge/package.jsonを編集する](#a33)
4. [electronとelectron-builderのインストール](#a34)
5. [ビルド](#a35)
4. [electron-builderでビルドしようとすると`このシステムではスクリプトの実行が無効になっているため、～～～`というエラーが出るとき](#a4)
5. [1つのプロジェクトを再ビルドしたいとき](#a5)
6. [おわりに](#a6)

#はじめに

突然ですが、絵を描く用の画像資料が10GBを超えてしまいました

【学習記録】『スラスラ読める　JavaScriptふりがなプログラミング』読書感想　 ４章編 （前半）　〜N予備校の復習を添えて〜

【学習記録】『スラスラ読める　JavaScriptふりがなプログラミング』読書感想　 ３章編( https://qiita.com/Molly95554907/items/dc1654b7019442f893fa ) の続き

第四章　関数を作ろう

・アロー関数

オリジナルの関数を作成する。

let 関数名 = () => {
//関数として実行する処理
};

以上で作成完了。

関数名（）;

を実行すると、//関数として実行する処理　が実行される

・引数を受け取る関数

・引数とは：関数の中で処理される変数のこと、と理解してる。

let 関数名　= (引数となる変数) =>{
//関数として実行する処理
console.log(引数となる変数 +’です’);
};

以上で作成完了

引数となる変数に文字や数値を代入できる
関数名(‘山田’);
↓
山田です　　　　　

が出力される。

・function文で関数を作る

function 関数名(引数となる変数){
//関数として実行する処理

while文

#while文とは

ループ処理を行う場合に使用する構文の１つです。
特徴として、
ループ処理の回数の記述がないので、
無限ループにならないように、
必ずどこかで条件がfalseになるようにします。

#記述方法
下記をご覧下さい↓↓

“`js

while (条件式) {
繰り返す処理
}
“`

繰り返す条件(条件式)の結果がtrueの間{ }ブロック内の処理を繰り返します。

＋１を繰り返す記述例を見ていきましょう↓↓

“`js

1.var cnt = 1;
2.while ( cnt<50 ) { 3. document.write(cnt); 4. cnt = cnt + 1; } //1 2 3 ...47 48 49 ``` 処理順として、 1.変数cntに1が代入されます。 2.cntが50未満か比較します(条件式)。 3.cntの値がdocument.writeに、表示されます。 4.cntの値に1が加算されます 5.条件式の結果が50(false)になるまで2~4が繰り返されます。 6.条件式の結果が50(false)になると処理を終了し

ReactにおけるDIについて

## はじめに

以前、ReactでDIはどうやるのか社内で話題になったので、色々調べてまとめておきます

## Inversify

inversifyではDI用のコンテナーを作成できます

[公式](https://github.com/inversify/InversifyJS)

README通りですが、紹介します

packageをインストールします

“`
npm install inversify reflect-metadata –save
“`

デコレータや追加の型のために以下の項目を`tsconfig.json`に適宜追加します

`tsconfig.json`

“`ts
{
“compilerOptions”: {
“target”: “es5”,
“lib”: [“es6”],
“types”: [“reflect-metadata”],
“module”: “commonjs”,
“moduleResolution”: “node”,
“exp

【学習記録】『スラスラ読める　JavaScriptふりがなプログラミング』読書感想　 3章編 〜N予備校の復習を添えて〜

【学習記録】『スラスラ読める　JavaScriptふりがなプログラミング』読書感想　 １、２章編(https://qiita.com/Molly95554907/items/90194e1cd5631dc927aa) の続き

第三章 　　~繰り返し文~

・while文

・while文は回数が 決まっていない 繰り返しに向いている
・for文は回数が 決まっている 繰り返しに向いている

while( 継続条件式or関数 ){
繰り返す処理
};

継続条件式or関数がtrueである限り繰り返す。

・代入演算子で式を短縮

この短縮方法、感覚的に掴みづらいので早く慣れたい。

a=a+10 → a+=10
a=a-10 → a-=10
a=a*10 → a*=10
a=a/10 →a/=10

・for文

for( let i = 100; i >= 0; i– ){
console.log( i + ‘日後に死ぬワニ’ );
}

これはだいぶ

【自分用】Rust and WebAssembly を試す 【2020/03/23更新】

初投稿、勉強用メモ

# なぜこれを書くのか
Rust、WebAssemblyに興味があった
Webブラウザ上で高速に動作するアプリを作る方法が知りたい
学んだ内容を見返すためのメモ

# 進め方
[Rust ? and WebAssembly ?](https://rustwasm.github.io/docs/book/introduction.html)を適宜端折ってまとめていきます。
誤っている箇所などあればコメントを頂けると幸いです。
当方Rust, WebAssembly, javascriptすべて初心者です。

#何を学ぶか？ (Rust and WebAssemblyより抜粋)
* RustからWebAssemblyへコンパイルする際に使うツールのセットアップ
* Rust, WebAssembly, javascript, HTML, CSS等、多言語で構成されるプログラムを作る際におけるワークフロー
* Rust, WebAssembly, javascriptの強みを生かすためのAPIを設計する方法
* RustでコンパイルされたWebAssemblyをDebu

ブックマークレット(Bookmaeklet)の書き方

## ブックマークレットとは
### ブックマークとは別もの？
ブックマークはサイトのURLが記載されていて
ブックマークをクリックするとそのサイトを開くものです。
一方ブックマークレットはJavascriptによるプログラムが書かれていて
クリックすると現在開いているページでプログラムを実行します。
### 何が出来るの？
プログラムを実行することによって作業の自動化等が出来ます。
### どうやって作るの？
最初にブックマークを作成し内容をJavascriptに書き換えます。
この時に内容の先頭はjavascript:としコードは一行で書かなければなりません。

## ブックマークレットの書き方
ブックマークレットはjavascriptを一行で書かなければなりません。
以下にある要素を繰り返しクリックする通常のコードを示します。

“`javascript:通常のjavascript
const interval=1000;
const maxCount=100;
let count=0;

const ID=setInterval(()=>{
if(count < ma

インフィニティ、ページネーション、もっと見る．．． は、けっきょくどれ？

# インフィニティ、ページネーション、もっと見る．．． は、けっきょくどれ？

* Web UIにおいて頻出するリスト表現
* リストUI、フィードリスト などと呼ばれる
* 複数の情報ブロックが縦に、あるいは数カラムのグリッド構造などで羅列された、リスト状のUI
* Twitter、Facebook、Instagram ともに、メインUIにリスト構造が採用されている
* Google 検索結果もリスト構造
* リスト表現の多くは、対象情報の件数が多量になる場合がある
* 1回の表示件数を数十件以内に抑えて、UX や Webパフォーマンス を担保することが一般的
* 情報の続きを追加表示する手段を提供する必要がある
* 情報の続きを追加表示する手段の例
* インフィニティスクロール
* ページネーション
* 前後ボタン
* “もっと見る”ボタン
* 本考察においては表示デバイスをスマートフォンと仮定する
* 遷移やリクエストなどの各挙動ごとにURLは書き換えられ、SEO性は担保できていると仮定する

# 情報の続きを追加表示する手段

## インフィニティスク