常連

自己紹介

初心者です。続き番号の配列の要素を以下のように〜で繋げて表示させたいと考えてます。

```
[1,2,3,6,7,9,25,26,27,30] //元の配列
[1~3,6~7,9,25~27,30]      //これが欲しい。続き番号は~をつけてまとめて表示される。
```

### やってみたこと

下のように、続き番号になる部分を抽出する方法で、型を文字列にするのは後回しにしましたが、どうにかやってみました。

> 結果
> [[1,3],[6,7],9,[25,27],30]

ですが、私は知識に乏しく、より汎用性のある、特に関数を使った記述の仕方があると思います。
アドヴァイスなどいただけませんでしょうか。よろしくお願いいたします。

``` js
let a = [1,2,3,6,7,9,25,26,27,30]; //元の配列
let array = [];//新しく作る配列
let count = 0;
let start = 0, end = 0

for (var n = 0; n < a.length; n++) {
  switch(a[n] === a[n+1]-1) {
  case true:
   if(count === 0) {
   start = n
   }
   count++
   continue; 
  break
  case false:
   if(count === 0) {
   array.push(a[n])
   continue
   }
   end =　n
   count = 0
   array.push([a[start],a[end]])
  break
  }
}

console.log(array)
```

JavaScript 配列操作のより良い記述について

プログラムを作成したあとに、結合テストと単体テストをすると思うのですが　結構漏れが発生してしまっていてとんでもないミスにつながるなどのことがあります。
そこで、単体テストや結合テストの強化としてなにかいい方法はないか、漏れを軽減するにはどうしたらいいのかという状況になっております。

今まで、結合テストだけしかしておらず（それはそれで問題）単体テストは初めて作成していくことになりました。

どうすれば、いい単体テストができるようになるのでしょうか？
単体テストや結合テストで漏れを軽減する方法がある。
こうすればバグが見つけやすくなるなどありましたらご教授お願い致します。

単体テストは、初めてとなりますので全く分からない状態です。
調べているもののテンプレートはたくさんあるし、共通点的なものが見当たりません。。。

Web系のテストとなります。

テスト漏れを軽減するには

Twitterでフォローしている技術者の方が、
フレームワークAはこれから勉強するのにオススメ(案件が増えてる)、
フレームワークBは使われなくなってきているのでやめといた方がいい
とツイートしているのを見ました。
また、○○とか△△というこれから徐々に使用されなくなる言語は～というふうに


**言語の流行り廃り**を語っている方がいるのですが、そういうことは**どこで知る**ものなんでしょうか。
疑問に思ったので質問させていただきました。よろしくお願いします

言語やフレームワークの流行り廃りをどこで知る?

### 前提・実現したいこと

カタンの開拓者たちのように6角形のマス状の盤面を持つゲームはよくあると思います。
このような6角形のマス状の座標系、この質問では6角座標系としますが、このような座標系はどのようなデータ構造で表現するのでしょうか？

6角座標系を持つゲーム盤面のデータ構造について

お世話になります。
現在、SPA開発の為に、HTML5/CSS3を勉強しているものです。

勉強中にcustom elementについて知ったのですが、開発では積極的に活用されていない印象を受けたので質問させていただきました。
現在の開発では利用していないのですが、custom elementを導入すると保守性等の品質は向上するのでしょうか

活用されているサービス例等を示しながら、有用性について教えていただきたいです。
今後の開発で有効なら積極的に開発に利用したいと考えています。

回答よろしくお願いいたします。

HTMLのcustom elementは開発で利用すると品質が向上するのか

### 前提・発生している事象

a,b,cの3カラムがある、500万行ほどのtableがあります。
a-bに対して複合PRIMARY KEYを設定しています。a,b,cは全てvarcharです。

下記のようなSQLを実行し、explainを確認します。
```
select * from tbl where (a,b) in (('*', '*'))
select * from tbl where (a,b) in (('*', '*'),('*', '*'),...)
```

