時間になったら動画が再生されるサイトを作った

## はじめに

年越しは「ウルトラソウル ハイッ！」でしたいですよね？

でもタイミングを合わせるのが難しい…

そういうときは！

## 時間になったら勝手に動画が再生されるアプリ

令和が始まる瞬間の画像（2019年の年越しのときは撮るの忘れてた）

## なぜこんなアプリを作ったか

「12月31日の23時58分54秒にウルトラソウルを流すとウルトラソウル ハイッ！でちょうど新年を迎えられる」ということをTwitterなどで見て、
もっと楽にウルトラソウルを流したい…なんて思ったのがきっかけです。

それと、他の曲一緒に流して~~うるさい~~**楽しい年越しを迎えたい**ということでこのアプリを作りました。

## 使い方

1. 動画をリストから選ぶ

ランチメンバーをランダムでいい感じに選ぶGASスクリプト


以下のようなURLをクリックするだけで、規定の配列から何人か選んでくれる。

“`
https://script.google.com/macros/s/XXXXX-XXXX/exec
https://script.google.com/macros/s/XXXXX-XXXX/exec?num=2
https://script.google.com/macros/s/XXXXX-XXXX/exec?num=3
https://script.google.com/macros/s/XXXXX-XXXX/exec?num=4
“`

以下のようなスクリプトをGASにいれて、Webアプリケーションとして公開したらOK

“`js
function doGet(e) {
if(!isOurG

JavaScript　DOM操作で要素の追加と削除を行う

#要素を追加する
“`html:index.html

JavaScript Practice

今日の天気

JavaScript　DOM操作でCSS（スタイル）の変更を行う

#CSS（スタイル）を変更する

“`html:index.html

JavaScript Practice

今日の天気

晴れ<

JavaScript　DOM操作による要素へのアクセス

#class属性、セレクタで要素にアクセスする
>class=”weather”

“`html:index.html

JavaScript Practice

今日の天気

javascriptの++iはi++より早いのか？

C言語やjavascriptなどのプログラミング言語にはインクリメント演算子がある。

インクリメント演算子は変数の数値を1加算する動作する。

“`js
i++ // 後置インクリメント
++i // 前置インクリメント
“`

インクリメント演算子には前置インクリメントと後置インクリメントがあり、違いは評価値が違うこと。
前置インクリメントは1加算したあとの値、後置インクリメントは1加算する前の値を評価値として返す。

### C言語では++iはi++より早い

C言語だと++iはi++よりパフォーマンスが良い。以下の記事が参考になる。

この記事によると++iはi++に比べて一時的な変数を使用しないため動作が早いようだ。

### jsでも検証してみた

検証コード↓

“`js
const TIMES = 1000000;
let tmp = 0;
function test1() {
for (let i = 0; i < TIMES ; ++

Self-organization mapをJavaScriptで実装した

# はじめに

「[色々な機械学習処理をブラウザ上で試せるサイトを作った](https://qiita.com/norimy/items/669c19ecf2256b3ecae5)」中で実装したモデルの解説の十二回目です。

今回はSelf-organization map（自己組織化マップ）の実装について解説します。

デモは[こちら](https://ai-on-browser.github.io/)から。（TaskをClusteringにして、ModelのSelf-organization mapを選択）
実際のコードは[som.js](https://github.com/ai-on-browser/ai-on-browser.github.io/blob/master/model/som.js)にあります。

なお、可視化部分については一切触れません。

# 概説

[こちらのQiitaの記事](https://qiita.com/tohru-iwasaki/items/e51864269767ccc07254)に全て書いてあります。

これの潜在空間を多次元に対応させつつ、

JavaScript　DOM操作でHTML要素を書き換える

#＜dd＞タグにidが設定されているのでid名を指定して対象のHTML要素を書き換えます！

“`html:index.html
　
　

　
　
　
　
　

　
　

JavaScript Practice

　

　

今日の天気

　

晴れ

js.DOMの基本

ブラウザは、htmlを読み込むと内部的にDOM（Document Object Model）と呼ばれるデータ構造が作られて、その内容に応じてページが描画がされる、という仕組みになっている。

【Railsアプリ】販売手数料をJavaScriptで計算しようとしたら出てくる「NaN」を解決できたので、備忘録として残しておきます。

## ミス内容
入力された金額の販売手数料（10%）を、JavaScriptを使って計算しようという実装を行っていた時に突如現れた「NaN」。
最初のコードは以下の通り。

