常連

注目の的

現在、javascriptの学習で　スプレットシートからタイムを取得し、条件付きで出力をする処理を行っております。

条件として、(例)A列に〇〇〇〇年〇〇月〇〇日を格納し　
B列に各日付のベストタイムを格納しかつ配列にし年、月、日が合致したら、そのタイムの各月で最もタイムが早いものを各月のベストラップとして配列から取り出し、スプレットシートのセルに書き込むようにしております。

そこで上記に記載したような処理をif else文で作成をしたのですが、コードが膨大になってしまい
処理が重くなってしまってしまいました。

下記が今回のコードになります。
```ここに言語を入力
 if (2021 == y && 1 == m) {
                inputSheet.getRange(2, 8).setValue(Math.min.apply(null, maleTimeArray));
            } else if (2021 == y && 2 == m) {
                inputSheet.getRange(3, 8).setValue(Math.min.apply(null, maleTimeArray));
            } else if (2021 == y && 3 == m) {
                inputSheet.getRange(4, 8).setValue(Math.min.apply(null, maleTimeArray));
            } else if (2021 == y && 4 == m) {
                inputSheet.getRange(5, 8).setValue(Math.min.apply(null, maleTimeArray));
            } else if (2021 == y && 5 == m) {
                inputSheet.getRange(6, 8).setValue(Math.min.apply(null, maleTimeArray));
            } else if (2021 == y && 6 == m) {
                inputSheet.getRange(7, 8).setValue(Math.min.apply(null, maleTimeArray));
            } else if (2021 == y && 7 == m) {
                inputSheet.getRange(8, 8).setValue(Math.min.apply(null, maleTimeArray));
            } else if (2021 == y && 8 == m) {
                inputSheet.getRange(9, 8).setValue(Math.min.apply(null, maleTimeArray));
            } else if (2021 == y && 9 == m) {
                inputSheet.getRange(10, 8).setValue(Math.min.apply(null, maleTimeArray));
            } else if (2021 == y && 10 == m) {
                inputSheet.getRange(11, 8).setValue(Math.min.apply(null, maleTimeArray));
            } else if (2021 == y && 11 == m) {
                inputSheet.getRange(12, 8).setValue(Math.min.apply(null, maleTimeArray));
            } else if (2021 == y && 12 == m) {
                inputSheet.getRange(13, 8).setValue(Math.min.apply(null, maleTimeArray));
            } else if (2022 == y && 1 == m) {
                inputSheet.getRange(18, 8).setValue(Math.min.apply(null, maleTimeArray));
            } else if (2022 == y && 2 == m) {
                inputSheet.getRange(19, 8).setValue(Math.min.apply(null, maleTimeArray));
            } else if (2022 == y && 3 == m) {
                inputSheet.getRange(20, 8).setValue(Math.min.apply(null, maleTimeArray));
            } else if (2022 == y && 4 == m) {
                inputSheet.getRange(21, 8).setValue(Math.min.apply(null, maleTimeArray));
            } else if (2022 == y && 5 == m) {
                inputSheet.getRange(22, 8).setValue(Math.min.apply(null, maleTimeArray));
            } else if (2022 == y && 6 == m) {
                inputSheet.getRange(23, 8).setValue(Math.min.apply(null, maleTimeArray));
            } else if (2022 == y && 7 == m) {
                inputSheet.getRange(24, 8).setValue(Math.min.apply(null, maleTimeArray));
            } else if (2022 == y && 8 == m) {
                inputSheet.getRange(25, 8).setValue(Math.min.apply(null, maleTimeArray));
            } else if (2022 == y && 9 == m) {
                inputSheet.getRange(26, 8).setValue(Math.min.apply(null, maleTimeArray));
            } else if (2022 == y && 10 == m) {
                inputSheet.getRange(27, 8).setValue(Math.min.apply(null, maleTimeArray));
            } else if (2022 == y && 11 == m) {
                inputSheet.getRange(28, 8).setValue(Math.min.apply(null, maleTimeArray));
            } else if (2022 == y && 12 == m) {
                inputSheet.getRange(29, 8).setValue(Math.min.apply(null, maleTimeArray));
            }

```