in句の中が1つの場合、explainのtypeは「const」となりました。
2つ〜350こ程度までの場合、typeは「range」となりました。
351以上の場合、typeは「all」となりました。

force index (PRIMARY)を付けてみましたが、状況は変わりませんでした。

### 質問

・なぜin句の中が多くなるとフルスキャンになってしまうのでしょうか
・上記SQLを高速化するにはどうしたら良いですか（in句の中身は2000個程度までを想定しております）

以上、よろしくお願い致します。

### 補足情報（FW/ツールのバージョンなど）

MySQL 5.7.14


###追記(3/27 23:24)
みなさまご回答ありがとうございます。
一度テンポラリテーブルを作成して、joinすることで0.003sec程度で結果が返ってきました。
しかしながらPKのみで、join または inすることは、両者ともあまり変わらないような気もしますが、内部的に処理が大きく異なるのでしょうか。
なぜin句だとフルスキャンになってしまうのか、引き続き回答お待ちしております。

MySQLでin句の中身が多くなるとフルスキャンになってしまう

### 前提・実現したいこと
何度か質問させて頂いてますが、大変ありがたく感謝申し上げます。

今回はphp,mysql でログインページを実装する場合について一般的なやり方を教えていただけると幸いです。

Deamweaverを使って書かれたPHPのログインページがあり、コードを修正しているのですが、
MysqlでユーザーIDとパスワードを紹介する方法が私が想像していたものと違っていました。

ログインの際、入力されたユーザーIDでMysqlのユーザーリストから絞り込み、帰ってきたPasswordの結果を入力したPasswordと比べ、一致したらTrue、というやり方が一般的だと思っていました。

```ここに言語名を入力
SELECT id, password FROM ユーザーテーブル WHERE id=ユーザーID;　

```

今あるコードを読むと、

```ここに言語名を入力
SELECT id, password FROM ユーザーテーブル WHERE id=ユーザーID AND password=パスワード

```
となっており、何かしらの返り値があれば（ここではmysqli_num_rowsが使われていました）Trueという判定を
していました。


一般的にどちらが推奨されるやり方でしょうか。両方使えるのであればメリット・デメリットも教えていただけると
大変助かります。

### 補足情報
ここでは省略いたしますが、エスケープ等は一応されており、私が普段つかう前者のやり方ではパスワードを暗号化して照合しています。
まだ勉強中のため、言い回しや質問の仕方がおかしいかもしれませんがご容赦ください。
宜しくお願い致します。

ログインページの作り方

### 前提・実現したいこと

virtualbox+vagrantの仮想開発環境をmacで構築したいです。