“`javascript
function calc (){
// id=”item-priceの要素を取得。
const itemPrice = document.getElementById(“item-price”);
// 値が入力された時にイベントを発火。
itemPrice.addEventListener(‘input’, function(){
const Tax = 0.1;
const tax_fee = itemPrice * Tax;
const profit =

【JavaScript】 JSONをオブジェクトに変換　parseメソッド

# JSON.parseメソッドとは?
JSON形式で書かれた文字列をJavaScriptのJSONオブジェクトに変換するメソッドです。
変換した場合は、JavaScriptの中でJSONのデータを自由に扱えるようになります。

# 書き方

“`
変数 = JSON.parse(変換するJSON [, 関数])
“`

# 実装例

“`javascript
const json = ‘{“firstName”:”太郎”,”lastName”:”山田”}’;

const obj = JSON.parse(json); // =>JSONをJavaScriptのオブジェクトに変換

console.log(obj.firstName); // =>太郎

console.log(obj.lastName); //　=>山田

“`

# parseメソッドの引数に関数を使用する
以下はキーがfirstNameのとき、値をたろうで返し、それ以外はそのまま返します。
指定したキー(firstName)の値のみが変更されています。

“`javascript
const json

リボルバーリストの作成

円形のリストを表示し、スクロールと連動して回転するピストルのリボルバーのような
アニメーションをするリストの作成


# デモページ
https://syogo-suganoya.github.io/revolver/

# ソース
https://github.com/Syogo-Suganoya/revolver

# 説明
## リストの作成
回転用のリストの作成をします

CSSで子要素の表示を維持しつつ、要素を回転させる方法
https://www.nxworld.net/css-element-rotate.html

こちらの記事を参考に画面作成をします

今回はスクロールとともに回転させる動きを実装するので、下記をはじめとするのanimation部分は不要です

“` css
ul {
animation: rot

[React] JavaScriptのクラスとReact

#JavaScriptのクラスとReact

※ 個人用の覚え書きでございます。

###JavaScriptのクラス（継承）

“`javascript:script.js
class Class_1{
constructor(name, age) {
this.name = name;
this.age = age;
}

info() {
console.log(`名前は${this.name}です`);
console.log(`${this.age}歳です`);
}
}

class Class_2 extends Class_1 {
}

const class_2 = new Class_2(“山田”,20);

class_2.info();
“`

###React（ボタンをクリックすると表示が切り替わる）

“`react:app.js
import React from ‘react’;