※ yは年　mは月です。
if (2021 == y && 1 == m)は2021年がy(年と同じ)かつ1月がm(月と同じ)だったら

私はまだjavascript初学者でどのようにしたらもっと処理を軽くし管理がしやすくなるか
お時間のある方がいらっしゃいましたら、ご助言を頂ければ幸いです。

何卒宜しくお願い致します。

Javascript if else 文を短縮し処理を軽くしたい

ログイン画面を作っています。

【仕様】
①ログインID と パスワード を入力し、ログインボタンを押下するとログイン処理を実行する
②ログイン処理の結果、ログインIDとパスワードが正しかったら、クッキーに ログインID と パスワードを保存し、画面遷移する
③次回ログイン画面を表示したとき、クッキーが保存されていれば、自動的にログインIDとパスワードを入力する

こんな仕様のログイン画面を作っていたのですが問題が発生しました。

##問題発生
他のサイト(phpPgAdmin) にログインIDとパスワードを入れて、ブラウザが パスワードを保存しますか？とたずねてきたときに 保存 する と、
自作のログイン画面のログインID および パスワードに、他のサイトで入れたログインIDとパスワードが自動で入ってしまっています。


##環境
・他のサイト(phpPgAdmin) と、 自作のログイン画面は同じホスト名（＋ドメイン名）です。
例)
http://watashino.saito.jp/phpPgAdmin/
http://watashino.saito.jp/web/login.html


##検証
・他のサイト(phpPgAdmin) のログイン入力欄のidやnameは自作のログイン画面のそれと被っていません
・自作のログイン画面の form タグ および、input タグ に  autocomplete="off" を記してみましたが、だめでした 
・仕様の③で、前回ログインしたときのログインIDとパスワードをJavaScriptにより自動入力するのですが、このクッキーが無い場合は初期値が"" なのですが、これだと ブラウザが勝手に他のサイトのログイン情報で内容を上書きしてしまうようです。
初期値に"" か、空白(" ")以外を設定すると、ブラウザが上書きしないようです。

つまり、"" で JavaScriptで上書きは通用しなかったです･･･

そのときのコードです。(jQueryを利用しています)
```jQuery
jQuery(function ($) {
	// ==================
	// ログイン情報オート入力
	// ==================
	var log = getCookie(COOKIE_LOGIN);	// ログイン情報のクッキー取得
	if (log == "") {
		// ログイン情報のクッキーがない時
		$("#login_id").val("");     // 入力欄には 他サイトのIDが表示される (NG)
		$("#login_id").val(" ");    // 入力欄には 他サイトのIDが表示される (NG)
		$("#login_id").val("123");  // 入力欄には 123が表示される (OK)
		$("#passwd").val("1234"); 
	} else {
		// ログイン情報のクッキーから入力欄に自動入力
		var bf         = new Blowfish(BLOWFISH);
		var plaintext  = bf.decrypt64(log); // 復号化
		var log        = plaintext.split(DIVIDE_CHAR);
		$("#login_id").val(log[0]);
		$("#passwd")  .val(log[1]);
	}
}
```

##質問
ブラウザ(Chrome)が自動入力したあとにJavaScriptを実行させて、ログインの入力ボックスを""で上書きしてしまえばいいのではないかと考えますが、どうしたらいいのでしょうか？

または、自動入力させないなにか方法はありますか？

以上よろしくお願い致します。

##参考
サイボウズエンジニアのブログに興味深い記事がありました
http://blog.cybozu.io/entry/7452

Chromeでオートコンプリートを阻止する方法について

Laravel初学者です。

この「ループ変数($loop)」とそのプロパティ(->firstとか->lastとか)が使えるのは、**@foreachディレクティブと@forelseディレクティブ限定という理解で良いのでしょうか？**


