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

重みつきランダム選択アルゴリズムの実装[JavaScript]

## 今回やりたいこと

トランプの神経衰弱ゲームをJavaScriptで実装しました。

[ゲームデモ画面](https://github.com/OnoYuta/app-memory-game)

カードをランダムに選択するときに重みづけの方法を考えました。私が調べた限りでは、JavaScriptにそういった関数は用意されていないようでしたので、重みづけの参考になればと思っています。

プログラミング初心者なので、気になる点などありましたらご指摘いただけると非常にありがたいです。

### NPCの仕様

対戦相手（以下、NPC）は、次のような仕様を設定しました。

1. ゲーム開始時はカードの配置と数字を知らない
2. 表になったカードの配置と数字を記憶する
3. 記憶できるカードの枚数には上限（以下、記憶容量）がある
4. 記憶容量を超

async awaitやPromiseはなぜ必要なのか？

# 非同期処理というものが必要な理由

Apache Http Serverは接続ごとにプロセスを生成するような仕組みです。このため、接続してくるクライアントがものすごく多くなると、メモリ領域を圧迫したり、レスポンス性能が壊滅的に低くなります。

この問題は、C10K問題（Client 10,000）と呼ばれ、これを解決するには、小さいリソースで多数のクライアントに対応できる仕組みが必要でした。

その具体的な解決策として出てきたのが、NginxやNode.jsです。今回はJavaScriptにおける`async await`に着目しますので、Node.jsについて焦点を当てます。

Node.jsでは、多数の処理要求をシングルスレッドで（少ないリソースで）高速に捌けるよう、ノンブロッキングIOを実現するアーキテクチャが採用されています。このあたりの詳しい説明は[「Node.jsでのイベントループの仕組みとタイマーについて」](https://blog.hiroppy.me/entry/nodejs-event-loop)で学びましょう。

要求を捌いてくれるスレッドは１つだけなわけで

JavaScriptの初心者が学ぶ②~繰り返し~

##概要
JavaScriptの文法を自分で忘れないためにメモの代わりとして投稿しています。

###while
「while」は繰り返す回数が最初から決まっている場合に使用します。
１～１００まで表示したい場合は

“`javascript:while.js
let number=1;
while(number<=100){ console.log(number); number+=1; } ``` >1
2
3
︙
99
100

###for
「for」は「while」と違い繰り返す回数が最初から決まっていない場合に使用します。
数字を３ずつ足していって１００以下で最大の数字まで表示したい場合は

“`javascript:for.js
let number=0;
for(let i=0;number<100;i++){ console.log(number); number+=3; } ``` >0
3
6
9
︙
96
99

##最後に
まだまだ勉強中で未熟ですので、間違いなどありましたら教えていただけるとありがたいです。

脱出ゲーム#2　アイテムスロット

##脱出ゲームのアイテムスロットを作ってみました。
アイテムをクリック→かばんにアイテムが入る→アイテムが消える流れを作りました。
（2020/04/15追記　試作のため、粗削り。）

“`nazotoki.html

{{bag}}

---

ボール

Google Analyticsが正しく設定されているかを調べる方法

Google Analyticsを設定していてよくあるミスとして次のようなものがあります

– 設置したつもりが、データが入ってこない
– 実は狙った値が計測されていなかった
– 二重でページビューが発生した

こういう時に、わざわざGoogle Analyticsを見なくても正しくGAに値が入ったかを調べる方法を以下に伝授します

## ChromeのデベロッパーツールのNetworkに全てがある

#### STEP.1 Chromeのデベロッパーツールを画像を参考に開いてください。

#### STEP.2 デベロッパーツールの中からNetworkを選んでください
![スクリーンショット 2020-04-14 23.29.03.png](https://qiita-image-store.s3

HTML / CSS から Nuxt.js で webアプリを開発するまでのロードマップ

#はじめに
この記事では、HTML / CSS から学び、Nuxt.js で webアプリを開発するまでの過程を紹介します。

本記事は、以下のような方が対象です。同じ初学者を意識しています。

1. web開発に興味がある。
1. HTML / CSS を学んだが、そこからどうすれば良いか謎。不可思議。
1. フレームワークとは何ぞや。フレームワークのフレームワーク？
1. どこまでやれば、どういうものができるのか具体的に知りたい。
1. とりあえず、web開発に興味はあるよ。

その道の方でも、「趣味で学ぼうとする人は、こういう学び方をしているんだな」と参考になるかもしれません。

筆者である[うたかた](https://qiita.com/utakata2u)は、web開発を始めて早２ヶ月ですが、わからないことでいっぱいです。基本的に表面的な理解に終始しています。ただ「初学者でも、今あるものを使うと、こういうものができるよ」という具体例とその学習過程を紹介することで、何か少しでもお役に立てたらと思います。Qiita も利用し始めたばかりなので、何かありましたら色々とご指摘いただけ

謎解き用メモ＃１　パスワード

##脱出ゲームの謎解きでよくある、3つの数字を入れると進めるやつ

“`nazotoki.html

ボタン
{{message}}

“`
“`vue.js

生JavaScriptでFizzBuzz問題とナベアツ問題を解く方法【jQuery未使用】

JavaScriptで分からないことを調べてもjQueryを使用した例ばかりしか出てこずに困った経験があったので、生のJavaScriptでナベアツ問題を解く方法についてまとめます。

## FizzBuzz問題
JavaScriptを使って1から100までの数字を順番にconsole.logで出力する。
ただしその数が3で割り切れるなら”Fizz“、5で割り切れるなら”Buzz“、両方で割り切れるなら”FizzBuzz”をそれぞれ数字の代わりに出力する。

### FizzBuzz問題の解答コード
“`javascript
function fizzbuzz() {
for (let i = 1; i <= 100; i++) { if(i % 3 === 0 && i % 5 === 0) { console.log("FizzBuzz"); } else if(i % 3 === 0) { console.log("Fizz"); } else if(i % 5 === 0)

ド素人がLINE botを公開してみた

プロトアウトスタジオという、プログラミングスクールではなく、プロトタイピングをアウトプットするというスクールに参加し始めた人の記事です。

授業にて、「heroku」というPaaSサービスにソースコードをのせて動かす体験をしました。
サーバとかOSとか、プログラムを動かすための環境づくりに必要な知識をすっ飛ばしていきなりサービスを無料で動かせる時代になっているのですね。

今回の宿題は「HerokuでNode.jsの仕組みをURLを公開しチャットボットを移植しアウトプットする」です。以前の宿題「LINEbot＋API」に挑戦した際のコードに少し手を加えて、「いぬ」とリクエストすると犬の画像をレスポンスするLINEbotをherokuに乗せて公開します。


“`js
‘use strict’;

const express = require(‘

元に戻せるほうのカリー化入門

# 想定読者

高階関数、カリー化、部分適用、クロージャ
などの言葉を目にするたび不安になってしまい
それぞれの意味を何度も調べてしまう人へ[^誰]。

カリー化の反対にあたる逆カリー化に焦点を当て、
もう忘れないように理解をまとめておきたい。

[^誰]: おもに自分のためであり、言うまでもないが、記述の正しさは保障できない。

# 高階関数

引数もしくは戻値が関数であるとき
その関数を[高階関数](https://ja.wikipedia.org/wiki/高階関数)と呼ぶらしい。

“`javascript:高階関数
const apply = f => x => f(x)
“`

関数 `apply` は１引数関数 `f` を引数に取って
関数 `x => f(x)` を返すので高階関数と言える。

関数の関数という構造は何となく神秘的で
特別な名前を付けたくなる気持ちは分かる。

しかし、本質的に重要なのは
数値などと同じように関数を扱えること[^first-class object]
なのではないかと個人的には思う。

[^first-class object]:

Webを使った新人研修　～SQL基礎編・SELECTクエリでデータ検索～

######[Webを使った新人研修　～SQL基礎編～](https://qiita.com/fujisystem/items/ed3236c0e73907cf3942)

#SELECTクエリでデータ検索

細かい説明をしていては果てしないので、「習うより慣れろ」の精神で
まずは、「実践」してみましょう。

##実践する

[Ideone](https://ideone.com/l/sqlite)をブラウザで開いてみましょう。

右下の緑色ボタン「Run」を押してみましょう。

“`sql
create table tbl(str varchar(20));
insert into tbl values(‘Hello world!’);
select * from tbl;
“`

[これ](https://ideone.com/tnBMEM)をforkしてみても良いです。

##解説

例題を示して記憶の定着を図ってみます。

##例題
１．〜

“`sql
“`

～本日はここまで

画像ファイルのアップロード時に複数のプレビュー画像を表示する【Vue.js】

# ファイルアップロード時に複数の画像プレビューを表示する
題名の通りですが、今回は備忘録として、
画像アップロードを行う際に複数の画像プレビューを
Vue.jsを利用して表示する方法について書いていこうと思います。

## FileAPI
FIleAPIについては以下のドキュメントを参照してください。
https://developer.mozilla.org/ja/docs/Web/API/File

## 実装例

“`vue