class App extends React.Component {
constructor(props) {

【Vue 2.x】Composition API の readonly と shallowReadonly で気を付けること

# TL;DR
– `@vue/composition-api` [v1.0.0-beta.21](https://github.com/vuejs/composition-api/releases/tag/v1.0.0-beta.21) から `readonly()`, `shallowReadonly()` が提供されるようになった
– `readonly()` は引数で受け取ったオブジェクトの型を **DeepReadonly 化して返しているだけ**である
– `shallowReadonly()` は Vue 3 のものとほぼ同じように使える

# `readonly()` と `shallowReadonly()` とは？
`readonly()` は Vue 3 ではリリース時から提供されているリアクティビティ API で、リアクティブな状態を受け取ってリードオンリーなリアクティブな状態を返すことを目的とする関数です。

`readonly()` のコード例[^1]

“`javascript
//

QuickJSでお手軽ESP32＋Javascript実行環境

@binzume さんが投稿をされて、ESP32でもJavascriptが動くことを知りました。( [ESP32 と QuickJS で小さなJavaScript実行環境を作る](https://qiita.com/binzume/items/f04d3b1b06cd0f7d3111) )
しかもES2020に対応しているなんて素敵です。

以下のことができることを目指します。

* console.logがSerial出力されること(これはすでに@binzumeさんが実装されています)
* LCD、Wire(I2C)、GPIOをJavascriptから触れるようにします。
* JavascriptのソースコードをWebから取得します。

3番目が今回のモチベーションで、ESP32起動時にネットワークから取得することで、PlatformIOやArduino IDEから毎度コンパイル・書き込みを行う必要がなくなります。動作確認が終わったら、ROMに埋め込みます。

毎度の通りGitHubに上げておきます。

poruruba/Esp32QuickJS_sample
　https://gi

[PlayCanvas] Rigidbodyを持ったTemplateをinstantiateする時の注意点

# はじめに
PlayCanvasに **Template** という機能が実装されています。
これによりEntityやコンポーネントなどを組み合わせたものをアセットとして保存できるようになり、別シーンでも同じ構成物をいちいち作る必要がありません。
またTemplateをインスタンス化することもできるので、シーンにベースEntityを置いておく必要がなくなりました。

# まずはインスタンス化
まずは手短にインスタンス化を行います。

“` javascript:Sample
var Generator = pc.createScript(‘generator’);

Generator.attributes.add(‘tmpl’, {type: ‘asset’, assetType: ‘template’});

Generator.prototype.initialize = function() {
if( this.tmpl ){
// インスタンス化
var instance = this.tmpl.resource.instanti

Javascriptの配列とオブジェクトの分割代入とは

こんにちは！
プログラミング初心者のstraw_engineです。
何も知らないことだらけでとりあえず内定先の方からおすすめしていただいた[JavaScript本格入門](https://www.amazon.co.jp/dp/B01LYO6C1N/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1)という本のアウトプットをしようかと思います。

##分割代入とは？

###分割代入（配列）

分割代入についてここでは記述します。
**分割代入とは配列、もしくはオブジェクトを分解して配下の要素/プロパティを個々の変数に分解するための構文です。**
ES2015以前であれば配列から値を取り出すために、**一つ一つの要素にアクセスする必要**があったそうです。
下記みたいな感じです。

“`javascript

var data = [1,2,3,4,5,6];
var x0 = data[0];
var x1 = data[1];
//要素の数だけ書く必要があった。
“`

しかし、ES2015以降はとても便利になって、分割代入によってこのめん

$(window).on(‘load’)関数がIEだと動かない理由と対処法

##問題点
jQueryにて以下のようなコードを書くと\$(window).on(‘load’)の中身が動作しない場合がある。

“`javascript
$(function(){
$(window).on(‘load’, function(){
});
});
“`
\$(function()内に\$(window).on(‘load’)関数を記述すると\$(window).on(‘load’)の中身が動作しなくなってしまうのだ。
これは以下のように修正すると動くようになる。

“`javascript
$(function(){
});

$(window).on(‘load’, function(){
});
“`

##関数の実行タイミングについて
なぜ上のような記述でエラーが出てしまうのか、それはJSの実行タイミングが関係してくる。
まず上に出てきた２つの関数の実行タイミングについておさらいする。

**\$(function()**
HTML(DOM)の読み込みが終わったら関数の中の処理を実行する。
**\$(window).on(‘load’)**
画像

同期処理、Promise、Async/Awaitで相互にエラーハンドリングする一覧

# 同期処理と非同期処理の間でエラーを渡す

エラー処理の引き渡しの資料はQiitaでもTipsとしていっぱい転がっている。しかし可能性として有りうる同期処理・Promise・Async/Await相互のエラー受け渡しについて言及したものは少ない。そこで、それらをできるだけ網羅してみたつもりである。
読みやすくなる前提知識は以下。

– 自前のエラーはインスタンスの生成(`new Error`)で作る
– エラーはthrowで投げる
– 同期処理中のエラーはtry-catch構文で拾う
– PromiseのエラーはPromise.catchメソッドで拾う
– Async関数内のエラーはthrowで投げ、try-catch構文で拾う

この上で、コードと実行結果を交えて、Uncaughtなエラーをうまく扱っていく。

## 調べたきっかけ

とあるOSSを使ってみたが、非同期処理の結果が返ってこない。そのときはエラー処理が問題なのかどうかの切り分けができず、苦労することに。

__イベントループ、try-catch、非同期処理、Async関数、エラーオブジェクト…__

エラーをハンドル

promise、asyncとawaitについて（自分用）

* 非同期処理を行ったあとに、処理を実行したい
* 500ミリ秒後に、helloを実行し、そのあとにworldを実行したい

“`
setTimeout(() => console.log(‘hello’), 500);
console.log(‘world’);
“`

* worldのあとに、helloが実行されてしまった
* さらにコールバックを使って実現してみよう！

“`
setTimeout(() => {
　console.log(‘hello’);
setTimeout(() => {
console.log(‘world’);
}, 500);
}, 500);
“`

* できたけど、ネスト化していてわかりづらい（コールバック地獄）
* promiseでわかりやすくかけるらしい

“`
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
console.log(‘hello’);
resolve();