このページ(https://qiita.com/yasshcy/items/8079c0cf4a96e461863b)
を参考にして作っていましたが、エラーメッセージが出てしまい
どうしたらいいのかわからないので教えてください。
### 発生している問題・エラーメッセージ

```
The following SSH command responded with a non-zero exit status.
Vagrant assumes that this means the command failed!

 setup

Stdout from the command:



Stderr from the command:

bash: Zeile 4: setup: Kommando nicht gefunden.
```

### 該当のソースコード

```ここに言語名を入力
ソースコード
```

### 試したこと

ここに問題に対して試したことを記載してください。

### 補足情報（FW/ツールのバージョンなど）
vagrant のバージョンは、2.0.2
VirtualBoxのバージョンは5.2.8
MacOS 10.13
です。

ここにより詳細な情報を記載してください。

Vagrantでの仮想環境構築でのerror mesageの対処

.htaccess って、速度低下にも繋がるみたいですし、httpd.conf に全て書いてしまおうと思っています(mod_rewtiteなど)
.htaccess の大本は httpd.conf ですから、何も不都合なことは起こりませんよね？
それとも、httpd.conf が使えても、.htaccess にわざわざ設定を書き込む必要性というのは別にあるのでしょうか？
httpd.conf が編集できない共用サーバぐらいしか、使い道思いつかないのですが…

httpd.conf が編集可能な環境であれば、.htaccess は必要ありませんか？

### 前提・実現したいこと

JSにおける${}の使い方について

ただ今コードアカデミーでJSを勉強中なのですが、
いきなり${}という記述が出てきて理解できずにいます
検索してみるとJavaDocとか色々出てくるのですが、
また今まで触れたソースコードでこの書き方は結構みるので
自分でも書けるようになりたいのですが、どうやって、どこに、定義すれば良いのでしょうか？
また、この仕様がJSDocで合っているのか、それともなんという名称なのか
お教えください。どうぞ宜しくお願い致します。

追記＠記述ミスを直しました。

### 発生している問題・エラーメッセージ

```
The temperature is ${fahrenheit} degrees fahrenheit 
```

### 該当のソースコード

```JavaScript
const kelvin = 294;
const celsius = kelvin - 273;
let fahrenheit = celsius * (9/5) + 32;
fahrenheit = Math.floor(fahrenheit);

console.log('The temperature is ${fahrenheit} degrees fahrenheit');
```

### 試したこと

ネットで検索するもよく分からず。。

JavaScriptにおける${}の使い方について

```js
let { chapter, section, exercise } = this.findByExerciseId(
      course,
      exerciseId
    );
```

上記コード、letの後の{}はどのような役割ですか？？
変数をいくつか宣言するのにはカンマだけでいいという認識なのですが

javascript 変数宣言の表記がわからない

お世話になります。
前置きが長くなり申し訳ないのですが、プログラムとは縁遠い仕事ながら、いくつかのホームページを作るようになったのがきっかけで、仕事の合間に

・昨年はPHP（＋簡単なJava）でタブレットに手書きしてサインをPDFで保存したり、アンケート結果をグラフ表示したり、必要な機能をGoogleで検索しまくったり、こちらで教えていただいたりしながら四苦八苦しながら作りました。

・我流すぎるのと、セキュリティの怖さも教えていただきましたので、CAKEPHPに大変な興味があったのですが、最終的に昨年末からRuby（Ruby on Rails）を勉強するようになりました。Ruby on Railsでは、ただ情報を入力してCSVで出力する程度のものを作りました。
Ruby on Railsの際は、いきなり作るより基礎が大事と思い、勉強には２ヵ月くらいかけましたが、作り始めてからは数日でできたので、フレームワークのおかげなのか記述する量が少なくびっくりしました。

この過程でPHPは多数のサーバーが対応しているので、現存のホームページの中に組み込んだりできるPHPは便利そう、たくさん作ってもサーバー代が安そうと思う反面、Ruby on Railsの早さが捨てきれません。どちらも初心者であるのですが、機械学習やAIという言葉をよく聞くので、Pythonも非常に気になっています。

あまりにもぐるぐると興味がうつる、または逃げているのかもしれませんが、いっそ精神衛生的に３つとも学習を進めていってはと思っています。
teratailの回答者の方を見ていると、多岐にわたって知識が豊富な方が多いように思えますが、１日２〜３時間を学習に当てれるとして、３つを交互に習得していくのはバカげているでしょうか？

何かを突き詰めた後に別の言語と、年単位で普通は変えていくものでしょうか？
また、プログラム初心者が、機械学習などに興味を持っても意味が無いものでしょうか？

将来的には、WEBアプリが上手に作れるようになったり、パソコン上でボタンを押せば人間が行っている事務作業をプログラムが行ってくれるというようなことができないものかと思っています。

広範囲なご意見をいただければと思います。よろしくお願い致します。

プログラミング言語を複数同時に勉強するのは

```
const CALL_API = "Call API"
const USER_REQUEST = "USER_REQUEST"

const fetchUser = login => ({
  [CALL_API]: {
    types: [ USER_REQUEST ]
  }
})
```

[CALL_API]の部分が、オブジェクトのプロパティに配列がセットされている？ような記述なのですがこれはどのような意味なのでしょうか？

javascriptのこの構文の意味を教えてください

Javascript ES6で複数のjsファイルで変数やクラスを定義し、webpackでES5に変換して1つのjsファイルに結合した場合ですが、htmlのscriptタグでその変数やクラスを呼び出す（使う）方法が見つからず、困っています。。
少なくとも、<script src="～" />でインポートしてもグローバル変数（window）には見当たりませんでした。また、modules、exportsのような変数も作られていませんでした。

ES6 + Webpack の実装例を調べてみても、Reactのようにそれ単体で動作する（外部から変数やクラス、メソッドを個別に呼び出して実行するタイプでない）ものばかりで、そのため、基本的にhtmlではjsファイルをインポートするのみで、変数やクラスをscriptタグで呼び出している例が全く見つかりませんでした。

Webpackで結合した場合、各jsファイルで定義した変数やクラスはグローバル変数に出力されず、htmlのscriptタグ等（外部）で呼び出すことはできないのでしょうか。

どなたか、少しでも情報がございましたら、ご回答いただけると大変助かります。
何卒、よろしくお願いいたします。

----

src/TestUtils.js
```js
export default class TestUtils {

}
```

src/Test.js
```js
import ImageUtils from 'TestUtils'

export default class Test {

}
```

gulpfile.js（一部）
```js
const gulp = require('gulp'),
      gulp_webpack = require('gulp-webpack');

gulp.task("js", () => {
  return gulp.src('src/**/*.js')
    .pipe(gulp_webpack({
      watch: true,
      output: { filename: 'test.js' },
      module: {
        loaders: [
          {
            test: /.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: { presets: ['es2015'] }
          }
        ]
      }
    }))
    .pipe(gulp.dest(''));
});
```

index.html
```html
<script src="test.js"></script>
<script>
  // <![CDATA[
    new Test();
  // ]]>
</script>
```

### 期待する動作

上記で、index.htmlからTestクラスを呼び出せること

htmlのscriptタグで、Javascript ES6 + Webpack でコンパイル＆結合したJSファイルの変数・クラスを呼び出す方法が分からない

javascript、css、htmlでスロットゲームを制作しています。
このゲームは実際のスロットのように内部抽選の結果によって3つのリールの停止絵柄を決めるシステムです。

まず、関数winLotteryで65536以内の乱数を生成し配列configTableを参照して、乱数がconfigTableで決められた6ついずれかの範囲内に入っていれば当たり、
関数wIcArrayRewriteで配列iconArrayをチェック、配列winIconArrayの当たった絵柄部分の数値を「1」に書き換えます。
ストップボタンを押した際に、リールの位置からwinIconArrayの数値を参照し、1であればその絵柄に止まるという仕組みです。

今回はこれに以下の機能を追加したいと思っています。
・リールを4コマ滑らせてから止める
現在のコードでは画面内に当たった絵柄が表示されるまで止まりませんが、実際のスロットではボタンを押した瞬間の位置から4コマ(4つの絵柄)以内に滑らせてから停止させているようですので、
ボタンを押した瞬間の位置から4つの絵柄の内に当たった絵柄がない場合、強制的に停止させるようにしたいです。
~~・停止位置を横三つ斜め二つに対応させる~~
~~現在、当たり絵柄の停止位置は中央の横3つにしか対応していませんが、上下横・左右斜め3つにも対応させたいです。~~

上手く説明できていない部分がありましたら申し訳ございません。どうかご教授よろしくお願いいたします。
【ソースコード】※質問内容と関係のない部分は省いています
```css
#slotmachinebox {
	position: absolute;
	top:50%;
	left:50%;
	display: block;
	width: 460px;
	height: 390px;
	margin:0px auto;
	padding: 0;
	background-image: url(img/slotmainbg.png);
}

#slotmachinebox #reelbox {
	position: absolute;
	top: 64px;
	left: 30px;
	display: block;
	overflow: hidden;
	width: 430px;
	height: 194px;
	margin: 0;
	padding: 0;
}

#slotmachinebox #reelbox .reel {
	position: absolute;
	z-index: 1;
	display: block;
	overflow: hidden;
	width: 120px;
	height: 180px;
	margin-top: 5px;
	margin-left: 15px;
	padding: 0;
}

#slotmachinebox #reelbox .reel0{
	top: 0px;
	left: 10px;
}

#slotmachinebox #reelbox .reel1{
	top: 0px;
	left: 137px;
}

#slotmachinebox #reelbox .reel2{
	top: 0px;
	left: 274px;
}

#slotmachinebox #reelbox .wrapper{
	list-style:none outside;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 120px;
	margin: 0;
	padding: 0;
}
#slotmachinebox #reelbox .wrapper .icon0,
#slotmachinebox #reelbox .wrapper .icon1,
#slotmachinebox #reelbox .wrapper .icon2,
#slotmachinebox #reelbox .wrapper .icon3,
#slotmachinebox #reelbox .wrapper .icon4,
#slotmachinebox #reelbox .wrapper .icon5,
#slotmachinebox #reelbox .wrapper .icon6,
#slotmachinebox #reelbox .wrapper .icon7,
#slotmachinebox #reelbox .wrapper .icon8,
#slotmachinebox #reelbox .wrapper .icon9,
#slotmachinebox #reelbox .wrapper .icon10,
#slotmachinebox #reelbox .wrapper .icon11,
#slotmachinebox #reelbox .wrapper .icon12,
#slotmachinebox #reelbox .wrapper .icon13,
#slotmachinebox #reelbox .wrapper .icon14 {
	display: block;
	width: 120px;
	height: 60px;
	margin: 0;
	padding: 0;
	//text-indent: -10000px;
	background-image: url(img/sloticons.png);
}

#slotmachinebox #reelbox .wrapper .icon0{
	background-position: 0 0px;
}

#slotmachinebox #reelbox .wrapper .icon1{
	background-position: 0 -60px;
}

#slotmachinebox #reelbox .wrapper .icon2{
	background-position: 0 -120px;
}

#slotmachinebox #reelbox .wrapper .icon3{
	background-position: 0 -180px;
}

#slotmachinebox #reelbox .wrapper .icon4{
	background-position: 0 -240px;
}

#slotmachinebox #reelbox .wrapper .icon5{
	background-position: 0 -300px;
}

#slotmachinebox #reelbox .wrapper .icon6{
	background-position: 0 -360px;
}
```
```JavaScript
	// 定数定義
	var fps = 60; //FPS
	var interval = 1 / fps * 1000;
	
	var maxRand = 65536; //最大乱数
	//11070
	var configNum = 6; //設定数
	var configTable = [
		// 0:BIG 1:REG 2:コイン 3:スイカ 4:ベル 5:チェリー 6:リプレイ
		[[0,99],[100,149],[150,299],[300,549],[550,869],[870,2539],[2540,4500]], //設定1
		[[0,99],[100,149],[150,299],[300,549],[550,869],[870,2539],[2540,4500]], //設定2
		[[0,99],[100,149],[150,299],[300,549],[550,869],[870,2539],[2540,4500]], //設定3
		[[0,99],[100,149],[150,299],[300,549],[550,869],[870,2539],[2540,4500]], //設定4
		[[0,99],[100,149],[150,299],[300,549],[550,869],[870,2539],[2540,4500]], //設定5
		[[0,99],[100,149],[150,299],[300,549],[550,869],[870,2539],[2540,4500]]  //設定6
	];

	var iconNum = 21; //リールに表示する絵柄絵柄数
	var iconWidth = 120; //絵柄の幅
	var iconHeight = 60; //絵柄の高さ
	
	var reelArray = new Array();
	var reelNum = 3; //リール数
	var reelMargin = 5;
	var reelBaseX = 18;
	var reelBaseY = 92;
	var reelHeight = (iconHeight * iconNum); //リールの高さ
	var reelMoveSpeedY = Math.floor(iconHeight / 3); //リール移動スピード

	var iconArray = [//絵柄配列
		[4, 5, 1, 3, 4, 6, 1, 3, 2, 6, 4, 3, 5, 6, 2, 5, 6, 4, 3, 0, 6],
		[6, 4, 1, 3, 6, 5, 4, 5, 6, 4, 2, 3, 6, 0, 4, 3, 6, 1, 4, 2, 5],
		[5, 3, 1, 4, 6, 3, 4, 0, 6, 3, 5, 6, 2, 3, 4, 6, 5, 0, 3, 4, 6]
	];

	//変数定義
	var configId = Math.floor(Math.random()*configNum); //設定を決める
	
	var reelStopFlg = [null, null, null];
	var reelposY = [0, 0, 0]; //リールの移動量
	
	var winIconArray = [ //当たり絵柄配列
		[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
		[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
		[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
	];
	var hitIcon = [
		[0, 0, 0],
		[0, 0, 0],
		[0, 0, 0]
	];
	
	// リール回転用
	var reelmoveAnime;

	addSlots();

	function slotStart() {
		reelStopFlg = [false, false, false];
		winLottery();
		reelmoveAnime = setInterval(slotMove, interval);
		$('[id^=stopbtn]').css("pointer-events", "auto");
	}

	function slotStop(i) {
			reelStopFlg[i] = true;
		}

	function winLottery() {
		var iArray = [0,0,0];
		var rand = Math.floor(Math.random()*maxRand);
		for (var i = 0; i < configTable[configId].length; i++) {
			if(configTable[configId][i][0] >= rand || rand <= configTable[configId][i][1]){
				console.log("あたり");
				iArray = [i,i,i];
				wIcArrayRewrite(iArray);
				break;
			}
			if(i == configTable[configId].length-1){
				console.log("はずれ");
				iArray[0] = Math.floor(Math.random()*configTable[configId].length);
				iArray[1] = Math.floor(Math.random()*configTable[configId].length);
				iArray[2] = Math.floor(Math.random()*configTable[configId].length);
				wIcArrayRewrite(iArray);
			}
		}
	}

	function wIcArrayRewrite(iArray) {
		for (var i = 0; i < reelNum; i++) {
			for (var j = 0; j < iconNum; j++) {
				if(iconArray[i][j] == iArray[i]){
					winIconArray[i][j] = 1;
				}else{
					winIconArray[i][j] = 0;
				}
			}
		}
	}

	//リール作成
	function addSlots() {
		reelStopFlg[i] = false;
		for (var i = 0; i < reelNum; i++) {
			$('.reel').eq(i).css("left", ((iconWidth + reelMargin) * i) + "px");
			$('.wrapper').eq(i).css("height", reelHeight + "px");
			$('.wrapper').eq(i).css("top", "-" + (iconHeight * Math.floor(Math.random()*iconNum)) + "px");
			for (var j = 0; j < 24; j++) {
				if (j < iconNum) {
					$('.wrapper').eq(i).append("<li class='icon icon" + iconArray[i][j] +
						"'>" + iconArray[i][j] + "</li>");
				} else {
					$('.wrapper').eq(i).append("<li class='icon icon" + iconArray[i][j - 21] +
						"'>" + iconArray[i][j - 21] + "</li>");
				}
			}
		}
	}

	//リール回転
	function slotMove() {
		for (var i = 0, stopCount = 0; i < reelNum; i++) {
			if (!reelStopFlg[i] || reelposY[i] % iconHeight || winIconArray[i][(-reelposY[i] / iconHeight)+1] != 1) {
				reelposY[i] += reelMoveSpeedY;
				if (reelposY[i] > 0) reelposY[i] -= reelHeight;
				$('.wrapper').eq(i).css("top", reelposY[i] + "px");
			} else {
				stopCount++;
			}
			if (stopCount == reelNum) {
				$('#startbtn').css("pointer-events", "auto");
				clearInterval(reelmoveAnime);
				slotHits();
			}
		}
	}

	function slotHits() {
		for (var i = 0; i < reelNum; i++) {
			for (var j = 0; j < reelNum; j++) {
				hitIcon[i][j] = ((-reelposY[i] / iconHeight) + j);
				if (hitIcon[i][j] >= iconNum) {
					hitIcon[i][j] -= iconNum;
				}
			}
		}
		if (iconArray[0][hitIcon[0][0]] == iconArray[1][hitIcon[1][0]] && 
			iconArray[1][hitIcon[1][0]] == iconArray[2][hitIcon[2][0]]) {
			$("#result").html("上段が揃いました");
		} else if (iconArray[0][hitIcon[0][1]] == iconArray[1][hitIcon[1][1]] &&
			iconArray[1][hitIcon[1][1]] == iconArray[2][hitIcon[2][1]]) {
			$("#result").html("中段が揃いました");
		} else if (iconArray[0][hitIcon[0][2]] == iconArray[1][hitIcon[1][2]] &&
			iconArray[1][hitIcon[1][2]] == iconArray[2][hitIcon[2][2]]) {
			$("#result").html("下段が揃いました");
		} else if (iconArray[0][hitIcon[0][2]] == iconArray[1][hitIcon[1][1]] &&
			iconArray[1][hitIcon[1][1]] == iconArray[2][hitIcon[2][0]]) {
			$("#result").html("左斜めが揃いました");
		} else if (iconArray[0][hitIcon[0][0]] == iconArray[1][hitIcon[1][1]] &&
			iconArray[1][hitIcon[1][1]] == iconArray[2][hitIcon[2][2]]) {
			$("#result").html("右斜めが揃いました");
		} else {
			$("#result").html("残念！！");
		}
	}

```
```html
<html>
	<body>
		<div id="result"></div>
		<div id="slotmachinebox">
			<div id="reelbox">
				<div class="reel reel0">
					<ul class="wrapper">
					</ul>
				</div>
				<div class="reel reel1">
					<ul class="wrapper">
					</ul>
				</div>
				<div class="reel reel2">
					<ul class="wrapper">
					</ul>
				</div>
			</div>
		</div>
	</body>
</html>
```

【追記】
「・停止位置を横三つ斜め二つに対応させる」は
```JavaScript
var stopLineArray = [[1,1,1],[0,0,0],[2,2,2],[0,1,2],[2,1,0]]; //停止ライン配列
var stopLineId = 0;
```
このような変数を作って、
```JavaScript
function winLottery() {
	//省略
	stopLineId = Math.floor(Math.random()*stopLineArray.length);
	//省略
}

function slotMove() {
	//省略
	if (!reelStopFlg[i] || reelposY[i] % iconHeight || winIconArray[i][(-reelposY[i] / iconHeight)+stopLineArray[stopLineId][i]] != 1) {
	//省略
}
```
こうしたところ上手くいきました。

スロットゲームのリールを4つの絵柄分移動させてから停止させたい

### 前提・実現したいこと

4x4のタイル状にレイアウトを作り、そこに画像を配置したギャラリーのようなものを作ります。方法は特にこだわりはなく、imgタグで画像を配置しても良いですし、要素にbackground-imageでも問題ありません。

20枚ほど画像を用意しておいて、それら16のエリアにランダムに画像を表示させます。そして、一定サイクルでランダムに画像をフェードin/outで表示切り替えがしたいのですが、方法が見出せません。

画像の追加・削除はありえますので、配列で格納したものをランダムに吐き出す形が良いとは思うのですが、私の知識ではそこまでが精一杯という感じです。

どなたかアドバイスいただければ幸いです。
よろしくお願いします。

4x4のグリッドレイアウトにランダムに画像を配置し、ランダムにフェードin/outで切り替える方法

vagrant up でエラーが起きてしまい、解決できません。初心者なので詳しいことがわからないのですが、Windows１０が更新されてからエラーが発生するようになったと思われます。
エラー内容
Bringing machine 'default' up with 'virtualbox' provider...
==> default: Checking if box 'bento/centos-6.8' is up to date...
==> default: Resuming suspended VM...
==> default: Booting VM...
There was an error while executing `VBoxManage`, a CLI used by Vagrant
for controlling VirtualBox. The command and stderr is shown below.

Command: ["startvm", "2ba2277d-305a-4e21-9eb6-c18372ca87dc", "--type", "headless"]

Stderr: VBoxManage.exe: error: Interface ('VirtualBox Host-Only Ethernet Adapter #2') is not a Host-Only Adapter interface (VERR_INTERNAL_ERROR)
VBoxManage.exe: error: Details: code E_FAIL (0x80004005), component ConsoleWrap, interface IConsole

わかる方がいればご教授いただければ幸いです。

vagrant up エラー

以前にハイブリッドアプリをCordovaを用いて自作しアップしました。
しかし、javascriptでフレームワークをAngularJS1.X系で作成したのですが、ちょっと古いスマホだと動作が重いアプリとなってしましました。
原因として
・ハイブリッドアプリはネイティブではないので遅い。
・Angularjsがそもそも遅い。
・知識不足、機能を複雑にしすぎた。

次もハイブリッドアプリを作ろうとしているのですが、いくつか質問があります。
・ 比較的軽量なフレームワークは何でしょうか？
・ DOM操作やら色々大変ですが生のJavascriptが一番高速なのでしょうか。
・ HTMLでdivの階層を深くしすぎるとやはり遅くなりますか

javascript フレームワーク等　速度について

お世話になっております。すごく素朴な疑問です。

CSSでレイアウトを組む時、要素を左右に回り込ませたりするとき、floatとdisplay flexの
どちらを使うべきなのでしょうか？

それとも、その時々の流行りで違ってくるものなのでしょうか？

私自身は、まだまだ初心者なので、単純にdisplay flexの方が簡単??と思ってしまう部分もあります。特に、メニューなど作る時は、liの親要素にdisplay flex適用でlistが横並び！！みたいな。。。

宜しくお願い致します。

CSSレイアウト　floatとdisplay flexについて

最近耳にするようになったECMAScriptについてwikiなどでも調べたのですが、
言葉の定義・理解が漠然としており質問させていただきました。

「ECMAScript＝JavaScriptの標準仕様」というのは分かったのですが、
下記について教えていただけると嬉しいです。

※私自身は非エンジニアで所謂エージェント業をしています
(出来るだけミスマッチの起きない理解が出来ればと思い質問させていただきました)

【質問】

1.ECMAScriptが標準仕様ということはそれ以外の仕様には何(名称)があるのか？

2.質問1の回答が「なし」であれば、基本的にはJavaScript＝ECMAScriptと抑えても
　問題ないのでしょうか？？(厳密には違うと思うのですが凡その理解レベルでは)

3.質問2とも関係します。質問2がOKである前提の質問となりますが、
　最近求人でES6の経験を問われるケースが増えているのですが、
　凡そ下記理解で問題ないでしょうか。

　・JavaScriptの世界にはECMAScriptという仕様がある
　・ECMAScriptの中でもES5以前とES6以降で全然内容が異なる
　・「JavaScriptが出来ます！」という人のスキルや対応範囲を判別するときは、
　　ES6について質問し、対応経験の有無を聞けば大別できる。


素人の質問ですいません！
ご教示いただけると嬉しいです。