Laravelのループ変数「$loop」について、
公式ドキュメント「繰り返し」の部分
[https://readouble.com/laravel/8.x/ja/blade.html](https://readouble.com/laravel/8.x/ja/blade.html)
には、
> Tip!! ループするときは、ループ変数を使用して、ループの最初の反復か最後の反復かなど、ループに関する重要な情報を取得できます。

とあります。


@forディレクティブや@whileディレクティブでの繰り返しで「$loop」を使おうとするとエラーになるので質問しました。

例えば・・・
```blade
    @for($i=1; $i<10; $i++)
        @if($loop->first)
        表示するよ
        @endif
    @endfor
```
⇒$loop is undefinedのエラーが出力。

使えない理由というと、大げさだと思いますが、その辺りも補足していただけると嬉しいです。


[追記]
コメントにも記載しましたが、質問時点では、このような認識でした。
①ドキュメントの「ループするときは、ループ変数を使用して、・・・・ループに関する重要な情報を取得できます」
②ということは@for、@while、@foreach、@forelseの「全てのループ」でループ変数$loopが使えるということか！　←このように認識したのがダメだった
③@for、@whileではエラー($loopなんてない)になった。@foreach、@forelseでは使えた。
④ん？@foreach、@forelse限定なの？　ループで使えると書いてあるのに？！
⑤質問してみようとなった。

結果、このドキュメントでいう「ループ」とは、forやwhileなどのループを含んだ意味ではなく、**@foreachと@forelseのループだけ使用できる実装がされているということ（サンプルはforeachしか示されていないから）**なんですね。

回答・アドバイスをいただいた皆様、レベルの低い話に長々とお付き合いいただきありがとうございました。
同じように思われた方が日本のどこかにおられて、この質問が役に立てば幸いです。

ループ変数$loopを使えるのは、@foreachと@forelseディレクティブ限定ですか？

### 質問事項

JavaScript初学者です。
addEventListenerにて定義した処理（イベントリスナー）の実行タイミングを理解しようと以下のコードを実行したのですが、実行結果が想定と異なりました。原因はなんでしょうか。。。

### 該当のソースコード

```JavaScript
document.getElementById("btn").addEventListener("click",function () {
        var xhr = new XMLHttpRequest();

        xhr.addEventListener("readystatechange",function () {
          console.log("readyState：" + xhr.readyState);
        },false)

        console.log("1.Open前");
        xhr.open("GET", "scripts/book.xml");
        console.log("2.Open後,Send前");
        xhr.send(null);
        console.log("3.Send後");

      },
      false
    );
```
・ボタン押下時にXMLHttpRequestを実行
・XHLHttpRequestのreadystateが変化したタイミングでイベント実行

### 想定した結果
イベント発火によるイベントリスナーはsetTimeoutのように、WebAPIによってタスクキューに入ってからコールスタックに入ると理解しているので、イベントリスナーは最後に行われると思ってました。

```console
1.Open前
2.Open後,Send前
3.Send後
readyState：1　　　　　　＜＝Openの時のイベント処理
readyState：2
readyState：3
readyState：4
```


### 実際の結果

実際には、同期処理である「console.log("2.Open後,Send前");」の処理よりも先に、Openによるイベントリスナーが動作しています。
```console
1.Open前
redyState：1　　　　　　＜＝Openの時のイベント処理
2.Open後,Send前
3.Send後
redyState：2
redyState：3
redyState：4
```

JavaScript イベントリスナーの実行タイミングを理解したい

すみません。
無知ながら恐縮なのですが、CSS、JSで以下参考サイトのような、
カーソルと連動して３Dで動くwebを作りたいと思っております。

参考サイト：
https://www.clicktorelease.com/code/css3d-clouds-tutorial/final.html
https://www.clicktorelease.com/blog/how-to-make-clouds-with-css-3d/

ただ、こちらの参考サイトはカーソルの動きに過敏?に反応し、
カーソルを動かせば要素もすぐ動く、といった動作で、
カーソルを動かした時の動きに滑らかさがありません。

これにヌルヌルとして滑らかの動きを付けれれば、、と思っております。

カーソルを動かした時の、要素の動く速度などを調整し、easingなどを付ければいいのかと思うのですが、
どのように書けばよいのでしょうか。。


参考サイトのJSは以下のようになっております。


```javascript
<script>

	(function() {
		var lastTime = 0;
		var vendors = ['ms', 'moz', 'webkit', 'o'];
		for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
			window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
			window.cancelRequestAnimationFrame = window[vendors[x]+
			  'CancelRequestAnimationFrame'];
		}

		if (!window.requestAnimationFrame)
			window.requestAnimationFrame = function(callback, element) {
				var currTime = new Date().getTime();
				var timeToCall = Math.max(0, 16 - (currTime - lastTime));
				var id = window.setTimeout(function() { callback(currTime + timeToCall); },
				  timeToCall);
				lastTime = currTime + timeToCall;
				return id;
			};

		if (!window.cancelAnimationFrame)
			window.cancelAnimationFrame = function(id) {
				clearTimeout(id);
			};
	}())

	var layers = [],
		objects = [],

		world = document.getElementById( 'world' ),
		viewport = document.getElementById( 'viewport' ),

		d = 0,
		p = 400,
		worldXAngle = 0,
		worldYAngle = 0;

	viewport.style.webkitPerspective = p;
	viewport.style.MozPerspective = p;
	viewport.style.oPerspective = p;

	generate();

	function createCloud() {

		var div = document.createElement( 'div'  );
		div.className = 'cloudBase';
		var x = 256 - ( Math.random() * 512 );
		var y = 256 - ( Math.random() * 512 );
		var z = 256 - ( Math.random() * 512 );
		var t = 'translateX( ' + x + 'px ) translateY( ' + y + 'px ) translateZ( ' + z + 'px )';
		div.style.webkitTransform = t;
		div.style.MozTransform = t;
		div.style.oTransform = t;
		world.appendChild( div );

		for( var j = 0; j < 5 + Math.round( Math.random() * 10 ); j++ ) {
			var cloud = document.createElement( 'img' );
			cloud.style.opacity = 0;
			var r = Math.random();
			var src = 'cloud.png';
			( function( img ) { img.addEventListener( 'load', function() {
				img.style.opacity = .8;
			} ) } )( cloud );
			cloud.setAttribute( 'src', src );
			cloud.className = 'cloudLayer';

			var x = 256 - ( Math.random() * 512 );
			var y = 256 - ( Math.random() * 512 );
			var z = 100 - ( Math.random() * 200 );
			var a = Math.random() * 360;
			var s = .25 + Math.random();
			x *= .2; y *= .2;
			cloud.data = {
				x: x,
				y: y,
				z: z,
				a: a,
				s: s,
				speed: .1 * Math.random()
			};
			var t = 'translateX( ' + x + 'px ) translateY( ' + y + 'px ) translateZ( ' + z + 'px ) rotateZ( ' + a + 'deg ) scale( ' + s + ' )';
			cloud.style.webkitTransform = t;
			cloud.style.MozTransform = t;
			cloud.style.oTransform = t;

			div.appendChild( cloud );
			layers.push( cloud );
		}

		return div;
	}

	window.addEventListener( 'mousewheel', onContainerMouseWheel );
	window.addEventListener( 'DOMMouseScroll', onContainerMouseWheel );
	window.addEventListener( 'mousemove', onMouseMove );
	window.addEventListener( 'touchmove', onMouseMove );

	function onMouseMove ( e ) {

		var x = e.clientX || e.touches[ 0 ].clientX;
		var y = e.clientY || e.touches[ 0 ].clientY;

		worldYAngle = -( .5 - ( x / window.innerWidth ) ) * 180;
		worldXAngle = ( .5 - ( y / window.innerHeight ) ) * 180;
		updateView();
		event.preventDefault();

	}

	function onContainerMouseWheel( event ) {

		event = event ? event : window.event;
		d = d - ( event.detail ? event.detail * -5 : event.wheelDelta / 8 );
		updateView();
		event.preventDefault();

	}

	function generate() {

		objects = [];

		if ( world.hasChildNodes() ) {
			while ( world.childNodes.length >= 1 ) {
				world.removeChild( world.firstChild );
			}
		}

		for( var j = 0; j < 5; j++ ) {
			objects.push( createCloud() );
		}

	}

	function updateView() {
		var t = 'translateZ( ' + d + 'px ) rotateX( ' + worldXAngle + 'deg) rotateY( ' + worldYAngle + 'deg)';
		world.style.webkitTransform = t;
		world.style.MozTransform = t;
		world.style.oTransform = t;
	}

	function update (){

		for( var j = 0; j < layers.length; j++ ) {
			var layer = layers[ j ];
			layer.data.a += layer.data.speed;
			var t = 'translateX( ' + layer.data.x + 'px ) translateY( ' + layer.data.y + 'px ) translateZ( ' + layer.data.z + 'px ) rotateY( ' + ( - worldYAngle ) + 'deg ) rotateX( ' + ( - worldXAngle ) + 'deg ) rotateZ( ' + layer.data.a + 'deg ) scale( ' + layer.data.s + ')';
			layer.style.webkitTransform = t;
			layer.style.MozTransform = t;
			layer.style.oTransform = t;
		}

		requestAnimationFrame( update );

	}

	update();

	</script>

```

上記コードにどのうように書き足せば思った動きに近づくか、
お教えいただければ幸いです。。

どうぞよろしくお願いいたします。

カーソルの動きに合わせて要素を動かす場合の速度の指定方法について

クロージャーというものをあまり使ったことがなかったので学んでみました。

ここのページがわかりやすかったです。

[私が今までクロージャを理解できなかった理由 - プログラミングを勉強するブログ
https://artgear.hatenablog.com/entry/20120115/1326635158](https://artgear.hatenablog.com/entry/20120115/1326635158)

で、学んでみたところ理解できたつもりなのですが、

このクロージャーというもの(クロージャーパターン)は、
いわゆるベタ書きのJavaScriptなら、グローバル的な変数を内部に閉じ込めてプライベート化して
関数を外部公開する意味がありそうに思いますが、

現代的なJSで、CommonJSでもESModulesでもいいのですが、モジュール分割している書き方(モジュールパターン)の場合は、
内部のプライベート変数は外部に公開されないので、
クロージャーで閉じ込める書き方をする必要がないと思うのですが

そのような理解をしておいて大丈夫でしょうか？

参考ですがこんなコードを書いています。
[https://github.com/standard-software/partsjs/blob/v7.4.0/source/syntax/canUseMap.js](https://github.com/standard-software/partsjs/blob/v7.4.0/source/syntax/canUseMap.js)
```
let _canUseMapFlag;

export const canUseMap = () => {
  if (isUndefined(_canUseMapFlag)) {
    try {
      new Map();
      _canUseMapFlag = true;
    } catch (e) {
      _canUseMapFlag = false;
    }
  }
  return _canUseMapFlag;
};
```

Mapが文法的にOKならtrue、を返す関数です。
超古い環境ではMapは使えない場合があるから、こんな関数を作ってみているのですが
これは簡単にクロージャー化できるのですが、クロージャー化する意味もないのではないかと思っているのです。

もっとクロージャーについて使い道がある、ということや、
あるいは、クロージャーはもういらないパターンだよ、
ということも知っていたり、ご意見いただけたら助かります。
よろしくお願いします。

---
追記

追加の例ですが
https://github.com/standard-software/partsjs/blob/v7.4.0/source/platform/platform.js
ここの、name とか、browserName も、呼び出すために毎回indexOfを何度もするよりかは、一度取得した後にキャッシュした値を次回から返す、というようにしようかなと思ったりです。
こういうパターンの場合はクロージャーパターンでも、モジュールパターンでも、あまり変わりなさそうな気がしました。